From 92df9274537cc147b65ee1989731efdcd1612588 Mon Sep 17 00:00:00 2001
From: GGJ <357021191@qq.com>
Date: Thu, 5 Dec 2024 11:07:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles/element.scss              |  20 +-
 .../views/home/components/channelsTest.vue    |   8 +-
 .../src/views/home/components/preTest.vue     | 289 +++++++++---------
 .../src/views/home/components/timeTest.vue    |   5 +-
 frontend/src/views/home/tabs/dashboard.vue    |  14 +-
 5 files changed, 185 insertions(+), 151 deletions(-)

diff --git a/frontend/src/styles/element.scss b/frontend/src/styles/element.scss
index 1435e59..71a9d53 100644
--- a/frontend/src/styles/element.scss
+++ b/frontend/src/styles/element.scss
@@ -489,4 +489,22 @@
     font-size: 12px !important;
     // color: var(--ba-bg-color-overlay) !important;
   }
-}
\ No newline at end of file
+}
+.el-message-box{
+  padding: 0px !important;
+  .el-message-box__header{
+    background-color:  var(--el-color-primary);
+    .el-message-box__title{
+      color: #fff;
+      padding: 10px 10px 0;
+    }
+   
+  }
+  .el-message-box__content{
+    padding: 10px ;
+    border-bottom: 1px solid #cccccc;
+  }
+  .el-message-box__btns {
+  
+    padding: 10px;}
+  }
\ No newline at end of file
diff --git a/frontend/src/views/home/components/channelsTest.vue b/frontend/src/views/home/components/channelsTest.vue
index c7f2ba0..6e6da25 100644
--- a/frontend/src/views/home/components/channelsTest.vue
+++ b/frontend/src/views/home/components/channelsTest.vue
@@ -346,7 +346,7 @@ emit('update:testStatus',ts.value)
       margin-bottom: 10px;
   }
   .right-content{
-    max-height: 400px;
+    /* max-height: 400px; */
   }
 
   .custom-tabs-label .el-icon {
@@ -356,4 +356,10 @@ emit('update:testStatus',ts.value)
   vertical-align: middle;
   margin-left: 4px;
 }
+.dialog-content{
+  height: 472px;
+}
+.el-tabs--border-card {
+  height: 435px;
+}
 </style>
diff --git a/frontend/src/views/home/components/preTest.vue b/frontend/src/views/home/components/preTest.vue
index 88a1f9d..366fdf5 100644
--- a/frontend/src/views/home/components/preTest.vue
+++ b/frontend/src/views/home/components/preTest.vue
@@ -1,131 +1,130 @@
 <template>
-    <div>
-        <el-tabs type="border-card">
-            <el-tab-pane label="预检测项目">
-                <div class="form-grid">
-                    <el-checkbox
-                            v-for="(item, index) in detectionOptions"
-                            v-model="item.selected"
-                            :key="index"
-                            :label="item.name"
-                            
-                            ></el-checkbox
-                        >
-                        <!-- disabled="true" -->
-                </div>
-            </el-tab-pane>
-        </el-tabs>
+  <div>
+    <el-tabs type="border-card">
+      <el-tab-pane label="预检测项目">
+        <div class="form-grid">
+          <el-checkbox v-for="(item, index) in detectionOptions" v-model="item.selected" :key="index"
+            :label="item.name"></el-checkbox>
+          <!-- disabled="true" -->
+        </div>
+      </el-tab-pane>
+    </el-tabs>
 
-<div class = "test-dialog">
-    <div class="dialog-left">
-    <el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus" finish-status="success">
-    <el-step title="源通讯校验" />
-    <el-step title="设备通讯校验" />
-    <el-step title="协议校验" />
-    <el-step title="相序校验" />
-    <el-step title="检测完成" />
-    </el-steps>
-    </div>
-    <div class="dialog-right">
+    <div class="test-dialog">
+      <div class="dialog-left">
+        <el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus"
+          finish-status="success">
+          <el-step title="源通讯校验" />
+          <el-step title="设备通讯校验" />
+          <el-step title="协议校验" />
+          <el-step title="相序校验" />
+          <el-step title="检测完成" />
+        </el-steps>
+      </div>
+      <div class="dialog-right">
         <el-collapse v-model="collapseActiveName" accordion>
