瑞都统计看板

src/views/pms/stat/rdkb.vue

@@ -174,7 +174,7 @@
               </div>
             </template>
             <div class="flex mr-3">
-              <div ref="maintenanceChartRef1" class="h-[157px] w-2/5"></div>
+              <div ref="inspectChartRef" class="h-[157px] w-2/5"></div>
               <div class="w-3/5 p-4 flex flex-col mt-5">
                 <div class="flex justify-between">
                   <div class="flex flex-col items-center">
@@ -247,6 +247,8 @@ const sparePartRef = ref(null)
 let sparePartInstance = null
 const maintenanceChartRef = ref(null)
 let maintenanceChartInstance = null
+const inspectChartRef = ref(null)
+let inspectChartInstance = null
 const inspectionChartRef = ref(null)
 let inspectionChartInstance = null
 const maintenanceChartRef1 = ref(null)
@@ -339,6 +341,7 @@ const getStats = () => {
   })
   IotStatApi.getInspectStatus(fillQueryParams).then((res) => {
     inspect.value = res
+    initInspectChart()
   })
   fillQueryParams.deptId = useUserStore().getUser.deptId;
   IotStatApi.getDeptStatistics(fillQueryParams).then((res) => {
@@ -485,6 +488,54 @@ const initSparePartChart = () => {
   sparePartInstance.setOption(option)
 }
 
+const initInspectChart = () => {
+  if (!inspectChartRef.value) return
+  inspectChartInstance = echarts.init(inspectChartRef.value)
+  const completionRate = (inspect.value.finished / (inspect.value.finished+inspect.value.todo)) * 100
+  debugger
+  const option = {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      // top: '5%',
+      // right: '10%',
+      // align: 'center',
+      orient: 'horizontal',  // 水平排列图例项
+      bottom: '0%',         // 放置在底部
+      icon: 'circle'
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['40%', '70%'],
+        label: {
+          show: false,
+          position: 'outside'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 15,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: true
+        },
+        // itemStyle: {
+        //   color: ['#e4a317', '#5aef13']
+        // },
+        data: [
+          { name:'完成率',value: completionRate.toFixed(2)  },
+          { name:'未完成率',value: 100 - completionRate.toFixed(2)  }
+        ]
+      }
+    ]
+  }
+  inspectChartInstance.setOption(option)
+}
+
 const initMaintenanceChart = () => {
   if (!maintenanceChartRef.value) return
   maintenanceChartInstance = echarts.init(maintenanceChartRef.value)
@@ -521,8 +572,8 @@ const initMaintenanceChart = () => {
           show: true
         },
         data: [
-          { name:'完成率',value: completionRate  },
-          { name:'未完成率',value: 100 - completionRate  }
+          { name:'完成率',value: completionRate.toFixed(2)  },
+          { name:'未完成率',value: 100 - completionRate.toFixed(2)  }
         ]
       }
     ]