From cca9dd2c5875b0969024663955f7f47712231384 Mon Sep 17 00:00:00 2001
From: sige <sige@sige.com>
Date: Fri, 24 May 2024 15:20:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=81=A2=E5=A4=8D=E9=BB=98=E8=AE=A4=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E6=94=B9=E4=B8=BA=E8=B0=83=E7=94=A8=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../img/icon/exclamation-cricle-red-fill.svg       |  17 +++
 src/components/MyModal.vue                         | 133 +++++++++++++++++++++
 src/components/Setting/components/Device.vue       |  26 ++++
 src/main.js                                        |   3 +-
 src/store/modules/websocket.js                     |  77 ++++++++++++
 src/utils/MyModal.js                               |  60 ++++++++++
 6 files changed, 315 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/img/icon/exclamation-cricle-red-fill.svg
 create mode 100644 src/components/MyModal.vue
 create mode 100644 src/utils/MyModal.js

diff --git a/src/assets/img/icon/exclamation-cricle-red-fill.svg b/src/assets/img/icon/exclamation-cricle-red-fill.svg
new file mode 100644
index 0000000..62fc034
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/MyModal.vue b/src/components/MyModal.vue
new file mode 100644
index 0000000..6fec489
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Setting/components/Device.vue b/src/components/Setting/components/Device.vue
index bd09eaf..789f8da 100644
--- a/src/components/Setting/components/Device.vue
+++ b/src/components/Setting/components/Device.vue
@@ -97,6 +97,13 @@
         />
       </p>
     </div>
+    <div class="row_wrap">
+      <p class="title">恢复默认设置</p>
+      <p class="num">
+        <div class="btn" style="font-size: 1rem;margin-right: 50px;" @click="actionDefaultSetting">恢复</div>
+      </p>
+    </div>
+
     <van-number-keyboard
       v-model="addLiquidConfigVal"
       :title="addLiquidConfigVal"
@@ -209,10 +216,15 @@ import Down from '@/assets/img/arrow/down.png'
 import Top from '@/assets/img/arrow/top.png'
 import {
   setSettingValJSON,
+  getAllSettingJSON,
   changeDisinfectionParameterJSON,
   updateSettingInRunInfectionJSON,
 } from '@/mock/command'
 
+
+import MyModal from '../../../utils/MyModal'
+
+
 const topContainer = () => {
   const ele = document.getElementById('set_device_container')
   ele.scrollTop = ele.scrollTop - 100 < 100 ? 0 : ele.scrollTop - 100
@@ -721,6 +733,20 @@ const setSprayLiquidVal = () => {
   }
   showSuccessToast('设置成功')
 }
+
+// 恢复到默认设置
+async function actionDefaultSetting() {
+    let isConfirmed = await MyModal.confirm('是否恢复到默认设置？');
+    if (!isConfirmed) {
+        return;
+    }
+
+    if ( !props.runInfection ) {
+        await webSocketStore.call('factoryResetSettings');
+        webSocketStore.sendCommandMsg(getAllSettingJSON);
+    }
+    showSuccessToast('设置成功')
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/main.js b/src/main.js
index 7505e03..1148c9d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,7 +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)
@@ -42,4 +42,5 @@ createApp(App)
   .use(Toast)
   .use(store)
   .component('my-input', MyInput)
+  .component('my-modal', MyModal)
   .mount('#app')
diff --git a/src/store/modules/websocket.js b/src/store/modules/websocket.js
index 2a5f42d..b47eafd 100644
--- a/src/store/modules/websocket.js
+++ b/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)
diff --git a/src/utils/MyModal.js b/src/utils/MyModal.js
new file mode 100644
index 0000000..a74a7c6
--- /dev/null
+++ b/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();
+        });
+    }
+}
\ No newline at end of file