matrix-spray-web/src/views/clean/index.vue

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import { FtMessage } from 'libs/message'
import { sendControl } from 'libs/utils'
import { h, ref } from 'vue'

const clearSpeed = ref()

const syringePipelineWashRef = ref()
const syringePipelineWash = () => {
  if (!clearSpeed.value) {
    FtMessage.error('请输入清洗速度')
    return
  }
  ElMessageBox({
    title: '提示',
    message: h('div', null, [
      h('p', null, '请检查废液瓶是否已满 '),
      h('p', null, '请检查设备内是否有异物'),
    ]),
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    showClose: false,
  }).then(async () => {
    syringePipelineWashRef.value.setLoading(true)
    const params = {
      cmdCode: 'syringe_pipeline_wash',
      cmdId: '',
      params: {
        speed: clearSpeed,
      },
    }
    try {
      await sendControl(params)
    }
    finally {
      syringePipelineWashRef.value.setLoading(false)
    }
  })
}

const nozzlePipelineWashRef = ref()
const nozzlePipelineWash = () => {
  if (!clearSpeed.value) {
    FtMessage.error('请输入清洗速度')
    return
  }
  ElMessageBox({
    title: '提示',
    message: h('div', null, [
      h('p', null, '请检查废液瓶是否已满 '),
      h('p', null, '请检查设备内是否有异物'),
    ]),
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    showClose: false,
  }).then(async () => {
    nozzlePipelineWashRef.value.setLoading(true)
    const params = {
      cmdCode: 'nozzle_pipeline_wash',
      cmdId: '',
      params: {
        speed: clearSpeed,
      },
    }
    try {
      await sendControl(params)
    }
    finally {
      nozzlePipelineWashRef.value.setLoading(false)
    }
  })
}

const syringePipelineWashStop = async () => {
  const params = {
    cmdCode: 'syringe_pipeline_wash_stop',
    cmdId: '',
    params: {},
  }
  await sendControl(params)
}
</script>

<template>
  <div class="clear-main">
    <div style="display: flex;align-items: center;width: fit-content;margin: 20px">
      <span>清洗速度</span>
      <el-input v-model="clearSpeed" type="number" style="width: 100px;margin:0 10px" />
      <span>uL/min</span>
    </div>
    <ft-button ref="syringePipelineWashRef" class="button-style" type="primary" @click="syringePipelineWash">
      清洗注射器管路
    </ft-button>
    <ft-button ref="nozzlePipelineWashRef" class="button-style" type="primary" @click="nozzlePipelineWash">
      清洗喷嘴管路
    </ft-button>
    <ft-button class="button-style" :click-handle="syringePipelineWashStop">
      结束清洗
    </ft-button>
  </div>
</template>

<style scoped lang="scss">
.clear-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--el-color-primary);
  .ft-button {
    margin: 30px;
  }
}
:deep(.button-style) {
  .my-button {
    width: 500px;
    display: flex;
    justify-content: center;
  }
}
</style>