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

src/pages/device-page.vue

@@ -1,17 +1,31 @@
 <script setup lang="ts">
-import type { NdmDeviceResultVO } from '@/apis/models';
-import DeviceTree from '@/components/device-tree.vue';
+import CameraCard from '@/components/device-page/camera-card.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 { useRoute, useRouter, type LocationQuery } from 'vue-router';
+import { onMounted, watch } from 'vue';
+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 stationStore = useStationStore();
-const { stationList } = storeToRefs(stationStore);
-const lineDevicesStore = useLineDevicesStore();
-const { lineDevices } = storeToRefs(lineDevicesStore);
+const { selectedStationCode, selectedDeviceType, selectedDevice, selectDevice, initFromRoute } = useDeviceSelection();
 
-const selectedTab = ref<DeviceTypeVal>(DeviceType.Camera);
-const selectedKeys = ref<string[]>();
-const selectedDevice = ref<NdmDeviceResultVO>();
-const selectedStationCode = ref<string>();
+// 页面初始化
+onMounted(() => {
+  initFromRoute(lineDevices.value);
+});
 
-// 解析路由参数，设置选中的设备
-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">
-        <template #back>
-          <NIcon>
-            <ChevronBack />
-          </NIcon>
-          <div style="font-size: 15px">返回</div>
-        </template>
-      </NPageHeader>
-      <div>{{ selectedDevice }}</div>
+      <div style="height: 100%; display: flex; flex-direction: column">
+        <div style="flex: 0 0 auto">
+          <NPageHeader v-if="route.query['from']" title="" @back="onClickBack">
+            <template #back>
+              <NIcon>
+                <ChevronBack />
+              </NIcon>
+              <div style="font-size: 15px">返回</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>