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

src/App.vue

@@ -1,7 +1,41 @@
-<script setup></script>
-
 <template>
   <router-view></router-view>
+  <my-modal type="info" icon="warning"
+    v-model:visible="deviceAlert.visible"
+    :content="deviceAlert.content"
+    @ok="actionDeviceAlertOk"
+  ></my-modal>
 </template>
+<script setup>
+import { useWebSocketStore } from '@/store'
+import { onMounted, ref } from 'vue';
+/** @var {webSocketStore} */
+const webSocketStore = useWebSocketStore();
+/** @var {Object} */
+const deviceAlert = ref({
+    visible: false,
+    content: '',
+    key : null,
+});
+// on mounted
+onMounted(mounted);
+
+// on mounted
+function mounted() {
+    webSocketStore.registerEventHandler('AlertEvent', handleAlertEvent);
+}
+
+// handle alert event
+async function handleAlertEvent(data) {
+    deviceAlert.value.visible = true;
+    deviceAlert.value.content = data.displayInfo;
+    deviceAlert.value.key = data.alertContext;
+    await webSocketStore.call('AlertEventFrontEndConfirm', {alertContext:data.alertContext});
+}
+
+// action device alert ok
+async function actionDeviceAlertOk() {
+    await webSocketStore.call('AlertEventUsrConfirm', {alertContext:deviceAlert.value.key});
+}
 
-<style scoped></style>
+</script>

src/components/MyModal.vue

@@ -16,6 +16,9 @@
         <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>
@@ -34,6 +37,14 @@ const props = defineProps({
 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() {

src/components/Operator.vue

@@ -503,6 +503,7 @@ import {
 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()
@@ -590,36 +591,33 @@ const changePreVal = val => {
 }
 
 const startDisinfect = () => {
-  // 改变开始消毒状态 如果已经开始则不可点击
-  // 选择预设 而后开始消毒
-  // preVisible.value = true
-  operatorStore.updateShowStartReady(true)
-  // 十秒以后隐藏遮罩
-  setTimeout(() => {
-    operatorStore.updateShowStartReady(false)
-  }, 10000)
-  realStart()
-  // envirVisible.value = true
+  realStart();
 }
 
-const realStart = () => {
+// 开始消毒
+async function realStart() {
+    operatorStore.updateShowStartReady(true)
     localStorage.setItem('logVal', logVal.value)
-  if (
-    operatorStore.disinfectStatus == 0 ||
-    operatorStore.disinfectStatus == 5
-  ) {
+    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),
-        parseInt(envirVal.value),
-        sealStore.airInletProportionalValue,
-        sealStore.airOutletProportionalValue,
-      ),
-    )
+
+        try {
+            await webSocketStore.call('startDisinfection', {
+                loglevel : parseInt(logVal.value),
+                roomVolume : parseInt(roomSize.value),
+                envirVal : parseInt(envirVal.value),
+                airInletProportionalValve : sealStore.airInletProportionalValue,
+                airOutletProportionalValve : sealStore.airOutletProportionalValue,
+            });
+        } catch ( e ) {
+            operatorStore.updateShowStartReady(false)
+            await MyModal.error(`无法开始消毒 : ${e.message || e}`);
+            return ;
+        }
+
+        operatorStore.updateShowStartReady(false)
         props.changeShowOperator(false)
     }
 }

src/store/modules/websocket.js

@@ -24,6 +24,8 @@ export const useWebSocketStore = defineStore({
       socketCommandInstance: null,
       // 事件上报websocket 实例
       socketEventInstance: null,
+      // Event Handlers
+      eventHandlers : {},
 
       // Call ID Counter
       callIdCounter : 0,
@@ -31,12 +33,22 @@ export const useWebSocketStore = defineStore({
       callPromiseHandlers : {},
       // Call Param Merge Commands
       callparamMergeCmds : [
-        'cleanDisinfectionRecord',
+        'cleanDisinfectionRecord', 'startDisinfection'
       ],
     }
   },
   // 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)
@@ -66,7 +78,7 @@ export const useWebSocketStore = defineStore({
           if ( 0 === response.ackcode ) {
             handler.resolve(response);
           } else {
-            handler.reject(response.reason);
+            handler.reject(response.ackDisplayInfo);
           }
           return;
         }
@@ -388,9 +400,20 @@ 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,29 @@
+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();
+        });
+    }
+}