恢复默认设置改为调用接口

1 year ago · cca9dd2c58
6 changed files with 315 additions and 1 deletions
--- a/src/assets/img/icon/exclamation-cricle-red-fill.svg
+++ 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>
--- a/src/components/MyModal.vue
+++ 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>
--- 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>
--- 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')
--- 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)
--- a/src/utils/MyModal.js
+++ 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();
+        });
+    }
+}