From d246c780e4488c1a487b107d2c3138b6d880cfff Mon Sep 17 00:00:00 2001
From: alwayssuper <191763414@qq.com>
Date: Wed, 16 Apr 2025 10:47:29 +0800
Subject: [PATCH] feat: iothome

---
 src/api/iot/statistics/index.ts               |   1 +
 .../iot/home/components/ComparisonCard.vue    |  27 +-
 .../iot/home/components/DeviceCountCard.vue   | 126 ++++++----
 .../home/components/DeviceStateCountCard.vue  | 143 +++++++----
 .../iot/home/components/MessageTrendCard.vue  | 235 +++++++++++-------
 src/views/iot/home/index.vue                  |  62 +++--
 6 files changed, 384 insertions(+), 210 deletions(-)

diff --git a/src/api/iot/statistics/index.ts b/src/api/iot/statistics/index.ts
index 5b110c5a6..0f88217ab 100644
--- a/src/api/iot/statistics/index.ts
+++ b/src/api/iot/statistics/index.ts
@@ -23,6 +23,7 @@ interface TimeValueItem {
 
 /** IoT 消息统计数据类型 */
 export interface IotStatisticsDeviceMessageSummaryRespVO {
+  statType: number
   upstreamCounts: TimeValueItem[]
   downstreamCounts: TimeValueItem[]
 }
diff --git a/src/views/iot/home/components/ComparisonCard.vue b/src/views/iot/home/components/ComparisonCard.vue
index d7aa5d5f8..4ccda6609 100644
--- a/src/views/iot/home/components/ComparisonCard.vue
+++ b/src/views/iot/home/components/ComparisonCard.vue
@@ -1,17 +1,19 @@
 <template>
-  <el-card class="stat-card" shadow="never">
+  <el-card class="stat-card" shadow="never" :loading="loading">
     <div class="flex flex-col">
       <div class="flex justify-between items-center mb-1">
         <span class="text-gray-500 text-base font-medium">{{ title }}</span>
-        <Icon :icon="icon" class="text-[32px]" :class="iconColor" />
+        <Icon :icon="icon" :class="`text-[32px] ${iconColor}`" />
       </div>
       <span class="text-3xl font-bold text-gray-700">
-        {{ value }}
+        <span v-if="value === -1">--</span>
+        <span v-else>{{ value }}</span>
       </span>
       <el-divider class="my-2" />
       <div class="flex justify-between items-center text-gray-400 text-sm">
         <span>今日新增</span>
-        <span class="text-green-500">+{{ todayCount }}</span>
+        <span class="text-green-500" v-if="todayCount !== -1">+{{ todayCount }}</span>
+        <span v-else>--</span>
       </div>
     </div>
   </el-card>
@@ -28,6 +30,21 @@ const props = defineProps({
   value: propTypes.number.def(0).isRequired,
   todayCount: propTypes.number.def(0).isRequired,
   icon: propTypes.string.def('').isRequired,
-  iconColor: propTypes.string.def('')
+  iconColor: propTypes.string.def(''),
+  loading: {
+    type: Boolean,
+    default: false
+  }
 })
 </script>
+
+<style lang="scss" scoped>
+.stat-card {
+  transition: all 0.3s;
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
+  }
+}
+</style>
diff --git a/src/views/iot/home/components/DeviceCountCard.vue b/src/views/iot/home/components/DeviceCountCard.vue
index 5b7ea5d42..a09706ff4 100644
--- a/src/views/iot/home/components/DeviceCountCard.vue
+++ b/src/views/iot/home/components/DeviceCountCard.vue
@@ -1,11 +1,17 @@
 <template>
-  <el-card class="chart-card" shadow="never">
+  <el-card class="chart-card" shadow="never" :loading="loading">
     <template #header>
       <div class="flex items-center">
         <span class="text-base font-medium text-gray-600">设备数量统计</span>
       </div>
     </template>
