From 7f38fb6b262c7e1e2daa99f80488f3507089e742 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Mon, 14 Aug 2023 15:44:22 +0800
Subject: [PATCH] add liquid

---
 src/assets/img/liquid/chart.png        | Bin 0 -> 6211 bytes
 src/assets/img/liquid/oper.png         | Bin 0 -> 2691 bytes
 src/components/LiquidHandle.vue        | 183 ++++++++++++++++++++++++++++++++-
 src/components/dialogs/LiquidModal.vue | 124 ++++++++++++++++++++++
 src/pages/Home.vue                     |   3 +-
 5 files changed, 307 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/img/liquid/chart.png
 create mode 100644 src/assets/img/liquid/oper.png
 create mode 100644 src/components/dialogs/LiquidModal.vue

diff --git a/src/assets/img/liquid/chart.png b/src/assets/img/liquid/chart.png
new file mode 100644
index 0000000000000000000000000000000000000000..4487df122a0d3930fc07ca5bff2d7690dd7b32b2
GIT binary patch
literal 6211
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
Z8Qq?L=)_$D{Fwj%ds}CloWtI?{tPBnEgS#<

literal 0
HcmV?d00001

diff --git a/src/assets/img/liquid/oper.png b/src/assets/img/liquid/oper.png
new file mode 100644
index 0000000000000000000000000000000000000000..814f7e2ab936ace0dfbc340e44e75178c782bc70
GIT binary patch
literal 2691
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

literal 0
HcmV?d00001

diff --git a/src/components/LiquidHandle.vue b/src/components/LiquidHandle.vue
index 52ddf84..6b1fa0a 100644
--- a/src/components/LiquidHandle.vue
+++ b/src/components/LiquidHandle.vue
@@ -1,8 +1,91 @@
 <template>
-  <div class="liquid_contaienr"></div>
+  <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="btn mr" v-if="tabType == 1">暂停加液</div>
+      <div class="btn active" v-if="tabType == 1">开始加液</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></script>
+<script setup>
+import LiquidModal from './dialogs/LiquidModal.vue'
+import { useDeviceStore } from '@/store'
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+const props = defineProps({
+  tabType: {
+    type: Number,
+  },
+})
+const addLiquidVal = ref(0)
+const tipModalVisible = ref(false)
+
+const startTabLiquid = () => {
+  tipModalVisible.value = true
+}
+
+const formatter = value => {
+  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 {
@@ -11,5 +94,101 @@
   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>
diff --git a/src/components/dialogs/LiquidModal.vue b/src/components/dialogs/LiquidModal.vue
new file mode 100644
index 0000000..3c53006
--- /dev/null
+++ b/src/components/dialogs/LiquidModal.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="liquid_modal_container">
+    <div class="modal_content">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="69"
+        height="69"
+        viewBox="0 0 69 69"
+      >
+        <g>
+          <path
+            d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
+            fill="#FA1C1C"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
+      <p class="warn_info mg">
+        请<span class="red">检查</span>是否接入排出容器
+      </p>
+      <p class="warn_info">
+        并确认<span class="red">容器是否大于</span>排出液体容积
+      </p>
+      <div class="btns">
+        <div class="ok" @click="tapLiquid">确定</div>
+        <div class="cancel" @click="cancelTap">取消</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  hideTabLiquid: {
+    type: Function,
+  },
+})
+
+const tapLiquid = () => {
+  console.log('排液体')
+}
+
+const cancelTap = () => {
+  props?.hideTabLiquid()
+}
+</script>
+
+<style lang="scss" scoped>
+.liquid_modal_container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .modal_content {
+    width: 476px;
+    height: 389px;
+    border-radius: 16px;
+    background: #ffffff;
+    box-sizing: border-box;
+    padding: 52px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .warn_info {
+      font-family: Source Han Sans CN;
+      font-size: 22px;
+      font-weight: normal;
+      letter-spacing: 0.04em;
+      color: #000000;
+      .red {
+        color: #fa1c1c;
+      }
+    }
+    .mg {
+      margin-top: 34px;
+      margin-bottom: 16px;
+    }
+    .btns {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 362px;
+      margin-top: 45px;
+      .ok {
+        width: 173px;
+        height: 68px;
+        border-radius: 34px;
+        background: #06518b;
+        font-family: Source Han Sans CN;
+        font-size: 23px;
+        font-weight: 350;
+        letter-spacing: 0em;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .cancel {
+        width: 173px;
+        height: 68px;
+        border-radius: 34px;
+        background: #d8d8d8;
+        font-family: Source Han Sans CN;
+        font-size: 23px;
+        font-weight: 350;
+        letter-spacing: 0em;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 40bde25..c2dd522 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -126,7 +126,8 @@
       v-if="activeTab == 1 && !showOpertor"
       :changeShowOperator="changeShowOperator"
     />
-    <LiquidHandle v-if="[2, 3].includes(activeTab)" />
+    <LiquidHandle v-if="activeTab == 2" :tabType="1" />
+    <LiquidHandle v-if="activeTab == 3" :tabType="2" />
     <Test v-if="activeTab == 4" />
     <Setting v-if="activeTab == 5" />
     <div class="other_info">