From 99e6abbcfd5a08f7650d110c5a59bc4c6c62d7b6 Mon Sep 17 00:00:00 2001
From: sjl <1716605279@qq.com>
Date: Mon, 6 Jan 2025 14:07:21 +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

---
 .../home/components/channelsTestTable.vue     | 207 +++--
 .../src/views/home/components/timeTest.vue    |  86 ++-
 frontend/src/views/home/components/tree.vue   |   7 +-
 frontend/src/views/home/tabs/dashboard.vue    | 705 ++++++++----------
 4 files changed, 511 insertions(+), 494 deletions(-)

diff --git a/frontend/src/views/home/components/channelsTestTable.vue b/frontend/src/views/home/components/channelsTestTable.vue
index b12e8e7..9d67ef8 100644
--- a/frontend/src/views/home/components/channelsTestTable.vue
+++ b/frontend/src/views/home/components/channelsTestTable.vue
@@ -21,22 +21,36 @@
                             </template>
                           </el-table-column>
                           <el-table-column prop="UaChannel" label="结果">
-                            <template #header >
-                                <span>结果</span>
-                                <el-tooltip class="item" effect="light" placement="top-start" content="电压L1系数校准不合格原因">
-                                  <el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
-                                </el-tooltip>
-                            </template>
                             <template #default="scope">
-                              <el-tag type="danger" v-if="scope.row.UaChannel === '不合格'">
+                              <el-tooltip
+                                v-if="scope.row.UaChannel === '不合格'"
+                                class="item"
+                                effect="light"
+                                placement="top-start"
+                                :content="'电压L1系数校准不合格原因：'+scope.row.UaData"
+                              >
+                                <el-tag type="danger" class="tooltip-content">
+                                  {{ scope.row.UaChannel }}
+                                </el-tag>
+                              </el-tooltip>
+                              <el-tooltip
+                                v-else-if="scope.row.UaChannel === '合格'"
+                                class="item"
+                                effect="light"
+                                placement="top-start"
+                                :content="'电压L1系数校准合格原因：'+scope.row.UaData"
+                              >
+                                <span class="tooltip-content">{{ scope.row.UaChannel }}</span>
+                              </el-tooltip>
+                              <!-- <el-tag type="danger" v-if="scope.row.UaChannel === '不合格'">
                                 {{ scope.row.UaChannel }}
-                              </el-tag>
+                              </el-tag> -->
                               <el-icon v-else-if="scope.row.UaChannel === '—'&& loading" class="loading-box">
                                 <el-icon-loading />
                               </el-icon>
-                              <span v-else>
+                              <!-- <span v-else>
                                 {{ scope.row.UaChannel }}
-                              </span> 
+                              </span> -->
                             </template>
                           </el-table-column>
                         </el-table-column>
@@ -52,22 +66,30 @@
                             </template>
                           </el-table-column>
                           <el-table-column prop="UbChannel" label="结果">
-                            <template #header >
-                                <span>结果</span>
-                                <el-tooltip class="item" effect="light" placement="top-start" content="电压L2系数校准不合格原因">
-                                  <el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
-                                </el-tooltip>
-                            </template>
                             <template #default="scope">
-                              <el-tag type="danger" v-if="scope.row.UbChannel === '不合格'">
-                                {{ scope.row.UbChannel }}
-                              </el-tag>
+                              <el-tooltip
+                                v-if="scope.row.UbChannel === '不合格'"
+                                class="item"
+                                effect="light"
+                                placement="top-start"
+                                content="电压L2系数校准不合格原因"
+                              >
+                                <el-tag type="danger" class="tooltip-content">
+                                  {{ scope.row.UbChannel }}
+                                </el-tag>
+                              </el-tooltip>
+                              <el-tooltip
+                                v-else-if="scope.row.UbChannel === '合格'"
+                                class="item"
+                                effect="light"
+                                placement="top-start"
+                                content="电压L2系数校准合格原因"
+                              >
+                                <span class="tooltip-content">{{ scope.row.UbChannel }}</span>
+                              </el-tooltip>
                               <el-icon v-else-if="scope.row.UbChannel === '—'&& loading" class="loading-box">
                                 <el-icon-loading />
                               </el-icon>
-                              <span v-else>
-                                {{ scope.row.UbChannel }}
-                              </span>
                             </template>
                           </el-table-column>
                         </el-table-column>
@@ -83,22 +105,30 @@
                             </template>
                           </el-table-column>
                           <el-table-column prop="UcChannel" label="结果">
-                            <template #header >
-                                <span>结果</span>
-                                <el-tooltip class="item" effect="light" placement="top-start" content="电压L3系数校准不合格原因">
-                                  <el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
-                                </el-tooltip>
-                            </template>
                             <template #default="scope">
-                              <el-tag type="danger" v-if="scope.row.UcChannel === '不合格'">
-                                {{ scope.row.UcChannel }}
-                              </el-tag>
+                              <el-tooltip
+                                v-if="scope.row.UcChannel === '不合格'"
+                                class="item"
+                                effect="light"
+                                placement="top-start"
+                                content="电压L3系数校准不合格原因"
+                              >
+                                <el-tag type="danger" class="tooltip-content">
+                                  {{ scope.row.UcChannel }}
+                                </el-tag>
+                              </el-tooltip>
+                              <el-tooltip
+                                v-else-if="scope.row.UcChannel === '合格'"
+                                class="item"
+                                effect="light"
+                                placement="top-start"
+                                content="电压L3系数校准合格原因"
+                              >
+                                <span class="tooltip-content">{{ scope.row.UcChannel }}</span>
+                              </el-tooltip>
                               <el-icon v-else-if="scope.row.UcChannel === '—'&& loading" class="loading-box">
                                 <el-icon-loading />
                               </el-icon>
