页面增加环境设置弹窗

3 weeks ago · 630f368828
6 changed files with 273 additions and 64 deletions
--- a/src/assets/images/dehumidifier.svg
+++ b/src/assets/images/dehumidifier.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1752657671956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5942" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M888.685168 459.004245C757.310409 198.673464 569.953718 31.338603 552.193643 16.150249c0 0-14.994375-16.042261-40.282633-16.042261-23.345469 0-37.227965 12.984592-37.227965 12.984593-20.872737 18.246022-208.352415 185.580883-338.901264 444.47082C78.036041 561.705112 33.400879 800.335245 280.153132 959.480994c72.97609 42.756365 146.367134 64.516007 218.351331 64.516006 5.229433 0 10.346878-0.130986 10.875821-0.36596a357.051296 357.051296 0 0 0 15.764291 0.36596c72.039191 0 145.369242-21.759641 220.054147-65.619887 245.102431-158.086864 200.528263-396.728995 143.486446-499.372868z m-198.234512 428.253578c-56.929829 33.422377-112.440812 50.344543-165.306081 50.344542l-15.764291-0.263971-10.875821 0.263971c-52.873269 0-108.441245-16.921166-163.545272-49.240662C94.442263 733.157527 221.114532 498.320983 223.229302 494.497397c97.030482-192.594123 225.819522-330.463178 288.501727-391.555556 59.636535 57.577759 190.59234 196.754672 289.687598 393.025397 1.29086 2.353745 127.902136 237.17629-110.967971 391.290585z" fill="#E50012" p-id="5943"></path></svg>
--- a/src/assets/images/entry/heat_icon.svg
+++ b/src/assets/images/entry/heat_icon.svg
--- a/src/components/home/Environment/index.vue
+++ b/src/components/home/Environment/index.vue
@ -0,0 +1,250 @@
+<script setup lang="ts">
+import FtDialog from 'components/common/FTDialog/index.vue'
+import { ElMessageBox } from 'element-plus'
+import { FtMessage } from 'libs/message'
+import { sendControl } from 'libs/utils'
+import { useSystemStore } from 'stores/useSystemStore'
+import { ref } from 'vue'
+
+const emits = defineEmits(['ok', 'cancel'])
+const systemStore = useSystemStore() // 使用 systemStore
+const humidity = ref(systemStore.targetHumidity)
+const slideTemperature = ref(systemStore.targetSlideTemperature)
+const nozzleTemperature = ref(systemStore.targetNozzleTemperature)
+const slideStartRef = ref()
+const nozzleStartRef = ref()
+const dehumidifierStartRef = 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 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 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)
+}
+const onClose = async () => {
+  emits('cancel')
+}
+</script>
+
+<template>
+  <FtDialog visible title="喷涂环境设置" width="780px">
+    <div style="padding: 10px;">
+      <div style="display: flex; align-items: center; margin: 10px 0;font-size: 15px;justify-content: center;">
+        <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;font-size: 15px;justify-content: center;">
+        <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;font-size: 15px;justify-content: center;">
+        <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>
+    </div>
+    <template #footer>
+      <div class="button-footer">
+        <FtButton type="default" :click-handle="onClose">
+          关闭
+        </FtButton>
+      </div>
+    </template>
+  </FtDialog>
+</template>
+
+<style scoped lang="scss">
+// 添加旋转动画
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.button-footer {
+  margin: 30px;
+}
+
+.num-text {
+  color: var(--el-color-primary);
+  font-weight: 900;
+  font-size: 70px;
+}
+</style>
--- a/src/views/main/index.vue
+++ b/src/views/main/index.vue
@ -2,6 +2,7 @@
 import { getDeviceStatus } from 'apis/system'
 import FtStream from 'components/common/FTStream/index.vue'
 import Check from 'components/home/Check/index.vue'
+import Environment from 'components/home/Environment/index.vue'
 import Stop from 'components/home/Stop/index.vue'
 import { ElMessageBox } from 'element-plus'
 import { FtMessage } from 'libs/message'
@ -17,9 +18,10 @@ const systemStore = useSystemStore() // 使用 systemStore

 const checkVisible = ref(false)
 console.log(import.meta.env.FT_NODE_ENV)
