perf: optimize data sync of route.query and DevicePage & DeviceTree

src/composables/device/index.ts

@@ -0,0 +1 @@
+export * from './use-device-selection';

src/composables/device/use-device-selection.ts

@@ -0,0 +1,70 @@
+import type { NdmDeviceResultVO } from '@/apis/models';
+import { DeviceType, getDeviceTypeVal, type DeviceTypeVal } from '@/enums/device-type';
+import { ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import type { LineDevices } from '../query';
+
+export function useDeviceSelection() {
+  const route = useRoute();
+  const router = useRouter();
+
+  const selectedStationCode = ref<string>();
+  const selectedDeviceType = ref<DeviceTypeVal>(DeviceType.Camera);
+  const selectedDevice = ref<NdmDeviceResultVO>();
+
+  const initFromRoute = (lineDevices: LineDevices) => {
+    const { stationCode, deviceType, deviceDBId } = route.query;
+    if (stationCode) {
+      selectedStationCode.value = stationCode as string;
+    }
+    if (deviceType) {
+      selectedDeviceType.value = deviceType as DeviceTypeVal;
+    }
+    // 如果有设备ID参数，尝试找到对应设备
+    if (deviceDBId && selectedStationCode.value && selectedDeviceType.value) {
+      const deviceId = deviceDBId as string;
+      const stationDevices = lineDevices[selectedStationCode.value];
+      if (stationDevices) {
+        const typedDevices = stationDevices[selectedDeviceType.value];
+        if (typedDevices) {
+          const device = typedDevices.find((device) => device.id === deviceId);
+          if (device) {
+            selectedDevice.value = device;
+          }
+        }
+      }
+    }
+  };
+
+  const selectDevice = (device: NdmDeviceResultVO, stationCode: string) => {
+    selectedDevice.value = device;
+    selectedStationCode.value = stationCode;
+    selectedDeviceType.value = getDeviceTypeVal(device.deviceType);
+  };
+
+  const syncToRoute = () => {
+    const query = { ...route.query };
+    if (selectedStationCode.value) {
+      query['stationCode'] = selectedStationCode.value;
+    }
+    if (selectedDeviceType.value) {
+      query['deviceType'] = selectedDeviceType.value;
+    }
+    if (selectedDevice.value?.id) {
+      query['deviceDBId'] = selectedDevice.value.id;
+    }
+    router.replace({ query });
+  };
+
+  watch([selectedStationCode, selectedDevice], () => syncToRoute());
+
+  return {
+    selectedStationCode,
+    selectedDeviceType,
+    selectedDevice,
+
+    initFromRoute,
+    selectDevice,
+    syncToRoute,
+  };
+}