perf: lift UX priority when query running
This commit is contained in:
yangsy
@@ -1,16 +1,17 @@
|
||||
import type { Station } from '@/apis/domains';
|
||||
import type { PageParams } from '@/apis/models';
|
||||
import { postNdmCameraPage, postNdmDecoderPage, postNdmKeyboardPage, postNdmMediaServerPage, postNdmNvrPage, postNdmSecurityBoxPage, postNdmSwitchPage, postNdmVideoServerPage } from '@/apis/requests';
|
||||
// import type { PageParams } from '@/apis/models';
|
||||
// import { postNdmCameraPage, postNdmDecoderPage, postNdmKeyboardPage, postNdmMediaServerPage, postNdmNvrPage, postNdmSecurityBoxPage, postNdmSwitchPage, postNdmVideoServerPage } from '@/apis/requests';
|
||||
import { DeviceType } from '@/enums/device-type';
|
||||
import { useQueryControlStore } from '@/stores/query-control';
|
||||
import { useStationStore } from '@/stores/station';
|
||||
import { useQuery } from '@tanstack/vue-query';
|
||||
import { useQuery, useQueryClient } from '@tanstack/vue-query';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed } from 'vue';
|
||||
import type { StationDevices } from './domains';
|
||||
import { useLineDevicesStore } from '@/stores/line-devices';
|
||||
import { CanceledError } from 'axios';
|
||||
import { LINE_DEVICES_QUERY_KEY } from '@/constants';
|
||||
import { ndmClient } from '@/apis/client';
|
||||
import { sleep } from '@/utils/sleep';
|
||||
|
||||
export interface LineDevices {
|
||||
[stationCode: Station['code']]: StationDevices;
|
||||
@@ -29,6 +30,15 @@ const createEmptyStationDevices = (): StationDevices => {
|
||||
};
|
||||
};
|
||||
|
||||
const getNdmDevicesAll = async (stationCode: string, signal: AbortSignal) => {
|
||||
const resp = await ndmClient.get<StationDevices>(`/${stationCode}/api/ndm/ndmDevices/all`, { retRaw: true, signal });
|
||||
const [err, stationDevices] = resp;
|
||||
if (err || !stationDevices) {
|
||||
throw err;
|
||||
}
|
||||
return stationDevices;
|
||||
};
|
||||
|
||||
export function useLineDevicesQuery() {
|
||||
const stationStore = useStationStore();
|
||||
const { stationList, onlineStationList } = storeToRefs(stationStore);
|
||||
@@ -36,6 +46,7 @@ export function useLineDevicesQuery() {
|
||||
const { pollingEnabled } = storeToRefs(queryControlStore);
|
||||
const lineDevicesStore = useLineDevicesStore();
|
||||
const { lineDevices } = storeToRefs(lineDevicesStore);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useQuery({
|
||||
queryKey: [LINE_DEVICES_QUERY_KEY],
|
||||
@@ -45,9 +56,9 @@ export function useLineDevicesQuery() {
|
||||
refetchOnReconnect: false,
|
||||
refetchOnWindowFocus: false,
|
||||
queryFn: async ({ signal }): Promise<LineDevices> => {
|
||||
// console.time('useLineDevicesQuery');
|
||||
console.time('useLineDevicesQuery');
|
||||
|
||||
const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' };
|
||||
// const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' };
|
||||
|
||||
// const lineDevices: LineDevices = {};
|
||||
|
||||
@@ -68,88 +79,86 @@ export function useLineDevicesQuery() {
|
||||
if (!lineDevices.value[station.code]) {
|
||||
lineDevices.value[station.code] = createEmptyStationDevices();
|
||||
}
|
||||
// const stationDevices = lineDevices.value[station.code];
|
||||
const stationDevices = createEmptyStationDevices();
|
||||
|
||||
await Promise.allSettled([
|
||||
postNdmCameraPage(station.code, pageQuery, signal)
|
||||
.then(({ records }) => {
|
||||
stationDevices[DeviceType.Camera] = records;
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error instanceof CanceledError) return;
|
||||
console.error(`获取车站 ${station.name} 摄像机数据失败:`, error);
|
||||
stationDevices[DeviceType.Camera] = [];
|
||||
}),
|
||||
postNdmDecoderPage(station.code, pageQuery, signal)
|
||||
.then(({ records }) => {
|
||||
stationDevices[DeviceType.Decoder] = records;
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error instanceof CanceledError) return;
|
||||
console.error(`获取车站 ${station.name} 解码器数据失败:`, error);
|
||||
stationDevices[DeviceType.Decoder] = [];
|
||||
}),
|
||||
postNdmKeyboardPage(station.code, pageQuery, signal)
|
||||
.then(({ records }) => {
|
||||
stationDevices[DeviceType.Keyboard] = records;
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error instanceof CanceledError) return;
|
||||
console.error(`获取车站 ${station.name} 网络键盘数据失败:`, error);
|
||||
stationDevices[DeviceType.Keyboard] = [];
|
||||
}),
|
||||
postNdmMediaServerPage(station.code, pageQuery, signal)
|
||||
.then(({ records }) => {
|
||||
stationDevices[DeviceType.MediaServer] = records;
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error instanceof CanceledError) return;
|
||||
console.error(`获取车站 ${station.name} 媒体服务器数据失败:`, error);
|
||||
stationDevices[DeviceType.MediaServer] = [];
|
||||
}),
|
||||
postNdmNvrPage(station.code, pageQuery, signal)
|
||||
.then(({ records }) => {
|
||||
stationDevices[DeviceType.Nvr] = records;
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error instanceof CanceledError) return;
|
||||
console.error(`获取车站 ${station.name} 录像机数据失败:`, error);
|
||||
stationDevices[DeviceType.Nvr] = [];
|
||||
}),
|
||||
postNdmSecurityBoxPage(station.code, pageQuery, signal)
|
||||
.then(({ records }) => {
|
||||
stationDevices[DeviceType.SecurityBox] = records;
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error instanceof CanceledError) return;
|
||||
console.error(`获取车站 ${station.name} 安防箱数据失败:`, error);
|
||||
stationDevices[DeviceType.SecurityBox] = [];
|
||||
}),
|
||||
postNdmSwitchPage(station.code, pageQuery, signal)
|
||||
.then(({ records }) => {
|
||||
stationDevices[DeviceType.Switch] = records;
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error instanceof CanceledError) return;
|
||||
console.error(`获取车站 ${station.name} 交换机数据失败:`, error);
|
||||
stationDevices[DeviceType.Switch] = [];
|
||||
}),
|
||||
postNdmVideoServerPage(station.code, pageQuery, signal)
|
||||
.then(({ records }) => {
|
||||
stationDevices[DeviceType.VideoServer] = records;
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error instanceof CanceledError) return;
|
||||
console.error(`获取车站 ${station.name} 视频服务器数据失败:`, error);
|
||||
stationDevices[DeviceType.VideoServer] = [];
|
||||
}),
|
||||
]);
|
||||
// const stationDevices = createEmptyStationDevices();
|
||||
|
||||
// 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] = [];
|
||||
// }),
|
||||
// ]);
|
||||
|
||||
const stationDevices = await getNdmDevicesAll(station.code, signal);
|
||||
|
||||
lineDevices.value[station.code] = stationDevices;
|
||||
|
||||
await sleep();
|
||||
}
|
||||
|
||||
// console.timeEnd('useLineDevicesQuery');
|
||||
console.timeEnd('useLineDevicesQuery');
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ['line-alarms'] });
|
||||
|
||||
return lineDevices.value;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user