perf: optimize data sync of route.query and DevicePage & DeviceTree
This commit is contained in:
yangsy
@@ -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
|
||||
1
src/composables/device/index.ts
Normal file
1
src/composables/device/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './use-device-selection';
|
||||
70
src/composables/device/use-device-selection.ts
Normal file
70
src/composables/device/use-device-selection.ts
Normal file
@@ -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,
|
||||
};
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user