Browse Source

页面增加环境设置弹窗

master
王梦远 3 weeks ago
parent
commit
630f368828
  1. 1
      src/assets/images/dehumidifier.svg
  2. 0
      src/assets/images/heat_icon.svg
  3. 250
      src/components/home/Environment/index.vue
  4. 74
      src/views/main/index.vue
  5. 10
      src/views/spraySet/index.vue

1
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>

0
src/assets/images/entry/heat_icon.svg → src/assets/images/heat_icon.svg

250
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>

74
src/views/main/index.vue

@ -2,6 +2,7 @@
import { getDeviceStatus } from 'apis/system' import { getDeviceStatus } from 'apis/system'
import FtStream from 'components/common/FTStream/index.vue' import FtStream from 'components/common/FTStream/index.vue'
import Check from 'components/home/Check/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 Stop from 'components/home/Stop/index.vue'
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from 'element-plus'
import { FtMessage } from 'libs/message' import { FtMessage } from 'libs/message'
@ -17,9 +18,10 @@ const systemStore = useSystemStore() // 使用 systemStore
const checkVisible = ref(false) const checkVisible = ref(false)
console.log(import.meta.env.FT_NODE_ENV) console.log(import.meta.env.FT_NODE_ENV)
const environmentVisible = ref(false)
const cancel = () => { const cancel = () => {
checkVisible.value = false checkVisible.value = false
environmentVisible.value = false
} }
const getStatus = async () => { const getStatus = async () => {
@ -76,7 +78,7 @@ const sensorMessage = async (data: any) => {
await sendControl(params) await sendControl(params)
FtMessage.success('当前温度已达目标温度,加热已完成') FtMessage.success('当前温度已达目标温度,加热已完成')
} }
if (systemStore.systemStatus.nozzleHeating && systemStore.systemSensor.nozzleTemperature <= systemStore.targetNozzleTemperature) {
if (systemStore.systemStatus.nozzleHeating && systemStore.systemSensor.nozzleTemperature >= systemStore.targetNozzleTemperature) {
const params = { const params = {
cmdCode: 'nozzle_heat_stop', cmdCode: 'nozzle_heat_stop',
cmdId: '', cmdId: '',
@ -92,12 +94,12 @@ socket.init(() => {}, 'pong')
const ingObj = { const ingObj = {
idle: '空闲', idle: '空闲',
spraying: '正在喷涂中',
spraying: '喷涂中',
paused: '喷涂暂停中', paused: '喷涂暂停中',
cleaningSyringePipeline: '正在清洗注射器管路', cleaningSyringePipeline: '正在清洗注射器管路',
cleaningNozzlePipeline: '正在清洗喷嘴管路', cleaningNozzlePipeline: '正在清洗喷嘴管路',
prefilling: '正在预充中',
dehumidifierRunning: '正在除湿中',
prefilling: '预充中',
dehumidifierRunning: '除湿中',
stopPressed: '急停中', stopPressed: '急停中',
virtual: '虚拟模式', virtual: '虚拟模式',
nozzleHeating: '喷嘴加热中', 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('已关闭喷头加热')
})
const environmentSet = () => {
environmentVisible.value = true
} }
else {
FtMessage.warning('喷头加热已关闭')
}
}
const backHandle = () => { const backHandle = () => {
router.back() router.back()
} }
@ -263,19 +219,20 @@ const backHandle = () => {
</el-main> </el-main>
<el-footer> <el-footer>
<div> <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 当前湿度: {{ systemStore.systemSensor.humidity }}%RH
</ft-button> </ft-button>
</div> </div>
<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 }} 喷头温度: {{ systemStore.systemSensor.nozzleTemperature }}
</ft-button> </ft-button>
</div> </div>
<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 }} 载玻台温度: {{ systemStore.systemSensor.slideTemperature }}
</ft-button> </ft-button>
</div> </div>
@ -296,6 +253,7 @@ const backHandle = () => {
<FtStream :visible="systemStore.streamVisible" /> <FtStream :visible="systemStore.streamVisible" />
<Stop v-if="systemStore.systemStatus.stopPressed" /> <Stop v-if="systemStore.systemStatus.stopPressed" />
<Check v-if="checkVisible" @ok="ok" @cancel="cancel" /> <Check v-if="checkVisible" @ok="ok" @cancel="cancel" />
<Environment v-if="environmentVisible" @cancel="cancel" />
</el-container> </el-container>
</template> </template>

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

Loading…
Cancel
Save