合并

src/views/enterpriseLarge/digitalizationScreen/components/leftPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="leftPage">
     <div class="topPage">
-      <Title style="font-size: 22px" title="企业关键指标" />
+      <Title title="企业关键指标" />
       <div class="indicators">
         <div class="indicator-card" v-for="indicator in indicators" :key="indicator.id">
           <div style="display: flex; align-items: baseline; gap: 4px; margin-bottom: 5px">
@@ -17,7 +17,7 @@
     </div>
 
     <div class="endPage">
-      <Title style="font-size: 22px" title="人员情况" />
+      <Title title="人员情况" />
       <!-- 人员总览区域 -->
       <div class="people_overview">
         <div class="people_overview_content">
@@ -80,7 +80,7 @@
 
       <!-- 项目出勤率柱状图 -->
       <div class="project_attendance_chart">
-        <Title style="font-size: 22px" title="项目出勤率统计" />
+        <Title title="项目出勤率统计" />
 
         <div class="chart_content" ref="attendanceChartRef"></div>
       </div>
@@ -108,31 +108,31 @@ const mapChartRef = ref<HTMLDivElement | null>(null);
 const indicators = ref([
   {
     id: '1',
-    name: '在建项目',
+    name: '光伏项目',
     value: '28',
     unit: '个',
     iconPath: '/assets/demo/beUnder.png'
   },
   {
     id: '2',
-    name: '合同总额',
+    name: '风电项目',
     value: '288.88',
-    unit: '亿元',
-    iconPath: '/assets/demo/contract.png'
+    unit: '个',
+    iconPath: '/src/assets/images/contract.png'
   },
   {
     id: '3',
-    name: '总容量',
+    name: '光伏系统总容量',
     value: '158.88',
-    unit: '个',
-    iconPath: '/assets/demo/totalCapacity.png'
+    unit: 'MW',
+    iconPath: '/src/assets/images/totalCapacity.png'
   },
   {
     id: '4',
-    name: '今日施工',
+    name: '风电项目总容量',
     value: '18',
-    unit: '个',
-    iconPath: '/assets/demo/todayConstruction.png'
+    unit: 'MW',
+    iconPath: '/src/assets/images/todayConstruction.png'
   }
 ]);
 
@@ -255,7 +255,7 @@ const scrollToProject = (index: number) => {
     // 计算滚动条应该移动到的位置
     // 确保当前项目居中显示
     const totalProjects = projectAttendanceData.value.length;
-    const visiblePercentage = 15; // 与dataZoom的end值保持一致
+    const visiblePercentage = 20; // 与dataZoom的end值保持一致
     const itemPercentage = 100 / totalProjects; // 每个项目所占总宽度的百分比
 
     // 计算新的start值，使当前项目尽量居中显示
@@ -273,28 +273,6 @@ const scrollToProject = (index: number) => {
   }
 };
 
-/**
- * 开始自动滚动
- */
-const startScroll = () => {
-  if (scrollInterval.value) return;
-
-  scrollInterval.value = window.setInterval(() => {
-    currentScrollIndex.value++;
-    scrollToProject(currentScrollIndex.value);
-  }, scrollSpeed);
-};
-
-/**
- * 停止自动滚动
- */
-const stopScroll = () => {
-  if (scrollInterval.value) {
-    clearInterval(scrollInterval.value);
-    scrollInterval.value = null;
-  }
-};
-
 /**
  * 获取项目出勤率统计数据 - 保持项目出勤率图表功能
  */
@@ -367,10 +345,10 @@ const getKeyIndexData = async () => {
   const { data, code } = res;
   if (code === 200) {
     // 更新指标数据，使用接口返回的指定字段
-    indicators.value[0].value = data.ongoingProject || 0;
-    indicators.value[1].value = data.totalContractAmount || 0;
-    indicators.value[2].value = data.totalCapacity || 0;
-    indicators.value[3].value = data.todayProject || 0;
+    indicators.value[0].value = data.photovoltaicCount || 0;
+    indicators.value[1].value = data.windElectricityCount || 0;
+    indicators.value[2].value = data.photovoltaicTotalCapacity || 0;
+    indicators.value[3].value = data.windElectricityTotalCapacity || 0;
   }
 };
 
@@ -593,17 +571,9 @@ const initAttendanceChart = () => {
 
   attendanceChart.setOption(option);
 
-  // 添加鼠标悬浮事件监听
+  // 移除自动滚动功能，保留其他事件监听
   if (attendanceChartRef.value) {
-    // 鼠标进入图表区域时停止滚动
-    attendanceChartRef.value.addEventListener('mouseenter', () => {
-      stopScroll();
-    });
-
-    // 鼠标离开图表区域时重新开始滚动
-    attendanceChartRef.value.addEventListener('mouseleave', () => {
-      startScroll();
-    });
+    // 保留其他可能需要的事件监听器
   }
 
   // 添加窗口大小变化时的图表更新
@@ -619,11 +589,7 @@ const initAttendanceChart = () => {
   onUnmounted(() => {
     window.removeEventListener('resize', handleResize);
 
-    // 移除鼠标事件监听
-    if (attendanceChartRef.value) {
-      attendanceChartRef.value.removeEventListener('mouseenter', stopScroll);
-      attendanceChartRef.value.removeEventListener('mouseleave', startScroll);
-    }
+    // 移除鼠标事件监听（已在上面移除添加的事件监听）
   });
 };
 
@@ -652,9 +618,6 @@ onMounted(async () => {
 
   // 再初始化图表
   initAttendanceChart();
-
-  // 图表初始化后自动开始滚动
-  startScroll();
 });
 
 onUnmounted(() => {
@@ -667,9 +630,6 @@ onUnmounted(() => {
     attendanceChart.dispose();
     attendanceChart = null;
   }
-
-  // 清理滚动计时器
-  stopScroll();
 });
 </script>
 
@@ -879,10 +839,8 @@ onUnmounted(() => {
   text-shadow: 0px 1.24px 6.21px rgba(0, 200, 83, 0.5);
 }
 
-/* 点阵地图样式 */
 .people_map {
   width: 100%;
-  height: 120px;
   margin-top: 8px;
   background: rgba(10, 24, 45, 0.5);
   border: 1px solid rgba(29, 214, 255, 0.1);