|
|
<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="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" /> </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, } 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 startAdd = () => { isAddLiquidStatus.value = true webSocketStore.sendCommandMsg(startReplenishingFluidsJSON) }
const stopAdd = () => { isAddLiquidStatus.value = false webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON) }
const startTabLiquid = () => { 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>
|