some state change

2 years ago · 900681a626
7 changed files with 117 additions and 57 deletions
--- a/index.html
+++ b/index.html
@ -2,7 +2,10 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
    <title>消毒机</title>
  </head>
  <body>
--- a/src/components/LiquidHandle.vue
+++ b/src/components/LiquidHandle.vue
@ -42,26 +42,52 @@
        开始排液
      </div>
    </div>
-    <!-- <div class="add_liquid">
+    <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="30"
-        height="30"
-        viewBox="0 0 30 30"
+        width="29.999204635620117"
+        height="29.999876022338867"
+        viewBox="0 0 29.999204635620117 29.999876022338867"
      >
        <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"
+            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">{{ tabType == 1 ? '加液完成' : '排液完成' }}</p>
-    </div> -->
+      <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"
@ -87,7 +113,7 @@

 <script setup>
 import LiquidModal from './dialogs/LiquidModal.vue'
-import { useDeviceStore, useWebSocketStore } from '@/store'
+import { useDeviceStore, useWebSocketStore, useOperatorStore } from '@/store'
 import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import {
@ -97,6 +123,7 @@ import {
 } from '@/mock/command'

 const numberKeyboardShow = ref(false)
+const operatorStore = useOperatorStore()

 const props = defineProps({
  tabType: {
@ -247,7 +274,7 @@ const { disinfectantCapacity } = storeToRefs(deviceStore)
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0.06em;
-      color: #81fc50;
+      color: #ff9a2d;
    }
  }
  .chart {
--- a/src/components/Operator.vue
+++ b/src/components/Operator.vue
@ -49,7 +49,7 @@
        开始消毒
      </div>
      <div class="progress">
-        <p class="title">剩余时间</p>
+        <p class="title">预计剩余时间</p>
        <!-- <div class="tube">
          <div
            class="pro"
@ -62,8 +62,8 @@
        <div class="time">
          {{
            operatorStore.estimatedRemainingTimeS == 0
-              ? `${operatorStore.estimatedRemainingTimeS} S`
-              : '已结束'
+              ? '已结束'
+              : `${operatorStore.estimatedRemainingTimeS} S`
          }}
        </div>
      </div>
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@ -144,36 +144,37 @@
    <div class="other_info">
      <p>IP {{ settingStore.deviceIp }}</p>
      <p class="time">{{ nowTime }}</p>
-    </div>
-    <div class="log_out_btn" @click="handleLogout">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        fill="none"
-        version="1.1"
-        width="76"
-        height="29"
-        viewBox="0 0 76 29"
-      >
-        <g>
-          <g>
-            <path
-              d="M34.9,7.65437C36.22,8.27594,37.86,9.23781,38.7,9.89937L39.480000000000004,8.77687C38.62,8.15563,36.92,7.25375,35.66,6.6725L34.9,7.65437ZM33.86,13.18C35.12,13.78,36.74,14.72,37.54,15.36L38.3,14.24C37.46,13.62,35.84,12.74,34.6,12.18L33.86,13.18ZM34.46,23.64L35.58,24.5628C36.76,22.7,38.18,20.16,39.24,18.04L38.28,17.16C37.12,19.44,35.54,22.1,34.46,23.64ZM43.96,6.81281C44.66,7.875,45.38,9.27812,45.68,10.18L46.96,9.63875C46.66,8.75687,45.88,7.39406,45.18,6.37187L43.96,6.81281ZM39.62,10.28L39.62,11.56L44.96,11.56L44.96,16.24L40.38,16.24L40.38,17.52L44.96,17.52L44.96,22.88L38.980000000000004,22.88L38.980000000000004,24.16L52.2,24.16L52.2,22.88L46.34,22.88L46.34,17.52L51,17.52L51,16.24L46.34,16.24L46.34,11.56L51.72,11.56L51.72,10.28L39.62,10.28ZM64.2,7.65625C65,8.84,65.82,10.4,66.16,11.38L67.28,10.8C66.94,9.8,66.06,8.29844,65.25999999999999,7.155L64.2,7.65625ZM73.24000000000001,7.03437C72.72,8.19812,71.78,9.84,71.08,10.84L72.1,11.32C72.82,10.36,73.72,8.86,74.42,7.57625L73.24000000000001,7.03437ZM59,6.51281C58.42,8.35844,57.4,10.14,56.22,11.34C56.44,11.62,56.8,12.26,56.9,12.54C57.519999999999996,11.88,58.120000000000005,11.06,58.66,10.16L63.58,10.16L63.58,8.9L59.34,8.9C59.66,8.23812,59.94,7.53594,60.18,6.85406L59,6.51281ZM56.68,16.4L56.68,17.64L59.6,17.64L59.6,21.7653C59.6,22.6262,59,23.1672,58.66,23.3672C58.879999999999995,23.6478,59.22,24.1884,59.32,24.5087C59.620000000000005,24.1884,60.120000000000005,23.8678,63.44,21.9856C63.34,21.7053,63.22,21.2047,63.18,20.8441L60.84,22.0856L60.84,17.64L63.7,17.64L63.7,16.4L60.84,16.4L60.84,13.56L63.239999999999995,13.56L63.239999999999995,12.34L57.519999999999996,12.34L57.519999999999996,13.56L59.6,13.56L59.6,16.4L56.68,16.4ZM65.7,16.88L72.62,16.88L72.62,19.18L65.7,19.18L65.7,16.88ZM65.7,15.7L65.7,13.44L72.62,13.44L72.62,15.7L65.7,15.7ZM68.6,6.43125L68.6,12.2L64.48,12.2L64.48,24.7819L65.7,24.7819L65.7,20.34L72.62,20.34L72.62,23.02C72.62,23.3,72.5,23.38,72.22,23.38C71.92,23.4,70.9,23.4,69.72,23.38C69.92,23.72,70.1,24.26,70.16,24.6C71.7,24.6,72.62,24.6,73.14,24.36C73.68,24.16,73.84,23.76,73.84,23.04L73.84,12.18L72.62,12.2L69.86,12.2L69.86,6.43125L68.6,6.43125Z"
-              fill="#FFFFFF"
-              fill-opacity="1"
-            />
-          </g>
+      <div class="log_out_btn" @click="handleLogout">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          fill="none"
+          version="1.1"
+          width="76"
+          height="29"
+          viewBox="0 0 76 29"
+        >
          <g>
-            <path
-              d="M12.8863,21.99L12.8863,24.6672C12.8863,24.6954,12.888,24.7,12.911,24.7L2.21645,24.7C2.23942,24.6994,2.2411,24.696,2.2411,24.6672L2.2411,6.33278C2.2411,6.304600000000001,2.23942,6.3,2.21645,6.3L12.911,6.3C12.888,6.30058,12.8863,6.30403,12.8863,6.33278L12.8863,11.778030000000001C12.8857,12.41359,13.3876,12.92915,14.0069,12.92915C14.6262,12.92915,15.128,12.41359,15.1274,11.778030000000001L15.1274,6.33278C15.1274,5.06203,14.1637,4,12.9328,4L2.1946,4C0.963674,4,0,5.06203,0,6.33278L0,24.6672C0,25.938,0.963674,27,2.1946,27L12.9328,27C14.1637,27,15.1274,25.938,15.1274,24.6672L15.1274,21.99C15.1274,21.3549,14.6257,20.84,14.0069,20.84C13.388,20.84,12.8863,21.3549,12.8863,21.99ZM21.6038,15.8428L18.8306,12.99639Q18.4344,12.5898,18.0383,12.5898Q17.6421,12.58981,17.2459,12.99639Q16.4536,13.80956,17.2459,14.6227L18.1007,15.5L9.52474,15.5Q8.40419,15.5,8.40419,16.65Q8.40419,17.8,9.52474,17.8L18.112,17.8L17.2459,18.6889Q16.4536,19.5021,17.2459,20.3152Q17.6421,20.7218,18.0383,20.7218Q18.4344,20.7218,18.8306,20.3152L21.6038,17.469099999999997Q22,17.0625,22,16.655900000000003Q22,16.249299999999998,21.6038,15.8428Z"
-              fill-rule="evenodd"
-              fill="#FFFFFF"
-              fill-opacity="1"
-            />
+            <g>
+              <path
+                d="M34.9,7.65437C36.22,8.27594,37.86,9.23781,38.7,9.89937L39.480000000000004,8.77687C38.62,8.15563,36.92,7.25375,35.66,6.6725L34.9,7.65437ZM33.86,13.18C35.12,13.78,36.74,14.72,37.54,15.36L38.3,14.24C37.46,13.62,35.84,12.74,34.6,12.18L33.86,13.18ZM34.46,23.64L35.58,24.5628C36.76,22.7,38.18,20.16,39.24,18.04L38.28,17.16C37.12,19.44,35.54,22.1,34.46,23.64ZM43.96,6.81281C44.66,7.875,45.38,9.27812,45.68,10.18L46.96,9.63875C46.66,8.75687,45.88,7.39406,45.18,6.37187L43.96,6.81281ZM39.62,10.28L39.62,11.56L44.96,11.56L44.96,16.24L40.38,16.24L40.38,17.52L44.96,17.52L44.96,22.88L38.980000000000004,22.88L38.980000000000004,24.16L52.2,24.16L52.2,22.88L46.34,22.88L46.34,17.52L51,17.52L51,16.24L46.34,16.24L46.34,11.56L51.72,11.56L51.72,10.28L39.62,10.28ZM64.2,7.65625C65,8.84,65.82,10.4,66.16,11.38L67.28,10.8C66.94,9.8,66.06,8.29844,65.25999999999999,7.155L64.2,7.65625ZM73.24000000000001,7.03437C72.72,8.19812,71.78,9.84,71.08,10.84L72.1,11.32C72.82,10.36,73.72,8.86,74.42,7.57625L73.24000000000001,7.03437ZM59,6.51281C58.42,8.35844,57.4,10.14,56.22,11.34C56.44,11.62,56.8,12.26,56.9,12.54C57.519999999999996,11.88,58.120000000000005,11.06,58.66,10.16L63.58,10.16L63.58,8.9L59.34,8.9C59.66,8.23812,59.94,7.53594,60.18,6.85406L59,6.51281ZM56.68,16.4L56.68,17.64L59.6,17.64L59.6,21.7653C59.6,22.6262,59,23.1672,58.66,23.3672C58.879999999999995,23.6478,59.22,24.1884,59.32,24.5087C59.620000000000005,24.1884,60.120000000000005,23.8678,63.44,21.9856C63.34,21.7053,63.22,21.2047,63.18,20.8441L60.84,22.0856L60.84,17.64L63.7,17.64L63.7,16.4L60.84,16.4L60.84,13.56L63.239999999999995,13.56L63.239999999999995,12.34L57.519999999999996,12.34L57.519999999999996,13.56L59.6,13.56L59.6,16.4L56.68,16.4ZM65.7,16.88L72.62,16.88L72.62,19.18L65.7,19.18L65.7,16.88ZM65.7,15.7L65.7,13.44L72.62,13.44L72.62,15.7L65.7,15.7ZM68.6,6.43125L68.6,12.2L64.48,12.2L64.48,24.7819L65.7,24.7819L65.7,20.34L72.62,20.34L72.62,23.02C72.62,23.3,72.5,23.38,72.22,23.38C71.92,23.4,70.9,23.4,69.72,23.38C69.92,23.72,70.1,24.26,70.16,24.6C71.7,24.6,72.62,24.6,73.14,24.36C73.68,24.16,73.84,23.76,73.84,23.04L73.84,12.18L72.62,12.2L69.86,12.2L69.86,6.43125L68.6,6.43125Z"
+                fill="#FFFFFF"
+                fill-opacity="1"
+              />
+            </g>
+            <g>
+              <path
+                d="M12.8863,21.99L12.8863,24.6672C12.8863,24.6954,12.888,24.7,12.911,24.7L2.21645,24.7C2.23942,24.6994,2.2411,24.696,2.2411,24.6672L2.2411,6.33278C2.2411,6.304600000000001,2.23942,6.3,2.21645,6.3L12.911,6.3C12.888,6.30058,12.8863,6.30403,12.8863,6.33278L12.8863,11.778030000000001C12.8857,12.41359,13.3876,12.92915,14.0069,12.92915C14.6262,12.92915,15.128,12.41359,15.1274,11.778030000000001L15.1274,6.33278C15.1274,5.06203,14.1637,4,12.9328,4L2.1946,4C0.963674,4,0,5.06203,0,6.33278L0,24.6672C0,25.938,0.963674,27,2.1946,27L12.9328,27C14.1637,27,15.1274,25.938,15.1274,24.6672L15.1274,21.99C15.1274,21.3549,14.6257,20.84,14.0069,20.84C13.388,20.84,12.8863,21.3549,12.8863,21.99ZM21.6038,15.8428L18.8306,12.99639Q18.4344,12.5898,18.0383,12.5898Q17.6421,12.58981,17.2459,12.99639Q16.4536,13.80956,17.2459,14.6227L18.1007,15.5L9.52474,15.5Q8.40419,15.5,8.40419,16.65Q8.40419,17.8,9.52474,17.8L18.112,17.8L17.2459,18.6889Q16.4536,19.5021,17.2459,20.3152Q17.6421,20.7218,18.0383,20.7218Q18.4344,20.7218,18.8306,20.3152L21.6038,17.469099999999997Q22,17.0625,22,16.655900000000003Q22,16.249299999999998,21.6038,15.8428Z"
+                fill-rule="evenodd"
+                fill="#FFFFFF"
+                fill-opacity="1"
+              />
+            </g>
          </g>
-        </g>
-      </svg>
+        </svg>
+      </div>
    </div>
+
    <!-- <van-overlay :show="settingStore.initLoading">
      <div class="wrapper" @click.stop>
        <div class="block">
@ -347,24 +348,25 @@ const handleLogout = () => {
    letter-spacing: 0.06em;
    color: #ffffff;
    padding: 0 30px;
+    position: relative;
+    .log_out_btn {
+      width: 123px;
+      height: 45px;
+      border-radius: 23px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #064b81;
+      right: 276px;
+      top: -17px;
+      position: absolute;
+      z-index: 1;
+    }
    .time {
      width: 156px;
      white-space: nowrap;
    }
  }
-  .log_out_btn {
-    width: 123px;
-    height: 45px;
-    border-radius: 23px;
-    opacity: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #064b81;
-    right: 248px;
-    bottom: 22px;
-    position: absolute;
-  }
 }
 .wrapper {
  display: flex;
--- a/src/store/modules/operator.js
+++ b/src/store/modules/operator.js
@ -8,10 +8,18 @@ export const useOperatorStore = defineStore({
      disinfectStatus: false,
      estimatedRemainingTimeS: 0,
      disinfection_id: '',
+      drainingWorkState: 0,
+      replenishingFluidsWorkState: 0,
    }
  },
  // actions
  actions: {
+    updateDrainingWorkState(drainingWorkState) {
+      this.drainingWorkState = drainingWorkState
+    },
+    updateReplenishingFluidsWorkState(replenishingFluidsWorkState) {
+      this.replenishingFluidsWorkState = replenishingFluidsWorkState
+    },
    updateDisinfectionId(disinfection_id) {
      this.disinfection_id = disinfection_id
    },
--- a/src/store/modules/websocket.js
+++ b/src/store/modules/websocket.js
@ -41,12 +41,14 @@ export const useWebSocketStore = defineStore({
            // 初始化完毕
            const { state } = JSON.parse(ev.data)
            const {
-              workState,
+              disinfectionWorkState,
              estimatedRemainingTimeS,
              disinfection_id,
              isLogin,
              permissionLevel,
              sensor_data,
+              drainingWorkState,
+              replenishingFluidsWorkState,
            } = state || {}
            if (!isLogin) {
              window.location.href = 'http://127.0.0.1/#/login'
@ -71,7 +73,10 @@ export const useWebSocketStore = defineStore({
              waterImmersionSensor1,
              waterImmersionSensor2,
            } = sensor_data
-
+            operatorStore.updateDrainingWorkState(drainingWorkState)
+            operatorStore.updateReplenishingFluidsWorkState(
+              replenishingFluidsWorkState,
+            )
            testStore.updateWaterImmersionSensor1(
              waterImmersionSensor1 == 0 ? false : true,
            )
@ -98,7 +103,9 @@ export const useWebSocketStore = defineStore({

            userStore.updatePermission(permissionLevel)
            settingStore.updateInitLoading()
-            operatorStore.updateDisinfectStatus(workState == 0 ? false : true)
+            operatorStore.updateDisinfectStatus(
+              disinfectionWorkState == 0 ? false : true,
+            )
            operatorStore.updateEstimatedRemainingTimeS(estimatedRemainingTimeS)
            operatorStore.updateDisinfectionId(disinfection_id)
            // 将sensor_data中的数据更新到store中
--- a/src/style.scss
+++ b/src/style.scss
@ -10,9 +10,22 @@ body {
  user-select: none; /* Standard */
 }

+body {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 .van-cell {
  .van-field__control {
    text-align: center;
  }
  background: none;
 }
+
+.key_wrap {
+  z-index: 999;
+}