update: 添加设备管理页面实时在线状态显示功能

main/manager-web/src/apis/module/device.js

@@ -85,4 +85,21 @@ export default {
                 });
             }).send();
     },
+    // 获取设备状态
+    getDeviceStatus(agentId, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/device/bind/${agentId}`)
+            .method('POST')
+            .data({}) // 发送空对象作为请求体
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .networkFail((err) => {
+                console.error('获取设备状态失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.getDeviceStatus(agentId, callback);
+                });
+            }).send();
+    },
 }

main/manager-web/src/i18n/en.js

@@ -326,6 +326,9 @@ export default {
   'device.autoUpdateDisabled': 'Auto update disabled',
   'device.batchUnbindSuccess': 'Successfully unbound {count} devices',
   'device.getFirmwareTypeFailed': 'Failed to fetch firmware type',
+  'device.deviceStatus': 'Status',
+  'device.online': 'Online',
+  'device.offline': 'Offline',
 
   // Message tips
   'message.success': 'Operation Successful',

main/manager-web/src/i18n/zh_CN.js

@@ -327,6 +327,9 @@ export default {
   'device.autoUpdateDisabled': '已关闭自动升级',
   'device.batchUnbindSuccess': '成功解绑 {count} 台设备',
   'device.getFirmwareTypeFailed': '获取固件类型失败',
+  'device.deviceStatus': '状态',
+  'device.online': '在线',
+  'device.offline': '离线',
 
   // 消息提示
   'message.success': '操作成功',

main/manager-web/src/i18n/zh_TW.js

@@ -326,6 +326,9 @@ export default {
   'device.autoUpdateDisabled': '已關閉自動升級',
   'device.batchUnbindSuccess': '成功解綁 {count} 台設備',
   'device.getFirmwareTypeFailed': '獲取固件類型失敗',
+  'device.deviceStatus': '狀態',
+  'device.online': '在線',
+  'device.offline': '離線',
 
   // 消息提示
   'message.success': '操作成功',

main/manager-web/src/views/DeviceManagement.vue

@@ -35,6 +35,12 @@
               <el-table-column :label="$t('device.bindTime')" prop="bindTime" align="center"></el-table-column>
               <el-table-column :label="$t('device.lastConversation')" prop="lastConversation"
                 align="center"></el-table-column>
+              <el-table-column :label="$t('device.deviceStatus')" prop="deviceStatus" align="center">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.deviceStatus === 'online'" type="success">{{ $t('device.online') }}</el-tag>
+                  <el-tag v-else type="danger">{{ $t('device.offline') }}</el-tag>
+                </template>
+              </el-table-column>
               <el-table-column :label="$t('device.remark')" align="center">
                 <template #default="{ row }">
                   <el-input v-show="row.isEdit" v-model="row.remark" size="mini" maxlength="64" show-word-limit
@@ -369,17 +375,73 @@ export default {
               _submitting: false,
               otaSwitch: device.autoUpdate === 1,
               rawBindTime: new Date(device.createDate).getTime(),
-              selected: false
+              selected: false,
+              // 初始设置为离线状态
+              deviceStatus: 'offline'
             };
           })
             .sort((a, b) => a.rawBindTime - b.rawBindTime);
           this.activeSearchKeyword = "";
           this.searchKeyword = "";
+          
+          // 获取设备列表后，立即获取设备状态
+          this.fetchDeviceStatus(agentId);
         } else {
           this.$message.error(data.msg || this.$t('device.getListFailed'));
         }
       });
     },
+    
+    // 获取设备状态
+    fetchDeviceStatus(agentId) {
+      Api.device.getDeviceStatus(agentId, ({ data }) => {
+        if (data.code === 0) {
+          try {
+            // 解析后端返回的设备状态JSON
+            const statusData = JSON.parse(data.data);
+            
+            // 直接使用解析后的数据作为设备状态映射（不需要devices字段包装）
+            if (statusData && typeof statusData === 'object') {
+              // 更新设备状态
+              this.updateDeviceStatusFromResponse(statusData);
+            }
+          } catch (error) {
+            // JSON解析失败，忽略状态更新
+          }
+        }
+      });
+    },
+    
+    // 根据API响应更新设备状态
+    updateDeviceStatusFromResponse(deviceStatusMap) {
+      this.deviceList.forEach(device => {
+        // 构建设备的MQTT客户端ID
+        const macAddress = device.macAddress ? device.macAddress.replace(/:/g, '_') : 'unknown';
+        const groupId = device.model ? device.model.replace(/:/g, '_') : 'GID_default';
+        const mqttClientId = `${groupId}@@@${macAddress}@@@${macAddress}`;
+        
+        // 从状态映射中获取设备状态
+        if (deviceStatusMap[mqttClientId]) {
+          const statusInfo = deviceStatusMap[mqttClientId];
+          
+          let isOnline = false;
+          if (statusInfo.isAlive === true) {
+            isOnline = true;
+          } else if (statusInfo.isAlive === false) {
+            isOnline = false;
+          } else if (statusInfo.isAlive === null && statusInfo.exists === true) {
+            isOnline = true;
+          } else {
+            isOnline = false;
+          }
+          
+          device.deviceStatus = isOnline ? 'online' : 'offline';
+        } else {
+          // 如果没有找到对应的状态信息，默认为离线
+          device.deviceStatus = 'offline';
+        }
+      });
+    },
     headerCellClassName({ columnIndex }) {
       if (columnIndex === 0) {
         return "custom-selection-header";