skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: pagination failed in useDeviceSnmpLogsQuery

Browse Source
This commit is contained in:
yangsy
2025-09-09 15:14:13 +08:00
parent 9f53366252
commit fa615fdb7b
3 changed files with 70 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,8 +9,8 @@ function getValueByFieldPath(record: Record<string, any>, 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<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;
},
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<DataTableRowData[]>(() => {
const { records = [] } = snmpLogRespData.value ?? {};
return records.map((record) => {

34
src/components/device-page/device-card/history-diag-card/nvr-disk-health-history-diag-card.vue
View File

@@ -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<NdmSnmpLogResultVO> = [
{ title: '磁盘健康度', key: 'diskHealthRatio' },
];
const { snmpLogRespData, isPending, pagination, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmNvr, dateTimeRange);
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;
},
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<DataTableRowData[]>(() => {
const { records = [] } = snmpLogRespData.value ?? {};

46
src/composables/query/device/use-device-snmp-logs-query.ts
View File

@@ -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<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;
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<string>, ndmDevice: Ref<NdmDeviceResultVO>, dateTimeRange: Ref<[number, number]>, 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,
@@ -46,8 +23,8 @@ export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, 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<PageParams<{ id: string }>, '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<string>, 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<string>, 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<string>, ndmDevice: Ref<
isPending,
isFetching,
error,
pagination,
refresh,
};
}