|
|
<template> <div class="liquid_contaienr"> <div class="left_container"> <p class="status"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="155" height="38" viewBox="0 0 155 38" > <g> <g> <path d="M60.872,11.72L60.872,32.0337L62.744,32.0337L62.744,30.102L67.788,30.102L67.788,31.8249L69.738,31.8249L69.738,11.72L60.872,11.72ZM62.744,28.23L62.744,13.618L67.788,13.618L67.788,28.23L62.744,28.23ZM51.07,8.82425L51.044,13.436L47.378,13.436L47.378,15.334L50.992,15.334C50.81,21.886,50.004,27.658,46.728,31.09C47.222,31.402,47.924,32,48.236,32.4461C51.746,28.62,52.656,22.38,52.89,15.334L56.842,15.334C56.634,25.344,56.4,28.906,55.854,29.66C55.62,29.998,55.36,30.102,54.97,30.076C54.502,30.076,53.384,30.076,52.162,29.972C52.5,30.518,52.682,31.35,52.734,31.922C53.903999999999996,32,55.1,32.0264,55.828,31.922C56.582,31.818,57.076,31.584,57.544,30.908C58.35,29.79,58.532,25.994,58.74,14.424C58.74,14.138,58.74,13.436,58.74,13.436L52.942,13.436L52.994,8.82425L51.07,8.82425ZM90.25200000000001,19.9636C91.162,20.8224,92.202,22.0452,92.644,22.8781L93.71000000000001,21.9412C93.268,21.1348,92.22800000000001,19.9636,91.292,19.1828L90.25200000000001,19.9636ZM75.926,10.3912C77.226,11.434,78.838,12.9684,79.566,13.9832L80.918,12.734C80.112,11.746,78.52600000000001,10.2607,77.2,9.26909L75.926,10.3912ZM74.652,17.3913C76.004,18.3277,77.668,19.7325,78.47399999999999,20.6693L79.72200000000001,19.3685C78.89,18.4317,77.226,17.1308,75.874,16.2204L74.652,17.3913ZM75.19800000000001,30.6074L76.888,31.6742C77.95400000000001,29.3326,79.176,26.1845,80.086,23.5569L78.55199999999999,22.4905C77.564,25.3261,76.186,28.6302,75.19800000000001,30.6074ZM88.146,8.93028C88.536,9.66072,88.926,10.5476,89.238,11.356L81.256,11.356L81.256,13.228L98.44200000000001,13.228L98.44200000000001,11.356L91.292,11.356C90.97999999999999,10.4432,90.434,9.2955,89.914,8.40825L88.146,8.93028ZM89.99199999999999,18.35L95.50399999999999,18.35C94.80199999999999,21.2128,93.606,23.6329,92.098,25.6105C90.824,23.9449,89.81,22.0192,89.108,19.9636C89.42,19.4172,89.706,18.8968,89.99199999999999,18.35ZM89.99199999999999,13.618C89.108,16.634,87.262,20.302,84.94800000000001,22.6181C85.312,22.8781,85.91,23.4765,86.22200000000001,23.8409C86.846,23.1905,87.47,22.4357,88.042,21.6292C88.822,23.5809,89.81,25.3761,90.97999999999999,26.9637C89.316,28.7593,87.366,30.0862,85.286,30.971C85.676,31.3094,86.17,31.9858,86.43,32.4282C88.536,31.4654,90.46000000000001,30.1382,92.124,28.3689C93.632,30.0602,95.374,31.4134,97.35,32.3762C97.662,31.9078,98.23400000000001,31.1794,98.65,30.841C96.622,29.9822,94.828,28.6809,93.294,27.0417C95.29599999999999,24.4917,96.804,21.2388,97.61,17.102L96.414,16.66L96.102,16.764L90.74600000000001,16.764C91.162,15.854,91.5,14.944,91.812,14.06L89.99199999999999,13.618ZM84.714,13.566C83.804,16.4,81.932,19.8856,79.826,22.1237C80.21600000000001,22.4097,80.84,22.9821,81.126,23.3465C81.77600000000001,22.6441,82.426,21.8112,83.024,20.9264L83.024,32.4022L84.76599999999999,32.4022L84.76599999999999,18.038C85.468,16.712,86.066,15.36,86.56,14.086L84.714,13.566ZM107.02199999999999,16.14L107.02199999999999,17.934L121.166,17.934L121.166,16.14L107.02199999999999,16.14ZM102.576,20.976L102.576,22.796L109.57,22.796C109.25800000000001,27.424,108.19200000000001,29.686,102.26400000000001,30.83C102.628,31.22,103.148,31.948,103.304,32.4461C109.804,31.064,111.182,28.23,111.572,22.796L116.148,22.796L116.148,29.322C116.148,31.402,116.746,32,119.164,32C119.658,32,122.622,32,123.142,32C125.222,32,125.768,31.09,126.002,27.528C125.482,27.372,124.65,27.06,124.208,26.748C124.13,29.738,123.974,30.206,122.986,30.206C122.31,30.206,119.866,30.206,119.346,30.206C118.28,30.206,118.098,30.076,118.098,29.322L118.098,22.796L125.638,22.796L125.638,20.976L102.576,20.976ZM112.066,8.82547C112.534,9.63431,113.028,10.6256,113.366,11.486L103.25200000000001,11.486L103.25200000000001,17.258L105.202,17.258L105.202,13.358L122.908,13.358L122.908,17.258L124.936,17.258L124.936,11.486L115.68,11.486C115.316,10.5212,114.64,9.21709,114.016,8.25184L112.066,8.82547ZM142.824,8.51184C142.824,9.99709,142.876,11.4827,142.954,12.916L132.00799999999998,12.916L132.00799999999998,20.222C132.00799999999998,23.602,131.774,28.1,129.61599999999999,31.298C130.084,31.532,130.916,32.208,131.25400000000002,32.6021C133.64600000000002,29.166,134.03 fill="#81FC50" fill-opacity="1" /> </g> <g> <path d="M15.0171,4Q18.13,4,20.8495,5.1748Q23.569,6.349600000000001,25.6043,8.39274Q27.6397,10.435870000000001,28.8198,13.16005Q30,15.8842,30,18.983Q30,22.0817,28.8198,24.8229Q27.6397,27.5641,25.6043,29.6073Q23.569,31.6504,20.8495,32.825199999999995Q18.13,34,15.0171,34Q11.9042,34,9.16762,32.825199999999995Q6.43101,31.6504,4.39567,29.6073Q2.36032,27.5641,1.18016,24.8229Q-0.00000305839,22.0817,0,18.983Q0.00000305839,15.8842,1.18016,13.16004Q2.36032,10.435870000000001,4.39567,8.39274Q6.43102,6.349600000000001,9.16762,5.1748Q11.9042,3.999999492583,15.0171,4ZM24.4242,16.1226Q25.0399,15.5096,25.0741,14.6073Q25.1083,13.70488,24.4926,13.09194Q23.8769,12.479,22.9875,12.49603Q22.0981,12.51305,21.4823,13.12599L11.8358,22.7287L8.51767,19.459699999999998Q7.90194,18.8468,7.01254,18.829700000000003Q6.12315,18.8127,5.50741,19.4257Q4.89168,20.0386,4.87457,20.8729Q4.85747,21.7072,5.4732,22.3201L10.2281,27.0874Q10.8438,27.7003,11.8358,27.6833Q12.8278,27.6663,13.4436,27.0533L13.3067,27.1896L24.4242,16.1226Z" fill="#81FC50" fill-opacity="1" /> </g> </g> </svg> </p> <div class="vessel"> <div class="liquid_column" :style="{ '--height': `${ ((disinfectantCapacity <= 0 ? 0 : disinfectantCapacity) / 5000) * 472 }px`,
}" > <div class="indicator"> 当前剩余 <p>{{ disinfectantCapacity <= 0 ? 0 : disinfectantCapacity }}g</p> </div> </div> </div> </div> <div class="right_container"> <div class="add_liquid_wrap"></div> <img class="btn mb" :src="StartLiquid" alt="" /> <img class="btn" :src="StartLiquidPause" alt="" /> </div> <LiquidModal v-if="tabType == 2 && tipModalVisible" :hideTabLiquid="hideTabLiquid" /> <van-number-keyboard v-model="addLiquidVal" :show="numberKeyboardShow" :maxlength="4" @blur="numberKeyboardShow = false" /> </div></template>
<script setup>import StartLiquid from '@/assets/img/liquid/1.png'import StartLiquidPause from '@/assets/img/liquid/2.png'import StopLiquid from '@/assets/img/liquid/3.png'import StopLiquidPause from '@/assets/img/liquid/4.png'
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(2000)const tipModalVisible = ref(false)const webSocketStore = useWebSocketStore()
const isPopLiquidStatus = ref(false)
const startAdd = () => { if (!(operatorStore.replenishingFluidsWorkState == 1)) { console.log(startReplenishingFluidsJSON(parseInt(addLiquidVal.value))) webSocketStore.sendCommandMsg( startReplenishingFluidsJSON(parseInt(addLiquidVal.value)), ) }}
const stopAdd = () => { if (operatorStore.replenishingFluidsWorkState == 1) { webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON) }}
const stopPop = () => { if (operatorStore.drainingWorkState == 1) { webSocketStore.sendCommandMsg(stopDrainingJSON) }}
const startTabLiquid = () => { if (!(operatorStore.drainingWorkState == 1)) { tipModalVisible.value = true }}
const hideTabLiquid = () => { tipModalVisible.value = false}
const deviceStore = useDeviceStore()
const { disinfectantCapacity } = storeToRefs(deviceStore)</script>
<style lang="scss" scoped>.liquid_contaienr { margin-bottom: 19px; height: 580px; box-sizing: border-box; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; .left_container { width: 766px; height: 580px; border-radius: 16px; background: #ffffff; box-sizing: border-box; overflow: hidden; position: relative; .status { position: absolute; left: 116px; top: 36px; } .vessel { position: absolute; width: 446px; height: 472px; left: 34px; bottom: 23px; background: url(../assets/img/liquid/chart.png) no-repeat; background-size: 100% 100%; .liquid_column { position: absolute; background: linear-gradient(270deg, #91cefb, #3fafff, #91cefb); height: var(--height); box-sizing: border-box; border-radius: 3px 3px 20px 20px; width: 300px; right: 9px; bottom: 9px; .indicator { position: absolute; top: -16px; right: -260px; width: 220px; font-family: Source Han Sans CN; font-size: 24px; font-weight: bold; line-height: normal; letter-spacing: 0.04em; color: #06518b; display: flex; align-items: center; p { font-family: Source Han Sans CN; font-size: 26px; font-weight: 900; line-height: normal; letter-spacing: 0em; color: #06518b; margin-left: 9px; } } } } } .right_container { width: 424px; height: 580px; border-radius: 16px; box-sizing: border-box; overflow: hidden; background: #ffffff; padding: 32px 42px 45px 42px; .btn { width: 340px; height: 108px; } .mb { margin-bottom: 18px; } .add_liquid_wrap { position: relative; width: 340px; height: 221px; background-size: 100% 100%; margin-bottom: 41px; background: url(../assets/img/liquid/form.png); } }}</style>
|
