清洗界面的计时和喷涂设置界面的计时通用

src/stores/useSystemStore.ts

@@ -1,5 +1,42 @@
 import { defineStore } from 'pinia'
 
+class TimerService {
+  private timerId: number | null = null
+  private startTs: number = 0
+  remainingTime: string = '00:00:00'
+
+  start(callback?: () => void) {
+    if (this.timerId)
+      return
+
+    this.startTs = Date.now()
+    this.remainingTime = '00:00:00'
+
+    this.timerId = window.setInterval(() => {
+      const diff = Date.now() - this.startTs
+      const secs = Math.floor(diff / 1000)
+      const h = Math.floor(secs / 3600)
+      const m = Math.floor((secs % 3600) / 60)
+      const s = secs % 60
+
+      this.remainingTime = [
+        String(h).padStart(2, '0'),
+        String(m).padStart(2, '0'),
+        String(s).padStart(2, '0'),
+      ].join(':')
+
+      callback?.()
+    }, 1000)
+  }
+
+  stop() {
+    if (this.timerId) {
+      window.clearInterval(this.timerId)
+      this.timerId = null
+    }
+    this.startTs = 0
+  }
+}
 export const useSystemStore = defineStore('system', {
   state: () => ({
     systemStatus: {
@@ -27,12 +64,9 @@ export const useSystemStore = defineStore('system', {
     targetHumidity: 0,
     targetSlideTemperature: 0,
     targetNozzleTemperature: 0,
-    cleanRemainingTime: '', // 清洗管道用时
-    cleanTimerId: null, // 清洗管道定时器
-    cleanStartTs: 0, // 清洗管道开始时间
-    preRemainingTime: '', // 预充用时
-    preTimerId: null, // 预充定时器
-    preStartTs: 0, // 预充开始时间
+    syringeCleanTimerId: new TimerService(), // 清洗注射器管道定时器
+    nozzleCleanTimerId: new TimerService(), // 清洗喷嘴管道定时器
+    preTimerId: new TimerService(), // 预充定时器
   }),
   actions: {
     updateTargetHumidity(humidity: number) {
@@ -59,53 +93,23 @@ export const useSystemStore = defineStore('system', {
     pushSystemList(text: any) {
       this.systemList.push(text)
     },
-    startCleanTimer() {
-      if (this.cleanTimerId)
-        return
-      this.cleanStartTs = Date.now()
-      this.cleanRemainingTime = '00:00:00'
-      this.cleanTimerId = window.setInterval(() => {
-        const diff = Date.now() - this.cleanStartTs
-        const secs = Math.floor(diff / 1000)
-        const h = Math.floor(secs / 3600)
-        const m = Math.floor((secs % 3600) / 60)
-        const s = secs % 60
-        const hh = String(h).padStart(2, '0')
-        const mm = String(m).padStart(2, '0')
-        const ss = String(s).padStart(2, '0')
-        this.cleanRemainingTime = `${hh}:${mm}:${ss}`
-      }, 1000)
-    },
-    stopCleanTimer() {
-      if (this.cleanTimerId) {
-        window.clearInterval(this.cleanTimerId)
-        this.cleanTimerId = null
-      }
+    startNozzleCleanTimer() {
+      this.nozzleCleanTimerId.start()
+    },
+    stopNozzleCleanTimer() {
+      this.nozzleCleanTimerId.stop()
+    },
+    startSyringeCleanTimer() {
+      this.syringeCleanTimerId.start()
+    },
+    stopSyringeCleanTimer() {
+      this.syringeCleanTimerId.stop()
     },
     startPreTimer() {
-      if (this.preTimerId)
-        return
-      this.preStartTs = Date.now()
-      this.preRemainingTime = '00:00:00'
-      this.preTimerId = window.setInterval(() => {
-        const diff = Date.now() - this.preStartTs
-        const secs = Math.floor(diff / 1000)
-        const h = Math.floor(secs / 3600)
-        const m = Math.floor((secs % 3600) / 60)
-        const s = secs % 60
-        const hh = String(h).padStart(2, '0')
-        const mm = String(m).padStart(2, '0')
-        const ss = String(s).padStart(2, '0')
-        this.preRemainingTime = `${hh}:${mm}:${ss}`
-      }, 1000)
+      this.preTimerId.start()
     },
     stopPreTimer() {
-      if (this.preTimerId) {
-        window.clearInterval(this.preTimerId)
-        this.preTimerId = undefined
-      }
-      // this.preRemainingTime = ''
-      this.preStartTs = 0
+      this.preTimerId.stop()
     },
   },
 })

src/views/clean/index.vue

@@ -3,7 +3,7 @@ import { ElMessageBox } from 'element-plus'
 import { FtMessage } from 'libs/message'
 import { sendControl } from 'libs/utils'
 import { useSystemStore } from 'stores/useSystemStore'
-import { h, ref } from 'vue'
+import { computed, h, ref } from 'vue'
 
 const systemStore = useSystemStore() // 使用 systemStore
 // 注射器管路清洗开始
@@ -36,12 +36,12 @@ const syringePipelineWash = () => {
         speed: syringeSpeed.value,
       },
     }
-    try {
-      await sendControl(params)
-    }
-    finally {
-      syringePipelineWashRef.value.setLoading(false)
-    }
+    await sendControl(params)
+    syringePipelineWashRef.value.setLoading(false)
+    systemStore.syringeCleanTimerId.start()
+  }).catch(() => {
+    syringePipelineWashRef.value.setLoading(false)
+    systemStore.syringeCleanTimerId.stop()
   })
 }
 // 喷嘴管路清洗开始
@@ -65,12 +65,12 @@ const nozzlePipelineWash = () => {
       params: {
       },
     }
-    try {
-      await sendControl(params)
-    }
-    finally {
-      nozzlePipelineWashRef.value.setLoading(false)
-    }
+    await sendControl(params)
+    systemStore.nozzleCleanTimerId.start()
+    nozzlePipelineWashRef.value.setLoading(false)
+  }).catch(() => {
+    syringePipelineWashRef.value.setLoading(false)
+    systemStore.nozzleCleanTimerId.stop()
   })
 }
 // 注射器管路清洗结束
