skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: add store to save data from queries progressively

Browse Source
This commit is contained in:
yangsy
2025-08-26 03:27:06 +08:00
parent 55e9efce7e
commit c2ebe34a05
8 changed files with 141 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/composables/query/alarm/use-line-alarms-query.ts
View File

@@ -8,6 +8,7 @@ import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { computed } from 'vue';
import type { StationAlarms } from './domains';
import { useLineAlarmsStore } from '@/stores/line-alarms';
export interface LineAlarms {
[stationCode: Station['code']]: StationAlarms;
@@ -15,24 +16,29 @@ export interface LineAlarms {
export function useLineAlarmsQuery() {
const stationStore = useStationStore();
const { updatedTime, stationList, onlineStationList } = storeToRefs(stationStore);
const { stationList, onlineStationList } = storeToRefs(stationStore);
const queryControlStore = useQueryControlStore();
const { pollingEnabled } = storeToRefs(queryControlStore);
const lineAlarmsStore = useLineAlarmsStore();
const { lineAlarms } = storeToRefs(lineAlarmsStore);
return useQuery({
queryKey: ['line-alarms', updatedTime],
queryKey: ['line-alarms'],
enabled: computed(() => onlineStationList.value.length > 0 && pollingEnabled.value),
staleTime: Infinity,
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
queryFn: async ({ signal }): Promise<LineAlarms> => {
// console.time('useLineAlarmsQuery');
const lineAlarms: LineAlarms = {};
if (!stationList?.value) {
return lineAlarms;
lineAlarms.value = {};
return lineAlarms.value;
}
for (const station of stationList.value) {
lineAlarms[station.code] = {
lineAlarms.value[station.code] = {
[DeviceType.Camera]: [],
[DeviceType.Decoder]: [],
[DeviceType.Keyboard]: [],
@@ -71,7 +77,7 @@ export function useLineAlarmsQuery() {
const securityBoxAlarms = alarmList.filter((device) => device.deviceType === DeviceType.SecurityBox);
const switchAlarms = alarmList.filter((device) => device.deviceType === DeviceType.Switch);
const videoServerAlarms = alarmList.filter((device) => device.deviceType === DeviceType.VideoServer);
lineAlarms[station.code] = {
lineAlarms.value[station.code] = {
[DeviceType.Camera]: cameraAlarms,
[DeviceType.Decoder]: decoderAlarms,
[DeviceType.Keyboard]: keyboardAlarms,
@@ -89,7 +95,7 @@ export function useLineAlarmsQuery() {
// console.timeEnd('useLineAlarmsQuery');
return lineAlarms;
return lineAlarms.value;
},
placeholderData: (prev) => prev,
});

8
src/composables/query/alarm/use-station-alarms-query.ts
View File

@@ -23,7 +23,7 @@ const createEmptyStationAlarms = (): StationAlarms => ({
export function useStationAlarmsQuery(stationCode: Station['code']) {
const stationStore = useStationStore();
const { updatedTime, onlineStationList } = storeToRefs(stationStore);
const { onlineStationList } = storeToRefs(stationStore);
const queryControlStore = useQueryControlStore();
const { pollingEnabled } = storeToRefs(queryControlStore);
@@ -31,8 +31,12 @@ export function useStationAlarmsQuery(stationCode: Station['code']) {
const isOnline = computed(() => onlineStationList.value.some((stn) => stn.code === stationCode));
return useQuery({
queryKey: ['station-alarms', stationCode, updatedTime],
queryKey: ['station-alarms', stationCode],
enabled: computed(() => isOnline.value && pollingEnabled.value),
staleTime: Infinity,
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
queryFn: async ({ signal }): Promise<StationAlarms> => {
// 如果车站离线，返回空数据
if (!isOnline.value) {

122
src/composables/query/device/use-line-devices-query.ts
View File

@@ -8,6 +8,7 @@ import { useQuery } from '@tanstack/vue-query';
import { storeToRefs } from 'pinia';
import { computed } from 'vue';
import type { StationDevices } from './domains';
import { useLineDevicesStore } from '@/stores/line-devices';
export interface LineDevices {
[stationCode: Station['code']]: StationDevices;
@@ -28,67 +29,116 @@ const createEmptyStationDevices = (): StationDevices => {
export function useLineDevicesQuery() {
const stationStore = useStationStore();
const { updatedTime, stationList, onlineStationList } = storeToRefs(stationStore);
const { stationList, onlineStationList } = storeToRefs(stationStore);
const queryControlStore = useQueryControlStore();
const { pollingEnabled } = storeToRefs(queryControlStore);
const lineDevicesStore = useLineDevicesStore();
const { lineDevices } = storeToRefs(lineDevicesStore);
return useQuery({
queryKey: ['line-devices', updatedTime],
queryKey: ['line-devices'],
enabled: computed(() => onlineStationList.value.length > 0 && pollingEnabled.value),
staleTime: Infinity,
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
queryFn: async ({ signal }): Promise<LineDevices> => {
// console.time('useLineDevicesQuery');
const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' };
const lineDevices: LineDevices = {};
// const lineDevices: LineDevices = {};
// 如果没有车站列表，返回空对象
// 如果没有车站列表，返回空数据
if (!stationList?.value) {
return lineDevices;
lineDevices.value = {};
return lineDevices.value;
}
// 遍历所有车站
for (const station of stationList.value) {
// 如果车站离线，设置空数组
// 如果车站离线，设置空数据
if (!station.online) {
lineDevices[station.code] = createEmptyStationDevices();
lineDevices.value[station.code] = createEmptyStationDevices();
continue;
}
try {
// 并行获取该车站的所有设备类型数据
const [cameraData, decoderData, keyboardData, mediaServerData, nvrData, securityBoxData, switchData, videoServerData] = await Promise.all([
postNdmCameraPage(station.code, pageQuery, signal),
postNdmDecoderPage(station.code, pageQuery, signal),
postNdmKeyboardPage(station.code, pageQuery, signal),
postNdmMediaServerPage(station.code, pageQuery, signal),
postNdmNvrPage(station.code, pageQuery, signal),
postNdmSecurityBoxPage(station.code, pageQuery, signal),
postNdmSwitchPage(station.code, pageQuery, signal),
postNdmVideoServerPage(station.code, pageQuery, signal),
]);
// 存储该车站的设备数据
lineDevices[station.code] = {
[DeviceType.Camera]: cameraData.records ?? [],
[DeviceType.Decoder]: decoderData.records ?? [],
[DeviceType.Keyboard]: keyboardData.records ?? [],
[DeviceType.MediaServer]: mediaServerData.records ?? [],
[DeviceType.Nvr]: nvrData.records ?? [],
[DeviceType.SecurityBox]: securityBoxData.records ?? [],
[DeviceType.Switch]: switchData.records ?? [],
[DeviceType.VideoServer]: videoServerData.records ?? [],
};
} catch (error) {
console.error(`获取车站 ${station.name} 设备数据失败:`, error);
// 如果获取失败，设置空数组
lineDevices[station.code] = createEmptyStationDevices();
if (!lineDevices.value[station.code]) {
lineDevices.value[station.code] = createEmptyStationDevices();
}
const stationDevices = lineDevices.value[station.code];
await Promise.allSettled([
postNdmCameraPage(station.code, pageQuery, signal)
.then(({ records }) => {
stationDevices[DeviceType.Camera] = records;
})
.catch((error) => {
console.error(`获取车站 ${station.name} 摄像机数据失败:`, error);
stationDevices[DeviceType.Camera] = [];
}),
postNdmDecoderPage(station.code, pageQuery, signal)
.then(({ records }) => {
stationDevices[DeviceType.Decoder] = records;
})
.catch((error) => {
console.error(`获取车站 ${station.name} 解码器数据失败:`, error);
stationDevices[DeviceType.Decoder] = [];
}),
postNdmKeyboardPage(station.code, pageQuery, signal)
.then(({ records }) => {
stationDevices[DeviceType.Keyboard] = records;
})
.catch((error) => {
console.error(`获取车站 ${station.name} 网络键盘数据失败:`, error);
stationDevices[DeviceType.Keyboard] = [];
}),
postNdmMediaServerPage(station.code, pageQuery, signal)
.then(({ records }) => {
stationDevices[DeviceType.MediaServer] = records;
})
.catch((error) => {
console.error(`获取车站 ${station.name} 媒体服务器数据失败:`, error);
stationDevices[DeviceType.MediaServer] = [];
}),
postNdmNvrPage(station.code, pageQuery, signal)
.then(({ records }) => {
stationDevices[DeviceType.Nvr] = records;
})
.catch((error) => {
console.error(`获取车站 ${station.name} 录像机数据失败:`, error);
stationDevices[DeviceType.Nvr] = [];
}),
postNdmSecurityBoxPage(station.code, pageQuery, signal)
.then(({ records }) => {
stationDevices[DeviceType.SecurityBox] = records;
})
.catch((error) => {
console.error(`获取车站 ${station.name} 安防箱数据失败:`, error);
stationDevices[DeviceType.SecurityBox] = [];
}),
postNdmSwitchPage(station.code, pageQuery, signal)
.then(({ records }) => {
stationDevices[DeviceType.Switch] = records;
})
.catch((error) => {
console.error(`获取车站 ${station.name} 交换机数据失败:`, error);
stationDevices[DeviceType.Switch] = [];
}),
postNdmVideoServerPage(station.code, pageQuery, signal)
.then(({ records }) => {
stationDevices[DeviceType.VideoServer] = records;
})
.catch((error) => {
console.error(`获取车站 ${station.name} 视频服务器数据失败:`, error);
stationDevices[DeviceType.VideoServer] = [];
}),
]);
}
// console.timeEnd('useLineDevicesQuery');
return lineDevices;
return lineDevices.value;
},
placeholderData: (prev) => prev,
});

8
src/composables/query/device/use-station-devices-query.ts
View File

@@ -24,7 +24,7 @@ const createEmptyStationDevices = (): StationDevices => {
export function useStationDevicesQuery(stationCode: Station['code']) {
const stationStore = useStationStore();
const { updatedTime, onlineStationList } = storeToRefs(stationStore);
const { onlineStationList } = storeToRefs(stationStore);
const queryControlStore = useQueryControlStore();
const { pollingEnabled } = storeToRefs(queryControlStore);
@@ -32,8 +32,12 @@ export function useStationDevicesQuery(stationCode: Station['code']) {
const isOnline = computed(() => onlineStationList.value.some((s) => s.code === stationCode));
return useQuery({
queryKey: ['station-devices', stationCode, updatedTime],
queryKey: ['station-devices', stationCode],
enabled: computed(() => isOnline.value && pollingEnabled.value),
staleTime: Infinity,
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
queryFn: async ({ signal }): Promise<StationDevices> => {
const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' };

10
src/composables/query/station/use-station-list-query.ts
View File

@@ -3,7 +3,7 @@ import { ndmVerify } from '@/apis/requests';
import { useQueryControlStore } from '@/stores/query-control';
import { useStationStore } from '@/stores/station';
import { getAppEnvConfig } from '@/utils/env';
import { useQuery } from '@tanstack/vue-query';
import { useQuery, useQueryClient } from '@tanstack/vue-query';
import axios from 'axios';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
@@ -11,7 +11,7 @@ import { computed } from 'vue';
export function useStationListQuery() {
const stationStore = useStationStore();
const { updatedTime, stationList } = storeToRefs(stationStore);
const { stationList } = storeToRefs(stationStore);
const queryControlStore = useQueryControlStore();
const { pollingEnabled } = storeToRefs(queryControlStore);
@@ -45,7 +45,11 @@ export function useStationListQuery() {
stationList.value.splice(0, stationList.value.length, ...stations);
}
updatedTime.value = dayjs().toJSON();
const queryClient = useQueryClient();
queryClient.invalidateQueries({ queryKey: ['station-devices'] });
queryClient.invalidateQueries({ queryKey: ['station-alarms'] });
// queryClient.invalidateQueries({ queryKey: ['line-devices'] });
// queryClient.invalidateQueries({ queryKey: ['line-alarms'] });
return stations;
},

11
src/stores/line-alarms.ts Normal file
View File

@@ -0,0 +1,11 @@
import type { LineAlarms } from '@/composables/query';
import { defineStore } from 'pinia';
import { ref } from 'vue';
export const useLineAlarmsStore = defineStore('line-alarms', () => {
const lineAlarms = ref<LineAlarms>({});
return {
lineAlarms,
};
});

11
src/stores/line-devices.ts Normal file
View File

@@ -0,0 +1,11 @@
import type { LineDevices } from '@/composables/query';
import { defineStore } from 'pinia';
import { ref } from 'vue';
export const useLineDevicesStore = defineStore('ndm-line-devices-store', () => {
const lineDevices = ref<LineDevices>({});
return {
lineDevices,
};
});

3
src/stores/station.ts
View File

@@ -3,14 +3,11 @@ import { defineStore } from 'pinia';
import { computed, ref } from 'vue';
export const useStationStore = defineStore('ndm-station-store', () => {
const updatedTime = ref('');
const stationList = ref<Station[]>([]);
const onlineStationList = computed(() => stationList.value.filter((station) => station.online));
return {
updatedTime,
stationList,
onlineStationList,
};