diff --git a/.env.development b/.env.development
index b0855a0..e4a1d61 100644
--- a/.env.development
+++ b/.env.development
@@ -6,7 +6,7 @@ VITE_PUBLIC_PATH = /
 
 # 跨域代理，您可以配置多个 ,请注意，没有换行符
 VITE_PROXY = [["/jeecgboot","http://192.168.2.110:9999"],["/upload","http://192.168.2.110:3300/upload"]]
-#VITE_PROXY = [["/jeecgboot","https://fxnsp.sxcooh.com/lh-api/"],["/upload","http://192.168.2.111:3300/upload"]]
+VITE_PROXY = [["/jeecgboot","https://fxnsp.sxcooh.com/lh-api/"],["/upload","http://192.168.2.111:3300/upload"]]
 
 # 控制台不输出
 VITE_DROP_CONSOLE = false
@@ -16,7 +16,7 @@ VITE_GLOB_API_URL=/jeecgboot
 
 #后台接口全路径地址(必填)
 VITE_GLOB_DOMAIN_URL=http://192.168.2.110:9999
-#VITE_GLOB_DOMAIN_URL=https://fxnsp.sxcooh.com
+VITE_GLOB_DOMAIN_URL=https://fxnsp.sxcooh.com
 
 # 接口前缀
 VITE_GLOB_API_URL_PREFIX=
