refactor: extract device snmp query composable function

src/components/device-page/device-card/history-diag-card/device-usage-history-diag-card.vue

@@ -6,13 +6,11 @@ function getValueByFieldPath(record: Record<string, any>, fieldPath?: string) {
 </script>
 
 <script setup lang="ts">
-import type { NdmDeviceResultVO, NdmSnmpLogResultVO, PageParams } from '@/apis/models';
+import type { NdmDeviceResultVO, NdmSnmpLogResultVO } from '@/apis/models';
-import { postSnmpLogPage } from '@/apis/requests';
+import { useDeviceSnmpLogsQuery } from '@/composables/query';
-import { useMutation } from '@tanstack/vue-query';
+import { destr } from 'destr';
-import dayjs from 'dayjs';
+import { NCard, NDataTable, type DataTableColumns, type DataTableRowData } from 'naive-ui';
-import destr from 'destr';
+import { computed, toRefs } from 'vue';
-import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
-import { computed, h, reactive, ref, toRefs } from 'vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -39,83 +37,33 @@ const tableColumns = computed(() => {
   return columns;
 });
 
-const tableData = ref<DataTableRowData[]>([]);
+const { snmpLogRespData, isPending, pagination, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmDevice, dateTimeRange);
-const DEFAULT_PAGE_SIZE = 10;
+const tableData = computed<DataTableRowData[]>(() => {
-const tablePagination = reactive<PaginationProps>({
+  const { records = [] } = snmpLogRespData.value ?? {};
-  size: 'small',
+  return records.map((record) => {
-  showSizePicker: true,
+    const diagInfoJsonString = record.diagInfo;
-  page: 1,
+    const diagInfo = destr(diagInfoJsonString);
-  pageSize: DEFAULT_PAGE_SIZE,
+    if (!diagInfo) return {};
-  pageSizes: [5, 10, 20, 50, 80, 100],
+    if (typeof diagInfo !== 'object') return {};
-  itemCount: 0,
+    return {
-  prefix: ({ itemCount }) => {
+      createdTime: record.createdTime,
-    return h('div', {}, { default: () => `共${itemCount}条` });
+      cpuUsage: getValueByFieldPath(diagInfo, cpuUsageField.value),
-  },
+      memUsage: getValueByFieldPath(diagInfo, memUsageField.value),
-  onUpdatePage: (page: number) => {
+      diskUsage: getValueByFieldPath(diagInfo, diskUsageField.value),
-    tablePagination.page = page;
+      diagInfo,
-    getDeviceSnmpLogList();
-  },
-  onUpdatePageSize: (pageSize: number) => {
-    tablePagination.pageSize = pageSize;
-    tablePagination.page = 1;
-    getDeviceSnmpLogList();
-  },
-});
-
-const { mutate: getDeviceSnmpLogList, isPending } = useMutation({
-  mutationFn: async () => {
-    const deviceId = ndmDevice.value.id;
-    const createdTime_precisest = dayjs(dateTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
-    const createdTime_preciseed = dayjs(dateTimeRange.value[1]).format('YYYY-MM-DD HH:mm:ss');
-    const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
-      current: tablePagination.page ?? 1,
-      size: tablePagination.pageSize ?? DEFAULT_PAGE_SIZE,
-      sort: 'id',
-      order: 'descending',
     };
-    const res = await postSnmpLogPage(stationCode.value, {
+  });
-      model: { deviceId },
-      extra: { createdTime_precisest, createdTime_preciseed },
-      ...restParams,
-    });
-    return res;
-  },
-  onSuccess: ({ records, size, total }) => {
-    tablePagination.pageSize = parseInt(size);
-    tablePagination.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: () => {
+  refresh,
-    tablePagination.page = 1;
-    tablePagination.pageSize = DEFAULT_PAGE_SIZE;
-    getDeviceSnmpLogList();
-  },
 });
 </script>
 
 <template>
   <NCard size="small" title="设备硬件占用率记录">
-    <NDataTable size="small" :loading="isPending" :columns="tableColumns" :data="tableData" :pagination="tablePagination" :single-line="false" remote flex-height style="height: 500px" />
+    <NDataTable size="small" :loading="isPending" :columns="tableColumns" :data="tableData" :pagination="pagination" :single-line="false" remote flex-height style="height: 500px" />
   </NCard>
 </template>
 

src/composables/query/device/index.ts

@@ -1,3 +1,4 @@
 export * from './domains';
 
+export * from './use-device-snmp-logs-query';
 export * from './use-line-devices-query';

src/composables/query/device/use-device-snmp-logs-query.ts

@@ -0,0 +1,88 @@
+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 { PaginationProps } from 'naive-ui';
+import { computed, h, watch } from 'vue';
+import { reactive, type Ref } from 'vue';
+
+export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, ndmDevice: Ref<NdmDeviceResultVO>, dateTimeRange: Ref<[number, number]>) {
+  const DEFAULT_PAGE_SIZE = 10;
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showSizePicker: true,
+    page: 1,
+    pageSize: DEFAULT_PAGE_SIZE,
+    pageSizes: [5, 10, 20, 50, 80, 100],
+    itemCount: 0,
+    prefix: ({ itemCount }) => {
+      return h('div', {}, { default: () => `共${itemCount}条` });
+    },
+    onUpdatePage: (page) => {
+      pagination.page = page;
+      refresh();
+    },
+    onUpdatePageSize: (pageSize) => {
+      pagination.pageSize = pageSize;
+      pagination.page = 1;
+      refresh();
+    },
+  });
+  const queryKey = reactive([DEVICE_SNMP_LOGS_QUERY_KEY, stationCode, ndmDevice, dateTimeRange, pagination.page, pagination.pageSize]);
+
+  const queryClient = useQueryClient();
+
+  const {
+    data: snmpLogRespData,
+    isPending,
+    isFetching,
+    error,
+  } = useQuery({
+    queryKey,
+    enabled: computed(() => dateTimeRange.value.every((dateTime) => dateTime > 0)),
+    queryFn: async () => {
+      const deviceId = ndmDevice.value.id;
+      const createdTime_precisest = dayjs(dateTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
+      const createdTime_preciseed = dayjs(dateTimeRange.value[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;
+    },
+  });
+
+  watch(snmpLogRespData, (data) => {
+    if (data) {
+      pagination.itemCount = parseInt(data.total);
+    }
+  });
+
+  watch(error, (err) => {
+    if (err) {
+      console.error(`查询${ndmDevice.value.name}的SNMP日志失败:`, err);
+      window.$message.error(err.message);
+    }
+  });
+
+  const refresh = () => {
+    queryClient.invalidateQueries({ queryKey });
+  };
+
+  return {
+    snmpLogRespData,
+    isPending,
+    isFetching,
+    error,
+    pagination,
+    refresh,
+  };
+}

src/constants/query.ts

@@ -1,4 +1,4 @@
 export const STATION_LIST_QUERY_KEY = 'station-list';
 export const LINE_DEVICES_QUERY_KEY = 'line-devices';
 export const LINE_ALARM_COUNTS_QUERY_KEY = 'line-alarm-counts';
-export const LINE_ALARMS_QUERY_KEY = 'line-alarms';
+export const DEVICE_SNMP_LOGS_QUERY_KEY = 'device-snmp-logs';