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.
298 lines
7.5 KiB
298 lines
7.5 KiB
<template>
|
|
<div class="liquid_contaienr">
|
|
<div class="header_wrap">
|
|
<div class="set_wrap" v-if="tabType == 1">
|
|
<van-field
|
|
type="number"
|
|
v-model="addLiquidVal"
|
|
:clickable="true"
|
|
:maxlength="3"
|
|
readonly
|
|
@touchstart.stop="numberKeyboardShow = true"
|
|
class="add_liquid_input"
|
|
/>
|
|
<p class="title">设置加液</p>
|
|
</div>
|
|
<div
|
|
:class="
|
|
operatorStore.replenishingFluidsWorkState
|
|
? 'btn mr active'
|
|
: 'btn mr '
|
|
"
|
|
v-if="tabType == 1"
|
|
@click="stopAdd"
|
|
>
|
|
停止加液
|
|
</div>
|
|
<div
|
|
:class="
|
|
operatorStore.replenishingFluidsWorkState ? 'btn' : 'btn active'
|
|
"
|
|
v-if="tabType == 1"
|
|
@click="startAdd"
|
|
>
|
|
开始加液
|
|
</div>
|
|
<div
|
|
:class="operatorStore.drainingWorkState ? 'btn mr active' : 'btn mr '"
|
|
v-if="tabType == 2"
|
|
@click="stopPop"
|
|
>
|
|
停止排液
|
|
</div>
|
|
<div
|
|
:class="operatorStore.drainingWorkState ? 'btn' : 'btn active'"
|
|
v-if="tabType == 2"
|
|
@click="startTabLiquid"
|
|
>
|
|
开始排液
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="add_liquid"
|
|
v-if="operatorStore.replenishingFluidsWorkState == 1 && tabType == 1"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
fill="none"
|
|
version="1.1"
|
|
width="29.999204635620117"
|
|
height="29.999876022338867"
|
|
viewBox="0 0 29.999204635620117 29.999876022338867"
|
|
>
|
|
<g>
|
|
<path
|
|
d="M14.9997,0C6.7157,0,0,6.71555,0,14.9997C0,23.2839,6.7157,29.9999,14.9997,29.9999C19.1418,29.9999,22.8916,28.3208,25.606,25.6063C28.3204,22.8918,29.9992,19.1417,29.9992,14.9997C29.9992,6.7157,23.2838,0,14.9997,0ZM11.0395,23.4572L11.0395,6.54144L23.6346,14.9997L11.0395,23.4573L11.0395,23.4572Z"
|
|
fill="#FF9A2D"
|
|
fill-opacity="1"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
<p class="text">正在加液...</p>
|
|
</div>
|
|
<div
|
|
class="add_liquid"
|
|
v-if="operatorStore.drainingWorkState == 1 && tabType == 2"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
fill="none"
|
|
version="1.1"
|
|
width="29.999204635620117"
|
|
height="29.999876022338867"
|
|
viewBox="0 0 29.999204635620117 29.999876022338867"
|
|
>
|
|
<g>
|
|
<path
|
|
d="M14.9997,0C6.7157,0,0,6.71555,0,14.9997C0,23.2839,6.7157,29.9999,14.9997,29.9999C19.1418,29.9999,22.8916,28.3208,25.606,25.6063C28.3204,22.8918,29.9992,19.1417,29.9992,14.9997C29.9992,6.7157,23.2838,0,14.9997,0ZM11.0395,23.4572L11.0395,6.54144L23.6346,14.9997L11.0395,23.4573L11.0395,23.4572Z"
|
|
fill="#FF9A2D"
|
|
fill-opacity="1"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
<p class="text">正在排液...</p>
|
|
</div>
|
|
<div class="chart">
|
|
<div
|
|
class="liquid_column"
|
|
:style="{
|
|
'--height': `${(disinfectantCapacity / 5000) * 427}px`,
|
|
}"
|
|
>
|
|
<p class="indicator">{{ disinfectantCapacity }}g</p>
|
|
</div>
|
|
</div>
|
|
<LiquidModal
|
|
v-if="tabType == 2 && tipModalVisible"
|
|
:hideTabLiquid="hideTabLiquid"
|
|
/>
|
|
<van-number-keyboard
|
|
v-model="addLiquidVal"
|
|
:show="numberKeyboardShow"
|
|
:maxlength="3"
|
|
@blur="numberKeyboardShow = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import LiquidModal from './dialogs/LiquidModal.vue'
|
|
import { useDeviceStore, useWebSocketStore, useOperatorStore } from '@/store'
|
|
import { ref } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import {
|
|
startReplenishingFluidsJSON,
|
|
stopReplenishingFluidsJSON,
|
|
stopDrainingJSON,
|
|
} from '@/mock/command'
|
|
|
|
const numberKeyboardShow = ref(false)
|
|
const operatorStore = useOperatorStore()
|
|
|
|
const props = defineProps({
|
|
tabType: {
|
|
type: Number,
|
|
},
|
|
})
|
|
|
|
const addLiquidVal = ref(1)
|
|
const tipModalVisible = ref(false)
|
|
const webSocketStore = useWebSocketStore()
|
|
|
|
const isPopLiquidStatus = ref(false)
|
|
|
|
const startAdd = () => {
|
|
if (!operatorStore.replenishingFluidsWorkState) {
|
|
console.log(startReplenishingFluidsJSON(parseInt(addLiquidVal.value)))
|
|
webSocketStore.sendCommandMsg(
|
|
startReplenishingFluidsJSON(parseInt(addLiquidVal.value)),
|
|
)
|
|
}
|
|
}
|
|
|
|
const stopAdd = () => {
|
|
if (operatorStore.replenishingFluidsWorkState) {
|
|
webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON)
|
|
}
|
|
}
|
|
|
|
const stopPop = () => {
|
|
if (operatorStore.drainingWorkState) {
|
|
webSocketStore.sendCommandMsg(stopDrainingJSON)
|
|
}
|
|
}
|
|
|
|
const startTabLiquid = () => {
|
|
if (!operatorStore.drainingWorkState) {
|
|
tipModalVisible.value = true
|
|
}
|
|
}
|
|
|
|
const hideTabLiquid = () => {
|
|
tipModalVisible.value = false
|
|
}
|
|
|
|
const deviceStore = useDeviceStore()
|
|
|
|
const { disinfectantCapacity } = storeToRefs(deviceStore)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.liquid_contaienr {
|
|
margin-bottom: 30px;
|
|
height: 580px;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
padding: 30px;
|
|
padding-bottom: 23px;
|
|
position: relative;
|
|
.header_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
position: relative;
|
|
margin-bottom: 39px;
|
|
.set_wrap {
|
|
position: relative;
|
|
width: 227px;
|
|
height: 45px;
|
|
background: url(../assets/img/liquid/oper.png) no-repeat;
|
|
background-size: 227px 45px;
|
|
.title {
|
|
position: absolute;
|
|
left: 22px;
|
|
top: 12px;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #0e0e0e;
|
|
}
|
|
.add_liquid_input {
|
|
position: absolute;
|
|
left: 113px;
|
|
top: 11px;
|
|
width: 40px;
|
|
height: 20px;
|
|
padding: 0;
|
|
color: #0e0e0e;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 14;
|
|
}
|
|
}
|
|
.btn {
|
|
width: 140px;
|
|
height: 45px;
|
|
border-radius: 23px;
|
|
background: #f6f6f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #d8d8d8;
|
|
}
|
|
.mr {
|
|
margin: 0 16px;
|
|
}
|
|
.active {
|
|
background: #06518b;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.add_liquid {
|
|
position: absolute;
|
|
left: 382px;
|
|
top: 33px;
|
|
display: flex;
|
|
align-items: center;
|
|
.text {
|
|
margin-left: 16px;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 26px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0.06em;
|
|
color: #ff9a2d;
|
|
}
|
|
}
|
|
.chart {
|
|
position: absolute;
|
|
left: 310px;
|
|
bottom: 23px;
|
|
width: 600px;
|
|
height: 452px;
|
|
background: url(../assets/img/liquid/chart.png) no-repeat;
|
|
background-size: 600px 452px;
|
|
.liquid_column {
|
|
position: absolute;
|
|
left: 96px;
|
|
bottom: 13px;
|
|
width: 491px;
|
|
height: var(--height);
|
|
border-radius: 0px 12px 12px 0px;
|
|
background: linear-gradient(0deg, #06518b 0%, rgba(6, 81, 139, 0.7) 58%);
|
|
.indicator {
|
|
position: absolute;
|
|
top: -10px;
|
|
right: -50px;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
letter-spacing: 0.06em;
|
|
|
|
color: #06518b;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|