离开页面的弹窗

src/components/SealTest.vue

@@ -80,7 +80,7 @@
 
 <script setup>
 import * as echarts from 'echarts'
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import SealPng from '@/assets/img/seal/seal.png'
 import StartAir from '@/assets/img/seal/start.png'
 import TestIcon from '@/assets/img/seal/test.png'
@@ -193,6 +193,28 @@ const timerReal = () => {
   }
 }
 
+watch(
+  () => sealStore.isStartTest,
+  (newValue, oldValue) => {
+    if (!newValue) {
+      stopTimer()
+    }
+  },
+)
+
+const stopTimer = () => {
+  // 改变测试前oldAirPressure为null
+  sealStore.updateOldAirPressure(null)
+  // 结束测试时将时间重置null
+  clearInterval(timerStart.value)
+  timerStart.value = null
+  resultTime.value = null
+  n_sec.value = 0
+  n_min.value = 0
+  n_hour.value = 0
+  sealStore.updateIsStartTest(false)
+}
+
 const timerFunc = () => {
   timerReal()
   timerStart.value = setInterval(() => {
@@ -222,20 +244,16 @@ const handleStartTest = flag => {
     // 也就是将getState中获取的当前值currentAirPressure赋予
     // 开始测试需要记录时间
     timerFunc()
+    // 开始测试时关闭空压机
+    // 关闭一个阀门
+    // websocketStore.sendCommandMsg(someAirSwitchJSON(0, 0))
+    // websocketStore.sendCommandMsg(someAirSwitchJSON(1, 0))
+    // testStore.updateAirCompressor(false)
     sealStore.updateOldAirPressure(sealStore.currentAirPressure)
     sealStore.updateIsStartTest(true)
   }
   if (flag == '2') {
-    // 改变测试前oldAirPressure为null
-    sealStore.updateOldAirPressure(null)
-    // 结束测试时将时间重置null
-    clearInterval(timerStart.value)
-    timerStart.value = null
-    resultTime.value = null
-    n_sec.value = 0
-    n_min.value = 0
-    n_hour.value = 0
-    sealStore.updateIsStartTest(false)
+    stopTimer()
   }
 }
 
@@ -477,6 +495,7 @@ onMounted(() => {
         padding-top: 16px;
         padding-left: 27px;
         padding-right: 27px;
+        padding-bottom: 20px;
         display: flex;
         flex-direction: column;
         .title {
@@ -499,6 +518,9 @@ onMounted(() => {
           line-height: normal;
           letter-spacing: 0.1em;
           color: #000000;
+          border-radius: 12px;
+          background: #fafafa;
+          box-sizing: border-box;
         }
       }
       .test_png {

src/components/dialogs/LeaveModal.vue

@@ -0,0 +1,150 @@
+<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>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useSealStore, useWebSocketStore } from '@/store'
+
+const sealStore = useSealStore()
+const websocketStore = useWebSocketStore()
+
+const props = defineProps({
+  hiddenLeaveModal: {
+    type: Function,
+  },
+  clickType: {
+    type: Number,
+  },
+  handleLogoutReal: {
+    type: Function,
+  },
+  changeTabReal: {
+    type: Function,
+  },
+})
+
+const handleCancel = () => {
+  props.hiddenLeaveModal()
+}
+
+const handleStart = () => {
+  // 结束当前测试
+  sealStore.updateIsStartTest(false)
+  // 需要执行原先点击该按钮的逻辑
+  props.hiddenLeaveModal()
+  if (props.clickType != -1) {
+    if (props.clickType == -2) {
+      props.handleLogoutReal()
+    } else {
+      props.changeTabReal(props.clickType)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.leave_modal {
+  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;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .red {
+        color: #fa1c1c;
+      }
+      .red2 {
+        color: #fa1c1c;
+        margin-top: 6px;
+      }
+    }
+    .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>

src/pages/Home.vue

@@ -352,6 +352,13 @@
       v-if="loginModalVisible"
       :hideLoginModal="hideLoginModal"
     />
+    <LeaveModal
+      :changeTabReal="changeTabReal"
+      :clickType="clickType"
+      :handleLogoutReal="handleLogoutReal"
+      :hiddenLeaveModal="hiddenLeaveModal"
+      v-if="leaveModalVisible"
+    />
   </div>
 </template>
 
@@ -364,6 +371,7 @@ import Formula from 'cpns/Formula'
 import Operator from 'cpns/Operator'
 import Audit from 'cpns/Audit'
 import SealTest from 'cpns/SealTest'
+import LeaveModal from 'cpns/dialogs/LeaveModal'
 import DisinfectionSetting from 'cpns/DisinfectionSetting'
 import Progress from 'cpns/Progress'
 import LiquidHandle from 'cpns/LiquidHandle'
@@ -375,6 +383,7 @@ import {
   useWebSocketStore,
   useSettingStore,
   useUserStore,
+  useSealStore,
 } from '@/store'
 import {
   logoutJSON,
@@ -389,6 +398,7 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 const webSocketStore = useWebSocketStore()
 const settingStore = useSettingStore()
+const sealStore = useSealStore()
 const userStore = useUserStore()
 const { socketCommandInstance } = storeToRefs(webSocketStore)
 webSocketStore.initCommandSocket()
@@ -426,7 +436,13 @@ const onChange = a => {
   input.value = a
 }
 
-const changeTab = index => {
+const leaveModalVisible = ref(false)
+
+const hiddenLeaveModal = () => {
+  leaveModalVisible.value = false
+}
+
+const changeTabReal = index => {
   if (index == 5) {
     // 判断是否为管理员登陆 如果为管理员直接显示，
     webSocketStore.sendCommandMsg(getDisinfectionConfigJSON)
@@ -445,6 +461,19 @@ const changeTab = index => {
   }
 }
 
+const clickType = ref(-1)
+
+const changeTab = index => {
+  // 判断如果tab不是密封测试 且 当前已经开始测试则需要弹窗提醒 以便关闭阀门
+  if (index != 8 && sealStore.isStartTest) {
+    // show modal 和 点击注销按钮同逻辑
+    clickType.value = index
+    leaveModalVisible.value = true
+    return
+  }
+  changeTabReal(index)
+}
+
 const getdateTime = () => {
   nowTime.value = moment().utcOffset(8).format('YYYY-MM-DD HH:mm:ss')
 }
@@ -472,6 +501,15 @@ onBeforeUnmount(() => {
 })
 
 const handleLogout = () => {
+  if (sealStore.isStartTest) {
+    // show modal 和 点击注销按钮同逻辑
+    leaveModalVisible.value = true
+    clickType.value = -2
+    return
+  }
+  handleLogoutReal()
+}
+const handleLogoutReal = () => {
   webSocketStore?.sendCommandMsg(logoutJSON)
   window.location.href = 'http://127.0.0.1/#/'
 }