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

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

@@ -1,12 +1,4 @@
-<script setup lang="ts">
+<script 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';
-
 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 emit = defineEmits<{
-const { stationList, lineDevices } = toRefs(props);
+  '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;
+          onSelectDevice(device, stationCode);
-          selectedStationCode.value = stationCode;
-          selectedKeys.value = [device.id ?? ''];
         },
       },
-      () => '选择',
+      () => '查看',
     );
   };
-  return h('div', [renderViewDeviceButton(device, stationCode), renderDeviceStatusTag(device)]);
+  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';
 };
 
 // ========== 设备树搜索 ==========
@@ -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
+  const stationCode = selectedStationCode.value;
-  selectedTab.value = getDeviceTypeVal(selectedDevice.value?.deviceType ?? selectedTab.value);
+  const device = selectedDevice.value;
-  selectedKeys.value = selectedDevice.value?.id ? [selectedDevice.value.id] : undefined;
+  if (!stationCode || !device?.id) return;
+  if (device.deviceType) {
+    activeTab.value = getDeviceTypeVal(device.deviceType);
+  }
 
-  let expanded: string[] | undefined = selectedStationCode.value ? [selectedStationCode.value] : undefined;
+  const expanded = [stationCode];
-  if (selectedTab.value === DeviceType.Nvr && selectedStationCode.value) {
+  if (activeTab.value === DeviceType.Nvr) {
-    const nvrs = lineDevices.value[selectedStationCode.value][DeviceType.Nvr];
+    const nvrs = lineDevices.value[stationCode]?.[DeviceType.Nvr];
-    const clusterKeys = nvrs.filter((nvr) => !!nvr.clusterList?.trim() && nvr.clusterList !== nvr.ipAddress).map((nvr) => String(nvr.id));
+    if (nvrs) {
-    expanded = [...(expanded ?? []), ...clusterKeys];
+      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' });
+    inst?.scrollTo({ key: selectedDevice?.value?.id, behavior: 'smooth' });
-  }, timeout);
+  }, 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

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,
+  };
+}

src/pages/device-page.vue

@@ -1,17 +1,31 @@
 <script setup lang="ts">
-import type { NdmDeviceResultVO } from '@/apis/models';
+import CameraCard from '@/components/device-page/camera-card.vue';
-import DeviceTree from '@/components/device-tree.vue';
+import DecoderCard from '@/components/device-page/decoder-card.vue';
+import DeviceTree from '@/components/device-page/device-tree.vue';
+import KeyboardCard from '@/components/device-page/keyboard-card.vue';
+import NvrCard from '@/components/device-page/nvr-card.vue';
+import SecurityBoxCard from '@/components/device-page/security-box-card.vue';
+import ServerCard from '@/components/device-page/server-card.vue';
+import SwitchCard from '@/components/device-page/switch-card.vue';
+import { useDeviceSelection } from '@/composables/device';
 import { useLineDevicesQuery } from '@/composables/query';
-import { DeviceType, type DeviceTypeVal } from '@/enums/device-type';
+import { DeviceType, getDeviceTypeVal, type DeviceTypeVal } from '@/enums/device-type';
 import { useLineDevicesStore } from '@/stores/line-devices';
 import { useStationStore } from '@/stores/station';
 import { ChevronBack } from '@vicons/ionicons5';
-import { NIcon, NLayout, NLayoutContent, NLayoutSider, NPageHeader } from 'naive-ui';
+import { NEmpty, NIcon, NLayout, NLayoutContent, NLayoutSider, NPageHeader, NScrollbar } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { ref, watch } from 'vue';
+import { onMounted, watch } from 'vue';
-import { useRoute, useRouter, type LocationQuery } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
+// 数据获取
 const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
