From 3171bf34d5293770626c885cb924bb327efdebc5 Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Mon, 18 Aug 2025 15:23:55 +0800
Subject: [PATCH] feat: add online status of station node

---
 src/pages/device-page.vue | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/pages/device-page.vue b/src/pages/device-page.vue
index c0e1f78..f190760 100644
--- a/src/pages/device-page.vue
+++ b/src/pages/device-page.vue
@@ -31,6 +31,7 @@ import { h, onMounted, useTemplateRef } from 'vue';
 import { computed, ref, watch } from 'vue';
 import { useRoute, useRouter, type LocationQuery } from 'vue-router';
 import { destr } from 'destr';
+import type { Station } from '@/apis/domains';
 
 const route = useRoute();
 const router = useRouter();
@@ -54,7 +55,8 @@ const { data: lineDevices } = useLineDevicesQuery();
 const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
   const treeData: Record<string, TreeOption[]> = {};
   deviceTabPanes.forEach(({ name: paneName /* , tab: paneTab */ }) => {
-    treeData[paneName] = stationList.value.map<TreeOption>(({ name: stationName, code: stationCode }) => {
+    treeData[paneName] = stationList.value.map<TreeOption>((station) => {
+      const { name: stationName, code: stationCode } = station;
       const devices = lineDevices.value?.[stationCode][paneName];
       const onlineDevices = devices?.filter((device) => device.deviceStatus === '10');
       const offlineDevices = devices?.filter((device) => device.deviceStatus === '20');
@@ -64,6 +66,7 @@ const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
         return {
           label: stationName,
           key: stationCode,
+          prefix: () => renderStationNodePrefix(station),
           suffix: () => `(${onlineDevices?.length ?? 0}/${offlineDevices?.length ?? 0}/${devices?.length ?? 0})`,
           children: nvrs
             ?.filter((device) => {
@@ -74,10 +77,8 @@ const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
               return {
                 label: `${nvrCluster.name}`,
                 key: nvrCluster.id,
+                prefix: () => renderDeviceNodePrefix(nvrCluster, stationCode),
                 suffix: () => `${nvrCluster.ipAddress}`,
-                prefix: () => {
-                  return renderDeviceNodePrefix(nvrCluster, stationCode);
-                },
                 children: nvrs
                   .filter((nvr) => {
                     return nvrCluster.clusterList?.includes(nvr.ipAddress ?? '');
@@ -86,10 +87,8 @@ const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
                     return {
                       label: `${nvr.name}`,
                       key: nvr.id,
+                      prefix: () => renderDeviceNodePrefix(nvr, stationCode),
                       suffix: () => `${nvr.ipAddress}`,
-                      prefix: () => {
-                        return renderDeviceNodePrefix(nvr, stationCode);
-                      },
                       // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
                       device: nvr,
                       stationCode,
@@ -105,14 +104,13 @@ const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
       return {
         label: stationName,
         key: stationCode,
+        prefix: () => renderStationNodePrefix(station),
         suffix: () => `(${onlineDevices?.length ?? 0}/${offlineDevices?.length ?? 0}/${devices?.length ?? 0})`,
         children: lineDevices.value?.[stationCode][paneName].map<TreeOption>((device) => ({
           label: `${device.name}`,
           key: device.id,
+          prefix: () => renderDeviceNodePrefix(device, stationCode),
           suffix: () => `${device.ipAddress}`,
-          prefix: () => {
-            return renderDeviceNodePrefix(device, stationCode);
-          },
           // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
           device,
           stationCode,
@@ -122,6 +120,12 @@ const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
   });
   return treeData;
 });
+const renderStationNodePrefix = (station: Station) => {
+  const { online } = station;
+  const tagType: TagProps['type'] = online ? 'success' : 'error';
+  const tagText = online ? '在线' : '离线';
+  return h(NTag, { type: tagType, size: 'tiny' }, () => tagText);
+};
 const renderDeviceNodePrefix = (device: NdmDeviceResultVO, stationCode: string) => {
   const renderDeviceStatusTag = (device: NdmDeviceResultVO) => {
     const { deviceStatus } = device;