-                              <span v-else>
-                                {{ scope.row.UcChannel }}
-                              </span>
                             </template>
                           </el-table-column>
                         </el-table-column>
@@ -116,22 +146,30 @@
                             </template>
                           </el-table-column>
                           <el-table-column prop="IaChannel" label="结果">
-                            <template #header >
-                                <span>结果</span>
-                                <el-tooltip class="item" effect="light" placement="top-start" content="电流L1系数校准不合格原因">
-                                  <el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
-                                </el-tooltip>
-                            </template>
                             <template #default="scope">
-                              <el-tag type="danger" v-if="scope.row.IaChannel === '不合格'">
-                                {{ scope.row.IaChannel }}
-                              </el-tag>
+                              <el-tooltip
+                                v-if="scope.row.IaChannel === '不合格'"
+                                class="item"
+                                effect="light"
+                                placement="top-start"
+                                content="电流L1系数校准不合格原因"
+                              >
+                                <el-tag type="danger" class="tooltip-content">
+                                  {{ scope.row.IaChannel }}
+                                </el-tag>
+                              </el-tooltip>
+                              <el-tooltip
+                                v-else-if="scope.row.IaChannel === '合格'"
+                                class="item"
+                                effect="light"
+                                placement="top-start"
+                                content="电流L1系数校准合格原因"
+                              >
+                                <span class="tooltip-content">{{ scope.row.IaChannel }}</span>
+                              </el-tooltip>
                               <el-icon v-else-if="scope.row.IaChannel === '—'&& loading" class="loading-box">
                                 <el-icon-loading />
                               </el-icon>
-                              <span v-else>
-                                {{ scope.row.IaChannel }}
-                              </span>
                             </template>
                             </el-table-column>
                         </el-table-column>
@@ -147,22 +185,30 @@
                             </template>
                           </el-table-column>
                           <el-table-column prop="IbChannel" label="结果">
-                            <template #header >
-                                <span>结果</span>
-                                <el-tooltip class="item" effect="light" placement="top-start" content="电流L2系数校准不合格原因">
-                                  <el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
-                                </el-tooltip>
-                            </template>
                             <template #default="scope">
-                              <el-tag type="danger" v-if="scope.row.IbChannel === '不合格'">
-                                {{ scope.row.IbChannel }}
-                              </el-tag>
+                              <el-tooltip
+                                v-if="scope.row.IbChannel === '不合格'"
+                                class="item"
+                                effect="light"
+                                placement="top-start"
+                                content="电流L2系数校准不合格原因"
+                              >
+                                <el-tag type="danger" class="tooltip-content">
+                                  {{ scope.row.IbChannel }}
+                                </el-tag>
+                              </el-tooltip>
+                              <el-tooltip
+                                v-else-if="scope.row.IbChannel === '合格'"
+                                class="item"
+                                effect="light"
+                                placement="top-start"
+                                content="电流L2系数校准合格原因"
+                              >
+                                <span class="tooltip-content">{{ scope.row.IbChannel }}</span>
+                              </el-tooltip>
                               <el-icon v-else-if="scope.row.IbChannel === '—'&& loading" class="loading-box">
                                 <el-icon-loading />
                               </el-icon>
-                              <span v-else>
-                                {{ scope.row.IbChannel }}
-                              </span>
                             </template>
                           </el-table-column>
                         </el-table-column>
@@ -178,22 +224,30 @@
                             </template>
                           </el-table-column>
                           <el-table-column prop="IcChannel" label="结果">
-                            <template #header >
-                                <span>结果</span>
-                                <el-tooltip class="item" effect="light" placement="top-start" content="电流L3系数准不合格原因">
-                                  <el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
-                                </el-tooltip>
-                            </template>
                             <template #default="scope">
-                              <el-tag type="danger" v-if="scope.row.IcChannel === '不合格'">
-                                {{ scope.row.IcChannel }}
-                              </el-tag>
+                              <el-tooltip
+                                v-if="scope.row.IcChannel === '不合格'"
+                                class="item"
+                                effect="light"
+                                placement="top-start"
+                                content="电流L3系数校准不合格原因"
+                              >
+                                <el-tag type="danger" class="tooltip-content">
+                                  {{ scope.row.IcChannel }}
+                                </el-tag>
+                              </el-tooltip>
+                              <el-tooltip
+                                v-else-if="scope.row.IcChannel === '合格'"
+                                class="item"
+                                effect="light"
+                                placement="top-start"
+                                content="电流L3系数校准合格原因"
+                              >
+                                <span class="tooltip-content">{{ scope.row.IcChannel }}</span>
+                              </el-tooltip>
                               <el-icon v-else-if="scope.row.IcChannel === '—'&& loading" class="loading-box">
                                 <el-icon-loading />
                               </el-icon>
-                              <span v-else>
-                                {{ scope.row.IcChannel }}
-                              </span>
                             </template>
                           </el-table-column>
                         </el-table-column>
@@ -357,6 +411,19 @@
   animation: rotate 2s linear infinite;
 }
 