-            <el-collapse-item title="源通讯校验" name="1">
-                <div class = "div-log">
-                    <p v-for="(item, index) in step1InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
-                    {{ item.log }} <br />
-                  </p>
-                </div>
-            </el-collapse-item>
-            <el-collapse-item title="设备通讯校验" name="2">
-                <div class = "div-log">
-                  <p v-for="(item, index) in step2InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
-                    {{ item.log }} <br />
-                  </p>
-                </div>
-            </el-collapse-item>
-            <el-collapse-item title="协议校验" name="3">
-                <div class = "div-log">
-                  <p v-for="(item, index) in step3InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
-                    {{ item.log }} <br />
-                  </p>
-                </div>
-            </el-collapse-item>
-            <el-collapse-item title="相序校验" name="4">
-                <div class = "div-log">
-                  <p v-for="(item, index) in step4InitLog" :key="index" :style="{color:item.type==='error'?'#F56C6C':'var(--el-text-color-regular)'}">
-                    {{ item.log }} <br />
-                  </p>
-                </div>
-            </el-collapse-item>
+          <el-collapse-item title="源通讯校验" name="1">
+            <div class="div-log">
+              <p v-for="(item, index) in step1InitLog" :key="index"
+                :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
+                {{ item.log }} <br />
+              </p>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item title="设备通讯校验" name="2">
+            <div class="div-log">
+              <p v-for="(item, index) in step2InitLog" :key="index"
+                :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
+                {{ item.log }} <br />
+              </p>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item title="协议校验" name="3">
+            <div class="div-log">
+              <p v-for="(item, index) in step3InitLog" :key="index"
+                :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
+                {{ item.log }} <br />
+              </p>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item title="相序校验" name="4">
+            <div class="div-log">
+              <p v-for="(item, index) in step4InitLog" :key="index"
+                :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
+                {{ item.log }} <br />
+              </p>
+            </div>
+          </el-collapse-item>
         </el-collapse>
+      </div>
     </div>
-</div>
-    </div>
+  </div>
 
 </template>
 <script lang="tsx" setup name="preTest">
 const step1InitLog = ref([
   {
     type: 'info',
-    log:'暂无数据，等待检测开始',
+    log: '暂无数据，等待检测开始',
   },
 ])
 
 const step1Log = ref([
   {
     type: 'info',
-    log:'源通讯校验成功',
+    log: '源通讯校验成功',
   },
 ])
 
 const step2InitLog = ref([
   {
     type: 'info',
-    log:'暂无数据，等待检测开始',
+    log: '暂无数据，等待检测开始',
   },
 ])
 
 const step2Log = ref([
   {
     type: 'info',
-    log:'被检设备：240001通讯校验成功',
+    log: '被检设备：240001通讯校验成功',
   },
   {
     type: 'info',
-    log:'被检设备：240002通讯校验成功',
+    log: '被检设备：240002通讯校验成功',
   },
   {
     type: 'info',
-    log:'被检设备：240003通讯校验成功',
+    log: '被检设备：240003通讯校验成功',
   },
   {
     type: 'info',
-    log:'被检设备：240004通讯校验成功',
+    log: '被检设备：240004通讯校验成功',
   },
 ])
 
 const step3InitLog = ref([
   {
     type: 'info',
-    log:'暂无数据，等待检测开始',
+    log: '暂无数据，等待检测开始',
   },
 ])
 
 const step3Log = ref([
   {
     type: 'info',
-    log:'被检设备：240001协议校验成功',
+    log: '被检设备：240001协议校验成功',
   },
   {
     type: 'info',
-    log:'被检设备：240002协议校验成功',
+    log: '被检设备：240002协议校验成功',
   },
   {
     type: 'info',
-    log:'被检设备：240003协议校验成功',
+    log: '被检设备：240003协议校验成功',
   },
   {
     type: 'info',
-    log:'被检设备：240004协议校验成功',
+    log: '被检设备：240004协议校验成功',
   },
 ])
 
