From d28669e6b0eeccd5288254fb30b78e28cf31b14b Mon Sep 17 00:00:00 2001
From: caozehui <2427765068@qq.com>
Date: Wed, 19 Feb 2025 13:17:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AD=A3=E5=BC=8F=E6=A3=80=E6=B5=8B-=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E6=98=BE=E7=A4=BA=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/home/components/test.vue | 139 +++++++++++---------
 1 file changed, 76 insertions(+), 63 deletions(-)

diff --git a/frontend/src/views/home/components/test.vue b/frontend/src/views/home/components/test.vue
index e613ef0..6bc1bc5 100644
--- a/frontend/src/views/home/components/test.vue
+++ b/frontend/src/views/home/components/test.vue
@@ -1,68 +1,70 @@
 <template>
   <div class="dialog" v-bind="dialogBig">
     <div class="dialog-title">
+      <div class="timeView">检测用时：{{ timeView }}</div>
       <el-progress
-          style="width: 65%"
+          style="width: 55%; margin-right: 15px;"
           :percentage="percentage"
           :color="customColors"/>
 
-      <el-button type="primary" v-if="testStatus=='test_init'" disabled @click="handlePause()">
-        <el-icon class="loading-box" style="color: #fff;margin-right: 8px;">
-          <component :is="Refresh"/>
-        </el-icon>
-        初始化中
-      </el-button>
+      <div style="width: 12%">
+        <el-button type="primary" v-if="testStatus=='test_init'" disabled @click="handlePause()">
+          <el-icon class="loading-box" style="color: #fff;margin-right: 8px;">
+            <component :is="Refresh"/>
+          </el-icon>
+          初始化中
+        </el-button>
 
-      <el-button
-          type="primary"
-          v-if="testStatus=='process' && percentage < 100"
-          :icon="VideoPause"
-          @click="handlePause()">停止检测
-      </el-button>
-      <el-button type="warning" v-if="testStatus === 'paused_ing' && percentage < 100" disabled>
-        <el-icon class="loading-box" style="margin-right: 8px;">
-          <component :is="Refresh"/>
-        </el-icon>
-        暂停中
-      </el-button>
-      <!--      <el-button-->
-      <!--          type="primary"-->
-      <!--          v-if="testStatus=='test_init'"-->
-      <!--          :icon="VideoPause"-->
-      <!--          disabled>初始化中-->
-      <!--      </el-button>-->
-      <!--      <el-button-->
-      <!--          type="danger"-->
-      <!--          v-if="testStatus=='test_init_fail'"-->
-      <!--          :icon="Failed"-->
-      <!--          disabled>初始化失败-->
-      <!--      </el-button>-->
-      <!--      <el-button-->
-      <!--          type="danger"-->
-      <!--          v-if="testStatus=='connect_timeout'"-->
-      <!--          :icon="Failed"-->
-      <!--          disabled>连接超时-->
-      <!--      </el-button>-->
-      <el-button
-          type="primary"
-          :icon="RefreshLeft"
-          v-if="testStatus === 'test_recheck'"
-          @click="emit('sendReCheck')">重新检测
-      </el-button>
+        <el-button
+            type="primary"
+            v-if="testStatus=='process' && percentage < 100"
+            :icon="VideoPause"
+            @click="handlePause()">停止检测
+        </el-button>
+        <el-button type="warning" v-if="testStatus === 'paused_ing' && percentage < 100" disabled>
+          <el-icon class="loading-box" style="margin-right: 8px;">
+            <component :is="Refresh"/>
+          </el-icon>
+          暂停中
+        </el-button>
+        <!--      <el-button-->
+        <!--          type="primary"-->
+        <!--          v-if="testStatus=='test_init'"-->
+        <!--          :icon="VideoPause"-->
+        <!--          disabled>初始化中-->
+        <!--      </el-button>-->
+        <!--      <el-button-->
+        <!--          type="danger"-->
+        <!--          v-if="testStatus=='test_init_fail'"-->
+        <!--          :icon="Failed"-->
+        <!--          disabled>初始化失败-->
+        <!--      </el-button>-->
+        <!--      <el-button-->
+        <!--          type="danger"-->
+        <!--          v-if="testStatus=='connect_timeout'"-->
+        <!--          :icon="Failed"-->
+        <!--          disabled>连接超时-->
+        <!--      </el-button>-->
+        <el-button
+            type="primary"
+            :icon="RefreshLeft"
+            v-if="testStatus === 'test_recheck'"
+            @click="emit('sendReCheck')">重新检测
+        </el-button>
 
 
-      <el-button type="success" v-if="percentage >= 100" :icon="Check" disabled>检测完成</el-button>
+        <el-button type="success" v-if="percentage >= 100" :icon="Check" disabled>检测完成</el-button>
 
