饼图bug修复

2025-12-16 15:03:01 +08:00
parent 5daba69ee5
commit ec7ef87340
3 changed files with 86 additions and 23 deletions
--- a/src/views/screen/components/HiddenDangerPanel.vue
+++ b/src/views/screen/components/HiddenDangerPanel.vue
@@ -96,6 +96,12 @@ const props = defineProps<Props>()

 // 图表引用
 const progressChartOption = ref<any>({
+  backgroundColor: 'transparent',
+  tooltip: {
+    show: true,
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c}% ({d}%)'
+  },
  series: [
    {
      type: 'pie' as const,
@@ -106,6 +112,7 @@ const progressChartOption = ref<any>({
      bottom: 0,
      data: [],
      label: {
+        show: true,
        alignTo: 'edge' as const,
        formatter: '{time|{c} %}\n',
        minMargin: 5,
@@ -119,6 +126,7 @@ const progressChartOption = ref<any>({
        }
      },
      labelLine: {
+        show: true,
        length: 5,
        length2: 0,
        maxSurfaceAngle: 10
@@ -194,8 +202,9 @@ const handleMajorClick = () => {
 }

 watch(() => props.hiddenDangerData?.progress, (newVal) => {
+  console.log('HiddenDangerPanel watch 触发，progress 数据:', newVal)
  refreshProcessCharts(newVal)
-}, { deep: true })
+}, { deep: true, immediate: true })

 // 辅助函数：安全地将值转换为数字，处理 NaN 和字符串 "NaN" 的情况
 const safeNumber = (val: any): number => {
@@ -212,14 +221,23 @@ const refreshProcessCharts = (process): void => {
    console.warn('process is undefined or null')
    return
  }
+  
+  const overdue = safeNumber(process.overdue)
+  const processed = safeNumber(process.processed)
+  const processing = safeNumber(process.processing)
+  
+  console.log('refreshProcessCharts 数据:', { overdue, processed, processing })
+  
  const option = { ...progressChartOption.value }
  // 确保所有 value 都是有效的数字，将字符串 "NaN" 或真正的 NaN 转换为 0
  option.series[0].data = [
-    { value: safeNumber(process.overdue), name: '已逾期', itemStyle: { color: '#ef4444' } },
-    { value: safeNumber(process.processed), name: '已处理', itemStyle: { color: '#10b981' } },
+    { value: overdue, name: '已逾期', itemStyle: { color: '#ef4444' } },
+    { value: processed, name: '已处理', itemStyle: { color: '#10b981' } },
    // { value: safeNumber(process.pending), name: '待排查', itemStyle: { color: '#eab308' } },
-    { value: safeNumber(process.processing), name: '处理中', itemStyle: { color: '#3b82f6' } }
+    { value: processing, name: '处理中', itemStyle: { color: '#3b82f6' } }
  ]
+  
+  console.log('更新后的图表数据:', option.series[0].data)
  progressChartOption.value = option
 }

@@ -250,7 +268,11 @@ const refreshTop3TypesCharts = (top3Types): void => {
 }

 onMounted(() => {
-
+  // 组件挂载时，如果已有数据，立即更新图表
+  if (props.hiddenDangerData?.progress) {
+    console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
+    refreshProcessCharts(props.hiddenDangerData.progress)
+  }
 })
 </script>

--- a/src/views/screen/mainScreen.vue
+++ b/src/views/screen/mainScreen.vue
@@ -431,12 +431,17 @@ const handleHiddenDangerPannelData = (query) => {
        // 获取隐患排查治理数据
        getTableList('risk_status_count', query).then(res => {
          if (res.records && res.records.length > 0) {
-            _data.overdue = _data.overdue + Number(res.records[0].overdueCnt)
-            _data.processed = _data.processed + Number(res.records[0].processedCnt)
-            _data.processing = _data.processing + Number(res.records[0].processingCnt)
-            _data.pending = _data.pending
+            // 接口返回的已经是百分比，直接使用
+            const record = res.records[0]
+            _data.overdue = Number(record.overdueCnt) || 0
+            _data.processed = Number(record.processedCnt) || 0
+            _data.processing = Number(record.processingCnt) || 0
+            _data.pending = 0 // 接口没有返回pending，设为0
            _data.flag = true

+            console.log('risk_status_count 接口返回数据:', record)
+            console.log('处理后的 _data:', _data)
+
            if (_data2.flag) {
              // 合并数据
              console.log("请求系统和第三方成功，合并数据", _data, _data2);
@@ -445,30 +450,44 @@ const handleHiddenDangerPannelData = (query) => {
              dashboardData.value.hiddenDangerData.general = generalCnt
              dashboardData.value.hiddenDangerData.major = majorCnt

-              let totalCnt = generalCnt + majorCnt
-              let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
-              let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
-              let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
-              let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
+              // 如果第三方数据也是百分比，需要合并；否则使用系统数据
+              // 这里假设系统数据是百分比，第三方数据可能是数量或百分比
+              let overdueCnt, processedCnt, processingCnt, pendingCnt
+              if (_data2.overdue > 1 || _data2.processed > 1 || _data2.processing > 1) {
+                // 第三方数据可能是百分比，直接使用系统数据（因为系统数据更准确）
+                overdueCnt = _data.overdue.toFixed(2)
+                processedCnt = _data.processed.toFixed(2)
+                processingCnt = _data.processing.toFixed(2)
+                pendingCnt = _data.pending.toFixed(2)
+              } else {
+                // 第三方数据可能是数量，需要计算百分比
+                let totalCnt = generalCnt + majorCnt
+                overdueCnt = totalCnt > 0 ? ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2) : '0.00'
+                processedCnt = totalCnt > 0 ? ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2) : '0.00'
+                processingCnt = totalCnt > 0 ? ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) : '0.00'
+                pendingCnt = totalCnt > 0 ? ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) : '0.00'
+              }
+              
              dashboardData.value.hiddenDangerData.progress = {
                overdue: overdueCnt,
                processed: processedCnt,
                processing: processingCnt,
                pending: pendingCnt,
              }
+              console.log('合并后的 progress:', dashboardData.value.hiddenDangerData.progress)
            } else {
              console.log("请求系统成功，展示数据", _data, _data2);
              dashboardData.value.hiddenDangerData.general = _data.general
              dashboardData.value.hiddenDangerData.major = _data.major

-              let totalCnt = _data.general + _data.major
-              // 显示系统数据
+              // 接口返回的已经是百分比，直接使用
              dashboardData.value.hiddenDangerData.progress = {
-                overdue: (_data.overdue / totalCnt * 100).toFixed(2),
-                processed: (_data.processed / totalCnt * 100).toFixed(2),
-                processing: (_data.processing / totalCnt * 100).toFixed(2),
-                pending: (_data.pending / totalCnt * 100).toFixed(2),
+                overdue: _data.overdue.toFixed(2),
+                processed: _data.processed.toFixed(2),
+                processing: _data.processing.toFixed(2),
+                pending: _data.pending.toFixed(2),
              }
+              console.log('系统数据 progress:', dashboardData.value.hiddenDangerData.progress)
            }
          }
        })
--- a/src/views/screen/regionScreen.vue
+++ b/src/views/screen/regionScreen.vue
@@ -95,7 +95,10 @@ const visitorCount = ref<number>(0)
 // 总体概览-各园区统计
 const parkStatistics = ref<any>()
 // 危险作业/安全考核/安全、保密培训
-const riskStatistics = ref<any>()
+const riskStatistics = ref<Record<TabType, any[]>>({
+  安全类: [],
+  工程类: []
+})
 const dangerDetail = ref<any>()
 // 动画相关的状态
 const isAnimating = ref<boolean>(false)
@@ -595,6 +598,24 @@ const handleRiskTabChange = async (tab: TabType) => {
      })
    ])

