From ce12fd4407705d429d2d325dfead375f7af99aa1 Mon Sep 17 00:00:00 2001
From: sige <sige@sige.com>
Date: Fri, 24 May 2024 19:22:57 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E7=BD=AE-=E8=AE=BE=E5=A4=87=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E8=AE=BE=E7=BD=AE=E5=A2=9E=E5=8A=A0=E6=81=A2=E5=A4=8D?=
 =?UTF-8?q?=E5=87=BA=E5=8E=82=E8=AE=BE=E7=BD=AE=E9=85=8D=E7=BD=AE?=
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       |  25 ++++
 src/main.js                                        |   2 +
 src/style.scss                                     |   8 ++
 src/utils/MyModal.js                               |  60 ++++++++++
 6 files changed, 245 insertions(+)
 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 2d6e43a..174eb2c 100644
--- a/src/components/Setting/components/Device.vue
+++ b/src/components/Setting/components/Device.vue
@@ -107,6 +107,12 @@
         ></my-input>
       </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>
   </div>
 </template>
 
@@ -119,10 +125,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
@@ -681,6 +692,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 87ca11d..6047da0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,6 +24,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)
@@ -44,4 +45,5 @@ createApp(App)
   .use(Slider)
   .use(store)
   .component('my-input', MyInput)
+  .component('my-modal', MyModal)
   .mount('#app')
diff --git a/src/style.scss b/src/style.scss
index 9d565e5..f71d6f6 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -19,6 +19,14 @@ body {
   user-select: none;
 }
 
+html {
+  overscroll-behavior-x: none;
+}
+body {
+  overscroll-behavior-x: none;
+}
+
+
 .van-cell {
   .van-field__control {
     text-align: center;
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