From d9d662f45b01af995ed31d71d3f31fb7ac0af7e8 Mon Sep 17 00:00:00 2001
From: sige <sige@sige.com>
Date: Thu, 23 May 2024 16:15:41 +0800
Subject: [PATCH] =?UTF-8?q?#91=20=E5=BC=B9=E6=A1=86=E7=A1=AE=E8=AE=A4?=
 =?UTF-8?q?=E5=92=8C=E5=8F=96=E6=B6=88=E6=8C=89=E9=92=AE=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E4=B8=8D=E7=BB=9F=E4=B8=80?=
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                         | 122 +++++++++++++++++++
 src/components/SealTest.vue                        |   2 +-
 src/components/Setting/components/History.vue      |  35 ++++--
 src/components/dialogs/ClearRecordByKeysModal.vue  | 134 ---------------------
 src/components/dialogs/DelPreModal.vue             |  39 ++----
 src/components/dialogs/DisinfectModal.vue          |  59 ++++-----
 src/components/dialogs/LeaveModal.vue              |  84 ++++++-------
 src/components/dialogs/LiquidModal.vue             |  73 +++++------
 src/components/dialogs/UserModal.vue               |  40 ++----
 src/main.js                                        |   2 +
 src/socket/index.js                                |   6 +-
 src/store/modules/websocket.js                     |  53 ++++++++
 13 files changed, 343 insertions(+), 323 deletions(-)
 create mode 100644 src/assets/img/icon/exclamation-cricle-red-fill.svg
 create mode 100644 src/components/MyModal.vue
 delete mode 100644 src/components/dialogs/ClearRecordByKeysModal.vue

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..161a9ad
--- /dev/null
+++ b/src/components/MyModal.vue
@@ -0,0 +1,122 @@
+<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>
+  </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);
+
+// 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/SealTest.vue b/src/components/SealTest.vue
index 662ee3e..db2eda0 100644
--- a/src/components/SealTest.vue
+++ b/src/components/SealTest.vue
@@ -66,7 +66,7 @@
           <div class="num">
             {{
               sealStore.differenceValue != null
-                ? `${sealStore.differenceValue}KPa`
+                ? `${sealStore.differenceValue * 1000}Pa`
                 : '未开始'
             }}
           </div>
diff --git a/src/components/Setting/components/History.vue b/src/components/Setting/components/History.vue
index 8d9f938..34944a6 100644
--- a/src/components/Setting/components/History.vue
+++ b/src/components/Setting/components/History.vue
@@ -110,7 +110,12 @@
         <div class="return_btn" @click="showDetailVisible = false">返回</div>
       </div>
     </div>
-    <ClearRecordByKeysModal ref="clearRecordByKeys" :keys="checkedItems"/>
+    
+    <my-modal type="confirm" icon="warning" 
+      content="确定要所选消毒记录吗！"
+      v-model:visible="clearRecordByKeysModalVisible"
+      @ok="actionClearRecordByKeysExecute"
+    ></my-modal>
   </div>
 </template>
 
@@ -120,19 +125,34 @@ import Down from '@/assets/img/arrow/down.png'
 import Top from '@/assets/img/arrow/top.png'
 import Right from '@/assets/img/arrow/right.png'
 import Left from '@/assets/img/arrow/left.png'
-import ClearRecordByKeysModal from 'cpns/dialogs/ClearRecordByKeysModal'
 import { useHistoryStore, useWebSocketStore, useSettingStore } from '@/store'
-import { getDetailInfoById, exportDisinfectionRecordByKeyListJSON } from '@/mock/command'
+import { getDetailInfoById, exportDisinfectionRecordByKeyListJSON, getAllLocalHistoryData, cleanDisinfectionRecordByKeysJSON } from '@/mock/command'
+import MyModal from 'cpns/MyModal.vue';
+/** @var {Object} */
+const webSocketStore = useWebSocketStore();
+// 选中的数据
+const checkedItems = ref([])
+/** @var {Boolean} */
+const clearRecordByKeysModalVisible = ref(false);
+
+// clear record by keys
+async function actionClearRecordByKeysExecute() {
+    await webSocketStore.call('cleanDisinfectionRecord',{keys:checkedItems.value});
+    webSocketStore.sendCommandMsg(getAllLocalHistoryData);
+}
+
+
+
+
 
 const showDetailVisible = ref(false)
 const historyStore = useHistoryStore()
-const webSocketStore = useWebSocketStore()
+
 const settingStore = useSettingStore()
 
 // 清除记录对话框
 const clearRecordByKeys = ref(null)