-
+const environmentVisible = ref(false)
 const cancel = () => {
  checkVisible.value = false
+  environmentVisible.value = false
 }

 const getStatus = async () => {
@ -76,7 +78,7 @@ const sensorMessage = async (data: any) => {
    await sendControl(params)
    FtMessage.success('当前温度已达目标温度,加热已完成')
  }
-  if (systemStore.systemStatus.nozzleHeating && systemStore.systemSensor.nozzleTemperature <= systemStore.targetNozzleTemperature) {
+  if (systemStore.systemStatus.nozzleHeating && systemStore.systemSensor.nozzleTemperature >= systemStore.targetNozzleTemperature) {
    const params = {
      cmdCode: 'nozzle_heat_stop',
      cmdId: '',
@ -92,12 +94,12 @@ socket.init(() => {}, 'pong')

 const ingObj = {
  idle: '空闲',
-  spraying: '正在喷涂中',
+  spraying: '喷涂中',
  paused: '喷涂暂停中',
  cleaningSyringePipeline: '正在清洗注射器管路',
  cleaningNozzlePipeline: '正在清洗喷嘴管路',
-  prefilling: '正在预充中',
-  dehumidifierRunning: '正在除湿中',
+  prefilling: '预充中',
+  dehumidifierRunning: '除湿中',
  stopPressed: '急停中',
  virtual: '虚拟模式',
  nozzleHeating: '喷嘴加热中',
@ -176,55 +178,9 @@ watch(() => isClose.value, async (newValue) => {
    }
  }
 })
-const slideSwitch = async () => {
-  if (systemStore.systemStatus.slidePlatHeating) {
-    ElMessageBox.confirm('确认关闭载玻台加热?', '提示', {
-      type: 'warning',
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      showCancelButton: true,
-      showClose: false,
-      closeOnClickModal: false,
-      closeOnPressEscape: false,
-      closeOnHashChange: false,
-    }).then(async () => {
-      const params = {
-        cmdCode: 'slide_plat_heat_stop',
-        cmdId: '',
-      }
-      await sendControl(params)
-      FtMessage.success('已关闭载玻台加热')
-    })
-  }
-  else {
-    FtMessage.warning('载玻台加热已关闭')
-  }
-}
-const nozzleSwitch = async () => {
-  if (systemStore.systemStatus.nozzleHeating) {
-    ElMessageBox.confirm('确认关闭喷头加热?', '提示', {
-      type: 'warning',
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      showCancelButton: true,
-      showClose: false,
-      closeOnClickModal: false,
-      closeOnPressEscape: false,
-      closeOnHashChange: false,
-    }).then(async () => {
-      const params = {
-        cmdCode: 'nozzle_heat_stop',
-        cmdId: '',
-      }
-      await sendControl(params)
-      FtMessage.success('已关闭喷头加热')
-    })
-  }
-  else {
-    FtMessage.warning('喷头加热已关闭')
-  }
+const environmentSet = () => {
+  environmentVisible.value = true
 }
-
 const backHandle = () => {
  router.back()
 }
@ -263,19 +219,20 @@ const backHandle = () => {
    </el-main>
    <el-footer>
      <div>
-        <ft-button type="info">
+        <ft-button type="info" :click-handle="environmentSet">
+          <img v-if="systemStore.systemStatus.dehumidifierRunning" src="../../assets/images/dehumidifier.svg" alt="" width="20px">
          当前湿度: {{ systemStore.systemSensor.humidity }}%RH
        </ft-button>
      </div>
      <div>
-        <ft-button type="info" :click-handle="nozzleSwitch">
-          <img v-if="systemStore.systemStatus.nozzleHeating" src="../../assets/images/entry/heat_icon.svg" alt="" width="20px">
+        <ft-button type="info" :click-handle="environmentSet">
+          <img v-if="systemStore.systemStatus.nozzleHeating" src="../../assets/images/heat_icon.svg" alt="" width="20px">
          喷头温度: {{ systemStore.systemSensor.nozzleTemperature }}℃
        </ft-button>
      </div>
      <div>
-        <ft-button type="info" :click-handle="slideSwitch">
-          <img v-if="systemStore.systemStatus.slidePlatHeating" src="../../assets/images/entry/heat_icon.svg" alt="" width="20px">
+        <ft-button type="info" :click-handle="environmentSet">
+          <img v-if="systemStore.systemStatus.slidePlatHeating" src="../../assets/images/heat_icon.svg" alt="" width="20px">
          载玻台温度: {{ systemStore.systemSensor.slideTemperature }}℃
        </ft-button>
      </div>
@ -296,6 +253,7 @@ const backHandle = () => {
    <FtStream :visible="systemStore.streamVisible" />
    <Stop v-if="systemStore.systemStatus.stopPressed" />
    <Check v-if="checkVisible" @ok="ok" @cancel="cancel" />
+    <Environment v-if="environmentVisible" @cancel="cancel" />
  </el-container>
 </template>

--- a/src/views/spraySet/index.vue
+++ b/src/views/spraySet/index.vue
@ -27,9 +27,9 @@ const startWork = () => {
  })
 }

-const humidity = ref()
-const slideTemperature = ref()
-const nozzleTemperature = ref()
+const humidity = ref(systemStore.targetHumidity)
+const slideTemperature = ref(systemStore.targetSlideTemperature)
+const nozzleTemperature = ref(systemStore.targetNozzleTemperature)
 const speed = ref()
 const clearSpeed = ref()

@ -70,7 +70,7 @@ const slideStart = () => {
      slideStartRef.value.setLoading(false)
    })
    .catch(() => {
-      FtMessage.error('取消加热')
+      FtMessage.error('取消载玻台加热')
    })
 }
 const nozzleStart = () => {
@ -110,7 +110,7 @@ const nozzleStart = () => {
      nozzleStartRef.value.setLoading(false)
    })
    .catch(() => {
-      FtMessage.error('取消加热')
+      FtMessage.error('取消喷头加热')
    })
 }
 const slideStartRef = ref()