sanitizing-machine/src/components/LiquidHandle.vue

<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 <= 0 ? 0 : disinfectantCapacity) / 5000) *
            427
          }px`,
        }"
      >
        <p class="indicator">
          {{ disinfectantCapacity <= 0 ? 0 : 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>