chenjinliang
/
transmit_draw_bar_disinfection_front_end
forked from maochaoying/transmit_draw_bar_disinfection_front_end
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

测试页面更新

master
sige 1 year ago
parent
893f3c2b2e
commit
1a9b86ae55
3 changed files with 186 additions and 316 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 482
      src/components/Test.vue
  2. 4
      src/main.js
  3. 16
      src/store/modules/test.js

482
src/components/Test.vue
View File

@ -1,71 +1,12 @@
<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="btn_wrap">
<div
:class="
settingStore.chargingPumpRPM > 0
? 'open style-btn mg'
: 'close style-btn mg'
"
@click="setAddLiquidConfig(1)"
>
正转
</div>
<div
:class="
settingStore.chargingPumpRPM < 0
? 'open style-btn'
: 'close style-btn'
"
@click="setAddLiquidConfig(5)"
>
反转
</div>
</div>
<div class="btn_wrap">
<div
:class="
settingStore.chargingPumpRPM != 0
? 'open style-btn mg'
: 'close style-btn mg'
"
@click="setAddLiquidConfig(1)"
>
打开
</div>
<div
:class="
settingStore.chargingPumpRPM == 0
? 'open style-btn'
: 'close style-btn'
"
@click="setAddLiquidConfig(3)"
>
关闭
</div>
</div>
</div>
<div class="common_set switch_wrap">
<p class="title">注射蠕动泵</p>
<p class="title">喷液泵</p>
<div class="num">
<van-field
type="number"
:formatter="formatter7"
v-model="addLiquidVal2"
v-model="sprayLiquidPumpGPMValue"
:clickable="true"
readonly
@click.stop="hideAllKeyboards(3)"
@ -74,179 +15,93 @@
<p>g/min</p>
</div>
<div class="btn_wrap">
<div
:class="
settingStore.sprinklerPumpRPM > 0
? 'open style-btn mg'
: 'close style-btn mg'
"
@click="setAddLiquidConfig(2)"
>
正转
</div>
<div
:class="
settingStore.sprinklerPumpRPM < 0
? 'open style-btn'
: 'close style-btn'
"
@click="setAddLiquidConfig(6)"
>
反转
</div>
<div class="open style-btn" @click="actionSprayLiquidPumpGPMValueChange">更新</div>
</div>
</div>
<!-- 气密性空压机 -->
<div class="common_set switch_wrap">
<p class="title">气密性空压机</p>
<div class="btn_wrap">
<div
:class="
settingStore.sprinklerPumpRPM != 0
? 'open style-btn mg'
: 'close style-btn mg'
"
@click="setAddLiquidConfig(2)"
>
打开
</div>
:class="sprayAirCompressorPower === 1 ? 'open style-btn mg' : 'close style-btn mg'"
@click="actionSprayAirCompressorPowerCtrl(1)"
>打开</div>
<div
:class="
settingStore.sprinklerPumpRPM == 0
? 'open style-btn'
: 'close style-btn'
"
@click="setAddLiquidConfig(4)"
>
关闭
</div>
:class="sprayAirCompressorPower == 0 ? 'open style-btn' : 'close style-btn'"
@click="actionSprayAirCompressorPowerCtrl(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>
<p class="title"> 风机</p>
<div class="btn_wrap">
<div class="style-btn"
:class="50 === miniPwmBlowerCtrl ? 'open mg' : 'close style-btn mg'"
@click="actionMiniPwmBlowerCtrl(50)"
>打开</div>
<div
:class="
testStore.airCompressor ? 'open style-btn mg' : 'close style-btn mg'
"
@click="changeAirStatus(1)"
>
打开
</div>
<div
:class="
!testStore.airCompressor ? 'open style-btn' : 'close style-btn'
"
@click="changeAirStatus(2)"
>
关闭
</div>
:class="0 == miniPwmBlowerCtrl ? 'open style-btn ' : 'close style-btn'"
@click="actionMiniPwmBlowerCtrl(0)"
>关闭</div>
</div>
</div>
<!-- 加热片 -->
<div class="common_set switch_wrap">
<p class="title">风机</p>
<p class="num">{{ testStore?.airBlowerObj?.currentVal }} A</p>
<p class="title">加热空压机控制</p>
<div class="btn_wrap">
<div
:class="
testStore.draughtFan ? 'open style-btn mg' : 'close style-btn mg'
"
@click="changeDraughtStatus(1)"
>
打开
</div>
:class="1 === heaterCtrl ? 'open style-btn mg' : 'close style-btn mg'"
@click="actionHeaterCtrlUpdate(1)"
>打开</div>
<div
:class="!testStore.draughtFan ? 'open style-btn ' : 'close style-btn'"
@click="changeDraughtStatus(2)"
>
关闭
</div>
:class="0 === heaterCtrl ? 'open style-btn' : 'close style-btn'"
@click="actionHeaterCtrlUpdate(0)"
>关闭</div>
</div>
</div>
<!-- 喷液空压机控制 -->
<div class="common_set switch_wrap">
<p class="title">加热片</p>
<p class="num">{{ testStore?.heatingStripObj?.currentVal }} A</p>
<p class="title">喷液空压机控制</p>
<div class="btn_wrap">
<div
:class="
testStore.heatingStrip ? 'open style-btn mg' : 'close style-btn mg'
"
@click="changeHeatingStatus(1)"
>
打开
</div>
<div
:class="
!testStore.heatingStrip ? 'open style-btn' : 'close style-btn'
"
@click="changeHeatingStatus(2)"
>
关闭
</div>
<div :class="1 == sprayAirCompressorPowerCtrl ? 'open style-btn mg' : 'close style-btn mg'"
@click="actionSprayAirCompressorPowerCtrlUpdate(1)"
>打开</div>
<div :class="0 == sprayAirCompressorPowerCtrl ? 'open style-btn' : 'close style-btn'"
@click="actionSprayAirCompressorPowerCtrlUpdate(0)"
>关闭</div>
</div>
</div>
<!-- 加热空压机安全电磁阀控制 -->
<div class="common_set switch_wrap">
<p class="title">空压机通道</p>
<p class="title">加热空压机安全电磁阀控制</p>
<div class="btn_wrap">
<div
:class="
sealStore.airCompressorChannelSelectVal == '2'
? 'open style-btn mg'
: 'close style-btn mg'
"
@click="changeChannel(1)"
>
空气
</div>
<div
:class="
sealStore.airCompressorChannelSelectVal == '1'
? 'open style-btn'
: 'close style-btn'
"
@click="changeChannel(2)"
>
内管道
</div>
<div :class="heaterCtrlSafeValve == 1 ? 'open style-btn mg' : 'close style-btn mg'"
@click="actionHeaterCtrlSafeValveUpdate(1)"
>打开</div>
<div :class="heaterCtrlSafeValve == 0 ? 'open style-btn' : 'close style-btn'"
@click="actionHeaterCtrlSafeValveUpdate(0)"
>关闭</div>
</div>
</div>
<div class="common_set update_wrap pressure">
<div class="title">
水浸
<p class="num">
{{ testStore.waterImmersionSensor1 ? '有水' : '没水' }}
</p>
</div>
<div class="title">
液位
<p class="num">
{{
deviceStore.disinfectantCapacity <= 0
? 0
: deviceStore.disinfectantCapacity
}}
g
</p>
</div>
<div class="title"> 压力1 <p class="num">{{ pressureSensor1Value }}</p></div>
<div class="title"> 压力2 <p class="num">{{ pressureSensor2Value }}</p></div>
</div>
<div class="common_set update_wrap pressure">
<p class="title">
压力1 <span>{{ sealStore.allPressure[0] }}</span>
</p>
<p class="title">
压力2 <span>{{ sealStore.allPressure[1] }}</span>
</p>
<p class="title">
压力3 <span>{{ sealStore.allPressure[2] }}</span>
</p>
<p class="title">
压力4 <span>{{ sealStore.allPressure[3] }}</span>
</p>
<div class="common_set info_wrap">
<p class="title">加热片</p>
<p class="info">电流 {{ heaterReadElectricCurrent }} A</p>
<p class="info">湿度 {{ heaterReadTemperatureData }} ℃</p>
</div>
<div class="common_set info_wrap">
<p class="title">仓内</p>
@ -255,51 +110,20 @@
<p class="info">过氧化氢浓度 {{ deviceStore.binHP }} PPM</p>
</div>
<div class="common_set switch_wrap">
<p class="title">空压机阀1</p>
<div class="btn_wrap">
<div
:class="
sealStore.airCompressorValve1 == '1'
? 'open style-btn mg'
: 'close style-btn mg'
"
@click="changeAirValve1(1)"
>
打开
</div>
<div
:class="
sealStore.airCompressorValve1 == '0'
? 'open style-btn'
: 'close style-btn'
"
@click="changeAirValve1(2)"
>
关闭
</div>
</div>
<p class="title">空压机阀2</p>
<p class="title">通道切换</p>
<div class="btn_wrap">
<div
:class="
sealStore.airCompressorValve2 == '1'
? 'open style-btn mg'
: 'close style-btn mg'
"
@click="changeAirValve2(1)"
>
打开
</div>
<div
:class="
sealStore.airCompressorValve2 == '0'
? 'open style-btn'
: 'close style-btn'
"
@click="changeAirValve2(2)"
>
关闭
</div>
<div class="style-btn"
:class="extChannelActiveName == 'disinfectionChannel' ? 'open' : 'close'"
@click="actionSetExtChannelActiveName('disinfectionChannel')"
>除湿</div>
<div style="margin-left:5px;" class="style-btn"
:class="extChannelActiveName == 'dehumidificationchannel' ? 'open' : 'close'"
@click="actionSetExtChannelActiveName('dehumidificationchannel')"
>降解</div>
<div style="margin-left:5px;" class="style-btn"
:class="extChannelActiveName == 'degradationchannel' ? 'open' : 'close'"
@click="actionSetExtChannelActiveName('degradationchannel')"
>消毒</div>
</div>
</div>
<van-number-keyboard
@ -316,7 +140,7 @@
/>
<van-number-keyboard
@input="val => handleInput(val, 3)"
v-model="addLiquidVal2"
v-model="sprayLiquidPumpGPMValue"
:show="numberKeyboardShowVal2"
@blur="numberKeyboardShowVal2 = false"
/>
@ -330,7 +154,7 @@
</template>
<script setup>
import { ref } from 'vue'
import { onMounted, onUnmounted, ref } from 'vue'
import {
useTestStore,
useDeviceStore,
@ -351,6 +175,7 @@ import {
sprayLiquidPump_open_for_testJSON,
} from '@/mock/command'
import { showSuccessToast, showFailToast } from 'vant'
import { storeToRefs } from 'pinia';
const testStore = useTestStore()
const deviceStore = useDeviceStore()
const websocketStore = useWebSocketStore()
@ -367,75 +192,92 @@ const addLiquidPower2 = ref(25)
const numberKeyboardShowVal2 = ref(false)
const numberKeyboardShowPower2 = ref(false)
const formatter = value => {
if (parseInt(value) > 31) {
return '31'
}
return value
const {
extChannelActiveName, // 外部通道名称
miniPwmBlowerCtrl, // 风机控制
sprayLiquidPumpGPM, // 喷液泵GPM值
sprayAirCompressorPower, // 气密性空压机
heaterCtrl, // 加热片
heaterCtrlSafeValve, // 加热空压机安全电磁阀控制
sprayAirCompressorPowerCtrl, // 喷液空压机控制
} = storeToRefs(testStore);
const sprayLiquidPumpGPMValue = ref(sprayLiquidPumpGPM);
const pressureSensor1Value = ref(0);
const pressureSensor2Value = ref(0);
const heaterReadElectricCurrent = ref(0);
const heaterReadTemperatureData = ref(0);
let refreshTimer = null;
onMounted(() => {
refresh();
});
onUnmounted(() => {
clearTimeout(refreshTimer);
});
// 外部通道控制
function actionSetExtChannelActiveName( name ) {
testStore.extChannelActiveName = name;
websocketStore.call('DBDBTestPage__extValveCtrl',{channel:name});
}
const formatter6 = value => {
let arr = settingStore.allSettingList.filter(
item => item.name == 'drainage_pump_speed',
)
if (arr && arr.length > 0) {
if (parseInt(value) > 40) {
return '40'
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
if (value == '') {
return '0'
}
return value
// 风机控制
function actionMiniPwmBlowerCtrl(power) {
testStore.miniPwmBlowerCtrl = power;
websocketStore.call('DBDBTestPage__miniPwmBlowerCtrl',{power100:power});
}
const formatter7 = value => {
let arr = settingStore.allSettingList.filter(
item => item.name == 'injection_pump_speed',
)
if (arr && arr.length > 0) {
if (parseInt(value) > 40) {
return '40'
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
if (value == '') {
return '0'
}
return value
// 喷液泵GPM值变化
function actionSprayLiquidPumpGPMValueChange() {
testStore.sprayLiquidPumpGPM = sprayLiquidPumpGPMValue.value;
websocketStore.call('DBDBTestPage__sprayLiquidPump_run',{gpm:sprayLiquidPumpGPMValue.value});
}
const changeAirValve1 = flag => {
if (flag == '1') {
// 打开
websocketStore.sendCommandMsg(airCompressorSetValve1JSON([1]))
sealStore.updateAirCompressorValve1(1)
}
if (flag == '2') {
// 关闭
websocketStore.sendCommandMsg(airCompressorSetValve1JSON([0]))
sealStore.updateAirCompressorValve1(0)
}
// 气密性空压机
function actionSprayAirCompressorPowerCtrl(value) {
testStore.sprayAirCompressorPower = value;
websocketStore.call('DBDBTestPage__sprayAirCompressorPowerCtrl',{power:value});
}
const changeAirValve2 = flag => {
if (flag == '1') {
// 打开
websocketStore.sendCommandMsg(airCompressorSetValve2JSON([1]))
sealStore.updateAirCompressorValve2(1)
}
if (flag == '2') {
// 关闭
websocketStore.sendCommandMsg(airCompressorSetValve2JSON([0]))
sealStore.updateAirCompressorValve2(0)
}
// 加热片
function actionHeaterCtrlUpdate( value ) {
testStore.heaterCtrl = value;
websocketStore.call('DBDBTestPage__heaterCtrl',{power:value});
}
// 加热空压机安全电磁阀控制
function actionHeaterCtrlSafeValveUpdate( value ) {
testStore.heaterCtrlSafeValve = value;
websocketStore.call('DBDBTestPage__heaterCtrlSafeValve',{power:value});
}
// 喷液空压机控制
function actionSprayAirCompressorPowerCtrlUpdate( value ) {
testStore.sprayAirCompressorPowerCtrl = value;
websocketStore.call('DBDBTestPage__sprayAirCompressorPowerCtrl',{power:value});
}
// 刷新状态
async function refresh() {
let response = await websocketStore.call('DBDBTestPage__readPressureSensor', {index:1});
pressureSensor1Value.value = response.ack.pressure;
response = await websocketStore.call('DBDBTestPage__readPressureSensor', {index:2});
pressureSensor2Value.value = response.ack.pressure;
response = await websocketStore.call('DBDBTestPage__heaterReadElectricCurrent');
heaterReadElectricCurrent.value = response.ack.current;
response = await websocketStore.call('DBDBTestPage__heaterReadTemperatureData');
heaterReadTemperatureData.value = response.ack.temperature;
refreshTimer = setTimeout(refresh, 1000);
}
const isFirstClick = ref(true)
const hideAllKeyboards = flag => {
isFirstClick.value = true
@ -479,7 +321,7 @@ const handleInput = (value, index) => {
}
if (index == 3) {
setTimeout(() => {
addLiquidVal2.value = value + ''
sprayLiquidPumpGPMValue.value = value + ''
})
}
if (index == 4) {
@ -625,6 +467,16 @@ const changeChannel = flag => {
</script>
<style lang="scss" scoped>
.custom-button {
width: 64px;
color: #fff;
font-size: 17px;
text-align: center;
background-color: #064b91;
border-radius: 100px;
height: 36px;
line-height: 36px;
}
.test_container {
margin-bottom: 19px;
height: 580px;
@ -653,7 +505,7 @@ const changeChannel = flag => {
font-weight: 500;
letter-spacing: 0.06em;
color: #000000;
width: 106px;
width: 300px;
}
.num {
font-family: Source Han Sans CN;

4
src/main.js
View File

@ -14,7 +14,8 @@ import {
Checkbox,
CheckboxGroup,
DropdownMenu,
DropdownItem
DropdownItem,
Slider,
} from 'vant'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
@ -39,5 +40,6 @@ createApp(App)
.use(Overlay)
.use(ElementPlus)
.use(Toast)
.use(Slider)
.use(store)
.mount('#app')

16
src/store/modules/test.js
View File

@ -23,6 +23,22 @@ export const useTestStore = defineStore({
heatingStripObj: {},
waterImmersionSensor1: false,
waterImmersionSensor2: false,
// -外部通道控制
extChannelActiveName : '',
// 风机控制
miniPwmBlowerCtrl : 0,
// 喷液泵
sprayLiquidPumpGPM : 0,
// 气密性空压机
sprayAirCompressorPower : 0,
// 加热器
heaterCtrl : 0,
// 加热器安全阀
heaterCtrlSafeValve : 0,
// 喷液空压机控制
sprayAirCompressorPowerCtrl : 0,
}
},
// actions

Write Preview
Loading…
Cancel
Save