-// 选中的数据
-const checkedItems = ref([])
+
 // 历史数据列表
 const historyDataList = computed(() => {
     return historyStore.historyDataList.sort((a, b) => b.localeCompare(a));
@@ -147,7 +167,8 @@ function actionOperationExecute( action ) {
         settingStore.updateExportLoading(true)
         webSocketStore.sendCommandMsg(exportDisinfectionRecordByKeyListJSON(checkedItems.value));
     } else if ( 'delete' === action ) {
-        clearRecordByKeys.value.showDialog();
+        // clearRecordByKeys.value.showDialog();
+        clearRecordByKeysModalVisible.value = true;
     }
 }
 
diff --git a/src/components/dialogs/ClearRecordByKeysModal.vue b/src/components/dialogs/ClearRecordByKeysModal.vue
deleted file mode 100644
index efa6433..0000000
--- a/src/components/dialogs/ClearRecordByKeysModal.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-  <div v-if="enable" class="clear_record_modal_container">
-    <div class="modal_content">
-      <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>
-      <p class="tips">
-        <span class="red">确定要所选消毒记录吗！</span>
-      </p>
-      <div class="btns">
-        <div class="ok style-btn" @click="handleStart">确定</div>
-        <div class="cancel style-btn" @click="handleCancel">取消</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useWebSocketStore } from '@/store'
-import { cleanDisinfectionRecordByKeysJSON, getAllLocalHistoryData } from '@/mock/command'
-import { ref } from 'vue'
-// props
-const props = defineProps({
-    keys : {type: Array,default: () => []}
-})
-// WebSocket store
-const webSocketStore = useWebSocketStore()
-// 启用
-const enable = ref(false);
-// 暴露方法
-defineExpose({showDialog});
-
-function showDialog() {
-  enable.value = true;
-}
-
-const handleCancel = () => {
-    enable.value = false;
-}
-
-const handleStart = () => {
-  webSocketStore.sendCommandMsg(cleanDisinfectionRecordByKeysJSON(props.keys))
-  enable.value = false;
-  setTimeout(() => {
-    webSocketStore.sendCommandMsg(getAllLocalHistoryData);
-  }, 300)
-}
-</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>
diff --git a/src/components/dialogs/DelPreModal.vue b/src/components/dialogs/DelPreModal.vue
index d281cc2..d5bbc6d 100644
--- a/src/components/dialogs/DelPreModal.vue
+++ b/src/components/dialogs/DelPreModal.vue
@@ -1,37 +1,16 @@
 <template>
-  <div class="del_pre_modal_container">
-    <div class="modal_content">
-      <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>
-      <p class="tips">
-        <span class="red">确定要删除当前预设吗？</span>
-      </p>
-      <div class="btns">
-        <div class="ok style-btn" @click="delThisPre">确定</div>
-        <div class="cancel style-btn" @click="handleCancel">取消</div>
-      </div>
-    </div>
-  </div>
+  <my-modal type="confirm" icon="warning"
+    content="确定要删除当前预设吗？"
+    v-model:visible="visible"
+    @ok="delThisPre"
+    @cancel="handleCancel"
+  ></my-modal>
 </template>
 
 <script setup>
 import { useFormulaStore, useWebSocketStore } from '@/store'
 import { delFormulaJSON, getAllFormulaJSON } from '@/mock/command'
+import { ref } from 'vue'
 
 const formulaStore = useFormulaStore()
 const webSocketStore = useWebSocketStore()
@@ -41,6 +20,10 @@ const props = defineProps({
   },
 })
 
+
+const visible = ref(true);
+
+
 const handleCancel = () => {
   props.hideDelModal()
 }
diff --git a/src/components/dialogs/DisinfectModal.vue b/src/components/dialogs/DisinfectModal.vue
index 227233e..3d7a126 100644
--- a/src/components/dialogs/DisinfectModal.vue
+++ b/src/components/dialogs/DisinfectModal.vue
@@ -1,43 +1,28 @@
 <template>
-  <div class="disinfect_modal_container">
-    <div class="modal_content">
-      <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>
-      <p class="tips">
-        <span class="red">消毒正在进行中，是否终止消毒！</span>
-      </p>
-      <div class="btns">
-        <div class="ok style-btn" @click="handleStart">确定</div>
-        <div class="cancel style-btn" @click="handleCancel">取消</div>
-      </div>
-    </div>
-  </div>
+  <my-modal type="confirm" icon="warning"
+    v-model:visible="visible"
+    @ok="handleStart"
+    @cancel="handleCancel"
+  >
+    <p class="tips"><span class="red">消毒正在进行中，是否终止消毒！</span></p>
+  </my-modal>
 </template>
 
 <script setup>
 import { stopDisinfectionJSON } from '@/mock/command'
 import { useOperatorStore, useWebSocketStore } from '@/store'
