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

perf: lift UX priority when query running

Browse Source
This commit is contained in:
yangsy
2025-08-29 11:57:07 +08:00
parent a6124d951c
commit cb8bf16d78
3 changed files with 110 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,7 @@ import type { StationAlarms } from './domains';
import { useLineAlarmsStore } from '@/stores/line-alarms'; import { useLineAlarmsStore } from '@/stores/line-alarms';
import { CanceledError } from 'axios'; import { CanceledError } from 'axios';
import { LINE_ALARMS_QUERY_KEY } from '@/constants'; import { LINE_ALARMS_QUERY_KEY } from '@/constants';
import { sleep } from '@/utils/sleep';
export interface LineAlarms { export interface LineAlarms {
[stationCode: Station['code']]: StationAlarms; [stationCode: Station['code']]: StationAlarms;
@@ -46,7 +47,7 @@ export function useLineAlarmsQuery() {
refetchOnReconnect: false, refetchOnReconnect: false,
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
queryFn: async ({ signal }): Promise<LineAlarms> => { queryFn: async ({ signal }): Promise<LineAlarms> => {
// console.time('useLineAlarmsQuery'); console.time('useLineAlarmsQuery');
if (!stationList?.value) { if (!stationList?.value) {
lineAlarms.value = {}; lineAlarms.value = {};
@@ -62,13 +63,13 @@ export function useLineAlarmsQuery() {
if (!lineAlarms.value[station.code]) { if (!lineAlarms.value[station.code]) {
lineAlarms.value[station.code] = createEmptyStationAlarms(); lineAlarms.value[station.code] = createEmptyStationAlarms();
} }
// const stationAlarms = lineAlarms.value[station.code];
const stationAlarms = createEmptyStationAlarms(); const stationAlarms = createEmptyStationAlarms();
try {
const now = dayjs(); const now = dayjs();
const todayStart = now.startOf('date').valueOf(); const todayStart = now.startOf('date').valueOf();
const todayEnd = now.endOf('date').valueOf(); const todayEnd = now.endOf('date').valueOf();
try {
const { records: alarmList } = await postNdmDeviceAlarmLogPage( const { records: alarmList } = await postNdmDeviceAlarmLogPage(
station.code, station.code,
{ {
@@ -76,6 +77,7 @@ export function useLineAlarmsQuery() {
extra: { extra: {
alarmDate_ge: todayStart, alarmDate_ge: todayStart,
alarmDate_le: todayEnd, alarmDate_le: todayEnd,
deviceId_likeRight: station.code,
}, },
size: 50000, size: 50000,
current: 1, current: 1,
@@ -84,25 +86,13 @@ export function useLineAlarmsQuery() {
}, },
signal, signal,
); );
const cameraAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.Camera); for (const alarm of alarmList) {
stationAlarms[DeviceType.Camera] = cameraAlarms; const deviceType = getDeviceTypeVal(alarm.deviceType);
const decoderAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.Decoder); stationAlarms[deviceType].push(alarm);
stationAlarms[DeviceType.Decoder] = decoderAlarms; }
const keyboardAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.Keyboard);
stationAlarms[DeviceType.Keyboard] = keyboardAlarms;
const mediaServerAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.MediaServer);
stationAlarms[DeviceType.MediaServer] = mediaServerAlarms;
const nvrAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.Nvr);
stationAlarms[DeviceType.Nvr] = nvrAlarms;
const securityBoxAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.SecurityBox);
stationAlarms[DeviceType.SecurityBox] = securityBoxAlarms;
const switchAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.Switch);
stationAlarms[DeviceType.Switch] = switchAlarms;
const videoServerAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.VideoServer);
stationAlarms[DeviceType.VideoServer] = videoServerAlarms;
stationAlarms.unclassified = alarmList; stationAlarms.unclassified = alarmList;
lineAlarms.value[station.code] = stationAlarms; lineAlarms.value[station.code] = stationAlarms;
await sleep();
} catch (error) { } catch (error) {
if (error instanceof CanceledError) return lineAlarms.value; if (error instanceof CanceledError) return lineAlarms.value;
console.error(`获取车站 ${station.name} 设备告警数据失败:`, error); console.error(`获取车站 ${station.name} 设备告警数据失败:`, error);
@@ -118,7 +108,7 @@ export function useLineAlarmsQuery() {
} }
} }
// console.timeEnd('useLineAlarmsQuery'); console.timeEnd('useLineAlarmsQuery');
return lineAlarms.value; return lineAlarms.value;
}, },

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

