#115 消毒开始时，调用消毒开始失败需要弹框显示错误信息，并且不跳转到消毒处理页面

src/assets/img/icon/exclamation-cricle-red-fill.svg

@@ -0,0 +1,17 @@
+<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>

src/components/MyModal.vue

@@ -0,0 +1,133 @@
+<template>
+  <div v-if="visible" class="clear_record_modal_container">
+    <div class="modal_content">
+      <div v-if="'warning' === props.icon">
+        <img src="@/assets/img/icon/exclamation-cricle-red-fill.svg " />
+      </div>
+
+      <template v-if="'' === props.content">
+        <slot></slot>
+      </template>
+      <p v-else class="tips">
+        <span>{{ props.content }}</span>
+      </p>
+
+      <div v-if="'confirm' === props.type" class="btns">
+        <div class="cancel" @click="actionCancel">取消</div>
+        <div class="ok" @click="actionOk">确定</div>
+      </div>
+      <div v-else-if="'info' === props.type" class="btns" style="justify-content: center;">
+        <div class="ok" @click="actionOk">确定</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch } from 'vue'
+/** @var {Function} */
+const emits = defineEmits(['update:visible', 'ok', 'cancel']);
+/** @var {Object} */
+const props = defineProps({
+    visible: {type:Boolean, default:false}, // 是否显示
+    content : {type:String, default:''}, // 提示内容
+    type : {type:String, default:'confirm'}, // 类型
+    icon : {type:String, default:''} // 图标
+});
+/** @var {Boolean} */
+const visible = ref(props.visible);
+// watch visible
+watch(() => props.visible, val => visible.value = val);
+// expose public functions
+defineExpose({show});
+
+// show dialog
+function show() {
+    emits('update:visible', true);
+    visible.value = true;
+}
+
+// action ok
+function actionOk() {
+    emits('ok');
+    emits('update:visible', false);
+    visible.value = false;
+}
+
+// action cancel
+function actionCancel() {
+    emits('cancel');
+    emits('update:visible', false);
+    visible.value = false;
+}
+</script>
+<style lang="scss" scoped>
+.clear_record_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: #1f6397;
+          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/Operator.vue

@@ -487,6 +487,7 @@ import { useOperatorStore, useWebSocketStore, useSettingStore } from '@/store'
 import { startDisinfectionJSON, getStateJSON } from '@/mock/command'
 import { showSuccessToast, showFailToast } from 'vant'
 import { time_To_hhmmss } from '@/utils'
+import MyModal from '../utils/MyModal'
 
 const operatorStore = useOperatorStore()
 const webSocketStore = useWebSocketStore()
@@ -570,20 +571,29 @@ const startDisinfect = () => {
   realStart()
 }
 
