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

6
src/apis/requests/device/log/ndm-device-alarm-log.ts
View File

@@ -1,11 +1,11 @@
import { userClient, ndmClient } from '@/apis/client';
import type { PageParams, NdmDeviceAlarmLogPageQuery, PageResult, NdmDeviceAlarmLogResultVO } from '@/apis/models';
export const postNdmDeviceAlarmLogPage = async (stationCode: string, pageQuery: PageParams<NdmDeviceAlarmLogPageQuery>) => {
export const postNdmDeviceAlarmLogPage = async (stationCode: string, pageQuery: PageParams<NdmDeviceAlarmLogPageQuery>, signal?: AbortSignal) => {
const endpoint = '/api/ndm/ndmDeviceAlarmLog/page';
// 如果车站编码为空，则通过用户API客户端发送请求
if (!stationCode) {
const resp = await userClient.post<PageResult<NdmDeviceAlarmLogResultVO>>(endpoint, pageQuery);
const resp = await userClient.post<PageResult<NdmDeviceAlarmLogResultVO>>(endpoint, pageQuery, { signal });
const [err, alarmData] = resp;
if (err || !alarmData) {
throw err;
@@ -13,7 +13,7 @@ export const postNdmDeviceAlarmLogPage = async (stationCode: string, pageQuery:
return alarmData;
}
// 如果车站编码不为空，则通过网管API客户端发送请求
const resp = await ndmClient.post<PageResult<NdmDeviceAlarmLogResultVO>>(`/${stationCode}${endpoint}`, pageQuery);
const resp = await ndmClient.post<PageResult<NdmDeviceAlarmLogResultVO>>(`/${stationCode}${endpoint}`, pageQuery, { signal });
const [err, alarmData] = resp;
if (err || !alarmData) {
throw err;

4
src/apis/requests/device/other/ndm-security-box.ts
View File

@@ -1,9 +1,9 @@
import { ndmClient } from '@/apis/client';
import type { PageParams, NdmSecurityBoxPageQuery, PageResult, NdmSecurityBoxResultVO, NdmSecurityBoxUpdateVO } from '@/apis/models';
export const postNdmSecurityBoxPage = async (stationCode: string, pageQuery: PageParams<NdmSecurityBoxPageQuery>) => {
export const postNdmSecurityBoxPage = async (stationCode: string, pageQuery: PageParams<NdmSecurityBoxPageQuery>, signal?: AbortSignal) => {
const prefix = stationCode ? `/${stationCode}` : '';
const resp = await ndmClient.post<PageResult<NdmSecurityBoxResultVO>>(`${prefix}/api/ndm/ndmSecurityBox/page`, pageQuery);
const resp = await ndmClient.post<PageResult<NdmSecurityBoxResultVO>>(`${prefix}/api/ndm/ndmSecurityBox/page`, pageQuery, { signal });
const [err, ndmSecurityBoxData] = resp;
if (err || !ndmSecurityBoxData) {
throw err;

4
src/apis/requests/device/other/ndm-switch.ts
View File

@@ -1,9 +1,9 @@
import { ndmClient } from '@/apis/client';
import type { PageParams, NdmSwitchPageQuery, PageResult, NdmSwitchResultVO, NdmSwitchUpdateVO } from '@/apis/models';
export const postNdmSwitchPage = async (stationCode: string, pageQuery: PageParams<NdmSwitchPageQuery>) => {
export const postNdmSwitchPage = async (stationCode: string, pageQuery: PageParams<NdmSwitchPageQuery>, signal?: AbortSignal) => {
const prefix = stationCode ? `/${stationCode}` : '';
const resp = await ndmClient.post<PageResult<NdmSwitchResultVO>>(`${prefix}/api/ndm/ndmSwitch/page`, pageQuery);
const resp = await ndmClient.post<PageResult<NdmSwitchResultVO>>(`${prefix}/api/ndm/ndmSwitch/page`, pageQuery, { signal });
const [err, ndmSwitchData] = resp;
if (err || !ndmSwitchData) {
throw err;

4
src/apis/requests/device/storage/ndm-nvr.ts
View File

@@ -2,9 +2,9 @@ import { ndmClient } from '@/apis/client';
import type { PageParams, NdmNvrPageQuery, PageResult, NdmNvrResultVO, NdmNvrUpdateVO, NdmNvrVO, ClientChannel, NdmRecordCheck } from '@/apis/models';
import dayjs from 'dayjs';
export const postNdmNvrPage = async (stationCode: string, pageQuery: PageParams<NdmNvrPageQuery>) => {
export const postNdmNvrPage = async (stationCode: string, pageQuery: PageParams<NdmNvrPageQuery>, signal?: AbortSignal) => {
const prefix = stationCode ? `/${stationCode}` : '';
const resp = await ndmClient.post<PageResult<NdmNvrResultVO>>(`${prefix}/api/ndm/ndmNvr/page`, pageQuery);
const resp = await ndmClient.post<PageResult<NdmNvrResultVO>>(`${prefix}/api/ndm/ndmNvr/page`, pageQuery, { signal });
const [err, ndmNvrData] = resp;
if (err || !ndmNvrData) {
throw err;

4
src/apis/requests/device/video/ndm-camera.ts
View File

@@ -1,9 +1,9 @@
import { ndmClient } from '@/apis/client';
import type { PageParams, NdmCameraPageQuery, PageResult, NdmCameraResultVO, NdmCameraUpdateVO } from '@/apis/models';
export const postNdmCameraPage = async (stationCode: string, pageQuery: PageParams<NdmCameraPageQuery>) => {
export const postNdmCameraPage = async (stationCode: string, pageQuery: PageParams<NdmCameraPageQuery>, signal?: AbortSignal) => {
const prefix = stationCode ? `/${stationCode}` : '';
const resp = await ndmClient.post<PageResult<NdmCameraResultVO>>(`${prefix}/api/ndm/ndmCamera/page`, pageQuery);
const resp = await ndmClient.post<PageResult<NdmCameraResultVO>>(`${prefix}/api/ndm/ndmCamera/page`, pageQuery, { signal });
const [err, ndmCameraData] = resp;
if (err || !ndmCameraData) {
throw err;

4
src/apis/requests/device/video/ndm-decoder.ts
View File

@@ -1,9 +1,9 @@
import { ndmClient } from '@/apis/client';
import type { PageParams, NdmDecoderPageQuery, PageResult, NdmDecoderResultVO, NdmDecoderUpdateVO } from '@/apis/models';
export const postNdmDecoderPage = async (stationCode: string, pageQuery: PageParams<NdmDecoderPageQuery>) => {
export const postNdmDecoderPage = async (stationCode: string, pageQuery: PageParams<NdmDecoderPageQuery>, signal?: AbortSignal) => {
const prefix = stationCode ? `/${stationCode}` : '';
const resp = await ndmClient.post<PageResult<NdmDecoderResultVO>>(`${prefix}/api/ndm/ndmDecoder/page`, pageQuery);
const resp = await ndmClient.post<PageResult<NdmDecoderResultVO>>(`${prefix}/api/ndm/ndmDecoder/page`, pageQuery, { signal });
const [err, ndmDecoderData] = resp;
if (err || !ndmDecoderData) {
throw err;

4
src/apis/requests/device/video/ndm-keyboard.ts
View File

@@ -1,9 +1,9 @@
import { ndmClient } from '@/apis/client';
import type { PageParams, NdmKeyboardPageQuery, PageResult, NdmKeyboardResultVO, NdmKeyboardUpdateVO } from '@/apis/models';
export const postNdmKeyboardPage = async (stationCode: string, pageQuery: PageParams<NdmKeyboardPageQuery>) => {
export const postNdmKeyboardPage = async (stationCode: string, pageQuery: PageParams<NdmKeyboardPageQuery>, signal?: AbortSignal) => {
const prefix = stationCode ? `/${stationCode}` : '';
const resp = await ndmClient.post<PageResult<NdmKeyboardResultVO>>(`${prefix}/api/ndm/ndmKeyboard/page`, pageQuery);
const resp = await ndmClient.post<PageResult<NdmKeyboardResultVO>>(`${prefix}/api/ndm/ndmKeyboard/page`, pageQuery, { signal });
const [err, ndmKeyboardData] = resp;
if (err || !ndmKeyboardData) {
throw err;

4
src/apis/requests/device/video/ndm-media-server.ts
View File

@@ -1,9 +1,9 @@
import { ndmClient } from '@/apis/client';
import type { PageParams, NdmMediaServerPageQuery, PageResult, NdmMediaServerResultVO, NdmMediaServerUpdateVO } from '@/apis/models';
export const postNdmMediaServerPage = async (stationCode: string, pageQuery: PageParams<NdmMediaServerPageQuery>) => {
export const postNdmMediaServerPage = async (stationCode: string, pageQuery: PageParams<NdmMediaServerPageQuery>, signal?: AbortSignal) => {
const prefix = stationCode ? `/${stationCode}` : '';
const resp = await ndmClient.post<PageResult<NdmMediaServerResultVO>>(`${prefix}/api/ndm/ndmMediaServer/page`, pageQuery);
const resp = await ndmClient.post<PageResult<NdmMediaServerResultVO>>(`${prefix}/api/ndm/ndmMediaServer/page`, pageQuery, { signal });
const [err, ndmMediaServerData] = resp;
if (err || !ndmMediaServerData) {
throw err;

4
src/apis/requests/device/video/ndm-video-server.ts
View File

@@ -1,9 +1,9 @@
import { ndmClient } from '@/apis/client';
import type { PageParams, NdmVideoServerPageQuery, PageResult, NdmVideoServerResultVO, NdmVideoServerUpdateVO } from '@/apis/models';
export const postNdmVideoServerPage = async (stationCode: string, pageQuery: PageParams<NdmVideoServerPageQuery>) => {
export const postNdmVideoServerPage = async (stationCode: string, pageQuery: PageParams<NdmVideoServerPageQuery>, signal?: AbortSignal) => {
const prefix = stationCode ? `/${stationCode}` : '';
const resp = await ndmClient.post<PageResult<NdmVideoServerResultVO>>(`${prefix}/api/ndm/ndmVideoServer/page`, pageQuery);
const resp = await ndmClient.post<PageResult<NdmVideoServerResultVO>>(`${prefix}/api/ndm/ndmVideoServer/page`, pageQuery, { signal });
const [err, ndmVideoServerData] = resp;
if (err || !ndmVideoServerData) {
throw err;

5
src/components/device-alarm-detail-modal.vue
View File

@@ -1,11 +1,10 @@
`
<script setup lang="ts">
import type { Station } from '@/apis/domains';
import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
import { ndmDeviceAlarmLogDefaultExportByTemplate } from '@/apis/requests';
import type { StationAlarms } from '@/composables/query/alarm/use-line-alarms-query';
import { JAVA_INTEGER_MAX_VALUE } from '@/constants';
import { DeviceType, DeviceTypeName, type DeviceTypeCode } from '@/enums/device-type';
import { DeviceType, DeviceTypeName, type DeviceTypeVal } from '@/enums/device-type';
import { useQueryControlStore } from '@/stores/query-control';
import { downloadByData } from '@/utils/download';
import { useMutation } from '@tanstack/vue-query';
@@ -61,7 +60,7 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
title: '设备类型',
key: 'deviceType',
render: (rowData) => {
return DeviceTypeName[(rowData.deviceType ?? DeviceType.Camera) as DeviceTypeCode];
return DeviceTypeName[(rowData.deviceType ?? DeviceType.Camera) as DeviceTypeVal];
},
filterMultiple: true,
filterOptions: Object.values(DeviceType).map((deviceType) => ({ label: DeviceTypeName[deviceType], value: deviceType })),

4
src/components/station-card.vue
View File

@@ -4,13 +4,13 @@ import DeviceParamsConfigModal from './device-params-config-modal.vue';
import OfflineDeviceDetailModal from './offline-device-detail-modal.vue';
import type { Station } from '@/apis/domains';
import { DeviceType } from '@/enums/device-type';
import { useStationDevicesQuery } from '@/composables/query/device/use-station-devices-query';
import { useStationDevicesQuery } from '@/composables/query';
import { ControlOutlined } from '@vicons/antd';
import { Video as VideoIcon } from '@vicons/carbon';
import axios from 'axios';
import { NCard, NStatistic, NTag, NGrid, NGi, NButton, NIcon, useThemeVars, NSpace, NTooltip } from 'naive-ui';
import { toRefs, computed, ref } from 'vue';
import { useStationAlarmsQuery } from '@/composables/query/alarm/use-station-alarms-query';
import { useStationAlarmsQuery } from '@/composables/query';
interface Props {
station: Station;

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,
});
}

4
src/enums/device-type.ts
View File

@@ -10,9 +10,9 @@ export const DeviceType = {
} as const;
export type DeviceTypeKey = keyof typeof DeviceType;
export type DeviceTypeCode = (typeof DeviceType)[DeviceTypeKey];
export type DeviceTypeVal = (typeof DeviceType)[DeviceTypeKey];
export const DeviceTypeName = {
export const DeviceTypeName: Record<DeviceTypeVal, string> = {
[DeviceType.Camera]: '摄像机',
[DeviceType.Nvr]: '网络录像机',
[DeviceType.Switch]: '交换机',

4
src/pages/alarm-page.vue
View File

@@ -2,7 +2,7 @@
import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage } from '@/apis/requests';
import { JAVA_INTEGER_MAX_VALUE } from '@/constants';
import { DeviceType, DeviceTypeName, type DeviceTypeCode } from '@/enums/device-type';
import { DeviceType, DeviceTypeName, type DeviceTypeVal } from '@/enums/device-type';
import { useStationStore } from '@/stores/station';
import { downloadByData } from '@/utils/download';
import { useMutation } from '@tanstack/vue-query';
@@ -49,7 +49,7 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
title: '设备类型',
key: 'deviceType',
render: (rowData) => {
return DeviceTypeName[(rowData.deviceType ?? DeviceType.Camera) as DeviceTypeCode];
return DeviceTypeName[(rowData.deviceType ?? DeviceType.Camera) as DeviceTypeVal];
},
},
{ title: '设备名称', key: 'deviceName' },

12
src/pages/device-page.vue
View File

@@ -2,7 +2,7 @@
import type { Station } from '@/apis/domains';
import type { NdmDeviceResultVO, NdmNvrResultVO } from '@/apis/models';
import { useLineDevicesQuery } from '@/composables/query';
import { DeviceType, DeviceTypeName, type DeviceTypeCode, type DeviceTypeKey } from '@/enums/device-type';
import { DeviceType, DeviceTypeName, type DeviceTypeVal, type DeviceTypeKey } from '@/enums/device-type';
import { useStationStore } from '@/stores/station';
import { ChevronBack } from '@vicons/ionicons5';
import { destr } from 'destr';
@@ -57,7 +57,7 @@ const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
deviceTabPanes.forEach(({ name: paneName /* , tab: paneTab */ }) => {
treeData[paneName] = stationList.value.map<TreeOption>((station) => {
const { name: stationName, code: stationCode } = station;
const devices = lineDevices.value?.[stationCode][paneName];
const devices = lineDevices.value?.[stationCode][paneName] as NdmDeviceResultVO[] | undefined;
const onlineDevices = devices?.filter((device) => device.deviceStatus === '10');
const offlineDevices = devices?.filter((device) => device.deviceStatus === '20');
// 对于录像机，需要根据clusterList字段以分号分隔设备IP，进一步形成子树结构
@@ -159,7 +159,7 @@ const renderDeviceNodePrefix = (device: NdmDeviceResultVO, stationCode: string)
};
// ========== 选中设备 ==========
const selectedTab = ref<DeviceTypeCode>(DeviceType.Camera);
const selectedTab = ref<DeviceTypeVal>(DeviceType.Camera);
const selectedKeys = ref<string[]>();
const expandedKeys = ref<string[]>();
const selectedDevice = ref<NdmDeviceResultVO>();
@@ -167,10 +167,10 @@ const selectedDevice = ref<NdmDeviceResultVO>();
const setDeviceTreePropsFromRouteQuery = (query: LocationQuery) => {
const { stationCode, deviceType, deviceDBId } = query;
let stnCode = '';
let devType: DeviceTypeCode = DeviceType.Camera;
let devType: DeviceTypeVal = DeviceType.Camera;
let devDBId = '';
if (stationCode) stnCode = stationCode as string;
if (deviceType) devType = deviceType as DeviceTypeCode;
if (deviceType) devType = deviceType as DeviceTypeVal;
if (deviceDBId) devDBId = deviceDBId as string;
selectedTab.value = devType;
@@ -219,7 +219,7 @@ const searchFilter = (pattern: string, node: TreeOption): boolean => {
// ========== 设备树交互 ==========
const deviceTreeInst = useTemplateRef<TreeInst>('deviceTreeInst');
const onClickLocateDeviceTree = () => {
selectedTab.value = (selectedDevice.value?.deviceType ?? selectedTab.value) as DeviceTypeCode;
selectedTab.value = (selectedDevice.value?.deviceType ?? selectedTab.value) as DeviceTypeVal;
selectedKeys.value = selectedDevice.value?.id ? [selectedDevice.value.id] : undefined;
const stationCode = route.query['stationCode'] as string | undefined;

44
src/utils/request.ts
View File

@@ -15,25 +15,8 @@ export interface RequestOptions extends CreateAxiosDefaults {
export class Request {
private instance: AxiosInstance;
private abortController: AbortController;
private lastAbortController: AbortController | null;
private uniq: boolean;
constructor(config?: RequestOptions) {
this.instance = axios.create(config);
this.abortController = new AbortController();
this.lastAbortController = null;
this.uniq = false;
this.instance.interceptors.request.use((config) => {
// 取消上一次请求
if (this.uniq && this.lastAbortController?.signal) {
this.lastAbortController.abort();
}
this.lastAbortController = this.abortController;
this.abortController = new AbortController();
return config;
});
const requestInterceptor = config?.requestInterceptor ?? Request.defaultRequestInterceptor;
const responseInterceptor = config?.responseInterceptor ?? Request.defaultResponseInterceptor;
@@ -65,14 +48,12 @@ export class Request {
return this.instance;
}
get<T>(url: string, option?: AxiosRequestConfig & { uniq?: boolean }): Promise<Response<T>> {
const { uniq, ...reqConfig } = option ?? {};
this.uniq = !!uniq;
get<T>(url: string, option?: AxiosRequestConfig): Promise<Response<T>> {
const reqConfig = option ?? {};
return new Promise((resolve) => {
this.instance
.get<Result<T>>(url, {
...reqConfig,
signal: this.abortController.signal,
})
.then((res) => {
resolve([null, res.data.data, res.data]);
@@ -83,12 +64,11 @@ export class Request {
});
}
post<T>(url: string, data: AxiosRequestConfig['data'], option?: Partial<Omit<AxiosRequestConfig, 'data'>> & { retRaw?: boolean; uniq?: boolean; upload?: boolean }): Promise<Response<T>> {
const { retRaw, uniq, upload, ...reqConfig } = option ?? {};
this.uniq = !!uniq;
post<T>(url: string, data: AxiosRequestConfig['data'], option?: Partial<Omit<AxiosRequestConfig, 'data'>> & { retRaw?: boolean; upload?: boolean }): Promise<Response<T>> {
const { retRaw, upload, ...reqConfig } = option ?? {};
return new Promise((resolve) => {
this.instance
.post(url, data, { ...reqConfig, headers: { 'content-type': upload ? 'multipart/form-data' : 'application/json' }, signal: this.abortController.signal })
.post(url, data, { ...reqConfig, headers: { 'content-type': upload ? 'multipart/form-data' : 'application/json' } })
.then((res) => {
const resData = res.data;
if (retRaw) {
@@ -103,12 +83,11 @@ export class Request {
});
}
put<T>(url: string, data: AxiosRequestConfig['data'], option?: Partial<Omit<AxiosRequestConfig, 'data'>> & { uniq?: boolean }): Promise<Response<T>> {
const { uniq, ...reqConfig } = option ?? {};
this.uniq = !!uniq;
put<T>(url: string, data: AxiosRequestConfig['data'], option?: Partial<Omit<AxiosRequestConfig, 'data'>>): Promise<Response<T>> {
const reqConfig = option ?? {};
return new Promise((resolve) => {
this.instance
.put<Result<T>>(url, data, { ...reqConfig, signal: this.abortController.signal })
.put<Result<T>>(url, data, { ...reqConfig })
.then((res) => {
resolve([null, res.data.data, res.data]);
})
@@ -118,12 +97,11 @@ export class Request {
});
}
delete<T>(url: string, idList: string[], option?: Partial<Omit<AxiosRequestConfig, 'data'>> & { uniq?: boolean }): Promise<Response<T>> {
const { uniq, ...reqConfig } = option ?? {};
this.uniq = !!uniq;
delete<T>(url: string, idList: string[], option?: Partial<Omit<AxiosRequestConfig, 'data'>>): Promise<Response<T>> {
const reqConfig = option ?? {};
return new Promise((resolve) => {
this.instance
.delete<Result<T>>(url, { ...reqConfig, data: { ids: idList }, signal: this.abortController.signal })
.delete<Result<T>>(url, { ...reqConfig, data: { ids: idList } })
.then((res) => {
resolve([null, res.data.data, res.data]);
})