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

2 weeks ago · 079924ac69
3 changed files with 153 additions and 101 deletions
--- a/src/stores/useSystemStore.ts
+++ b/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()
    },
  },
 })
--- a/src/views/clean/index.vue
+++ b/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) {
--- a/src/views/spraySet/index.vue
+++ b/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>