UI 更新

src/assets/icon/slider-filled-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="28" height="28" viewBox="0 0 28 28"><g><g><ellipse cx="14" cy="14" rx="14" ry="14" fill="#FFFFFF" fill-opacity="1"/></g><g transform="matrix(0,-1,1,0,-14,28)"><path d="M9.8,21L8.4,21L8.4,22.4L7,22.4L7,25.2L8.4,25.2L8.4,35L9.8,35L9.8,25.2L11.2,25.2L11.2,22.4L9.8,22.4L9.8,21ZM14.7,21L13.3,21L13.3,30.8L11.9,30.8L11.9,33.6L13.3,33.6L13.3,35L14.7,35L14.7,33.6L16.1,33.6L16.1,30.8L14.7,30.8L14.7,21ZM21,22.4L19.6,22.4L19.6,21L18.2,21L18.2,22.4L16.8,22.4L16.8,25.2L18.2,25.2L18.2,35L19.6,35L19.6,25.2L21,25.2L21,22.4Z" fill="#06518B" fill-opacity="1"/></g></g></svg>

src/components/dialogs/Modal.vue

@@ -0,0 +1,115 @@
+<template>
+  <div v-if="enable" class="del_pre_modal_container">
+    <div class="modal_content">
+      <div style="flex-grow: 1;height: 0;">
+        <slot></slot>
+      </div>
+      <div class="btns">
+        <div class="cancel style-btn" @click="actionOk">确定</div>
+        <div class="cancel style-btn" @click="actionCancel">取消</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+/** @var {Function} */
+const emits = defineEmits(['ok','cancel','update:enable']);
+/** @var {Object} */
+const props = defineProps({
+    enable : Boolean,
+});
+/** @var {Boolean} */
+const enable = ref(props.enable);
+// watch enable
+watch (() => props.enable, (val) => {
+    enable.value = val;
+});
+
+// action ok
+function actionOk() {
+    emits('ok');
+    enable.value = false;
+    emits('update:enable', false);
+}
+
+// action cancel
+function actionCancel() {
+    emits('cancel');
+    enable.value = false;
+    emits('update:enable', false);
+}
+</script>
+  
+  <style lang="scss" scoped>
+  .del_pre_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: 350px;
+      border-radius: 16px;
+      background: #ffffff;
+      padding: 52px 37px 55px 37px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .tips {
+        margin-top: 33px;
+        margin-bottom: 50px;
+        font-family: Source Han Sans CN;
+        font-size: 21px;
+        font-weight: normal;
+        letter-spacing: 0.04em;
+        color: #000000;
+        .red {
+          color: #fa1c1c;
+        }
+      }
+      .btns {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 362px;
+        .cancel {
+          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;
+        }
+        .ok {
+          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>
+  

src/components/info/EnvironmentInfo.vue

@@ -141,14 +141,17 @@ const getSaturation = () => {
 <style lang="scss" scoped>
 .environment_container {
   width: 353px;
-  height: 225px;
+  height: 100%;
   box-sizing: border-box;
   overflow: hidden;
   border-radius: 17.5px;
+  display: flex;
+  flex-direction: column;
   .top_title {
     padding: 15px 16px;
     display: flex;
     align-items: center;
+    height: 90px;
     .title {
       font-family: Source Han Sans CN;
       font-size: 24px;
@@ -161,6 +164,8 @@ const getSaturation = () => {
   .content {
     display: grid;
     grid-template-rows: repeat(4, 1fr);
+    height: 0;
+    flex-grow: 1;
     .line {
       padding: 11px 13px 11px 26px;
       width: 353px;

src/components/info/ExtDeviceInfo.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="environment_container">
+    <div class="top_title">
+      <img src="@/assets/icon/slider-filled-circle.svg" alt="icon" />
+      <p class="title">消毒除湿/降解</p>
+    </div>
+    <div class="content">
+      <div class="line">
+        <p class="title">消毒前除湿</p>
+        <p class="value dark" @click="dehumidifyBeforeDisinfectionThresholdValueEditEnable=true"
+        >{{dehumidifyBeforeDisinfectionThreshold}}%</p>
+        <div class="act-btn" 
+          :class="{disabled:!externalDeviceConnected,danger:!dehumidifyBeforeDisinfectionEnable}"
+          @click="actionToggleDehumidifyBeforeDisinfectionEnable"
+        >{{ dehumidifyBeforeDisinfectionEnable ? '使能' : '未使能'}}</div>
+      </div>
+      <div class="line">
+        <p class="title">消毒后除湿</p>
+        <p class="value light" @click="dehumidifyAfterDisinfectionThresholdValueEditEnable=true"
+        >{{dehumidifyAfterDisinfectionThreshold}}%</p>
+        <div class="act-btn" 
+          :class="{disabled:!externalDeviceConnected,danger:!dehumidifyAfterDisinfectionEnable}"
+          @click="actionToggleDehumidifyAfterDisinfectionEnable"
+        >{{ dehumidifyAfterDisinfectionEnable ? '使能' : '未使能' }}</div>
+      </div>
+      <div class="line">
+        <p class="title">消毒后降解</p>
+        <div class="act-btn" 
+          :class="{disabled:!externalDeviceConnected,danger:!degradeAfterDisinfectionEnable}"
+          @click="actionToggleDegradeAfterDisinfectionEnable"
+        >{{ degradeAfterDisinfectionEnable ? '使能' : '未使能' }}</div>
+      </div>
+      <div class="line">
+        <p v-if="!externalDeviceConnected" class="title" style="color:#FA1C1C">*外部未接入设备</p>
+        <div class="num"></div>
+      </div>
+    </div>
+
+    <!-- 消毒前除湿阈值 -->
+    <modal 
+      v-model:enable="dehumidifyBeforeDisinfectionThresholdValueEditEnable" 
+      @ok="actionDehumidifyBeforeDisinfectionThresholdValueChange"
+    >
+      <p>消毒前除湿</p>
+      <van-picker
+        :columns="percentageValues"
+        :show-toolbar="false"
+        visible-option-num="3"
+        option-height="42"
+        v-model="dehumidifyBeforeDisinfectionThresholdValue"
+      />
+    </modal>
+
+    <!-- 消毒后除湿阈值 -->
+    <modal 
+      v-model:enable="dehumidifyAfterDisinfectionThresholdValueEditEnable" 
+      @ok="actionDehumidifyAfterDisinfectionThresholdValueChange"
+    >
+      <p>消毒后除湿</p>
+      <van-picker
+        :columns="percentageValues"
+        :show-toolbar="false"
+        visible-option-num="3"
+        option-height="42"
+        v-model="dehumidifyAfterDisinfectionThresholdValue"
+      />
+    </modal>
+  </div>
+</template>
+<script setup>
+import { useDeviceStore } from '@/store'
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import Modal from 'cpns/dialogs/Modal.vue'
+const deviceStore = useDeviceStore()
+const {
+    // 消毒前是否需要除湿
+    dehumidifyBeforeDisinfectionEnable,
+    // 除湿阈值
+    dehumidifyBeforeDisinfectionThreshold,
+    // 消毒后是否需要除湿
+    dehumidifyAfterDisinfectionEnable,
+    // 除湿阈值
+    dehumidifyAfterDisinfectionThreshold,
+    // 消毒后是否需要降解
+    degradeAfterDisinfectionEnable,
+    // 外部设备已接入
+    externalDeviceConnected,
+} = storeToRefs(deviceStore);
+// 除湿阈值
+const percentageValues = ref([
+  { text: '10%', value: '10' },
+  { text: '20%', value: '20' },
+  { text: '30%', value: '30' },
+  { text: '40%', value: '40' },
+  { text: '50%', value: '50' },
+  { text: '60%', value: '60' },
+  { text: '70%', value: '70' },
+  { text: '80%', value: '80' },
+  { text: '90%', value: '90' },
+  { text: '100%', value: '100' },
+]);
+// 消毒前除湿阈值
+const dehumidifyBeforeDisinfectionThresholdValue = ref([dehumidifyBeforeDisinfectionThreshold.value]);
+// 是否显示除湿阈值编辑弹窗
+const dehumidifyBeforeDisinfectionThresholdValueEditEnable = ref(false);
+// 消毒后除湿阈值
+const dehumidifyAfterDisinfectionThresholdValue = ref([dehumidifyAfterDisinfectionThreshold.value]);
+// 是否显示除湿阈值编辑弹窗
+const dehumidifyAfterDisinfectionThresholdValueEditEnable = ref(false);
+
+
+// 使能/禁用消毒前除湿
+function actionToggleDehumidifyBeforeDisinfectionEnable() {
+    let status = !dehumidifyBeforeDisinfectionEnable.value;
+    deviceStore.setDehumidifyBeforeDisinfectionEnable(status);
+}
+
+// 使能/禁用消毒后除湿
+function actionToggleDehumidifyAfterDisinfectionEnable() {
+    let status = !dehumidifyAfterDisinfectionEnable.value;
+    deviceStore.setDehumidifyAfterDisinfectionEnable(status);
+}
+
+// 使能/禁用消毒后降解
+function actionToggleDegradeAfterDisinfectionEnable() {
+    let status = !degradeAfterDisinfectionEnable.value;
+    deviceStore.setDegradeAfterDisinfectionEnable(status);
+}
+
+// 消毒前除湿阈值改变
+function actionDehumidifyBeforeDisinfectionThresholdValueChange() {
+    deviceStore.setDehumidifyBeforeDisinfectionThreshold(dehumidifyBeforeDisinfectionThresholdValue.value[0]);
+}
+
+// 消毒后除湿阈值改变
+function actionDehumidifyAfterDisinfectionThresholdValueChange() {
+    deviceStore.setDehumidifyAfterDisinfectionThreshold(dehumidifyAfterDisinfectionThresholdValue.value[0]);
+}
+</script>
+  
+  <style lang="scss" scoped>
+  .environment_container {
+    width: 353px;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-radius: 17.5px;
+    display: flex;
+    flex-direction: column;
+    .top_title {
+      padding: 15px 16px;
+      display: flex;
+      align-items: center;
+      height: 90px;
+      .title {
+        font-family: Source Han Sans CN;
+        font-size: 24px;
+        font-weight: 500;
+        letter-spacing: 0.1em;
+        margin-left: 8px;
+        color: #ffffff;
+      }
+    }
+    .content {
+      display: grid;
+      grid-template-rows: repeat(4, 1fr);
+      height: 0;
+      flex-grow: 1;
+      .line {
+        padding: 11px 13px 11px 26px;
+        width: 353px;
+        // height: 56px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &:nth-child(odd) {
+          background: #1f6397;
+        }
+        .title {
+          font-family: Source Han Sans CN;
+          font-size: 16px;
+          font-weight: normal;
+          letter-spacing: 0.06em;
+          color: #ffffff;
+        }
+        .value {
+          width:69px;
+          height:35px;
+          border-radius:8px;
+          opacity:1;
+          font-family:Source Han Sans;
+          font-size:20px;
+          font-weight:bold;
+          line-height:normal;
+          letter-spacing:0.06em;
+          color:#FFFFFF;
+          text-align: center;
+          line-height: 35px;
+        }
+        .value.dark {
+          background: #06518B;
+        }
+        .value.light {
+          background: #1F6397;
+        }
+        .act-btn {
+          background: #17F179;border-radius: 8px;font-family: 思源黑体;
+          font-size: 20px;
+          font-weight: 500;
+          letter-spacing: 0.07em;
+          color: #FFFFFF;
+          height: 35px;
+          width: 92px;
+          text-align: center;
+          line-height: 35px;
+        }
+        .act-btn.danger {
+          background: #FA1C1C !important;
+        }
+        .act-btn.disabled {
+          background: #B3B3B3 !important;
+        }
+        .num {
+          font-family: Source Han Sans CN;
+          font-size: 20px;
+          font-weight: bold;
+          letter-spacing: 0.06em;
+          color: #ffffff;
+          display: flex;
+          align-items: center;
+          .unit {
+            width: 60px;
+            margin-left: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+  </style>
+  

src/pages/Home.vue

@@ -26,7 +26,7 @@
         </svg>
         <p class="text">消毒</p>
       </div>
-      <div
+      <!-- <div
         :class="
           activeTab == 2 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'
         "
@@ -51,8 +51,8 @@
           </g>
         </svg>
         <p class="text">加液</p>
-      </div>
-      <div
+      </div> -->
+      <!-- <div
         :class="
           activeTab == 3 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'
         "
@@ -77,8 +77,8 @@
           </g>
         </svg>
         <p class="text">排液</p>
-      </div>
-      <div
+      </div> -->
+      <!-- <div
         :class="
           activeTab == 8 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'
         "
@@ -106,7 +106,7 @@
           </g>
         </svg>
         <p class="text">密封测试</p>
-      </div>
+      </div> -->
       <div
         :class="
           activeTab == 7 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'

src/store/modules/device.js

@@ -30,6 +30,19 @@ export const useDeviceStore = defineStore({
       // 剩余log
       nowlog: 0,
       targetlog: 0,
+
+      // 消毒前是否需要除湿
+      dehumidifyBeforeDisinfectionEnable : false,
+      // 除湿阈值
+      dehumidifyBeforeDisinfectionThreshold : 0,
+      // 消毒后是否需要除湿
+      dehumidifyAfterDisinfectionEnable : false,
+      // 除湿阈值
+      dehumidifyAfterDisinfectionThreshold : 0,
+      // 消毒后是否需要降解
+      degradeAfterDisinfectionEnable : false,
+      // 外部设备已接入
+      externalDeviceConnected : true,
     }
   },
   // actions
@@ -122,5 +135,30 @@ export const useDeviceStore = defineStore({
       }
       this.envirHP2 = envirHP2
     },
+
+    // 设置是否需要消毒前除湿
+    setDehumidifyBeforeDisinfectionEnable( enable ) {
+      this.dehumidifyBeforeDisinfectionEnable = enable;
+    },
+
+    // 设置消毒后是否需要除湿
+    setDehumidifyAfterDisinfectionEnable( enable ) {
+      this.dehumidifyAfterDisinfectionEnable = enable;
+    },
+
+    // 设置消毒后是否需要降解
+    setDegradeAfterDisinfectionEnable( enable ) {
+      this.degradeAfterDisinfectionEnable = enable;
+    },
+
+    // 设置除湿阈值
+    setDehumidifyBeforeDisinfectionThreshold( threshold ) {
+      this.dehumidifyBeforeDisinfectionThreshold = threshold;
+    },
+    
+    // 设置除湿阈值
+    setDehumidifyAfterDisinfectionThreshold( threshold ) {
+      this.dehumidifyAfterDisinfectionThreshold = threshold;
+    },
   },
 })