+.icon-margin {
+  margin-left: 0px;
+}
+
+.icon-align {
+  vertical-align: 0px;
+}
+
+.tooltip-content {
+  cursor: pointer;
+}
+
+
 @keyframes rotate {
   from {
     transform: rotate(0deg);
diff --git a/frontend/src/views/home/components/timeTest.vue b/frontend/src/views/home/components/timeTest.vue
index 8a7d814..8b1dbb6 100644
--- a/frontend/src/views/home/components/timeTest.vue
+++ b/frontend/src/views/home/components/timeTest.vue
@@ -4,17 +4,17 @@
       <el-tab-pane label="守时误差">
         <div class="right-title" >
           <span v-if="activeIndex <= 1"> </span>
-            <span v-if="activeIndex > 1" style="  font-size: 18px;font-weight: 600;">
+            <span v-if="activeIndex > 1" class="time-text">
             标准时间: <span style="color: #003078">{{ gpsTime }}</span> 
             </span>
             <div class="error-dsc">
               <div class="green-div"></div>
-              <span style=" color: #606266; font-size: 16px;font-weight: 600;">
+              <span class="description-text">
               合格≤1000ms
             </span>
 
             <div class="red-div"></div>
-            <span style=" color: #F56C6c; font-size: 16px;font-weight: 600;">
+            <span class="description-text unqualified">
               不合格>1000ms
             </span>
             </div>
@@ -78,7 +78,14 @@
             :cell-style="{ textAlign: 'center' }" style="width: 100%; height:435px" border>
           </ProTable> -->
 
-          <el-table v-if="activeIndex > 0" :data="deviceOperatorData" stripe :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="margin-top: -30px;width: 100%" border>
+          <el-table 
+          v-if="activeIndex > 0" 
+              :data="deviceOperatorData" 
+              stripe 
+              :header-cell-class-name="'el-table-header'"
+              :cell-class-name="'el-table-cell'"
+              class="el-table"
+              border>
                 <el-table-column prop="deviceName" label="设备名称" />
                 <el-table-column prop="updataTime" label="上送时刻" />
                 <el-table-column prop="ErrorValue" label="守时误差(ms)">
@@ -110,6 +117,7 @@
 </template>
 <script lang="tsx" setup name="timeTest">
 import { SuccessFilled } from '@element-plus/icons-vue'
+import { reactive, ref, toRef, watch } from 'vue'
 
 const stepsIndex = ref(0)
 const activeIndex = ref(0)
@@ -196,7 +204,7 @@ const columns = reactive([
     prop: 'Result',
     label: '检测结果',
     // width: 100,
-    render: (scope) => {
+    render: (scope: { row: { Result: string } }) => {
       if (scope.row.Result === '不合格') {
         return (
           <el-tag type='danger'>{scope.row.Result}</el-tag>
@@ -231,7 +239,7 @@ watch(testStatus, function (newValue, oldValue) {
   }
 })
 
-function formatDateTime(date) {
+function formatDateTime(date: Date) {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
   const day = String(date.getDate()).padStart(2, '0');
@@ -408,4 +416,70 @@ watch(ts, function (newValue, oldValue) {
       margin-bottom: 10px;
       padding: 10px 20px 10px 20px;
       box-sizing: border-box; */
+
+      .right-title .time-text {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.right-title .gps-time {
+  color: #003078;
+}
+
+.error-dsc {
+  display: flex;
+  align-items: center;
+  margin-top: 10px; /* 根据需要调整 */
+}
+
+.error-dsc .green-div,
+.error-dsc .red-div {
+  width: 12px;
+  height: 12px;
+  margin-right: 8px;
+}
+
+.error-dsc .green-div {
+  background-color: #67C23A;
+}
+
+.error-dsc .red-div {
+  background-color: #F56C6C;
+}
+
+.error-dsc .description-text {
+  color: #606266;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.error-dsc .description-text.unqualified {
+  color: #F56C6C;
+}
+
+.el-table-header {
+  text-align: center;
+}
+
+.el-table-cell {
+  text-align: center;
+}
+
+.el-table {
+  margin-top: -30px;
+  width: 100%;
+}
+
+.tooltip-icon {
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+.result-tag {
+  font-weight: 600;
+}
+
+.result-text {
+  font-weight: 600;
+}
 </style>
diff --git a/frontend/src/views/home/components/tree.vue b/frontend/src/views/home/components/tree.vue
index 37537ed..b611786 100644
--- a/frontend/src/views/home/components/tree.vue
+++ b/frontend/src/views/home/components/tree.vue
@@ -113,13 +113,10 @@ defineExpose({ getTreeData })
 </script>
 <style lang='scss' scoped>
 .plan_tree {
-  // width: 200px;
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 5px;
-  // height: calc(100% - 70px);
-  background-color: #ffffff;
+  background-color: #fff;
 
   .search_view {
     width: 100%;
@@ -162,7 +159,7 @@ defineExpose({ getTreeData })
   display: inline-block;
   overflow: auto;
   margin-top: 12px;
-  
+
 }
 
 //.filter-tree span {
diff --git a/frontend/src/views/home/tabs/dashboard.vue b/frontend/src/views/home/tabs/dashboard.vue
index fb02e6b..9858cb9 100644
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -1,140 +1,130 @@
 <!-- 真正的首页 -->
 <template>
-  <div class="static">
-    <div class="left_tree">
-      <tree ref="treeRef" :updateSelectedTreeNode="getPieData || (() => {})"/>
-    </div>
-    <!-- <span class="new_span">测试scss颜色</span> -->
-    <div class="right_container">
-      <!-- 功能选择 -->
-      <div class="container_function">
-        <div
-            class="function_item"
-            :class="
-            item.checked ? 'function_item checked_function' : 'function_item'
-          "
-            v-for="(item, index) in tabsList"
-            :key="index"
-            @click="handleCheckFunction(item.value)"
-        >
-          <div class="item_img">
-            <img :src="item.img" alt=""/>
-          </div>
-          <div class="item_text">
-            <p>{{ item.label }}</p>
-          </div>
+  <div class='static'>
+    <el-row :gutter='10'>
+      <el-col :lg='4' :xl='4' :md='4' :sm='4'>
+        <div class='left_tree'>
+          <tree ref='treeRef' :updateSelectedTreeNode='getPieData || (() => {})' />
         </div>
-      </div>
-
-      <!-- <el-collapse v-model="activeNames" @change="handleChange">
-        <el-collapse-item title="检测进度展示" name="1"> -->
-      <div class="container_pieShow">
-        <el-collapse model-value="1" accordion @change="handleCollapseChange">
-          <el-collapse-item  name="1">
-            <template #title>
-              <div style="display: flex; justify-content: space-between; width: 100%;">
-                <span style="font-weight: bold;margin-left: 15px;">检测计划统计</span>
-                <span style="font-weight: bold;margin-right: 15px;">{{ planName }}</span>
+      </el-col>
+      <el-col :lg='20' :xl='20' :md='20' :sm='20'>
+        <div class='right_container'>
+          <!-- 功能选择 -->
+          <div class='container_function'>
+            <div
+              class='function_item'
+              :class="item.checked ? 'function_item checked_function' : 'function_item'"
+              v-for='(item, index) in tabsList'
+              :key='index'
+              @click='handleCheckFunction(item.value)'
+            >
+              <div class='item_img'>
+                <img :src='item.img' />
               </div>
-            </template>
-            <!-- 饼图 -->
-            <div class="container_charts">
-              <div class="charts_info" ref="chartsInfoRef">
-                <pie
-                    :customData="{
-                title: '设备检测状态',
-                textAlign: 'left',
-   
-              }"
-                    :legendData="{
-                icon: 'circle',
-                left: 'left',
-                top: 'bottom',
-              }"
-                    :chartsData="chartsData1"
-                    ref="pieRef1"
-                ></pie>
-              </div>
-              <div class="charts_info">
-                <pie
-                    :customData="{
-                title: '设备检测结果',
-                textAlign: 'left',
-              }"
-                    :legendData="{
-                icon: 'circle',
-                left: 'left',
-                top: 'bottom',
-              }"
-                    :chartsData="chartsData2"
-                    ref="pieRef2"
-                ></pie>
-              </div>
-              <div class="charts_info">
-                <pie
-                    :customData="{
-                title: '设备报告状态',
-                textAlign: 'left',
-                label: {
-                  normal: {
-                    position: 'inner',
-                  },
-                },
-              }"
-                    :legendData="{
-                icon: 'circle',
-                left: 'left',
-                top: 'bottom',
-              }"
-                    :chartsData="chartsData3"
-                    ref="pieRef3"
-                ></pie>
+              <div class='item_text'>
+                <p>{{ item.label }}</p>
               </div>
             </div>
-          </el-collapse-item>
-        </el-collapse>
-      </div>
-
-      <el-tabs class="tabs-menu" type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue" :style="{ height: tabsHeight }">
-        <el-tab-pane :label="tabLabel1" :style="{ height: tabPaneHeight }">
-          <!-- 列表数据 -->
-          <div class="container_table" :style="{ height: tableHeight }">
-            <Table ref="tableRef1" :id='currentId' :isTimeCheck='isTimeCheck'></Table>
           </div>
-        </el-tab-pane>
-        <!--      <el-tab-pane label="已检设备"  v-if="tabShow" :style="{ height: tabPaneHeight }">-->
-        <!--        &lt;!&ndash; 列表数据 &ndash;&gt;-->
-        <!--        <div class="container_table" :style="{ height: tableHeight }">-->
-        <!--          <Table ref="tableRef2" :id='currentId'></Table>-->
-        <!--        </div>-->
-        <!--      </el-tab-pane>-->
-      </el-tabs>
-    </div>
+          <!--检测计划统计 饼图统计-->
+          <div class='container_pieShow'>
+            <el-collapse model-value='1' accordion @change='handleCollapseChange'>
+              <el-collapse-item name='1'>
+                <template #title>
+                  <div class='container_pieShow_title'>
+                    <span>检测计划统计</span>
+                    <span>{{ planName }}</span>
+                  </div>
+                </template>
+                <!-- 饼图 -->
+                <div class='container_charts'>
+                  <div class='charts_info' ref='chartsInfoRef'>
+                    <pie
+                      :customData="{
+                       title: '设备检测状态',
+                       textAlign: 'left',
+                      }"
+                      :legendData="{
+                       icon: 'circle',
+                       left: 'left',
+                       top: 'bottom',
+                      }"
+                      :chartsData='chartsData1'
+                      ref='pieRef1'
+                    ></pie>
+                  </div>
+                  <div class='charts_info'>
+                    <pie
+                      :customData="{
+                       title: '设备检测结果',
+                       textAlign: 'left',
+                      }"
+                      :legendData="{
+                       icon: 'circle',
+                       left: 'left',
+                       top: 'bottom',
+                      }"
+                      :chartsData='chartsData2'
+                      ref='pieRef2'
+                    ></pie>
+                  </div>
+                  <div class='charts_info'>
+                    <pie
+                      :customData="{
+                       title: '设备报告状态',
+                       textAlign: 'left',
+                      }"
+                      :legendData="{
+                        icon: 'circle',
+                        left: 'left',
+                        top: 'bottom',
+                      }"
+                      :chartsData='chartsData3'
+                      ref='pieRef3'
+                    ></pie>
+                  </div>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+
+          <!--下方表格数据-->
+          <el-tabs class='tabs-menu' type='border-card' @tab-change='handleTabsChange' v-model='editableTabsValue'
+                   :style='{ height: tabsHeight }'>
+            <el-tab-pane :label='tabLabel1' :style='{ height: tabPaneHeight }'>
+              <!-- 列表数据 -->
+              <div class='container_table' :style='{ height: tableHeight }'>
+                <Table ref='tableRef1' :id='currentId' :isTimeCheck='isTimeCheck'></Table>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
-<script lang="ts" setup>
-import pie from "@/components/echarts/pie/default.vue";
-import {useRouter} from "vue-router";
-import tree from "../components/tree.vue";
-import Table from "../components/table.vue";
-//import { data } from "@/api/plan/static.json";
+<script lang='ts' setup>
+import pie from '@/components/echarts/pie/default.vue'
+import { useRouter } from 'vue-router'
+import tree from '../components/tree.vue'
+import Table from '../components/table.vue'
 import deviceDataList from '@/api/device/device/deviceData'
-import {getBoundPqDevList, getPlanListByPattern} from '@/api/plan/plan.ts'
-import {onBeforeMount, onUnmounted, ref, watch} from "vue";
-import {useModeStore} from '@/stores/modules/mode'; // 引入模式 store
-import {useDictStore} from '@/stores/modules/dict'
-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 {ResultData} from "@/api/interface";
+import { getBoundPqDevList, getPlanListByPattern } from '@/api/plan/plan.ts'
+import { onBeforeMount, onUnmounted, ref, watch } from 'vue'
+import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
+import { useDictStore } from '@/stores/modules/dict'
+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 { ResultData } from '@/api/interface'
 
 const planName = ref('')
 const dictStore = useDictStore()
-const modeStore = useModeStore();
-const chartsInfoRef = ref<HTMLElement | null>(null);
-const chartsWidth = ref<number>(0);
+const modeStore = useModeStore()
+const chartsInfoRef = ref<HTMLElement | null>(null)
+const chartsWidth = ref<number>(0)
 const deviceData = deviceDataList.plan_devicedata
-const treeRef = ref();
+const treeRef = ref()
 const form: any = ref({
   activeTabs: 0, //功能选择,例如报告生成
   activeChildTabs: 0,//子功能选择,例如未检设备报告生成，或已检设备更换误差体系生成
@@ -144,347 +134,317 @@ const form: any = ref({
   deviceBindStatus: 0, //绑定状态
   deviceType: 0, //设备类型
   manufacturer: 0, //制造厂商
-});
-const router = useRouter();
-const activeNames = ref(['2'])
-const tabShow = ref(false);
+})
+const router = useRouter()
+const tabShow = ref(false)
 const tabLabel1 = ref('设备检测')
 const editableTabsValue = ref('0')
 const checkStateTable = ref<number[]>([0, 1, 2])
-const tabsHeight = ref('calc(100vh - 538px)'); // 初始高度
+const tabsHeight = ref('calc(100vh - 522px)') // 初始高度
+const tabPaneHeight = ref('calc(100% - 5px)') // 初始高度
+const tableHeight = ref('calc(100% - 50px)') // 初始高度
 
-const tabPaneHeight = ref('calc(100% - 5px)'); // 初始高度
-const tableHeight = ref('calc(100% - 5px)'); // 初始高度
-const handleChange = (val: string[]) => {
-}
-const isTimeCheck = ref<boolean>(false);
-const planList = ref<ResultData<Plan.ReqPlan[]>>();
+const isTimeCheck = ref<boolean>(false)
+const planList = ref<ResultData<Plan.ReqPlan[]>>()
 const handleCollapseChange = (val: CollapseModelValue) => {
 
   // 计算新的高度
-  let newHeight;
+  let newHeight
   if (Array.isArray(val)) {
-    newHeight = val.length > 0 ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)';
+    newHeight = val.length > 0 ? 'calc(100vh - 522px)' : 'calc(100vh - 333px)'
   } else {
-    newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)';
+    newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'
   }
-  //const newtableHeight= val.length > 0 ? 'calc(100vh - 638px)' : 'calc(100vh - 433px)';
-  tabsHeight.value = newHeight;
-  tabPaneHeight.value = `calc(100% - 5px)`;
-  tableHeight.value = `calc(100% - 5px)`;
-
-  // tableRef1.value.resize();
-  // tableRef2.value.resize();
-};
+  tabsHeight.value = newHeight
+  tabPaneHeight.value = `calc(100% - 5px)`
+  tableHeight.value = `calc(100% - 5px)`
+}
 
 const handleTabsChange = (val: any) => {
-  form.value.activeTabs = 0;
-  form.value.activeTabs = 3;
-  form.value.activeChildTabs = Number(val);
+  form.value.activeTabs = 0
+  form.value.activeTabs = 3
+  form.value.activeChildTabs = Number(val)
 
 }
