正式检测-时间显示调整

frontend/src/views/home/components/test.vue

@@ -1,11 +1,13 @@
 <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"/>
 
+      <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"/>
@@ -61,8 +63,8 @@
             @click="emit('sendResume')"
         >继续检测
         </el-button>
-      <div type="text" :icon="Timer" disabled>检测用时：{{ timeView }}</div>
-      <el-button type="text" :icon="InfoFilled" @click="showTestLog">检测项进度</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 {