From 13c558bfc16d9d63268366fbc1a7466e4fb25401 Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Wed, 10 Sep 2025 15:49:24 +0800
Subject: [PATCH] perf: set default date range to 1 week in HistoryDiagCard

---
 .../camera-history-diag-card.vue                  |  8 ++++----
 .../decoder-history-diag-card.vue                 |  8 ++++----
 .../device-alarm-history-diag-card.vue            | 10 ++++++----
 .../device-status-history-diag-card.vue           | 10 ++++++----
 .../device-usage-history-diag-card.vue            | 15 +++++++++++----
 .../keyboard-history-diag-card.vue                |  8 ++++----
 .../history-diag-card/nvr-diag-history-card.vue   |  8 ++++----
 .../nvr-disk-health-history-diag-card.vue         | 15 +++++++++++----
 .../security-box-history-diag-card.vue            |  8 ++++----
 .../server-history-diag-card.vue                  |  8 ++++----
 .../switch-history-diag-card.vue                  | 10 +++++-----
 .../query/device/use-device-snmp-logs-query.ts    | 13 +++++++++----
 12 files changed, 72 insertions(+), 49 deletions(-)

diff --git a/src/components/device-page/device-card/history-diag-card/camera-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/camera-history-diag-card.vue
index 7952b18..7d0ffb5 100644
--- a/src/components/device-page/device-card/history-diag-card/camera-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/camera-history-diag-card.vue
@@ -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>
diff --git a/src/components/device-page/device-card/history-diag-card/decoder-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/decoder-history-diag-card.vue
index 6e32d5b..adc755e 100644
--- a/src/components/device-page/device-card/history-diag-card/decoder-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/decoder-history-diag-card.vue
@@ -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>
diff --git a/src/components/device-page/device-card/history-diag-card/device-alarm-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/device-alarm-history-diag-card.vue
index e62fdaf..8474fe5 100644
--- a/src/components/device-page/device-card/history-diag-card/device-alarm-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/device-alarm-history-diag-card.vue
@@ -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,
diff --git a/src/components/device-page/device-card/history-diag-card/device-status-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/device-status-history-diag-card.vue
index 1d1cdb4..6ab9d69 100644
--- a/src/components/device-page/device-card/history-diag-card/device-status-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/device-status-history-diag-card.vue
@@ -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,
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 7c0b71f..6b14fb7 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,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>
 
diff --git a/src/components/device-page/device-card/history-diag-card/keyboard-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/keyboard-history-diag-card.vue
index 58d9a96..f493686 100644
--- a/src/components/device-page/device-card/history-diag-card/keyboard-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/keyboard-history-diag-card.vue
@@ -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>
diff --git a/src/components/device-page/device-card/history-diag-card/nvr-diag-history-card.vue b/src/components/device-page/device-card/history-diag-card/nvr-diag-history-card.vue
index f940b0b..5a2db2c 100644
--- a/src/components/device-page/device-card/history-diag-card/nvr-diag-history-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/nvr-diag-history-card.vue
@@ -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>
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 06c3db7..b2badd0 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,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>
 
diff --git a/src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue
index 0bdba38..ec724c0 100644
--- a/src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue
@@ -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>
diff --git a/src/components/device-page/device-card/history-diag-card/server-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/server-history-diag-card.vue
index a591f3e..bab2a6e 100644
--- a/src/components/device-page/device-card/history-diag-card/server-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/server-history-diag-card.vue
@@ -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>
diff --git a/src/components/device-page/device-card/history-diag-card/switch-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/switch-history-diag-card.vue
index 522bc9b..39332c5 100644
--- a/src/components/device-page/device-card/history-diag-card/switch-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/switch-history-diag-card.vue
@@ -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>
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 29f9195..71ce085 100644
--- a/src/composables/query/device/use-device-snmp-logs-query.ts
+++ b/src/composables/query/device/use-device-snmp-logs-query.ts
@@ -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,
   };
 }