diff --git a/src/views/appmana/deploy/SurvDeviceDeploy.api.ts b/src/views/appmana/deploy/SurvDeviceDeploy.api.ts
index 28b8b7e..fbd667a 100644
--- a/src/views/appmana/deploy/SurvDeviceDeploy.api.ts
+++ b/src/views/appmana/deploy/SurvDeviceDeploy.api.ts
@@ -221,5 +221,7 @@ export const getRelayList = (params) => {
  * @param isUpdate
  */
 export const sendRelayQuery = (params) => {
-  return defHttp.get({ url: Api.queryRelay, params }, { isTransformResponse: false });
+  return defHttp.post({ url: Api.queryRelay, params }, { isTransformResponse: false });
 }
+
+
diff --git a/src/views/appmana/deploy/components/ControlModal.vue b/src/views/appmana/deploy/components/ControlModal.vue
index 0f21032..f8ed92e 100644
--- a/src/views/appmana/deploy/components/ControlModal.vue
+++ b/src/views/appmana/deploy/components/ControlModal.vue
@@ -1,74 +1,218 @@
 <template>
   <a-modal
-    title="球阀控制"
+    title="系统开关控制中心"
     :width="width"
     :body-style="bodystyle"
     :visible="visible"
     @ok="handleOk"
     @cancel="handleCancel"
     footer=""
-    v-model:open="visibleloading"
+    v-model:open="visible"
+    :destroyOnClose="true"
+    :getContainer="false"
   >
-    <a-descriptions
-      title="运行状态"
-      layout="vertical"
-      bordered
-      :labelStyle="{ fontWeight: 'bold', textAlign: 'center' }"
-      :contentStyle="{ textAlign: 'center' }"
-    >
-      <a-descriptions-item :label="item.runName" v-for="item in formState.runList" :key="item.id">
-        <span style="color: red" v-if="item.value == '0'">停止</span>
-        <span style="color: green" v-else-if="item.value == '1'">运行</span>
-        <span style="color: orange" v-else>待同步</span>
-      </a-descriptions-item>
-    </a-descriptions>
+    <!-- 顶部操作栏 -->
+    <div class="toolbar">
+      <div class="toolbar-left">
+        <div class="sync-status">
+          <sync-outlined :spin="syncing" class="sync-icon" />
+          <span class="sync-label">数据同步</span>
+          <span class="sync-timer">{{ formatTimeSinceUpdate }}</span>
+        </div>
+        <span class="update-time" v-if="formState.dataTime"> <clock-circle-outlined /> 最后更新: {{ formState.dataTime }} </span>
+      </div>
+      <div class="toolbar-right">
+        <a-button type="primary" size="small" @click="handleResync" :loading="syncing">
+          <template #icon><reload-outlined /></template>
+          重新同步
+        </a-button>
+      </div>
+    </div>
 
-    <a-descriptions title="" layout="vertical" bordered style="margin-top: 20px">
-      <a-descriptions-item label="控制项">
-        <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
-          <!--          <a-form-item label="上报时间">-->
-          <!--            <a-input v-model:value="formState.dataTime" disabled="true" />-->
-          <!--          </a-form-item>-->
-          <div class="card-container">
-            <a-row :gutter="16" type="flex">
-              <a-col :span="8" v-for="group in formState.moduleList" :key="group.id" class="card-col">
-                <a-card :title="group.groupName" :bordered="true">
-                  <!--                  <template #extra><a href="#">一键启动</a></template>-->
-                  <a-form-item :label="item.relayName" v-for="item in group.relayList" :key="item.id">
-                    <a-switch
-                      v-model:checked="item.value"
-                      checked-children="打开"
-                      un-checked-children="关闭"
-                      :checked-value="'1'"
-                      :un-checked-value="'0'"
-                      @change="(checked) => switchChange(checked, item)"
-                    />
-                  </a-form-item>
-                </a-card>
-              </a-col>
-            </a-row>
+    <!-- 运行状态区 - 全局状态总揽 -->
+    <div class="panel status-panel">
+      <div class="panel-header">
+        <span class="panel-title">运行状态</span>
+        <div class="status-summary">
+          <span class="summary-item running"
+            ><span class="dot"></span>运行中 <strong>{{ runningCount }}</strong></span
+          >
+          <span class="summary-item stopped"
+            ><span class="dot"></span>已停止 <strong>{{ stoppedCount }}</strong></span
+          >
+          <span class="summary-item error"
+            ><span class="dot"></span>异常 <strong>{{ errorCount }}</strong></span
+          >
+          <span class="summary-item pending"
+            ><span class="dot"></span>待确认 <strong>{{ pendingCount }}</strong></span
+          >
+        </div>
+      </div>
+      <div class="status-grid">
+        <div
+          v-for="item in formState.runList"
+          :key="item.id"
+          class="status-card"
+          :class="[getStatusClass(item.value), { 'data-updated': item.highlight }]"
+        >
+          <div class="status-icon">
+            <component :is="getStatusIcon(item.value)" />
           </div>
-        </a-form>
-      </a-descriptions-item>
-    </a-descriptions>
+          <div class="status-content">
+            <div class="status-label">{{ item.runName }}</div>
+            <div class="status-value">
+              <span class="status-text">{{ getStatusText(item.value) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 控制项区 - 服务配置 -->
+    <div class="panel control-panel">
+      <div class="panel-header">
+        <span class="panel-title">控制项</span>
+      </div>
+      <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <div class="card-container">
+          <a-row :gutter="[16, 16]" type="flex">
+            <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="5" :xxl="4" v-for="group in formState.moduleList" :key="group.id" class="card-col">
+              <a-card class="group-card" :bordered="false">
+                <template #title>
+                  <div class="group-title">
+                    <span class="group-name">{{ group.groupName }}</span>
+                    <a-tag v-if="group.groupNotes" color="error" class="group-tag" :title="group.groupNotes">{{ group.groupNotes }}</a-tag>
+                  </div>
+                </template>
+                <div class="relay-list">
+                  <div v-for="item in group.relayList" :key="item.id" class="relay-item" :class="{ 'data-updated': item.highlight }">
+                    <div class="relay-label">
+                      <span class="relay-name" :title="item.relayName">{{ item.relayName }}</span>
+                    </div>
+                    <div class="relay-control">
+                      <a-switch
+                        v-if="item.relayCate == 1"
+                        v-model:checked="item.value"
+                        checked-children="启用"
+                        un-checked-children="禁用"
+                        :checked-value="'1'"
+                        :un-checked-value="'0'"
+                        @change="(checked) => switchChange(checked, item)"
+                        size="small"
+                      />
+                      <a-input
+                        v-else-if="item.relayCate == 2"
+                        v-model:value="item.value"
+                        placeholder=""
+                        @blur="inputChange(item)"
+                        size="small"
+                        class="relay-input"
+                        style="width: 56px; text-align: center"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </a-card>
+            </a-col>
+          </a-row>
+        </div>
+      </a-form>
+    </div>
+
     <!-- 全屏遮罩层 -->
     <div v-if="loading" class="fullscreen-mask">
-      <a-spin tip="加载中..." size="large" :spinning="loading" />
+      <a-spin tip="操作中..." size="large" :spinning="loading" />
     </div>
   </a-modal>
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, onUnmounted, ref, reactive, nextTick, defineExpose } from 'vue';
+  import { onMounted, onUnmounted, ref, reactive, nextTick, defineExpose, computed, onBeforeUnmount } from 'vue';
   import type { UnwrapRef } from 'vue';
+  import {
+    SyncOutlined,
+    ClockCircleOutlined,
+    ReloadOutlined,
+    CheckCircleOutlined,
+    CloseCircleOutlined,
+    ExclamationCircleOutlined,
+    MinusCircleOutlined,
+    PoweroffOutlined,
+  } from '@ant-design/icons-vue';
   import { getValveStatus, sendDeviceCmd, getRelayList, sendRelayQuery } 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 visible = ref(false);
   const loading = ref(false);
+  const syncing = ref(false);
+  const refreshing = ref(false);
   const { createMessage, createConfirm } = useMessage();
-  let timer = null;
+
+  // 计时器相关
+  const lastUpdateTime = ref<number>(Date.now());
+  const timerInterval = ref<number | null>(null);
+  const syncInterval = ref<number | null>(null); //每分钟同步定时器
+  const secondsSinceUpdate = ref<number>(0);
+
+  // 格式化时间显示
+  const formatTimeSinceUpdate = computed(() => {
+    const seconds = secondsSinceUpdate.value;
+    if (seconds < 60) {
+      return `${seconds}秒前`;
+    } else if (seconds < 3600) {
+      const mins = Math.floor(seconds / 60);
+      const secs = seconds % 60;
+      return `${mins}分${secs > 0 ? secs + '秒' : ''}前`;
+    } else {
+      const hours = Math.floor(seconds / 3600);
+      const mins = Math.floor((seconds % 3600) / 60);
+      return `${hours}小时${mins > 0 ? mins + '分' : ''}前`;
+    }
+  });
+
+  // 重置计时器
+  const resetTimer = () => {
+    lastUpdateTime.value = Date.now();
+    secondsSinceUpdate.value = 0;
+  };
+
+  // 启动计时器
+  const startTimer = () => {
+    if (timerInterval.value) {
+      clearInterval(timerInterval.value);
+    }
+    timerInterval.value = window.setInterval(() => {
+      secondsSinceUpdate.value = Math.floor((Date.now() - lastUpdateTime.value) / 1000);
+    }, 1000);
+  };
+
+  // 停止计时器
+  const stopTimer = () => {
+    if (timerInterval.value) {
+      clearInterval(timerInterval.value);
+      timerInterval.value = null;
+    }
+  };
+
+  // 统计状态数量
+  const runningCount = computed(() => {
+    return formState.runList.filter((item) => item.value === '1').length;
+  });
+  const stoppedCount = computed(() => {
+    return formState.runList.filter((item) => item.value === '0').length;
+  });
+  const errorCount = computed(() => {
+    return formState.runList.filter((item) => item.value === '2').length;
+  });
+  const pendingCount = computed(() => {
+    return formState.runList.filter((item) => item.value === '3').length;
+  });
+
+  const timerMap = new Map();
+  const relayMap = new Map();
+
   // MQTT 配置
   const mqttOptions = {
     brokerUrl: import.meta.env.VITE_MQTT_BROKER_URL || 'ws://localhost:8083/mqtt',
@@ -77,142 +221,11 @@
     keepalive: 60,
     reconnectPeriod: 5000,
   };
-  // 使用页面级 MQTT
   const { isConnected, isConnecting, error, connectAndSubscribe, publish, disconnect } = usePageMqtt(mqttOptions);
 
-  // 设备数据
-  const deviceData = reactive({
-    temperature: 0,
-    humidity: 0,
-    status: 'offline',
-    lastUpdate: 0,
-  });
-
-  // 消息日志
-  interface LogEntry {
-    id: number;
-    topic: string;
-    message: string;
-    timestamp: number;
-  }
-
-  const logs = ref<LogEntry[]>([]);
-  let logId = 0;
-
-  // 格式化时间
-  const formatTime = (timestamp: number) => {
-    if (!timestamp) return '--:--:--';
-    return new Date(timestamp).toLocaleTimeString();
-  };
-
-  // 添加日志
-  const addLog = (topic: string, message: string) => {
-    logs.value.unshift({
-      id: logId++,
-      topic,
-      message: typeof message === 'object' ? JSON.stringify(message) : message,
-      timestamp: Date.now(),
-    });
-
-    // 保留最近100条日志
-    if (logs.value.length > 100) {
-      logs.value.pop();
-    }
-  };
-
-  // 处理接收到的消息
-  const handleMessage = (payload: string, topic: string) => {
-    // console.log('处理消息:', topic, payload);
-
-    try {
-      const data = JSON.parse(payload);
-
-      // 添加日志
-      addLog(topic, payload);
-      let initData = data.rw_prot;
-      if (!initData) {
-        console.log('initDataC========goParams');
-        initData = data.params;
-      }
-      console.log('initData========', initData);
-      if (initData) {
-        let dataJson = initData.r_data;
-        if (!dataJson) {
-          console.log('dataJsonC========GoWdata');
-          dataJson = initData.w_data;
-        }
-        console.log('dataJson========', dataJson);
-        if (dataJson !== undefined) {
-          // 先构建源数据的 Map
-          const sourceMap = dataJson.reduce((map, item) => {
-            map[item.name] = item.value;
-            return map;
-          }, {});
-          console.log('sourceMapCheck========', sourceMap);
-          // 然后遍历目标数组赋值
-          // 1.状态部分
-          formState.runList.forEach((target) => {
-            const source = sourceMap[target.runKey];
-            if (source) {
-              Object.assign(target, {
-                value: source,
-              });
-            }
-          });
-
-          // 2.控制项部分
-          formState.moduleList.forEach((target) => {
-            if (target.relayList) {
-              // 遍历内层数组
-              target.relayList.forEach((member) => {
-                const source = sourceMap[member.relayKey];
-                console.log(member.relayKey + '========wtf========' + source);
-                if (source) {
-                  Object.assign(member, {
-                    value: source,
-                    checkValue: source,
-                  });
-                }
-                console.log(member.relayKey + '========result========' + member.value + ':::' + member.checkValue);
-              });
-            }
-          });
-        }
-        console.log('check-----', formState.moduleList);
-        deviceData.temperature = data.temperature;
-      }
-    } catch (e) {
-      // 非 JSON 格式，直接作为文本处理
-      addLog(topic, payload);
-    }
-  };
-
-  // 发送设备控制指令
-  const sendCommand = async (topic: string, command: string) => {
-    if (!isConnected.value) {
-      addLog('system', 'MQTT未连接，无法发送指令');
-      return;
-    }
-
-    // const payload = {
-    //   command,
-    //   timestamp: Date.now(),
-    //   requestId: `${Date.now()}-${Math.random().toString(36).substring(2, 10)}`,
-    // };
-    const payload = command;
-    console.log('sendCommand===', topic, command);
-    try {
-      await publish(topic, payload);
-      addLog(topic, `发送指令: ${command}`);
-    } catch (err) {
-      console.error('发送指令失败:', err);
-      addLog(topic, `指令发送失败: ${command}`);
-    }
-  };
-
   const bodystyle = {
-    height: '1080px',
-    margin: '20px',
+    padding: '0 0 20px 0',
+    height: '900px',
   };
 
   interface FormState {
@@ -221,9 +234,9 @@
     delivery2: boolean;
     delivery3: boolean;
     dataTime: string;
-    moduleList: [];
-    runList: [];
-    deployInfo: {};
+    moduleList: any[];
+    runList: any[];
+    deployInfo: any;
   }
   const formState: UnwrapRef<FormState> = reactive({
     deployCode: '',
@@ -235,263 +248,857 @@
     deployInfo: {},
   });
 
-  const labelCol = { style: { width: '150px' } };
+  const labelCol = { style: { width: '80px' } };
   const wrapperCol = { span: 14 };
-  const title = ref<string>('');
-  const width = ref<number>(1000);
-  const visible = ref<boolean>(false);
-  const disableSubmit = ref<boolean>(false);
-  const registerForm = ref();
-  const emit = defineEmits(['register', 'success']);
+  const title = ref<string>('系统开关控制中心');
+  const width = ref<number>(1400);
+
+  const emit = defineEmits(['register', 'success', 'resync']);
 
   const key = 'updatable';
-  const openMessage = () => {
-    message.loading({ content: '发送指令中', key, duration: 7 });
+
+  function getStatusText(value: string) {
+    const map: Record<string, string> = {
+      '0': '已停止',
+      '1': '运行中',
+      '2': '异常',
+      '3': '待确认',
+    };
+    return map[value] || '未知';
+  }
+
+  function getStatusClass(value: string) {
+    const map: Record<string, string> = {
+      '0': 'status-stopped',
+      '1': 'status-running',
+      '2': 'status-error',
+      '3': 'status-pending',
+    };
+    return map[value] || '';
+  }
+
+  function getStatusIcon(value: string) {
+    const map: Record<string, any> = {
+      '0': CloseCircleOutlined,
+      '1': CheckCircleOutlined,
+      '2': ExclamationCircleOutlined,
+      '3': MinusCircleOutlined,
+    };
+    return map[value] || PoweroffOutlined;
+  }
+
+  const handleMessage = (payload: string, topic: string) => {
+    try {
+      const data = JSON.parse(payload);
+      let initData = data.rw_prot || data.params;
+      if (initData) {
+        let dataJson = initData.r_data;
+        if (dataJson !== undefined) {
+          const sourceMap = dataJson.reduce((map: any, item: any) => {
+            map[item.name] = item.value;
+            return map;
+          }, {});
+
+          for (const key in sourceMap) {
+            if (timerMap.has(key)) {
+              clearTimeout(timerMap.get(key));
+              timerMap.delete(key);
+              const relay = relayMap.get(key);
+              if (sourceMap[key] === relay?.value) {
+                loading.value = false;
+              }
+            }
+          }
+
+          formState.runList.forEach((target) => {
+            const source = sourceMap[target.runKey];
+            if (source !== undefined) {
+              if (target.value !== source) {
+                Object.assign(target, { value: source });
+                resetTimer();
+                nextTick(() => {
+                  target.highlight = true;
+                  setTimeout(() => {
+                    target.highlight = false;
+                  }, 2000);
+                });
+              } else {
+                Object.assign(target, { value: source });
+                resetTimer();
+              }
+            }
+          });
+
+          formState.moduleList.forEach((target) => {
+            if (target.relayList) {
+              target.relayList.forEach((member: any) => {
+                const source = sourceMap[member.relayKey];
+                if (source !== undefined) {
+                  if (member.value !== source) {
+                    Object.assign(member, { value: source, checkValue: source });
+                    resetTimer();
+                    nextTick(() => {
+                      member.highlight = true;
+                      setTimeout(() => {
+                        member.highlight = false;
+                      }, 2000);
+                    });
+                  } else {
+                    Object.assign(member, { value: source, checkValue: source });
+                    resetTimer();
+                  }
+                }
+              });
+            }
+          });
+        }
+      }
+    } catch (e) {
+      console.warn('消息解析失败:', e);
+    }
   };
 
-  // 页面进入时连接 MQTT
-  onMounted(() => {});
+  const sendCommand = async (topic: string, command: string) => {
+    if (!isConnected.value) {
+      message.warning('MQTT未连接，请检查网络');
+      return;
+    }
+    try {
+      await publish(topic, command);
+    } catch (err) {
+      console.error('发送指令失败:', err);
+      message.error('指令发送失败');
+    }
+  };
 
-  // 页面关闭时断开连接
-  onUnmounted(() => {
-    console.log('页面卸载，断开 MQTT...');
-    disconnect();
-  });
-
-  function switchChange(checked, relay) {
+  function switchChange(checked: string, relay: any) {
     loading.value = true;
-    // 保存期望的目标状态（用户点击后的状态）
     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;
-          },
-        });
-      }
-      //重新查询所有参数
-      fetchRelayStatus(formState.deployInfo.deployId);
-    }, 6000);
 