@@ -81,6 +81,7 @@ const syringePipelineWashStop = async () => {
     params: {},
   }
   await sendControl(params)
+  systemStore.syringeCleanTimerId.stop()
 }
 // 喷嘴管路清洗结束
 const nozzlePipelineWashStop = async () => {
@@ -90,8 +91,11 @@ const nozzlePipelineWashStop = async () => {
     params: {},
   }
   await sendControl(params)
+  systemStore.nozzleCleanTimerId.stop()
 }
 const syringeSpeed = ref(0)
+const syringeCleanRemainingTime = computed(() => systemStore.syringeCleanTimerId.remainingTime)
+const nozzleCleanRemainingTime = computed(() => systemStore.nozzleCleanTimerId.remainingTime)
 </script>
 
 <template>
@@ -103,7 +107,7 @@ const syringeSpeed = ref(0)
         </p>
         <el-form label-width="auto">
           <el-form-item label="移动速度">
-            <el-input v-model="syringeSpeed" type="number" style="width: 100px;margin:0 10px" />
+            <el-input v-model="syringeSpeed" type="number" style="width: 100px;" />
             <span class="unit-text">uL/min</span>
           </el-form-item>
           <el-form-item>
@@ -121,6 +125,11 @@ const syringeSpeed = ref(0)
               停止清洗
             </ft-button>
           </el-form-item>
+          <el-form-item>
+            <ft-button :disabled="true" class="button-style">
+              计时 {{ syringeCleanRemainingTime }}
+            </ft-button>
+          </el-form-item>
         </el-form>
       </el-col>
 
@@ -152,6 +161,11 @@ const syringeSpeed = ref(0)
               结束清洗
             </ft-button>
           </el-form-item>
+          <el-form-item>
+            <ft-button :disabled="true" class="button-style">
+              计时 {{ nozzleCleanRemainingTime }}
+            </ft-button>
+          </el-form-item>
         </el-form>
       </el-col>
     </el-row>
@@ -166,7 +180,7 @@ const syringeSpeed = ref(0)
   align-items: center;
   color: var(--el-color-primary);
   .ft-button {
-    margin: 30px;
+    margin: 15px;
   }
 }
 :deep(.button-style) {

src/views/spraySet/index.vue

@@ -156,7 +156,8 @@ const dehumidifierStart = () => {
       FtMessage.error('取消除湿')
     })
 }
-const cleanRemainingTime = computed(() => systemStore.cleanRemainingTime)
+const syringeCleanRemainingTime = computed(() => systemStore.syringeCleanTimerId.remainingTime)
+const nozzleCleanRemainingTime = computed(() => systemStore.nozzleCleanTimerId.remainingTime)
 const syringePipelineWashRef = ref()
 const syringePipelineWash = async () => {
   if (!clearSpeed.value) {
@@ -187,24 +188,16 @@ const syringePipelineWash = async () => {
       console.log('sendControl', params)
       await sendControl(params)
       syringePipelineWashRef.value.setLoading(false)
-      systemStore.startCleanTimer()
+      systemStore.startSyringeCleanTimer()
     })
     .catch(() => {
       FtMessage.error('取消清洗')
-      systemStore.stopCleanTimer()
+      systemStore.stopSyringeCleanTimer()
     })
 }
 
 const nozzlePipelineWashRef = ref()
 const nozzlePipelineWash = () => {
-  if (!clearSpeed.value) {
-    FtMessage.error('请输入清洗速度')
-    return
-  }
-  if (clearSpeed.value > 100) {
-    FtMessage.error('清洗速度最大为100 uL/min')
-    return
-  }
   ElMessageBox({
     title: '提示',
     message: h('div', null, [h('p', null, '请检查废液瓶是否已满 '), h('p', null, '请检查设备内是否有异物')]),
@@ -218,19 +211,18 @@ const nozzlePipelineWash = () => {
       cmdCode: 'nozzle_pipeline_wash',
       cmdId: '',
       params: {
-        speed: clearSpeed.value,
       },
     }
-    try {
-      await sendControl(params)
-    }
-    finally {
-      nozzlePipelineWashRef.value.setLoading(false)
-    }
+    await sendControl(params)
+    nozzlePipelineWashRef.value.setLoading(false)
+    systemStore.startNozzleCleanTimer()
+  }).catch((e) => {
+    console.log(e)
+    FtMessage.error('取消清洗')
+    systemStore.stopSyringeCleanTimer()
   })
 }