-      <el-button
-          type="warning"
-          v-if="(testStatus=='paused' || testStatus === 'pause_timeout') && percentage < 100"
-          :icon="VideoPlay"
-          :disabled="testStatus === 'pause_timeout'"
-          @click="emit('sendResume')"
-      >继续检测
-      </el-button>
-      <div type="text" :icon="Timer" disabled>检测用时：{{ timeView }}</div>
-      <el-button type="text" :icon="InfoFilled" @click="showTestLog">检测项进度</el-button>
+        <el-button
+            type="warning"
+            v-if="(testStatus=='paused' || testStatus === 'pause_timeout') && percentage < 100"
+            :icon="VideoPlay"
+            :disabled="testStatus === 'pause_timeout'"
+            @click="emit('sendResume')"
+        >继续检测
+        </el-button>
+      </div>
+      <el-button style="width: 10%" type="text" :icon="InfoFilled" @click="showTestLog">检测项进度</el-button>
     </div>
 
     <div class="dialog-content">
@@ -133,7 +135,7 @@
 
   </div>
   <div class="drawer-container">
-    <el-drawer v-model="drawer" title="检测项进度">
+    <el-drawer v-model="drawer" title="检测项进度" direction="btt">
       <div ref="scrollContainerRef" style="height: 100%; overflow-y: auto;">
         <p v-for="(item, index) in testLogList"
            :key="index"
@@ -151,7 +153,7 @@
   <dataCheckSingleChannelSingleTestPopup ref="dataCheckSingleChannelSingleTestPopupRef"/>
 </template>
 <script lang="tsx" setup name="test">
-import {Check, Failed, InfoFilled, Loading, Timer,Refresh, RefreshLeft, VideoPause, VideoPlay} from '@element-plus/icons-vue'
+import {Check, Failed, InfoFilled, Loading, Timer, Refresh, RefreshLeft, VideoPause, VideoPlay} from '@element-plus/icons-vue'
 import resultPopup from './resultPopup.vue'
 import dataCheckSingleChannelSingleTestPopup from './dataCheckSingleChannelSingleTestPopup.vue'
 import {computed, reactive, ref, toRef, watch} from "vue";
@@ -185,7 +187,7 @@ const emit = defineEmits(['update:testStatus', 'update:webMsgSend', 'sendPause',
 // 用来保存测试项进度抽屉是否打开
 const drawer = ref(false)
 // 进度条颜色
-const customColors = [{color: "#5cb87a", percentage: 100}]
+const customColors = [{color: "#67c23a", percentage: 100}]
 // 检测脚本数据
 let scriptData: CheckData.ScriptItem[] = []
 // 用来保存被检设备
@@ -633,8 +635,8 @@ const handleStartItem = (code: string, desc: string | undefined) => {
     updateCheckResultView(code, true)
     updateLog(true)
   } else {
-    if (desc.length > 60) {
-      desc = desc.substring(0, 60) + '...'
+    if (desc.length > 100) {
+      desc = desc.substring(0, 100) + '...'
     }
     testLogList.push({type: 'info', log: `${new Date().toLocaleString()}：${desc}准确度检测：开始`})
   }
@@ -651,8 +653,8 @@ const handleEndItem = (code: string, desc: string | undefined, devices: CheckDat
     }
   } else {
     let result = getResult(devices)
-    if (desc.length > 60) {
-      desc = desc.substring(0, 60) + '...'
+    if (desc.length > 100) {
+      desc = desc.substring(0, 100) + '...'
     }
     if (result === 1) {
       testLogList.push({type: 'info', log: `${new Date().toLocaleString()}：${desc}检测结束：符合`})
@@ -776,7 +778,7 @@ const updateCheckResult = (data: CheckData.ScriptChnItem) => {
 
 const scrollToBottom = () => {
   if (scrollContainerRef.value) {
-    scrollContainerRef.value.scrollTop = scrollContainerRef.value.scrollHeight;
+    scrollContainerRef.value.scrollTop = scrollContainerRef.value.scrollHeight-50;
   }
 };
 
@@ -859,7 +861,7 @@ const updateLog = (isStart: boolean) => {
           break
       }
 
-      timeView.value = secondToTime(timeDifference.value/1000)
+      timeView.value = secondToTime(timeDifference.value / 1000)
       if (activeIndex === checkTotal) {
         testLogList.push({
           type: 'info',
@@ -1445,11 +1447,22 @@ onBeforeUnmount(() => {
 }
 
 .dialog-title {
+
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-right: 10px;
   margin-bottom: 10px;
+
+  .timeView {
+    color: #67c23a;;
+    width: 25%;
+    margin-left: 5px;
+    margin-right: 0px;
+    text-align: left;
+    font-size: 26px;
+    font-weight: bold;
+  }
 }
 
 .dialog-content {