-    // if (checked === true) {
-    //   ops = '1';
-    // } else if (checked === false) {
-    //   ops = '0';
-    // }
-    // let parmas = { relayId: relay.id, ops: ops };
-    // sendDeviceCmd(parmas).then((res) => {
-    //   if (res.code == 500) {
-    //     //操作失败
-    //     formState[relay.id] = false;
-    //     message.error({ content: res.message, key, duration: 2 });
-    //   }
-    // });
-    if ('1' == ops) {
+    if (timerMap.has(relay.relayKey)) {
+      clearTimeout(timerMap.get(relay.relayKey));
+    }
+    timerMap.set(
+      relay.relayKey,
+      setTimeout(() => {
+        checkSwitchChange(checked, relay);
+      }, 6000)
+    );
+    relay.curCheck = checked;
+    relayMap.set(relay.relayKey, relay);
+
+    if (ops === '1') {
       sendCommand(formState.deployInfo.sendTopic, relay.registerCmdOn);
-    } else if ('0' == ops) {
+    } else {
       sendCommand(formState.deployInfo.sendTopic, relay.registerCmdOff);
     }
+    fetchSingleRelayStatus(formState.deployInfo.deployId, relay.relayKey);
   }
 
-  function on1SwitchChange(checked) {
-    openMessage();
-    if (checked === true) {
-      sendDeviceCmd({ deployCode: formState.deployCode, os: '01', valveCode: '01' }).then((res) => {
-        if (res.code == 500) {
-          //操作失败
-          formState.delivery1 = false;
-          message.error({ content: res.message, key, duration: 2 });
-        }
+  function checkSwitchChange(checked: string, relay: any) {
+    if (relay.value === relay.checkValue) {
+      const currentGroup = formState.moduleList.find((group: any) => group.id === relay.groupId);
+      let msg = '操作成功';
+      if (currentGroup?.isMutual === 1 && checked === '1') {
+        msg = `${relay.relayName}已启用，确定后将关闭同组其他服务`;
+      }
+
+      createConfirm({
+        title: '操作结果',
+        iconType: 'success',
+        content: msg,
+        cancelButtonProps: { style: { display: 'none' } },
+        onOk: () => {
+          loading.value = false;
+          if (currentGroup?.isMutual === 1 && checked === '1') {
+            currentGroup.relayList.forEach((other: any) => {
+              if (other.id !== relay.id && other.value === '1') {
+                other.value = '0';
+                switchChange('0', other);
+              }
+            });
+          }
+        },
       });
-    } else if (checked === false) {
-      sendDeviceCmd({ deployCode: formState.deployCode, os: '00', valveCode: '01' }).then((res) => {
-        if (res.code == 500) {
-          //操作失败
-          formState.delivery1 = true;
-          message.error({ content: res.message, key, duration: 2 });
-        }
+    } else {
+      relay.value = checked === '1' ? '0' : '1';
+      createConfirm({
+        title: '操作结果',
+        iconType: 'error',
+        content: '操作失败，设备未及时响应',
+        cancelButtonProps: { style: { display: 'none' } },
+        onOk: () => {
+          loading.value = false;
+        },
       });
     }
   }
 
-  function on2SwitchChange(checked) {
-    openMessage();
-    if (checked === true) {
-      sendDeviceCmd({ deployCode: formState.deployCode, os: '01', valveCode: '02' }).then((res) => {
-        if (res.code == 500) {
-          formState.delivery2 = false;
-          message.error({ content: res.message, key, duration: 2 });
-        }
+  function inputChange(relay: any) {
+    loading.value = true;
+    if (timerMap.has(relay.relayKey)) {
+      clearTimeout(timerMap.get(relay.relayKey));
+    }
+    timerMap.set(
+      relay.relayKey,
+      setTimeout(() => {
+        checkInputChange(relay);
+      }, 6000)
+    );
+    relayMap.set(relay.relayKey, relay);
+    const finalCmd = relay.registerCmdOn.replace(/#val#/g, relay.value);
+    sendCommand(formState.deployInfo.sendTopic, finalCmd);
+    fetchSingleRelayStatus(formState.deployInfo.deployId, relay.relayKey);
+  }
+
+  function checkInputChange(relay: any) {
+    if (relay.value === relay.checkValue) {
+      createConfirm({
+        title: '操作结果',
+        iconType: 'success',
+        content: '操作成功',
+        cancelButtonProps: { style: { display: 'none' } },
+        onOk: () => {
+          loading.value = false;
+        },
       });
-    } else if (checked === false) {
-      sendDeviceCmd({ deployCode: formState.deployCode, os: '00', valveCode: '02' }).then((res) => {
-        if (res.code == 500) {
-          formState.delivery2 = true;
-          message.error({ content: res.message, key, duration: 2 });
-        }
+    } else {
+      relay.value = relay.checkValue;
+      createConfirm({
+        title: '操作结果',
+        iconType: 'error',
+        content: '操作失败，设备未及时响应',
+        cancelButtonProps: { style: { display: 'none' } },
+        onOk: () => {
+          loading.value = false;
+        },
       });
     }
   }
 
-  /**
-   * 控制
-   */
-  function showup(record) {
-    title.value = '球阀控制';
+  function showup(record: any) {
     visible.value = true;
     formState.moduleList = [];
     formState.runList = [];
     formState.dataTime = '';
     formState.deployInfo = record;
-    console.log(record);
-    console.log('页面加载，连接 MQTT...', formState.deployInfo.receiveTopic);
-
-    // 需要订阅的主题
-    const subscribeTopic = formState.deployInfo.receiveTopic; // 传感器数据主题
-
-    // 连接并订阅
-    connectAndSubscribe(subscribeTopic, handleMessage);
+    resetTimer();
+    startTimer();
+    startSyncTimer();
+    connectAndSubscribe(record.receiveTopic, handleMessage);
     relayData(record.deployId);
   }
 
-  function relayData(deployIds) {
-    getRelayList({ deployId: deployIds }).then((res) => {
-      if (res.code == 200) {
-        formState.moduleList = res.result.moduleList;
-        formState.runList = res.result.runStatus;
-        formState.dataTime = res.result.dataTime;
-      } else {
+  function relayData(deployIds: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      getRelayList({ deployId: deployIds })
+        .then((res) => {
+          if (res.code === 200) {
+            formState.moduleList = res.result.moduleList;
+            formState.runList = res.result.runStatus;
+            formState.dataTime = res.result.dataTime;
+            // resetTimer();
+            resolve();
+          } else {
+            reject(new Error(res.message || '获取数据失败'));
+          }
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  }
+
+  function fetchSingleRelayStatus(deployId: string, relayKey: string) {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        sendRelayQuery({ deployId, relayKeys: [relayKey] }).then((res) => {
+          resolve(res);
+        });
+      }, 1000);
+    });
+  }
+
+  // 重新同步按钮点击
+  const handleResync = async () => {
+    if (syncing.value) return;
+    syncing.value = true;
+
+    try {
+      // 触发父组件的重新同步事件
+      emit('resync', formState.deployInfo);
+
+      // 等待 relayData 执行完成
+      await relayData(formState.deployInfo.deployId);
+
+      // 所有逻辑完成后提示
+      message.success('重新同步完成');
+    } catch (error) {
+      message.error('重新同步失败，请重试');
+      console.error('同步失败:', error);
+    } finally {
+      syncing.value = false;
+    }
+  };
+
+  // 启动每分钟同步
+  const startSyncTimer = () => {
+    if (syncInterval.value) {
+      clearInterval(syncInterval.value);
+      syncInterval.value = null;
+    }
+    syncInterval.value = window.setInterval(() => {
+      if (formState.deployInfo?.deployId) {
+        relayData(formState.deployInfo.deployId);
       }
-    });
-  }
+    }, 60000); // 60秒 = 1分钟
+  };
 
-  function fetchRelayStatus(deployIds) {
-    getRelayList({ deployId: deployIds }).then((res) => {
-      if (res.code == 200) {
-        formState.dataTime = res.result.dataTime;
-      } else {
-      }
-    });
-  }
+  // 停止每分钟同步
+  const stopSyncTimer = () => {
+    if (syncInterval.value) {
+      clearInterval(syncInterval.value);
+      syncInterval.value = null;
+    }
+  };
 
-  // getValveStatus({ deployCode: record.deployCode }).then((res) => {
-  //   if (res.code == 200) {
-  //     formState.dataTime=res.result.dataTime
-  //     formState.deployCode = record.deployCode
-  //     if(res.result.firstValveStatus == "01"){
-  //       formState.delivery1=true
-  //     }else{
-  //       formState.delivery1=false
-  //     }
-  //     if(res.result.secondValveStatus == "01"){
-  //       formState.delivery2=true
-  //     }else{
-  //       formState.delivery2=false
-  //     }
-  //   } else {
-  //   }
-  // })
-
-  /**
-   * 编辑
-   * @param record
-   */
-  function edit(record) {
-    title.value = disableSubmit.value ? '详情' : '编辑';
-    visible.value = true;
-    nextTick(() => {
-      registerForm.value.edit(record);
-    });
-  }
-
-  /**
-   * 确定按钮点击事件
-   */
-  function handleOk() {
-    registerForm.value.submitForm();
-  }
-
-  /**
-   * form保存回调事件
-   */
-  function submitCallback() {
-    handleCancel();
-    emit('success');
-  }
-
-  /**
-   * 取消按钮回调事件
-   */
   function handleCancel() {
     visible.value = false;
+    stopTimer();
+    stopSyncTimer();
     disconnect();
+    timerMap.clear();
+    relayMap.clear();
   }
 
+  function handleOk() {
+    handleCancel();
+  }
+
+  onMounted(() => {
+    startTimer();
+  });
+
+  onBeforeUnmount(() => {
+    stopTimer();
+    stopSyncTimer();
+    timerMap.clear();
+    relayMap.clear();
+  });
+
   defineExpose({
     showup,
-    edit,
-    disableSubmit,
   });
 </script>
 
-<style>
-  /**隐藏样式-modal确定按钮 */
-  .jee-hidden {
-    display: none !important;
+<style scoped>
+  /* ========== Modal 容器高度 ========== */
+  :deep(.ant-modal) {
+    max-width: 95vw;
+  }
+
+  :deep(.ant-modal-body) {
+    padding: 0;
+    min-height: 580px; /* 增加100px，原约480px */
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+
+  /* ========== 顶部工具栏 ========== */
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 24px;
+    background: #f7f9fc;
+    border-bottom: 1px solid #e8ecf1;
+  }
+
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+
+  .sync-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .sync-icon {
+    font-size: 14px;
+    color: #1890ff;
+  }
+
+  .sync-label {
+    font-size: 13px;
+    color: #5a6a7e;
+    font-weight: 500;
+  }
+
+  .sync-timer {
+    font-size: 13px;
+    color: #1890ff;
+    font-weight: 500;
+    min-width: 60px;
+    background: #e6f7ff;
+    padding: 0 10px;
+    border-radius: 12px;
+    line-height: 24px;
+  }
+
+  .update-time {
+    font-size: 13px;
+    color: #8c8c8c;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .toolbar-right {
+    display: flex;
+    gap: 8px;
+  }
+
+  /* ========== 面板样式 ========== */
+  .panel {
+    background: #ffffff;
+    border-radius: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 24px;
+    background: #ffffff;
+    border-bottom: 1px solid #e8ecf1;
+  }
+
+  .panel-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #1a2332;
+  }
+
+  /* ========== 运行状态区 ========== */
+  .status-panel {
+    border-bottom: 1px solid #e8ecf1;
+  }
+
+  .status-summary {
+    display: flex;
+    gap: 20px;
+  }
+
+  .summary-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: #5a6a7e;
+  }
+
+  .summary-item .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+  }
+
+  .summary-item.running .dot {
+    background: #52c41a;
+  }
+  .summary-item.stopped .dot {
+    background: #d9d9d9;
+  }
+  .summary-item.error .dot {
+    background: #ff4d4f;
+  }
+  .summary-item.pending .dot {
+    background: #faad14;
+  }
+
+  .summary-item strong {
+    color: #1a2332;
+    font-size: 15px;
+  }
+
+  .status-grid {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 10px;
+    padding: 16px 24px;
+  }
+
+  @media (max-width: 1200px) {
+    .status-grid {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .status-grid {
+      grid-template-columns: repeat(2, 1fr);
+      padding: 12px 16px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .status-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .status-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    background: #f7f9fc;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    transition: all 0.3s ease;
+    min-width: 0;
+  }
+
+  .status-card:hover {
+    background: #f0f3f8;
+    border-color: #d9e1ec;
+  }
+
+  .status-card .status-icon {
+    font-size: 20px;
+    flex-shrink: 0;
+    width: 28px;
+    text-align: center;
+  }
+
+  .status-card.status-running .status-icon {
+    color: #52c41a;
+  }
+  .status-card.status-stopped .status-icon {
+    color: #bfbfbf;
+  }
+  .status-card.status-error .status-icon {
+    color: #ff4d4f;
+  }
+  .status-card.status-pending .status-icon {
+    color: #faad14;
+  }
+
+  .status-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .status-label {
+    font-size: 12px;
+    color: #8c8c8c;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .status-value .status-text {
+    font-size: 14px;
+    font-weight: 600;
+    color: #1a2332;
+  }
+
+  .status-card.status-running .status-text {
+    color: #52c41a;
+  }
+  .status-card.status-stopped .status-text {
+    color: #bfbfbf;
+  }
+  .status-card.status-error .status-text {
+    color: #ff4d4f;
+  }
+  .status-card.status-pending .status-text {
+    color: #faad14;
+  }
+
+  /* ========== 控制项区 ========== */
+  .control-panel .panel-header {
+    border-bottom: 1px solid #e8ecf1;
   }
 
   .card-container {
-    width: 100%;
+    padding: 16px 24px;
+    height: calc(100% - 60px);
+    overflow-y: auto;
+  }
+
+  .card-container::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  .card-container::-webkit-scrollbar-thumb {
+    background: #d9d9d9;
+    border-radius: 2px;
+  }
+
+  .card-container::-webkit-scrollbar-thumb:hover {
+    background: #bfbfbf;
   }
 
   .card-col {
-    flex: 0 0 33.333333%; /* 每个卡片占1/3宽度 */
-    max-width: 33.333333%; /* 最大宽度也是1/3 */
-    margin-bottom: 16px; /* 行间距 */
+    display: flex;
   }
 
-  /* 可选：固定卡片高度统一 */
-  :deep(.ant-card) {
-    height: 100%;
-    min-height: 180px;
+  .group-card {
+    flex: 1;
+    border-radius: 8px;
+    border: 1px solid #e8ecf1;
+    transition: all 0.3s ease;
+    background: #fafbfc;
+    min-height: 160px;
+    max-width: 100%;
+    overflow: hidden;
   }
 
+  .group-card:hover {
+    border-color: #d0d8e4;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  .group-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .group-name {
+    font-weight: 600;
+    font-size: 14px;
+    color: #1a2332;
+  }
+
+  .group-tag {
+    font-size: 11px;
+    padding: 0 8px;
+    line-height: 18px;
+    margin: 0;
+    overflow: hidden; /* 超出隐藏 */
+    text-overflow: ellipsis; /* 显示省略号 */
+    white-space: nowrap; /* 不换行 */
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .relay-list {
+    padding: 4px 0;
+  }
+
+  /* ========== 继电器项 - 统一宽度布局 ========== */
+  .relay-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 4px;
+    margin-bottom: 4px;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    gap: 8px;
+    min-height: 36px;
+  }
+
+  .relay-item:hover {
+    background: #f0f3f8;
+  }
+
+  .relay-item:last-child {
+    margin-bottom: 0;
+  }
+
+  /* 名称区域 - 固定比例，不撑宽 */
+  .relay-label {
+    flex: 0 0 55%; /* 固定占比，不随内容变化 */
+    min-width: 0;
+    max-width: 55%;
+    overflow: hidden;
+  }
+
+  .relay-name {
+    display: inline-block;
+    font-size: 13px;
+    color: #3a4a5e;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    vertical-align: middle;
+  }
+
+  /* 控制区域 - 固定宽度 */
+  .relay-control {
+    flex: 0 0 auto;
+    margin-left: auto;
+  }
+
+  .relay-input {
+    width: 72px;
+  }
+
+  /* ========== 高亮动画 ========== */
+  .status-card.data-updated {
+    animation: highlightFlash 2s ease-out;
+  }
+
+  .relay-item.data-updated {
+    animation: highlightFlashItem 2s ease-out;
+    border-radius: 6px;
+  }
+
+  @keyframes highlightFlash {
+    0% {
+      background-color: #e6f7ff;
+      border-color: #91d5ff;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    }
+    50% {
+      background-color: #bae7ff;
+    }
+    100% {
+      background-color: transparent;
+      border-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  @keyframes highlightFlashItem {
+    0% {
+      background-color: #e6f7ff;
+      box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.2);
+    }
+    50% {
+      background-color: #bae7ff;
+    }
+    100% {
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  /* ========== 全屏遮罩 ========== */
   .fullscreen-mask {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.45);
+    background: rgba(0, 0, 0, 0.45);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
+    backdrop-filter: blur(2px);
+  }
+
+  /* ========== Modal 样式 ========== */
+  :deep(.ant-modal-content) {
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  :deep(.ant-modal-header) {
+    background: #ffffff;
+    border-bottom: 1px solid #e8ecf1;
+    padding: 16px 24px;
+  }
+
+  :deep(.ant-modal-title) {
+    color: #1a2332;
+    font-weight: 600;
+    font-size: 16px;
+  }
+
+  :deep(.ant-modal-close) {
+    color: #8c8c8c;
+  }
+
+  :deep(.ant-modal-close:hover) {
+    color: #1a2332;
+  }
+
+  /* ========== 响应式 ========== */
+  @media (max-width: 1200px) {
+    .card-col {
+      flex: 0 0 33.333%;
+      max-width: 33.333%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    :deep(.ant-modal-body) {
+      min-height: 480px;
+    }
+
+    .toolbar {
+      flex-wrap: wrap;
+      gap: 8px;
+      padding: 10px 16px;
+    }
+
+    .toolbar-left {
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+
+    .status-summary {
+      flex-wrap: wrap;
+      gap: 8px 16px;
+    }
+
+    .card-container {
+      padding: 12px 16px;
+    }
+
+    .card-col {
+      flex: 0 0 50%;
+      max-width: 50%;
+    }
+
+    /* 移动端调整名称宽度 */
+    .relay-label {
+      flex: 0 0 50%;
+      max-width: 50%;
+    }
+  }
+
+  @media (max-width: 480px) {
+    :deep(.ant-modal-body) {
+      min-height: 420px;
+    }
+
+    .card-col {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+
+    .relay-item {
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    .relay-label {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+
+    .relay-control {
+      margin-left: 0;
+    }
+
+    .sync-timer {
+      font-size: 12px;
+      padding: 0 8px;
+    }
   }
 </style>
diff --git a/src/views/appmana/deploy/components/ControlModal_timer.vue b/src/views/appmana/deploy/components/ControlModal_timer.vue
new file mode 100644
index 0000000..460e5fb
--- /dev/null
+++ b/src/views/appmana/deploy/components/ControlModal_timer.vue
@@ -0,0 +1,562 @@
+<template>
+  <a-modal
+    title="球阀控制"
+    :width="width"
+    :body-style="bodystyle"
+    :visible="visible"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    footer=""
+    v-model:open="visibleloading"
+  >
+    <a-descriptions
+      title="运行状态"
+      layout="vertical"
+      bordered
+      :labelStyle="{ fontWeight: 'bold', textAlign: 'center' }"
+      :contentStyle="{ textAlign: 'center' }"
+    >
+      <a-descriptions-item :label="item.runName" v-for="item in formState.runList" :key="item.id">
+        <span style="color: red" v-if="item.value == '0'">停止</span>
+        <span style="color: green" v-else-if="item.value == '1'">运行</span>
+        <span style="color: orange" v-else>待同步</span>
+      </a-descriptions-item>
+    </a-descriptions>
+
+    <a-descriptions title="" layout="vertical" bordered style="margin-top: 20px">
+      <a-descriptions-item label="控制项">
+        <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
+          <!--          <a-form-item label="上报时间">-->
+          <!--            <a-input v-model:value="formState.dataTime" disabled="true" />-->
+          <!--          </a-form-item>-->
+          <div class="card-container">
+            <a-row :gutter="16" type="flex">
+              <a-col :span="8" v-for="group in formState.moduleList" :key="group.id" class="card-col">
+                <a-card :bordered="true">
+                  <template #title>
+                    <span>{{ group.groupName }}</span>
+                    <a-tag v-if="group.isMutual == 1" color="red" style="margin-left: 8px">组内互斥</a-tag>
+                  </template>
+                  <!--                  <template #extra><a href="#">一键启动</a></template>-->
+                  <a-form-item :label="item.relayName" v-for="item in group.relayList" :key="item.id">
+                    <a-switch
+                      v-if="item.relayCate == 1"
+                      v-model:checked="item.value"
+                      checked-children="打开"
+                      un-checked-children="关闭"
+                      :checked-value="'1'"
+                      :un-checked-value="'0'"
+                      @change="(checked) => switchChange(checked, item)"
+                    />
+                    <a-input v-else-if="item.relayCate == 2" v-model:value="item.value" placeholder="" @blur="inputChange(item)" />
+                  </a-form-item>
+                </a-card>
+              </a-col>
+            </a-row>
+          </div>
+        </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>
+
+<script lang="ts" setup>
+  import { onMounted, onUnmounted, ref, reactive, nextTick, defineExpose } from 'vue';
+  import type { UnwrapRef } from 'vue';
+  import { getValveStatus, sendDeviceCmd, getRelayList, sendRelayQuery } 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',
+    username: import.meta.env.VITE_MQTT_USERNAME || 'admin',
+    password: import.meta.env.VITE_MQTT_PASSWORD || 'admin123',
+    keepalive: 60,
+    reconnectPeriod: 5000,
+  };
+  // 使用页面级 MQTT
+  const { isConnected, isConnecting, error, connectAndSubscribe, publish, disconnect } = usePageMqtt(mqttOptions);
+
+  // 设备数据
+  const deviceData = reactive({
+    temperature: 0,
+    humidity: 0,
+    status: 'offline',
+    lastUpdate: 0,
+  });
+
+  // 消息日志
+  interface LogEntry {
+    id: number;
+    topic: string;
+    message: string;
+    timestamp: number;
+  }
+
+  const logs = ref<LogEntry[]>([]);
+  let logId = 0;
+
+  // 格式化时间
+  const formatTime = (timestamp: number) => {
+    if (!timestamp) return '--:--:--';
+    return new Date(timestamp).toLocaleTimeString();
+  };
+
+  // 添加日志
+  const addLog = (topic: string, message: string) => {
+    logs.value.unshift({
+      id: logId++,
+      topic,
+      message: typeof message === 'object' ? JSON.stringify(message) : message,
+      timestamp: Date.now(),
+    });
+
+    // 保留最近100条日志
+    if (logs.value.length > 100) {
+      logs.value.pop();
+    }
+  };
+
+  // 处理接收到的消息
+  const handleMessage = (payload: string, topic: string) => {
+    // console.log('处理消息:', topic, payload);
+
+    try {
+      const data = JSON.parse(payload);
+
+      // 添加日志
+      addLog(topic, payload);
+      let initData = data.rw_prot;
+      if (!initData) {
+        console.log('initDataC========goParams');
+        initData = data.params;
+      }
+      console.log('initData========', initData);
+      if (initData) {
+        let dataJson = initData.r_data;
+        if (!dataJson) {
+          console.log('dataJsonC========GoWdata');
+          dataJson = initData.w_data;
+        }
+        console.log('dataJson========', dataJson);
+        if (dataJson !== undefined) {
+          // 先构建源数据的 Map
+          const sourceMap = dataJson.reduce((map, item) => {
+            map[item.name] = item.value;
+            return map;
+          }, {});
+          console.log('sourceMapCheck========', sourceMap);
+          // 然后遍历目标数组赋值
+          // 1.状态部分
+          formState.runList.forEach((target) => {
+            const source = sourceMap[target.runKey];
+            if (source) {
+              Object.assign(target, {
+                value: source,
+              });
+            }
+          });
+
+          // 2.控制项部分
+          formState.moduleList.forEach((target) => {
+            if (target.relayList) {
+              // 遍历内层数组
+              target.relayList.forEach((member) => {
+                const source = sourceMap[member.relayKey];
+                if (source) {
+                  Object.assign(member, {
+                    value: source,
+                    checkValue: source,
+                  });
+                }
+                // console.log(member.relayKey + '========result========' + member.value + ':::' + member.checkValue);
+              });
+            }
+          });
+        }
+        console.log('check-----', formState.moduleList);
+        deviceData.temperature = data.temperature;
+      }
+    } catch (e) {
+      // 非 JSON 格式，直接作为文本处理
+      addLog(topic, payload);
+    }
+  };
+
+  // 发送设备控制指令
+  const sendCommand = async (topic: string, command: string) => {
+    if (!isConnected.value) {
+      addLog('system', 'MQTT未连接，无法发送指令');
+      return;
+    }
+
+    // const payload = {
+    //   command,
+    //   timestamp: Date.now(),
+    //   requestId: `${Date.now()}-${Math.random().toString(36).substring(2, 10)}`,
+    // };
+    const payload = command;
+    console.log('sendCommand===', topic, command);
+    try {
+      await publish(topic, payload);
+      addLog(topic, `发送指令: ${command}`);
+    } catch (err) {
+      console.error('发送指令失败:', err);
+      addLog(topic, `指令发送失败: ${command}`);
+    }
+  };
+
+  const bodystyle = {
+    height: '1000px',
+    margin: '20px',
+  };
+
+  interface FormState {
+    deployCode: string;
+    delivery1: boolean;
+    delivery2: boolean;
+    delivery3: boolean;
+    dataTime: string;
+    moduleList: [];
+    runList: [];
+    deployInfo: {};
+  }
+  const formState: UnwrapRef<FormState> = reactive({
+    deployCode: '',
+    delivery1: false,
+    delivery2: false,
+    dataTime: '',
+    moduleList: [],
+    runList: [],
+    deployInfo: {},
+  });
+
+  const labelCol = { style: { width: '150px' } };
+  const wrapperCol = { span: 14 };
+  const title = ref<string>('');
+  const width = ref<number>(1000);
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+
+  const key = 'updatable';
+  const openMessage = () => {
+    message.loading({ content: '发送指令中', key, duration: 7 });
+  };
+
+  // 页面进入时连接 MQTT
+  onMounted(() => {});
+
+  // 页面关闭时断开连接
+  onUnmounted(() => {
+    console.log('页面卸载，断开 MQTT...');
+    disconnect();
+  });
+
+  function switchChange(checked, relay) {
+    loading.value = true;
+    // 保存期望的目标状态（用户点击后的状态）
+    const ops = checked;
+    timer = setTimeout(() => {
+      checkSwitchChange(checked, relay);
+    }, 6000);
+
+    // if (checked === true) {
+    //   ops = '1';
+    // } else if (checked === false) {
+    //   ops = '0';
+    // }
+    // let parmas = { relayId: relay.id, ops: ops };
+    // sendDeviceCmd(parmas).then((res) => {
+    //   if (res.code == 500) {
+    //     //操作失败
+    //     formState[relay.id] = false;
+    //     message.error({ content: res.message, key, duration: 2 });
+    //   }
+    // });
+    if ('1' == ops) {
+      sendCommand(formState.deployInfo.sendTopic, relay.registerCmdOn);
+    } else if ('0' == ops) {
+      sendCommand(formState.deployInfo.sendTopic, relay.registerCmdOff);
+    }
+  }
+
+  function checkSwitchChange(checked, relay) {
+    // 超时未收到回执，重置 Switch 状态
+    if (relay.value == relay.checkValue) {
+      const currentGroup = formState.moduleList.find((group) => group.id === relay.groupId);
+      let msg = '操作成功';
+      if (currentGroup && currentGroup.isMutual == 1 && checked === '1') {
+        msg = relay.relayName + '已开启，确定后将关闭其他开关';
+      }
+
+      //两个值一致时，判定为操作成功，否则无回执或者回执与操作不一致
+      createConfirm({
+        title: '操作结果',
+        iconType: 'success',
+        content: msg,
+        cancelButtonProps: {
+          style: { display: 'none' }, // 隐藏取消按钮
+        },
+        onOk: () => {
+          loading.value = false;
+          // 组内互斥处理：开启时，自动关闭同组其他已开启的开关
+
+          if (currentGroup && currentGroup.isMutual == 1 && checked === '1') {
+            currentGroup.relayList.forEach((other) => {
+              if (other.id !== relay.id && other.value === '1') {
+                other.value = '0';
+                switchChange('0', other);
+              }
+            });
+          }
+        },
+      });
+    } else {
+      if (ops == '1') {
+        relay.value = '0';
+      } else {
+        relay.value = '1';
+      }
+      createConfirm({
+        title: '操作结果',
+        iconType: 'error',
+        content: '操作失败，设备未及时响应',
+        cancelButtonProps: {
+          style: { display: 'none' }, // 隐藏取消按钮
+        },
+        onOk: () => {
+          loading.value = false;
+        },
+      });
+    }
+    //重新查询所有参数
+    fetchRelayStatus(formState.deployInfo.deployId);
+  }
+
+  function inputChange(relay) {
+    loading.value = true;
+    timer = setTimeout(() => {
+      // 超时未收到回执，重置 Switch 状态
+      if (relay.value == relay.checkValue) {
+        //两个值一致时，判定为操作成功，否则无回执或者回执与操作不一致
+        createConfirm({
+          title: '操作结果',
+          iconType: 'success',
+          content: '操作成功',
+          cancelButtonProps: {
+            style: { display: 'none' }, // 隐藏取消按钮
+          },
+          onOk: () => {
+            loading.value = false;
+          },
+        });
+      } else {
+        relay.value = relay.checkValue;
+        createConfirm({
+          title: '操作结果',
+          iconType: 'error',
+          content: '操作失败，设备未及时响应',
+          cancelButtonProps: {
+            style: { display: 'none' }, // 隐藏取消按钮
+          },
+          onOk: () => {
+            loading.value = false;
+          },
+        });
+      }
+      //重新查询所有参数
+      fetchRelayStatus(formState.deployInfo.deployId);
+    }, 6000);
+    const finalCmd = relay.registerCmdOn.replace(/#val#/g, relay.value);
+    sendCommand(formState.deployInfo.sendTopic, finalCmd);
+  }
+
+  function on1SwitchChange(checked) {
+    openMessage();
+    if (checked === true) {
+      sendDeviceCmd({ deployCode: formState.deployCode, os: '01', valveCode: '01' }).then((res) => {
+        if (res.code == 500) {
+          //操作失败
+          formState.delivery1 = false;
+          message.error({ content: res.message, key, duration: 2 });
+        }
+      });
+    } else if (checked === false) {
+      sendDeviceCmd({ deployCode: formState.deployCode, os: '00', valveCode: '01' }).then((res) => {
+        if (res.code == 500) {
+          //操作失败
+          formState.delivery1 = true;
+          message.error({ content: res.message, key, duration: 2 });
+        }
+      });
+    }
+  }
+
+  function on2SwitchChange(checked) {
+    openMessage();
+    if (checked === true) {
+      sendDeviceCmd({ deployCode: formState.deployCode, os: '01', valveCode: '02' }).then((res) => {
+        if (res.code == 500) {
+          formState.delivery2 = false;
+          message.error({ content: res.message, key, duration: 2 });
+        }
+      });
+    } else if (checked === false) {
+      sendDeviceCmd({ deployCode: formState.deployCode, os: '00', valveCode: '02' }).then((res) => {
+        if (res.code == 500) {
+          formState.delivery2 = true;
+          message.error({ content: res.message, key, duration: 2 });
+        }
+      });
+    }
+  }
+
+  /**
+   * 控制
+   */
+  function showup(record) {
+    title.value = '球阀控制';
+    visible.value = true;
+    formState.moduleList = [];
+    formState.runList = [];
+    formState.dataTime = '';
+    formState.deployInfo = record;
+    console.log(record);
+    console.log('页面加载，连接 MQTT...', formState.deployInfo.receiveTopic);
+
+    // 需要订阅的主题
+    const subscribeTopic = formState.deployInfo.receiveTopic; // 传感器数据主题
+
+    // 连接并订阅
+    connectAndSubscribe(subscribeTopic, handleMessage);
+    relayData(record.deployId);
+  }
+
+  function relayData(deployIds) {
+    getRelayList({ deployId: deployIds }).then((res) => {
+      if (res.code == 200) {
+        formState.moduleList = res.result.moduleList;
+        formState.runList = res.result.runStatus;
+        formState.dataTime = res.result.dataTime;
+      } else {
+      }
+    });
+  }
+
+  function fetchRelayStatus(deployIds) {
+    getRelayList({ deployId: deployIds }).then((res) => {
+      if (res.code == 200) {
+        formState.dataTime = res.result.dataTime;
+      } else {
+      }
+    });
+  }
+
+  // getValveStatus({ deployCode: record.deployCode }).then((res) => {
+  //   if (res.code == 200) {
+  //     formState.dataTime=res.result.dataTime
+  //     formState.deployCode = record.deployCode
+  //     if(res.result.firstValveStatus == "01"){
+  //       formState.delivery1=true
+  //     }else{
+  //       formState.delivery1=false
+  //     }
+  //     if(res.result.secondValveStatus == "01"){
+  //       formState.delivery2=true
+  //     }else{
+  //       formState.delivery2=false
+  //     }
+  //   } else {
+  //   }
+  // })
+
+  /**
+   * 编辑
+   * @param record
+   */
+  function edit(record) {
+    title.value = disableSubmit.value ? '详情' : '编辑';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.edit(record);
+    });
+  }
+
+  /**
+   * 确定按钮点击事件
+   */
+  function handleOk() {
+    registerForm.value.submitForm();
+  }
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback() {
+    handleCancel();
+    emit('success');
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+    disconnect();
+  }
+
+  defineExpose({
+    showup,
+    edit,
+    disableSubmit,
+  });
+</script>
+
+<style>
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+
+  .card-container {
+    width: 100%;
+    min-height: 180px;
+    max-height: 500px;
+    overflow-y: auto;
+  }
+
+  .card-col {
+    flex: 0 0 33.333333%; /* 每个卡片占1/3宽度 */
+    max-width: 33.333333%; /* 最大宽度也是1/3 */
+    margin-bottom: 16px; /* 行间距 */
+  }
+
+  /* 卡片最小高度 */
+  :deep(.ant-card) {
+    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>
diff --git a/src/views/appmana/deploy/components/RelayGroup.data.ts b/src/views/appmana/deploy/components/RelayGroup.data.ts
index 379fbef..1f34132 100644
--- a/src/views/appmana/deploy/components/RelayGroup.data.ts
+++ b/src/views/appmana/deploy/components/RelayGroup.data.ts
@@ -140,11 +140,11 @@ export const itemFormSchema: FormSchema[] = [
               return Promise.reject('数据值不能包含特殊字符！');
             }
             return new Promise<void>((resolve, reject) => {
-              console.log('wwwwwww',model)
+              console.log('wwwwwww', model);
               let params = {
                 deployId: model.deployId,
                 groupName: value,
-                id:model.id
+                id: model.id,
               };
               itemCheck(params)
                 .then((res) => {
@@ -181,7 +181,17 @@ export const itemFormSchema: FormSchema[] = [
       stringToNumber: true,
     },
   },
-
+  {
+    field: 'isMutual',
+    label: '组内互斥',
+    defaultValue: 0,
+    component: 'JDictSelectTag',
+    componentProps: {
+      type: 'radioButton',
+      dictCode: 'yn',
+      stringToNumber: true,
+    },
+  },
   {
     label: '备注',
     field: 'groupNotes',
@@ -193,7 +203,7 @@ export const itemFormSchema: FormSchema[] = [
     field: 'sortNo',
     required: false,
     component: 'InputNumber',
-    defaultValue: 1
+    defaultValue: 1,
   },
 ];
 
@@ -218,6 +228,15 @@ export const dictItemColumns: BasicColumn[] = [
       return render.renderTag(render.renderDict(text, 'dict_item_status'), color);
     },
   },
+  {
+    title: '组内互斥',
+    dataIndex: 'isMutual',
+    width: 80,
+    customRender: ({ text }) => {
+      const color = text == '1' ? 'green' : text == '0' ? 'red' : 'gray';
+      return render.renderTag(render.renderDict(text, 'dict_item_status'), color);
+    },
+  },
   {
     title: '排序',
     dataIndex: 'sortNo',
diff --git a/src/views/appmana/deploy/components/SetupRelay.data.ts b/src/views/appmana/deploy/components/SetupRelay.data.ts
index 6cb2725..66b1fa8 100644
--- a/src/views/appmana/deploy/components/SetupRelay.data.ts
+++ b/src/views/appmana/deploy/components/SetupRelay.data.ts
@@ -149,7 +149,7 @@ export const itemFormSchema: FormSchema[] = [
               let params = {
                 deployId: model.deployId,
                 relayKey: value,
-                id:model.id
+                id: model.id,
               };
               relayItemCheck(params)
                 .then((res) => {
@@ -193,10 +193,10 @@ export const itemFormSchema: FormSchema[] = [
     component: 'JDictSelectTag',
     componentProps: ({ schema, formModel }) => {
       return {
-        dictCode: 'surv_device_deploy_relaygroup,GROUP_NAME,ID,IS_ENABLE = 1 and DEPLOY_ID='+formModel.deployId,
-        dict: 'surv_device_deploy_relaygroup,GROUP_NAME,ID,IS_ENABLE = 1 and DEPLOY_ID='+formModel.deployId
+        dictCode: 'surv_device_deploy_relaygroup,GROUP_NAME,ID,IS_ENABLE = 1 and DEPLOY_ID=' + formModel.deployId,
+        dict: 'surv_device_deploy_relaygroup,GROUP_NAME,ID,IS_ENABLE = 1 and DEPLOY_ID=' + formModel.deployId,
       };
-    }
+    },
   },
   // {
   //   label: '分组编码',
@@ -204,7 +204,12 @@ export const itemFormSchema: FormSchema[] = [
   //   required: false,
   //   component: 'Input',
   // },
-
+  {
+    label: '查询指令',
+    field: 'registerCmdCheck',
+    required: false,
+    component: 'Input',
+  },
   {
     label: '开指令',
     field: 'registerCmdOn',
@@ -224,7 +229,6 @@ export const itemFormSchema: FormSchema[] = [
     component: 'Input',
   },
 
-
   {
     field: 'isEnable',
     label: '是否启用',
@@ -253,7 +257,7 @@ export const itemFormSchema: FormSchema[] = [
     field: 'sortNo',
     required: false,
     component: 'InputNumber',
-    defaultValue :1
+    defaultValue: 1,
   },
 ];