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

fix: queries continue running after page unmounted

Browse Source
This commit is contained in:
yangsy
2025-08-25 23:32:25 +08:00
parent 59a14cb9e1
commit 3cfb829608
20 changed files with 98 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/composables/query/alarm/index.ts
View File

@@ -1,2 +1,3 @@
export * from './use-line-alarms-query';
export * from './use-station-alarms-query';
export * from './use-today-alarms-query';

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

@@ -39,8 +39,7 @@ export function useLineAlarmsQuery() {
return useQuery({
queryKey: ['line-alarms', updatedTime],
enabled: computed(() => onlineStationList.value.length > 0 && pollingEnabled.value),
placeholderData: (prev) => prev,
queryFn: async (): Promise<LineAlarms> => {
queryFn: async ({ signal }): Promise<LineAlarms> => {
// console.time('useLineAlarmsQuery');
const lineAlarms: LineAlarms = {};
@@ -66,17 +65,21 @@ export function useLineAlarmsQuery() {
const now = dayjs();
const todayStart = now.startOf('date').valueOf();
const todayEnd = now.endOf('date').valueOf();
const { records: alarmList } = await postNdmDeviceAlarmLogPage(station.code, {
model: {},
extra: {
alarmDate_ge: todayStart,
alarmDate_le: todayEnd,
const { records: alarmList } = await postNdmDeviceAlarmLogPage(
station.code,
{
model: {},
extra: {
alarmDate_ge: todayStart,
alarmDate_le: todayEnd,
},
size: 50000,
current: 1,
sort: 'id',
order: 'descending',
},
size: 50000,
current: 1,
sort: 'id',
order: 'descending',
});
signal,
);
const cameraAlarms = alarmList.filter((device) => device.deviceType === DeviceType.Camera);
const decoderAlarms = alarmList.filter((device) => device.deviceType === DeviceType.Decoder);
const keyboardAlarms = alarmList.filter((device) => device.deviceType === DeviceType.Keyboard);
@@ -105,5 +108,6 @@ export function useLineAlarmsQuery() {
return lineAlarms;
},
placeholderData: (prev) => prev,
});
}

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

@@ -33,8 +33,7 @@ export function useStationAlarmsQuery(stationCode: Station['code']) {
return useQuery({
queryKey: ['station-alarms', stationCode, updatedTime],
enabled: computed(() => isOnline.value && pollingEnabled.value),
placeholderData: (prev) => prev ?? createEmptyStationAlarms(),
queryFn: async (): Promise<StationAlarms> => {
queryFn: async ({ signal }): Promise<StationAlarms> => {
// 如果车站离线，返回空数据
if (!isOnline.value) {
return createEmptyStationAlarms();
@@ -45,17 +44,21 @@ export function useStationAlarmsQuery(stationCode: Station['code']) {
const todayStart = now.startOf('date').valueOf();
const todayEnd = now.endOf('date').valueOf();
const { records: alarmList } = await postNdmDeviceAlarmLogPage(stationCode, {
model: {},
extra: {
alarmDate_ge: todayStart,
alarmDate_le: todayEnd,
const { records: alarmList } = await postNdmDeviceAlarmLogPage(
stationCode,
{
model: {},
extra: {
alarmDate_ge: todayStart,
alarmDate_le: todayEnd,
},
size: 50000,
current: 1,
sort: 'id',
order: 'descending',
},
size: 50000,
current: 1,
sort: 'id',
order: 'descending',
});
signal,
);
const cameraAlarms = alarmList.filter((alarm) => alarm.deviceType === DeviceType.Camera);
const decoderAlarms = alarmList.filter((alarm) => alarm.deviceType === DeviceType.Decoder);
@@ -83,5 +86,6 @@ export function useStationAlarmsQuery(stationCode: Station['code']) {
return createEmptyStationAlarms();
}
},
placeholderData: (prev) => prev,
});
}

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

@@ -35,8 +35,7 @@ export function useLineDevicesQuery() {
return useQuery({
queryKey: ['line-devices', updatedTime],
enabled: computed(() => onlineStationList.value.length > 0 && pollingEnabled.value),
placeholderData: (prev) => prev,
queryFn: async (): Promise<LineDevices> => {
queryFn: async ({ signal }): Promise<LineDevices> => {
// console.time('useLineDevicesQuery');
const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' };
@@ -59,14 +58,14 @@ export function useLineDevicesQuery() {
try {
// 并行获取该车站的所有设备类型数据
const [cameraData, decoderData, keyboardData, mediaServerData, nvrData, securityBoxData, switchData, videoServerData] = await Promise.all([
postNdmCameraPage(station.code, pageQuery),
postNdmDecoderPage(station.code, pageQuery),
postNdmKeyboardPage(station.code, pageQuery),
postNdmMediaServerPage(station.code, pageQuery),
postNdmNvrPage(station.code, pageQuery),
postNdmSecurityBoxPage(station.code, pageQuery),
postNdmSwitchPage(station.code, pageQuery),
postNdmVideoServerPage(station.code, pageQuery),
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),
]);
// 存储该车站的设备数据
@@ -91,5 +90,6 @@ export function useLineDevicesQuery() {
return lineDevices;
},
placeholderData: (prev) => prev,
});
}

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

@@ -7,7 +7,7 @@ import { useStationStore } from '@/stores/station';
import { useQuery } from '@tanstack/vue-query';
import { storeToRefs } from 'pinia';
import { computed } from 'vue';
import type { StationDevices } from './domains/station-devices';
import type { StationDevices } from './domains';
const createEmptyStationDevices = (): StationDevices => {
return {
@@ -34,8 +34,7 @@ export function useStationDevicesQuery(stationCode: Station['code']) {
return useQuery({
queryKey: ['station-devices', stationCode, updatedTime],
enabled: computed(() => isOnline.value && pollingEnabled.value),
placeholderData: (prev) => prev ?? createEmptyStationDevices(),
queryFn: async (): Promise<StationDevices> => {
queryFn: async ({ signal }): Promise<StationDevices> => {
const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' };
// 如果车站离线，返回空数据
@@ -45,14 +44,14 @@ export function useStationDevicesQuery(stationCode: Station['code']) {
try {
const [cameraData, decoderData, keyboardData, mediaServerData, nvrData, securityBoxData, switchData, videoServerData] = await Promise.all([
postNdmCameraPage(stationCode, pageQuery),
postNdmDecoderPage(stationCode, pageQuery),
postNdmKeyboardPage(stationCode, pageQuery),
postNdmMediaServerPage(stationCode, pageQuery),
postNdmNvrPage(stationCode, pageQuery),
postNdmSecurityBoxPage(stationCode, pageQuery),
postNdmSwitchPage(stationCode, pageQuery),
postNdmVideoServerPage(stationCode, pageQuery),
postNdmCameraPage(stationCode, pageQuery, signal),
postNdmDecoderPage(stationCode, pageQuery, signal),
postNdmKeyboardPage(stationCode, pageQuery, signal),
postNdmMediaServerPage(stationCode, pageQuery, signal),
postNdmNvrPage(stationCode, pageQuery, signal),
postNdmSecurityBoxPage(stationCode, pageQuery, signal),
postNdmSwitchPage(stationCode, pageQuery, signal),
postNdmVideoServerPage(stationCode, pageQuery, signal),
]);
return {
@@ -71,5 +70,6 @@ export function useStationDevicesQuery(stationCode: Station['code']) {
return createEmptyStationDevices();
}
},
placeholderData: (prev) => prev,
});
}