弹框确认和取消按钮位置不统一

1 year ago · cd06424309
5 changed files with 100 additions and 116 deletions
--- a/src/App.vue
+++ b/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>
--- a/src/components/dialogs/ClearRecordByKeysModal.vue
+++ b/src/components/dialogs/ClearRecordByKeysModal.vue
@ -1,37 +1,15 @@
 <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>
+  <my-modal type="confirm" icon="warning"
+    content="确定要删除所选消毒记录吗！"
+    v-model:visible="enable"
+    @ok="handleStart"
+    @cancel="handleCancel"
+  ></my-modal>
 </template>

 <script setup>
 import { useWebSocketStore } from '@/store'
-import { cleanDisinfectionRecordByKeysJSON } from '@/mock/command'
+import { cleanDisinfectionRecordByKeysJSON,getAllLocalHistoryData } from '@/mock/command'
 import { ref } from 'vue'
 // props
 const props = defineProps({
@ -55,6 +33,9 @@ const handleCancel = () => {
 const handleStart = () => {
  webSocketStore.sendCommandMsg(cleanDisinfectionRecordByKeysJSON(props.keys))
  enable.value = false;
+  setTimeout(() => {
+    webSocketStore.sendCommandMsg(getAllLocalHistoryData);
+  }, 300)
 }
 </script>

--- 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()
 }
--- 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"
+  <my-modal type="confirm" icon="warning"
+    v-model:visible="visible"
+    @ok="handleStart"
+    @cancel="handleCancel"
  >
-        <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>
+    <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;
--- a/src/components/dialogs/UserModal.vue
+++ b/src/components/dialogs/UserModal.vue
@ -1,35 +1,14 @@
 <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 +21,10 @@ const props = defineProps({
  },
 })

+/** @var {Boolean} */
+const visible = ref(true);
+
+
 const ok = () => {
  props.handleOk()
  props.hideUserModal()