From 49e2b7ea866695957633855f71f9e2f943b11ec7 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 04 三月 2026 17:29:03 +0800
Subject: [PATCH] 2026.3.4
---
src/views/monitor/DataDashboard.vue | 155 +++++++++++++++++++++++++++++++++++----------------
1 files changed, 107 insertions(+), 48 deletions(-)
diff --git a/src/views/monitor/DataDashboard.vue b/src/views/monitor/DataDashboard.vue
index 4e266ec..3292858 100644
--- a/src/views/monitor/DataDashboard.vue
+++ b/src/views/monitor/DataDashboard.vue
@@ -1,27 +1,31 @@
-<!-- e:\VSprojects\fume-supervision-vue\src\views\monitor\DataDashboard.vue -->
<template>
<el-container class="data-dashboard">
<el-main>
- <!-- 璁惧鍦ㄧ嚎鎯呭喌鍖哄煙 -->
- <DeviceStatus
- :online-count="onlineCount"
- :offline-count="offlineCount"
- :normal-count="normalCount"
- :fault-count="faultCount"
- />
-
- <!-- 璁惧瀹炴椂鏁版嵁鍖哄煙 -->
- <RealTimeData :current-device="currentDevice" :hourly-data="hourlyData" />
-
- <!-- 鍒嗗尯鏁版嵁鎺掑悕鍖哄煙 -->
- <DistrictRanking
- :selected-month="selectedMonth"
- :ranking-type="rankingType"
- :ranking-data="rankingData"
- :sorted-ranking-data="sortedRankingData"
- @month-change="handleMonthChange"
- @type-change="handleTypeChange"
- />
+ <div class="grid-container">
+ <div class="left-section">
+ <!-- 璁惧鍦ㄧ嚎鎯呭喌鍖哄煙 -->
+ <DeviceStatus
+ :online-count="onlineCount"
+ :offline-count="offlineCount"
+ :normal-count="normalCount"
+ :fault-count="faultCount"
+ />
+ <!-- 鍒嗗尯鏁版嵁鎺掑悕鍖哄煙 -->
+ <DistrictRanking
+ style="flex: 1"
+ :selected-month="selectedMonth"
+ :ranking-type="rankingType"
+ :ranking-data="rankingData"
+ :sorted-ranking-data="sortedRankingData"
+ @month-change="handleMonthChange"
+ @type-change="handleTypeChange"
+ />
+ </div>
+ <div class="right-section">
+ <!-- 璁惧瀹炴椂鏁版嵁鍖哄煙 -->
+ <RealTimeData style="flex: 1" :devices="devices" />
+ </div>
+ </div>
<!-- 鍦ㄧ嚎璁惧鍜屽簵閾烘竻鍗曞尯鍩� -->
<ShopList
@@ -58,8 +62,7 @@
faultCount: 0,
// 璁惧瀹炴椂鏁版嵁
- currentDevice: null,
- hourlyData: [],
+ devices: [],
// 鍒嗗尯鏁版嵁鎺掑悕
selectedMonth: '2023-12',
@@ -147,45 +150,80 @@
updateRealTimeData() {
// 妯℃嫙鏁版嵁 - 瀹為檯搴斾粠API鑾峰彇
- const devices = [
+ this.devices = [
{
deviceId: 'DEV-001',
supplier: '渚涘簲鍟咥',
- 娌圭儫娴撳害: (Math.random() * 2).toFixed(2),
- 椋庢満鐢垫祦: (Math.random() * 5 + 1).toFixed(2),
- 鍑�鍖栧櫒鐢垫祦: (Math.random() * 3 + 0.5).toFixed(2),
+ status: '姝ｅ父',
+ monitorTime: new Date().toLocaleString(),
+ smokeDensity: (Math.random() * 2).toFixed(2),
+ fanCurrent: (Math.random() * 5 + 1).toFixed(2),
+ purifierCurrent: (Math.random() * 3 + 0.5).toFixed(2),
+ hourlyData: this.generateHourlyData(),
+ },
+ {
+ deviceId: 'DEV-002',
+ supplier: '渚涘簲鍟咮',
+ status: '姝ｅ父',
+ monitorTime: new Date().toLocaleString(),
+ smokeDensity: (Math.random() * 2).toFixed(2),
+ fanCurrent: (Math.random() * 5 + 1).toFixed(2),
+ purifierCurrent: (Math.random() * 3 + 0.5).toFixed(2),
+ hourlyData: this.generateHourlyData(),
+ },
+ {
+ deviceId: 'DEV-003',
+ supplier: '渚涘簲鍟咰',
+ status: '寮傚父',
+ monitorTime: new Date().toLocaleString(),
+ smokeDensity: (Math.random() * 15 + 5).toFixed(2),
+ fanCurrent: (Math.random() * 3 + 4).toFixed(2),
+ purifierCurrent: (Math.random() * 2 + 2).toFixed(2),
+ hourlyData: this.generateHourlyData(),
+ },
+ {
+ deviceId: 'DEV-004',
+ supplier: '渚涘簲鍟咲',
+ status: '寮傚父',
+ monitorTime: new Date().toLocaleString(),
+ smokeDensity: (Math.random() * 15 + 5).toFixed(2),
+ fanCurrent: (Math.random() * 3 + 4).toFixed(2),
+ purifierCurrent: (Math.random() * 2 + 2).toFixed(2),
+ hourlyData: this.generateHourlyData(),
},
]
+ },
- this.currentDevice = devices[0]
-
+ generateHourlyData() {
// 鐢熸垚妯℃嫙鐨勮繎涓�灏忔椂鏁版嵁
- this.hourlyData = []
+ const hourlyData = []
for (let i = 59; i >= 0; i--) {
const time = new Date()
time.setMinutes(time.getMinutes() - i)
- this.hourlyData.push({
+ hourlyData.push({
time: time.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
- 娌圭儫娴撳害: (Math.random() * 2).toFixed(2),
- 椋庢満鐢垫祦: (Math.random() * 5 + 1).toFixed(2),
- 鍑�鍖栧櫒鐢垫祦: (Math.random() * 3 + 0.5).toFixed(2),
+ smokeDensity: (Math.random() * 2).toFixed(2),
+ fanCurrent: (Math.random() * 5 + 1).toFixed(2),
+ purifierCurrent: (Math.random() * 3 + 0.5).toFixed(2),
})
}
+ return hourlyData
},
updateRankingData() {
// 妯℃嫙鏁版嵁 - 瀹為檯搴斾粠API鑾峰彇
this.rankingData = [
- { name: '涓滃煄鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 0 },
- { name: '瑗垮煄鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: -1 },
- { name: '鏈濋槼鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 1 },
- { name: '娴锋穩鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 0 },
- { name: '涓板彴鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: -2 },
- { name: '鐭虫櫙灞卞尯', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 2 },
- { name: '閫氬窞鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 0 },
- { name: '椤轰箟鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 1 },
- { name: '鏄屽钩鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: -1 },
- { name: '澶у叴鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 0 },
+ { name: '鐜勬鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 0 },
+ { name: '绉︽樊鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: -1 },
+ { name: '寤洪偤鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 1 },
+ { name: '榧撴ゼ鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 0 },
+ { name: '娴﹀彛鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: -2 },
+ { name: '鏍栭湠鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 2 },
+ { name: '闆ㄨ姳鍙板尯', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 0 },
+ { name: '姹熷畞鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 1 },
+ { name: '鍏悎鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: -1 },
+ { name: '婧ф按鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 0 },
+ { name: '楂樻烦鍖�', value: (Math.random() * 1.5 + 0.5).toFixed(2), rankChange: 1 },
]
// 鎺掑簭
@@ -240,14 +278,35 @@
padding: 20px;
}
+.grid-container {
+ display: flex;
+ /* display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: min-content; */
+ gap: 20px;
+}
+
+.left-section {
+ flex: 2;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.right-section {
+ width: 670px;
+ display: flex;
+ flex-direction: column;
+}
+
/* 鍝嶅簲寮忚璁� */
@media (max-width: 768px) {
- .el-row {
- flex-direction: column;
+ .grid-container {
+ grid-template-columns: 1fr;
}
- .el-col {
- width: 100% !important;
+ .left-section,
+ .right-section {
margin-bottom: 10px;
}
}
--
Gitblit v1.9.3