源程控-时间展示

frontend/src/views/machine/controlSource/components/controlSourceDetail.vue

@@ -122,20 +122,23 @@
                                         </template>
                                         </el-progress>
                                     </div>
-                                    <el-button :icon="CirclePlus" 
+                                  <div style="margin-top: 10px;">
+                                    <span>标准源加量输出:{{hour}}时{{minute}}分{{second}}秒</span>
+                                  </div>
+                                  <div style="margin-top: 10px;">
+                                    <el-button :icon="VideoPlay"
                                                 type="primary" 
                                                 size="large" 
-                                                @click="startLoading" 
-                                                style="margin-left: 70px;margin-top: 10px;"
+                                                @click="startLoading"
                                                :disabled="startDisabeld"
                                     >启动</el-button>
-                                    <el-button :icon="CirclePlus" 
+                                    <el-button :icon="VideoPause"
                                                 type="primary" 
                                                 size="large" 
                                                 @click="stopLoading"  
-                                                style="margin-top: 10px;"
                                                :disabled="pauseDisabled"
                                     >停止</el-button>
+                                  </div>
                                 </div>
                             </div>
                         </div>
@@ -172,7 +175,7 @@ import Tree from './tree.vue'
 import Commun from './communication.vue'
 import {type CascaderOption, ElMessage} from 'element-plus'
 import { getTreeData } from '@/api/check/test'
-import { CirclePlus, Delete, Check, CopyDocument, View, EditPen } from '@element-plus/icons-vue'
+import {CirclePlus, Delete, Check, CopyDocument, View, EditPen, VideoPlay,VideoPause} from '@element-plus/icons-vue'
 import type { TestScript } from '@/api/device/interface/testScript'
 import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'
 import { CheckData } from '@/api/check/interface'
@@ -246,6 +249,13 @@ const column = ref([
     }
 ])
 
+// 时间计数器
+let timer: any = null
+const timeCount = ref(0)
+const hour = ref(0)
+const minute = ref(0)
+const second = ref(0)
+
 const emit = defineEmits(['update:activeName','update:activeIndex','update:startDisabeld','update:pauseDisabled'])
 const controlContent = ref<controlSource.ResControl>({
         userPageId: '', 
@@ -414,6 +424,32 @@ const stopLoading = async () => {
     ElMessage.success({message:'停止中...',duration:5000})
 }
 
+
+const startTimeCount = () => {
+  if (!timer) {
+    timer = setInterval(() => {
+      timeCount.value = timeCount.value + 1
+      secondToTime(timeCount.value)
+    }, 1000)
+  }
+}
+
+const secondToTime = (secd: number) => {
+  //将秒数转换成时分秒
+  hour.value = Math.floor(secd / 3600)
+  minute.value =  Math.floor((secd - hour.value * 3600) / 60)
+  second.value = Math.floor(secd % 60);
+}
+
+const stopTimeCount = () => {
+  if (timer) {
+    clearInterval(timer)
+  }
+  hour.value = 0
+  minute.value = 0
+  second.value = 0
+}
+
 // 获取左边树数据
 // 新增保存
 const addTab = (row: any) => {
@@ -436,6 +472,11 @@ onMounted(() => {
         .getDictData('Script_Value_Type')
         .filter(item => item.id == props.formContent.valueType)[0].code
 })
+
+defineExpose({
+  startTimeCount,
+  stopTimeCount
+})
 </script>
 <style lang="scss" scoped>
 .data-check-content {
@@ -506,7 +547,13 @@ onMounted(() => {
     }
 }
 
-.loading-container {
+.page{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .loading-container {
     background-color: #000;
     width: 300px;
     height: 300px;
@@ -514,7 +561,9 @@ onMounted(() => {
     align-items: center;
     justify-content: center;
     margin-left: 20px;
+  }
 }
+
 </style>
 <style>
 input::-webkit-inner-spin-button {