+import { ref } from 'vue'
+
 const props = defineProps({
   hideDisinfectModal: {
     type: Function,
   },
 })
 
+const visible = ref(true)
+
+
+
 const operatorStore = useOperatorStore()
 const webSocketStore = useWebSocketStore()
 
@@ -59,6 +44,24 @@ const handleStart = () => {
 </script>
 
 <style lang="scss" scoped>
+.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;
+  }
+}
+
+
+
+
+
+
 .disinfect_modal_container {
   position: fixed;
   top: 0;
diff --git a/src/components/dialogs/LeaveModal.vue b/src/components/dialogs/LeaveModal.vue
index c1c0123..dfcdc84 100644
--- a/src/components/dialogs/LeaveModal.vue
+++ b/src/components/dialogs/LeaveModal.vue
@@ -1,36 +1,18 @@
 <template>
-  <div class="leave_modal">
-    <div class="modal_content">
-      <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>
-      <div class="tips">
-        <span class="red">正在测试气压中，离开将会停止测试</span>
-        <p class="red2">确定离开吗？</p>
-      </div>
-      <div class="btns">
-        <div class="ok style-btn" @click="handleStart">确定</div>
-        <div class="cancel style-btn" @click="handleCancel">取消</div>
-      </div>
+  <my-modal type="confirm" icon="warning"
+    v-model:visible="visible"
+    @ok="handleStart"
+    @cancel="handleCancel"
+  >
+    <div class="tips">
+      <span class="red">正在测试气压中，离开将会停止测试</span>
+      <p class="red2">确定离开吗？</p>
     </div>
-  </div>
+  </my-modal>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { useSealStore, useWebSocketStore } from '@/store'
 import {
   airCompressorSetValve1JSON,
@@ -42,7 +24,6 @@ import {
 
 const sealStore = useSealStore()
 const websocketStore = useWebSocketStore()
-
 const props = defineProps({
   hiddenLeaveModal: {
     type: Function,
@@ -58,6 +39,9 @@ const props = defineProps({
   },
 })
 
+const visible = ref(true);
+
+
 const handleCancel = () => {
   props.hiddenLeaveModal()
 }
@@ -85,6 +69,28 @@ const handleStart = () => {
 </script>
 
 <style lang="scss" scoped>
+.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;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .red {
+        color: #fa1c1c;
+      }
+      .red2 {
+        color: #fa1c1c;
+        margin-top: 6px;
+      }
+    }
+
+
+    
 .leave_modal {
   position: fixed;
   top: 0;
@@ -106,25 +112,7 @@ const handleStart = () => {
     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;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      .red {
-        color: #fa1c1c;
-      }
-      .red2 {
-        color: #fa1c1c;
-        margin-top: 6px;
-      }
-    }
+    
     .btns {
       display: flex;
       align-items: center;
diff --git a/src/components/dialogs/LiquidModal.vue b/src/components/dialogs/LiquidModal.vue
index 5e907ef..26dcbdb 100644
--- a/src/components/dialogs/LiquidModal.vue
+++ b/src/components/dialogs/LiquidModal.vue
@@ -1,40 +1,18 @@
 <template>
-  <div class="liquid_modal_container">
-    <div class="modal_content">
-      <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>
-      <p class="warn_info mg">
-        请<span class="red">检查</span>是否接入排出容器
-      </p>
-      <p class="warn_info">
-        并确认<span class="red">容器是否大于</span>排出液体容积
-      </p>
-      <div class="btns">
-        <div class="ok style-btn" @click="tapLiquid">确定</div>
-        <div class="cancel style-btn" @click="cancelTap">取消</div>
-      </div>
-    </div>
-  </div>
+  <my-modal type="confirm" icon="warning"
+    v-model:visible="visible"
+    @ok="tapLiquid"
+    @cancel="cancelTap"
+  >
+    <p class="warn_info mg">请<span class="red">检查</span>是否接入排出容器</p>
+    <p class="warn_info" style="margin-bottom: 50px;">并确认<span class="red">容器是否大于</span>排出液体容积</p>
+  </my-modal>
 </template>
 
 <script setup>
 import { useWebSocketStore } from '@/store'
 import { startDrainingJSON } from '@/mock/command'
+import { ref } from 'vue'
 
 const webSocketStore = useWebSocketStore()
 
@@ -44,6 +22,9 @@ const props = defineProps({
   },
 })
 
+const visible = ref(true)
+
+
 const tapLiquid = () => {
   webSocketStore.sendCommandMsg(startDrainingJSON)
   props?.hideTabLiquid()
@@ -55,6 +36,21 @@ const cancelTap = () => {
 </script>
 
 <style lang="scss" scoped>
+.warn_info {
+  font-family: Source Han Sans CN;
+  font-size: 22px;
+  font-weight: normal;
+  letter-spacing: 0.04em;
+  color: #000000;
+  .red {
+    color: #fa1c1c;
+  }
+}
+.mg {
+  margin-top: 34px;
+  margin-bottom: 16px;
+}
+
 .liquid_modal_container {
   position: fixed;
   top: 0;
@@ -76,20 +72,7 @@ const cancelTap = () => {
     display: flex;
     flex-direction: column;
     align-items: center;
-    .warn_info {
-      font-family: Source Han Sans CN;
-      font-size: 22px;
-      font-weight: normal;
-      letter-spacing: 0.04em;
-      color: #000000;
-      .red {
-        color: #fa1c1c;
-      }
-    }
-    .mg {
-      margin-top: 34px;
-      margin-bottom: 16px;
-    }
+    
     .btns {
       display: flex;
       align-items: center;
diff --git a/src/components/dialogs/UserModal.vue b/src/components/dialogs/UserModal.vue
index 3e26694..d8e129d 100644
--- a/src/components/dialogs/UserModal.vue
+++ b/src/components/dialogs/UserModal.vue
@@ -1,35 +1,13 @@
 <template>
-  <div class="user_modal_container">
-    <div class="modal_content">
-      <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>
-      <p class="tips">
-        请确认是否将 <span class="red">{{ userWarnInfo }}</span>
-      </p>
-      <div class="btns">
-        <div class="ok style-btn" @click="ok">确定</div>
-        <div class="cancel style-btn" @click="handleCancel">取消</div>
-      </div>
-    </div>
-  </div>
+  <my-modal type="confirm" icon="warning"
+    :content="`请确认是否将 ${userWarnInfo}`"
+    v-model:visible="visible"
+    @ok="ok"
+    @cancel="handleCancel"
+  ></my-modal>
 </template>
-
 <script setup>
+import { ref } from 'vue'
 const props = defineProps({
   userWarnInfo: {
     type: String,
@@ -42,6 +20,10 @@ const props = defineProps({
   },
 })
 
+/** @var {Boolean} */
+const visible = ref(true);
+
+
 const ok = () => {
   props.handleOk()
   props.hideUserModal()
diff --git a/src/main.js b/src/main.js
index 2f46bcb..34e3b27 100644
--- a/src/main.js
+++ b/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)
@@ -42,4 +43,5 @@ createApp(App)
   .use(Toast)
   .use(store)
   .component('my-input', MyInput)
+  .component('my-modal', MyModal)
   .mount('#app')
diff --git a/src/socket/index.js b/src/socket/index.js
index 41ebc39..cde2e86 100644
--- a/src/socket/index.js
+++ b/src/socket/index.js
@@ -41,9 +41,9 @@ export default class Socket {
     if (param === 'heartbeat') {
       this.ws.send(param)
     } else {
-      if (param.command != 'getState') {
-        console.log(param)
-      }
+      // if (param.command != 'getState') {
+      //   console.log(param)
+      // }
       this.ws.send(JSON.stringify(param))
     }
   }
diff --git a/src/store/modules/websocket.js b/src/store/modules/websocket.js
index 7ddb23d..b06b32e 100644
--- a/src/store/modules/websocket.js
+++ b/src/store/modules/websocket.js
@@ -24,6 +24,15 @@ export const useWebSocketStore = defineStore({
       socketCommandInstance: null,
       // 事件上报websocket 实例
       socketEventInstance: null,
+
+      // Call ID Counter
+      callIdCounter : 0,
+      // Call Resolve Handler Map
+      callPromiseHandlers : {},
+      // Call Param Merge Commands
+      callparamMergeCmds : [
+        'cleanDisinfectionRecord',
+      ],
     }
   },
   // actions
@@ -43,8 +52,27 @@ export const useWebSocketStore = defineStore({
       const historyStore = useHistoryStore()
       const sealStore = useSealStore()
       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.reason);
+          }
+          return;
+        }
+
+
+
         console.log(JSON.parse(ev.data))
         switch (messageId) {
           case 'getState':
@@ -326,6 +354,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)