From fa615fdb7bc94948c68f0a39ed2248f3fea54219 Mon Sep 17 00:00:00 2001 From: yangsy Date: Tue, 9 Sep 2025 15:14:13 +0800 Subject: [PATCH] fix: pagination failed in useDeviceSnmpLogsQuery --- .../device-usage-history-diag-card.vue | 35 ++++++++++++-- .../nvr-disk-health-history-diag-card.vue | 34 ++++++++++++-- .../device/use-device-snmp-logs-query.ts | 46 +++---------------- 3 files changed, 70 insertions(+), 45 deletions(-) diff --git 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 index dc27267..7c0b71f 100644 --- 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 @@ -9,8 +9,8 @@ function getValueByFieldPath(record: Record, fieldPath?: string) { import type { NdmDeviceResultVO, NdmSnmpLogResultVO } from '@/apis/models'; import { useDeviceSnmpLogsQuery } from '@/composables/query'; import { destr } from 'destr'; -import { NCard, NDataTable, type DataTableColumns, type DataTableRowData } from 'naive-ui'; -import { computed, toRefs } from 'vue'; +import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui'; +import { computed, h, reactive, toRefs, watch } from 'vue'; const props = defineProps<{ stationCode: string; @@ -37,7 +37,36 @@ const tableColumns = computed(() => { return columns; }); -const { snmpLogRespData, isPending, pagination, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmDevice, dateTimeRange); +const DEFAULT_PAGE_SIZE = 10; +const pagination = reactive({ + 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; + }, + onUpdatePageSize: (pageSize) => { + pagination.pageSize = pageSize; + pagination.page = 1; + }, +}); +const page = computed(() => pagination.page ?? 1); +const pageSize = computed(() => pagination.pageSize ?? DEFAULT_PAGE_SIZE); + +const { snmpLogRespData, isPending, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmDevice, dateTimeRange, page, pageSize); + +watch(snmpLogRespData, (data) => { + if (data) { + pagination.itemCount = parseInt(data.total); + } +}); + const tableData = computed(() => { const { records = [] } = snmpLogRespData.value ?? {}; return records.map((record) => { diff --git 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 index 0ec8c44..06c3db7 100644 --- 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 @@ -3,8 +3,8 @@ import type { NdmNvrDiagInfo } from '@/apis/domains'; import type { NdmNvrResultVO, NdmSnmpLogResultVO } from '@/apis/models'; import { useDeviceSnmpLogsQuery } from '@/composables/query'; import { destr } from 'destr'; -import { NCard, NDataTable, type DataTableColumns, type DataTableRowData } from 'naive-ui'; -import { computed, toRefs } from 'vue'; +import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui'; +import { computed, h, reactive, toRefs, watch } from 'vue'; const props = defineProps<{ stationCode: string; @@ -19,7 +19,35 @@ const tableColumns: DataTableColumns = [ { title: '磁盘健康度', key: 'diskHealthRatio' }, ]; -const { snmpLogRespData, isPending, pagination, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmNvr, dateTimeRange); +const DEFAULT_PAGE_SIZE = 10; +const pagination = reactive({ + 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; + }, + onUpdatePageSize: (pageSize) => { + pagination.pageSize = pageSize; + pagination.page = 1; + }, +}); +const page = computed(() => pagination.page ?? 1); +const pageSize = computed(() => pagination.pageSize ?? DEFAULT_PAGE_SIZE); + +const { snmpLogRespData, isPending, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmNvr, dateTimeRange, page, pageSize); + +watch(snmpLogRespData, (data) => { + if (data) { + pagination.itemCount = parseInt(data.total); + } +}); const tableData = computed(() => { const { records = [] } = snmpLogRespData.value ?? {}; diff --git a/src/composables/query/device/use-device-snmp-logs-query.ts b/src/composables/query/device/use-device-snmp-logs-query.ts index 8a12ace..29f9195 100644 --- a/src/composables/query/device/use-device-snmp-logs-query.ts +++ b/src/composables/query/device/use-device-snmp-logs-query.ts @@ -3,36 +3,13 @@ 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, ndmDevice: Ref, dateTimeRange: Ref<[number, number]>) { - const DEFAULT_PAGE_SIZE = 10; - const pagination = reactive({ - 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; - queryClient.invalidateQueries({ queryKey }); - }, - onUpdatePageSize: (pageSize) => { - pagination.pageSize = pageSize; - pagination.page = 1; - queryClient.invalidateQueries({ queryKey }); - }, - }); - const queryKey = reactive([DEVICE_SNMP_LOGS_QUERY_KEY, stationCode, ndmDevice, dateTimeRange, pagination.page, pagination.pageSize]); +import { computed, watch, type Ref } from 'vue'; +export function useDeviceSnmpLogsQuery(stationCode: Ref, ndmDevice: Ref, dateTimeRange: Ref<[number, number]>, page: Ref, pageSize: Ref) { const queryClient = useQueryClient(); + const queryKey = computed(() => [DEVICE_SNMP_LOGS_QUERY_KEY, stationCode, ndmDevice, dateTimeRange, page.value, pageSize.value]); + const { data: snmpLogRespData, isPending, @@ -46,8 +23,8 @@ export function useDeviceSnmpLogsQuery(stationCode: Ref, ndmDevice: Ref< 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, 'model' | 'extra'> = { - current: pagination.page ?? 1, - size: pagination.pageSize ?? DEFAULT_PAGE_SIZE, + current: page.value, + size: pageSize.value, sort: 'id', order: 'descending', }; @@ -60,12 +37,6 @@ export function useDeviceSnmpLogsQuery(stationCode: Ref, ndmDevice: Ref< }, }); - watch(snmpLogRespData, (data) => { - if (data) { - pagination.itemCount = parseInt(data.total); - } - }); - watch(error, (err) => { if (err) { console.error(`查询${ndmDevice.value.name}的SNMP日志失败:`, err); @@ -74,9 +45,7 @@ export function useDeviceSnmpLogsQuery(stationCode: Ref, ndmDevice: Ref< }); const refresh = () => { - pagination.page = 1; - pagination.pageSize = 10; - queryClient.invalidateQueries({ queryKey }); + queryClient.invalidateQueries({ queryKey: queryKey.value }); }; return { @@ -84,7 +53,6 @@ export function useDeviceSnmpLogsQuery(stationCode: Ref, ndmDevice: Ref< isPending, isFetching, error, - pagination, refresh, }; }