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,14 +45,15 @@ const cameraType = computed(() => {
   return CAMERA_TYPES[cameraTypeCode];
 });
 
-const installationArea = computedAsync(async (onCancel) => {
+const QUERY_KEY = 'camera-installation-area-query';
+
+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 = '-';
 
-  if (offlineDev.value) return UNKNOWN_NAME;
-
-  const abortController = new AbortController();
-  onCancel(() => abortController.abort());
-
     const gbCode = ndmDevice.value.gbCode;
     if (!gbCode) return UNKNOWN_NAME;
 
@@ -65,7 +68,7 @@ const installationArea = computedAsync(async (onCancel) => {
     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 });
+    const { data: unitCodes } = await axios.get<Record<string, Unit>>(CODE_STATIONS_JSON_PATH, { signal });
 
     // 根据国标编码的前6位匹配minio中的编码表
     const unitCode = gbCode.slice(0, 6);
@@ -92,7 +95,7 @@ const installationArea = computedAsync(async (onCancel) => {
     if (!jsonPath) return UNKNOWN_NAME;
 
     // 获取1级区域
-  const { data: areaCodes } = await axios.get<Area[]>(jsonPath, { signal: abortController.signal });
+    const { data: areaCodes } = await axios.get<Area[]>(jsonPath, { signal });
     const tier1Area = areaCodes.find((area) => area.code === tier1AreaCode);
     if (!tier1Area) return UNKNOWN_NAME;
 
@@ -102,6 +105,12 @@ const installationArea = computedAsync(async (onCancel) => {
 
     // 拼接1级和2级区域名称
     return `${tier1Area.name}-${tier2Area.name}`;
+  },
+});
+watch(offlineDev, (offline) => {
+  if (offline) {
+    queryClient.cancelQueries({ queryKey: [QUERY_KEY] });
+  }
 });
 
 const commonInfo = computed(() => {