@@ -1,16 +1,17 @@
import type { Station } from '@/apis/domains'; import type { Station } from '@/apis/domains';
import type { PageParams } from '@/apis/models'; // import type { PageParams } from '@/apis/models';
import { postNdmCameraPage, postNdmDecoderPage, postNdmKeyboardPage, postNdmMediaServerPage, postNdmNvrPage, postNdmSecurityBoxPage, postNdmSwitchPage, postNdmVideoServerPage } from '@/apis/requests'; // import { postNdmCameraPage, postNdmDecoderPage, postNdmKeyboardPage, postNdmMediaServerPage, postNdmNvrPage, postNdmSecurityBoxPage, postNdmSwitchPage, postNdmVideoServerPage } from '@/apis/requests';
import { DeviceType } from '@/enums/device-type'; import { DeviceType } from '@/enums/device-type';
import { useQueryControlStore } from '@/stores/query-control'; import { useQueryControlStore } from '@/stores/query-control';
import { useStationStore } from '@/stores/station'; import { useStationStore } from '@/stores/station';
import { useQuery } from '@tanstack/vue-query'; import { useQuery, useQueryClient } from '@tanstack/vue-query';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { computed } from 'vue'; import { computed } from 'vue';
import type { StationDevices } from './domains'; import type { StationDevices } from './domains';
import { useLineDevicesStore } from '@/stores/line-devices'; import { useLineDevicesStore } from '@/stores/line-devices';
import { CanceledError } from 'axios';
import { LINE_DEVICES_QUERY_KEY } from '@/constants'; import { LINE_DEVICES_QUERY_KEY } from '@/constants';
import { ndmClient } from '@/apis/client';
import { sleep } from '@/utils/sleep';
export interface LineDevices { export interface LineDevices {
[stationCode: Station['code']]: StationDevices; [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() { export function useLineDevicesQuery() {
const stationStore = useStationStore(); const stationStore = useStationStore();
const { stationList, onlineStationList } = storeToRefs(stationStore); const { stationList, onlineStationList } = storeToRefs(stationStore);
@@ -36,6 +46,7 @@ export function useLineDevicesQuery() {
const { pollingEnabled } = storeToRefs(queryControlStore); const { pollingEnabled } = storeToRefs(queryControlStore);
const lineDevicesStore = useLineDevicesStore(); const lineDevicesStore = useLineDevicesStore();
const { lineDevices } = storeToRefs(lineDevicesStore); const { lineDevices } = storeToRefs(lineDevicesStore);
const queryClient = useQueryClient();
return useQuery({ return useQuery({
queryKey: [LINE_DEVICES_QUERY_KEY], queryKey: [LINE_DEVICES_QUERY_KEY],
@@ -45,9 +56,9 @@ export function useLineDevicesQuery() {
refetchOnReconnect: false, refetchOnReconnect: false,
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
queryFn: async ({ signal }): Promise<LineDevices> => { 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 = {}; // const lineDevices: LineDevices = {};
@@ -68,88 +79,86 @@ export function useLineDevicesQuery() {
if (!lineDevices.value[station.code]) { if (!lineDevices.value[station.code]) {
lineDevices.value[station.code] = createEmptyStationDevices(); lineDevices.value[station.code] = createEmptyStationDevices();
} }
// const stationDevices = lineDevices.value[station.code];
const stationDevices = createEmptyStationDevices();
await Promise.allSettled([ // const stationDevices = createEmptyStationDevices();
postNdmCameraPage(station.code, pageQuery, signal)
.then(({ records }) => { // await Promise.allSettled([
stationDevices[DeviceType.Camera] = records; // postNdmCameraPage(station.code, pageQuery, signal)
}) // .then(({ records }) => {
.catch((error) => { // stationDevices[DeviceType.Camera] = records;
if (error instanceof CanceledError) return; // })
console.error(`获取车站 ${station.name} 摄像机数据失败:`, error); // .catch((error) => {
stationDevices[DeviceType.Camera] = []; // console.error(`获取车站 ${station.name} 摄像机数据失败:`, error);
}), // stationDevices[DeviceType.Camera] = [];
postNdmDecoderPage(station.code, pageQuery, signal) // }),
.then(({ records }) => { // postNdmDecoderPage(station.code, pageQuery, signal)
stationDevices[DeviceType.Decoder] = records; // .then(({ records }) => {
}) // stationDevices[DeviceType.Decoder] = records;
.catch((error) => { // })
if (error instanceof CanceledError) return; // .catch((error) => {
console.error(`获取车站 ${station.name} 解码器数据失败:`, error); // console.error(`获取车站 ${station.name} 解码器数据失败:`, error);
stationDevices[DeviceType.Decoder] = []; // stationDevices[DeviceType.Decoder] = [];
}), // }),
postNdmKeyboardPage(station.code, pageQuery, signal) // postNdmKeyboardPage(station.code, pageQuery, signal)
.then(({ records }) => { // .then(({ records }) => {
stationDevices[DeviceType.Keyboard] = records; // stationDevices[DeviceType.Keyboard] = records;
}) // })
.catch((error) => { // .catch((error) => {
if (error instanceof CanceledError) return; // console.error(`获取车站 ${station.name} 网络键盘数据失败:`, error);
console.error(`获取车站 ${station.name} 网络键盘数据失败:`, error); // stationDevices[DeviceType.Keyboard] = [];
stationDevices[DeviceType.Keyboard] = []; // }),
}), // postNdmMediaServerPage(station.code, pageQuery, signal)
postNdmMediaServerPage(station.code, pageQuery, signal) // .then(({ records }) => {
.then(({ records }) => { // stationDevices[DeviceType.MediaServer] = records;
stationDevices[DeviceType.MediaServer] = records; // })
}) // .catch((error) => {
.catch((error) => { // console.error(`获取车站 ${station.name} 媒体服务器数据失败:`, error);
if (error instanceof CanceledError) return; // stationDevices[DeviceType.MediaServer] = [];
console.error(`获取车站 ${station.name} 媒体服务器数据失败:`, error); // }),
stationDevices[DeviceType.MediaServer] = []; // postNdmNvrPage(station.code, pageQuery, signal)
}), // .then(({ records }) => {
postNdmNvrPage(station.code, pageQuery, signal) // stationDevices[DeviceType.Nvr] = records;
.then(({ records }) => { // })
stationDevices[DeviceType.Nvr] = records; // .catch((error) => {
}) // console.error(`获取车站 ${station.name} 录像机数据失败:`, error);
.catch((error) => { // stationDevices[DeviceType.Nvr] = [];
if (error instanceof CanceledError) return; // }),
console.error(`获取车站 ${station.name} 录像机数据失败:`, error); // postNdmSecurityBoxPage(station.code, pageQuery, signal)
stationDevices[DeviceType.Nvr] = []; // .then(({ records }) => {
}), // stationDevices[DeviceType.SecurityBox] = records;
postNdmSecurityBoxPage(station.code, pageQuery, signal) // })
.then(({ records }) => { // .catch((error) => {
stationDevices[DeviceType.SecurityBox] = records; // console.error(`获取车站 ${station.name} 安防箱数据失败:`, error);
}) // stationDevices[DeviceType.SecurityBox] = [];
.catch((error) => { // }),
if (error instanceof CanceledError) return; // postNdmSwitchPage(station.code, pageQuery, signal)
console.error(`获取车站 ${station.name} 安防箱数据失败:`, error); // .then(({ records }) => {
stationDevices[DeviceType.SecurityBox] = []; // stationDevices[DeviceType.Switch] = records;
}), // })
postNdmSwitchPage(station.code, pageQuery, signal) // .catch((error) => {
.then(({ records }) => { // console.error(`获取车站 ${station.name} 交换机数据失败:`, error);
stationDevices[DeviceType.Switch] = records; // stationDevices[DeviceType.Switch] = [];
}) // }),
.catch((error) => { // postNdmVideoServerPage(station.code, pageQuery, signal)
if (error instanceof CanceledError) return; // .then(({ records }) => {
console.error(`获取车站 ${station.name} 交换机数据失败:`, error); // stationDevices[DeviceType.VideoServer] = records;
stationDevices[DeviceType.Switch] = []; // })
}), // .catch((error) => {
postNdmVideoServerPage(station.code, pageQuery, signal) // console.error(`获取车站 ${station.name} 视频服务器数据失败:`, error);
.then(({ records }) => { // stationDevices[DeviceType.VideoServer] = [];
stationDevices[DeviceType.VideoServer] = records; // }),
}) // ]);
.catch((error) => {
if (error instanceof CanceledError) return; const stationDevices = await getNdmDevicesAll(station.code, signal);
console.error(`获取车站 ${station.name} 视频服务器数据失败:`, error);
stationDevices[DeviceType.VideoServer] = [];
}),
]);
lineDevices.value[station.code] = stationDevices; lineDevices.value[station.code] = stationDevices;
await sleep();
} }
// console.timeEnd('useLineDevicesQuery'); console.timeEnd('useLineDevicesQuery');
queryClient.invalidateQueries({ queryKey: ['line-alarms'] });
return lineDevices.value; return lineDevices.value;
}, },

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

@@ -22,14 +22,14 @@ export function useStationListQuery() {
queryKey: [STATION_LIST_QUERY_KEY], queryKey: [STATION_LIST_QUERY_KEY],
enabled: computed(() => pollingEnabled.value), enabled: computed(() => pollingEnabled.value),
refetchInterval: getAppEnvConfig().requestInterval * 1000, refetchInterval: getAppEnvConfig().requestInterval * 1000,
queryFn: async () => { queryFn: async ({ signal }) => {
// 主动登录校验 // 主动登录校验
const [err] = await userClient.post<void>(`/api/ndm/ndmKeepAlive/verify`, {}, { timeout: 5000 }); const [err] = await userClient.post<void>(`/api/ndm/ndmKeepAlive/verify`, {}, { timeout: 5000, signal });
if (err) { if (err) {
throw err; throw err;
} }
const { data: ndmStationList } = await axios.get<{ code: string; name: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`); const { data: ndmStationList } = await axios.get<{ code: string; name: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`, { signal });
let stations = ndmStationList.map<Station>((station) => ({ let stations = ndmStationList.map<Station>((station) => ({
code: station.code ?? '', code: station.code ?? '',
@@ -37,7 +37,7 @@ export function useStationListQuery() {
online: false, online: false,
})); }));
const pingResultList = await Promise.allSettled(stations.map((station) => ndmVerify(station.code))); const pingResultList = await Promise.allSettled(stations.map((station) => ndmVerify(station.code, signal)));
stations = stations.map((station, index) => ({ stations = stations.map((station, index) => ({
...station, ...station,
@@ -58,7 +58,7 @@ export function useStationListQuery() {
// queryClient.invalidateQueries({ queryKey: ['station-devices'] }); // queryClient.invalidateQueries({ queryKey: ['station-devices'] });
// queryClient.invalidateQueries({ queryKey: ['station-alarms'] }); // queryClient.invalidateQueries({ queryKey: ['station-alarms'] });
queryClient.invalidateQueries({ queryKey: ['line-devices'] }); queryClient.invalidateQueries({ queryKey: ['line-devices'] });
queryClient.invalidateQueries({ queryKey: ['line-alarms'] }); // queryClient.invalidateQueries({ queryKey: ['line-alarms'] });
return stations; return stations;
}, },