-localStorage.setItem("color", "red");
+localStorage.setItem('color', 'red')
 //功能选择数据
 const tabsList = ref([
   {
-    label: "设备检测",
+    label: '设备检测',
     value: 0,
-    img: "/src/assets/images/plan/static/1.svg",
+    img: '/src/assets/images/plan/static/1.svg',
     checked: true,
   },
-  // {
-  //   label: "设备复检",
-  //   value: 2,
-  //   img: "/src/assets/images/plan/static/2.svg",
-  //   checked: false,
-  // },
   {
-    label: "报告生成",
+    label: '报告生成',
     value: 3,
-    img: "/src/assets/images/plan/static/3.svg",
+    img: '/src/assets/images/plan/static/3.svg',
     checked: false,
   },
   {
-    label: "设备归档",
+    label: '设备归档',
     value: 4,
-    img: "/src/assets/images/plan/static/4.svg",
+    img: '/src/assets/images/plan/static/4.svg',
     checked: false,
   },
   {
-    label: "数据操作",
+    label: '数据操作',
     value: 5,
-    img: "/src/assets/images/plan/static/5.svg",
+    img: '/src/assets/images/plan/static/5.svg',
     checked: false,
   },
-]);
+])
 
-form.value.activeTabs = tabsList.value[0].value;
-const tableRef1 = ref();
-const tableRef2 = ref();
-const currentId = ref('');
+form.value.activeTabs = tabsList.value[0].value
+const tableRef1 = ref()
+const tableRef2 = ref()
+const currentId = ref('')
 
 watch(
-    () => form.value,
-    (val, oldVal) => {
-      if (val) {
+  () => form.value,
+  (val, oldVal) => {
+    if (val) {
 
-        if (form.value.activeTabs === 0)//设备检测
-        {
-          const tabledata = deviceData.filter((item) => item.document_State === "未归档")
-          tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata);
-        } else if (form.value.activeTabs === 4)//设备归档
-        {
-          const tabledata = deviceData.filter((item) => item.check_State === "检测完成" && item.document_State === "未归档")
-          tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata);
-        } else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
-        {
-          const tabledata = deviceData.filter((item) => item.check_State === "检测完成");
-          tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata);
-        }
+      if (form.value.activeTabs === 0)//设备检测
+      {
+        const tabledata = deviceData.filter((item) => item.document_State === '未归档')
+        tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
+      } else if (form.value.activeTabs === 4)//设备归档
+      {
+        const tabledata = deviceData.filter((item) => item.check_State === '检测完成' && item.document_State === '未归档')
+        tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
+      } else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
+      {
+        const tabledata = deviceData.filter((item) => item.check_State === '检测完成')
+        tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
       }
-    },
-    {
-      immediate: true,
-      deep: true,
     }
-);
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
 watch(
-    () => form.value,
-    (val, oldVal) => {
-      if (val) {
-        tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs);
-      }
-    },
-    {
-      immediate: true,
-      deep: true,
+  () => form.value,
+  (val, oldVal) => {
+    if (val) {
+      tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs)
     }
-);
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
 const pieRef1 = ref(),
