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

perf: set default date range to 1 week in HistoryDiagCard

Browse Source
This commit is contained in:
yangsy
2025-09-10 15:49:24 +08:00
parent 27e71fa797
commit 13c558bfc1
12 changed files with 72 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/device-page/device-card/history-diag-card/camera-history-diag-card.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { NdmCameraResultVO } from '@/apis/models';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -15,7 +15,7 @@ const props = defineProps<{
const { stationCode, ndmCamera } = toRefs(props);
const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number],
dateTimeRange: undefined as DatePickerProps['value'],
});
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -35,8 +35,8 @@ const loading = computed(() => {
onMounted(() => {
const now = dayjs();
const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
</script>

8
src/components/device-page/device-card/history-diag-card/decoder-history-diag-card.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { NdmDecoderResultVO } from '@/apis/models';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -16,7 +16,7 @@ const props = defineProps<{
const { stationCode, ndmDecoder } = toRefs(props);
const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number],
dateTimeRange: undefined as DatePickerProps['value'],
});
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -39,8 +39,8 @@ const loading = computed(() => {
onMounted(() => {
const now = dayjs();
const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
</script>

10
src/components/device-page/device-card/history-diag-card/device-alarm-history-diag-card.vue
View File

@@ -3,14 +3,14 @@ import type { NdmDeviceAlarmLogResultVO, NdmDeviceResultVO, PageParams } from '@
import { postNdmDeviceAlarmLogPage } from '@/apis/requests';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui';
import { h } from 'vue';
import { reactive, ref, toRefs } from 'vue';
const props = defineProps<{
stationCode: string;
ndmDevice: NdmDeviceResultVO;
dateTimeRange: [number, number];
dateTimeRange: DatePickerProps['value'];
}>();
const { stationCode, ndmDevice, dateTimeRange } = toRefs(props);
@@ -64,9 +64,11 @@ const pagination = reactive<PaginationProps>({
const { mutate: getDeviceAlarmLogList, isPending } = useMutation({
mutationFn: async () => {
if (!dateTimeRange.value) throw new Error('请选择时间范围');
const range = dateTimeRange.value as [number, number];
const deviceId = ndmDevice.value.deviceId;
const alarmDate_ge = dateTimeRange.value[0];
const alarmDate_le = dateTimeRange.value[1];
const alarmDate_ge = range[0];
const alarmDate_le = range[1];
const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
current: pagination.page ?? 1,
size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,

10
src/components/device-page/device-card/history-diag-card/device-status-history-diag-card.vue
View File

@@ -29,13 +29,13 @@ import type { NdmDeviceResultVO, NdmIcmpLogResultVO, NdmIcmpLogVO, PageParams, P
import { postIcmpLogPage } from '@/apis/requests';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import { NCard, NPagination, NScrollbar, NTimeline, NTimelineItem, type PaginationProps, type TimelineItemProps } from 'naive-ui';
import { NCard, NPagination, NScrollbar, NTimeline, NTimelineItem, type DatePickerProps, type PaginationProps, type TimelineItemProps } from 'naive-ui';
import { computed, h, reactive, ref, toRefs } from 'vue';
const props = defineProps<{
stationCode: string;
ndmDevice: NdmDeviceResultVO;
dateTimeRange: [number, number];
dateTimeRange: DatePickerProps['value'];
}>();
const { stationCode, ndmDevice, dateTimeRange } = toRefs(props);
@@ -67,9 +67,11 @@ const pagination = reactive<PaginationProps>({
const { mutate: getDeviceIcmpLogList, isPending } = useMutation({
mutationFn: async () => {
if (!dateTimeRange.value) throw new Error('请选择时间范围');
const range = dateTimeRange.value as [number, number];
const id = 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 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,

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

@@ -9,13 +9,13 @@ 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, 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';
const props = defineProps<{
stationCode: string;
ndmDevice: NdmDeviceResultVO;
dateTimeRange: [number, number];
dateTimeRange: DatePickerProps['value'];
cpuUsageField?: string;
memUsageField?: string;
diskUsageField?: string;
@@ -59,7 +59,7 @@ const pagination = reactive<PaginationProps>({
const page = computed(() => pagination.page ?? 1);
const pageSize = computed(() => pagination.pageSize ?? DEFAULT_PAGE_SIZE);
const { snmpLogRespData, isPending, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmDevice, dateTimeRange, page, pageSize);
const { snmpLogRespData, isPending, refetch } = useDeviceSnmpLogsQuery(stationCode, ndmDevice, dateTimeRange, page, pageSize);
watch(snmpLogRespData, (data) => {
if (data) {
@@ -86,7 +86,14 @@ const tableData = computed<DataTableRowData[]>(() => {
defineExpose({
isPending,
refresh,
refresh: () => {
if (pagination.page !== 1 || pagination.pageSize !== DEFAULT_PAGE_SIZE) {
pagination.page = 1;
pagination.pageSize = DEFAULT_PAGE_SIZE;
} else {
refetch();
}
},
});
</script>

8
src/components/device-page/device-card/history-diag-card/keyboard-history-diag-card.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { NdmKeyboardResultVO } from '@/apis/models';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -14,7 +14,7 @@ const props = defineProps<{
const { stationCode, ndmKeyboard } = toRefs(props);
const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number],
dateTimeRange: undefined as DatePickerProps['value'],
});
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -31,8 +31,8 @@ const loading = computed(() => {
onMounted(() => {
const now = dayjs();
const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
</script>

8
src/components/device-page/device-card/history-diag-card/nvr-diag-history-card.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { NdmNvrResultVO } from '@/apis/models';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -17,7 +17,7 @@ const props = defineProps<{
const { stationCode, ndmNvr } = toRefs(props);
const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number],
dateTimeRange: undefined as DatePickerProps['value'],
});
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -45,8 +45,8 @@ const loading = computed(() => {
onMounted(() => {
const now = dayjs();
const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
</script>

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

@@ -3,13 +3,13 @@ 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, 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';
const props = defineProps<{
stationCode: string;
ndmNvr: NdmNvrResultVO;
dateTimeRange: [number, number];
dateTimeRange: DatePickerProps['value'];
}>();
const { stationCode, ndmNvr, dateTimeRange } = toRefs(props);
@@ -41,7 +41,7 @@ const pagination = reactive<PaginationProps>({
const page = computed(() => pagination.page ?? 1);
const pageSize = computed(() => pagination.pageSize ?? DEFAULT_PAGE_SIZE);
const { snmpLogRespData, isPending, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmNvr, dateTimeRange, page, pageSize);
const { snmpLogRespData, isPending, refetch } = useDeviceSnmpLogsQuery(stationCode, ndmNvr, dateTimeRange, page, pageSize);
watch(snmpLogRespData, (data) => {
if (data) {
@@ -68,7 +68,14 @@ const tableData = computed<DataTableRowData[]>(() => {
defineExpose({
isPending,
refresh,
refresh: () => {
if (pagination.page !== 1 || pagination.pageSize !== DEFAULT_PAGE_SIZE) {
pagination.page = 1;
pagination.pageSize = DEFAULT_PAGE_SIZE;
} else {
refetch();
}
},
});
</script>

8
src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { NdmSecurityBoxResultVO } from '@/apis/models';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -16,7 +16,7 @@ const props = defineProps<{
const { stationCode, ndmSecurityBox } = toRefs(props);
const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number],
dateTimeRange: undefined as DatePickerProps['value'],
});
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -39,8 +39,8 @@ const loading = computed(() => {
onMounted(() => {
const now = dayjs();
const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
</script>

8
src/components/device-page/device-card/history-diag-card/server-history-diag-card.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { NdmServerResultVO } from '@/apis/models';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -16,7 +16,7 @@ const props = defineProps<{
const { stationCode, ndmServer } = toRefs(props);
const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number],
dateTimeRange: undefined as DatePickerProps['value'],
});
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -39,8 +39,8 @@ const loading = computed(() => {
onMounted(() => {
const now = dayjs();
const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
</script>

10
src/components/device-page/device-card/history-diag-card/switch-history-diag-card.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { NdmSwitchResultVO } from '@/apis/models';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -16,7 +16,7 @@ const props = defineProps<{
const { stationCode, ndmSwitch } = toRefs(props);
const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number],
dateTimeRange: undefined as DatePickerProps['value'],
});
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -29,7 +29,7 @@ const deviceUsageHistoryDiagCardRef = useTemplateRef<DeviceUsageHistoryDiagCardI
function refreshData() {
deviceStatusHistoryDiagCardRef.value?.refresh();
deviceAlarmHistoryDiagCardRef.value?.refresh();
deviceUsageHistoryDiagCardRef.value?.refresh();
// deviceUsageHistoryDiagCardRef.value?.refresh();
}
const loading = computed(() => {
@@ -39,8 +39,8 @@ const loading = computed(() => {
onMounted(() => {
const now = dayjs();
const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
</script>

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

@@ -3,9 +3,10 @@ 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<[number, number]>, page: Ref<number>, pageSize: Ref<number>) {
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]);
@@ -15,13 +16,16 @@ export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, ndmDevice: Ref<
isPending,
isFetching,
error,
refetch,
} = useQuery({
queryKey,
enabled: computed(() => dateTimeRange.value.every((dateTime) => dateTime > 0)),
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(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 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,
@@ -53,6 +57,7 @@ export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, ndmDevice: Ref<
isPending,
isFetching,
error,
refetch,
refresh,
};
}