skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add online status of station node

Browse Source
This commit is contained in:
yangsy
2025-08-18 15:23:55 +08:00
parent f044671528
commit 3171bf34d5
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/device-page.vue
View File

@@ -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;