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.
331 lines
10 KiB
331 lines
10 KiB
<template>
|
|
<div class="air_switch_config_container">
|
|
<div class="header">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
fill="none"
|
|
version="1.1"
|
|
width="28"
|
|
height="28"
|
|
viewBox="0 0 28 28"
|
|
>
|
|
<g>
|
|
<path
|
|
d="M14,0C6.26801,0,0,6.26802,0,14C0,21.732,6.26801,28,14,28C21.732,28,28,21.732,28,14C28,6.26802,21.732,0,14,0ZM9.10859,20.4807C9.097,21.0081,8.66847,21.431,8.14073,21.4356C7.6131,21.4405,7.17713,21.0253,7.15599,20.4979L7.15599,14.4761C7.15421,13.9358,7.59264,13.4974,8.1329,13.4992C8.39231,13.4979,8.64147,13.6004,8.8248,13.784C9.00814,13.9674,9.11035,14.2167,9.10859,14.4761L9.10859,20.4807ZM9.11277,16.4831L10.5775,16.4831L10.5775,13.9308C10.5771,12.598,11.3513,11.3866,12.5608,10.827C12.5414,10.7319,12.5318,10.635,12.5322,10.5379L12.5322,9.02199L8.39528,9.02199C8.06546,9.02229,7.74915,8.89097,7.51653,8.65716C7.2839,8.42333,7.15414,8.10636,7.15602,7.77653C7.15499,7.44753,7.2848,7.13161,7.51685,6.89839C7.74891,6.66514,8.06422,6.53379,8.39324,6.53331L19.6047,6.53331C19.935,6.53331,20.2516,6.66514,20.4843,6.89948C20.717,7.13381,20.8465,7.45138,20.844,7.78166C20.8444,8.46656,20.2895,9.02198,19.6047,9.02198L15.4668,9.02198L15.4668,10.5421C15.467,10.639,15.4581,10.7358,15.4401,10.831C16.6497,11.3886,17.4242,12.5989,17.4235,13.9308L17.4235,16.4831L18.8842,16.4831L18.8842,14.4761C18.8842,13.9363,19.3218,13.4987,19.8614,13.4987C20.4013,13.4987,20.8389,13.9363,20.8389,14.4761L20.8389,20.4847C20.8414,21.0244,20.4058,21.4641,19.8661,21.4667C19.3263,21.4691,18.8867,21.0336,18.8842,20.4939L18.8842,18.9728L18.8893,18.9728L18.8893,16.4831L18.8842,16.4831L18.8842,18.9697L17.2923,18.9697C16.8744,20.4411,15.5307,21.4564,14.001,21.4564C12.4714,21.4564,11.1276,20.441,10.7096,18.9697L9.11274,18.9697"
|
|
fill="#FFFFFF"
|
|
fill-opacity="1"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
<p class="title">选择空气阀配置</p>
|
|
</div>
|
|
<div class="opers_box">
|
|
<div class="left_container">
|
|
<div
|
|
:class="activeTab == '1' ? 'tab mb active' : 'tab mb'"
|
|
@click="changeTab('1')"
|
|
>
|
|
<p class="text">正压</p>
|
|
<!-- <div class="percent">{{ topText }}</div> -->
|
|
<img
|
|
:src="A2"
|
|
@click.prevent.stop="changeTab('0')"
|
|
v-if="activeTab == 1"
|
|
class="icon"
|
|
alt=""
|
|
/>
|
|
<img :src="A1" v-else class="icon" alt="" />
|
|
</div>
|
|
<div
|
|
:class="activeTab == '2' ? 'tab active' : 'tab'"
|
|
@click="changeTab('2')"
|
|
>
|
|
<p class="text">负压</p>
|
|
<!-- <div class="percent">{{ bottomText }}</div> -->
|
|
<img
|
|
:src="A2"
|
|
@click.prevent.stop="changeTab('0')"
|
|
v-if="activeTab == 2"
|
|
class="icon"
|
|
alt=""
|
|
/>
|
|
<img :src="A1" v-else class="icon" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="right_container">
|
|
<van-picker
|
|
v-if="activeTab == 1"
|
|
:columns="columns"
|
|
:show-toolbar="false"
|
|
visible-option-num="3"
|
|
option-height="42"
|
|
v-model="selectedValuesTop"
|
|
@change="topChange"
|
|
/>
|
|
<van-picker
|
|
v-if="activeTab == 2"
|
|
:columns="columns"
|
|
:show-toolbar="false"
|
|
visible-option-num="3"
|
|
option-height="42"
|
|
@change="bottomChange"
|
|
v-model="selectedValuesBottom"
|
|
/>
|
|
<p class="tips" v-if="activeTab == 0">关闭</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import A1 from '@/assets/img/air/1.png'
|
|
import A2 from '@/assets/img/air/2.png'
|
|
import { useSealStore, useWebSocketStore, useSettingStore } from '@/store'
|
|
import {
|
|
AirInletProportionalValve_setStateJSON,
|
|
AirOutletProportionalValve_setStateJSON,
|
|
airInletProportionalValve_getStateJSON,
|
|
getAllSettingJSON,
|
|
AirOutletProportionalValve_getStateJSON,
|
|
AirInOutletProportionalValve_setStateJSON,
|
|
} from '@/mock/command'
|
|
import { ref, onMounted, watch, computed } from 'vue'
|
|
|
|
const activeTab = ref('1')
|
|
const sealStore = useSealStore()
|
|
const webSocketStore = useWebSocketStore()
|
|
const settingStore = useSettingStore()
|
|
|
|
const changeTab = tab => {
|
|
activeTab.value = tab
|
|
changeAir(tab)
|
|
}
|
|
|
|
const topText = ref('0%')
|
|
const bottomText = ref('0%')
|
|
const topChange = ({ selectedOptions, selectedValues }) => {
|
|
topText.value = selectedOptions[0].text
|
|
webSocketStore.sendCommandMsg(
|
|
AirInletProportionalValve_setStateJSON([parseInt(selectedValues[0])]),
|
|
)
|
|
sealStore.updateAirInletProportionalValue(parseInt(selectedValues[0]))
|
|
}
|
|
const bottomChange = ({ selectedOptions, selectedValues }) => {
|
|
bottomText.value = selectedOptions[0].text
|
|
webSocketStore.sendCommandMsg(
|
|
AirOutletProportionalValve_setStateJSON([parseInt(selectedValues[0])]),
|
|
)
|
|
sealStore.updateAirOutletProportionalValue(parseInt(selectedValues[0]))
|
|
}
|
|
|
|
const changeAir = tab => {
|
|
// 选中正压:
|
|
// 入气阀设置成10%
|
|
// 出气阀设置成0
|
|
// 选中负压:
|
|
// 入气阀设置成0%
|
|
// 出气阀设置成10%
|
|
// 取消选中:
|
|
// 两个阀设置成0
|
|
if (tab == '0') {
|
|
webSocketStore.sendCommandMsg(
|
|
AirInOutletProportionalValve_setStateJSON([0, 0]),
|
|
)
|
|
}
|
|
if (tab == '1') {
|
|
webSocketStore.sendCommandMsg(
|
|
AirInOutletProportionalValve_setStateJSON([
|
|
settingStore.proportionalValveDefaultValue * 10,
|
|
0,
|
|
]),
|
|
)
|
|
selectedValuesTop.value = [
|
|
settingStore.proportionalValveDefaultValue * 10 + '',
|
|
]
|
|
}
|
|
if (tab == '2') {
|
|
webSocketStore.sendCommandMsg(
|
|
AirInOutletProportionalValve_setStateJSON([
|
|
0,
|
|
settingStore.proportionalValveDefaultValue * 10,
|
|
]),
|
|
)
|
|
selectedValuesBottom.value = [
|
|
settingStore.proportionalValveDefaultValue * 10 + '',
|
|
]
|
|
}
|
|
}
|
|
|
|
const columns = ref([
|
|
{ text: '10%', value: '100' },
|
|
{ text: '20%', value: '200' },
|
|
{ text: '30%', value: '300' },
|
|
{ text: '40%', value: '400' },
|
|
{ text: '50%', value: '500' },
|
|
{ text: '60%', value: '600' },
|
|
{ text: '70%', value: '700' },
|
|
{ text: '80%', value: '800' },
|
|
{ text: '90%', value: '900' },
|
|
{ text: '100%', value: '1000' },
|
|
])
|
|
|
|
const selectedValuesTop = ref(['100'])
|
|
const selectedValuesBottom = ref(['100'])
|
|
|
|
const tabChange = () => {
|
|
console.log('airin', sealStore.airInletProportionalInitVal[0])
|
|
console.log('airout', sealStore.airOutletProportionalInitVal[0])
|
|
if (
|
|
sealStore.airInletProportionalInitVal == 0 &&
|
|
sealStore.airOutletProportionalInitVal == 0
|
|
) {
|
|
activeTab.value = '0'
|
|
return
|
|
}
|
|
if (sealStore.airInletProportionalInitVal > 0) {
|
|
activeTab.value = '1'
|
|
selectedValuesTop.value = [sealStore.airInletProportionalInitVal[0] + '']
|
|
return
|
|
}
|
|
if (sealStore.airOutletProportionalInitVal > 0) {
|
|
activeTab.value = '2'
|
|
selectedValuesBottom.value = [
|
|
sealStore.airOutletProportionalInitVal[0] + '',
|
|
]
|
|
return
|
|
}
|
|
activeTab.value = '0'
|
|
}
|
|
|
|
onMounted(() => {
|
|
try {
|
|
webSocketStore.sendCommandMsg(airInletProportionalValve_getStateJSON)
|
|
webSocketStore.sendCommandMsg(AirOutletProportionalValve_getStateJSON)
|
|
webSocketStore.sendCommandMsg(getAllSettingJSON)
|
|
tabChange()
|
|
} catch (error) {
|
|
setTimeout(() => {
|
|
webSocketStore.sendCommandMsg(getAllSettingJSON)
|
|
webSocketStore.sendCommandMsg(airInletProportionalValve_getStateJSON)
|
|
webSocketStore.sendCommandMsg(AirOutletProportionalValve_getStateJSON)
|
|
}, 1000)
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => sealStore.airInletProportionalInitVal,
|
|
(newVal, oldVal) => {
|
|
selectedValuesTop.value = [newVal + '']
|
|
topText.value = `${newVal / 10}%`
|
|
tabChange()
|
|
},
|
|
)
|
|
|
|
watch(
|
|
() => sealStore.airOutletProportionalInitVal,
|
|
(newVal, oldVal) => {
|
|
selectedValuesBottom.value = [newVal + '']
|
|
bottomText.value = `${newVal / 10}%`
|
|
tabChange()
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.air_switch_config_container {
|
|
box-sizing: border-box;
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
.title {
|
|
margin-left: 8px;
|
|
font-family: 思源黑体;
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
letter-spacing: 0.06em;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.opers_box {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 151px;
|
|
justify-content: space-between;
|
|
.left_container {
|
|
width: 337px;
|
|
height: 151px;
|
|
.tab {
|
|
width: 337px;
|
|
height: 68px;
|
|
border-radius: 6px;
|
|
background: #1f6397;
|
|
box-sizing: border-box;
|
|
padding-left: 25px;
|
|
padding-right: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.text {
|
|
font-family: 思源黑体;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0.06em;
|
|
color: #ffffff;
|
|
}
|
|
.percent {
|
|
width: 69px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
letter-spacing: 0.06em;
|
|
font-feature-settings: 'kern' on;
|
|
color: #ffffff;
|
|
}
|
|
.icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
}
|
|
.active {
|
|
.percent {
|
|
background: #06518b;
|
|
}
|
|
}
|
|
.mb {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
.right_container {
|
|
width: 339px;
|
|
height: 146px;
|
|
border-radius: 6px;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
.tips {
|
|
width: 339px;
|
|
height: 151px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: 思源黑体;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|