-console.log(nozzlePipelineWash)
-const preRemainingTime = computed(() => systemStore.preRemainingTime)
+const preRemainingTime = computed(() => systemStore.preTimerId.remainingTime)
 const matrixPrefillRef = ref()
 const matrixPrefill = () => {
   if (!speed.value) {
@@ -268,12 +260,20 @@ const matrixPrefill = () => {
     })
 }
 
-const pipelineWashStop = async () => {
+const syringePipelineWashStop = async () => {
   const params = {
     cmdCode: 'syringe_pipeline_wash_stop',
     cmdId: '',
   }
-  systemStore.stopCleanTimer()
+  systemStore.stopSyringeCleanTimer()
+  await sendControl(params)
+}
+const nozzlePipelineWashStop = async () => {
+  const params = {
+    cmdCode: 'nozzle_pipeline_wash_stop',
+    cmdId: '',
+  }
+  systemStore.stopNozzleCleanTimer()
   await sendControl(params)
 }
 
@@ -317,7 +317,7 @@ const nozzleStop = async () => {
           <div class="num-box">
             1
           </div>
-          <span> 清洗管道</span>
+          <span> 清洗注射器管道</span>
         </div>
       </template>
       <div style="display: flex; align-items: center; margin-top: 10px">
@@ -339,30 +339,62 @@ const nozzleStop = async () => {
         >
           清洗注射器管路
         </ft-button>
-        <!--        <ft-button -->
-        <!--          ref="nozzlePipelineWashRef" type="primary" :click-handle="nozzlePipelineWash" :disabled="systemStore.systemStatus.spraying -->
-        <!--            || systemStore.systemStatus.cleaningSyringePipeline -->
-        <!--            || systemStore.systemStatus.cleaningNozzlePipeline -->
-        <!--            || systemStore.systemStatus.prefilling" -->
-        <!--        > -->
-        <!--          清洗喷嘴管路 -->
-        <!--        </ft-button> -->
         <ft-button
-          :click-handle="pipelineWashStop"
+          :click-handle="syringePipelineWashStop"
+          :disabled="!systemStore.systemStatus.cleaningSyringePipeline"
+        >
+          停止清洗
+        </ft-button>
+        <ft-button :disabled="true">
+          <span>  计时 {{ syringeCleanRemainingTime }}</span>
+        </ft-button>
+      </div>
+    </el-card>
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="num-box">
+            2
+          </div>
+          <span> 清洗喷嘴管道</span>
+        </div>
+      </template>
+      <div style="display: flex; align-items: center; margin-top: 10px">
+        <div v-show="false" style="display: flex; align-items: center; width: fit-content; margin-right: 30px;">
+          <span>清洗速度</span>
+          <el-input type="number" style="width: 100px; margin: 0 10px" />
+          <span>uL/min</span>
+        </div>
+        <ft-button
+          ref="nozzlePipelineWashRef"
+          type="primary"
+          :click-handle="nozzlePipelineWash"
           :disabled="
-            !systemStore.systemStatus.cleaningSyringePipeline && !systemStore.systemStatus.cleaningNozzlePipeline
+            systemStore.systemStatus.spraying
+              || systemStore.systemStatus.cleaningSyringePipeline
+              || systemStore.systemStatus.cleaningNozzlePipeline
+              || systemStore.systemStatus.prefilling
+          "
+        >
+          清洗喷嘴管路
+        </ft-button>
+        <ft-button
+          :click-handle="nozzlePipelineWashStop"
+          :disabled="!systemStore.systemStatus.cleaningNozzlePipeline
           "
         >
           停止清洗
         </ft-button>
-        <span>  清洗计时： {{ cleanRemainingTime }}</span>
+        <ft-button :disabled="true">
+          <span>  计时 {{ nozzleCleanRemainingTime }}</span>
+        </ft-button>
       </div>
     </el-card>
     <el-card>
       <template #header>
         <div class="card-header">
           <div class="num-box">
-            2
+            3
           </div>
           <span> 预充管道</span>
         </div>
@@ -389,14 +421,16 @@ const nozzleStop = async () => {
         <ft-button :click-handle="matrixPrefillStop" :disabled="!systemStore.systemStatus.prefilling">
           结束预充
         </ft-button>
-        <span>  预充计时： {{ preRemainingTime }}</span>
+        <ft-button :disabled="true">
+          <span>  计时 {{ preRemainingTime }}</span>
+        </ft-button>
       </div>
     </el-card>
     <el-card>
       <template #header>
         <div class="card-header">
           <div class="num-box">
-            3
+            4
           </div>
           <span> 环境设置</span>
         </div>