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

2025-08-29 18:55:06 +08:00
parent 83005fd1c7
commit 54a150ec07
4 changed files with 230 additions and 109 deletions
--- a/src/components/device-page/device-tree.vue
+++ b/src/components/device-page/device-tree.vue
@@ -1,12 +1,4 @@
-<script setup lang="ts">
-import type { Station } from '@/apis/domains';
-import type { NdmDeviceResultVO, NdmNvrResultVO } from '@/apis/models';
-import type { LineDevices } from '@/composables/query/device/use-line-devices-query';
-import { DeviceType, DeviceTypeName, getDeviceTypeVal, type DeviceTypeKey, type DeviceTypeVal } from '@/enums/device-type';
-import destr from 'destr';
-import { NButton, NButtonGroup, NFlex, NInput, NRadio, NRadioGroup, NTab, NTabs, NTag, NTree, type TagProps, type TreeInst, type TreeOption, type TreeOverrideNodeClickBehavior } from 'naive-ui';
-import { computed, h, ref, toRefs, useTemplateRef } from 'vue';
-
+<script lang="ts">
 const deviceTabPanes = Object.keys(DeviceType).map((key) => {
  const name = DeviceType[key as DeviceTypeKey];
  return {
@@ -14,14 +6,56 @@ const deviceTabPanes = Object.keys(DeviceType).map((key) => {
    tab: DeviceTypeName[name],
  };
 });
+</script>
+
+<script setup lang="ts">
+import type { Station } from '@/apis/domains';
+import type { NdmDeviceResultVO, NdmNvrResultVO } from '@/apis/models';
+import type { LineDevices } from '@/composables/query/device/use-line-devices-query';
+import { DeviceType, DeviceTypeName, getDeviceTypeVal, type DeviceTypeKey, type DeviceTypeVal } from '@/enums/device-type';
+import { destr } from 'destr';
+import { NButton, NFlex, NInput, NRadio, NRadioGroup, NTab, NTabs, NTag, NTree, type TagProps, type TreeInst, type TreeOption, type TreeOverrideNodeClickBehavior, type TreeProps } from 'naive-ui';
+import { computed, h, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue';

 const props = defineProps<{
  stationList: Station[];
  lineDevices: LineDevices;
+  selectedStationCode?: string;
+  selectedDeviceType: DeviceTypeVal;
+  selectedDevice?: NdmDeviceResultVO;
 }>();

-// 获取车站和设备数据
-const { stationList, lineDevices } = toRefs(props);
+const emit = defineEmits<{
+  'select-device': [device: NdmDeviceResultVO, stationCode: string];
+}>();
+
+const { stationList, lineDevices, selectedStationCode, selectedDeviceType, selectedDevice } = toRefs(props);
+
+const activeTab = ref<DeviceTypeVal>(DeviceType.Camera);
+watch(
+  () => selectedDeviceType.value,
+  (newType) => (activeTab.value = newType),
+  { immediate: true },
+);
+const selectedKeys = computed(() => (selectedDevice.value?.id ? [selectedDevice.value.id] : undefined));
+
+// 选择设备
+const onSelectDevice = (device: NdmDeviceResultVO, stationCode: string) => {
+  emit('select-device', device, stationCode);
+};
+const override: TreeOverrideNodeClickBehavior = () => 'none';
+const nodeProps: TreeProps['nodeProps'] = ({ option }) => {
+  return {
+    onDblclick: (payload: MouseEvent) => {
+      if (option['device']) {
+        payload.stopPropagation();
+        const device = option['device'] as NdmDeviceResultVO;
+        const stationCode = option['stationCode'] as string;
+        onSelectDevice(device, stationCode);
+      }
+    },
+  };
+};

 // ========== 设备树数据 ==========
 const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
@@ -116,28 +150,19 @@ const renderDeviceNodePrefix = (device: NdmDeviceResultVO, stationCode: string)
        text: true,
        size: 'tiny',
        type: 'info',
-        onClick: () => {
+        style: {
+          marginRight: 8,
+        } as CSSProperties,
+        onClick: (e: MouseEvent) => {
+          e.stopPropagation();
          // 选择设备
-          selectedDevice.value = device;
-          selectedStationCode.value = stationCode;
-          selectedKeys.value = [device.id ?? ''];
+          onSelectDevice(device, stationCode);
        },
      },
-      () => '选择',
+      () => '查看',
    );
  };
-  return h('div', [renderViewDeviceButton(device, stationCode), renderDeviceStatusTag(device)]);
-};
-
-// ========== 选中设备 ==========
-const selectedTab = defineModel<DeviceTypeVal>('selected-tab', { required: true, default: DeviceType.Camera });
-const selectedKeys = defineModel<string[]>('selected-keys');
-const selectedDevice = defineModel<NdmDeviceResultVO>('selected-device');
-const override: TreeOverrideNodeClickBehavior = ({ option }) => {
-  if (!option['device']) {
-    return 'none';
-  }
-  return 'default';
+  return h('div', [/* renderViewDeviceButton(device, stationCode),  */ renderDeviceStatusTag(device)]);
 };

 // ========== 设备树搜索 ==========
