From bc89828f10d0731f6120bc7d87d6d7c29164612a Mon Sep 17 00:00:00 2001
From: Wangxin <wangxin@icanag.com>
Date: Fri, 31 Oct 2025 23:00:31 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90web=E3=80=91=20=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5=E5=9F=BA=E6=9C=AC=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ALOps_sys_fe/alops-ui/src/api/index/index.js |   9 +
 ALOps_sys_fe/alops-ui/src/views/index.vue    | 611 ++++++++++++-------
 2 files changed, 394 insertions(+), 226 deletions(-)

diff --git a/ALOps_sys_fe/alops-ui/src/api/index/index.js b/ALOps_sys_fe/alops-ui/src/api/index/index.js
index 92081fa3..197e5d9e 100644
--- a/ALOps_sys_fe/alops-ui/src/api/index/index.js
+++ b/ALOps_sys_fe/alops-ui/src/api/index/index.js
@@ -19,6 +19,15 @@ export function statistic(query) {
   })
 }
 
+// 楼层统计数据
+export function floorStatistic(query) {
+  return request({
+    url: '/device/files/floorStatistic',
+    method: 'get',
+    params: query
+  })
+}
+
 // 统计预警信息次数
 export function alertMessageTimes(query) {
   return request({
diff --git a/ALOps_sys_fe/alops-ui/src/views/index.vue b/ALOps_sys_fe/alops-ui/src/views/index.vue
index b1a2cda1..1d66dfa7 100644
--- a/ALOps_sys_fe/alops-ui/src/views/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/index.vue
@@ -1,235 +1,237 @@
-<template>
-    <div id="app" class="dashboard" style="overflow-x: hidden;">
-        
-        <div class="header">
-            <h1>唐山市设备监控中心大屏 - 智能管理版</h1>
-            <div class="time-display">{{ currentTime }}</div>
-        </div>
-        
-        <div class="main-content">
-            <!-- 左侧面板 -->
-            <div class="left-panel">
-                <div class="panel">
-                    <div class="panel-title">
-                        设备状态监控
-                        <div class="panel-actions">
-                            <div class="panel-btn" @click="refreshDeviceStatus">刷新</div>
+<template class="">
+    <div class="index-box">
+        <div id="app" class="dashboard" style="overflow-x: hidden;">
+            
+            <div class="header">
+                <h1>唐山市设备监控中心大屏 - 智能管理版</h1>
+                <div class="time-display">{{ currentTime }}</div>
+            </div>
+            
+            <div class="main-content">
+                <!-- 左侧面板 -->
+                <div class="left-panel">
+                    <div class="panel">
+                        <div class="panel-title">
+                            设备状态监控
+                            <div class="panel-actions">
+                                <div class="panel-btn" @click="refreshDeviceStatus">刷新</div>
+                            </div>
+                        </div>
+                        <div class="device-list" style="height: calc(100% - 50px); overflow-y: auto;">
+                            <div v-for="device in deviceStatus || []" 
+                                :key="device.id || Math.random()" 
+                                class="device-item"
+                                @click="showDeviceDetail(device)">
+                                <div :class="['device-status', `status-${device.status || 'normal'}`]"></div>
+                                <div class="device-name">{{ device.equManuName || device.name || '未知设备' }}</div>
+                                <div class="device-value">{{ device.cpuUtilization || 0 }}%</div>
+                            </div>
                         </div>
                     </div>
-                    <div class="device-list" style="height: calc(100% - 50px); overflow-y: auto;">
-                        <div v-for="device in deviceStatus || []" 
-                             :key="device.id || Math.random()" 
-                             class="device-item"
-                             @click="showDeviceDetail(device)">
-                            <div :class="['device-status', `status-${device.status || 'normal'}`]"></div>
-                            <div class="device-name">{{ device.equManuName || device.name || '未知设备' }}</div>
-                            <div class="device-value">{{ device.cpuUtilization || 0 }}%</div>
+                    <div class="panel">
+                        <div class="panel-title">
+                            楼层设备分布情况
+                        </div>
+                        <div class="floor-device-container">
+                            <div class="floor-device-grid">
+                                <div v-for="floor in floorDeviceDistribution" 
+                                    :key="floor.level" 
+                                    class="floor-device-card">
+                                    <div class="floor-level">{{ floor.floor }}</div>
+                                    <div class="floor-count">{{ floor.count }}</div>
+                                </div>
+                            </div>
                         </div>
                     </div>
+                    
                 </div>
-                <div class="panel">
-                    <div class="panel-title">
-                        楼层设备分布情况
-                    </div>
-                    <div class="floor-device-container">
-                        <div class="floor-device-grid">
-                            <div v-for="floor in floorDeviceDistribution" 
-                                 :key="floor.level" 
-                                 class="floor-device-card">
-                                <div class="floor-level">{{ floor.level }}层</div>
-                                <div class="floor-count">{{ floor.count }}台</div>
+                <!-- 右侧面板 -->
+                <div class="right-panel">                
+                    
+                    <div class="panel">
+                        <div class="panel-title">设备信息统计</div>
+                        <div class="device-stats-container">
+                            <div class="device-stat-item">
+                                <div class="device-stat-value">{{ totalDevices }}</div>
+                                <div class="device-stat-label">设备总数</div>
+                            </div>
+                            <div class="device-stat-item">
+                                <div class="device-stat-value">{{ onlineDevices }}</div>
+                                <div class="device-stat-label">在线设备数</div>
                             </div>
                         </div>
+                        <div class="chart-container" ref="pieChart"></div>
                     </div>
-                </div>
-                
-            </div>
-            <!-- 右侧面板 -->
-            <div class="right-panel">                
-                
-                <div class="panel">
-                    <div class="panel-title">设备类型分布</div>
-                    <div class="device-stats-container">
-                        <div class="device-stat-item">
-                            <div class="device-stat-value">{{ totalDevices }}</div>
-                            <div class="device-stat-label">设备总数</div>
+                    
+                    <div class="panel">
+                        <div class="panel-title">
+                            预警信息统计
                         </div>
-                        <div class="device-stat-item">
-                            <div class="device-stat-value">{{ onlineDevices }}</div>
-                            <div class="device-stat-label">在线设备数</div>
+                        <div class="warning-stats">
+                            <div class="warning-row">
+                                <div class="stat-item time-item" @click="filterByWarningLevel('annual')">
+                                    <div class="stat-value stat-annual">{{ warningStats.annual }}</div>
+                                    <div class="stat-label">年度预警</div>
+                                </div>
+                                <div class="stat-item time-item" @click="filterByWarningLevel('monthly')">
+                                    <div class="stat-value stat-monthly">{{ warningStats.monthly }}</div>
+                                    <div class="stat-label">月度预警</div>
+                                </div>
+                            </div>
+                            <div class="warning-row">
+                                <div class="stat-item level-item" @click="filterByWarningLevel('level1')">
+                                    <div class="stat-value stat-level1">{{ warningStats.level1 }}</div>
+                                    <div class="stat-label">1级预警</div>
+                                </div>
+                                <div class="stat-item level-item" @click="filterByWarningLevel('level2')">
+                                    <div class="stat-value stat-level2">{{ warningStats.level2 }}</div>
+                                    <div class="stat-label">2级预警</div>
+                                </div>
+                                <div class="stat-item level-item" @click="filterByWarningLevel('level3')">
+                                    <div class="stat-value stat-level3">{{ warningStats.level3 }}</div>
+                                    <div class="stat-label">3级预警</div>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    <div class="chart-container" ref="pieChart"></div>
                 </div>
                 
-                <div class="panel">
-                    <div class="panel-title">
-                        预警信息统计
-                    </div>
-                    <div class="warning-stats">
-                        <div class="warning-row">
-                            <div class="stat-item time-item" @click="filterByWarningLevel('annual')">
-                                <div class="stat-value stat-annual">{{ warningStats.annual }}</div>
-                                <div class="stat-label">年度预警</div>
-                            </div>
-                            <div class="stat-item time-item" @click="filterByWarningLevel('monthly')">
-                                <div class="stat-value stat-monthly">{{ warningStats.monthly }}</div>
-                                <div class="stat-label">月度预警</div>
-                            </div>
+                <!-- 中间面板 - 楼层房间布局展示 -->
+                <div class="center-panel">
+                    <div class="panel">
+                        <div class="panel-title">
+                            近期预警信息
                         </div>
-                        <div class="warning-row">
-                            <div class="stat-item level-item" @click="filterByWarningLevel('level1')">
-                                <div class="stat-value stat-level1">{{ warningStats.level1 }}</div>
-                                <div class="stat-label">1级预警</div>
+                        <el-scrollbar class="warning-scrollbar">
+                            <div v-for="warning in filteredWarnings" 
+                                :key="warning.id" 
+                                class="warning-item"
+                                @click="showDeviceDetail(warning)">
+                                <div class="warning-header">
+                                    <span :class="['warning-type', `level-${warning.displayLevel}`]">{{ warning.name }}</span>
+                                </div>
+                                <div class="warning-time">预警时间: {{ warning.time }}</div>
+                                <div class="warning-position">设备位置: {{ warning.location }}</div>
+                                <div class="warning-detail">预警信息: {{ warning.ruleName }}</div>
                             </div>
-                            <div class="stat-item level-item" @click="filterByWarningLevel('level2')">
-                                <div class="stat-value stat-level2">{{ warningStats.level2 }}</div>
-                                <div class="stat-label">2级预警</div>
-                            </div>
-                            <div class="stat-item level-item" @click="filterByWarningLevel('level3')">
-                                <div class="stat-value stat-level3">{{ warningStats.level3 }}</div>
-                                <div class="stat-label">3级预警</div>
-                            </div>
-                        </div>
+                        </el-scrollbar>
                     </div>
                 </div>
+                
             </div>
             
-            <!-- 中间面板 - 楼层房间布局展示 -->
-            <div class="center-panel">
-                <div class="panel">
-                    <div class="panel-title">
-                        近期预警信息
-                    </div>
-                    <el-scrollbar class="warning-scrollbar">
-                        <div v-for="warning in filteredWarnings" 
-                             :key="warning.id" 
-                             class="warning-item"
-                             @click="showDeviceDetail(warning)">
-                            <div class="warning-header">
-                                <span :class="['warning-type', `level-${warning.level}`]">{{ warning.name }}</span>
-                            </div>
-                            <div class="warning-time">预警时间: {{ warning.time }}</div>
-                            <div class="warning-position">设备位置: {{ warning.location }}</div>
-                            <div class="warning-detail">设备编号 {{ warning.deviceId }} 设备名称{{ warning.deviceName }}{{ warning.description }}</div>
-                        </div>
-                    </el-scrollbar>
-                </div>
+            <div class="footer">
+                <div>唐山市监控系统 v4.0 - 智能管理版</div>
+                <div>最后更新: <span class="update-time">{{ updateTime }}</span></div>
+                <div>监控设备总数: {{ totalDevices }} 台 | 在线: {{ onlineDevices }} 台</div>
             </div>
             
-        </div>
-        
-        <div class="footer">
-            <div>唐山市监控系统 v4.0 - 智能管理版</div>
-            <div>最后更新: <span class="update-time">{{ updateTime }}</span></div>
-            <div>监控设备总数: {{ totalDevices }} 台 | 在线: {{ onlineDevices }} 台</div>
-        </div>
-        
-        <!-- 设备详情模态框 -->
-        <div class="modal-overlay" v-if="showDeviceModal">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h2 class="modal-title">设备详情 - {{ selectedDevice.name }}</h2>
-                    <button class="modal-close" @click="closeDeviceModal">&times;</button>
-                </div>
-                <div class="modal-body">
-                    <div class="device-detail-grid">
-                        <div class="detail-section">
-                            <h3>基本信息</h3>
-                            <div class="detail-item">
-                                <span class="detail-label">设备名称:</span>
-                                <span class="detail-value">{{ selectedDevice.name }}</span>
-                            </div>
-                            <div class="detail-item">
-                                <span class="detail-label">设备ID:</span>
-                                <span class="detail-value">{{ selectedDevice.id }}</span>
-                            </div>
-                            <div class="detail-item">
-                                <span class="detail-label">所在位置:</span>
-                                <span class="detail-value">{{ selectedDevice.location || '未知' }}</span>
-                            </div>
-                            <div class="detail-item">
-                                <span class="detail-label">设备类型:</span>
-                                <span class="detail-value">{{ selectedDevice.type || '服务器' }}</span>
+            <!-- 设备详情模态框 -->
+            <div class="modal-overlay" v-if="showDeviceModal">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h2 class="modal-title">设备详情 - {{ selectedDevice.name }}</h2>
+                        <button class="modal-close" @click="closeDeviceModal">&times;</button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="device-detail-grid">
+                            <div class="detail-section">
+                                <h3>基本信息</h3>
+                                <div class="detail-item">
+                                    <span class="detail-label">设备名称:</span>
+                                    <span class="detail-value">{{ selectedDevice.name }}</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">设备ID:</span>
+                                    <span class="detail-value">{{ selectedDevice.id }}</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">所在位置:</span>
+                                    <span class="detail-value">{{ selectedDevice.location || '未知' }}</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">设备类型:</span>
+                                    <span class="detail-value">{{ selectedDevice.type || '服务器' }}</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">设备状态:</span>
+                                    <span class="detail-value" :style="{color: selectedDevice.status === '1' ? 'green' : 'red'}">
+                                        {{ getStatusText(selectedDevice.status) }}
+                                    </span>
+                                </div>
+                                <!-- <div class="detail-item">
+                                    <span class="detail-label">当前值:</span>
+                                    <span class="detail-value">{{ selectedDevice.value || 'N/A' }}</span>
+                                </div> -->
                             </div>
-                            <div class="detail-item">
-                                <span class="detail-label">设备状态:</span>
-                                <span class="detail-value" :style="{color: selectedDevice.status === '1' ? 'green' : 'red'}">
-                                    {{ getStatusText(selectedDevice.status) }}
-                                </span>
+                            
+                            <div class="detail-section">
+                                <h3>运行状态</h3>
+                                <div class="detail-item">
+                                    <span class="detail-label">运行时间:</span>
+                                    <span class="detail-value">{{ formatDuration(selectedDevice.contWorkPeriod) || '0天' }}</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">CPU使用率:</span>
+                                    <span class="detail-value">{{ selectedDevice.cpuUtilization || '0' }}%</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">内存使用率:</span>
+                                    <span class="detail-value">{{ selectedDevice.memoryUtilization || '0' }}%</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">风扇转速:</span>
+                                    <span class="detail-value">{{ selectedDevice.fanSpeed || '0' }}'RPM/s'</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">温度:</span>
+                                    <span class="detail-value">{{ selectedDevice.temperature || '0' }}°C</span>
+                                </div>
+                                <!-- <div class="detail-item">
+                                    <span class="detail-label">最后维护:</span>
+                                    <span class="detail-value">{{ selectedDevice.lastMaintenance || '2024-09-15' }}</span>
+                                </div> -->
+                                
+                                <div class="control-buttons">
+                                    <button class="control-btn btn-restart" @click="controlDevice('restart')">重启设备</button>
+                                    <button class="control-btn btn-shutdown" @click="controlDevice('shutdown')">关机</button>
+                                    <button class="control-btn btn-reset" @click="controlDevice('reset')">重置配置</button>
+                                </div>
                             </div>
-                            <!-- <div class="detail-item">
-                                <span class="detail-label">当前值:</span>
-                                <span class="detail-value">{{ selectedDevice.value || 'N/A' }}</span>
-                            </div> -->
                         </div>
                         
                         <div class="detail-section">
-                            <h3>运行状态</h3>
-                            <div class="detail-item">
-                                <span class="detail-label">运行时间:</span>
-                                <span class="detail-value">{{ formatDuration(selectedDevice.contWorkPeriod) || '0天' }}</span>
-                            </div>
-                            <div class="detail-item">
-                                <span class="detail-label">CPU使用率:</span>
-                                <span class="detail-value">{{ selectedDevice.cpuUtilization || '0' }}%</span>
-                            </div>
-                            <div class="detail-item">
-                                <span class="detail-label">内存使用率:</span>
-                                <span class="detail-value">{{ selectedDevice.memoryUtilization || '0' }}%</span>
-                            </div>
-                            <div class="detail-item">
-                                <span class="detail-label">风扇转速:</span>
-                                <span class="detail-value">{{ selectedDevice.fanSpeed || '0' }}'RPM/s'</span>
-                            </div>
-                            <div class="detail-item">
-                                <span class="detail-label">温度:</span>
-                                <span class="detail-value">{{ selectedDevice.temperature || '0' }}°C</span>
-                            </div>
-                            <!-- <div class="detail-item">
-                                <span class="detail-label">最后维护:</span>
-                                <span class="detail-value">{{ selectedDevice.lastMaintenance || '2024-09-15' }}</span>
-                            </div> -->
-                            
-                            <div class="control-buttons">
-                                <button class="control-btn btn-restart" @click="controlDevice('restart')">重启设备</button>
-                                <button class="control-btn btn-shutdown" @click="controlDevice('shutdown')">关机</button>
-                                <button class="control-btn btn-reset" @click="controlDevice('reset')">重置配置</button>
-                            </div>
+                            <h3>历史数据
+                                <div class="search-controls">
+                                    <input type="date" class="date-input" v-model="historyStartDate">
+                                    <span>至</span>
+                                    <input type="date" class="date-input" v-model="historyEndDate">
+                                    <button class="panel-btn" @click="loadHistoryData">查询</button>
+                                </div>
+                            </h3>
+                            <div class="history-chart" ref="historyChart"></div>
                         </div>
                     </div>
-                    
-                    <div class="detail-section">
-                        <h3>历史数据
-                            <div class="search-controls">
-                                <input type="date" class="date-input" v-model="historyStartDate">
-                                <span>至</span>
-                                <input type="date" class="date-input" v-model="historyEndDate">
-                                <button class="panel-btn" @click="loadHistoryData">查询</button>
-                            </div>
-                        </h3>
-                        <div class="history-chart" ref="historyChart"></div>
-                    </div>
                 </div>
             </div>
-        </div>
-        
-        <!-- 房间设备列表模态框 -->
-        <div class="modal-overlay" v-if="showRoomModal">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h2 class="modal-title">房间设备 - {{ selectedRoom.name }}</h2>
-                    <button class="modal-close" @click="closeRoomModal">&times;</button>
-                </div>
-                <div class="modal-body">
-                    <div class="device-list">
-                        <div v-for="device in getRoomDevices()" 
-                             :key="device.id" 
-                             class="device-item"
-                             @click="showDeviceDetail(device)">
-                            <div :class="['device-status', `status-${device.status}`]"></div>
-                            <div class="device-name">{{ device.name }}</div>
-                            <div class="device-value">{{ device.value || 'N/A' }}</div>
+            
+            <!-- 房间设备列表模态框 -->
+            <div class="modal-overlay" v-if="showRoomModal">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h2 class="modal-title">房间设备 - {{ selectedRoom.name }}</h2>
+                        <button class="modal-close" @click="closeRoomModal">&times;</button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="device-list">
+                            <div v-for="device in getRoomDevices()" 
+                                :key="device.id" 
+                                class="device-item"
+                                @click="showDeviceDetail(device)">
+                                <div :class="['device-status', `status-${device.status}`]"></div>
+                                <div class="device-name">{{ device.name }}</div>
+                                <div class="device-value">{{ device.value || 'N/A' }}</div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -240,6 +242,7 @@
 
 <script>
 import { getInfo, historyQuery } from "@/api/inMonitoring/devicesState"
+import { byEquType, statistic, alertMessageTimes, floorStatistic } from "@/api/index/index"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
 import "splitpanes/dist/splitpanes.css"
 import * as echarts from 'echarts'
@@ -283,18 +286,7 @@ export default {
                 ],
                 currentFloor: 1,
                 floorDeviceDistribution: [
-                    { level: 1, count: 15 },
-                    { level: 2, count: 18 },
-                    { level: 3, count: 22 },
-                    { level: 4, count: 14 },
-                    { level: 5, count: 16 },
-                    { level: 6, count: 13 },
-                    { level: 7, count: 17 },
-                    { level: 8, count: 11 },
-                    { level: 9, count: 12 },
-                    { level: 10, count: 9 },
-                    { level: 11, count: 14 },
-                    { level: 12, count: 16 }
+                    { floor: "1层", count: 6 },
                 ],
                 floors: [
                     {
@@ -401,7 +393,13 @@ export default {
                 barChart: null,
                 pieChart: null,
                 historyChart: null,
-                highlightedDevice: null
+                highlightedDevice: null,
+                totalDevices: 0,
+                onlineDevices: 0,
+                deviceTypeData: [],
+                alertStatistics: {},
+                alertTimes: {},
+                floorDeviceDistribution: []
     }},
             computed: {
                 // 直接使用deviceStatus，不再需要过滤计算属性
@@ -410,10 +408,32 @@ export default {
                     if (this.warningLevelFilter === 'all') {
                         return this.deviceWarnings;
                     }
-                    return this.deviceWarnings.filter(warning => 
-                        (this.warningLevelFilter === 'error' && warning.level === 'error') ||
-                        (this.warningLevelFilter === 'warning' && warning.level === 'warning')
-                    );
+                    
+                    // 根据不同的过滤条件进行处理
+                    switch (this.warningLevelFilter) {
+                        case 'level1':
+                            // 过滤1级预警（level为1）
+                            return this.deviceWarnings.filter(warning => warning.level === 1 || warning.level === '1');
+                        case 'level2':
+                            // 过滤2级预警（level为2）
+                            return this.deviceWarnings.filter(warning => warning.level === 2 || warning.level === '2');
+                        case 'level3':
+                            // 过滤3级预警（level为3）
+                            return this.deviceWarnings.filter(warning => warning.level === 3 || warning.level === '3' || warning.level === 'error');
+                        case 'annual':
+                        case 'monthly':
+                            // 按时间范围过滤（这里可以根据实际需求实现时间过滤逻辑）
+                            // 暂时返回所有数据
+                            return this.deviceWarnings;
+                        case 'error':
+                            // 过滤错误级别的预警
+                            return this.deviceWarnings.filter(warning => warning.level > 2 || warning.level === 'error');
+                        case 'warning':
+                            // 过滤警告级别的预警
+                            return this.deviceWarnings.filter(warning => warning.level <= 2 || warning.level === 'warning');
+                        default:
+                            return this.deviceWarnings;
+                    }
                 }
             },
             mounted() {
@@ -440,6 +460,15 @@ export default {
                 // 首次进入时自动加载设备状态数据
                 this.refreshDeviceStatus();
                 
+                // 加载设备类型统计数据
+                this.loadDeviceTypeData();
+                // 加载预警统计数据
+                this.loadAlertStatistics();
+                // 加载预警次数统计
+                this.loadAlertTimes();
+                // 加载楼层设备分布
+                this.loadFloorDeviceDistribution();
+                
                 // 定期更新设备状态数据（每分钟更新一次）
                 setInterval(() => {
                     this.refreshDeviceStatus();
@@ -480,7 +509,140 @@ export default {
                     }
                 },
                 
+                loadDeviceTypeData() {
+                    byEquType().then(response => {
+                        const data = response.data || {};
+                        
+                        // 直接从返回数据中获取设备总数和在线设备数
+                        this.totalDevices = data.totalCount || 0;
+                        this.onlineDevices = data.onlineCount || 0;
+                        
+                        // 准备饼图数据，从list数组中提取
+                        const colors = ['#4dabff', '#62f7ff', '#ffa726', '#4CAF50', '#a0aec0', '#ff6b6b', '#95e1d3'];
+                        this.deviceTypeData = (data.list || []).map((item, index) => ({
+                            name: item.equTypeName || '未知类型',
+                            value: item.count || 0,
+                            itemStyle: { color: colors[index % colors.length] }
+                        }));
+                        
+                        // 更新饼图
+                        this.initPieChart();
+                    }).catch(error => {
+                        console.error('获取设备类型数据失败:', error);
+                    });
+                },
+                
+                // 加载预警统计数据
+                loadAlertStatistics() {
+                    statistic().then(response => {
+                        this.alertStatistics = response.data || {};
+                        
+                        // 处理rows数据并更新deviceWarnings
+                        if (response.rows && Array.isArray(response.rows)) {
+                            this.deviceWarnings = response.rows.map((row, index) => ({
+                                id: row.id || index + 1,
+                                name: row.name || '未命名设备',
+                                level: row.level, // 保留原始的level值
+                                displayLevel: row.level > 2 ? 'error' : 'warning', // 用于显示的级别
+                                time: row.occurTime ? this.formatOccurTime(row.occurTime) : '',
+                                location: row.location || '未知位置',
+                                ruleName: row.ruleName || '-',
+                                message: row.message || '-'
+                            }));
+                        }
+                    }).catch(error => {
+                        console.error('获取预警统计数据失败:', error);
+                    });
+                },
+                
+                // 格式化occurTime时间
+                formatOccurTime(timeString) {
+                    if (!timeString) return '';
+                    const date = new Date(timeString);
+                    if (isNaN(date.getTime())) return timeString;
+                    return date.toLocaleString('zh-CN', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit',
+                        hour12: false
+                    });
+                },
+                
+                // 加载预警次数统计
+                loadAlertTimes() {
+                    alertMessageTimes().then(response => {
+                        this.alertTimes = response.data || {};
+                        
+                        // 根据接口返回的数据更新warningStats
+                        if (response.code === 200 && response.data) {
+                            const data = response.data;
+                            
+                            // 更新年度和月度预警数据
+                            this.warningStats.annual = data.yearCount || 0;
+                            this.warningStats.monthly = data.monthCount || 0;
+                            
+                            // 从levelCount中提取1-3级预警数据
+                            if (data.levelCount && Array.isArray(data.levelCount)) {
+                                // 初始化1-3级预警数据为0
+                                this.warningStats.level1 = 0;
+                                this.warningStats.level2 = 0;
+                                this.warningStats.level3 = 0;
+                                
+                                // 根据level字段更新对应级别的数据
+                                data.levelCount.forEach(item => {
+                                    if (item.level === '1') {
+                                        this.warningStats.level1 = item.count || 0;
+                                    } else if (item.level === '2') {
+                                        this.warningStats.level2 = item.count || 0;
+                                    } else if (item.level === '3') {
+                                        this.warningStats.level3 = item.count || 0;
+                                    }
+                                });
+                            }
+                        }
+                    }).catch(error => {
+                        console.error('获取预警次数数据失败:', error);
+                    });
+                },
+                
+                // 加载楼层设备分布
+                loadFloorDeviceDistribution() {
+                    floorStatistic().then(response => {
+                        // 创建1-12层的默认数组，初始count为0，使用floor字段存储楼层名称
+                        const floorData = [];
+                        for (let i = 1; i <= 12; i++) {
+                            floorData.push({ floor: i + '层', count: 0 });
+                        }
+                        
+                        // 如果API返回了数据，更新对应楼层的count值
+                        if (response && response.code === 200 && response.data && Array.isArray(response.data)) {
+                            response.data.forEach(item => {
+                                // 查找对应的楼层索引
+                                const index = floorData.findIndex(f => f.floor === item.floor);
+                                if (index !== -1) {
+                                    floorData[index].count = item.count || 0;
+                                }
+                            });
+                        }
+                        
+                        this.floorDeviceDistribution = floorData;
+                    }).catch(error => {
+                        console.error('获取楼层设备分布失败:', error);
+                        // 出错时仍显示1-12层，count为0
+                        const floorData = [];
+                        for (let i = 1; i <= 12; i++) {
+                            floorData.push({ floor: i + '层', count: 0 });
+                        }
+                        this.floorDeviceDistribution = floorData;
+                    });
+                },
+                
                 initPieChart() {
+                    if (!this.$refs.pieChart) return;
+                    
                     this.pieChart = echarts.init(this.$refs.pieChart);
                     
                     const option = {
@@ -523,12 +685,8 @@ export default {
                                 labelLine: {
                                     show: false
                                 },
-                                data: [
-                                    { value: 35, name: '服务器', itemStyle: { color: '#4dabff' } },
-                                    { value: 25, name: '网络设备', itemStyle: { color: '#62f7ff' } },
-                                    { value: 18, name: '存储设备', itemStyle: { color: '#ffa726' } },
-                                    { value: 15, name: '安全设备', itemStyle: { color: '#4CAF50' } },
-                                    { value: 7, name: '其他设备', itemStyle: { color: '#a0aec0' } }
+                                data: this.deviceTypeData.length > 0 ? this.deviceTypeData : [
+                                    { value: 0, name: '暂无数据', itemStyle: { color: '#a0aec0' } }
                                 ]
                             }
                         ]
@@ -903,10 +1061,11 @@ export default {
             font-family: "Microsoft YaHei", sans-serif;
         }
         
-        .dashboard {
+        .index-box {
             background-color: #0a1633;
             color: #e6e6e6;
             overflow: hidden;
+            padding: 1.5vh 1.5vw;
         }
         
         .dashboard {