-    pieRef2 = ref(),
-    pieRef3 = ref();
+  pieRef2 = ref(),
+  pieRef3 = ref()
 
 const chartsData1: any = ref([]),
-    chartsData2: any = ref([]),
-    chartsData3: any = ref([]);
+  chartsData2: any = ref([]),
+  chartsData3: any = ref([])
 
 const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => {
   for (const plan of plans) {
     if (plan.id === id) {
-      return plan;
+      return plan
     }
     if (plan.children) {
-      const foundPlan = findPlanById(plan.children, id);
+      const foundPlan = findPlanById(plan.children, id)
       if (foundPlan) {
-        return foundPlan;
+        return foundPlan
       }
     }
   }
-  return undefined;
-};
+  return undefined
+}
 
 const getPieData = async (id: string) => {
-  currentId.value = id; // 设置当前ID
-  //handleCheckFunction(0)//切换左侧树，默认css功能是设备检测
+  currentId.value = id // 设置当前ID
 
   // 初始化计数对象
-  const checkStateCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0, 3: 0};
-  const checkResultCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0};
-  const reportStateCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0};
+  const checkStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 }
+  const checkResultCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
+  const reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
   if (id) {
     const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
-    const plan = findPlanById(planList.value?.data || [], id);
-    planName.value =  '所选计划:' + plan.name
+    const plan = findPlanById(planList.value?.data || [], id)
+    planName.value = '所选计划:' + plan.name
     if (plan) {
       //isTimeCheck.value = plan.timeCheck === 1; // 将 1 转换为 true，0 转换为 false
-      isTimeCheck.value = false; // 将 1 转换为 true，0 转换为 false   ----目前不用守时检测，先去除
+      isTimeCheck.value = false // 将 1 转换为 true，0 转换为 false   ----目前不用守时检测，先去除
     } else {
       // 处理未找到计划的情况
-      isTimeCheck.value = false; // 或者其他默认值
+      isTimeCheck.value = false // 或者其他默认值
     }
-    const pqDevList_Result2 = await getBoundPqDevList({'planId': id, 'checkStateList': [0, 1, 2, 3]});
-    boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[];
+    const pqDevList_Result2 = await getBoundPqDevList({ 'planId': id, 'checkStateList': [0, 1, 2, 3] })
+    boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[]
     // 遍历 boundPqDevList 并更新计数对象
     boundPqDevList.value.forEach(t => {
       if (t.checkState !== undefined && t.checkState !== null && checkStateCount[t.checkState] !== undefined) {
-        checkStateCount[t.checkState]++;
+        checkStateCount[t.checkState]++
       }
-    });
+    })
     boundPqDevList.value.forEach(t => {
       if (t.checkResult !== undefined && t.checkResult !== null && checkResultCount[t.checkResult] !== undefined) {
-        checkResultCount[t.checkResult]++;
+        checkResultCount[t.checkResult]++
       }
-    });
+    })
     boundPqDevList.value.forEach(t => {
       if (t.reportState !== undefined && t.reportState !== null && reportStateCount[t.reportState] !== undefined) {
-        reportStateCount[t.reportState]++;
+        reportStateCount[t.reportState]++
       }
-    });
+    })
   }
 
   chartsData1.value = [
-    {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'}},
-  ];
+    { 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: checkResultCount[2], name: "未检", itemStyle: {color: '#fac858'}},
-    {value: checkResultCount[0], name: "不符合", itemStyle: {color: '#ee6666'}},
-    {value: checkResultCount[1], name: "符合", itemStyle: {color: '#91cc75'}},
-  ];
+    { value: checkResultCount[2], name: '未检', itemStyle: { color: '#fac858' } },
+    { value: checkResultCount[0], name: '不符合', itemStyle: { color: '#ee6666' } },
+    { value: checkResultCount[1], name: '符合', itemStyle: { color: '#91cc75' } },
+  ]
   chartsData3.value = [
-    {value: reportStateCount[2], name: "未检", itemStyle: {color: '#fac858'}},
-    {value: reportStateCount[0], name: "未生成", itemStyle: {color: '#ee6666'}},
-    {value: reportStateCount[1], name: "已生成", itemStyle: {color: '#91cc75'}},
-  ];
+    { value: reportStateCount[2], name: '未检', itemStyle: { color: '#fac858' } },
+    { value: reportStateCount[0], name: '未生成', itemStyle: { color: '#ee6666' } },
+    { value: reportStateCount[1], name: '已生成', itemStyle: { color: '#91cc75' } },
+  ]
 