@@ -161,19 +186,26 @@ const searchFilter = (pattern: string, node: TreeOption): boolean => {
 };

 // ========== 设备树交互 ==========
-const selectedStationCode = defineModel<string>('selected-station-code');
 const expandedKeys = ref<string[]>();
 const deviceTreeInst = useTemplateRef<TreeInst>('deviceTreeInst');
+const onClickFoldDeviceTree = () => {
+  expandedKeys.value = [];
+};
 const onClickLocateDeviceTree = () => {
-  // FIXME
-  selectedTab.value = getDeviceTypeVal(selectedDevice.value?.deviceType ?? selectedTab.value);
-  selectedKeys.value = selectedDevice.value?.id ? [selectedDevice.value.id] : undefined;
+  const stationCode = selectedStationCode.value;
+  const device = selectedDevice.value;
+  if (!stationCode || !device?.id) return;
+  if (device.deviceType) {
+    activeTab.value = getDeviceTypeVal(device.deviceType);
+  }

-  let expanded: string[] | undefined = selectedStationCode.value ? [selectedStationCode.value] : undefined;
-  if (selectedTab.value === DeviceType.Nvr && selectedStationCode.value) {
-    const nvrs = lineDevices.value[selectedStationCode.value][DeviceType.Nvr];
-    const clusterKeys = nvrs.filter((nvr) => !!nvr.clusterList?.trim() && nvr.clusterList !== nvr.ipAddress).map((nvr) => String(nvr.id));
-    expanded = [...(expanded ?? []), ...clusterKeys];
+  const expanded = [stationCode];
+  if (activeTab.value === DeviceType.Nvr) {
+    const nvrs = lineDevices.value[stationCode]?.[DeviceType.Nvr];
+    if (nvrs) {
+      const clusterKeys = nvrs.filter((nvr) => !!nvr.clusterList?.trim() && nvr.clusterList !== nvr.ipAddress).map((nvr) => String(nvr.id));
+      expanded.push(...clusterKeys);
+    }
  }
  expandedKeys.value = expanded;

@@ -181,17 +213,12 @@ const onClickLocateDeviceTree = () => {
  // 但是无法知晓NTree内部的虚拟列表容器何时创建完成，所以使用setTimeout延迟固定时间后执行滚动
  scrollDeviceTreeToSelectedDevice();
 };
-const scrollDeviceTreeToSelectedDevice = (timeout: number = 500) => {
+const scrollDeviceTreeToSelectedDevice = () => {
  setTimeout(() => {
    const inst = deviceTreeInst.value;
-    inst?.scrollTo({ key: selectedDevice.value?.id, behavior: 'smooth' });
-  }, timeout);
+    inst?.scrollTo({ key: selectedDevice?.value?.id, behavior: 'smooth' });
+  }, 350);
 };
-
-// defineExpose({
-//   onClickLocateDeviceTree,
-//   scrollDeviceTreeToSelectedDevice,
-// });
 </script>

 <template>
@@ -204,28 +231,30 @@ const scrollDeviceTreeToSelectedDevice = (timeout: number = 500) => {
          <NRadio value="10">在线</NRadio>
          <NRadio value="20">离线</NRadio>
        </NRadioGroup>
-        <NButtonGroup>
+        <NFlex :align="'center'">
+          <NButton text size="tiny" type="info" @click="onClickFoldDeviceTree">收起</NButton>
          <NButton text size="tiny" type="info" @click="onClickLocateDeviceTree">定位</NButton>
-        </NButtonGroup>
+        </NFlex>
      </NFlex>
    </div>

    <div style="flex: 1; min-height: 0; display: flex; overflow: hidden">
      <div style="flex: 0 0 auto; height: 100%">
-        <NTabs v-model:value="selectedTab" animated type="line" placement="left" style="height: 100%">
+        <NTabs v-model:value="activeTab" animated type="line" placement="left" style="height: 100%">
          <NTab v-for="pane in deviceTabPanes" :key="pane.name" :name="pane.name" :tab="pane.tab"></NTab>
        </NTabs>
      </div>
      <div style="flex: 1 1 auto; min-width: 0">
        <NTree
-          v-model:selected-keys="selectedKeys"
-          v-model:expanded-keys="expandedKeys"
          :ref="'deviceTreeInst'"
-          :data="lineDeviceTreeData[selectedTab]"
+          v-model:expanded-keys="expandedKeys"
+          :selected-keys="selectedKeys"
+          :data="activeTab ? lineDeviceTreeData[activeTab] : []"
          :show-irrelevant-nodes="false"
          :pattern="searchPattern"
          :filter="searchFilter"
          :override-default-node-click-behavior="override"
+          :node-props="nodeProps"
          default-expand-all
          block-line
          block-node