-    <div ref="deviceCountChartRef" class="h-[240px]"></div>
+    <div v-if="loading && !hasData" class="h-[240px] flex justify-center items-center">
+      <el-empty description="加载中..." />
+    </div>
+    <div v-else-if="!hasData" class="h-[240px] flex justify-center items-center">
+      <el-empty description="暂无数据" />
+    </div>
+    <div v-else ref="deviceCountChartRef" class="h-[240px]"></div>
   </el-card>
 </template>
 
@@ -16,6 +22,7 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { TooltipComponent, LegendComponent } from 'echarts/components'
 import { LabelLayout } from 'echarts/features'
 import { IotStatisticsSummaryRespVO } from '@/api/iot/statistics'
+import type { PropType } from 'vue'
 
 /** 设备数量统计卡片 */
 defineOptions({ name: 'DeviceCountCard' })
@@ -24,64 +31,97 @@ const props = defineProps({
   statsData: {
     type: Object as PropType<IotStatisticsSummaryRespVO>,
     required: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
   }
 })
 
 const deviceCountChartRef = ref()
 
+// 是否有数据
+const hasData = computed(() => {
+  if (!props.statsData) return false
+  
+  const categories = Object.entries(props.statsData.productCategoryDeviceCounts || {})
+  return categories.length > 0 && props.statsData.deviceCount !== -1
+})
+
 // 初始化图表
 const initChart = () => {
+  // 如果没有数据，则不初始化图表
+  if (!hasData.value) return
+  
+  // 确保 DOM 元素存在且已渲染
+  if (!deviceCountChartRef.value) {
+    console.warn('图表DOM元素不存在')
+    return
+  }
+  
   echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout])
   
-  const chart = echarts.init(deviceCountChartRef.value)
-  chart.setOption({
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      top: '5%',
-      right: '10%',
-      align: 'left',
-      orient: 'vertical',
-      icon: 'circle'
-    },
-    series: [
-      {
-        name: 'Access From',
-        type: 'pie',
-        radius: ['50%', '80%'],
-        avoidLabelOverlap: false,
-        center: ['30%', '50%'],
-        label: {
-          show: false,
-          position: 'outside'
-        },
-        emphasis: {
+  try {
+    const chart = echarts.init(deviceCountChartRef.value)
+    chart.setOption({
+      tooltip: {
+        trigger: 'item'
+      },
+      legend: {
+        top: '5%',
+        right: '10%',
+        align: 'left',
+        orient: 'vertical',
+        icon: 'circle'
+      },
+      series: [
+        {
+          name: 'Access From',
+          type: 'pie',
+          radius: ['50%', '80%'],
+          avoidLabelOverlap: false,
+          center: ['30%', '50%'],
           label: {
-            show: true,
-            fontSize: 20,
-            fontWeight: 'bold'
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        data: Object.entries(props.statsData.productCategoryDeviceCounts).map(([name, value]) => ({
-          name,
-          value
-        }))
-      }
-    ]
-  })
+            show: false,
+            position: 'outside'
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: 20,
+              fontWeight: 'bold'
+            }
+          },
+          labelLine: {
+            show: false
+          },
+          data: Object.entries(props.statsData.productCategoryDeviceCounts).map(([name, value]) => ({
+            name,
+            value
+          }))
+        }
+      ]
+    })
+    return chart
+  } catch (error) {
+    console.error('初始化图表失败:', error)
+    return null
+  }
 }
 
 // 监听数据变化
 watch(() => props.statsData, () => {
-  initChart()
+  // 使用 nextTick 确保 DOM 已更新
+  nextTick(() => {
+    initChart()
+  })
 }, { deep: true })
 
 // 组件挂载时初始化图表
 onMounted(() => {
-  initChart()
+  // 使用 nextTick 确保 DOM 已更新
+  nextTick(() => {
+    initChart()
+  })
 })
 </script>
