refactor: 用 useQuery 重构录像诊断卡片

src/components/device/device-card/components/current-diag/nvr-record-card.vue

@@ -1,29 +1,58 @@
 <script setup lang="ts">
-import { getChannelListApi, getRecordCheckApi, reloadAllRecordCheckApi, reloadRecordCheckApi, type NdmNvrResultVO, type NdmRecordCheck, type RecordItem, type Station } from '@/apis';
+import { getChannelListApi, getRecordCheckApi, reloadAllRecordCheckApi, reloadRecordCheckApi, type NdmNvrResultVO, type RecordItem, type Station } from '@/apis';
 import { exportRecordDiagCsv, transformRecordChecks } from '@/helpers';
+import { useSettingStore } from '@/stores';
 import { parseErrorFeedback } from '@/utils';
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
 import { isCancel } from 'axios';
 import dayjs from 'dayjs';
 import { DownloadIcon, RotateCwIcon } from 'lucide-vue-next';
 import { NButton, NCard, NFlex, NIcon, NPagination, NPopconfirm, NPopover, NRadioButton, NRadioGroup, NTooltip, useThemeVars } from 'naive-ui';
-import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { computed, onBeforeUnmount, ref, toRefs, watch } from 'vue';
 
 const props = defineProps<{
   ndmDevice: NdmNvrResultVO;
   station: Station;
 }>();
 
+const settingStore = useSettingStore();
+const { activeRequests } = storeToRefs(settingStore);
+
 const themeVars = useThemeVars();
 
+const queryClient = useQueryClient();
+
 const { ndmDevice, station } = toRefs(props);
 
-const recordChecks = ref<NdmRecordCheck[]>([]);
-
 const lossInput = ref<number>(0);
 
+const abortController = ref<AbortController>(new AbortController());
+
+const NVR_RECORD_CHECK_KEY = 'nvr_record_check_query';
+
+const {
+  data: recordChecks,
+  isFetching: loading,
+  refetch: refetchRecordChecks,
+} = useQuery({
+  queryKey: computed(() => [NVR_RECORD_CHECK_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
+  enabled: computed(() => activeRequests.value),
+  refetchInterval: 30 * 1000,
+  gcTime: 0,
+  queryFn: async ({ signal }) => {
+    const checks = await getRecordCheckApi(ndmDevice.value, 90, [], { stationCode: station.value.code, signal });
+    return checks;
+  },
+});
+watch(activeRequests, (active) => {
+  if (!active) {
+    queryClient.cancelQueries({ queryKey: [NVR_RECORD_CHECK_KEY] });
+  }
+});
+
 const recordDiags = computed(() => {
-  return transformRecordChecks(recordChecks.value).filter((recordDiag) => {
+  return transformRecordChecks(recordChecks.value ?? []).filter((recordDiag) => {
     if (lossInput.value === 0) {
       return true;
     } else if (lossInput.value === 1) {
@@ -35,26 +64,6 @@ const recordDiags = computed(() => {
   });
 });
 
-const abortController = ref<AbortController>(new AbortController());
-
-const { mutate: getRecordCheckByParentId, isPending: loading } = useMutation({
-  mutationFn: async () => {
-    abortController.value.abort();
-    abortController.value = new AbortController();
-    const checks = await getRecordCheckApi(ndmDevice.value, 90, [], { stationCode: station.value.code, signal: abortController.value.signal });
-    return checks;
-  },
-  onSuccess: (checks) => {
-    recordChecks.value = checks;
-  },
-  onError: (error) => {
-    if (isCancel(error)) return;
-    console.error(error);
-    const errorFeedback = parseErrorFeedback(error);
-    window.$message.error(errorFeedback);
-  },
-});
-
 const { mutate: reloadAllRecordCheck, isPending: reloading } = useMutation({
   mutationFn: async () => {
     abortController.value.abort();
@@ -114,7 +123,7 @@ const { mutate: reloadRecordCheckByGbId } = useMutation({
     }
   },
   onSuccess: () => {
-    getRecordCheckByParentId();
+    refetchRecordChecks();
   },
   onError: (error) => {
     if (isCancel(error)) return;
@@ -124,20 +133,6 @@ const { mutate: reloadRecordCheckByGbId } = useMutation({
   },
 });
 
-onMounted(() => {
-  getRecordCheckByParentId();
-});
-
-watch(
-  () => ndmDevice.value.id,
-  (devieDbId) => {
-    if (devieDbId) {
-      recordChecks.value = [];
-      getRecordCheckByParentId();
-    }
-  },
-);
-
 onBeforeUnmount(() => {
   abortController.value.abort();
 });
@@ -162,7 +157,7 @@ onBeforeUnmount(() => {
       <NFlex>
         <NTooltip trigger="hover">
           <template #trigger>
-            <NButton size="small" quaternary circle :loading="loading" @click="() => getRecordCheckByParentId()">
+            <NButton size="small" quaternary circle :loading="loading" @click="() => refetchRecordChecks()">
               <template #icon>
                 <NIcon :component="RotateCwIcon" />
               </template>