feat: home 1

src/api/iot/statistics/index.ts

@@ -3,8 +3,8 @@ import request from '@/config/axios'
 // IoT 数据统计 API
 // IoT 数据统计 API
 export const ProductCategoryApi = {
 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

src/views/iot/home/index.vue

@@ -117,8 +117,25 @@
         <el-col :span="24">
         <el-col :span="24">
           <el-card class="chart-card" shadow="never">
           <el-card class="chart-card" shadow="never">
             <template #header>
             <template #header>
-              <div class="flex items-center">
-                <span class="text-base font-medium text-gray-600">消息量统计</span>
+              <div class="flex items-center justify-between">
+                <span class="text-base font-medium text-gray-600">上下行消息量统计</span>
+                <div class="flex items-center space-x-2">
+                  <el-radio-group v-model="timeRange" size="small" @change="handleTimeRangeChange">
+                    <el-radio-button label="1h">最近1小时</el-radio-button>
+                    <el-radio-button label="24h">最近24小时</el-radio-button>
+                    <el-radio-button label="7d">近一周</el-radio-button>
+                  </el-radio-group>
+                  <el-date-picker
+                    v-model="dateRange"
+                    type="datetimerange"
+                    size="small"
+                    range-separator="至"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+                    @change="handleDateRangeChange"
+                  />
+                </div>
               </div>
               </div>
             </template>
             </template>
             <div ref="chartMsgStat" class="h-[300px]"></div>
             <div ref="chartMsgStat" class="h-[300px]"></div>
@@ -142,6 +159,14 @@ import { Icon } from '@/components/Icon'
 /** IoT 首页 */
 /** IoT 首页 */
 defineOptions({ name: 'IotHome' })
 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([
 echarts.use([
   TooltipComponent,
   TooltipComponent,
   LegendComponent,
   LegendComponent,
@@ -174,9 +199,54 @@ const statsData = ref({
   reportDataStats: []
   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 getStats = async () => {
-  const res = await ProductCategoryApi.getIotMainStats()
+  const res = await ProductCategoryApi.getIotMainStats(queryParams)
   statsData.value = res
   statsData.value = res
   initCharts()
   initCharts()
 }
 }
@@ -435,4 +505,13 @@ onMounted(() => {
     @apply text-gray-100;
     @apply text-gray-100;
   }
   }
 }
 }
+
+// 添加时间选择器样式
+:deep(.el-radio-group) {
+  @apply mr-4;
+}
+
+:deep(.el-date-editor) {
+  @apply w-[360px];
+}
 </style>
 </style>