物模型消息
-
+
{{ statsData.reportTotal }}
@@ -236,12 +236,19 @@ const initCharts = () => {
/** 初始化仪表盘图表 */
const initGaugeChart = (el: any, value: number, color: string) => {
+ // 计算百分比，保留1位小数
+ const percentage = statsData.value.deviceTotal > 0
+ ? Number(((value / statsData.value.deviceTotal) * 100).toFixed(1))
+ : 0
+
echarts.init(el).setOption({
series: [
{
type: 'gauge',
startAngle: 360,
endAngle: 0,
+ min: 0,
+ max: 100, // 将最大值设为100
progress: {
show: true,
width: 12,
@@ -263,16 +270,29 @@ const initGaugeChart = (el: any, value: number, color: string) => {
title: { show: false },
detail: {
valueAnimation: true,
- fontSize: 24,
+ fontSize: 20,
fontWeight: 'bold',
fontFamily: 'Inter, sans-serif',
color: color,
offsetCenter: [0, '0'],
formatter: (value: number) => {
- return value + '个'
+ return `${value}%\n(${statsData.value.deviceTotal > 0 ? Math.round((value / 100) * statsData.value.deviceTotal) : 0}个)`
+ },
+ rich: {
+ value: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: color,
+ padding: [0, 0, 10, 0]
+ },
+ unit: {
+ fontSize: 14,
+ color: '#6B7280',
+ padding: [0, 0, 0, 0]
+ }
}
},
- data: [{ value: value }]
+ data: [{ value: percentage }]
}
]
})
--
Gitee
From d6eb0cd8507c19fa50ceb4c473a7a244e6fdcbc7 Mon Sep 17 00:00:00 2001
From: alwayssuper <191763414@qq.com>
Date: Thu, 27 Feb 2025 09:54:38 +0800
Subject: [PATCH 05/10] feat: home 1
---
src/views/iot/home/index.vue | 26 ++++----------------------
1 file changed, 4 insertions(+), 22 deletions(-)
diff --git a/src/views/iot/home/index.vue b/src/views/iot/home/index.vue
index 24c67e328..dec5546ca 100644
--- a/src/views/iot/home/index.vue
+++ b/src/views/iot/home/index.vue
@@ -236,11 +236,6 @@ const initCharts = () => {
/** 初始化仪表盘图表 */
const initGaugeChart = (el: any, value: number, color: string) => {
- // 计算百分比，保留1位小数
- const percentage = statsData.value.deviceTotal > 0
- ? Number(((value / statsData.value.deviceTotal) * 100).toFixed(1))
- : 0
-
echarts.init(el).setOption({
series: [
{
@@ -248,7 +243,7 @@ const initGaugeChart = (el: any, value: number, color: string) => {
startAngle: 360,
endAngle: 0,
min: 0,
- max: 100, // 将最大值设为100
+ max: statsData.value.deviceTotal || 100, // 使用设备总数作为最大值
progress: {
show: true,
width: 12,
@@ -270,29 +265,16 @@ const initGaugeChart = (el: any, value: number, color: string) => {
title: { show: false },
detail: {
valueAnimation: true,
- fontSize: 20,
+ fontSize: 24,
fontWeight: 'bold',
fontFamily: 'Inter, sans-serif',
color: color,
offsetCenter: [0, '0'],
formatter: (value: number) => {
- return `${value}%\n(${statsData.value.deviceTotal > 0 ? Math.round((value / 100) * statsData.value.deviceTotal) : 0}个)`
- },
- rich: {
- value: {
- fontSize: 20,
- fontWeight: 'bold',
- color: color,
- padding: [0, 0, 10, 0]
- },
- unit: {
- fontSize: 14,
- color: '#6B7280',
- padding: [0, 0, 0, 0]
- }
+ return `${value}个`
}
},
- data: [{ value: percentage }]
+ data: [{ value: value }]
}
]
})
--
Gitee
From 1b9a3dd4fe3c591b5b4936de58471eae2e35de6f Mon Sep 17 00:00:00 2001
From: alwayssuper <191763414@qq.com>
Date: Thu, 27 Feb 2025 10:39:50 +0800
Subject: [PATCH 06/10] feat: home 1
---
src/api/iot/statistics/index.ts | 4 +-
src/views/iot/home/index.vue | 85 +++++++++++++++++++++++++++++++--
2 files changed, 84 insertions(+), 5 deletions(-)
diff --git a/src/api/iot/statistics/index.ts b/src/api/iot/statistics/index.ts
index 2f9c70247..56d8e04fc 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 dec5546ca..991b47355 100644
--- a/src/views/iot/home/index.vue
+++ b/src/views/iot/home/index.vue
@@ -117,8 +117,25 @@
-
-
消息量统计
+
+
上下行消息量统计
+
+
+ 最近1小时
+ 最近24小时
+ 近一周
+
+
+
@@ -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];
+}
--
Gitee
From b95a2b979683a0ff9b49e7909a40c5a59e340f0c Mon Sep 17 00:00:00 2001
From: alwayssuper <191763414@qq.com>
Date: Thu, 27 Feb 2025 10:44:13 +0800
Subject: [PATCH 07/10] feat: home 1
---
src/views/iot/home/index.vue | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/views/iot/home/index.vue b/src/views/iot/home/index.vue
index 991b47355..f92472938 100644
--- a/src/views/iot/home/index.vue
+++ b/src/views/iot/home/index.vue
@@ -120,7 +120,7 @@
上下行消息量统计
-
+
最近1小时
最近24小时
近一周
@@ -128,7 +128,7 @@
(null)
const queryParams = reactive({
- startTime: undefined as number | undefined,
- endTime: undefined as number | undefined
+ startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为7天前
+ endTime: Date.now() // 设置默认结束时间为当前时间
})
echarts.use([
--
Gitee
From 4547fbf2ce99cdd9a1a5bc0039333864109c96d0 Mon Sep 17 00:00:00 2001
From: alwayssuper <191763414@qq.com>
Date: Thu, 27 Feb 2025 10:53:19 +0800
Subject: [PATCH 08/10] feat:iothome
---
src/views/iot/home/index.vue | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/src/views/iot/home/index.vue b/src/views/iot/home/index.vue
index f92472938..f20df3a4e 100644
--- a/src/views/iot/home/index.vue
+++ b/src/views/iot/home/index.vue
@@ -14,7 +14,7 @@
今日新增
- ↑ 0
+ ↑ {{ statsData.categoryTodayTotal }}
@@ -30,7 +30,7 @@
今日新增
- ↑ 0
+ ↑ {{ statsData.productTodayTotal }}
@@ -46,7 +46,7 @@
今日新增
- ↑ 0
+ ↑ {{ statsData.deviceTodayTotal }}
今日新增
- ↑ 0
+ ↑ {{ statsData.reportTodayTotal }}
@@ -192,6 +192,10 @@ const statsData = ref({
productTotal: 0,
deviceTotal: 0,
reportTotal: 0,
+ categoryTodayTotal: 0,
+ productTodayTotal: 0,
+ deviceTodayTotal: 0,
+ reportTodayTotal: 0,
onlineTotal: 0,
offlineTotal: 0,
neverOnlineTotal: 0,
--
Gitee
From 5137b4a4cb22f2561dd1adb9c86798d2778bdc2d Mon Sep 17 00:00:00 2001
From: alwayssuper <191763414@qq.com>
Date: Fri, 28 Feb 2025 15:20:28 +0800
Subject: [PATCH 09/10] home
---
src/api/iot/statistics/index.ts | 42 ++++++++++++--
src/views/iot/home/index.vue | 99 +++++++++++++++++++--------------
2 files changed, 95 insertions(+), 46 deletions(-)
diff --git a/src/api/iot/statistics/index.ts b/src/api/iot/statistics/index.ts
index 56d8e04fc..707ca48f8 100644
--- a/src/api/iot/statistics/index.ts
+++ b/src/api/iot/statistics/index.ts
@@ -1,10 +1,44 @@
import request from '@/config/axios'
+/** 统计数据类型 */
+export interface IotStatisticsSummaryRespVO {
+ productCategoryCount: number
+ productCount: number
+ deviceCount: number
+ deviceMessageCount: number
+ productCategoryTodayCount: number
+ productTodayCount: number
+ deviceTodayCount: number
+ deviceMessageTodayCount: number
+ deviceOnlineCount: number
+ deviceOfflineCount: number
+ deviceInactiveCount: number
+ productCategoryDeviceCounts: Record