diff --git a/src/views/iot/home/components/DeviceStateCountCard.vue b/src/views/iot/home/components/DeviceStateCountCard.vue
index 33415ea33..849a3b899 100644
--- a/src/views/iot/home/components/DeviceStateCountCard.vue
+++ b/src/views/iot/home/components/DeviceStateCountCard.vue
@@ -1,11 +1,17 @@
 <template>
-  <el-card class="chart-card" shadow="never">
+  <el-card class="chart-card" shadow="never" :loading="loading">
     <template #header>
       <div class="flex items-center">
         <span class="text-base font-medium text-gray-600">设备状态统计</span>
       </div>
     </template>
-    <el-row class="h-[240px]">
+    <div v-if="loading && !hasData" class="h-[240px] flex justify-center items-center">
+      <el-empty description="加载中..." />
+    </div>
+    <div v-else-if="!hasData" class="h-[240px] flex justify-center items-center">
+      <el-empty description="暂无数据" />
+    </div>
+    <el-row v-else class="h-[240px]">
       <el-col :span="8" class="flex flex-col items-center">
         <div ref="deviceOnlineCountChartRef" class="h-[160px] w-full"></div>
         <div class="text-center mt-2">
@@ -33,6 +39,7 @@ import * as echarts from 'echarts/core'
 import { GaugeChart } from 'echarts/charts'
 import { CanvasRenderer } from 'echarts/renderers'
 import { IotStatisticsSummaryRespVO } from '@/api/iot/statistics'
+import type { PropType } from 'vue'
 
 /** 设备状态统计卡片 */
 defineOptions({ name: 'DeviceStateCountCard' })
