add liquid

2 years ago · 7f38fb6b26
5 changed files with 307 additions and 3 deletions
--- a/src/assets/img/liquid/chart.png
+++ b/src/assets/img/liquid/chart.png
--- a/src/assets/img/liquid/oper.png
+++ b/src/assets/img/liquid/oper.png
--- 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>
--- a/src/components/dialogs/LiquidModal.vue
+++ 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>
--- 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">