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

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

@@ -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 QUERY_KEY = 'camera-installation-area-query';
-  const UNKNOWN_NAME = '-';
 
-  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();
+    const gbCode = ndmDevice.value.gbCode;
-  onCancel(() => abortController.abort());
+    if (!gbCode) return UNKNOWN_NAME;
 
-  const gbCode = ndmDevice.value.gbCode;
+    const MINIO_PREFIX = `/minio`;
-  if (!gbCode) return UNKNOWN_NAME;
+    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`;
+    // minio中的编码表结构
-  const CDN_VIMP_CODES_PREFIX = `${MINIO_PREFIX}/cdn/vimp/codes`;
+    type Unit = { name: string; type: 'train' | 'station' | 'parking' | 'occ' };
-  const CODE_STATIONS_JSON_PATH = `${CDN_VIMP_CODES_PREFIX}/codeStations.json`;
+    type Area = { code: string; name: string; subs: Array<{ code: string; name: string }> };
-  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中的编码表结构
+    const { data: unitCodes } = await axios.get<Record<string, Unit>>(CODE_STATIONS_JSON_PATH, { signal });
-  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: 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中的编码表
+    if (unitType === 'train') {
-  const unitCode = gbCode.slice(0, 6);
+      return unit.name;
-  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') {
+    const areaJsonPaths: Record<string, string> = {
-    return unit.name;
+      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(() => {