-  pieRef1.value.init();
-  pieRef2.value.init();
-  pieRef3.value.init();
-  // pieRef1.value.reSize(470,145,true);
-  // pieRef2.value.reSize(470,145,true);
-  // pieRef3.value.reSize(470,145,true);
-};
+  pieRef1.value.init()
+  pieRef2.value.init()
+  pieRef3.value.init()
+}
 const getTree = (data?: any) => {
-  treeRef.value.getTreeData(data);
-};
+  treeRef.value.getTreeData(data)
+}
 //前往检测
 const handleDetection = () => {
   router.push({
-    path: "/detection",
-  });
-};
+    path: '/detection',
+  })
+}
 //前往计划详情
 const planDetail = () => {
   router.push({
-    path: "/plan/planList",
-  });
-};
+    path: '/plan/planList',
+  })
+}
 //功能选择css切换
 const handleCheckFunction = (val: any) => {
-  editableTabsValue.value = '0';
-  form.value.activeChildTabs = 0;
+  editableTabsValue.value = '0'
+  form.value.activeChildTabs = 0
   tabsList.value.map((item: any, index: any) => {
     if (val == item.value) {
-      item.checked = true;
+      item.checked = true
     } else {
-      item.checked = false;
+      item.checked = false
     }
-  });
+  })
 
