index.vue
2.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<template>
<!-- 第一行：统计卡片行 -->
<el-row :gutter="16" class="mb-4">
<el-col :span="6">
<ComparisonCard
title="分类数量"
:value="statsData.productCategoryCount"
:todayCount="statsData.productCategoryTodayCount"
icon="ep:menu"
iconColor="text-blue-400"
:loading="loading"
/>
</el-col>
<el-col :span="6">
<ComparisonCard
title="产品数量"
:value="statsData.productCount"
:todayCount="statsData.productTodayCount"
icon="ep:box"
iconColor="text-orange-400"
:loading="loading"
/>
</el-col>
<el-col :span="6">
<ComparisonCard
title="设备数量"
:value="statsData.deviceCount"
:todayCount="statsData.deviceTodayCount"
icon="ep:cpu"
iconColor="text-purple-400"
:loading="loading"
/>
</el-col>
<el-col :span="6">
<ComparisonCard
title="设备消息数"
:value="statsData.deviceMessageCount"
:todayCount="statsData.deviceMessageTodayCount"
icon="ep:message"
iconColor="text-teal-400"
:loading="loading"
/>
</el-col>
</el-row>
<!-- 第二行：图表行 -->
<el-row :gutter="16" class="mb-4">
<el-col :span="12">
<DeviceCountCard :statsData="statsData" :loading="loading" />
</el-col>
<el-col :span="12">
<DeviceStateCountCard :statsData="statsData" :loading="loading" />
</el-col>
</el-row>
<!-- 第三行：消息统计行 -->
<el-row>
<el-col :span="24">
<MessageTrendCard />
</el-col>
</el-row>
<!-- TODO 第四行：地图 -->
</template>
<script setup lang="ts" name="Index">
import { IotStatisticsSummaryRespVO, StatisticsApi } from '@/api/iot/statistics'
import ComparisonCard from './components/ComparisonCard.vue'
import DeviceCountCard from './components/DeviceCountCard.vue'
import DeviceStateCountCard from './components/DeviceStateCountCard.vue'
import MessageTrendCard from './components/MessageTrendCard.vue'
/** IoT 首页 */
defineOptions({ name: 'IoTHome' })
const statsData = ref<IotStatisticsSummaryRespVO>({
productCategoryCount: -1,
productCount: -1,
deviceCount: -1,
deviceMessageCount: -1,
productCategoryTodayCount: -1,
productTodayCount: -1,
deviceTodayCount: -1,
deviceMessageTodayCount: -1,
deviceOnlineCount: -1,
deviceOfflineCount: -1,
deviceInactiveCount: -1,
productCategoryDeviceCounts: {}
}) // 基础统计数据
const loading = ref(true) // 加载状态
/** 获取统计数据 */
const getStats = async () => {
loading.value = true
try {
// 获取基础统计数据
statsData.value = await StatisticsApi.getStatisticsSummary()
} catch (error) {
console.error('获取统计数据出错:', error)
} finally {
loading.value = false
}
}
/** 初始化 */
onMounted(() => {
getStats()
})
</script>