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

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

@@ -0,0 +1,270 @@
+<script lang="ts">
+const deviceTabPanes = Object.keys(DeviceType).map((key) => {
+  const name = DeviceType[key as DeviceTypeKey];
+  return {
+    name,
+    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 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[]>>(() => {
+  const treeData: Record<string, TreeOption[]> = {};
+  deviceTabPanes.forEach(({ name: paneName /* , tab: paneTab */ }) => {
+    treeData[paneName] = stationList.value.map<TreeOption>((station) => {
+      const { name: stationName, code: stationCode } = station;
+      const devices = lineDevices.value[stationCode]?.[paneName] ?? ([] as NdmDeviceResultVO[]);
+      const onlineDevices = devices?.filter((device) => device.deviceStatus === '10');
+      const offlineDevices = devices?.filter((device) => device.deviceStatus === '20');
+      // 对于录像机，需要根据clusterList字段以分号分隔设备IP，进一步形成子树结构
+      if (paneName === DeviceType.Nvr) {
+        const nvrs = devices as NdmNvrResultVO[] | undefined;
+        return {
+          label: stationName,
+          key: stationCode,
+          prefix: () => renderStationNodePrefix(station),
+          suffix: () => `(${onlineDevices?.length ?? 0}/${offlineDevices?.length ?? 0}/${devices?.length ?? 0})`,
+          children: nvrs
+            ?.filter((device) => {
+              const nvr = device as NdmNvrResultVO;
+              return !!nvr.clusterList?.trim() && nvr.clusterList !== nvr.ipAddress;
+            })
+            .map<TreeOption>((nvrCluster) => {
+              return {
+                label: `${nvrCluster.name}`,
+                key: nvrCluster.id,
+                prefix: () => renderDeviceNodePrefix(nvrCluster, stationCode),
+                suffix: () => `${nvrCluster.ipAddress}`,
+                children: nvrs
+                  .filter((nvr) => {
+                    return nvrCluster.clusterList?.includes(nvr.ipAddress ?? '');
+                  })
+                  .map<TreeOption>((nvr) => {
+                    return {
+                      label: `${nvr.name}`,
+                      key: nvr.id,
+                      prefix: () => renderDeviceNodePrefix(nvr, stationCode),
+                      suffix: () => `${nvr.ipAddress}`,
+                      // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
+                      device: nvr,
+                      stationCode,
+                    };
+                  }),
+                // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
+                device: nvrCluster,
+                stationCode,
+              };
+            }),
+        };
+      }
+      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>((dev) => {
+            const device = dev as NdmDeviceResultVO;
+            return {
+              label: `${device.name}`,
+              key: device.id,
+              prefix: () => renderDeviceNodePrefix(device, stationCode),
+              suffix: () => `${device.ipAddress}`,
+              // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
+              device,
+              stationCode,
+            };
+          }) ?? [],
+      };
+    });
+  });
+  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;
+    const tagType: TagProps['type'] = deviceStatus === '10' ? 'success' : deviceStatus === '20' ? 'error' : 'warning';
+    const tagText = device.deviceStatus === '10' ? '在线' : device.deviceStatus === '20' ? '离线' : '未知';
+    return h(NTag, { type: tagType, size: 'tiny' }, () => tagText);
+  };
+  const renderViewDeviceButton = (device: NdmDeviceResultVO, stationCode: string) => {
+    return h(
+      NButton,
+      {
+        text: true,
+        size: 'tiny',
+        type: 'info',
+        style: {
+          marginRight: 8,
+        } as CSSProperties,
+        onClick: (e: MouseEvent) => {
+          e.stopPropagation();
+          // 选择设备
+          onSelectDevice(device, stationCode);
+        },
+      },
+      () => '查看',
+    );
+  };
+  return h('div', [/* renderViewDeviceButton(device, stationCode),  */ renderDeviceStatusTag(device)]);
+};
+
+// ========== 设备树搜索 ==========
+const searchInput = ref('');
+const statusInput = ref('');
+// 设备树将搜索框和单选框的值都交给NTree的pattern属性
+// 但是如果一个车站下没有匹配的设备，那么这个车站节点也不会显示
+const searchPattern = computed(() => {
+  const search = searchInput.value;
+  const status = statusInput.value;
+  if (!search && !status) return ''; // 如果pattern非空会导致NTree组件认为筛选完成，UI上发生全量匹配
+  return JSON.stringify({ search: searchInput.value, status: statusInput.value });
+});
+const searchFilter = (pattern: string, node: TreeOption): boolean => {
+  const { search, status } = destr<{ search: string; status: string }>(pattern);
+  const device = node['device'] as NdmDeviceResultVO | undefined;
+  const { name, ipAddress, deviceId, deviceStatus } = device ?? {};
+  const searchMatched = (name ?? '').includes(search) || (ipAddress ?? '').includes(search) || (deviceId ?? '').includes(search);
+  const statusMatched = status === '' || status === deviceStatus;
+  return searchMatched && statusMatched;
+};
+
+// ========== 设备树交互 ==========
+const expandedKeys = ref<string[]>();
+const deviceTreeInst = useTemplateRef<TreeInst>('deviceTreeInst');
+const onClickFoldDeviceTree = () => {
+  expandedKeys.value = [];
+};
+const onClickLocateDeviceTree = () => {
+  const stationCode = selectedStationCode.value;
+  const device = selectedDevice.value;
+  if (!stationCode || !device?.id) return;
+  if (device.deviceType) {
+    activeTab.value = getDeviceTypeVal(device.deviceType);
+  }
+
+  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;
+
+  // 由于数据量大所以开启虚拟滚动，
+  // 但是无法知晓NTree内部的虚拟列表容器何时创建完成，所以使用setTimeout延迟固定时间后执行滚动
+  scrollDeviceTreeToSelectedDevice();
+};
+const scrollDeviceTreeToSelectedDevice = () => {
+  setTimeout(() => {
+    const inst = deviceTreeInst.value;
+    inst?.scrollTo({ key: selectedDevice?.value?.id, behavior: 'smooth' });
+  }, 350);
+};
+</script>
+
+<template>
+  <div style="height: 100%; display: flex; flex-direction: column">
+    <div style="flex-shrink: 0; padding: 12px">
+      <NInput v-model:value="searchInput" placeholder="搜索设备、设备ID或IP地址" clearable />
+      <NFlex justify="space-between" align="center">
+        <NRadioGroup v-model:value="statusInput">
+          <NRadio value="">全部</NRadio>
+          <NRadio value="10">在线</NRadio>
+          <NRadio value="20">离线</NRadio>
+        </NRadioGroup>
+        <NFlex :align="'center'">
+          <NButton text size="tiny" type="info" @click="onClickFoldDeviceTree">收起</NButton>
+          <NButton text size="tiny" type="info" @click="onClickLocateDeviceTree">定位</NButton>
+        </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="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
+          :ref="'deviceTreeInst'"
+          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
+          show-line
+          virtual-scroll
+          style="height: 100%"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>