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"> <script setup lang="ts">
import type { NdmCameraResultVO } from '@/apis/models'; import type { NdmCameraResultVO } from '@/apis/models';
import dayjs from 'dayjs'; 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 { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue'; import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -15,7 +15,7 @@ const props = defineProps<{
const { stationCode, ndmCamera } = toRefs(props); const { stationCode, ndmCamera } = toRefs(props);
const searchFields = reactive({ const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number], dateTimeRange: undefined as DatePickerProps['value'],
}); });
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null; type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -35,8 +35,8 @@ const loading = computed(() => {
onMounted(() => { onMounted(() => {
const now = dayjs(); const now = dayjs();
const todayEnd = now.endOf('date'); const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date'); const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()]; searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData(); refreshData();
}); });
</script> </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"> <script setup lang="ts">
import type { NdmDecoderResultVO } from '@/apis/models'; import type { NdmDecoderResultVO } from '@/apis/models';
import dayjs from 'dayjs'; 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 { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue'; import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -16,7 +16,7 @@ const props = defineProps<{
const { stationCode, ndmDecoder } = toRefs(props); const { stationCode, ndmDecoder } = toRefs(props);
const searchFields = reactive({ const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number], dateTimeRange: undefined as DatePickerProps['value'],
}); });
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null; type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -39,8 +39,8 @@ const loading = computed(() => {
onMounted(() => { onMounted(() => {
const now = dayjs(); const now = dayjs();
const todayEnd = now.endOf('date'); const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date'); const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()]; searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData(); refreshData();
}); });
</script> </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 { postNdmDeviceAlarmLogPage } from '@/apis/requests';
import { useMutation } from '@tanstack/vue-query'; import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs'; 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 { h } from 'vue';
import { reactive, ref, toRefs } from 'vue'; import { reactive, ref, toRefs } from 'vue';
const props = defineProps<{ const props = defineProps<{
stationCode: string; stationCode: string;
ndmDevice: NdmDeviceResultVO; ndmDevice: NdmDeviceResultVO;
dateTimeRange: [number, number]; dateTimeRange: DatePickerProps['value'];
}>(); }>();
const { stationCode, ndmDevice, dateTimeRange } = toRefs(props); const { stationCode, ndmDevice, dateTimeRange } = toRefs(props);
@@ -64,9 +64,11 @@ const pagination = reactive<PaginationProps>({
const { mutate: getDeviceAlarmLogList, isPending } = useMutation({ const { mutate: getDeviceAlarmLogList, isPending } = useMutation({
mutationFn: async () => { mutationFn: async () => {
if (!dateTimeRange.value) throw new Error('请选择时间范围');
const range = dateTimeRange.value as [number, number];
const deviceId = ndmDevice.value.deviceId; const deviceId = ndmDevice.value.deviceId;
const alarmDate_ge = dateTimeRange.value[0]; const alarmDate_ge = range[0];
const alarmDate_le = dateTimeRange.value[1]; const alarmDate_le = range[1];
const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = { const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
current: pagination.page ?? 1, current: pagination.page ?? 1,
size: pagination.pageSize ?? DEFAULT_PAGE_SIZE, 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 { postIcmpLogPage } from '@/apis/requests';
import { useMutation } from '@tanstack/vue-query'; import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs'; 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'; import { computed, h, reactive, ref, toRefs } from 'vue';
const props = defineProps<{ const props = defineProps<{
stationCode: string; stationCode: string;
ndmDevice: NdmDeviceResultVO; ndmDevice: NdmDeviceResultVO;
dateTimeRange: [number, number]; dateTimeRange: DatePickerProps['value'];
}>(); }>();
const { stationCode, ndmDevice, dateTimeRange } = toRefs(props); const { stationCode, ndmDevice, dateTimeRange } = toRefs(props);
@@ -67,9 +67,11 @@ const pagination = reactive<PaginationProps>({
const { mutate: getDeviceIcmpLogList, isPending } = useMutation({ const { mutate: getDeviceIcmpLogList, isPending } = useMutation({
mutationFn: async () => { mutationFn: async () => {
if (!dateTimeRange.value) throw new Error('请选择时间范围');
const range = dateTimeRange.value as [number, number];
const id = ndmDevice.value.id; const id = ndmDevice.value.id;
const createdTime_precisest = dayjs(dateTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss'); const createdTime_precisest = dayjs(range[0]).format('YYYY-MM-DD HH:mm:ss');
const createdTime_preciseed = dayjs(dateTimeRange.value[1]).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 restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
current: pagination.page ?? 1, current: pagination.page ?? 1,
size: pagination.pageSize ?? DEFAULT_PAGE_SIZE, 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 type { NdmDeviceResultVO, NdmSnmpLogResultVO } from '@/apis/models';
import { useDeviceSnmpLogsQuery } from '@/composables/query'; import { useDeviceSnmpLogsQuery } from '@/composables/query';
import { destr } from 'destr'; 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'; import { computed, h, reactive, toRefs, watch } from 'vue';
const props = defineProps<{ const props = defineProps<{
stationCode: string; stationCode: string;
ndmDevice: NdmDeviceResultVO; ndmDevice: NdmDeviceResultVO;
dateTimeRange: [number, number]; dateTimeRange: DatePickerProps['value'];
cpuUsageField?: string; cpuUsageField?: string;
memUsageField?: string; memUsageField?: string;
diskUsageField?: string; diskUsageField?: string;
@@ -59,7 +59,7 @@ const pagination = reactive<PaginationProps>({
const page = computed(() => pagination.page ?? 1); const page = computed(() => pagination.page ?? 1);
const pageSize = computed(() => pagination.pageSize ?? DEFAULT_PAGE_SIZE); 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) => { watch(snmpLogRespData, (data) => {
if (data) { if (data) {
@@ -86,7 +86,14 @@ const tableData = computed<DataTableRowData[]>(() => {
defineExpose({ defineExpose({
isPending, isPending,
refresh, refresh: () => {
if (pagination.page !== 1 || pagination.pageSize !== DEFAULT_PAGE_SIZE) {
pagination.page = 1;
pagination.pageSize = DEFAULT_PAGE_SIZE;
} else {
refetch();
}
},
}); });
</script> </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"> <script setup lang="ts">
import type { NdmKeyboardResultVO } from '@/apis/models'; import type { NdmKeyboardResultVO } from '@/apis/models';
import dayjs from 'dayjs'; 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 { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue'; import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -14,7 +14,7 @@ const props = defineProps<{
const { stationCode, ndmKeyboard } = toRefs(props); const { stationCode, ndmKeyboard } = toRefs(props);
const searchFields = reactive({ const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number], dateTimeRange: undefined as DatePickerProps['value'],
}); });
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null; type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -31,8 +31,8 @@ const loading = computed(() => {
onMounted(() => { onMounted(() => {
const now = dayjs(); const now = dayjs();
const todayEnd = now.endOf('date'); const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date'); const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()]; searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData(); refreshData();
}); });
</script> </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"> <script setup lang="ts">
import type { NdmNvrResultVO } from '@/apis/models'; import type { NdmNvrResultVO } from '@/apis/models';
import dayjs from 'dayjs'; 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 { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue'; import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -17,7 +17,7 @@ const props = defineProps<{
const { stationCode, ndmNvr } = toRefs(props); const { stationCode, ndmNvr } = toRefs(props);
const searchFields = reactive({ const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number], dateTimeRange: undefined as DatePickerProps['value'],
}); });
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null; type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -45,8 +45,8 @@ const loading = computed(() => {
onMounted(() => { onMounted(() => {
const now = dayjs(); const now = dayjs();
const todayEnd = now.endOf('date'); const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date'); const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()]; searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData(); refreshData();
}); });
</script> </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 type { NdmNvrResultVO, NdmSnmpLogResultVO } from '@/apis/models';
import { useDeviceSnmpLogsQuery } from '@/composables/query'; import { useDeviceSnmpLogsQuery } from '@/composables/query';
import { destr } from 'destr'; 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'; import { computed, h, reactive, toRefs, watch } from 'vue';
const props = defineProps<{ const props = defineProps<{
stationCode: string; stationCode: string;
ndmNvr: NdmNvrResultVO; ndmNvr: NdmNvrResultVO;
dateTimeRange: [number, number]; dateTimeRange: DatePickerProps['value'];
}>(); }>();
const { stationCode, ndmNvr, dateTimeRange } = toRefs(props); const { stationCode, ndmNvr, dateTimeRange } = toRefs(props);
@@ -41,7 +41,7 @@ const pagination = reactive<PaginationProps>({
const page = computed(() => pagination.page ?? 1); const page = computed(() => pagination.page ?? 1);
const pageSize = computed(() => pagination.pageSize ?? DEFAULT_PAGE_SIZE); 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) => { watch(snmpLogRespData, (data) => {
if (data) { if (data) {
@@ -68,7 +68,14 @@ const tableData = computed<DataTableRowData[]>(() => {
defineExpose({ defineExpose({
isPending, isPending,
refresh, refresh: () => {
if (pagination.page !== 1 || pagination.pageSize !== DEFAULT_PAGE_SIZE) {
pagination.page = 1;
pagination.pageSize = DEFAULT_PAGE_SIZE;
} else {
refetch();
}
},
}); });
</script> </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"> <script setup lang="ts">
import type { NdmSecurityBoxResultVO } from '@/apis/models'; import type { NdmSecurityBoxResultVO } from '@/apis/models';
import dayjs from 'dayjs'; 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 { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue'; import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -16,7 +16,7 @@ const props = defineProps<{
const { stationCode, ndmSecurityBox } = toRefs(props); const { stationCode, ndmSecurityBox } = toRefs(props);
const searchFields = reactive({ const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number], dateTimeRange: undefined as DatePickerProps['value'],
}); });
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null; type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -39,8 +39,8 @@ const loading = computed(() => {
onMounted(() => { onMounted(() => {
const now = dayjs(); const now = dayjs();
const todayEnd = now.endOf('date'); const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date'); const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()]; searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData(); refreshData();
}); });
</script> </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"> <script setup lang="ts">
import type { NdmServerResultVO } from '@/apis/models'; import type { NdmServerResultVO } from '@/apis/models';
import dayjs from 'dayjs'; 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 { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue'; import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -16,7 +16,7 @@ const props = defineProps<{
const { stationCode, ndmServer } = toRefs(props); const { stationCode, ndmServer } = toRefs(props);
const searchFields = reactive({ const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number], dateTimeRange: undefined as DatePickerProps['value'],
}); });
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null; type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -39,8 +39,8 @@ const loading = computed(() => {
onMounted(() => { onMounted(() => {
const now = dayjs(); const now = dayjs();
const todayEnd = now.endOf('date'); const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date'); const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()]; searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData(); refreshData();
}); });
</script> </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"> <script setup lang="ts">
import type { NdmSwitchResultVO } from '@/apis/models'; import type { NdmSwitchResultVO } from '@/apis/models';
import dayjs from 'dayjs'; 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 { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue'; import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
@@ -16,7 +16,7 @@ const props = defineProps<{
const { stationCode, ndmSwitch } = toRefs(props); const { stationCode, ndmSwitch } = toRefs(props);
const searchFields = reactive({ const searchFields = reactive({
dateTimeRange: [0, 0] as [number, number], dateTimeRange: undefined as DatePickerProps['value'],
}); });
type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null; type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
@@ -29,7 +29,7 @@ const deviceUsageHistoryDiagCardRef = useTemplateRef<DeviceUsageHistoryDiagCardI
function refreshData() { function refreshData() {
deviceStatusHistoryDiagCardRef.value?.refresh(); deviceStatusHistoryDiagCardRef.value?.refresh();
deviceAlarmHistoryDiagCardRef.value?.refresh(); deviceAlarmHistoryDiagCardRef.value?.refresh();
deviceUsageHistoryDiagCardRef.value?.refresh(); // deviceUsageHistoryDiagCardRef.value?.refresh();
} }
const loading = computed(() => { const loading = computed(() => {
@@ -39,8 +39,8 @@ const loading = computed(() => {
onMounted(() => { onMounted(() => {
const now = dayjs(); const now = dayjs();
const todayEnd = now.endOf('date'); const todayEnd = now.endOf('date');
const seasonAgo = now.subtract(3, 'month').startOf('date'); const weekAgo = now.subtract(1, 'week').startOf('date');
searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()]; searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData(); refreshData();
}); });
</script> </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 { DEVICE_SNMP_LOGS_QUERY_KEY } from '@/constants';
import { useQuery, useQueryClient } from '@tanstack/vue-query'; import { useQuery, useQueryClient } from '@tanstack/vue-query';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import type { DatePickerProps } from 'naive-ui';
import { computed, watch, type Ref } from 'vue'; 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 queryClient = useQueryClient();
const queryKey = computed(() => [DEVICE_SNMP_LOGS_QUERY_KEY, stationCode, ndmDevice, dateTimeRange, page.value, pageSize.value]); 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, isPending,
isFetching, isFetching,
error, error,
refetch,
} = useQuery({ } = useQuery({
queryKey, queryKey,
enabled: computed(() => dateTimeRange.value.every((dateTime) => dateTime > 0)), enabled: computed(() => !!dateTimeRange.value),
queryFn: async () => { queryFn: async () => {
if (!dateTimeRange.value) throw new Error('请选择时间范围');
const range = dateTimeRange.value as [number, number];
const deviceId = ndmDevice.value.id; const deviceId = ndmDevice.value.id;
const createdTime_precisest = dayjs(dateTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss'); const createdTime_precisest = dayjs(range[0]).format('YYYY-MM-DD HH:mm:ss');
const createdTime_preciseed = dayjs(dateTimeRange.value[1]).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 restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
current: page.value, current: page.value,
size: pageSize.value, size: pageSize.value,
@@ -53,6 +57,7 @@ export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, ndmDevice: Ref<
isPending, isPending,
isFetching, isFetching,
error, error,
refetch,
refresh, refresh,
}; };
} }