-  tabShow.value = false;
+  tabShow.value = false
 
   switch (val) {
     case 0://自动检测
       checkStateTable.value = [0, 1, 2]
-      tabLabel1.value = "设备检测";
-      break;
+      tabLabel1.value = '设备检测'
+      break
     case 1://手动检测
-      tabLabel1.value = "手动检测";
-      break;
+      tabLabel1.value = '手动检测'
+      break
     case 2://设备复检
-      tabLabel1.value = "设备复检";
-      break;
+      tabLabel1.value = '设备复检'
+      break
     case 3://报告生成
       checkStateTable.value = [2, 3]
-      tabLabel1.value = "报告生成";
+      tabLabel1.value = '报告生成'
       //tabShow.value = true;
-      break;
+      break
     case 4://设备归档
       checkStateTable.value = [2]
-      tabLabel1.value = "设备归档";
-      break;
+      tabLabel1.value = '设备归档'
+      break
     case 5://数据查询
       checkStateTable.value = [2, 3]
-      tabLabel1.value = "数据查询";
-      break;
+      tabLabel1.value = '数据查询'
+      break
   }
-  form.value.activeTabs = val;
-};
+  form.value.activeTabs = val
+}
 
 
 const resizeObserver = new ResizeObserver(entries => {
   for (let entry of entries) {
-    chartsWidth.value = entry.contentRect.width;
+    chartsWidth.value = entry.contentRect.width
     //console.log('Charts Info Width:', chartsWidth.value);
 
-    pieRef1.value?.reSize(chartsWidth.value * 0.95, 180, true);
-    pieRef2.value?.reSize(chartsWidth.value * 0.95, 180, true);
-    pieRef3.value?.reSize(chartsWidth.value * 0.95, 180, true);
+    pieRef1.value?.reSize(chartsWidth.value * 0.95, 180, true)
+    pieRef2.value?.reSize(chartsWidth.value * 0.95, 180, true)
+    pieRef3.value?.reSize(chartsWidth.value * 0.95, 180, true)
   }
-});
+})
 
 onBeforeMount(async () => {
   const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
   const reqPlan: Plan.ReqPlan = {
     pattern: patternId,
-    datasourceIds: "",
-    sourceIds: "",
-    planId: "",
-    scriptName: "",
-    errorSysName: "",
-    sourceName: "",
+    datasourceIds: '',
+    sourceIds: '',
+    planId: '',
+    scriptName: '',
+    errorSysName: '',
+    sourceName: '',
     devIds: [],
-    id: "",
-    name: "",
-    dataSourceId: "",
-    scriptId: "",
-    errorSysId: "",
+    id: '',
+    name: '',
+    dataSourceId: '',
+    scriptId: '',
+    errorSysId: '',
     timeCheck: 0,
     testState: 0,
     reportState: 0,
     result: 0,
     code: 0,
-    state: 0
-  };
-  planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>;
+    state: 0,
+  }
+  planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>
 
   if (planList.value.data[0].children[0]) {
-    currentId.value = planList.value.data[0].children[0].id;
+    currentId.value = planList.value.data[0].children[0].id
   }
   if (chartsInfoRef.value) {
-    resizeObserver.observe(chartsInfoRef.value);
+    resizeObserver.observe(chartsInfoRef.value)
   }
-  getTree(planList.value.data);
+  getTree(planList.value.data)
 
-  getPieData(currentId.value);
-});
+  getPieData(currentId.value)
+})
 
 onUnmounted(() => {
   if (chartsInfoRef.value) {
-    resizeObserver.unobserve(chartsInfoRef.value);
+    resizeObserver.unobserve(chartsInfoRef.value)
   }
-});
+})
 
 
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .static {
-  width: 100%;
-  // height: calc(100vh - 165px);
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  //background-color: #eee;
 
   .left_tree {
-    width: 14% !important;
     height: 100%;
     background-color: #fff;
   }
 
   .right_container {
     flex: none;
-    width: 85.8%;
-    // padding: 0 10px 0 10px;
-    margin-left: 10px;
     height: 100%;
     display: flex;
     flex-direction: column;
-    //justify-content: space-between;
-    //align-items: center;
-    //box-sizing: border-box;
 
 
     .container_function {
@@ -566,134 +526,47 @@ onUnmounted(() => {
       }
     }
 
-    // .container_function {
-    //   width: 100%;
-    //   height: auto;
-    //   background: #fff;
-    //   border-radius: 4px;
-    //   display: flex;
-    //   // justify-content: space-around;
-    //   // justify-content: space-evenly;
-    //   justify-content: space-between;
-    //   align-items: center;
-    //   margin-bottom: 10px;
-    //   padding: 10px 20px 10px 20px;
-    //   box-sizing: border-box;
-
-    //   .function_item {
-    //     flex: none;
-    //     width: 6%;
-    //     height: 40px;
-    //     display: flex;
-    //     justify-content: space-between;
-    //     align-items: center;
-    //     flex-direction: row;
-    //     cursor: pointer;
-    //     background-color: #607eab;
-    //     border-radius: 8px;
-    //     padding: 0px 30px;
-
-    //     .item_img {
-    //       width: 30px;
-    //       height: 30px;
-    //       border-radius: 50%;
-    //       // background-color: #607eab;
-    //       display: flex;
-    //       align-items: center;
-    //       justify-content: center;
-    //       margin-right: 5px;
-    //       img {
-    //         width: 20px;
-    //         height: auto;
-    //       }
-    //     }
-
-    //     .item_img:nth-child(3),
-    //     .item_img:nth-child(6) {
-    //       padding: 10px !important;
-
-    //       img {
-    //         width: 20px !important;
-    //         height: auto;
-    //       }
-    //     }
-
-    //     .item_text {
-    //       p {
-    //         width: 80px;
-    //         margin: 0;
-    //         font-weight: 800;
-    //         color: var(--el-color-primary);
-    //         font-size: 14px;
-    //         font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
-    //       }
-    //     }
-    //   }
-
-    //   .function_item:hover,
-    //   .checked_function {
-    //     background-color: var(--el-color-primary);
-
-    //     .item_img {
-    //       // background-color: var(--el-color-primary);
-    //     }
-
-    //     .item_text {
-    //       p {
-    //         // color: var(--el-color-primary);
-    //         color: #fff;
-    //       }
-    //     }
-    //   }
-    // }
-
     .container_pieShow {
       width: 100% !important;
-      //min-height: 200px !important;
       height: auto;
       background-color: #eee;
-      // display: flex;
-      // justify-content: space-between;
-      // padding-left: 2ch;
       margin-bottom: 10px;
+
+      .container_pieShow_title {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 15px;
+        font-weight: bold;
+        width: 100%;
+      }
+
     }
 
     .el-collapse {
       width: 100% !important;
-      // min-height: 200px !important;
       height: 100% !important;
       background-color: #eee;
-      // display: flex;
-      // justify-content: space-between;
-      // padding-left: 2ch;
-      // margin-bottom: 10px;
     }
 
     .el-collapse-item {
       width: 100% !important;
-      // min-height: 200px !important;
       height: 100% !important;
       background-color: #eee;
-      // display: flex !important;
     }
 
     .container_charts {
       width: 100%;
-      //min-height: 180px !important;
       height: 100%;
       background-color: #eee;
       display: flex;
       justify-content: space-between;
-      margin-bottom: 10px;
 
       .charts_info {
-        margin-top: 5px;
-        border-radius: 4px;
+        margin-top: 1px;
         flex: none;
         width: 33.1%;
         height: 100% !important;
         background-color: #fff;
-        // border-radius: 4px;
       }
     }
 
@@ -702,8 +575,11 @@ onUnmounted(() => {
       border-radius: 4px;
     }
 
+
+
     .tabs-menu {
       height: 100%;
+      border: 0;
     }
 
     .container_table {
@@ -724,17 +600,20 @@ onUnmounted(() => {
 
 :deep(.el-collapse-item__header) {
   color: var(--el-color-primary);
-  font-size: 18px;
+  font-size: 14px;
   font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
 }
 
 :deep(.el-collapse-item__conten) {
-  // background-color:#f6f6f6;
   padding-bottom: 0px !important;
 }
 
 :deep(.el-collapse-item__content ) {
-  // background-color:#f6f6f6;
   padding-bottom: 0px !important;
 }
+
+:deep(.el-tabs--border-card > .el-tabs__content) {
+  padding: 0 !important;
+}
+
 </style>