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

2026-07-21 02:45:36 +00:00 · 2025-09-17 11:36:20 +08:00
parent 15ca08ce14
commit 44e7380c6b
5 changed files with 89 additions and 1 deletions
@@ -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();
+    },
 }
@@ -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',
@@ -327,6 +327,9 @@ export default {
  'device.autoUpdateDisabled': '已关闭自动升级',
  'device.batchUnbindSuccess': '成功解绑 {count} 台设备',
  'device.getFirmwareTypeFailed': '获取固件类型失败',
+  'device.deviceStatus': '状态',
+  'device.online': '在线',
+  'device.offline': '离线',

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

  // 消息提示
  'message.success': '操作成功',
@@ -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";