diff --git a/src/api/iot/statistics/index.ts b/src/api/iot/statistics/index.ts index 2f9c7024..56d8e04f 100644 --- a/src/api/iot/statistics/index.ts +++ b/src/api/iot/statistics/index.ts @@ -3,8 +3,8 @@ import request from '@/config/axios' // IoT 数据统计 API export const ProductCategoryApi = { // 查询首页所需数据统计信息 - getIotMainStats: async () => { - return await request.get({ url: `/iot/statistics/main`}) + getIotMainStats: async (params: any) => { + return await request.get({ url: `/iot/statistics/main`, params }) } } \ No newline at end of file diff --git a/src/views/iot/home/index.vue b/src/views/iot/home/index.vue index dec5546c..991b4735 100644 --- a/src/views/iot/home/index.vue +++ b/src/views/iot/home/index.vue @@ -117,8 +117,25 @@
@@ -142,6 +159,14 @@ import { Icon } from '@/components/Icon' /** IoT 首页 */ defineOptions({ name: 'IotHome' }) +const timeRange = ref('24h') // 默认选择最近24小时 +const dateRange = ref<[Date, Date] | null>(null) + +const queryParams = reactive({ + startTime: undefined as number | undefined, + endTime: undefined as number | undefined +}) + echarts.use([ TooltipComponent, LegendComponent, @@ -174,9 +199,54 @@ const statsData = ref({ reportDataStats: [] }) +/** 处理快捷时间范围选择 */ +const handleTimeRangeChange = (value: string) => { + const now = Date.now() + let startTime: number + + switch (value) { + case '1h': + startTime = now - 60 * 60 * 1000 + break + case '24h': + startTime = now - 24 * 60 * 60 * 1000 + break + case '7d': + startTime = now - 7 * 24 * 60 * 60 * 1000 + break + default: + return + } + + // 清空日期选择器 + dateRange.value = null + + // 更新查询参数 + queryParams.startTime = startTime + queryParams.endTime = now + + // 重新获取数据 + getStats() +} + +/** 处理自定义日期范围选择 */ +const handleDateRangeChange = (value: [Date, Date] | null) => { + if (value) { + // 清空快捷选项 + timeRange.value = '' + + // 更新查询参数 + queryParams.startTime = value[0].getTime() + queryParams.endTime = value[1].getTime() + + // 重新获取数据 + getStats() + } +} + /** 获取统计数据 */ const getStats = async () => { - const res = await ProductCategoryApi.getIotMainStats() + const res = await ProductCategoryApi.getIotMainStats(queryParams) statsData.value = res initCharts() } @@ -435,4 +505,13 @@ onMounted(() => { @apply text-gray-100; } } + +// 添加时间选择器样式 +:deep(.el-radio-group) { + @apply mr-4; +} + +:deep(.el-date-editor) { + @apply w-[360px]; +}