-const realStart = () => {
-  localStorage.setItem('logVal', logVal.value)
-  if (
-    operatorStore.disinfectStatus == 0 ||
-    operatorStore.disinfectStatus == 5
-  ) {
-    localStorage.removeItem('bin')
-    localStorage.removeItem('envir1')
-    localStorage.removeItem('envir2')
-    webSocketStore.sendCommandMsg(
-      startDisinfectionJSON(parseInt(logVal.value), parseInt(roomSize.value)),
-    )
-    props.changeShowOperator(false)
-  }
+// 开始消毒
+async function realStart() {
+    operatorStore.updateShowStartReady(true)
+    localStorage.setItem('logVal', logVal.value)
+    if ( operatorStore.disinfectStatus == 0 || operatorStore.disinfectStatus == 5 ) {
+        localStorage.removeItem('bin')
+        localStorage.removeItem('envir1')
+        localStorage.removeItem('envir2')
+
+        try {
+            await webSocketStore.call('startDisinfection', {
+                loglevel : parseInt(logVal.value),
+                roomVolume : parseInt(roomSize.value),
+            });
+        } catch ( e ) {
+            operatorStore.updateShowStartReady(false)
+            await MyModal.error(`无法开始消毒 : ${e.message || e}`);
+            return ;
+        }
+
+        operatorStore.updateShowStartReady(false)
+        props.changeShowOperator(false)
+    }
 }
 
 const showLogPicker = () => {

src/main.js

@@ -23,6 +23,7 @@ import 'vant/lib/index.css'
 import '@/assets/css/reset.css'
 import './style.scss'
 import MyInput from 'cpns/MyInput.vue'
+import MyModal from 'cpns/MyModal.vue'
 
 createApp(App)
   .use(router)
@@ -41,4 +42,5 @@ createApp(App)
   .use(Toast)
   .use(store)
   .component('my-input', MyInput)
+  .component('my-modal', MyModal)
   .mount('#app')

src/store/modules/websocket.js

@@ -23,10 +23,31 @@ export const useWebSocketStore = defineStore({
       socketCommandInstance: null,
       // 事件上报websocket 实例
       socketEventInstance: null,
+      // Event Handlers
+      eventHandlers : {},
+
+      // Call ID Counter
+      callIdCounter : 0,
+      // Call Resolve Handler Map
+      callPromiseHandlers : {},
+      // Call Param Merge Commands
+      callparamMergeCmds : [
+        'cleanDisinfectionRecord', 'startDisinfection', 'changeDisinfectionParameter','setSettingVal'
+      ],
     }
   },
   // actions
   actions: {
+      // register event handler
+      registerEventHandler( event, handler ) {
+          this.eventHandlers[event] = this.eventHandlers[event] || [];
+          this.eventHandlers[event].push(handler);
+      },
+
+
+
+
+
     initCommandSocket() {
       const url = import.meta.env.VITE_BASE_WS1_URL
       const init = new Socket(url)
@@ -41,8 +62,27 @@ export const useWebSocketStore = defineStore({
       const runningStore = useRunningStore()
       const historyStore = useHistoryStore()
       init.connect()
+
+      let $this = this;
       init.ws.onmessage = function (ev) {
         const { messageId, timeStamp } = JSON.parse(ev.data)
+
+        // 优先处理call-response
+        if ( undefined !== $this.callPromiseHandlers[messageId] ) {
+          let response = JSON.parse(ev.data);
+          const handler = $this.callPromiseHandlers[messageId];
+          delete $this.callPromiseHandlers[messageId];
+          console.log(`[Call Response : ${messageId}] ${handler.message.command} => ${JSON.stringify(response)}`);
+          if ( 0 === response.ackcode ) {
+            handler.resolve(response);
+          } else {
+            handler.reject(response.ackDisplayInfo);
+          }
+          return;
+        }
+
+
+
         console.log(JSON.parse(ev.data))
         switch (messageId) {
           case 'getState':
@@ -275,6 +315,31 @@ 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 ) {
+              if ( this.callparamMergeCmds.includes(command) ) {
+                  message = { ...message, ...params };
+              } else {
+                  message.params = params;
+              }
+          }
+          this.callPromiseHandlers[callId] = { resolve, reject, message };
+          console.log(`[Call Request : ${callId}] ${command}(${JSON.stringify(params)})`);
+          this.sendCommandMsg(message);
+      });
+    },
+
     initEventSocket() {
       const url = import.meta.env.VITE_BASE_WS2_URL
       const init = new Socket(url)
@@ -284,9 +349,21 @@ export const useWebSocketStore = defineStore({
       const settingStore = useSettingStore()
       const operatorStore = useOperatorStore()
       const echartsStore = useEchartsStore()
+      
+      let $this = this;
       init.ws.onmessage = function (ev) {
         // console.log(JSON.parse(ev.data))
         const { command, timeStamp } = JSON.parse(ev.data)
+        if ( undefined !== $this.eventHandlers[command] ) {
+            let data = JSON.parse(ev.data);
+            data = data.data;
+            for ( const handler of $this.eventHandlers[command] ) {
+                handler(data);
+            }
+            return ;
+        }
+
+
         switch (command) {
           case 'RealtimeSensorDataReport':
             const { sensor_data } = JSON.parse(ev.data)

src/utils/MyModal.js

@@ -0,0 +1,60 @@
+import { createApp, h } from 'vue';
+import MyModalComponent from 'cpns/MyModal.vue';
+export default class MyModal {
+    // show error message
+    static error( message ) {
+        return new Promise( resolve => {
+            const modalContainer = document.createElement('div');
+            document.body.appendChild(modalContainer);
+            const modalApp = createApp({
+                render() {
+                    return h(MyModalComponent, {
+                        ref : 'modal',
+                        icon : 'warning',
+                        type : 'info', 
+                        content : message,
+                        onOk : () => {
+                            modalApp.unmount();
+                            document.body.removeChild(modalContainer);
+                            resolve();
+                        }
+                    });
+                },
+            });
+
+            const vm = modalApp.mount(modalContainer);
+            vm.$refs.modal.show();
+        });
+    }
+
+    // show confirm message
+    static confirm( message ) {
+        return new Promise( resolve => {
+            const modalContainer = document.createElement('div');
+            document.body.appendChild(modalContainer);
+            const modalApp = createApp({
+                render() {
+                    return h(MyModalComponent, {
+                        ref : 'modal',
+                        icon : 'warning',
+                        type : 'confirm', 
+                        content : message,
+                        onOk : () => {
+                            modalApp.unmount();
+                            document.body.removeChild(modalContainer);
+                            resolve(true);
+                        },
+                        onCancel : () => {
+                            modalApp.unmount();
+                            document.body.removeChild(modalContainer);
+                            resolve(false);
+                        }
+                    });
+                },
+            });
+
+            const vm = modalApp.mount(modalContainer);
+            vm.$refs.modal.show();
+        });
+    }
+}