加液静态页面

src/components/a.vue

@@ -0,0 +1,310 @@
+<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="4"
+          readonly
+          @click.stop="numberKeyboardShow = true"
+          class="add_liquid_input"
+        />
+        <p class="title">设置加液</p>
+      </div>
+      <div
+        :class="
+          operatorStore.replenishingFluidsWorkState
+            ? 'btn mr active style-btn'
+            : 'btn mr '
+        "
+        v-if="tabType == 1"
+        @click="stopAdd"
+      >
+        停止加液
+      </div>
+      <div
+        :class="
+          operatorStore.replenishingFluidsWorkState
+            ? 'btn'
+            : 'btn active style-btn'
+        "
+        v-if="tabType == 1"
+        @click="startAdd"
+      >
+        开始加液
+      </div>
+      <div
+        :class="
+          operatorStore.drainingWorkState
+            ? 'btn mr active style-btn'
+            : 'btn mr '
+        "
+        v-if="tabType == 2"
+        @click="stopPop"
+      >
+        停止排液
+      </div>
+      <div
+        :class="
+          operatorStore.drainingWorkState ? 'btn' : 'btn active style-btn'
+        "
+        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="4"
+      @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(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;
+  background: #ffffff;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  // .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>