disinfection_high_front_end/src/components/LiquidHandle.vue

<template>
  <div class="liquid_contaienr">
    <div class="left_container">
      <p class="status">
        <svg
          v-if="operatorStore.replenishingFluidsWorkState == 1 && tabType == 1"
          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="M50.888,17.076L50.888,29.348L47.352,29.348L47.352,31.246L70.7,31.246L70.7,29.348L60.69,29.348L60.69,21.158L68.828,21.158L68.828,19.26L60.69,19.26L60.69,12.318L69.842,12.318L69.842,10.394L48.34,10.394L48.34,12.318L58.635999999999996,12.318L58.635999999999996,29.348L52.89,29.348L52.89,17.076L50.888,17.076ZM83.726,8.48584C83.362,9.81509,82.894,11.1968,82.348,12.526L75.19800000000001,12.526L75.19800000000001,14.398L81.49000000000001,14.398C79.826,17.726,77.538,20.82,74.548,22.9C74.86,23.342,75.354,24.174,75.562,24.694C76.654,23.914,77.668,23.03,78.578,22.068L78.578,32.312L80.52799999999999,32.312L80.52799999999999,19.754C81.75,18.09,82.816,16.27,83.7,14.398L97.97399999999999,14.398L97.97399999999999,12.526L84.506,12.526C84.97399999999999,11.3532,85.39,10.1543,85.75399999999999,8.98106L83.726,8.48584ZM89.108,15.75L89.108,20.768L83.25800000000001,20.768L83.25800000000001,22.588L89.108,22.588L89.108,29.972L82.218,29.972L82.218,31.792L97.94800000000001,31.792L97.94800000000001,29.972L91.05799999999999,29.972L91.05799999999999,22.588L96.96000000000001,22.588L96.96000000000001,20.768L91.05799999999999,20.768L91.05799999999999,15.75L89.108,15.75ZM115.992,11.72L115.992,32.0337L117.864,32.0337L117.864,30.102L122.908,30.102L122.908,31.8249L124.858,31.8249L124.858,11.72L115.992,11.72ZM117.864,28.23L117.864,13.618L122.908,13.618L122.908,28.23L117.864,28.23ZM106.19,8.82425L106.164,13.436L102.49799999999999,13.436L102.49799999999999,15.334L106.112,15.334C105.93,21.886,105.124,27.658,101.848,31.09C102.342,31.402,103.044,32,103.356,32.4461C106.866,28.62,107.77600000000001,22.38,108.00999999999999,15.334L111.962,15.334C111.754,25.344,111.52,28.906,110.974,29.66C110.74,29.998,110.48,30.102,110.09,30.076C109.622,30.076,108.50399999999999,30.076,107.282,29.972C107.62,30.518,107.80199999999999,31.35,107.854,31.922C109.024,32,110.22,32.0264,110.948,31.922C111.702,31.818,112.196,31.584,112.664,30.908C113.47,29.79,113.652,25.994,113.86,14.424C113.86,14.138,113.86,13.436,113.86,13.436L108.062,13.436L108.114,8.82425L106.19,8.82425ZM145.372,19.9636C146.28199999999998,20.8224,147.322,22.0452,147.764,22.8781L148.82999999999998,21.9412C148.388,21.1348,147.348,19.9636,146.412,19.1828L145.372,19.9636ZM131.046,10.3912C132.346,11.434,133.958,12.9684,134.686,13.9832L136.038,12.734C135.232,11.746,133.64600000000002,10.2607,132.32,9.26909L131.046,10.3912ZM129.772,17.3913C131.124,18.3277,132.788,19.7325,133.594,20.6693L134.84199999999998,19.3685C134.01,18.4317,132.346,17.1308,130.994,16.2204L129.772,17.3913ZM130.31799999999998,30.6074L132.00799999999998,31.6742C133.074,29.3326,134.296,26.1845,135.20600000000002,23.5569L133.672,22.4905C132.684,25.3261,131.30599999999998,28.6302,130.31799999999998,30.6074ZM143.26600000000002,8.93028C143.656,9.66072,144.046,10.5476,144.358,11.356L136.376,11.356L136.376,13.228L153.562,13.228L153.562,11.356L146.412,11.356C146.1,10.4432,145.554,9.2955,145.034,8.40825L143.26600000000002,8.93028ZM145.112,18.35L150.624,18.35C149.922,21.2128,148.726,23.6329,147.21800000000002,25.6105C145.94400000000002,23.9449,144.93,22.0192,144.228,19.9636C144.54000000000002,19.4172,144.826,18.8968,145.112,18.35ZM145.112,13.618C144.228,16.634,142.382,20.302,140.06799999999998,22.6181C140.43200000000002,22.8781,141.03,23.4765,141.34199999999998,23.8409C141.966,23.1905,142.59,22.4357,143.162,21.6292C143.942,23.5809,144.93,25.3761,146.1,26.9637C144.436,28.7593,142.486,30.0862,140.406,30.971C140.796,31.3094,141.29000000000002,31.9858,141.55,32.4282C143.656,31.4654,145.57999999999998,30.1382,147.244,28.3689C148.752,30.0602,150.494,31.4134,152.47,32.3762C152.78199999999998,31.9078,153.35399999999998,31.1794,153.76999999999998,30.841C151.74200000000002,29.9822,149.94799999999998,28.6809,148.414,27.0417C150.416,24.4917,151.924,21.2388,152.73000000000002,17.102L151.534,16.66L151.22199999999998,16.764L145.86599999999999,16.764C146.28199999999998,15.854,146.62,14.944,146.93200000000002,14.06L145.112,13.618ZM139.834,13.566C138.924,16.4,137.05200000000002,19.8856,134.946,22.1237C135.336,22.4097,135.95999999999998,22.9821,136.24599999999998,23.3465
                fill="#FA1C1C"
                fill-opacity="1"
              />
            </g>
            <g>
              <path
                d="M15.017,4Q18.1087,4,20.8437,5.17347Q23.5787,6.34694,25.6172,8.38776Q27.6557,10.42857,28.8279,13.16667Q30,15.9048,30,19Q30,22.1293,28.8279,24.8503Q27.6557,27.5714,25.6172,29.6122Q23.5787,31.6531,20.8437,32.826499999999996Q18.1087,34,15.017,34Q11.8913,34,9.15628,32.826499999999996Q6.42129,31.6531,4.38279,29.6122Q2.34428,27.5714,1.17214,24.8503Q-3.79701e-7,22.1293,0,19Q0,15.9048,1.17214,13.16667Q2.34428,10.42857,4.38279,8.38775Q6.42129,6.34694,9.15628,5.17347Q11.8913,3.999999113026,15.017,4ZM23.5787,21.0748Q24.4621,21.0748,25.0736,20.4456Q25.6852,19.8163,25.6852,18.932000000000002Q25.6852,18.0476,25.0736,17.4354Q24.4621,16.8231,23.5787,16.8231L17.1914,16.8231L17.1914,10.42857Q17.1914,9.54422,16.5629,8.91497Q15.9343,8.28571,15.051,8.28571Q14.1676,8.28571,13.5561,8.91497Q12.9445,9.54422,12.9445,10.42857L12.9445,16.8231L6.55719,16.8231Q5.67384,16.8231,5.06229,17.4354Q4.45074,18.0476,4.45074,18.932000000000002Q4.45074,19.8163,5.06229,20.4456Q5.67384,21.0748,6.55719,21.0748L12.9445,21.0748L12.9445,27.4354Q12.9445,28.3197,13.5561,28.949Q14.1676,29.5782,15.051,29.5782Q15.9343,29.5782,16.5629,28.949Q17.1914,28.3197,17.1914,27.4354L17.1914,21.0748L23.5787,21.0748Z"
                fill="#FA1C1C"
                fill-opacity="1"
              />
            </g>
          </g>
        </svg>
        <svg
          v-if="operatorStore.drainingWorkState == 1 && tabType == 2"
          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="M50.888,17.076L50.888,29.348L47.352,29.348L47.352,31.246L70.7,31.246L70.7,29.348L60.69,29.348L60.69,21.158L68.828,21.158L68.828,19.26L60.69,19.26L60.69,12.318L69.842,12.318L69.842,10.394L48.34,10.394L48.34,12.318L58.635999999999996,12.318L58.635999999999996,29.348L52.89,29.348L52.89,17.076L50.888,17.076ZM83.726,8.48584C83.362,9.81509,82.894,11.1968,82.348,12.526L75.19800000000001,12.526L75.19800000000001,14.398L81.49000000000001,14.398C79.826,17.726,77.538,20.82,74.548,22.9C74.86,23.342,75.354,24.174,75.562,24.694C76.654,23.914,77.668,23.03,78.578,22.068L78.578,32.312L80.52799999999999,32.312L80.52799999999999,19.754C81.75,18.09,82.816,16.27,83.7,14.398L97.97399999999999,14.398L97.97399999999999,12.526L84.506,12.526C84.97399999999999,11.3532,85.39,10.1543,85.75399999999999,8.98106L83.726,8.48584ZM89.108,15.75L89.108,20.768L83.25800000000001,20.768L83.25800000000001,22.588L89.108,22.588L89.108,29.972L82.218,29.972L82.218,31.792L97.94800000000001,31.792L97.94800000000001,29.972L91.05799999999999,29.972L91.05799999999999,22.588L96.96000000000001,22.588L96.96000000000001,20.768L91.05799999999999,20.768L91.05799999999999,15.75L89.108,15.75ZM105.852,8.48584L105.852,13.748L102.55,13.748L102.55,15.568L105.852,15.568L105.852,21.288L102.212,22.25L102.602,24.174L105.852,23.212L105.852,29.972C105.852,30.31,105.72200000000001,30.414,105.384,30.44C105.124,30.44,104.11,30.44,103.044,30.414C103.27799999999999,30.908,103.538,31.714,103.616,32.208C105.22800000000001,32.208,106.21600000000001,32.156,106.866,31.844C107.49000000000001,31.558,107.72399999999999,31.038,107.72399999999999,29.972L107.72399999999999,22.666L110.818,21.73L110.584,19.962L107.72399999999999,20.768L107.72399999999999,15.568L110.532,15.568L110.532,13.748L107.72399999999999,13.748L107.72399999999999,8.48544L105.852,8.48584ZM111,23.758L111,25.552L115.42,25.552L115.42,32.392L117.318,32.392L117.318,8.66784L115.42,8.66784L115.42,12.942L111.546,12.942L111.546,14.71L115.42,14.71L115.42,18.35L111.624,18.35L111.624,20.092L115.42,20.092L115.42,23.758L111,23.758ZM119.71,8.66825L119.71,32.4184L121.582,32.4184L121.582,25.63L126.132,25.63L126.132,23.836L121.582,23.836L121.582,20.092L125.586,20.092L125.586,18.35L121.582,18.35L121.582,14.71L125.82,14.71L125.82,12.942L121.582,12.942L121.582,8.66825L119.71,8.66825ZM145.372,19.9636C146.28199999999998,20.8224,147.322,22.0452,147.764,22.8781L148.82999999999998,21.9412C148.388,21.1348,147.348,19.9636,146.412,19.1828L145.372,19.9636ZM131.046,10.3912C132.346,11.434,133.958,12.9684,134.686,13.9832L136.038,12.734C135.232,11.746,133.64600000000002,10.2607,132.32,9.26909L131.046,10.3912ZM129.772,17.3913C131.124,18.3277,132.788,19.7325,133.594,20.6693L134.84199999999998,19.3685C134.01,18.4317,132.346,17.1308,130.994,16.2204L129.772,17.3913ZM130.31799999999998,30.6074L132.00799999999998,31.6742C133.074,29.3326,134.296,26.1845,135.20600000000002,23.5569L133.672,22.4905C132.684,25.3261,131.30599999999998,28.6302,130.31799999999998,30.6074ZM143.26600000000002,8.93028C143.656,9.66072,144.046,10.5476,144.358,11.356L136.376,11.356L136.376,13.228L153.562,13.228L153.562,11.356L146.412,11.356C146.1,10.4432,145.554,9.2955,145.034,8.40825L143.26600000000002,8.93028ZM145.112,18.35L150.624,18.35C149.922,21.2128,148.726,23.6329,147.21800000000002,25.6105C145.94400000000002,23.9449,144.93,22.0192,144.228,19.9636C144.54000000000002,19.4172,144.826,18.8968,145.112,18.35ZM145.112,13.618C144.228,16.634,142.382,20.302,140.06799999999998,22.6181C140.43200000000002,22.8781,141.03,23.4765,141.34199999999998,23.8409C141.966,23.1905,142.59,22.4357,143.162,21.6292C143.942,23.5809,144.93,25.3761,146.1,26.9637C144.436,28.7593,142.486,30.0862,140.406,30.971C140.796,31.3094,141.29000000000002,31.9858,141.55,32.4282C143.656,31.4654,145.57999999999998,30.1382,147.244,28.3689C148.752,30.0602,150.494,31.4134,152.47,32.3762C152.78199999999998,31.9078,153.35399999999998,31.1794,153.76999999999998,30.841C151.74200000000002,29.9822,149.94799999999998,28.6809,148.414,27.0417C150.416,24.4917,151.924,21.2388,152.73000000000002,17.102L151.534,16.66L151.22199999999998,16
                fill="#FA1C1C"
                fill-opacity="1"
              />
            </g>
            <g>
              <path
                d="M14.9833,4Q18.0936,4,20.8361,5.18729Q23.5786,6.37458,25.602,8.39799Q27.6254,10.4214,28.8127,13.14716Q30,15.8729,30,18.9833Q30,22.0936,28.8127,24.8361Q27.6254,27.5786,25.602,29.602Q23.5786,31.6254,20.8361,32.8127Q18.0937,34,14.9833,34Q11.8729,34,9.14716,32.8127Q6.42141,31.6254,4.39799,29.602Q2.37458,27.5786,1.18729,24.8361Q0.00000436071,22.0936,0,18.9833Q-0.00000436071,15.8729,1.18729,13.14716Q2.37459,10.42141,4.39799,8.39799Q6.4214,6.37458,9.14716,5.18729Q11.8729,4.00000498367,14.9833,4ZM22.4415,21.0234Q23.4448,21.0234,24.2475,20.505Q25.0502,19.9866,25.0502,18.9498Q25.0502,17.9465,24.2475,17.4615Q23.4448,16.976599999999998,22.4415,16.976599999999998L7.65886,16.976599999999998Q6.65552,16.976599999999998,5.8194,17.4615Q4.98328,17.9465,4.98328,18.9498Q4.98328,19.9866,5.8194,20.505Q6.65552,21.0234,7.65886,21.0234L22.4415,21.0234Z"
                fill="#FA1C1C"
                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" v-if="tabType == 1">
        <van-field
          type="number"
          v-model="addLiquidVal"
          :maxlength="6"
          readonly
          :formatter="formatter"
          @click.stop="handleClickInput"
          class="add_liquid_input"
        />
      </div>
      <div class="push_liquid_wrap" v-if="tabType == 2">
        <p class="num">
          {{ disinfectantCapacity <= 0 ? 0 : disinfectantCapacity }}
        </p>
      </div>
      <img
        class="btn mb"
        v-if="!operatorStore.replenishingFluidsWorkState && tabType == 1"
        :src="StartLiquid"
        alt=""
        @click="startAdd"
      />
      <img
        class="btn mb"
        v-if="operatorStore.replenishingFluidsWorkState && tabType == 1"
        :src="StopLiquidPause"
        alt=""
      />
      <img
        class="btn"
        v-if="operatorStore.replenishingFluidsWorkState && tabType == 1"
        :src="StopLiquid"
        alt=""
        @click="stopAdd"
      />
      <img
        class="btn"
        v-if="!operatorStore.replenishingFluidsWorkState && tabType == 1"
        :src="StartLiquidPause"
        alt=""
      />
      <img
        class="btn mb"
        v-if="!operatorStore.drainingWorkState && tabType == 2"
        :src="startPush"
        @click="startTabLiquid"
        alt=""
      />
      <img
        class="btn"
        v-if="!operatorStore.drainingWorkState && tabType == 2"
        :src="StartPushPause"
        alt=""
      />
      <img
        class="btn mb"
        v-if="operatorStore.drainingWorkState && tabType == 2"
        :src="StopPushPause"
        alt=""
      />
      <img
        class="btn"
        v-if="operatorStore.drainingWorkState && tabType == 2"
        :src="StopPush"
        @click="stopPop"
        alt=""
      />
    </div>
    <LiquidModal
      v-if="tabType == 2 && tipModalVisible"
      :hideTabLiquid="hideTabLiquid"
    />
    <van-number-keyboard
      v-model="addLiquidVal"
      :show="numberKeyboardShow"
      @input="handleInput"
      :maxlength="6"
      @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 startPush from '@/assets/img/liquid/8.png'
