遮罩

src/components/SealTest.vue

@@ -73,6 +73,14 @@
         </div>
       </div>
     </div>
+    <van-overlay :show="testOverlayVisible" z-index="3">
+      <div class="wrapper" @click.stop>
+        <div class="block">
+          <van-loading />
+          <p class="shutdown_text">正在充气...</p>
+        </div>
+      </div>
+    </van-overlay>
   </div>
 </template>
 
@@ -105,6 +113,8 @@ const sealStore = useSealStore()
 const testStore = useTestStore()
 const websocketStore = useWebSocketStore()
 
+const testOverlayVisible = ref(false)
+
 const { airInletProportionalInitVal, airOutletProportionalInitVal } =
   storeToRefs(sealStore)
 
@@ -114,7 +124,7 @@ const sealOptions = ref({
     {
       type: 'gauge',
       min: 0,
-      max: 30,
+      max: 10,
       progress: {
         show: true,
         width: 18,
@@ -261,6 +271,7 @@ const newStartTest = async flag => {
   if (flag == 1) {
     // 开始测试
     // 启动计时器
+    testOverlayVisible.value = true
     timerFunc()
     sealStore.updateIsStartTest(true)
     // 空压机选通阀切换到通道2（空气）
@@ -287,6 +298,7 @@ const newStartTest = async flag => {
     websocketStore.sendCommandMsg(airCompressorChannelSelectJSON([1]))
     // 等待5s
     await wait(sleepVal2.value * 1000)
+    testOverlayVisible.value = false
     // 记录当前压力数值作为初始压力值
     websocketStore.sendCommandMsg(airCompressorGetPressureDirectJSON)
   }
@@ -336,7 +348,7 @@ onMounted(() => {
         {
           type: 'gauge',
           min: 0,
-          max: 30,
+          max: 10,
           progress: {
             show: true,
             width: 18,
@@ -606,4 +618,30 @@ onMounted(() => {
 //   width: 50px;
 //   height: 100px;
 // }
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.block {
+  width: 120px;
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  align-items: center;
+  justify-content: center;
+  .shutdown_text {
+    margin-top: 24px;
+    font-family: Source Han Sans CN;
+    font-size: 18px;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0.06em;
+    color: #fff;
+    white-space: nowrap;
+  }
+}
 </style>