From a0c620404a5008b43a6c8e09fd0dcc9b8e5332f4 Mon Sep 17 00:00:00 2001
From: TongTongStudio <tongtongstudios@gmail.com>
Date: Sun, 9 Aug 2026 20:03:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(device):=20=E6=96=B0=E5=A2=9E=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E5=9C=A8=E7=BA=BF=E7=8A=B6=E6=80=81=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E4=B8=8E=E5=AE=9E=E6=97=B6=E6=9B=B4=E6=96=B0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增设备在线状态视图对象类型定义
- 新增设备在线状态批量查询接口与详情页查询接口
- 表格数据加载完成后批量查询并更新设备在线状态
- 详情页独立查询在线状态并展示状态指示点
- 通过 SSE 推送实时更新表格与详情页的设备在线状态
---
 src/api/system/device/index.ts                | 32 +++++++
 src/api/system/device/types.ts                | 22 +++++
 src/components/DeviceSn/DevicePageContent.vue | 12 ++-
 src/components/DeviceSn/DeviceSnDetail.vue    | 68 +++++++++++++-
 src/views/devices/sn/config/content.ts        | 10 +-
 src/views/devices/sn/index.vue                | 94 +++++++++++++++++++
 6 files changed, 234 insertions(+), 4 deletions(-)

diff --git a/src/api/system/device/index.ts b/src/api/system/device/index.ts
index ee1e7763..a3e77bd0 100644
--- a/src/api/system/device/index.ts
+++ b/src/api/system/device/index.ts
@@ -4,6 +4,7 @@ import type {
   DeviceForm,
   DeviceQueryParams,
   DeviceItem,
+  DeviceOnlineVO,
   DeviceProfileDetail,
   DeviceProfileForm,
   DevicePasswordChangeForm,
@@ -456,6 +457,37 @@ const DeviceAPI = {
     });
   },
 
+  /**
+   * 批量查询设备在线状态
+   *
+   * @param sns 设备序列号列表
+   */
+  /**
+   * 查询单个设备在线状态
+   *
+   * @param sn 设备序列号
+   */
+  getOnlineStatus(sn: string) {
+    return request<any, DeviceOnlineVO>({
+      url: `${DEVICE_BASE_URL}/online/status`,
+      method: "get",
+      params: { sn },
+    });
+  },
+
+  /**
+   * 批量查询设备在线状态
+   *
+   * @param sns 设备序列号列表
+   */
+  getOnlineStatusBatch(sns: string[]) {
+    return request<any, Record<string, DeviceOnlineVO>>({
+      url: `${DEVICE_BASE_URL}/online/status/batch`,
+      method: "post",
+      data: sns,
+    });
+  },
+
   /**
    * 上传应用图标（全局图标库）
    *
diff --git a/src/api/system/device/types.ts b/src/api/system/device/types.ts
index 227d704c..73a128df 100644
--- a/src/api/system/device/types.ts
+++ b/src/api/system/device/types.ts
@@ -58,6 +58,28 @@ export interface DeviceItem {
   status?: number;
   /** 用户名 */
   Devicename?: string;
+  /** 设备序列号 */
+  serialno?: string;
+  /** 在线状态(1:在线;0:离线) */
+  online?: number;
+  /** 最后心跳时间 */
+  lastHeartbeatTime?: string;
+  /** 推送ID */
+  pushId?: string;
+}
+
+/** 设备在线状态视图对象 */
+export interface DeviceOnlineVO {
+  /** 设备序列号 */
+  serialno?: string;
+  /** 在线状态(1:在线;0:离线) */
+  online?: number;
+  /** 最后心跳时间 */
+  lastHeartbeatTime?: string;
+  /** 设备 IP */
+  ip?: string;
+  /** 屏幕状态(1:亮屏;0:熄屏;null:未知) */
+  screenState?: number;
 }
 
 /** 设备表单对象 */
diff --git a/src/components/DeviceSn/DevicePageContent.vue b/src/components/DeviceSn/DevicePageContent.vue
index 3aafd8d1..6d7a29ed 100644
--- a/src/components/DeviceSn/DevicePageContent.vue
+++ b/src/components/DeviceSn/DevicePageContent.vue
@@ -388,6 +388,7 @@ const emit = defineEmits<{
   editClick: [row: IObject];
   filterChange: [data: IObject];
   operateClick: [data: IOperateData];
+  dataLoaded: [];
 }>();
 
 // 表格工具栏按钮配置
@@ -929,6 +930,8 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
       } else {
         pageData.value = Array.isArray(data) ? data : (data?.list ?? (data as IObject)?.data ?? []);
       }
