0917

src/views/zhinengxunjian/banzhuzhuangtai.vue

@@ -97,10 +97,10 @@
           <div class="chart-card-container">
             <div class="chart-card">
               <div class="chart-header">
-                <h3>班组周任务情况</h3>
+                <h3>班组每周任务情况</h3>
               </div>
               <div class="chart-content">
-                <!-- 环形图容器 - 增加明确的尺寸设置 -->
+                <!-- 环形图容器 -->
                 <div id="teamChart" class="chart-container"></div>
               </div>
             </div>
@@ -110,6 +110,9 @@
 
       <!-- 班组任务完成情况表格 -->
       <div class="table-wrapper">
+        <div class="table-header-title">
+          <h2>班组任务完成情况</h2>
+        </div>
         <el-table :data="pagedTableData" stripe style="width: 100%" highlight-current-row class="custom-table">
           <el-table-column align="center" prop="name" label="班组名称" min-width="120"></el-table-column>
           <el-table-column align="center" prop="leader" label="组长" min-width="100"></el-table-column>
@@ -181,6 +184,7 @@ import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
 import router from '@/router';
 import TitleComponent from './TitleComponent.vue';
 import * as echarts from 'echarts'; // 导入ECharts
+import renwuImage from '@/assets/images/renwu.png';
 
 // 搜索条件
 const searchKeyword = ref('');
@@ -228,6 +232,20 @@ const rawTeamData = ref([
   }
 ]);
 
+// 提取任务数据用于图表展示
+const teamChartData = computed(() => {
+  return rawTeamData.value.map((team) => ({
+    name: team.name,
+    value: team.currentTasks, // 使用当前任务数
+    teamId: team.id
+  }));
+});
+
+// 计算总任务数
+const totalTasks = computed(() => {
+  return teamChartData.value.reduce((sum, item) => sum + item.value, 0);
+});
+
 // 分页相关
 const currentPage = ref(1);
 const pageSize = ref(10);
