消毒机前端代码
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.
 
 
 
 

260 lines
6.6 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"
class="add_liquid_input"
:maxlength="5"
:formatter="formatter"
/>
<p class="title">设置加液</p>
</div>
<div
:class="isAddLiquidStatus ? 'btn mr active' : 'btn mr '"
v-if="tabType == 1"
@click="stopAdd"
>
停止加液
</div>
<div
:class="isAddLiquidStatus ? 'btn' : 'btn active'"
v-if="tabType == 1"
@click="startAdd"
>
开始加液
</div>
<div
:class="isPopLiquidStatus ? 'btn mr active' : 'btn mr '"
v-if="tabType == 2"
@click="stopPop"
>
停止排液
</div>
<div
:class="isPopLiquidStatus ? 'btn' : 'btn active'"
v-if="tabType == 2"
@click="startTabLiquid"
>
开始排液
</div>
</div>
<!-- <div class="add_liquid">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="30"
height="30"
viewBox="0 0 30 30"
>
<g>
<path
d="M15.0171,0Q18.13,0,20.8495,1.1748Q23.569,2.3496,25.6043,4.39274Q27.6397,6.43587,28.8198,9.16005Q30,11.8842,30,14.983Q30,18.0817,28.8198,20.8229Q27.6397,23.5641,25.6043,25.6073Q23.569,27.6504,20.8495,28.8252Q18.13,30,15.0171,30Q11.9042,30,9.16762,28.8252Q6.43101,27.6504,4.39567,25.6073Q2.36032,23.5641,1.18016,20.8229Q-0.00000305839,18.0817,0,14.983Q0.00000305839,11.8842,1.18016,9.16004Q2.36032,6.43587,4.39567,4.39274Q6.43102,2.3496,9.16762,1.1748Q11.9042,-5.07417e-7,15.0171,0ZM24.4242,12.1226Q25.0399,11.5096,25.0741,10.6073Q25.1083,9.70488,24.4926,9.09194Q23.8769,8.479,22.9875,8.49603Q22.0981,8.51305,21.4823,9.12599L11.8358,18.7287L8.51767,15.4597Q7.90194,14.8468,7.01254,14.8297Q6.12315,14.8127,5.50741,15.4257Q4.89168,16.0386,4.87457,16.8729Q4.85747,17.7072,5.4732,18.3201L10.2281,23.0874Q10.8438,23.7003,11.8358,23.6833Q12.8278,23.6663,13.4436,23.0533L13.3067,23.1896L24.4242,12.1226Z"
fill="#81FC50"
fill-opacity="1"
/>
</g>
</svg>
<p class="text">{{ tabType == 1 ? '加液完成' : '排液完成' }}</p>
</div> -->
<div class="chart">
<div
class="liquid_column"
:style="{
'--height': `${(disinfectantCapacity / 500) * 427}px`,
}"
></div>
</div>
<LiquidModal
v-if="tabType == 2 && tipModalVisible"
:hideTabLiquid="hideTabLiquid"
:startPopFlag="startPopFlag"
:isPopLiquidStatus="isPopLiquidStatus"
/>
</div>
</template>
<script setup>
import LiquidModal from './dialogs/LiquidModal.vue'
import { useDeviceStore, useWebSocketStore } from '@/store'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import {
startReplenishingFluidsJSON,
stopReplenishingFluidsJSON,
stopDrainingJSON,
} from '@/mock/command'
const props = defineProps({
tabType: {
type: Number,
},
})
const addLiquidVal = ref(0)
const tipModalVisible = ref(false)
const webSocketStore = useWebSocketStore()
const isAddLiquidStatus = ref(false)
const isPopLiquidStatus = ref(false)
const startAdd = () => {
if (!isAddLiquidStatus.value) {
isAddLiquidStatus.value = true
webSocketStore.sendCommandMsg(startReplenishingFluidsJSON)
}
}
const stopAdd = () => {
if (isAddLiquidStatus.value) {
isAddLiquidStatus.value = false
webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON)
}
}
const stopPop = () => {
if (isPopLiquidStatus.value) {
webSocketStore.sendCommandMsg(stopDrainingJSON)
isPopLiquidStatus.value = false
}
}
const startPopFlag = () => {
isPopLiquidStatus.value = true
}
const startTabLiquid = () => {
if (!isPopLiquidStatus.value) {
tipModalVisible.value = true
}
}
const formatter = value => {
if (value > 500) {
return '500/g'
}
if (value != 0) {
var newVal = value.replace(/\b(0+)/gi, '')
return newVal + '/g'
}
return '0/g'
}
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 {
width: 40px;
height: 20px;
position: absolute;
left: 113px;
top: 11px;
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: #81fc50;
}
}
.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%);
}
}
}
</style>