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

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

const router = useRouter()
const systemStore = useSystemStore() // 使用 systemStore

const startWork = () => {
  ElMessageBox({
    title: '提示',
    message: h('div', null, [
      h('p', null, '请确认清洗/预充/除湿均已完成 '),
      h('p', null, '请确认外部氮气压力大于0.35Mpa'),
    ]),
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    showClose: false,
  }).then(() => {
    setTimeout(() => {
      router.push('/spray')
    }, 100)
  })
}

const humidity = ref()
const slideTemperature = ref()
const nozzleTemperature = ref()
const speed = ref()
const clearSpeed = ref()

const slideStart = () => {
  if (!systemStore.systemSensor.slideTemperature) {
    FtMessage.error('未检测到当前温度')
    return
  }
  if (!slideTemperature.value) {
    FtMessage.error('请输入目标温度')
    return
  }
  if (slideTemperature.value > 100 || slideTemperature.value < 0) {
    FtMessage.error('温度参数有误')
    return
  }
  if (slideTemperature.value <= systemStore.systemSensor.slideTemperature) {
    FtMessage.info('当前不需要加热')
    return
  }
  ElMessageBox.confirm('载玻台即将开始加热', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    showClose: false,
  })
    .then(async () => {
      slideStartRef.value.setLoading(true)
      const params = {
        cmdCode: 'slide_plat_heat_start',
        cmdId: '',
        params: {
          temperature: slideTemperature.value,
        },
      }
      await sendControl(params)
      systemStore.updateSlideTemperature(slideTemperature.value)
      slideStartRef.value.setLoading(false)
    })
    .catch(() => {
      FtMessage.error('取消加热')
    })
}
const nozzleStart = () => {
  if (!systemStore.systemSensor.nozzleTemperature) {
    FtMessage.error('未检测到当前温度')
    return
  }
  if (!nozzleTemperature.value) {
    FtMessage.error('请输入目标温度')
    return
  }
  if (nozzleTemperature.value > 100 || nozzleTemperature.value < 0) {
    FtMessage.error('温度参数有误')
    return
  }
  if (nozzleTemperature.value <= systemStore.systemSensor.nozzleTemperature) {
    FtMessage.info('当前不需要加热')
    return
  }
  ElMessageBox.confirm('即将开始加热', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    showClose: false,
  })
    .then(async () => {
      nozzleStartRef.value.setLoading(true)
      const params = {
        cmdCode: 'nozzle_heat_start',
        cmdId: '',
        params: {
          temperature: nozzleTemperature.value,
        },
      }
      await sendControl(params)
      systemStore.updateTargetNozzleTemperature(nozzleTemperature.value)
      nozzleStartRef.value.setLoading(false)
    })
    .catch(() => {
      FtMessage.error('取消加热')
    })
}
const slideStartRef = ref()
const nozzleStartRef = ref()
const dehumidifierStartRef = ref()
const dehumidifierStart = () => {
  if (!systemStore.systemSensor.humidity) {
    FtMessage.error('未检测到当前湿度')
    return
  }
  if (!humidity.value) {
    FtMessage.error('请输入目标湿度')
    return
  }
  if (humidity.value > 100 || humidity.value < 0) {
    FtMessage.error('湿度参数有误')
    return
  }
  if (humidity.value >= systemStore.systemSensor.humidity) {
    FtMessage.info('当前不需要除湿')
    return
  }
  ElMessageBox.confirm('即将开始除湿,请确认关闭注射泵门和玻片托盘出口门', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    showClose: false,
  })
    .then(async () => {
      dehumidifierStartRef.value.setLoading(true)
      const params = {
        cmdCode: 'dehumidifier_start',
        cmdId: '',
        params: {
          humidity: humidity.value,
        },
      }
      await sendControl(params)
      systemStore.updateTargetHumidity(humidity.value)
      dehumidifierStartRef.value.setLoading(false)
    })
    .catch(() => {
      FtMessage.error('取消除湿')
    })
}
const cleanRemainingTime = computed(() => systemStore.cleanRemainingTime)
const syringePipelineWashRef = ref()
const syringePipelineWash = async () => {
  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, '请检查设备内是否有异物')]),
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    showClose: false,
  })
    .then(async () => {
      syringePipelineWashRef.value.setLoading(true)
      const params = {
        cmdCode: 'syringe_pipeline_wash',
        cmdId: '',
        params: {
          speed: clearSpeed.value,
        },
      }
      console.log('sendControl', params)
      await sendControl(params)
      syringePipelineWashRef.value.setLoading(false)
      systemStore.startCleanTimer()
    })
    .catch(() => {
      FtMessage.error('取消清洗')
      systemStore.stopCleanTimer()
    })
}

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, '请检查设备内是否有异物')]),
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    showClose: false,
  }).then(async () => {
    nozzlePipelineWashRef.value.setLoading(true)
    const params = {
      cmdCode: 'nozzle_pipeline_wash',
      cmdId: '',
      params: {
        speed: clearSpeed.value,
      },
    }
    try {
      await sendControl(params)
    }
    finally {
      nozzlePipelineWashRef.value.setLoading(false)
    }
  })
}
console.log(nozzlePipelineWash)
const preRemainingTime = computed(() => systemStore.preRemainingTime)
const matrixPrefillRef = ref()
const matrixPrefill = () => {
  if (!speed.value) {
    FtMessage.error('请输入预充速度')
    return
  }
  if (speed.value > 100) {
    FtMessage.error('预充速度最大为100 uL/min')
    return
  }
  ElMessageBox({
    title: '提示',
    message: h('div', null, [h('p', null, '请检查废液瓶是否已满 '), h('p', null, '请检查设备内是否有异物')]),
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    showClose: false,
  })
    .then(async () => {
      matrixPrefillRef.value.setLoading(true)
      const params = {
        cmdCode: 'matrix_prefill',
        cmdId: '',
        params: {
          speed: speed.value,
        },
      }
      systemStore.startPreTimer()
      await sendControl(params)
      matrixPrefillRef.value.setLoading(false)
    })
    .catch(() => {
      FtMessage.error('取消预充')
      systemStore.stopPreTimer()
    })
}

