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

revert: extract device snmp query composable function

Browse Source
This commit is contained in:
yangsy
2025-09-11 15:51:06 +08:00
parent 630ad21b4b
commit 05c87fc488
4 changed files with 100 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,11 +6,13 @@ function getValueByFieldPath(record: Record<string, any>, fieldPath?: string) {
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import type { NdmDeviceResultVO, NdmSnmpLogResultVO } from '@/apis/models'; import type { NdmDeviceResultVO, NdmSnmpLogResultVO, PageParams } from '@/apis/models';
import { useDeviceSnmpLogsQuery } from '@/composables/query'; import { postSnmpLogPage } from '@/apis/requests';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import { destr } from 'destr'; import { destr } from 'destr';
import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui'; 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<{ const props = defineProps<{
stationCode: string; stationCode: string;
@@ -37,6 +39,7 @@ const tableColumns = computed(() => {
return columns; return columns;
}); });
const tableData = ref<DataTableRowData[]>([]);
const DEFAULT_PAGE_SIZE = 10; const DEFAULT_PAGE_SIZE = 10;
const pagination = reactive<PaginationProps>({ const pagination = reactive<PaginationProps>({
size: 'small', size: 'small',
@@ -50,26 +53,39 @@ const pagination = reactive<PaginationProps>({
}, },
onUpdatePage: (page) => { onUpdatePage: (page) => {
pagination.page = page; pagination.page = page;
getDeviceSnmpLogList();
}, },
onUpdatePageSize: (pageSize) => { onUpdatePageSize: (pageSize) => {
pagination.pageSize = pageSize; pagination.pageSize = pageSize;
pagination.page = 1; 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); const { mutate: getDeviceSnmpLogList, isPending } = useMutation({
mutationFn: async () => {
watch(snmpLogRespData, (data) => { if (!dateTimeRange.value) throw new Error('请选择时间范围');
if (data) { const range = dateTimeRange.value as [number, number];
pagination.itemCount = parseInt(data.total); 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'> = {
const tableData = computed<DataTableRowData[]>(() => { current: pagination.page ?? 1,
const { records = [] } = snmpLogRespData.value ?? {}; size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
return records.map((record) => { 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 diagInfoJsonString = record.diagInfo;
const diagInfo = destr(diagInfoJsonString); const diagInfo = destr(diagInfoJsonString);
if (!diagInfo) return {}; if (!diagInfo) return {};
@@ -82,17 +98,19 @@ const tableData = computed<DataTableRowData[]>(() => {
diagInfo, diagInfo,
}; };
}); });
},
onError: (error) => {
console.error(`查询${ndmDevice.value.name}告警数据失败:`, error);
window.$message.error(error.message);
},
}); });
defineExpose({ defineExpose({
isPending, isPending,
refresh: () => { refresh: () => {
if (pagination.page !== 1 || pagination.pageSize !== DEFAULT_PAGE_SIZE) {
pagination.page = 1; pagination.page = 1;
pagination.pageSize = DEFAULT_PAGE_SIZE; pagination.pageSize = DEFAULT_PAGE_SIZE;
} else { getDeviceSnmpLogList();
refetch();
}
}, },
}); });
</script> </script>

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

@@ -1,10 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import type { NdmNvrDiagInfo } from '@/apis/domains'; import type { NdmNvrDiagInfo } from '@/apis/domains';
import type { NdmNvrResultVO, NdmSnmpLogResultVO } from '@/apis/models'; import type { NdmNvrResultVO, NdmSnmpLogResultVO, PageParams } from '@/apis/models';
import { useDeviceSnmpLogsQuery } from '@/composables/query'; import { postSnmpLogPage } from '@/apis/requests';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import { destr } from 'destr'; import { destr } from 'destr';
import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui'; 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<{ const props = defineProps<{
stationCode: string; stationCode: string;
@@ -19,6 +21,7 @@ const tableColumns: DataTableColumns<NdmSnmpLogResultVO> = [
{ title: '磁盘健康度', key: 'diskHealthRatio' }, { title: '磁盘健康度', key: 'diskHealthRatio' },
]; ];
const tableData = ref<DataTableRowData[]>([]);
const DEFAULT_PAGE_SIZE = 10; const DEFAULT_PAGE_SIZE = 10;
const pagination = reactive<PaginationProps>({ const pagination = reactive<PaginationProps>({
size: 'small', size: 'small',
@@ -38,20 +41,31 @@ const pagination = reactive<PaginationProps>({
pagination.page = 1; 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); const { mutate: getDeviceSnmpLogList, isPending } = useMutation({
mutationFn: async () => {
watch(snmpLogRespData, (data) => { if (!dateTimeRange.value) throw new Error('请选择时间范围');
if (data) { const range = dateTimeRange.value as [number, number];
pagination.itemCount = parseInt(data.total); 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'> = {
const tableData = computed<DataTableRowData[]>(() => { current: pagination.page ?? 1,
const { records = [] } = snmpLogRespData.value ?? {}; size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
return records.map((record) => { 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 diagInfoJsonString = record.diagInfo;
const diagInfo = destr<NdmNvrDiagInfo>(diagInfoJsonString); const diagInfo = destr<NdmNvrDiagInfo>(diagInfoJsonString);
if (!diagInfo) return {}; if (!diagInfo) return {};
@@ -61,20 +75,22 @@ const tableData = computed<DataTableRowData[]>(() => {
return { return {
createdTime: record.createdTime, createdTime: record.createdTime,
diskHealthRatio: `${healthDiskCount}/${totalDiskCount}`, diskHealthRatio: `${healthDiskCount}/${totalDiskCount}`,
diagInfo, diskHealth: diagInfo.info.diskHealth,
}; };
}); });
},
onError: (error) => {
console.error(`查询${ndmNvr.value.name}告警数据失败:`, error);
window.$message.error(error.message);
},
}); });
defineExpose({ defineExpose({
isPending, isPending,
refresh: () => { refresh: () => {
if (pagination.page !== 1 || pagination.pageSize !== DEFAULT_PAGE_SIZE) {
pagination.page = 1; pagination.page = 1;
pagination.pageSize = DEFAULT_PAGE_SIZE; pagination.pageSize = DEFAULT_PAGE_SIZE;
} else { getDeviceSnmpLogList();
refetch();
}
}, },
}); });
</script> </script>

1
src/composables/query/device/index.ts
View File

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

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

@@ -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,
};
}