@@ -41,6 +48,10 @@ const props = defineProps({
   statsData: {
     type: Object as PropType<IotStatisticsSummaryRespVO>,
     required: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -48,63 +59,95 @@ const deviceOnlineCountChartRef = ref()
 const deviceOfflineChartRef = ref()
 const deviceActiveChartRef = ref()
 
+// 是否有数据
+const hasData = computed(() => {
+  if (!props.statsData) return false
+  return props.statsData.deviceCount !== -1
+})
+
 // 初始化仪表盘图表
 const initGaugeChart = (el: any, value: number, color: string) => {
+  // 确保 DOM 元素存在且已渲染
+  if (!el) {
+    console.warn('图表DOM元素不存在')
+    return
+  }
+  
   echarts.use([GaugeChart, CanvasRenderer])
   
-  const chart = echarts.init(el)
-  chart.setOption({
-    series: [
-      {
-        type: 'gauge',
-        startAngle: 360,
-        endAngle: 0,
-        min: 0,
-        max: props.statsData.deviceCount || 100, // 使用设备总数作为最大值
-        progress: {
-          show: true,
-          width: 12,
-          itemStyle: {
-            color: color
-          }
-        },
-        axisLine: {
-          lineStyle: {
+  try {
+    const chart = echarts.init(el)
+    chart.setOption({
+      series: [
+        {
+          type: 'gauge',
+          startAngle: 360,
+          endAngle: 0,
+          min: 0,
+          max: props.statsData.deviceCount || 100, // 使用设备总数作为最大值
+          progress: {
+            show: true,
             width: 12,
-            color: [[1, '#E5E7EB']]
-          }
-        },
-        axisTick: { show: false },
-        splitLine: { show: false },
-        axisLabel: { show: false },
-        pointer: { show: false },
-        anchor: { show: false },
-        title: { show: false },
-        detail: {
-          valueAnimation: true,
-          fontSize: 24,
-          fontWeight: 'bold',
-          fontFamily: 'Inter, sans-serif',
-          color: color,
-          offsetCenter: [0, '0'],
-          formatter: (value: number) => {
-            return `${value} 个`
-          }
-        },
-        data: [{ value: value }]
-      }
-    ]
-  })
+            itemStyle: {
+              color: color
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              width: 12,
+              color: [[1, '#E5E7EB']]
+            }
+          },
+          axisTick: { show: false },
+          splitLine: { show: false },
+          axisLabel: { show: false },
+          pointer: { show: false },
+          anchor: { show: false },
+          title: { show: false },
+          detail: {
+            valueAnimation: true,
+            fontSize: 24,
+            fontWeight: 'bold',
+            fontFamily: 'Inter, sans-serif',
+            color: color,
+            offsetCenter: [0, '0'],
+            formatter: (value: number) => {
+              return `${value} 个`
+            }
+          },
+          data: [{ value: value }]
+        }
+      ]
+    })
+    return chart
+  } catch (error) {
+    console.error('初始化图表失败:', error)
+    return null
+  }
 }
 
 // 初始化所有图表
 const initCharts = () => {
-  // 在线设备统计
-  initGaugeChart(deviceOnlineCountChartRef.value, props.statsData.deviceOnlineCount, '#0d9')
-  // 离线设备统计
-  initGaugeChart(deviceOfflineChartRef.value, props.statsData.deviceOfflineCount, '#f50')
-  // 待激活设备统计
-  initGaugeChart(deviceActiveChartRef.value, props.statsData.deviceInactiveCount, '#05b')
+  // 如果没有数据，则不初始化图表
+  if (!hasData.value) return
+  
+  // 使用 nextTick 确保 DOM 已更新
+  nextTick(() => {
+    // 在线设备统计
+    if (deviceOnlineCountChartRef.value) {
+      initGaugeChart(deviceOnlineCountChartRef.value, props.statsData.deviceOnlineCount, '#0d9')
+    }
+    
+    // 离线设备统计
+    if (deviceOfflineChartRef.value) {
+      initGaugeChart(deviceOfflineChartRef.value, props.statsData.deviceOfflineCount, '#f50')
+    }
+    
+    // 待激活设备统计
+    if (deviceActiveChartRef.value) {
+      initGaugeChart(deviceActiveChartRef.value, props.statsData.deviceInactiveCount, '#05b')
+    }
+  })
 }
 
 // 监听数据变化
diff --git a/src/views/iot/home/components/MessageTrendCard.vue b/src/views/iot/home/components/MessageTrendCard.vue
index 63e4417a9..c8b2d0b4e 100644
--- a/src/views/iot/home/components/MessageTrendCard.vue
+++ b/src/views/iot/home/components/MessageTrendCard.vue
@@ -1,8 +1,13 @@
 <template>
-  <el-card class="chart-card" shadow="never">
+  <el-card class="chart-card" shadow="never" :loading="loading">
     <template #header>
       <div class="flex items-center justify-between">
-        <span class="text-base font-medium text-gray-600">上下行消息量统计</span>
+        <span class="text-base font-medium text-gray-600">
+          上下行消息量统计
+          <span class="text-sm text-gray-400 ml-2">
+            {{ props.messageStats.statType === 1 ? '(按天)' : '(按小时)' }}
+          </span>
+        </span>
         <div class="flex items-center space-x-2">
           <el-radio-group v-model="timeRange" @change="handleTimeRangeChange">
             <el-radio-button label="8h">最近8小时</el-radio-button>
@@ -21,7 +26,13 @@
         </div>
       </div>
     </template>
-    <div ref="messageChartRef" class="h-[300px]"></div>
+    <div v-if="loading && !hasData" class="h-[300px] flex justify-center items-center">
+      <el-empty description="加载中..." />
+    </div>
+    <div v-else-if="!hasData" class="h-[300px] flex justify-center items-center">
+      <el-empty description="暂无数据" />
+    </div>
+    <div v-else ref="messageChartRef" class="h-[300px]"></div>
   </el-card>
 </template>
 
@@ -43,6 +54,10 @@ const props = defineProps({
   messageStats: {
     type: Object as PropType<IotStatisticsDeviceMessageSummaryRespVO>,
     required: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -52,6 +67,20 @@ const timeRange = ref('7d')
 const dateRange = ref<any>(null)
 const messageChartRef = ref()
 
+// 是否有数据
+const hasData = computed(() => {
+  if (!props.messageStats) return false
+  
+  const upstreamCounts = Array.isArray(props.messageStats.upstreamCounts) 
+    ? props.messageStats.upstreamCounts 
+    : []
+  
+  const downstreamCounts = Array.isArray(props.messageStats.downstreamCounts) 
+    ? props.messageStats.downstreamCounts 
+    : []
+    
+  return upstreamCounts.length > 0 || downstreamCounts.length > 0
+})
 // TODO @super：这个的计算，看看能不能结合 dayjs 简化。因为 1h、24h、7d 感觉是比较标准的。如果没有，抽到 utils/formatTime.ts 作为一个工具方法
 // 处理快捷时间范围选择
 const handleTimeRangeChange = (range: string) => {
@@ -84,6 +113,15 @@ const initChart = () => {
     UniversalTransition
   ])
 
+  // 检查是否有数据可以绘制
+  if (!hasData.value) return
+  
+  // 确保 DOM 元素存在且已渲染
+  if (!messageChartRef.value) {
+    console.warn('图表DOM元素不存在')
+    return
+  }
+
 
   // 检查数据格式并转换
   const upstreamCounts = Array.isArray(props.messageStats.upstreamCounts) 
@@ -117,9 +155,19 @@ const initChart = () => {
     timestamps = []
   }
 
+  console.log('时间戳:', timestamps)
 
-  // 准备数据
-  const xdata = timestamps.map((ts) => formatDate(dayjs(ts).toDate(), 'YYYY-MM-DD HH:mm'))
+  // 准备数据 - 根据 statType 确定时间格式
+  const xdata = timestamps.map((ts) => {
+    // 根据 statType 选择合适的格式
+    if (props.messageStats.statType === 1) {
+      // 日级别统计 - 使用 YYYY-MM-DD 格式
+      return formatDate(dayjs(ts).toDate(), 'YYYY-MM-DD')
+    } else {
+      // 小时级别统计 - 使用 YYYY-MM-DD HH:mm 格式
+      return formatDate(dayjs(ts).toDate(), 'YYYY-MM-DD HH:mm')
+    }
+  })
   
   let upData: number[] = []
   let downData: number[] = []
@@ -155,110 +203,123 @@ const initChart = () => {
 
 
   // 配置图表
-  const chart = echarts.init(messageChartRef.value)
-  chart.setOption({
-    tooltip: {
-      trigger: 'axis',
-      backgroundColor: 'rgba(255, 255, 255, 0.9)',
-      borderColor: '#E5E7EB',
-      textStyle: {
-        color: '#374151'
-      }
-    },
-    legend: {
-      data: ['上行消息量', '下行消息量'],
-      textStyle: {
-        color: '#374151',
-        fontWeight: 500
-      }
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: xdata,
-      axisLine: {
-        lineStyle: {
-          color: '#E5E7EB'
+  try {
+    const chart = echarts.init(messageChartRef.value)
+    
+    chart.setOption({
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        borderColor: '#E5E7EB',
+        textStyle: {
+          color: '#374151'
         }
       },
-      axisLabel: {
-        color: '#6B7280'
-      }
-    },
-    yAxis: {
-      type: 'value',
-      axisLine: {
-        lineStyle: {
-          color: '#E5E7EB'
+      legend: {
+        data: ['上行消息量', '下行消息量'],
+        textStyle: {
+          color: '#374151',
+          fontWeight: 500
         }
       },
-      axisLabel: {
-        color: '#6B7280'
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
       },
-      splitLine: {
-        lineStyle: {
-          color: '#F3F4F6'
-        }
-      }
-    },
-    series: [
-      {
-        name: '上行消息量',
-        type: 'line',
-        smooth: true,
-        data: upData,
-        itemStyle: {
-          color: '#3B82F6'
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: xdata,
+        axisLine: {
+          lineStyle: {
+            color: '#E5E7EB'
+          }
         },
-        lineStyle: {
-          width: 2
-        },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(59, 130, 246, 0.2)' },
-            { offset: 1, color: 'rgba(59, 130, 246, 0)' }
-          ])
+        axisLabel: {
+          color: '#6B7280'
         }
       },
-      {
-        name: '下行消息量',
-        type: 'line',
-        smooth: true,
-        data: downData,
-        itemStyle: {
-          color: '#10B981'
+      yAxis: {
+        type: 'value',
+        axisLine: {
+          lineStyle: {
+            color: '#E5E7EB'
+          }
         },
-        lineStyle: {
-          width: 2
+        axisLabel: {
+          color: '#6B7280'
         },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(16, 185, 129, 0.2)' },
-            { offset: 1, color: 'rgba(16, 185, 129, 0)' }
-          ])
+        splitLine: {
+          lineStyle: {
+            color: '#F3F4F6'
+          }
         }
-      }
-    ]
-  })
+      },
+      series: [
+        {
+          name: '上行消息量',
+          type: 'line',
+          smooth: true,
+          data: upData,
+          itemStyle: {
+            color: '#3B82F6'
+          },
+          lineStyle: {
+            width: 2
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(59, 130, 246, 0.2)' },
+              { offset: 1, color: 'rgba(59, 130, 246, 0)' }
+            ])
+          }
+        },
+        {
+          name: '下行消息量',
+          type: 'line',
+          smooth: true,
+          data: downData,
+          itemStyle: {
+            color: '#10B981'
+          },
+          lineStyle: {
+            width: 2
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(16, 185, 129, 0.2)' },
+              { offset: 1, color: 'rgba(16, 185, 129, 0)' }
+            ])
+          }
+        }
+      ]
+    })
+    return chart
+  } catch (error) {
+    console.error('初始化图表失败:', error)
+    return null
+  }
 }
 
 // 监听数据变化
 watch(
   () => props.messageStats,
   () => {
-    initChart()
+    // 使用 nextTick 确保 DOM 已更新
+    nextTick(() => {
+      initChart()
+    })
   },
   { deep: true }
 )
 
 // 组件挂载时初始化图表
 onMounted(() => {
-  initChart()
+  // 使用 nextTick 确保 DOM 已更新
+  nextTick(() => {
+    initChart()
+  })
 })
 </script>
diff --git a/src/views/iot/home/index.vue b/src/views/iot/home/index.vue
index d0d5855f9..153b20ea7 100644
--- a/src/views/iot/home/index.vue
+++ b/src/views/iot/home/index.vue
@@ -8,6 +8,7 @@
         :todayCount="statsData.productCategoryTodayCount"
         icon="ep:menu"
         iconColor="text-blue-400"
+        :loading="loading"
       />
     </el-col>
     <el-col :span="6">
@@ -17,6 +18,7 @@
         :todayCount="statsData.productTodayCount"
         icon="ep:box"
         iconColor="text-orange-400"
+        :loading="loading"
       />
     </el-col>
     <el-col :span="6">
@@ -26,6 +28,7 @@
         :todayCount="statsData.deviceTodayCount"
         icon="ep:cpu"
         iconColor="text-purple-400"
+        :loading="loading"
       />
     </el-col>
     <el-col :span="6">
@@ -35,6 +38,7 @@
         :todayCount="statsData.deviceMessageTodayCount"
         icon="ep:message"
         iconColor="text-teal-400"
+        :loading="loading"
       />
     </el-col>
   </el-row>
@@ -42,10 +46,10 @@
   <!-- 第二行：图表行 -->
   <el-row :gutter="16" class="mb-4">
     <el-col :span="12">
-      <DeviceCountCard :statsData="statsData" />
+      <DeviceCountCard :statsData="statsData" :loading="loading" />
     </el-col>
     <el-col :span="12">
-      <DeviceStateCountCard :statsData="statsData" />
+      <DeviceStateCountCard :statsData="statsData" :loading="loading" />
     </el-col>
   </el-row>
 
@@ -55,6 +59,7 @@
       <MessageTrendCard 
         :messageStats="messageStats"
         @time-range-change="handleTimeRangeChange"
+        :loading="loading"
       />
     </el-col>
   </el-row>
@@ -68,7 +73,7 @@ import {
   IotStatisticsSummaryRespVO,
   ProductCategoryApi
 } from '@/api/iot/statistics'
-import { formatDate } from '@/utils/formatTime'
+import { getHoursAgo } from '@/utils/formatTime'
 import ComparisonCard from './components/ComparisonCard.vue'
 import DeviceCountCard from './components/DeviceCountCard.vue'
 import DeviceStateCountCard from './components/DeviceStateCountCard.vue'
@@ -79,11 +84,9 @@ defineOptions({ name: 'IoTHome' })
 
 // TODO @super：使用下 Echart 组件，参考 yudao-ui-admin-vue3/src/views/mall/home/components/TradeTrendCard.vue 等
 
-const timeRange = ref('7d') // 修改默认选择为近一周
-const dateRange = ref<[Date, Date] | null>(null)
 
 const queryParams = reactive({
-  startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
+  startTime: getHoursAgo( 7 * 24 ), // 设置默认开始时间为 7 天前
   endTime: Date.now() // 设置默认结束时间为当前时间
 })
 
@@ -91,26 +94,30 @@ const queryParams = reactive({
 // 基础统计数据
 // TODO @super：初始为 -1，然后界面展示先是加载中？试试用 cursor 改哈
 const statsData = ref<IotStatisticsSummaryRespVO>({
-  productCategoryCount: 0,
-  productCount: 0,
-  deviceCount: 0,
-  deviceMessageCount: 0,
-  productCategoryTodayCount: 0,
-  productTodayCount: 0,
-  deviceTodayCount: 0,
-  deviceMessageTodayCount: 0,
-  deviceOnlineCount: 0,
-  deviceOfflineCount: 0,
-  deviceInactiveCount: 0,
+  productCategoryCount: -1,
+  productCount: -1,
+  deviceCount: -1,
+  deviceMessageCount: -1,
+  productCategoryTodayCount: -1,
+  productTodayCount: -1,
+  deviceTodayCount: -1,
+  deviceMessageTodayCount: -1,
+  deviceOnlineCount: -1,
+  deviceOfflineCount: -1,
+  deviceInactiveCount: -1,
   productCategoryDeviceCounts: {}
 })
 
 // 消息统计数据
 const messageStats = ref<IotStatisticsDeviceMessageSummaryRespVO>({
-  upstreamCounts: {},
-  downstreamCounts: {}
+  statType: 0,
+  upstreamCounts: [],
+  downstreamCounts: []
 })
 
+// 加载状态
+const loading = ref(true)
+
 /** 处理时间范围变化 */
 const handleTimeRangeChange = (params: { startTime: number; endTime: number }) => {
   queryParams.startTime = params.startTime
@@ -120,12 +127,17 @@ const handleTimeRangeChange = (params: { startTime: number; endTime: number }) =
 
 /** 获取统计数据 */
 const getStats = async () => {
-  // 获取基础统计数据
-  statsData.value = await ProductCategoryApi.getIotStatisticsSummary()
-  // 获取消息统计数据
-  messageStats.value = await ProductCategoryApi.getIotStatisticsDeviceMessageSummary(queryParams)
-  console.log('statsData', statsData.value)
-  console.log('messageStats', messageStats.value)
+  loading.value = true
+  try {
+    // 获取基础统计数据
+    statsData.value = await ProductCategoryApi.getIotStatisticsSummary()
+    // 获取消息统计数据
+    messageStats.value = await ProductCategoryApi.getIotStatisticsDeviceMessageSummary(queryParams)
+  } catch (error) {
+    console.error('获取统计数据出错:', error)
+  } finally {
+    loading.value = false
+  }
 }
 
 /** 初始化 */