饼图优化

src/views/screen/components/HiddenDangerPanel.vue

@@ -201,9 +201,15 @@ const handleMajorClick = () => {
   window.open('http://10.0.64.20/pms/workorder-list', '_blank')
 }
 
-watch(() => props.hiddenDangerData?.progress, (newVal) => {
+watch(() => props.hiddenDangerData?.progress, (newVal, oldVal) => {
-  console.log('HiddenDangerPanel watch 触发，progress 数据:', newVal)
+  console.log('HiddenDangerPanel watch 触发，progress 数据:', newVal, '旧数据:', oldVal)
-  refreshProcessCharts(newVal)
+  // 确保每次数据变化都更新图表
+  if (newVal) {
+    refreshProcessCharts(newVal)
+  } else {
+    // 即使数据为空，也要显示空图表
+    refreshProcessCharts(null)
+  }
 }, { deep: true, immediate: true })
 
 // 辅助函数：安全地将值转换为数字，处理 NaN 和字符串 "NaN" 的情况
@@ -217,8 +223,16 @@ const safeNumber = (val: any): number => {
 
 // 更新图表数据
 const refreshProcessCharts = (process): void => {
-  if (!props.hiddenDangerData?.progress) {
+  if (!process) {
     console.warn('process is undefined or null')
+    // 即使没有数据，也要显示空图表，确保图表容器始终存在
+    const option = { ...progressChartOption.value }
+    option.series[0].data = [
+      { value: 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
+      { value: 0, name: '已处理', itemStyle: { color: '#10b981' } },
+      { value: 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
+    ]
+    progressChartOption.value = option
     return
   }
   
@@ -228,17 +242,71 @@ const refreshProcessCharts = (process): void => {
   
   console.log('refreshProcessCharts 数据:', { overdue, processed, processing })
   
-  const option = { ...progressChartOption.value }
+  // 创建新的配置对象，确保 Vue 能检测到变化
-  // 确保所有 value 都是有效的数字，将字符串 "NaN" 或真正的 NaN 转换为 0
+  const option = {
-  option.series[0].data = [
+    backgroundColor: 'transparent',
-    { value: overdue, name: '已逾期', itemStyle: { color: '#ef4444' } },
+    tooltip: {
-    { value: processed, name: '已处理', itemStyle: { color: '#10b981' } },
+      show: true,
-    // { value: safeNumber(process.pending), name: '待排查', itemStyle: { color: '#eab308' } },
+      trigger: 'item',
-    { value: processing, name: '处理中', itemStyle: { color: '#3b82f6' } }
+      formatter: '{a} <br/>{b}: {c}% ({d}%)'
-  ]
+    },
+    series: [
+      {
+        type: 'pie' as const,
+        radius: '55%',
+        center: ['50%', '50%'],
+        left: 0,
+        top: 0,
+        bottom: 0,
+        data: [
+          { value: overdue, name: '已逾期', itemStyle: { color: '#ef4444' } },
+          { value: processed, name: '已处理', itemStyle: { color: '#10b981' } },
+          { value: processing, name: '处理中', itemStyle: { color: '#3b82f6' } }
+        ],
+        label: {
+          show: true,
+          alignTo: 'edge' as const,
+          formatter: '{time|{c} %}\n',
+          minMargin: 5,
+          edgeDistance: 10,
+          lineHeight: 15,
+          rich: {
+            time: {
+              fontSize: 10,
+              color: '#fff'
+            }
+          }
+        },
+        labelLine: {
+          show: true,
+          length: 5,
+          length2: 0,
+          maxSurfaceAngle: 10
+        },
+        labelLayout: function (params: any) {
+          const isLeft = params.labelRect.x < (params.labelRect.width ? params.labelRect.width : 200) / 2;
+          const points = params.labelLinePoints;
+
+          // 添加安全检查
+          if (points && points.length >= 3 && points[2]) {
+            points[2][0] = isLeft
+              ? params.labelRect.x
+              : params.labelRect.x + params.labelRect.width;
+          }
+
+          return {
+            labelLinePoints: points
+          };
+        },
+      }
+    ]
+  }
   
   console.log('更新后的图表数据:', option.series[0].data)
+  // 更新图表配置
   progressChartOption.value = option
+  // 更新 key 以强制重新渲染（可选，通常不需要）
+  // chartKey.value = Date.now()
 }