显示时间

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

@@ -2,10 +2,17 @@
   <div class="dialog" v-bind="dialogBig">
     <div class="dialog-title">
       <el-progress
-          style="width: 90%"
+          style="width: 75%"
           :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>
+
       <el-button
           type="primary"
           v-if="testStatus=='process' && percentage < 100"
@@ -54,6 +61,7 @@
           @click="emit('sendResume')"
       >继续检测
       </el-button>
+      <el-button type="text" :icon="Timer" disabled>{{ timeView }}</el-button>
       <el-button type="text" :icon="InfoFilled" @click="showTestLog">检测项进度</el-button>
     </div>
 
@@ -143,7 +151,7 @@
   <dataCheckSingleChannelSingleTestPopup ref="dataCheckSingleChannelSingleTestPopupRef"/>
 </template>
 <script lang="tsx" setup name="test">
-import {Check, Failed, InfoFilled, Loading, 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";
@@ -152,7 +160,6 @@ import {CheckData} from "@/api/check/interface"
 import {useCheckStore} from "@/stores/modules/check";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {getBigTestItem} from "@/api/check/test";
-import {tryHideFullScreenLoading} from "@/components/Loading/fullScreen";
 
 const checkStore = useCheckStore()
 
@@ -187,6 +194,10 @@ const deviceList = reactive<CheckData.Device[]>([])
 let activeIndex = 0
 // 百分比
 const percentage = ref(0);
+// 时间计数器
+let timer: any = null
+const timeCount = ref(0)
+const timeView = ref('00:00:00')
 //测试项开始检测时间（或继续检测时间）
 const startData = ref(new Date())
 //测试项检测结束时间（或暂停时的时间）
@@ -303,6 +314,7 @@ const checkResultView: ComputedRef<CheckData.ScriptChnViewItem[]> = computed(()
 watch(testStatus, function (newValue, oldValue) {
   if (newValue == 'start') {
     ElMessage.success('初始化开始!')
+    startTimeCount()
 
     showTestLog()
 
@@ -855,6 +867,7 @@ const updateLog = (isStart: boolean) => {
           type: 'info',
           log: currentTime.value + ' ：检测结束，总用时' + getTimeDifference(timeDifference.value),
         })
+        stopTimeCount()
       }
     }
   }
@@ -1222,6 +1235,7 @@ const pauseSuccessCallback = () => {
     type: 'info',
     log: `${new Date().toLocaleString()}：暂停检测`,
   })
+  stopTimeCount()
   console.log('暂停中')
 };
 
@@ -1314,6 +1328,7 @@ const handleResumeTest = () => {
     log: `${new Date().toLocaleString()}：继续检测`,
   })
   //startTimer()
+  resumeTimeCount()
   console.log('开始继续检测')
 };
 
@@ -1347,7 +1362,44 @@ const getNextActiveIndex = (code: string = ''): number => {
   }
   return -1
 }
+const startTimeCount = () => {
+  timer = setInterval(() => {
+    timeCount.value = timeCount.value + 1
+    timeView.value = secondToTime(timeCount.value)
+  }, 1000)
+}
 
+const stopTimeCount = () => {
+  if (timer) {
+    clearInterval(timer)
+  }
+}
+
+const resumeTimeCount = () => {
+  timer = setInterval(() => {
+    timeCount.value = timeCount.value + 1
+    timeView.value = secondToTime(timeCount.value)
+  }, 1000)
+}
+
+
+const secondToTime = (second: number) => {
+  //将秒数转换成时分秒
+  let h: string | number = Math.floor(second / 3600)
+  let m: string | number = Math.floor((second - h * 3600) / 60)
+  let s: string | number = Math.floor(second % 60);
+
+  h = h < 10 ? '0' + h : h;
+  m = m < 10 ? '0' + m : m;
+  s = s < 10 ? '0' + s : s;
+  return h + ':' + m + ':' + s;
+}
+
+onBeforeUnmount(() => {
+  if (timer) {
+    clearInterval(timer)
+  }
+})
 </script>
 
 <style scoped lang="scss">