@@ -133,26 +132,26 @@ const step3Log = ref([
 const step4InitLog = ref([
   {
     type: 'info',
-    log:'暂无数据，等待检测开始',
+    log: '暂无数据，等待检测开始',
   },
 ])
 
 const step4Log = ref([
   {
     type: 'info',
-    log:'被检设备：240001相序校验成功',
+    log: '被检设备：240001相序校验成功',
   },
   {
     type: 'info',
-    log:'被检设备：240002相序校验成功',
+    log: '被检设备：240002相序校验成功',
   },
   {
     type: 'info',
-    log:'被检设备：240003相序校验成功',
+    log: '被检设备：240003相序校验成功',
   },
   {
     type: 'info',
-    log:'被检设备：240004相序校验成功',
+    log: '被检设备：240004相序校验成功',
   },
 ])
 
@@ -181,16 +180,16 @@ const detectionOptions = ref([
     name: "相序校验",//判断装置的接线是否正确
     selected: true,
   },
-//   {
-//     id: 4,
-//     name: "守时校验",//判断装置24小时内的守时误差是否小于1s
-//     selected: true,
-//   },
-//   {
-//     id: 5,
-//     name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数
-//     selected: true,
-//   },
+  //   {
+  //     id: 4,
+  //     name: "守时校验",//判断装置24小时内的守时误差是否小于1s
+  //     selected: true,
+  //   },
+  //   {
+  //     id: 5,
+  //     name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数
+  //     selected: true,
+  //   },
   // {
   //   id: 6,
   //   name: "实时数据比对",
@@ -203,8 +202,8 @@ const detectionOptions = ref([
 
 const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
 
-  const props = defineProps({
-    testStatus: {
+const props = defineProps({
+  testStatus: {
     type: String,
     default: 'wait'
   }
@@ -214,54 +213,47 @@ const ts = ref('');
 
 watch(activeIndex, function (newValue, oldValue) {
 
-  if(activeIndex.value === 1)
-  {
+  if (activeIndex.value === 1) {
     step1InitLog.value.length = 0;
     step1InitLog.value = step1Log.value;
   }
-  if(activeIndex.value === 2)
-  {
+  if (activeIndex.value === 2) {
     step2InitLog.value.length = 0;
     step2InitLog.value = step2Log.value;
   }
-  if(activeIndex.value === 3)
-  {
+  if (activeIndex.value === 3) {
     step3InitLog.value.length = 0;
     step3InitLog.value = step3Log.value;
   }
-  if(activeIndex.value > 3)
-  {
+  if (activeIndex.value > 3) {
     step4InitLog.value.length = 0;
     step4InitLog.value = step4Log.value;
   }
-    if(activeIndex.value < activeTotalNum.value - 2)
-        collapseActiveName.value = (newValue+1).toString()
-    else
-        collapseActiveName.value = (activeTotalNum.value - 1).toString()
+  if (activeIndex.value < activeTotalNum.value - 2)
+    collapseActiveName.value = (newValue + 1).toString()
+  else
+    collapseActiveName.value = (activeTotalNum.value - 1).toString()
 })
 
 //监听goods_sn的变化
 watch(testStatus, function (newValue, oldValue) {
   ts.value = props.testStatus;
-  if(ts.value==='start')
-  {
+  if (ts.value === 'start') {
     ts.value = 'process'
 
     let timer = setInterval(() => {
-        if(activeIndex.value < activeTotalNum.value - 2)
-            activeIndex.value++
-        else if(activeIndex.value === activeTotalNum.value -2)
-        {
-            activeIndex.value++
-            activeIndex.value++
-        }
-        else 
-        {
-            clearInterval(timer)
-            ts.value = 'success'
-        }
-        
-  }, 1500);
+      if (activeIndex.value < activeTotalNum.value - 2)
+        activeIndex.value++
+      else if (activeIndex.value === activeTotalNum.value - 2) {
+        activeIndex.value++
+        activeIndex.value++
+      }
+      else {
+        clearInterval(timer)
+        ts.value = 'success'
+      }
+
+    }, 1500);
   }
 })
 
@@ -269,52 +261,61 @@ const emit = defineEmits(['update:testStatus']);
 //监听sn
 watch(ts, function (newValue, oldValue) {
   //修改父组件
-  emit('update:testStatus',ts.value)
+  emit('update:testStatus', ts.value)
 })
 
 </script>
-<style scoped  lang="scss">
+<style scoped lang="scss">
+.test-dialog {
+  height: 350px;
+  display: flex;
 
-.test-dialog{
-    height: 350px;
-    display: flex;
-
-    flex-direction: row; /* 横向排列 */
-    margin-top: 20px;
-    /* .dialog-left{
+  flex-direction: row;
+  /* 横向排列 */
+  margin-top: 20px;
+  /* .dialog-left{
         margin-right: 20px;
     } */
 }
-    .dialog-left{
-        width: 15%;
-        margin-left: 20px;
-    }
 
-     /* .dialog-left :deep(.test-head-steps){
+.dialog-left {
+  width: 15%;
+  margin-left: 20px;
+}
+
+/* .dialog-left :deep(.test-head-steps){
        height: 80px;
        /* margin-bottom: 10px;
    } 
    */
 
-   /* .dialog-left  :deep(.el-step__title)  {
+/* .dialog-left  :deep(.el-step__title)  {
    font-size: 18px !important; /* 设置标题字体大小
  } */
- 
- /* .dialog-left  :deep(.el-step__icon-inner) {
+
+/* .dialog-left  :deep(.el-step__icon-inner) {
      font-size: 24px !important;
    } */
 
-    .dialog-right{
-        margin-left: 20px;
-        width: 80%;
-        height: 100%;
-    }
-    .dialog-right :deep(.el-collapse-item__header) {
-      font-size: 16px;
-    }
-    
-    .div-log{
-            height: 100px;
-            padding-left: 10px;
-        }
+.dialog-right {
+  margin-left: 20px;
+  width: 80%;
+  height: 100%;
+}
+
+.dialog-right :deep(.el-collapse-item__header) {
+  font-size: 16px;
+}
+
+.div-log {
+  height: 145px;
+  overflow-y: auto;
+  padding-left: 10px;
+
+  p {
+    margin: 5px 0;
+    font-size: 14px;
+  }
+
+}
 </style>
diff --git a/frontend/src/views/home/components/timeTest.vue b/frontend/src/views/home/components/timeTest.vue
index 709ce3e..1cc2daa 100644
--- a/frontend/src/views/home/components/timeTest.vue
+++ b/frontend/src/views/home/components/timeTest.vue
@@ -224,8 +224,9 @@ watch(ts, function (newValue, oldValue) {
     display: flex;
 
     flex-direction: row; /* 横向排列 */
-    margin-top: 20px;
-    min-height: 300px;
+    /* margin-top: 20px; */
+    /* min-height: 300px; */
+    height: 472px;
     /* .dialog-left{
         margin-right: 20px;
     } */
diff --git a/frontend/src/views/home/tabs/dashboard.vue b/frontend/src/views/home/tabs/dashboard.vue
index 5ea7397..470f4bd 100644
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -353,9 +353,9 @@ const resizeObserver = new ResizeObserver(entries => {
     chartsWidth.value = entry.contentRect.width;
     console.log('Charts Info Width:', chartsWidth.value);
 
-    pieRef1.value.reSize(chartsWidth.value * 0.95,145,true);
-    pieRef2.value.reSize(chartsWidth.value * 0.95,145,true);
-    pieRef3.value.reSize(chartsWidth.value * 0.95,145,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);
   }
 });
 
@@ -631,4 +631,12 @@ onUnmounted(() => {
     }
   }
 }
+:deep(.el-collapse-item__conten){
+  // background-color:#f6f6f6;
+  padding-bottom: 0px !important;
+}
+:deep(.el-collapse-item__content ){
+  // background-color:#f6f6f6;
+  padding-bottom: 0px !important;
+}
 </style>