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

refactor: 使用vue-query替换computedAsync解析摄像机建议安装区域

Browse Source
This commit is contained in:
yangsy
2025-12-25 01:12:59 +08:00
parent 9748b94046
commit df304b06d3
1 changed files with 61 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/components/device/device-card/ndm-camera/camera-current-diag.vue
View File

@@ -19,11 +19,11 @@ const isCameraTypeCode = (code: string): code is CameraType => {
import type { NdmCameraResultVO, Station } from '@/apis';
import { DeviceCommonCard, DeviceHeaderCard } from '@/components';
import { useSettingStore } from '@/stores';
import { computedAsync } from '@vueuse/core';
import { useQuery, useQueryClient } from '@tanstack/vue-query';
import axios from 'axios';
import { NDescriptions, NDescriptionsItem, NFlex } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, toRefs } from 'vue';
import { computed, toRefs, watch } from 'vue';
const props = defineProps<{
ndmDevice: NdmCameraResultVO;
@@ -33,6 +33,8 @@ const props = defineProps<{
const settingStore = useSettingStore();
const { offlineDev } = storeToRefs(settingStore);
const queryClient = useQueryClient();
const { ndmDevice, station } = toRefs(props);
const cameraType = computed(() => {
@@ -43,65 +45,72 @@ const cameraType = computed(() => {
return CAMERA_TYPES[cameraTypeCode];
});
const installationArea = computedAsync(async (onCancel) => {
const UNKNOWN_NAME = '-';
const QUERY_KEY = 'camera-installation-area-query';
if (offlineDev.value) return UNKNOWN_NAME;
const { data: installationArea } = useQuery({
queryKey: computed(() => [QUERY_KEY, ndmDevice.value.gbCode, station.value.code]),
enabled: computed(() => !offlineDev.value),
gcTime: 0,
queryFn: async ({ signal }) => {
const UNKNOWN_NAME = '-';
const abortController = new AbortController();
onCancel(() => abortController.abort());
const gbCode = ndmDevice.value.gbCode;
if (!gbCode) return UNKNOWN_NAME;
const gbCode = ndmDevice.value.gbCode;
if (!gbCode) return UNKNOWN_NAME;
const MINIO_PREFIX = `/minio`;
const CDN_VIMP_CODES_PREFIX = `${MINIO_PREFIX}/cdn/vimp/codes`;
const CODE_STATIONS_JSON_PATH = `${CDN_VIMP_CODES_PREFIX}/codeStations.json`;
const CODE_STATION_AREAS_JSON_PATH = `${CDN_VIMP_CODES_PREFIX}/codeStationAreas.json`;
const CODE_PARKING_AREAS_JSON_PATH = `${CDN_VIMP_CODES_PREFIX}/codeParkingAreas.json`;
const CODE_OCC_AREAS_JSON_PATH = `${CDN_VIMP_CODES_PREFIX}/codeOccAreas.json`;
const MINIO_PREFIX = `/minio`;
const CDN_VIMP_CODES_PREFIX = `${MINIO_PREFIX}/cdn/vimp/codes`;
const CODE_STATIONS_JSON_PATH = `${CDN_VIMP_CODES_PREFIX}/codeStations.json`;
const CODE_STATION_AREAS_JSON_PATH = `${CDN_VIMP_CODES_PREFIX}/codeStationAreas.json`;
const CODE_PARKING_AREAS_JSON_PATH = `${CDN_VIMP_CODES_PREFIX}/codeParkingAreas.json`;
const CODE_OCC_AREAS_JSON_PATH = `${CDN_VIMP_CODES_PREFIX}/codeOccAreas.json`;
// minio中的编码表结构
type Unit = { name: string; type: 'train' | 'station' | 'parking' | 'occ' };
type Area = { code: string; name: string; subs: Array<{ code: string; name: string }> };
// minio中的编码表结构
type Unit = { name: string; type: 'train' | 'station' | 'parking' | 'occ' };
type Area = { code: string; name: string; subs: Array<{ code: string; name: string }> };
const { data: unitCodes } = await axios.get<Record<string, Unit>>(CODE_STATIONS_JSON_PATH, { signal });
const { data: unitCodes } = await axios.get<Record<string, Unit>>(CODE_STATIONS_JSON_PATH, { signal: abortController.signal });
// 根据国标编码的前6位匹配minio中的编码表
const unitCode = gbCode.slice(0, 6);
const unit = unitCodes[unitCode];
if (!unit) return UNKNOWN_NAME;
// 获取编码表中的线路/单位类型
const unitType = unit.type;
// 国标编码的第7位到第8位为1级区域编码
const tier1AreaCode = gbCode.slice(6, 8);
// 国标编码的第9位到第11位为2级区域编码
const tier2AreaCode = gbCode.slice(8, 11);
// 根据国标编码的前6位匹配minio中的编码表
const unitCode = gbCode.slice(0, 6);
const unit = unitCodes[unitCode];
if (!unit) return UNKNOWN_NAME;
// 获取编码表中的线路/单位类型
const unitType = unit.type;
// 国标编码的第7位到第8位为1级区域编码
const tier1AreaCode = gbCode.slice(6, 8);
// 国标编码的第9位到第11位为2级区域编码
const tier2AreaCode = gbCode.slice(8, 11);
if (unitType === 'train') {
return unit.name;
}
if (unitType === 'train') {
return unit.name;
const areaJsonPaths: Record<string, string> = {
station: CODE_STATION_AREAS_JSON_PATH,
parking: CODE_PARKING_AREAS_JSON_PATH,
occ: CODE_OCC_AREAS_JSON_PATH,
};
const jsonPath = areaJsonPaths[unitType];
if (!jsonPath) return UNKNOWN_NAME;
// 获取1级区域
const { data: areaCodes } = await axios.get<Area[]>(jsonPath, { signal });
const tier1Area = areaCodes.find((area) => area.code === tier1AreaCode);
if (!tier1Area) return UNKNOWN_NAME;
// 获取2级区域
const tier2Area = tier1Area.subs.find((area) => area.code === `${tier1AreaCode}${tier2AreaCode}`);
if (!tier2Area) return UNKNOWN_NAME;
// 拼接1级和2级区域名称
return `${tier1Area.name}-${tier2Area.name}`;
},
});
watch(offlineDev, (offline) => {
if (offline) {
queryClient.cancelQueries({ queryKey: [QUERY_KEY] });
}
const areaJsonPaths: Record<string, string> = {
station: CODE_STATION_AREAS_JSON_PATH,
parking: CODE_PARKING_AREAS_JSON_PATH,
occ: CODE_OCC_AREAS_JSON_PATH,
};
const jsonPath = areaJsonPaths[unitType];
if (!jsonPath) return UNKNOWN_NAME;
// 获取1级区域
const { data: areaCodes } = await axios.get<Area[]>(jsonPath, { signal: abortController.signal });
const tier1Area = areaCodes.find((area) => area.code === tier1AreaCode);
if (!tier1Area) return UNKNOWN_NAME;
// 获取2级区域
const tier2Area = tier1Area.subs.find((area) => area.code === `${tier1AreaCode}${tier2AreaCode}`);
if (!tier2Area) return UNKNOWN_NAME;
// 拼接1级和2级区域名称
return `${tier1Area.name}-${tier2Area.name}`;
});
const commonInfo = computed(() => {