+    // 处理接口返回的数据结构：可能是数组或对象
+    const getRecords = (response: any): any[] => {
+      if (Array.isArray(response)) {
+        return response
+      } else if (response && Array.isArray(response.records)) {
+        return response.records
+      } else if (response && response.data && Array.isArray(response.data)) {
+        return response.data
+      }
+      return []
+    }
+
+    const maintenanceRecords = getRecords(maintenanceResponse)
+    const inspectionRecords = getRecords(inspectionResponse)
+
+    console.log('维保任务数据:', maintenanceResponse, '提取的records:', maintenanceRecords)
+    console.log('巡检任务数据:', inspectionResponse, '提取的records:', inspectionRecords)
+
    // 周期映射
    const cycleMap: Record<string, string> = {
      'day': '每日',
@@ -637,8 +658,8 @@ const handleRiskTabChange = async (tab: TabType) => {
    }

    // 转换维保和巡检数据
-    const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
-    const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
+    const maintenanceCharts = convertToChartData(maintenanceRecords, '维保类')
+    const inspectionCharts = convertToChartData(inspectionRecords, '巡检类')

    // 合并为6个图表：先维保（3个），后巡检（3个）
    const allCharts = [...maintenanceCharts, ...inspectionCharts]
@@ -647,6 +668,7 @@ const handleRiskTabChange = async (tab: TabType) => {
    riskStatistics.value[tab] = allCharts

    console.log('更新后的riskStatistics:', riskStatistics.value)
+    console.log('当前tab的图表数据:', allCharts)
  } catch (error) {
    console.error('获取风险统计数据失败:', error)
  }