const pipelineWashStop = async () => {
  const params = {
    cmdCode: 'syringe_pipeline_wash_stop',
    cmdId: '',
  }
  systemStore.stopCleanTimer()
  await sendControl(params)
}

const matrixPrefillStop = async () => {
  const params = {
    cmdCode: 'matrix_prefill_stop',
    cmdId: '',
  }
  systemStore.stopPreTimer()
  await sendControl(params)
}

const dehumidifierStop = async () => {
  const params = {
    cmdCode: 'dehumidifier_stop',
    cmdId: '',
  }
  await sendControl(params)
}
const slideStop = async () => {
  const params = {
    cmdCode: 'slide_plat_heat_stop',
    cmdId: '',
  }
  await sendControl(params)
}
const nozzleStop = async () => {
  const params = {
    cmdCode: 'nozzle_heat_stop',
    cmdId: '',
  }
  await sendControl(params)
}
</script>

<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="num-box">
            1
          </div>
          <span> 清洗管道</span>
        </div>
      </template>
      <div style="display: flex; align-items: center; margin-top: 10px">
        <div style="display: flex; align-items: center; width: fit-content; margin-right: 30px">
          <span>清洗速度</span>
          <el-input v-model="clearSpeed" type="number" style="width: 100px; margin: 0 10px" />
          <span>uL/min</span>
        </div>
        <ft-button
          ref="syringePipelineWashRef"
          type="primary"
          :click-handle="syringePipelineWash"
          :disabled="
            systemStore.systemStatus.spraying
              || systemStore.systemStatus.cleaningSyringePipeline
              || systemStore.systemStatus.cleaningNozzlePipeline
              || systemStore.systemStatus.prefilling
          "
        >
          清洗注射器管路
        </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"
          :disabled="
            !systemStore.systemStatus.cleaningSyringePipeline && !systemStore.systemStatus.cleaningNozzlePipeline
          "
        >
          停止清洗
        </ft-button>
        <span>  清洗计时： {{ cleanRemainingTime }}</span>
      </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 style="display: flex; align-items: center; width: fit-content; margin-right: 30px">
          <span>预充速度</span>
          <el-input v-model="speed" type="number" style="width: 100px; margin: 0 10px" />
          <span>uL/min</span>
        </div>
        <ft-button
          ref="matrixPrefillRef"
          type="primary"
          :click-handle="matrixPrefill"
          :disabled="
            systemStore.systemStatus.spraying
              || systemStore.systemStatus.cleaningSyringePipeline
              || systemStore.systemStatus.cleaningNozzlePipeline
              || systemStore.systemStatus.prefilling
          "
        >
          开始预充
        </ft-button>
        <ft-button :click-handle="matrixPrefillStop" :disabled="!systemStore.systemStatus.prefilling">
          结束预充
        </ft-button>
        <span>  预充计时： {{ preRemainingTime }}</span>
      </div>
    </el-card>
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="num-box">
            3
          </div>
          <span> 环境设置</span>
        </div>
      </template>
      <div style="display: flex; align-items: center; margin-top: 10px">
        <div style="display: flex; align-items: center; width: 20%; margin-right: 30px">
          <span>当前湿度</span>
          <span class="num-text">{{ systemStore.systemSensor.humidity }}</span>
          <span>%RH</span>
        </div>
        <div style="display: flex; align-items: center; width: 30%; margin-right: 30px">
          <span>要求湿度</span>
          <el-input v-model="humidity" type="number" style="width: 100px; margin: 0 10px" />
          <span>%RH</span>
        </div>
        <ft-button ref="dehumidifierStartRef" type="primary" :click-handle="dehumidifierStart">
          开始除湿
        </ft-button>
        <ft-button :click-handle="dehumidifierStop" :disabled="!systemStore.systemStatus.dehumidifierRunning">
          停止除湿
        </ft-button>
      </div>
      <div style="display: flex; align-items: center; margin-top: 10px">
        <div style="display: flex; align-items: center; width:20%; margin-right: 30px">
          <span>载玻台温度</span>
          <span class="num-text">{{ systemStore.systemSensor.slideTemperature }}</span>
          <span>℃</span>
        </div>
        <div style="display: flex; align-items: center; width: 30%; margin-right: 30px">
          <span>要求温度</span>
          <el-input v-model="slideTemperature" type="number" style="width: 100px; margin: 0 10px" />
          <span>℃</span>
        </div>
        <ft-button ref="slideStartRef" type="primary" :click-handle="slideStart">
          开始加热
        </ft-button>
        <ft-button :click-handle="slideStop" :disabled="!systemStore.systemStatus.slidePlatHeating">
          停止加热
        </ft-button>
      </div>
      <div style="display: flex; align-items: center; margin-top: 10px">
        <div style="display: flex; align-items: center; width: 20%; margin-right: 30px">
          <span>喷头温度</span>
          <span class="num-text">{{ systemStore.systemSensor.nozzleTemperature }}</span>
          <span>℃</span>
        </div>
        <div style="display: flex; align-items: center; width: 30%; margin-right: 30px">
          <span>要求温度</span>
          <el-input v-model="nozzleTemperature" type="number" style="width: 100px; margin: 0 10px" />
          <span>℃</span>
        </div>
        <ft-button ref="nozzleStartRef" type="primary" :click-handle="nozzleStart">
          开始加热
        </ft-button>
        <ft-button :click-handle="nozzleStop" :disabled="!systemStore.systemStatus.nozzleHeating">
          停止加热
        </ft-button>
      </div>
    </el-card>
    <div class="button-footer">
      <ft-button type="primary" class="set-button" @click="startWork">
        喷涂参数设置
      </ft-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.el-card {
  margin: 30px;
  color: var(--el-color-primary);
  border-radius: 20px;
}

:deep(.el-card__body) {
  padding: 40px;
}

.card-header {
  display: flex;
  align-items: center;
}

.num-box {
  margin: 0 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--el-color-primary);
  font-size: 30px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-footer {
  display: flex;
  justify-content: center;
  margin: 50px;
}

.hint-text {
  display: flex;
  height: 400px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: var(--el-color-primary);
}

.num-text {
  color: var(--el-color-primary);
  font-weight: 900;
  font-size: 70px;
}

:deep(.set-button) {
  margin-top: 50px;

  .my-button {
    width: 500px;
    height: 150px;
    display: flex;
    font-size: 50px;
    justify-content: center;
  }
}
</style>