From 1ad1a0198ea6c04a2fe3e5420135254e6e8949bf Mon Sep 17 00:00:00 2001
From: sjl <1716605279@qq.com>
Date: Wed, 22 Jan 2025 16:28:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/echarts/pie/default.vue    | 19 ++++-
 frontend/src/views/home/components/tree.vue   |  2 +-
 frontend/src/views/home/tabs/dashboard.vue    | 69 ++++++++++++++-----
 3 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/echarts/pie/default.vue b/frontend/src/components/echarts/pie/default.vue
index f3b4fd9..a564dde 100644
--- a/frontend/src/components/echarts/pie/default.vue
+++ b/frontend/src/components/echarts/pie/default.vue
@@ -22,11 +22,16 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  
 });
 const customData: any = ref({}),
   legendData: any = ref({}),
   chart: any = ref();
+
+ const labelIsShow = ref(true)//引导线台数和鼠标点击饼图是否弹出提示显示
 const init = () => {
+
+
   customData.value = {
     title: "", //标题
     textAlign: "left", //标题位置可选属性left 可选属性值 left,right,center
@@ -36,6 +41,7 @@ const init = () => {
     isSpace: false, //是否显示间隔
     isLabelLine: true, //是否显示引导线
     titleFontSize: '14px', //标题字体大小
+    
     ...props.customData,
     
   };
@@ -71,7 +77,7 @@ const init = () => {
     //                 },
     // },    
     tooltip: {
-      show: true,
+      show: labelIsShow.value,
       trigger: "item",
       formatter: customData.value.ratio ? `{b} : {c} ({d}%)` : "{b} :{c} ",
       borderWidth: 1,
@@ -100,14 +106,14 @@ const init = () => {
         },
         label: {
           normal: {
-            show: true,
+            show: labelIsShow.value,
             position: "outside",
             textStyle: {
               //color: "#fff",
               fontSize: 12,
             },
             formatter: function (data) {
-                                return data.value +'台'
+                              return labelIsShow.value ? data.value + '台' : '';
                             }
           },
         },
@@ -122,6 +128,7 @@ const init = () => {
       },
     ],
   };
+
   option && chart.value && chart.value.setOption(option);
   setTimeout(() => {
     chart.value.resize();
@@ -157,6 +164,12 @@ watch(
   () => props.chartsData,
   (val, oldVal) => {
     if (val) {
+      const item = props.chartsData.find(item => item.value === 0);
+      if(item != undefined){
+        labelIsShow.value = false;
+      }else{
+        labelIsShow.value = true;
+      }
       init();
     }
   },
diff --git a/frontend/src/views/home/components/tree.vue b/frontend/src/views/home/components/tree.vue
index 537ba1f..1131684 100644
--- a/frontend/src/views/home/components/tree.vue
+++ b/frontend/src/views/home/components/tree.vue
@@ -25,7 +25,7 @@
         <template #default='{ node, data }'>
           <span class='custom-tree-node' style='display: flex;align-items: center;'>
             <Platform v-if='!data.pid' style='width:18px;height: 18px;margin-right:8px;'
-                      :style="{color:node.label=='未检'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}" />
+                      :style="{color:node.label=='未检'?'#fac858':node.label=='检测中'?'#ee6666':'#91cc75'}" />
             <span>{{ node.label }}</span>
             <!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> -->
           </span>
diff --git a/frontend/src/views/home/tabs/dashboard.vue b/frontend/src/views/home/tabs/dashboard.vue
index 9ec4d7f..0b99821 100644
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -44,7 +44,6 @@
                       :customData="{
                        title: '设备检测状态',
                        textAlign: 'left',
-                      
                       }"
                       :legendData="{
                        icon: 'circle',
@@ -149,6 +148,7 @@ const tableHeight = ref('calc(100% - 50px)') // 初始高度
 const isTimeCheck = ref<boolean>(false)
 const planList = ref<ResultData<Plan.ReqPlan[]>>()
 const select_Plan = ref<Plan.ReqPlan>()
+const isLabelLineShow = ref(true)
 const handleCollapseChange = (val: CollapseModelValue) => {
 
   // 计算新的高度
@@ -301,7 +301,6 @@ const getPieData = async (id: string) => {
     const plan = findPlanById(planList.value?.data || [], id)
     planName.value = '所选计划:' + plan.name
     
-
     select_Plan.value = plan
     if (plan) {
       //isTimeCheck.value = plan.timeCheck === 1; // 将 1 转换为 true，0 转换为 false
@@ -310,7 +309,7 @@ const getPieData = async (id: string) => {
       // 处理未找到计划的情况
       isTimeCheck.value = false // 或者其他默认值
     }
-    console.log('饼图getBoundPqDevList')
+    
     const pqDevList_Result2 = await getBoundPqDevList({ 'planId': id, 'checkStateList': [0, 1, 2, 3] })
     boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[]
     // 遍历 boundPqDevList 并更新计数对象
@@ -329,33 +328,65 @@ const getPieData = async (id: string) => {
         reportStateCount[t.reportState]++
       }
     })
-  
+
 
     // 检查 checkStateCount 是否全为 0
-    const allZero = Object.values(checkStateCount).every(count => count === 0);
-    chartsData1.value = [
+    if(boundPqDevList.value.length != 0){
+
+      isLabelLineShow.value = true;
+      const allZero = Object.values(checkStateCount).every(count => count === 0);
+      chartsData1.value = [
       { value: allZero ? 0 : checkStateCount[0] === 0 ? null : checkStateCount[0], name: '未检', itemStyle: { color: '#fac858' } },
       { value: allZero ? 0 : checkStateCount[1] === 0 ? null : checkStateCount[1], name: '检测中', itemStyle: { color: '#ee6666' } },
       { value: allZero ? 0 : checkStateCount[2] === 0 ? null : checkStateCount[2], name: '检测完成', itemStyle: { color: '#91cc75' } },
       { value: allZero ? 0 : checkStateCount[3] === 0 ? null : checkStateCount[3], name: '归档', itemStyle: { color: '#5470c6' } },
+      ];
+         // 同样处理 chartsData2 和 chartsData3
+      const allZeroResult = Object.values(checkResultCount).every(count => count === 0);
+      chartsData2.value = [
+        { value: allZeroResult ? 0 : checkResultCount[2] === 0 ? null : checkResultCount[2], name: '未检', itemStyle: { color: '#fac858' } },
+        { value: allZeroResult ? 0 : checkResultCount[0] === 0 ? null : checkResultCount[0], name: '不符合', itemStyle: { color: '#ee6666' } },
+        { value: allZeroResult ? 0 : checkResultCount[1] === 0 ? null : checkResultCount[1], name: '符合', itemStyle: { color: '#91cc75' } },
+      ];
+
+
+      // 检查 reportStateCount 是否全为 0
+      const allZeroReport = Object.values(reportStateCount).every(count => count === 0);
+      chartsData3.value = [
+        { value: allZeroReport ? 0 : reportStateCount[2] === 0 ? null : reportStateCount[2], name: '未检', itemStyle: { color: '#fac858' } },
+        { value: allZeroReport ? 0 : reportStateCount[0] === 0 ? null : reportStateCount[0], name: '未生成', itemStyle: { color: '#ee6666' } },
+        { value: allZeroReport ? 0 : reportStateCount[1] === 0 ? null : reportStateCount[1], name: '已生成', itemStyle: { color: '#91cc75' } },
+      ];
+
+    }else{
+
+      isLabelLineShow.value = false;//不展示引导线
+      chartsData1.value = [
+      { value: null , name: '未检', itemStyle: { color: '#fac858' } },
+      { value:  null , name: '检测中', itemStyle: { color: '#ee6666' } },
+      { value: null , name: '检测完成', itemStyle: { color: '#91cc75' } },
+      { value:  null , name: '归档', itemStyle: { color: '#5470c6' } },
+      { value:  0 , itemStyle: { color: '#eeeeee' } },
     ];
 
-    // 同样处理 chartsData2 和 chartsData3
-    const allZeroResult = Object.values(checkResultCount).every(count => count === 0);
     chartsData2.value = [
-      { value: allZeroResult ? 0 : checkResultCount[2] === 0 ? null : checkResultCount[2], name: '未检', itemStyle: { color: '#fac858' } },
-      { value: allZeroResult ? 0 : checkResultCount[0] === 0 ? null : checkResultCount[0], name: '不符合', itemStyle: { color: '#ee6666' } },
-      { value: allZeroResult ? 0 : checkResultCount[1] === 0 ? null : checkResultCount[1], name: '符合', itemStyle: { color: '#91cc75' } },
-    ];
+        { value: null, name: '未检', itemStyle: { color: '#fac858' } },
+        { value: null, name: '不符合', itemStyle: { color: '#ee6666' } },
+        { value: null, name: '符合', itemStyle: { color: '#91cc75' } },
+        { value:  0 , itemStyle: { color: '#eeeeee' } },
+      ];
+
+      chartsData3.value = [
+        { value: null, name: '未检', itemStyle: { color: '#fac858' } },
+        { value: null, name: '未生成', itemStyle: { color: '#ee6666' } },
+        { value: null, name: '已生成', itemStyle: { color: '#91cc75' } },
+        { value:  0 , itemStyle: { color: '#eeeeee' } },
+      ];
+    }
+    
 
 
-    // 检查 reportStateCount 是否全为 0
-    const allZeroReport = Object.values(reportStateCount).every(count => count === 0);
-    chartsData3.value = [
-      { value: allZeroReport ? 0 : reportStateCount[2] === 0 ? null : reportStateCount[2], name: '未检', itemStyle: { color: '#fac858' } },
-      { value: allZeroReport ? 0 : reportStateCount[0] === 0 ? null : reportStateCount[0], name: '未生成', itemStyle: { color: '#ee6666' } },
-      { value: allZeroReport ? 0 : reportStateCount[1] === 0 ? null : reportStateCount[1], name: '已生成', itemStyle: { color: '#91cc75' } },
-    ];
+ 
   }else{
     
     planName.value = '所选计划:'