检测计划列表

frontend/src/views/home/tabs/dashboard.vue

@@ -37,11 +37,12 @@
             <pie
               :customData="{
                 title: '设备检测状态',
-                textAlign: 'center',
+                textAlign: 'left',
               }"
               :legendData="{
                 icon: 'circle',
                 left: 'left',
+                top: 'middle',
               }"
               :chartsData="chartsData1"
               ref="pieRef1"
@@ -51,11 +52,12 @@
             <pie
               :customData="{
                 title: '设备检测结果',
-                textAlign: 'center',
+                textAlign: 'left',
               }"
               :legendData="{
                 icon: 'circle',
                 left: 'left',
+                top: 'middle',
               }"
               :chartsData="chartsData2"
               ref="pieRef2"
@@ -65,7 +67,7 @@
             <pie
               :customData="{
                 title: '设备报告状态',
-                textAlign: 'center',
+                textAlign: 'left',
                 label: {
                   normal: {
                     position: 'inner',
@@ -75,6 +77,7 @@
               :legendData="{
                 icon: 'circle',
                 left: 'left',
+                top: 'middle',
               }"
               :chartsData="chartsData3"
               ref="pieRef3"
@@ -119,6 +122,7 @@ import { type Plan } from "@/api/plan/interface";
 import type { CollapseModelValue } from "element-plus/es/components/collapse/src/collapse.mjs";
 import { type Device } from "@/api/device/interface/device";
 import { getBoundPqDevList } from '@/api/plan/plan.ts'
+import { CENTERED_ALIGNMENT } from "element-plus/es/components/virtual-list/src/defaults";
 
 const dictStore = useDictStore()
 const modeStore = useModeStore();
@@ -267,32 +271,55 @@ const chartsData1: any = ref([]),
   chartsData2: any = ref([]),
   chartsData3: any = ref([]);
 const getPieData = async (id: string) => {
-  console.log('123111',id);
+  console.log('1qaz')
   currentId.value = id; // 设置当前ID
 
-
   const boundPqDevList=ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备 
   const pqDevList_Result2 = await getBoundPqDevList({'planId': id, 'checkStateList':[0,1,2]});
   boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[];
-  console.log('饼图',boundPqDevList.value)
+
+  // 初始化计数对象
+  const checkStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 };
+  // 遍历 boundPqDevList 并更新计数对象
+  boundPqDevList.value.forEach(t => {
+    if (t.checkState !== undefined && t.checkState !== null && checkStateCount[t.checkState] !== undefined) {
+    checkStateCount[t.checkState]++;
+    }
+  });
+
+  // 统计检测结果的数量
+  const checkResultCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 };
+  boundPqDevList.value.forEach(t => {
+    if (t.checkResult !== undefined && t.checkResult !== null && checkResultCount[t.checkResult] !== undefined) {
+      checkResultCount[t.checkResult]++;
+    }
+  });
+
+  //报告状态
+  const reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 };
+  boundPqDevList.value.forEach(t => {
+    if (t.reportState !== undefined && t.reportState !== null && reportStateCount[t.reportState] !== undefined) {
+      reportStateCount[t.reportState]++;
+    }
+  });
 
 
 
   chartsData1.value = [
-    { value: 12, name: "未检", itemStyle: { color: '#fac858' } },
-    { value: 0, name: "检测中", itemStyle: { color: '#ee6666' }  },
-    { value: 6, name: "检测完成", itemStyle: { color: '#91cc75' }  },
-    { value: 2, name: "归档", itemStyle: { color: '#5470c6' }  },
+    { value: checkStateCount[0], name: "未检", itemStyle: { color: '#fac858' } },
+    { value: checkStateCount[1], name: "检测中", itemStyle: { color: '#ee6666' }  },
+    { value: checkStateCount[2], name: "检测完成", itemStyle: { color: '#91cc75' }  },
+    { value: checkStateCount[3], name: "归档", itemStyle: { color: '#5470c6' }  },
   ];
   chartsData2.value = [
-    { value: 12, name: "未检" , itemStyle: { color: '#fac858' } },
-    { value: 3, name: "不符合" , itemStyle: { color: '#ee6666' } },
-    { value: 5, name: "符合", itemStyle: { color: '#91cc75' }  },
+    { value: checkResultCount[0], name: "未检" , itemStyle: { color: '#fac858' } },
+    { value: checkResultCount[1], name: "不符合" , itemStyle: { color: '#ee6666' } },
+    { value: checkResultCount[2], name: "符合", itemStyle: { color: '#91cc75' }  },
   ];
   chartsData3.value = [
-    { value: 12, name: "未检" , itemStyle: { color: '#fac858' } },
-    { value: 4, name: "未生成" , itemStyle: { color: '#ee6666' } },
-    { value: 4, name: "已生成", itemStyle: { color: '#91cc75' }  },
+    { value: reportStateCount[0], name: "未检" , itemStyle: { color: '#fac858' } },
+    { value: reportStateCount[1], name: "未生成" , itemStyle: { color: '#ee6666' } },
+    { value: reportStateCount[2], name: "已生成", itemStyle: { color: '#91cc75' }  },
   ];
 
   pieRef1.value.init();
@@ -334,6 +361,7 @@ const handleCheckFunction = (val: any) => {
 
   switch (val) {
     case 0://自动检测
+    getPieData(currentId.value);
     tabLabel1.value = "设备检测";
     break;
     case 1://手动检测
@@ -394,7 +422,6 @@ onMounted(async () => {
         state: 0
     };
   const planList = await getPlanListByPattern(reqPlan);
-  console.log('1111111111111111')
  if (chartsInfoRef.value) {
     resizeObserver.observe(chartsInfoRef.value);
   }