完善操作mqtt机制，失败后回退按钮

src/views/appmana/deploy/components/ControlModal.vue

@@ -1,5 +1,14 @@
 <template>
-  <a-modal title="球阀控制" :width="width" :body-style="bodystyle" :visible="visible" @ok="handleOk" @cancel="handleCancel" footer="">
+  <a-modal
+    title="球阀控制"
+    :width="width"
+    :body-style="bodystyle"
+    :visible="visible"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    footer=""
+    v-model:open="visibleloading"
+  >
     <a-descriptions
       title="运行状态"
       layout="vertical"
@@ -42,6 +51,10 @@
         </a-form>
       </a-descriptions-item>
     </a-descriptions>
+    <!-- 全屏遮罩层 -->
+    <div v-if="loading" class="fullscreen-mask">
+      <a-spin tip="加载中..." size="large" :spinning="loading" />
+    </div>
   </a-modal>
 </template>
 
@@ -51,7 +64,11 @@
   import { getValveStatus, sendDeviceCmd, getRelayList } from '../SurvDeviceDeploy.api';
   import { message } from 'ant-design-vue';
   import { usePageMqtt } from '/@/components/mqtt/usePageMqtt';
-
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const visibleloading = ref(true);
+  const loading = ref(false);
+  const { createMessage, createConfirm } = useMessage();
+  let timer = null;
   // MQTT 配置
   const mqttOptions = {
     brokerUrl: import.meta.env.VITE_MQTT_BROKER_URL || 'ws://localhost:8083/mqtt',
@@ -141,6 +158,7 @@
                 if (source) {
                   Object.assign(member, {
                     value: source,
+                    checkValue: source,
                   });
                 }
               });
@@ -228,8 +246,44 @@
   });
 
   function switchChange(checked, relay) {
-    openMessage();
+    loading.value = true;
-    let ops = checked;
+    // 保存期望的目标状态（用户点击后的状态）
+    const ops = checked;
+    timer = setTimeout(() => {
+      // 超时未收到回执，重置 Switch 状态
+      if (relay.value == relay.checkValue) {
+        //两个值一致时，判定为操作成功，否则无回执或者回执与操作不一致
+        createConfirm({
+          title: '操作结果',
+          iconType: 'success',
+          content: '操作成功',
+          cancelButtonProps: {
+            style: { display: 'none' }, // 隐藏取消按钮
+          },
+          onOk: () => {
+            loading.value = false;
+          },
+        });
+      } else {
+        if (ops == '1') {
+          relay.value = '0';
+        } else {
+          relay.value = '1';
+        }
+        createConfirm({
+          title: '操作结果',
+          iconType: 'error',
+          content: '操作失败，设备未及时响应',
+          cancelButtonProps: {
+            style: { display: 'none' }, // 隐藏取消按钮
+          },
+          onOk: () => {
+            loading.value = false;
+          },
+        });
+      }
+    }, 3000);
+
     // if (checked === true) {
     //   ops = '1';
     // } else if (checked === false) {
@@ -399,4 +453,17 @@
     height: 100%;
     min-height: 180px;
   }
+
+  .fullscreen-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+  }
 </style>