@@ -352,7 +370,7 @@ const handleInspectionManagement3 = () => {
 // ECharts实例
 let chartInstance = null;
 
-// 初始化ECharts环形图
+// 初始化ECharts图表 - 修改为环形图样式
 const initChart = () => {
   // 使用nextTick确保DOM已完全渲染
   nextTick(() => {
@@ -372,79 +390,100 @@ const initChart = () => {
     chartInstance = echarts.init(chartDom);
 
     // 准备图表数据
+    const allData = teamChartData.value;
+
+    // 定义颜色方案
+    const teamColors = [
+      '#1890ff', // 第一运维组 - 蓝色
+      '#faad14', // 第二运维组 - 黄色
+      '#722ed1' // 第三运维组 - 紫色
+    ];
+
+    // 准备图表配置项
     const option = {
+      backgroundColor: 'transparent',
+
+      // 提示框 - 显示详细数据
       tooltip: {
         trigger: 'item',
-        formatter: '{a} <br/>{b}: {c} ({d}%)',
+        formatter: '{a} <br/>{b}: {c} 项',
         backgroundColor: 'rgba(255, 255, 255, 0.95)',
         borderColor: '#e8e8e8',
+        borderWidth: 1,
         textStyle: {
-          color: '#333'
+          color: '#333',
+          fontSize: 14
         },
         padding: 12,
         borderRadius: 8,
         boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
       },
+
+      // 图例 - 在底部横向排列
       legend: {
-        orient: 'vertical',
-        left: 10,
-        top: 'center',
+        orient: 'horizontal',
+        bottom: 10,
+        left: 'center',
         itemWidth: 14,
         itemHeight: 14,
         textStyle: {
           fontSize: 12,
           color: '#666'
         },
-        itemGap: 12
+        itemGap: 20,
+        // 当数据过多时启用分页
+        pageShow: allData.length > 6,
+        pageFormatter: '{current}/{total}'
       },
+
+      // 系列数据 - 环形图
       series: [
         {
-          name: '已完成任务',
+          name: '每周任务',
           type: 'pie',
-          radius: ['40%', '70%'],
-          center: ['60%', '50%'],
+          radius: ['50%', '70%'], // 调整内半径和外半径，使环形更宽
+          center: ['50%', '50%'], // 调整中心位置
           avoidLabelOverlap: false,
+
+          // 扇区样式
           itemStyle: {
-            borderRadius: 10,
+            borderRadius: 2,
             borderColor: '#fff',
             borderWidth: 2,
-            shadowBlur: 15,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.15)'
-          },
-          label: {
-            show: false,
-            position: 'center'
-          },
-          emphasis: {
-            scale: true,
-            scaleSize: 15,
-            label: {
-              show: true,
-              fontSize: 18,
-              fontWeight: 'bold',
-              color: '#333'
-            },
-            itemStyle: {
-              shadowBlur: 25,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.25)'
+            color: function (params) {
+              return teamColors[params.dataIndex % teamColors.length];
             }
           },
+
+          // 扇区标签 - 不显示外部标签
+          label: {
+            show: false
+          },
+
+          // 标签连接线 - 隐藏
           labelLine: {
             show: false
           },
+
+          // 中心文本 - 使用富文本自定义样式
+          emphasis: {
+            scale: true,
+            scaleSize: 5,
+            label: {
+              show: false
+            }
+          },
+
+          // 动画效果
           animationType: 'scale',
           animationEasing: 'elasticOut',
+          animationDuration: 1500,
           animationDelay: function (idx) {
-            return Math.random() * 300;
+            return idx * 150;
           },
-          data: [
-            { value: 19, name: '第一运维组', itemStyle: { color: '#1890ff' } },
-            { value: 14, name: '第二运维组', itemStyle: { color: '#faad14' } },
-            { value: 11, name: '第三运维组', itemStyle: { color: '#ff4d4f' } },
-            { value: 4 + 8 + 13, name: '未完成', itemStyle: { color: '#f5f5f5' } }
-          ]
+
+          // 任务数据
+          data: allData
         }
       ]
     };
@@ -452,6 +491,41 @@ const initChart = () => {
     // 设置图表配置项
     chartInstance.setOption(option);
 
+    // 添加中心圆形白色背景和图片 - 使用ECharts的graphic组件
+    chartInstance.setOption({
+      graphic: {
+        elements: [
+          // 圆形白色背景
+          {
+            type: 'circle',
+            z: 90,
+            left: 'center',
+            top: 'center',
+            shape: {
+              r: 35 // 圆形半径
+            },
+            style: {
+              fill: '#ffffff',
+              stroke: '#f0f0f0',
+              lineWidth: 2
+            }
+          },
+          // 中心图片 - 使用本地图片renwu.png
+          {
+            type: 'image',
+            z: 100,
+            left: 'center',
+            top: 'center',
+            style: {
+              image: renwuImage,
+              width: 30,
+              height: 30
+            }
+          }
+        ]
+      }
+    });
+
     // 处理窗口大小变化
     const handleResize = () => {
       chartInstance.resize();
@@ -481,6 +555,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+/* 样式保持不变 */
 .execution-records {
   padding: 20px;
   background-color: #f5f7fa;
@@ -614,13 +689,28 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
 }
 
-/* 确保图表容器有明确的尺寸 */
+/* 图表容器样式 */
 .chart-container {
   width: 100%;
   height: 100%;
-  min-height: 280px; /* 增加最小高度确保图表可见 */
+  min-height: 320px;
+}
+
+/* 新增任务数标签样式 */
+.task-count-label {
+  position: absolute;
+  bottom: 40px;
+  right: 40px;
+  background-color: #722ed1;
+  color: white;
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: 14px;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(114, 46, 209, 0.3);
 }
 
 .team-header {
@@ -793,6 +883,22 @@ onUnmounted(() => {
   border-top: 1px dashed #f0f0f0;
 }
 
+/* 表格标题样式 */
+.table-header-title {
+  border-radius: 12px;
+  padding: 16px 24px;
+  margin-bottom: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.table-header-title h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  display: inline-block;
+}
+
 /* 表格样式优化 */
 .table-wrapper {
   background-color: #fff;
@@ -1025,7 +1131,7 @@ onUnmounted(() => {
 
   /* 响应式调整图表大小 */
   .chart-container {
-    min-height: 220px;
+    min-height: 280px;
   }
 }
 </style>