import StartPushPause from '@/assets/img/liquid/5.png'
import StopPush from '@/assets/img/liquid/6.png'
import StopPushPause from '@/assets/img/liquid/7.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 formatter = value => {
  if (parseInt(value) > 5000) {
    return '5000'
  }
  if (parseInt(value) <= 0) {
    return '0'
  }
  return value.replace(/^0+/gi, '')
}

const startAdd = () => {
  if (!(operatorStore.replenishingFluidsWorkState == 1)) {
    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)

const isFirstClick = ref(true)

const handleInput = value => {
  if (isFirstClick.value) {
    setTimeout(() => {
      addLiquidVal.value = value + ''
    })
    isFirstClick.value = false
  }
}

const handleClickInput = () => {
  isFirstClick.value = true
  numberKeyboardShow.value = true
}
</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);
      .add_liquid_input {
        position: absolute;
        left: -9px;
        bottom: 8px;
        width: 150px;
        height: 69px;
        font-family: Source Han Sans CN;
        font-size: 42px;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0.02em;
        color: #000000;
      }
    }
    .push_liquid_wrap {
      position: relative;
      width: 340px;
      height: 239px;
      background-size: 100% 100%;
      margin-bottom: 36px;
      background: url(../assets/img/liquid/push.png) no-repeat;
      .num {
        position: absolute;
        bottom: 8px;
        left: 56px;
        width: 175px;
        height: 101px;
        font-family: Source Han Sans CN;
        font-size: 70px;
        font-weight: 900;
        line-height: normal;
        letter-spacing: 0.02em;
        color: #000000;
        text-align: center;
      }
    }
  }
}
</style>