chenjinliang
/
disinfection_high_front_end
forked from maochaoying/disinfection_high_front_end
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
大空间消毒机
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 Commits
1 Branch
0 Tags
1.9 MiB
 
 
 
 
 
Tree: 858a9e3101
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '858a9e3101'
${ noResults }
disinfection_high_front_end/src/components/Test.vue

627 lines
17 KiB
Raw Blame History

<template>
<div class="test_container">
<div class="common_set switch_wrap">
<p class="title">加液蠕动泵</p>
<div class="num">
<van-field
type="number"
v-model="addLiquidVal"
:clickable="true"
:formatter="formatter6"
readonly
@click.stop="hideAllKeyboards(1)"
class="add_liquid_input"
/>
<p>g/min</p>
</div>
<div class="num">
<van-field
type="number"
v-model="addLiquidPower"
:clickable="true"
readonly
:formatter="formatter"
@click.stop="hideAllKeyboards(2)"
class="add_liquid_input"
/>
<p>P</p>
</div>
<div class="btn_wrap">
<div
:class="
settingStore.addLiquidConfigVal > 0
? 'open success style-btn'
: 'open style-btn'
"
@click="setAddLiquidConfig(1)"
>
正转
</div>
<div
:class="
settingStore.addLiquidConfigVal < 0
? 'open success style-btn'
: 'open style-btn'
"
@click="setAddLiquidConfig(5)"
>
反转
</div>
<div
class="open style-btn"
@click="setAddLiquidConfig(3)"
style="margin-right: 0"
>
关闭
</div>
</div>
</div>
<div class="common_set switch_wrap">
<p class="title">注射蠕动泵</p>
<div class="num">
<van-field
type="number"
:formatter="formatter7"
v-model="addLiquidVal2"
:clickable="true"
readonly
@click.stop="hideAllKeyboards(3)"
class="add_liquid_input"
/>
<p>g/min</p>
</div>
<div class="num">
<van-field
type="number"
:formatter="formatter"
v-model="addLiquidPower2"
:clickable="true"
readonly
@click.stop="hideAllKeyboards(4)"
class="add_liquid_input"
/>
<p>P</p>
</div>
<div class="btn_wrap">
<div
:class="
settingStore.sprayLiquidConfigVal > 0
? 'open success style-btn'
: 'open style-btn'
"
@click="setAddLiquidConfig(2)"
>
正转
</div>
<div
:class="
settingStore.sprayLiquidConfigVal < 0
? 'open success style-btn'
: 'open style-btn'
"
@click="setAddLiquidConfig(6)"
>
反转
</div>
<div
class="open style-btn"
@click="setAddLiquidConfig(4)"
style="margin-right: 0"
>
关闭
</div>
</div>
</div>
<div class="common_set switch_wrap">
<p class="title">空压机</p>
<p class="num">
{{
testStore?.airCompressorObj?.currentVal > 5000
? 5000
: testStore?.airCompressorObj?.currentVal
}}
A
</p>
<div class="btn_wrap">
<div
:class="
testStore.airCompressor ? 'close style-btn' : 'open style-btn'
"
@click="changeAirStatus(1)"
>
打开
</div>
<div
:class="
!testStore.airCompressor ? 'close style-btn' : 'open style-btn'
"
@click="changeAirStatus(2)"
>
关闭
</div>
</div>
</div>
<div class="common_set switch_wrap">
<p class="title">风机</p>
<p class="num">{{ testStore?.airBlowerObj?.currentVal }} r/min</p>
<div class="btn_wrap">
<div
:class="testStore.draughtFan ? 'close style-btn' : 'open style-btn'"
@click="changeDraughtStatus(1)"
>
打开
</div>
<div
:class="!testStore.draughtFan ? 'close style-btn' : 'open style-btn'"
@click="changeDraughtStatus(2)"
>
关闭
</div>
</div>
</div>
<div class="common_set switch_wrap">
<p class="title">加热片</p>
<p class="num">{{ testStore?.heatingStripObj?.currentVal }} A</p>
<div class="btn_wrap">
<div
:class="testStore.heatingStrip ? 'close style-btn' : 'open style-btn'"
@click="changeHeatingStatus(1)"
>
打开
</div>
<div
:class="
!testStore.heatingStrip ? 'close style-btn' : 'open style-btn'
"
@click="changeHeatingStatus(2)"
>
关闭
</div>
</div>
</div>
<div class="common_set update_wrap">
<p class="title">水浸1</p>
<p class="num">{{ testStore.waterImmersionSensor1 ? '有水' : '没水' }}</p>
<div class="btn_wrap style-btn" @click="handleUpdate" style="opacity: 0">
更新读取水浸状态
</div>
</div>
<div class="common_set update_wrap">
<p class="title">水浸2</p>
<p class="num">{{ testStore.waterImmersionSensor2 ? '有水' : '没水' }}</p>
<div class="btn_wrap style-btn" @click="handleUpdate" style="opacity: 0">
更新读取水浸状态
</div>
</div>
<div class="common_set update_wrap">
<p class="title">液位</p>
<p class="num">
{{
deviceStore.disinfectantCapacity <= 0
? 0
: deviceStore.disinfectantCapacity
}}
kPa/100g
</p>
<div class="btn_wrap style-btn" @click="handleUpdate" style="opacity: 0">
更新读取液位状态
</div>
</div>
<div class="common_set info_wrap">
<p class="title">仓内</p>
<p class="info">温度 {{ deviceStore.binTemperature }} ℃</p>
<p class="info">湿度 {{ deviceStore.binHumidity }} ℃</p>
<p class="info">过氧化氢浓度 {{ deviceStore.binHP }} PPM</p>
</div>
<div class="common_set info_wrap">
<p class="title">环境1</p>
<p class="info">温度 {{ deviceStore.envirTemperature1 }} ℃</p>
<p class="info">湿度 {{ deviceStore.envirHumidity1 }} ℃</p>
<p class="info">过氧化氢浓度 {{ deviceStore.envirHP1 }} PPM</p>
</div>
<div class="common_set info_wrap">
<p class="title">环境2</p>
<p class="info">温度 {{ deviceStore.envirTemperature2 }} ℃</p>
<p class="info">湿度 {{ deviceStore.envirHumidity2 }} ℃</p>
<p class="info">过氧化氢浓度 {{ deviceStore.envirHP2 }} PPM</p>
</div>
<van-number-keyboard
v-model="addLiquidVal"
@input="val => handleInput(val, 1)"
:show="numberKeyboardShowVal"
@blur="numberKeyboardShowVal = false"
/>
<van-number-keyboard
@input="val => handleInput(val, 2)"
v-model="addLiquidPower"
:show="numberKeyboardShowPower"
@blur="numberKeyboardShowPower = false"
/>
<van-number-keyboard
@input="val => handleInput(val, 3)"
v-model="addLiquidVal2"
:show="numberKeyboardShowVal2"
@blur="numberKeyboardShowVal2 = false"
/>
<van-number-keyboard
@input="val => handleInput(val, 4)"
v-model="addLiquidPower2"
:show="numberKeyboardShowPower2"
@blur="numberKeyboardShowPower2 = false"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
import {
useTestStore,
useDeviceStore,
useWebSocketStore,
useSettingStore,
} from '@/store'
import {
someAirSwitchJSON,
liquidpumpctrlJSON,
getStateJSON,
addLiquidCtrlJSON,
} from '@/mock/command'
import { showSuccessToast, showFailToast } from 'vant'
const testStore = useTestStore()
const deviceStore = useDeviceStore()
const websocketStore = useWebSocketStore()
const settingStore = useSettingStore()
const addLiquidVal = ref(settingStore.addLiquidConfigVal)
const addLiquidPower = ref(25)
const numberKeyboardShowVal = ref(false)
const numberKeyboardShowPower = ref(false)
const addLiquidVal2 = ref(settingStore.sprayLiquidConfigVal)
const addLiquidPower2 = ref(25)
const numberKeyboardShowVal2 = ref(false)
const numberKeyboardShowPower2 = ref(false)
const formatter = value => {
if (parseInt(value) > 31) {
return '31'
}
return value
}
const formatter6 = value => {
let arr = settingStore.allSettingList.filter(
item => item.name == 'drainage_pump_speed',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value
}
const formatter7 = value => {
let arr = settingStore.allSettingList.filter(
item => item.name == 'injection_pump_speed',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value
}
const isFirstClick = ref(true)
const hideAllKeyboards = flag => {
isFirstClick.value = true
if (flag == 1) {
numberKeyboardShowVal.value = true
numberKeyboardShowPower.value = false
numberKeyboardShowVal2.value = false
numberKeyboardShowPower2.value = false
}
if (flag == 2) {
numberKeyboardShowPower.value = true
numberKeyboardShowVal.value = false
numberKeyboardShowVal2.value = false
numberKeyboardShowPower2.value = false
}
if (flag == 3) {
numberKeyboardShowVal2.value = true
numberKeyboardShowPower.value = false
numberKeyboardShowVal.value = false
numberKeyboardShowPower2.value = false
}
if (flag == 4) {
numberKeyboardShowPower2.value = true
numberKeyboardShowPower.value = false
numberKeyboardShowVal2.value = false
numberKeyboardShowVal.value = false
}
}
const handleInput = (value, index) => {
if (isFirstClick.value) {
if (index == 1) {
setTimeout(() => {
addLiquidVal.value = value + ''
})
}
if (index == 2) {
setTimeout(() => {
addLiquidPower.value = value + ''
})
}
if (index == 3) {
setTimeout(() => {
addLiquidVal2.value = value + ''
})
}
if (index == 4) {
setTimeout(() => {
addLiquidPower2.value = value + ''
})
}
isFirstClick.value = false
}
}
const setAddLiquidConfig = flag => {
if (flag == 1) {
websocketStore.sendCommandMsg(
addLiquidCtrlJSON(1, addLiquidVal.value, addLiquidPower.value),
)
showSuccessToast('设置成功')
} else if (flag == 2) {
websocketStore.sendCommandMsg(
addLiquidCtrlJSON(2, addLiquidVal2.value, addLiquidPower2.value),
)
showSuccessToast('设置成功')
} else if (flag == 3) {
websocketStore.sendCommandMsg(addLiquidCtrlJSON(1, 0, addLiquidPower.value))
showSuccessToast('关闭加液蠕动泵成功')
} else if (flag == 5) {
websocketStore.sendCommandMsg(
addLiquidCtrlJSON(1, '-' + addLiquidVal.value, addLiquidPower.value),
)
showSuccessToast('设置成功')
} else if (flag == 6) {
websocketStore.sendCommandMsg(
addLiquidCtrlJSON(2, '-' + addLiquidVal2.value, addLiquidPower2.value),
)
showSuccessToast('设置成功')
} else {
websocketStore.sendCommandMsg(
addLiquidCtrlJSON(2, 0, addLiquidPower2.value),
)
showSuccessToast('关闭注射蠕动泵成功')
}
}
const handleUpdate = () => {
websocketStore.sendCommandMsg(getStateJSON)
}
const changeFeedingStatus = flag => {
if (flag == 1) {
if (!testStore.feedingPeristalticPumpStatus) {
// 发送打开指令
websocketStore.sendCommandMsg(
liquidpumpctrlJSON(1, settingStore.addLiquidConfigVal),
)
testStore.updateFeedingPeristalticPumpStatus(true)
}
} else {
if (testStore.feedingPeristalticPumpStatus) {
websocketStore.sendCommandMsg(liquidpumpctrlJSON(1, 0))
testStore.updateFeedingPeristalticPumpStatus(false)
}
}
}
const changeSprayStatus = flag => {
if (flag == 1) {
if (!testStore.sprayPeristalticPump) {
websocketStore.sendCommandMsg(
liquidpumpctrlJSON(2, settingStore.sprayLiquidConfigVal),
)
testStore.updateSprayPeristalticPump(true)
}
} else {
if (testStore.sprayPeristalticPump) {
websocketStore.sendCommandMsg(liquidpumpctrlJSON(2, 0))
testStore.updateSprayPeristalticPump(false)
}
}
}
const changeHeatingStatus = flag => {
if (flag == 1) {
if (!testStore.heatingStrip) {
websocketStore.sendCommandMsg(someAirSwitchJSON(4, 1))
websocketStore.sendCommandMsg(someAirSwitchJSON(5, 1))
testStore.updateHeatingStrip(true)
}
} else {
if (testStore.heatingStrip) {
websocketStore.sendCommandMsg(someAirSwitchJSON(4, 0))
websocketStore.sendCommandMsg(someAirSwitchJSON(5, 0))
testStore.updateHeatingStrip(false)
}
}
}
const changeAirStatus = flag => {
if (flag == 1) {
if (!testStore.airCompressor) {
websocketStore.sendCommandMsg(someAirSwitchJSON(0, 1))
websocketStore.sendCommandMsg(someAirSwitchJSON(1, 1))
testStore.updateAirCompressor(true)
}
} else {
if (testStore.airCompressor) {
websocketStore.sendCommandMsg(someAirSwitchJSON(0, 0))
websocketStore.sendCommandMsg(someAirSwitchJSON(1, 0))
testStore.updateAirCompressor(false)
}
}
}
const changeDraughtStatus = flag => {
if (flag == 1) {
if (!testStore.draughtFan) {
websocketStore.sendCommandMsg(someAirSwitchJSON(2, 1))
websocketStore.sendCommandMsg(someAirSwitchJSON(3, 1))
testStore.updateDraughtFan(true)
}
} else {
if (testStore.draughtFan) {
websocketStore.sendCommandMsg(someAirSwitchJSON(2, 0))
websocketStore.sendCommandMsg(someAirSwitchJSON(3, 0))
testStore.updateDraughtFan(false)
}
}
}
</script>
<style lang="scss" scoped>
.test_container {
margin-bottom: 19px;
height: 580px;
overflow: scroll;
box-sizing: border-box;
background: #ffffff;
border-radius: 16px;
padding: 20px;
display: grid;
row-gap: 20px;
column-gap: 20px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, 1fr);
padding-bottom: 20px;
.common_set {
width: 580px;
height: 73px;
box-sizing: border-box;
border-radius: 14px;
background: #f6f6f6;
display: flex;
align-items: center;
.title {
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.06em;
color: #000000;
width: 106px;
}
.num {
font-family: Source Han Sans CN;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.1em;
color: #000000;
display: flex;
align-items: center;
margin-right: 4px;
.add_liquid_input {
width: 40px;
margin-right: 2px;
text-align: right;
height: 24px;
padding: 0;
color: #0e0e0e;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14;
}
}
}
.switch_wrap {
padding: 0 17px 0 17px;
justify-content: space-between;
.btn_wrap {
display: flex;
align-items: center;
.open {
margin-right: 10px;
width: 87px;
height: 45px;
border-radius: 23px;
background: #06518b;
display: flex;
align-items: center;
justify-content: center;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
color: #ffffff;
}
.success {
background: #1ad66e;
}
.close {
width: 87px;
height: 45px;
border-radius: 23px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
color: #d8d8d8;
}
}
}
.update_wrap {
padding: 0 17px 0 17px;
justify-content: space-between;
.btn_wrap {
width: 184px;
height: 45px;
border-radius: 23px;
background: #06518b;
display: flex;
align-items: center;
justify-content: center;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
color: #ffffff;
}
}
.info_wrap {
padding: 0 32px 0 17px;
justify-content: space-between;
.title {
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.06em;
color: #000000;
width: 57px;
white-space: nowrap;
}
.info {
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
color: #06518b;
}
}
}
</style>