+      // 数据加载完成后通知父组件，供父组件做后处理（如批量查询设备在线状态）
+      emit("dataLoaded");
     })
     .finally(() => {
       loading.value = false;
@@ -971,7 +974,14 @@ function saveXlsx(fileData: BlobPart, fileName: string) {
 }
 
 // 暴露的属性和方法
-defineExpose({ fetchPageData, exportPageData, getFilterParams, getSelectionData, handleRefresh });
+defineExpose({
+  fetchPageData,
+  exportPageData,
+  getFilterParams,
+  getSelectionData,
+  handleRefresh,
+  pageData,
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/DeviceSn/DeviceSnDetail.vue b/src/components/DeviceSn/DeviceSnDetail.vue
index e359fe02..77407104 100644
--- a/src/components/DeviceSn/DeviceSnDetail.vue
+++ b/src/components/DeviceSn/DeviceSnDetail.vue
@@ -7,7 +7,11 @@
         <div class="info-content">
           <div class="info-row">
             <span class="device-name">{{ deviceData.snName }}</span>
-            <el-tag type="success" size="small">
+            <span
+              class="status-dot"
+              :style="{ backgroundColor: deviceData.onlineStatus == 1 ? '#67c23a' : '#f56c6c' }"
+            />
+            <el-tag :type="deviceData.onlineStatus == 1 ? 'success' : 'danger'" size="small">
               {{ deviceData.onlineStatus == 1 ? "在线" : "离线" }}
             </el-tag>
           </div>
@@ -747,12 +751,14 @@ import type {
   DeviceBasicInfo,
   DeviceHardwareInfo,
   DeviceNetworkInfo,
+  DeviceOnlineVO,
   DeviceOtherInfo,
   DeviceSecurityInfo,
   DeviceLocationInfo,
   DeviceScreenshot,
 } from "@/api/system/device/types";
-import { nextTick, reactive, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
+import { useSse } from "@/composables";
 import {
   Back,
   Edit,
@@ -960,6 +966,20 @@ async function loadDeviceDetail(serialno: string) {
     ElMessage.error("加载设备详情失败");
     console.error("Error loading device detail:", error);
   }
+  // 加载完设备基础信息后，单独查询设备在线状态
+  loadOnlineStatus(serialno);
+}
+
+/** 查询单台设备在线状态 */
+async function loadOnlineStatus(serialno: string) {
+  try {
+    const onlineInfo = await DeviceAPI.getOnlineStatus(serialno);
+    if (onlineInfo) {
+      deviceData.onlineStatus = onlineInfo.online ?? 0;
+    }
+  } catch (error) {
+    console.error("查询设备在线状态失败:", error);
+  }
 }
 
 /** 基本信息 */
@@ -1319,6 +1339,41 @@ const handleStopApp = (row: ApkInstallInfo) => {
 
 defineExpose({ loadAll });
 
+/**
+ * SSE 设备在线状态事件监听取消函数
+ */
+let unsubscribeDeviceOnlineStatus: (() => void) | null = null;
+
+/**
+ * 根据 SSE 推送的设备在线状态更新详情页的在线状态
+ */
+function handleDeviceOnlineStatus(data: DeviceOnlineVO) {
+  if (!data || !data.serialno) {
+    return;
+  }
+  // 仅当推送的设备 SN 与当前详情页设备匹配时才更新
+  if (data.serialno === props.serialno) {
+    deviceData.onlineStatus = data.online ?? 0;
+  }
+}
+
+onMounted(() => {
+  // 监听 SSE 推送的设备在线状态，实时更新详情页
+  const sse = useSse();
+  unsubscribeDeviceOnlineStatus = sse.on<DeviceOnlineVO>(
+    "device-online-status",
+    handleDeviceOnlineStatus
+  );
+});
+
+onBeforeUnmount(() => {
+  // 组件销毁时取消 SSE 事件监听
+  if (unsubscribeDeviceOnlineStatus) {
+    unsubscribeDeviceOnlineStatus();
+    unsubscribeDeviceOnlineStatus = null;
+  }
+});
+
 /** 操作按钮事件 */
 const handleReturn = () => {
   emit("update:modelValue", false);
@@ -1806,4 +1861,13 @@ const handleMoreActions = (command: string) => {
     }
   }
 }
+
+.status-dot {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  margin-right: 4px;
+  border-radius: 50%;
+}
 </style>
diff --git a/src/views/devices/sn/config/content.ts b/src/views/devices/sn/config/content.ts
index 8e9be761..5956cd20 100644
--- a/src/views/devices/sn/config/content.ts
+++ b/src/views/devices/sn/config/content.ts
@@ -58,7 +58,15 @@ const contentConfig: IContentConfig<DeviceQueryParams, DeviceItem> = {
       prop: "serialno",
       templet: "custom",
       slotName: "serialno",
-      width: 150,
+      width: 220,
+    },
+    {
+      label: "在线状态",
+      align: "center",
+      prop: "online",
+      templet: "custom",
+      slotName: "onlineStatus",
+      width: 100,
     },
     { label: "设备型号", align: "center", prop: "snModel", width: 200 },
     { label: "设备昵称", align: "center", prop: "snName", width: 200 },
diff --git a/src/views/devices/sn/index.vue b/src/views/devices/sn/index.vue
index 56e345f2..c554cf6d 100644
--- a/src/views/devices/sn/index.vue
+++ b/src/views/devices/sn/index.vue
@@ -21,6 +21,7 @@
         @toolbar-click="handleToolbarClick"
         @operate-click="handleOperateClick"
         @filter-change="handleFilterChange"
+        @data-loaded="fetchDeviceOnlineStatus"
       >
         <template #status="scope">
           <el-tag :type="scope.row[scope.prop as string] == 1 ? 'success' : 'info'">
@@ -48,6 +49,15 @@
             :style="{ marginLeft: '2px' }"
           />
         </template>
+        <template #onlineStatus="scope">
+          <span
+            class="status-dot"
+            :style="{ backgroundColor: scope.row.online == 1 ? '#67c23a' : '#f56c6c' }"
+          />
+          <el-tag :type="scope.row.online == 1 ? 'success' : 'info'" size="small">
+            {{ scope.row.online == 1 ? "在线" : "离线" }}
+          </el-tag>
+        </template>
       </device-page-content>
 
       <!-- 新增 -->
@@ -92,8 +102,11 @@
 </template>
 
 <script setup lang="ts">
+import { onBeforeUnmount, ref } from "vue";
 import DeviceAPI from "@/api/system/device";
+import type { DeviceOnlineVO } from "@/api/system/device/types";
 import type { IObject, PageModalInstance } from "@/components/DeviceSn/types";
+import { useSse } from "@/composables";
 import DeviceSnOverView from "@/components/DeviceSn/DeviceSnOverView.vue";
 import usePage from "@/components/DeviceSn/usePage";
 import addModalConfig from "./config/add";
@@ -222,7 +235,88 @@ const dialogVisible = ref(false);
 const overviewVisible = ref(false);
 const selectedRow = ref<IObject>({});
 
+/**
+ * 批量查询设备在线状态并更新表格数据
+ */
+async function fetchDeviceOnlineStatus() {
+  try {
+    // 从 contentRef 获取当前表格 pageData
+    const pageData = contentRef.value?.pageData as IObject[] | undefined;
+    if (!pageData || pageData.length === 0) {
+      return;
+    }
+    // 收集所有设备序列号
+    const sns = pageData.map((item) => item.serialno as string).filter((sn) => !!sn);
+    if (sns.length === 0) {
+      return;
+    }
+    // 批量查询在线状态
+    const onlineMap = await DeviceAPI.getOnlineStatusBatch(sns);
+    if (onlineMap) {
+      // 更新表格数据中的在线状态
+      pageData.forEach((item) => {
+        const sn = item.serialno as string;
+        const onlineInfo = onlineMap[sn];
+        if (onlineInfo) {
+          item.online = onlineInfo.online;
+          item.lastHeartbeatTime = onlineInfo.lastHeartbeatTime;
+        }
+      });
+    }
+  } catch (error) {
+    console.error("批量查询设备在线状态失败:", error);
+  }
+}
+
+/**
+ * SSE 设备在线状态事件监听取消函数
+ */
+let unsubscribeDeviceOnlineStatus: (() => void) | null = null;
+
+/**
+ * 根据 SSE 推送的设备在线状态更新单条表格数据
+ */
+function handleDeviceOnlineStatus(data: DeviceOnlineVO) {
+  if (!data || !data.serialno) {
+    return;
+  }
+  const pageData = contentRef.value?.pageData as IObject[] | undefined;
+  if (!pageData) {
+    return;
+  }
+  const row = pageData.find((item) => item.serialno === data.serialno);
+  if (row) {
+    row.online = data.online;
+    row.lastHeartbeatTime = data.lastHeartbeatTime;
+  }
+}
+
 onMounted(() => {
   initOptions();
+  // 监听 SSE 推送的设备在线状态，实时更新表格对应行
+  const sse = useSse();
+  unsubscribeDeviceOnlineStatus = sse.on<DeviceOnlineVO>(
+    "device-online-status",
+    handleDeviceOnlineStatus
+  );
+});
+
+onBeforeUnmount(() => {
+  // 组件销毁时取消 SSE 事件监听
+  if (unsubscribeDeviceOnlineStatus) {
+    unsubscribeDeviceOnlineStatus();
+    unsubscribeDeviceOnlineStatus = null;
+  }
 });
 </script>
+
+<style scoped>
+.status-dot {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  margin-right: 4px;
+  border-radius: 50%;
+}
+</style>