+const stationStore = useStationStore();
+const { stationList } = storeToRefs(stationStore);
+const lineDevicesStore = useLineDevicesStore();
+const { lineDevices } = storeToRefs(lineDevicesStore);
+
+// 加载条控制
 watch(
   lineDevicesFetching,
   (fetching) => {
@@ -31,78 +45,85 @@ const router = useRouter();
 
 const onClickBack = () => router.push({ path: `${route.query['from']}` });
 
-// 获取车站和设备数据
+const { selectedStationCode, selectedDeviceType, selectedDevice, selectDevice, initFromRoute } = useDeviceSelection();
-const stationStore = useStationStore();
-const { stationList } = storeToRefs(stationStore);
-const lineDevicesStore = useLineDevicesStore();
-const { lineDevices } = storeToRefs(lineDevicesStore);
 
-const selectedTab = ref<DeviceTypeVal>(DeviceType.Camera);
+// 页面初始化
-const selectedKeys = ref<string[]>();
+onMounted(() => {
-const selectedDevice = ref<NdmDeviceResultVO>();
+  initFromRoute(lineDevices.value);
-const selectedStationCode = ref<string>();
+});
 
-// 解析路由参数，设置选中的设备
+// 当设备数据更新时，需要重新配置设备树
-const setSelectedRefsFromRouteQuery = (query: LocationQuery) => {
-  const { stationCode, deviceType, deviceDBId } = query;
-  if (stationCode) selectedStationCode.value = stationCode as string;
-  let devType: DeviceTypeVal = DeviceType.Camera;
-  let devDBId = '';
-  if (deviceType) devType = deviceType as DeviceTypeVal;
-  if (deviceDBId) devDBId = deviceDBId as string;
-
-  selectedTab.value = devType;
-  selectedKeys.value = [devDBId];
-  const stnDevices = lineDevices.value[selectedStationCode.value ?? ''];
-  const devices = stnDevices?.[devType];
-  // 如果没找到，那还是赋值为原来选择的设备
-  selectedDevice.value = devices?.find((device) => device.id === devDBId) ?? selectedDevice.value;
-};
-// 页面加载时设备数据可能不存在，因此当设备数据更新时，需要重新设置选中的设备
 watch(
   lineDevices,
   () => {
-    setSelectedRefsFromRouteQuery(route.query);
+    initFromRoute(lineDevices.value);
   },
   {
     deep: true,
-    immediate: true,
   },
 );
-
-watch(selectedTab, (newTab) => {
-  router.replace({ query: { ...route.query, deviceType: newTab } });
-});
-watch(selectedDevice, (newDevice) => {
-  router.replace({ query: { ...route.query, deviceDBId: newDevice?.id } });
-});
-watch(selectedStationCode, (newStationCode) => {
-  router.replace({ query: { ...route.query, stationCode: newStationCode } });
-});
 </script>
 
 <template>
   <NLayout has-sider style="height: 100%">
     <NLayoutSider bordered :width="600" :collapsed-width="0" show-trigger="bar">
       <DeviceTree
-        v-model:selected-keys="selectedKeys"
-        v-model:selected-tab="selectedTab"
-        v-model:selected-device="selectedDevice"
-        v-model:selected-station-code="selectedStationCode"
-        :line-devices="lineDevices"
         :station-list="stationList"
+        :line-devices="lineDevices"
+        :selected-station-code="selectedStationCode"
+        :selected-device-type="selectedDeviceType"
+        :selected-device="selectedDevice"
+        @select-device="selectDevice"
       />
     </NLayoutSider>
     <NLayoutContent :content-style="{ 'padding-left': '24px', 'padding-top': '6px' }">
-      <NPageHeader v-if="route.query['from']" title="" @back="onClickBack">
+      <div style="height: 100%; display: flex; flex-direction: column">
-        <template #back>
+        <div style="flex: 0 0 auto">
-          <NIcon>
+          <NPageHeader v-if="route.query['from']" title="" @back="onClickBack">
-            <ChevronBack />
+            <template #back>
-          </NIcon>
+              <NIcon>
-          <div style="font-size: 15px">返回</div>
+                <ChevronBack />
-        </template>
+              </NIcon>
-      </NPageHeader>
+              <div style="font-size: 15px">返回</div>
-      <div>{{ selectedDevice }}</div>
+            </template>
+          </NPageHeader>
+        </div>
+
+        <div style="flex: 1 1 auto; min-height: 0; padding-left: 24px">
+          <!-- 内容区域 -->
+          <template v-if="selectedDevice && selectedStationCode">
+            <NScrollbar x-scrollable style="height: 100%; padding-right: 24px">
+              <template v-if="getDeviceTypeVal(selectedDevice.deviceType) === DeviceType.Camera">
+                <CameraCard :station-code="selectedStationCode" :ndm-camera="selectedDevice" />
+              </template>
+              <template v-if="getDeviceTypeVal(selectedDevice.deviceType) === DeviceType.Decoder">
+                <DecoderCard :station-code="selectedStationCode" :ndm-decoder="selectedDevice" />
+              </template>
+              <template v-if="getDeviceTypeVal(selectedDevice.deviceType) === DeviceType.Keyboard">
+                <KeyboardCard :station-code="selectedStationCode" :ndm-keyboard="selectedDevice" />
+              </template>
+              <template v-if="getDeviceTypeVal(selectedDevice.deviceType) === DeviceType.Nvr">
+                <NvrCard :station-code="selectedStationCode" :ndm-nvr="selectedDevice" />
+              </template>
+              <template v-if="getDeviceTypeVal(selectedDevice.deviceType) === DeviceType.SecurityBox">
+                <SecurityBoxCard :station-code="selectedStationCode" :ndm-security-box="selectedDevice" />
+              </template>
+              <template v-if="([DeviceType.MediaServer, DeviceType.VideoServer] as DeviceTypeVal[]).includes(getDeviceTypeVal(selectedDevice.deviceType))">
+                <ServerCard :station-code="selectedStationCode" :ndm-server="selectedDevice" />
+              </template>
+              <template v-if="getDeviceTypeVal(selectedDevice.deviceType) === DeviceType.Switch">
+                <SwitchCard :station-code="selectedStationCode" :ndm-switch="selectedDevice" />
+              </template>
+              <!-- <pre style="width: 500px; height: 300px; overflow: scroll">{{ selectedDevice }}</pre> -->
+            </NScrollbar>
+          </template>
+          <template v-else>
+            <div style="width: 100%; height: 100%; display: flex">
+              <NEmpty description="选择设备查看诊断数据" style="margin: auto" />
+            </div>
+          </template>
+        </div>
+      </div>
     </NLayoutContent>
   </NLayout>
 </template>