数据变更时提交到后台

src/components/info/ExtDeviceInfo.vue

@@ -10,7 +10,7 @@
         <p class="value dark" @click="dehumidifyBeforeDisinfectionThresholdValueEditEnable=true"
         >{{dehumidifyBeforeDisinfectionThreshold}}%</p>
         <div class="act-btn" 
-          :class="{disabled:!externalDeviceConnected,danger:!dehumidifyBeforeDisinfectionEnable}"
+          :class="{disabled:!isEditable,danger:!dehumidifyBeforeDisinfectionEnable}"
           @click="actionToggleDehumidifyBeforeDisinfectionEnable"
         >{{ dehumidifyBeforeDisinfectionEnable ? '使能' : '未使能'}}</div>
       </div>
@@ -19,14 +19,14 @@
         <p class="value light" @click="dehumidifyAfterDisinfectionThresholdValueEditEnable=true"
         >{{dehumidifyAfterDisinfectionThreshold}}%</p>
         <div class="act-btn" 
-          :class="{disabled:!externalDeviceConnected,danger:!dehumidifyAfterDisinfectionEnable}"
+          :class="{disabled:!isEditable,danger:!dehumidifyAfterDisinfectionEnable}"
           @click="actionToggleDehumidifyAfterDisinfectionEnable"
         >{{ dehumidifyAfterDisinfectionEnable ? '使能' : '未使能' }}</div>
       </div>
       <div class="line">
         <p class="title">消毒后降解</p>
         <div class="act-btn" 
-          :class="{disabled:!externalDeviceConnected,danger:!degradeAfterDisinfectionEnable}"
+          :class="{disabled:!isEditable,danger:!degradeAfterDisinfectionEnable}"
           @click="actionToggleDegradeAfterDisinfectionEnable"
         >{{ degradeAfterDisinfectionEnable ? '使能' : '未使能' }}</div>
       </div>
@@ -70,9 +70,13 @@
 <script setup>
 import { useDeviceStore } from '@/store'
 import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import Modal from 'cpns/dialogs/Modal.vue'
+import { useWebSocketStore } from '../../store/modules/websocket'
+import { useOperatorStore } from '../../store/modules/operator'
+const operatorStore = useOperatorStore();
 const deviceStore = useDeviceStore()
+const websocketStore = useWebSocketStore();
 const {
     // 消毒前是否需要除湿
     dehumidifyBeforeDisinfectionEnable,
@@ -108,34 +112,42 @@ const dehumidifyBeforeDisinfectionThresholdValueEditEnable = ref(false);
 const dehumidifyAfterDisinfectionThresholdValue = ref([dehumidifyAfterDisinfectionThreshold.value]);
 // 是否显示除湿阈值编辑弹窗
 const dehumidifyAfterDisinfectionThresholdValueEditEnable = ref(false);
-
+// 是否可编辑
+const isEditable = computed(() => {
+  return [0,5].includes(operatorStore.disinfectStatus) && externalDeviceConnected.value;
+});
 
 // 使能/禁用消毒前除湿
 function actionToggleDehumidifyBeforeDisinfectionEnable() {
     let status = !dehumidifyBeforeDisinfectionEnable.value;
     deviceStore.setDehumidifyBeforeDisinfectionEnable(status);
+    websocketStore.call('setDehumidifyBeforeDisinfectionEnable', {enable:status});
 }
 
 // 使能/禁用消毒后除湿
 function actionToggleDehumidifyAfterDisinfectionEnable() {
     let status = !dehumidifyAfterDisinfectionEnable.value;
     deviceStore.setDehumidifyAfterDisinfectionEnable(status);
+    websocketStore.call('setDehumidifyAfterDisinfectionEnable', {enable:status});
 }
 
 // 使能/禁用消毒后降解
 function actionToggleDegradeAfterDisinfectionEnable() {
     let status = !degradeAfterDisinfectionEnable.value;
     deviceStore.setDegradeAfterDisinfectionEnable(status);
+    websocketStore.call('setDegradeAfterDisinfectionEnable', {enable:status});
 }
 
 // 消毒前除湿阈值改变
 function actionDehumidifyBeforeDisinfectionThresholdValueChange() {
     deviceStore.setDehumidifyBeforeDisinfectionThreshold(dehumidifyBeforeDisinfectionThresholdValue.value[0]);
+    websocketStore.call('setDehumidifyBeforeDisinfectionThreshold', {value:dehumidifyBeforeDisinfectionThresholdValue.value[0]});
 }
 
 // 消毒后除湿阈值改变
 function actionDehumidifyAfterDisinfectionThresholdValueChange() {
     deviceStore.setDehumidifyAfterDisinfectionThreshold(dehumidifyAfterDisinfectionThresholdValue.value[0]);
+    websocketStore.call('setDehumidifyAfterDisinfectionThreshold', {value:dehumidifyAfterDisinfectionThresholdValue.value[0]});
 }
 </script>
   

src/store/modules/websocket.js

@@ -24,6 +24,11 @@ export const useWebSocketStore = defineStore({
       socketCommandInstance: null,
       // 事件上报websocket 实例
       socketEventInstance: null,
+      
+      // Call ID Counter
+      callIdCounter : 0,
+      // Call Resolve Handler Map
+      callPromiseHandlers : {},
     }
   },
   // actions
@@ -43,8 +48,23 @@ export const useWebSocketStore = defineStore({
       const historyStore = useHistoryStore()
       const sealStore = useSealStore()
       init.connect()
+
+      let $this = this;
       init.ws.onmessage = function (ev) {
         const { messageId, timeStamp } = JSON.parse(ev.data)
+        if ( undefined !== $this.callPromiseHandlers[messageId] ) {
+          let response = JSON.parse(ev.data);
+          const handler = $this.callPromiseHandlers[messageId];
+          delete $this.callPromiseHandlers[messageId];
+          console.log('call-response', response);
+          if ( 0 === response.ackcode ) {
+            handler.reject(response.reason);
+          } else {
+            handler.resolve(response.result);
+          }
+          return;
+        }
+
         console.log(JSON.parse(ev.data))
         switch (messageId) {
           case 'getState':
@@ -326,6 +346,28 @@ export const useWebSocketStore = defineStore({
     sendCommandMsg(message) {
       this.socketCommandInstance?.msg(message)
     },
+
+    // call and wait for response
+    call( command, params=null ) {
+      this.callIdCounter += 1;
+      if ( this.callIdCounter > 1000000 ) {
+          this.callIdCounter = 0;
+      }
+      const callId = `call-${this.callIdCounter}`;
+      return new Promise(( resolve, reject ) => {
+          let message = {};
+          message.command = command;
+          message.messageId = callId;
+          if ( null !== params ) {
+            message.params = params;
+          }
+          this.callPromiseHandlers[callId] = { resolve, reject, message };
+          console.log('call-request', message);
+          this.sendCommandMsg(message);
+      });
+    },
+
+
     initEventSocket() {
       const url = import.meta.env.VITE_BASE_WS2_URL
       const init = new Socket(url)