fix: 修复设备树节点key值生成逻辑，最大限度避免key值碰撞导致设备树渲染异常

src/components/device/device-tree/device-tree.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+const createDeviceNodeKey = (stationCode?: Station['code'], device?: NdmDeviceResultVO) => {
+  return `${stationCode ?? ''}-${device?.id ?? ''}`;
+};
+</script>
+
 <script setup lang="ts">
 import { initStationDevices, type NdmDeviceResultVO, type NdmNvrResultVO, type Station } from '@/apis';
 import { useDeviceTree, usePermission, type UseDeviceTreeReturn } from '@/composables';
@@ -110,7 +116,7 @@ watchImmediate(selectedDeviceType, (newDeviceType) => {
   }
 });
 
-const selectedKeys = computed(() => (selectedDevice.value?.id ? [selectedDevice.value.id] : undefined));
+const selectedKeys = computed(() => (selectedDevice.value?.id ? [createDeviceNodeKey(selectedStationCode.value, selectedDevice.value)] : undefined));
 watch([selectedKeys, selectedDevice, selectedStationCode], ([, device, code]) => {
   if (device && code) {
     onSelectDevice(device, code);
@@ -316,26 +322,26 @@ const lineDeviceTreeData = computed<Record<Station['code'], TreeOption[]>>(() =>
           key: stationCode,
           prefix: () => renderStationNodePrefix(station),
           suffix: () => renderIcmpStatistics(onlineDevices?.length ?? 0, offlineDevices?.length ?? 0, devices?.length ?? 0),
-          children: nvrClusters.map<TreeOption>((nvrCluster) => {
+          children: nvrClusters.map<TreeOption>((cluster) => {
             return {
-              label: `${nvrCluster.name}`,
+              label: `${cluster.name}`,
-              key: nvrCluster.id ?? `${nvrCluster.name}`,
+              key: createDeviceNodeKey(stationCode, cluster),
-              prefix: () => renderDeviceNodePrefix(nvrCluster, stationCode),
+              prefix: () => renderDeviceNodePrefix(cluster, stationCode),
-              suffix: () => `${nvrCluster.ipAddress}`,
+              suffix: () => `${cluster.ipAddress}`,
-              children: nvrSingletons.map<TreeOption>((nvr) => {
+              children: nvrSingletons.map<TreeOption>((device) => {
                 return {
-                  label: `${nvr.name}`,
+                  label: `${device.name}`,
-                  key: nvr.id ?? `${nvr.name}`,
+                  key: createDeviceNodeKey(stationCode, device),
-                  prefix: () => renderDeviceNodePrefix(nvr, stationCode),
+                  prefix: () => renderDeviceNodePrefix(device, stationCode),
-                  suffix: () => `${nvr.ipAddress}`,
+                  suffix: () => `${device.ipAddress}`,
                   // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
                   stationCode,
-                  device: nvr,
+                  device: device,
                 };
               }),
               // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
               stationCode,
-              device: nvrCluster,
+              device: cluster,
             };
           }),
           stationCode,
@@ -352,7 +358,7 @@ const lineDeviceTreeData = computed<Record<Station['code'], TreeOption[]>>(() =>
             const device = dev as NdmDeviceResultVO;
             return {
               label: `${device.name}`,
-              key: `${device.name}${device.ipAddress}`,
+              key: createDeviceNodeKey(stationCode, device),
               prefix: () => renderDeviceNodePrefix(device, stationCode),
               suffix: () => `${device.ipAddress}`,
               // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
@@ -383,16 +389,16 @@ const stationDeviceTreeData = computed<TreeOption[]>(() => {
         label: `${DEVICE_TYPE_NAMES[deviceType]}`,
         key: deviceType,
         suffix: () => renderIcmpStatistics(onlineCount, offlineCount, nvrs.length),
-        children: clusters.map<TreeOption>((device) => {
+        children: clusters.map<TreeOption>((cluster) => {
           return {
-            label: `${device.name}`,
+            label: `${cluster.name}`,
-            key: `${device.name}${device.ipAddress}`,
+            key: createDeviceNodeKey(stationCode, cluster),
-            prefix: () => renderDeviceNodePrefix(device, stationCode),
+            prefix: () => renderDeviceNodePrefix(cluster, stationCode),
-            suffix: () => `${device.ipAddress}`,
+            suffix: () => `${cluster.ipAddress}`,
             children: singletons.map<TreeOption>((device) => {
               return {
                 label: `${device.name}`,
-                key: `${device.name}${device.ipAddress}`,
+                key: createDeviceNodeKey(stationCode, device),
                 prefix: () => renderDeviceNodePrefix(device, stationCode),
                 suffix: () => `${device.ipAddress}`,
                 stationCode,
@@ -400,7 +406,7 @@ const stationDeviceTreeData = computed<TreeOption[]>(() => {
               };
             }),
             stationCode,
-            device,
+            device: cluster,
           };
         }),
         stationCode,
@@ -414,7 +420,7 @@ const stationDeviceTreeData = computed<TreeOption[]>(() => {
       children: stationDevices[deviceType].map<TreeOption>((device) => {
         return {
           label: `${device.name}`,
-          key: `${device.name}${device.ipAddress}`,
+          key: createDeviceNodeKey(stationCode, device),
           prefix: () => renderDeviceNodePrefix(device, stationCode),
           suffix: () => `${device.ipAddress}`,
           stationCode,
@@ -462,6 +468,7 @@ const onFoldDeviceTree = () => {
 };
 const onLocateDeviceTree = async () => {
   if (!selectedStationCode.value) return;
+  const stationCode = selectedStationCode.value;
   if (!selectedDevice.value) return;
   const deviceType = tryGetDeviceType(selectedDevice.value.deviceType);
   if (!deviceType) return;
@@ -473,24 +480,24 @@ const onLocateDeviceTree = async () => {
   activeTab.value = deviceType;
 
   // 展开选择的车站
-  expandedKeys.value.push(selectedStationCode.value);
+  expandedKeys.value.push(stationCode);
 
   // 当选择录像机时，如果不是集群，进一步展开该录像机所在的集群节点
   if (deviceType === DEVICE_TYPE_LITERALS.ndmNvr) {
-    const stationDevices = lineDevices.value[selectedStationCode.value];
+    const stationDevices = lineDevices.value[stationCode];
     if (stationDevices) {
       const selectedNvr = selectedDevice.value as NdmNvrResultVO;
       if (!isNvrCluster(selectedNvr)) {
         const nvrs = stationDevices[DEVICE_TYPE_LITERALS.ndmNvr];
         const clusters = nvrs.filter((nvr) => isNvrCluster(nvr) && nvr.clusterList?.includes(selectedNvr.clusterList ?? ''));
-        expandedKeys.value.push(...clusters.map((nvr) => `${nvr.id}`));
+        expandedKeys.value.push(...clusters.map((nvr) => createDeviceNodeKey(stationCode, nvr)));
       }
     }
   }
 
   // 等待设备树展开完成，滚动到选择的设备
   await nextTick();
-  deviceTreeInst.value.scrollTo({ key: `${selectedDevice.value.id}`, behavior: 'smooth' });
+  deviceTreeInst.value.scrollTo({ key: createDeviceNodeKey(stationCode, selectedDevice.value), behavior: 'smooth' });
 
   animated.value = true;
 };