revert: extract device snmp query composable function

2025-09-11 15:51:06 +08:00
parent 630ad21b4b
commit 05c87fc488
4 changed files with 100 additions and 130 deletions
--- a/src/components/device-page/device-card/history-diag-card/device-usage-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/device-usage-history-diag-card.vue
@@ -6,11 +6,13 @@ function getValueByFieldPath(record: Record<string, any>, fieldPath?: string) {
 </script>

 <script setup lang="ts">
-import type { NdmDeviceResultVO, NdmSnmpLogResultVO } from '@/apis/models';
-import { useDeviceSnmpLogsQuery } from '@/composables/query';
+import type { NdmDeviceResultVO, NdmSnmpLogResultVO, PageParams } from '@/apis/models';
+import { postSnmpLogPage } from '@/apis/requests';
+import { useMutation } from '@tanstack/vue-query';
+import dayjs from 'dayjs';
 import { destr } from 'destr';
 import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui';
-import { computed, h, reactive, toRefs, watch } from 'vue';
+import { computed, h, reactive, ref, toRefs } from 'vue';

 const props = defineProps<{
  stationCode: string;
@@ -37,6 +39,7 @@ const tableColumns = computed(() => {
  return columns;
 });

+const tableData = ref<DataTableRowData[]>([]);
 const DEFAULT_PAGE_SIZE = 10;
 const pagination = reactive<PaginationProps>({
  size: 'small',
@@ -50,49 +53,64 @@ const pagination = reactive<PaginationProps>({
  },
  onUpdatePage: (page) => {
    pagination.page = page;
+    getDeviceSnmpLogList();
  },
  onUpdatePageSize: (pageSize) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
+    getDeviceSnmpLogList();
  },
 });
-const page = computed(() => pagination.page ?? 1);
-const pageSize = computed(() => pagination.pageSize ?? DEFAULT_PAGE_SIZE);

-const { snmpLogRespData, isPending, refetch } = useDeviceSnmpLogsQuery(stationCode, ndmDevice, dateTimeRange, page, pageSize);
-
-watch(snmpLogRespData, (data) => {
-  if (data) {
-    pagination.itemCount = parseInt(data.total);
-  }
-});
-
-const tableData = computed<DataTableRowData[]>(() => {
-  const { records = [] } = snmpLogRespData.value ?? {};
-  return records.map((record) => {
-    const diagInfoJsonString = record.diagInfo;
-    const diagInfo = destr(diagInfoJsonString);
-    if (!diagInfo) return {};
-    if (typeof diagInfo !== 'object') return {};
-    return {
-      createdTime: record.createdTime,
-      cpuUsage: getValueByFieldPath(diagInfo, cpuUsageField.value),
-      memUsage: getValueByFieldPath(diagInfo, memUsageField.value),
-      diskUsage: getValueByFieldPath(diagInfo, diskUsageField.value),
-      diagInfo,
+const { mutate: getDeviceSnmpLogList, isPending } = useMutation({
+  mutationFn: async () => {
+    if (!dateTimeRange.value) throw new Error('请选择时间范围');
+    const range = dateTimeRange.value as [number, number];
+    const deviceId = ndmDevice.value.id;
+    const createdTime_precisest = dayjs(range[0]).format('YYYY-MM-DD HH:mm:ss');
+    const createdTime_preciseed = dayjs(range[1]).format('YYYY-MM-DD HH:mm:ss');
+    const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
+      current: pagination.page ?? 1,
+      size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
+      sort: 'id',
+      order: 'descending',
    };
-  });
+    const respData = await postSnmpLogPage(stationCode.value, {
+      model: { deviceId },
+      extra: { createdTime_precisest, createdTime_preciseed },
+      ...restParams,
+    });
+    return respData;
+  },
+  onSuccess: ({ records, size, total }) => {
+    pagination.pageSize = parseInt(size);
+    pagination.itemCount = parseInt(total);
+    tableData.value = records.map((record) => {
+      const diagInfoJsonString = record.diagInfo;
+      const diagInfo = destr(diagInfoJsonString);
+      if (!diagInfo) return {};
+      if (typeof diagInfo !== 'object') return {};
+      return {
+        createdTime: record.createdTime,
+        cpuUsage: getValueByFieldPath(diagInfo, cpuUsageField.value),
+        memUsage: getValueByFieldPath(diagInfo, memUsageField.value),
+        diskUsage: getValueByFieldPath(diagInfo, diskUsageField.value),
+        diagInfo,
+      };
+    });
+  },
+  onError: (error) => {
+    console.error(`查询${ndmDevice.value.name}告警数据失败:`, error);
+    window.$message.error(error.message);
+  },
 });

 defineExpose({
  isPending,
  refresh: () => {
-    if (pagination.page !== 1 || pagination.pageSize !== DEFAULT_PAGE_SIZE) {
-      pagination.page = 1;
-      pagination.pageSize = DEFAULT_PAGE_SIZE;
-    } else {
-      refetch();
-    }
+    pagination.page = 1;
+    pagination.pageSize = DEFAULT_PAGE_SIZE;
+    getDeviceSnmpLogList();
  },
 });
 </script>
--- a/src/components/device-page/device-card/history-diag-card/nvr-disk-health-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/nvr-disk-health-history-diag-card.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import type { NdmNvrDiagInfo } from '@/apis/domains';
-import type { NdmNvrResultVO, NdmSnmpLogResultVO } from '@/apis/models';
-import { useDeviceSnmpLogsQuery } from '@/composables/query';
+import type { NdmNvrResultVO, NdmSnmpLogResultVO, PageParams } from '@/apis/models';
+import { postSnmpLogPage } from '@/apis/requests';
+import { useMutation } from '@tanstack/vue-query';
+import dayjs from 'dayjs';
 import { destr } from 'destr';
 import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui';
-import { computed, h, reactive, toRefs, watch } from 'vue';
+import { h, reactive, ref, toRefs } from 'vue';

 const props = defineProps<{
  stationCode: string;
@@ -19,6 +21,7 @@ const tableColumns: DataTableColumns<NdmSnmpLogResultVO> = [
  { title: '磁盘健康度', key: 'diskHealthRatio' },
 ];

+const tableData = ref<DataTableRowData[]>([]);
 const DEFAULT_PAGE_SIZE = 10;
 const pagination = reactive<PaginationProps>({
  size: 'small',
@@ -38,43 +41,56 @@ const pagination = reactive<PaginationProps>({
    pagination.page = 1;
  },
 });
-const page = computed(() => pagination.page ?? 1);
-const pageSize = computed(() => pagination.pageSize ?? DEFAULT_PAGE_SIZE);

-const { snmpLogRespData, isPending, refetch } = useDeviceSnmpLogsQuery(stationCode, ndmNvr, dateTimeRange, page, pageSize);
-
-watch(snmpLogRespData, (data) => {
-  if (data) {
-    pagination.itemCount = parseInt(data.total);
-  }
-});
-
-const tableData = computed<DataTableRowData[]>(() => {
-  const { records = [] } = snmpLogRespData.value ?? {};
-  return records.map((record) => {
-    const diagInfoJsonString = record.diagInfo;
-    const diagInfo = destr<NdmNvrDiagInfo>(diagInfoJsonString);
-    if (!diagInfo) return {};
-    if (typeof diagInfo !== 'object') return {};
-    const healthDiskCount = diagInfo.info.diskHealth.filter((health) => health === 0).length;
-    const totalDiskCount = diagInfo.info.diskHealth.length;
-    return {
-      createdTime: record.createdTime,
-      diskHealthRatio: `${healthDiskCount}/${totalDiskCount}`,
-      diagInfo,
+const { mutate: getDeviceSnmpLogList, isPending } = useMutation({
+  mutationFn: async () => {
+    if (!dateTimeRange.value) throw new Error('请选择时间范围');
+    const range = dateTimeRange.value as [number, number];
+    const deviceId = ndmNvr.value.id;
+    const createdTime_precisest = dayjs(range[0]).format('YYYY-MM-DD HH:mm:ss');
+    const createdTime_preciseed = dayjs(range[1]).format('YYYY-MM-DD HH:mm:ss');
+    const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
+      current: pagination.page ?? 1,
+      size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
+      sort: 'id',
+      order: 'descending',
    };
-  });
+    const respData = await postSnmpLogPage(stationCode.value, {
+      model: { deviceId },
+      extra: { createdTime_precisest, createdTime_preciseed },
+      ...restParams,
+    });
+    return respData;
+  },
+  onSuccess: ({ records, size, total }) => {
+    pagination.pageSize = parseInt(size);
+    pagination.itemCount = parseInt(total);
+    tableData.value = records.map((record) => {
+      const diagInfoJsonString = record.diagInfo;
+      const diagInfo = destr<NdmNvrDiagInfo>(diagInfoJsonString);
+      if (!diagInfo) return {};
+      if (typeof diagInfo !== 'object') return {};
+      const healthDiskCount = diagInfo.info.diskHealth.filter((health) => health === 0).length;
+      const totalDiskCount = diagInfo.info.diskHealth.length;
+      return {
+        createdTime: record.createdTime,
+        diskHealthRatio: `${healthDiskCount}/${totalDiskCount}`,
+        diskHealth: diagInfo.info.diskHealth,
+      };
+    });
+  },
+  onError: (error) => {
+    console.error(`查询${ndmNvr.value.name}告警数据失败:`, error);
+    window.$message.error(error.message);
+  },
 });

 defineExpose({
  isPending,
  refresh: () => {
-    if (pagination.page !== 1 || pagination.pageSize !== DEFAULT_PAGE_SIZE) {
-      pagination.page = 1;
-      pagination.pageSize = DEFAULT_PAGE_SIZE;
-    } else {
-      refetch();
-    }
+    pagination.page = 1;
+    pagination.pageSize = DEFAULT_PAGE_SIZE;
+    getDeviceSnmpLogList();
  },
 });
 </script>
--- a/src/composables/query/device/index.ts
+++ b/src/composables/query/device/index.ts
@@ -1,4 +1,3 @@
 export * from './domains';

-export * from './use-device-snmp-logs-query';
 export * from './use-line-devices-query';
--- a/src/composables/query/device/use-device-snmp-logs-query.ts
+++ b/src/composables/query/device/use-device-snmp-logs-query.ts
@@ -1,63 +0,0 @@
-import type { NdmDeviceResultVO, PageParams } from '@/apis/models';
-import { postSnmpLogPage } from '@/apis/requests';
-import { DEVICE_SNMP_LOGS_QUERY_KEY } from '@/constants';
-import { useQuery, useQueryClient } from '@tanstack/vue-query';
-import dayjs from 'dayjs';
-import type { DatePickerProps } from 'naive-ui';
-import { computed, watch, type Ref } from 'vue';
-
-export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, ndmDevice: Ref<NdmDeviceResultVO>, dateTimeRange: Ref<DatePickerProps['value']>, page: Ref<number>, pageSize: Ref<number>) {
-  const queryClient = useQueryClient();
-
-  const queryKey = computed(() => [DEVICE_SNMP_LOGS_QUERY_KEY, stationCode, ndmDevice, dateTimeRange, page.value, pageSize.value]);
-
-  const {
-    data: snmpLogRespData,
-    isPending,
-    isFetching,
-    error,
-    refetch,
-  } = useQuery({
-    queryKey,
-    enabled: computed(() => !!dateTimeRange.value),
-    queryFn: async () => {
-      if (!dateTimeRange.value) throw new Error('请选择时间范围');
-      const range = dateTimeRange.value as [number, number];
-      const deviceId = ndmDevice.value.id;
-      const createdTime_precisest = dayjs(range[0]).format('YYYY-MM-DD HH:mm:ss');
-      const createdTime_preciseed = dayjs(range[1]).format('YYYY-MM-DD HH:mm:ss');
-      const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
-        current: page.value,
-        size: pageSize.value,
-        sort: 'id',
-        order: 'descending',
-      };
-      const respData = await postSnmpLogPage(stationCode.value, {
-        model: { deviceId },
-        extra: { createdTime_precisest, createdTime_preciseed },
-        ...restParams,
-      });
-      return respData;
-    },
-  });
-
-  watch(error, (err) => {
-    if (err) {
-      console.error(`查询${ndmDevice.value.name}的SNMP日志失败:`, err);
-      window.$message.error(err.message);
-    }
-  });
-
-  const refresh = () => {
-    queryClient.invalidateQueries({ queryKey: queryKey.value });
-  };
-
-  return {
-    snmpLogRespData,
-    isPending,
-    isFetching,
-    error,
-    refetch,
-    refresh,
-  };
-}