diff --git a/ALOps_sys_fe/alops-ui/src/permission.js b/ALOps_sys_fe/alops-ui/src/permission.js
index e0e32981..8dd24576 100644
--- a/ALOps_sys_fe/alops-ui/src/permission.js
+++ b/ALOps_sys_fe/alops-ui/src/permission.js
@@ -21,12 +21,8 @@ router.beforeEach((to, from, next) => {
     to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
     /* has token*/
     if (to.path === '/login') {
-      // 登录后根据角色重定向到不同主页
-      if (store.getters.roles && store.getters.roles.includes('admin')) {
-        next({ path: '/index_admin' })
-      } else {
-        next({ path: '/' })
-      }
+      // 登录后直接重定向到首页
+      next({ path: '/' })
       NProgress.done()
     } else if (isWhiteList(to.path)) {
       next()
@@ -37,11 +33,10 @@ router.beforeEach((to, from, next) => {
         store.dispatch('user/getInfo').then(() => {
           isRelogin.show = false
           store.dispatch('permission/GenerateRoutes').then(accessRoutes => {
-            // 根据roles权限生成可访问的路由表
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            // 获取角色信息后，判断是跳转到默认路由还是管理员路由
-            const redirectPath = store.getters.roles.includes('admin') ? '/index_admin' : to.path
-            next({ path: redirectPath, replace: true }) // hack方法 确保addRoutes已完成
+            // 动态添加可访问路由表
+            router.addRoutes(accessRoutes)
+            // 统一使用目标路径进行跳转
+            next({ path: to.path, replace: true }) // hack方法 确保addRoutes已完成
           })
         }).catch(err => {
             store.dispatch('user/LogOut').then(() => {
@@ -50,16 +45,7 @@ router.beforeEach((to, from, next) => {
             })
           })
       } else {
-        // 如果访问的是根路径，根据角色重定向
-        if (to.path === '/') {
-          if (store.getters.roles.includes('admin')) {
-            next({ path: '/index_admin', replace: true })
-          } else {
-            next()
-          }
-        } else {
-          next()
-        }
+        next()
       }
     }
   } else {
diff --git a/ALOps_sys_fe/alops-ui/src/router/index.js b/ALOps_sys_fe/alops-ui/src/router/index.js
index 0b076c27..e37394a6 100644
--- a/ALOps_sys_fe/alops-ui/src/router/index.js
+++ b/ALOps_sys_fe/alops-ui/src/router/index.js
@@ -30,32 +30,6 @@ import Layout from '@/layout'
 
 // 公共路由
 export const constantRoutes = [
-  {
-    path: '',
-    component: Layout,
-    redirect: 'index',
-    children: [
-      {
-        path: 'index_admin',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true, roles: ['common'] }
-      }
-    ]
-  },
-  // {
-  //   path: '',
-  //   component: Layout,
-  //   redirect: 'index',
-  //   children: [
-  //     {
-  //       path: 'index_admin',
-  //       component: () => import('@/views/index_1'),
-  //       name: 'IndexAdmin',
-  //       meta: { title: '管理员首页', icon: 'dashboard', affix: true, fullscreen: true }
-  //     }
-  //   ]
-  // },
   {
     path: '/redirect',
     component: Layout,
@@ -96,7 +70,7 @@ export const constantRoutes = [
         path: 'index',
         component: () => import('@/views/index'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true, roles: ['common'] }
+        meta: { title: '首页', icon: 'dashboard', affix: true, fullscreen: true }
       }
     ]
   },
diff --git a/ALOps_sys_fe/alops-ui/src/views/index.vue b/ALOps_sys_fe/alops-ui/src/views/index.vue
index a534e48e..7a379bb5 100644
--- a/ALOps_sys_fe/alops-ui/src/views/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/index.vue
@@ -1,546 +1,1895 @@
 <template>
-  <div class="body">
-    <div class="container">
-        <!-- 上层：三个模块并排 -->
-        <div class="top-section">
-            <!-- 预警信息统计 -->
-            <div class="panel">
-                <div class="card">
-                    <div class="card-header">
-                        <h2 class="card-title"><i class="fas fa-exclamation-triangle"></i> 预警信息统计</h2>
+    <div id="app" class="dashboard">
+        
+        <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="exportWarningData">导出</div>
+                            <div class="panel-btn" @click="showWarningHistory = !showWarningHistory">历史</div>
+                        </div>
                     </div>
-                    <div class="stats-container">
-                        <div class="stat-card" :class="alertMessageData.yearCount == 0?'normal':''">
-                            <div class="stat-label">年预警总数</div>
-                            <div class="stat-value">{{ alertMessageData.yearCount }}</div>
+                    <div class="warning-stats">
+                        <div class="stat-item" @click="filterByWarningLevel('total')">
+                            <div class="stat-value stat-total">{{ warningStats.total }}</div>
+                            <div class="stat-label">总预警数</div>
                         </div>
-                        <div class="stat-card" :class="alertMessageData.monthCount == 0?'normal':''">
-                            <div class="stat-label">月预警总数</div>
-                            <div class="stat-value">{{ alertMessageData.monthCount }}</div>
+                        <div class="stat-item" @click="filterByWarningLevel('high')">
+                            <div class="stat-value stat-high">{{ warningStats.highLevel }}</div>
+                            <div class="stat-label">高级别预警</div>
                         </div>
-                        <!-- 等级预警 -->
-                        <div class="stat-card" :class="i.count == 0?'normal':i.count>10?'warning':''" v-for="i in alertMessageData.levelCount" :key="i.id">
-                            <div class="stat-label">{{ `等级${i.level}预警` }}</div>
-                            <div class="stat-value">{{ i.count }}</div>
+                        <div class="stat-item" @click="filterByWarningLevel('medium')">
+                            <div class="stat-value stat-medium">{{ warningStats.mediumLevel }}</div>
+                            <div class="stat-label">中级别预警</div>
                         </div>
-                        <!-- 设备预警 -->
-                        <div class="stat-card" :class="i.count == 0?'normal':i.count>10?'warning':''" v-for="i in alertMessageData.typeCount" :key="i.id">
-                            <div class="stat-label">{{ `${i.name}预警` }}</div>
-                            <div class="stat-value">{{ i.count }}</div>
+                        <div class="stat-item" @click="filterByWarningLevel('low')">
+                            <div class="stat-value stat-low">{{ warningStats.lowLevel }}</div>
+                            <div class="stat-label">低级别预警</div>
                         </div>
                     </div>
                 </div>
-            </div>
-            
-            <!-- 检测设备信息 -->
-            <div class="panel">
-                <div class="card">
-                    <div class="card-header">
-                        <h2 class="card-title"><i class="fas fa-microchip"></i> 检测设备信息</h2>
+                
+                <div class="panel">
+                    <div class="panel-title">
+                        设备状态监控
+                        <div class="panel-actions">
+                            <div class="panel-btn" @click="refreshDeviceStatus">刷新</div>
+                        </div>
+                    </div>
+                    <div class="device-list">
+                        <div v-for="device in filteredDeviceStatus" 
+                             :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 }}</div>
+                        </div>
                     </div>
-                    <ul class="device-list">
-                        <PieChart height="250px" :chartData="byEquTypeData"/>
-                    </ul>
                 </div>
             </div>
             
-            <!-- 设备预警信息 -->
-            <div class="panel">
-                <div class="card">
-                    <div class="card-header">
-                        <h2 class="card-title"><i class="fas fa-bell"></i> 设备预警信息</h2>
+            <!-- 中间面板 - 楼层房间布局展示 -->
+            <div class="center-panel">
+                <div class="panel">
+                    <div class="panel-title">
+                        楼层房间设备分布监控
+                        <div class="panel-actions">
+                            <div class="panel-btn" @click="toggleAutoSwitch">{{ autoSwitch ? '停止' : '自动' }}切换</div>
+                        </div>
                     </div>
-                    <el-empty description="暂无预警" v-if="alerts.length == 0"></el-empty>
-                    <ul class="device-list" v-infinite-scroll="loadMore" :infinite-scroll-disabled="isLoading || noMore" infinite-scroll-distance="50"  infinite-scroll-delay="300">
-                        <li class="device-item" v-for="alert in alerts" :key="alert.id" :class="alert.status === 'UNHANDLED' ? 'warning' : 'normal'" >
-                            <div class="device-icon">
-                                <i :class="alert.status === 'UNHANDLED' ? 'fas fa-exclamation-circle' : 'fas fa-check-circle'"></i>
+                    <div class="building-container">
+                        <!-- 楼层平面图容器 -->
+                        <div class="floor-plans-container">
+                            <div v-for="floor in floors" 
+                                 :key="floor.level" 
+                                 :class="['floor-plan', { active: currentFloor === floor.level }]">
+                                <h2 class="floor-title">{{ floor.name }}</h2>
+                                <div class="floor-layout">
+                                    <!-- 房间布局 -->
+                                    <div v-for="room in floor.rooms" 
+                                         :key="room.id"
+                                         class="room"
+                                         :style="{
+                                             left: `${room.position.left}%`,
+                                             top: `${room.position.top}%`,
+                                             width: `${room.position.width}%`,
+                                             height: `${room.position.height}%`
+                                         }"
+                                         @click="showRoomDevices(room)">
+                                        <div class="room-label">{{ room.name }}</div>
+                                    </div>
+                                    
+                                    <!-- 设备标记 -->
+                                    <div v-for="device in floor.devices" 
+                                         :key="device.id"
+                                         class="device-marker"
+                                         :class="`device-${device.status}`"
+                                         :style="{
+                                             left: `${device.position.x}%`,
+                                             top: `${device.position.y}%`
+                                         }"
+                                         :title="device.name"
+                                         @click="showDeviceDetail(device)">
+                                    </div>
+                                </div>
                             </div>
-                            <div class="device-info">
-                                <div class="device-name">{{ alert.name }}</div>
-                                <div class="device-details">
-                                    <div>预警时间: {{ parseTime(alert.occurTime) }}</div>
-                                    <div>设备位置: {{ alert.location }}</div>
-                                    <div>预警信息: {{ alert.message }}</div>
+                        </div>
+                        
+                        <!-- 楼层信息面板 -->
+                        <div class="floor-info">
+                            <div class="floor-selector">
+                                <div class="floor-btn" 
+                                     v-for="floor in floors" 
+                                     :key="floor.level"
+                                     :class="{ active: currentFloor === floor.level }"
+                                     @click="switchFloor(floor.level)">
+                                    {{ floor.name }}
                                 </div>
                             </div>
-                            <span :class="alert.status === 'UNHANDLED' ? 'alert-badge' : 'normal-badge'">
-                                {{ '等级'+alert.level }}
-                            </span>
-                        </li>
-                        <p v-if="isLoading">加载中...</p>
-                        <p v-if="noMore">没有更多了</p>
-                    </ul>
+                            <div class="floor-details">
+                                <h3>{{ getCurrentFloor().name }} - 设备分布</h3>
+                                <div class="floor-stats">
+                                    <div class="floor-stat">
+                                        <span class="stat-label">设备总数:</span>
+                                        <span class="stat-value">{{ getCurrentFloor().totalDevices }}</span>
+                                    </div>
+                                    <div class="floor-stat">
+                                        <span class="stat-label">在线设备:</span>
+                                        <span class="stat-value online">{{ getCurrentFloor().onlineDevices }}</span>
+                                    </div>
+                                    <div class="floor-stat">
+                                        <span class="stat-label">异常设备:</span>
+                                        <span class="stat-value warning">{{ getCurrentFloor().warningDevices }}</span>
+                                    </div>
+                                </div>
+                                <div class="device-list-mini">
+                                    <div v-for="device in getCurrentFloorDevices()" 
+                                         :key="device.id"
+                                         class="device-item-mini"
+                                         @mouseenter="highlightDevice(device.id)"
+                                         @mouseleave="resetDeviceHighlight"
+                                         @click="showDeviceDetail(device)">
+                                        <div :class="['device-dot', `status-${device.status}`]"></div>
+                                        <span class="device-name-mini">{{ device.name }}</span>
+                                        <span class="device-position">{{ device.room }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
+            
+            <!-- 右侧面板 -->
+            <div class="right-panel">
+                <div class="panel">
+                    <div class="panel-title">
+                        设备预警信息
+                        <div class="panel-actions">
+                            <div class="panel-btn" @click="toggleSoundAlert">
+                                {{ soundAlert ? '关闭' : '开启' }}声音
+                            </div>
+                        </div>
+                    </div>
+                    <div class="device-list">
+                        <div v-for="warning in filteredWarnings" 
+                             :key="warning.id" 
+                             class="device-item"
+                             @click="showDeviceDetail(warning)">
+                            <div :class="['device-status', `status-${warning.level}`]"></div>
+                            <div class="device-name">{{ warning.name }}</div>
+                            <div class="device-value">{{ warning.time }}</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="panel">
+                    <div class="panel-title">检测设备信息统计</div>
+                    <div class="chart-container" ref="chart"></div>
+                </div>
+                
+                <div class="panel">
+                    <div class="panel-title">设备类型分布</div>
+                    <div class="chart-container" ref="pieChart"></div>
+                </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="bottom-section">
-            <div class="card full-width">
-                <div class="card-header">
-                    <h2 class="card-title"><i class="fas fa-desktop"></i> 设备状态监控</h2>
-                    <div class="last-update">最后更新: {{ lastUpdate }}</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="table-container">
+                <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.room || '未知' }}</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: getStatusColor(selectedDevice.status)}">
+                                    {{ 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-section">
+                            <h3>运行状态</h3>
+                            <div class="detail-item">
+                                <span class="detail-label">运行时间:</span>
+                                <span class="detail-value">{{ selectedDevice.uptime || '156天' }}</span>
+                            </div>
+                            <div class="detail-item">
+                                <span class="detail-label">CPU使用率:</span>
+                                <span class="detail-value">{{ selectedDevice.cpu || '45%' }}</span>
+                            </div>
+                            <div class="detail-item">
+                                <span class="detail-label">内存使用率:</span>
+                                <span class="detail-value">{{ selectedDevice.memory || '62%' }}</span>
+                            </div>
+                            <div class="detail-item">
+                                <span class="detail-label">网络流量:</span>
+                                <span class="detail-value">{{ selectedDevice.network || '125MB/s' }}</span>
+                            </div>
+                            <div class="detail-item">
+                                <span class="detail-label">温度:</span>
+                                <span class="detail-value">{{ selectedDevice.temperature || '42°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>
                     
-                    <el-empty description="暂无预警" v-if="tableHeaders.length == 0"></el-empty>
-                    <table v-else>
-                        <thead>
-                            <tr>
-                                <th v-for="header in tableHeaders" :key="header">{{ header }}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="device in deviceStatus" :key="device.id">
-                                <td>{{ device.name }}</td>
-                                <td>{{ device.location }}</td>
-                                <td>
-                                    <span :class="getCpuStatus(device.cpuUtilization || 0)"></span>
-                                    {{ device.cpuUtilization || 0 }}%
-                                </td>
-                                <td>
-                                    <span :class="getMemoryStatus(device.memoryUtilization || 0)"></span>
-                                    {{ device.memoryUtilization || 0 }}%
-                                </td>
-                                <td>{{ device.temperature || 0 }}°C</td>
-                                <td>
-                                    <el-tag  :hit="false" :type="device.health == '1'?'success':device.health == '2'?'':device.health == '3'?'danger':device.health == '4'?'warning':'info'"> {{ device.health == '1'?'健康':device.health == '2'?'良好':device.health == '3'?'一般':device.health == '4'?'需维护':'未获取' }} </el-tag>
-                                </td>
-                                <td>{{ formatDuration(device.contWorkPeriod) }}</td>
-                                <td>{{ parseTime(device.gatherTime) || '--' }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
+                    <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>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-  </div>
 </template>
 
 <script>
-import PanelGroup from './dashboard/PanelGroup'
-import LineChart from './dashboard/LineChart'
-import RaddarChart from './dashboard/RaddarChart'
-import PieChart from './dashboard/PieChart'
-import BarChart from './dashboard/BarChart'
-import digital from './dashboard/digital'
-import { statistic, byEquType, listMonitor, alertMessageTimes } from "@/api/index/index"
-import { getToken } from "@/utils/auth"
-import Treeselect from "@riophae/vue-treeselect"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
-import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
 
 export default {
   name: 'Index',
-  components: {
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart,
-    digital
-  },
   data() {
     return {
-      totalAlerts: 111,
-      activeAlerts: 42,
-      resolvedAlerts: 69,
-      lastUpdate: new Date().toLocaleString(),
-
-      isLoading: false, // 加载状态
-      noMore: false,    // 是否无更多数据
-      page: 1,          // 当前页码
-      devices: [
-          { id: 1, name: 'Forecasts', description: '预测分析系统', status: 'normal', icon: 'fas fa-chart-line' },
-          { id: 2, name: 'Gold', description: '核心处理单元', status: 'warning', icon: 'fas fa-server' },
-          { id: 3, name: 'Industries', description: '工业控制系统', status: 'normal', icon: 'fas fa-industry' }
-      ],
-    //   设备预警信息
-      alerts: [],
-    //   统计预警信息次数
-      alertMessageData: [],
-
-      byEquTypeData: [],
-
-      tableHeaders: ['设备名称', '设备位置', 'CPU使用率', '内存使用率', '温度', '健康度', '设备运行时长', '采集时间'],
-      deviceStatus: []
-    }
-  },
-  methods: {
-    formatDuration(input) {// 类型安全校验
-  if (typeof input !== 'string') return "0天0小时";
-  
-  const match = input.match(/(\d+)\s*days?,\s*(\d+):/i);
-  return match ? `${match[1]}天${match[2]}小时` : "0天0小时";
-},
-
-    getCpuStatus(usage) {
-        if (usage < 50) return 'status-indicator status-good';
-        if (usage < 80) return 'status-indicator status-warning';
-        return 'status-indicator status-critical';
-    },
-    getMemoryStatus(usage) {
-        if (usage < 60) return 'status-indicator status-good';
-        if (usage < 85) return 'status-indicator status-warning';
-        return 'status-indicator status-critical';
-    },
-    getHealthStatus(health) {
-        if (health >= 80) return 'health-good';
-        if (health >= 60) return 'health-warning';
-        return 'health-critical';
-    },
-    getbyEquType() {
-      this.loading = true
-      byEquType().then(response => {
-          this.loading = false
-          this.byEquTypeData = response.data
-        }
-      )
-    },
-    getlistMonitor() {
-      this.loading = true
-      listMonitor({pageSize: 100}).then(response => {
-          this.loading = false
-          this.deviceStatus = response.rows
-        }
-      )
-    },
-    getalertMessageTimes() {
-      this.loading = true
-      alertMessageTimes().then(response => {
-            this.alertMessageData = response.data
-            this.loading = false
-        }
-      )
-    },
-    async loadMore() {
-      if (this.isLoading || this.noMore) return;
-      this.isLoading = true;
-      try {
-        const res = await statistic({page:this.page,status:'UNHANDLED'}); // 模拟API请求
-        if (res.rows.length < 10) { // 假设每页10条
-          this.noMore = true;
-        } else {
-          this.alerts = [...this.alerts, ...res.rows];
-          this.page++;
-        }
-      } catch (error) {
-        console.error('加载失败:', error);
-      } finally {
-        this.isLoading = false;
-      }
-    }
-  },
-  created() {
-    this.getbyEquType()
-    this.getlistMonitor()
-    this.getalertMessageTimes()
-    
-    
-  },
-}
-</script>
+                currentTime: '',
+                updateTime: '',
+                totalDevices: 104,
+                onlineDevices: 96,
+                soundAlert: true,
+                autoSwitch: false,
+                autoSwitchInterval: null,
+                showDeviceModal: false,
+                showRoomModal: false,
+                showWarningHistory: false,
+                selectedDevice: {},
+                selectedRoom: {},
+                historyStartDate: '',
+                historyEndDate: '',
+                warningLevelFilter: 'all',
+                warningStats: {
+                    total: 18,
+                    highLevel: 4,
+                    mediumLevel: 7,
+                    lowLevel: 7
+                },
+                deviceStatus: [
+                    { id: 1, name: '一层核心服务器', status: 'normal', value: '98%', type: '服务器', uptime: '156天', cpu: '45%', memory: '62%', network: '125MB/s', temperature: '42°C', lastMaintenance: '2024-09-15' },
+                    { id: 2, name: '二层数据库集群', status: 'normal', value: '92%', type: '服务器', uptime: '142天', cpu: '38%', memory: '75%', network: '89MB/s', temperature: '45°C', lastMaintenance: '2024-09-20' },
+                    { id: 3, name: '三层网络交换机', status: 'warning', value: '75%', type: '网络设备', uptime: '89天', cpu: '25%', memory: '48%', network: '210MB/s', temperature: '52°C', lastMaintenance: '2024-08-30' },
+                    { id: 4, name: '四层防火墙', status: 'normal', value: '88%', type: '安全设备', uptime: '201天', cpu: '18%', memory: '32%', network: '95MB/s', temperature: '38°C', lastMaintenance: '2024-07-15' },
+                    { id: 5, name: '一层存储设备', status: 'error', value: '45%', type: '存储设备', uptime: '67天', cpu: '62%', memory: '85%', network: '156MB/s', temperature: '58°C', lastMaintenance: '2024-10-05' },
+                    { id: 6, name: '三层备份系统', status: 'normal', value: '96%', type: '备份设备', uptime: '134天', cpu: '28%', memory: '41%', network: '78MB/s', temperature: '41°C', lastMaintenance: '2024-09-10' },
+                    { id: 7, name: '二层负载均衡', status: 'warning', value: '68%', type: '网络设备', uptime: '98天', cpu: '52%', memory: '66%', network: '185MB/s', temperature: '49°C', lastMaintenance: '2024-09-25' },
+                    { id: 8, name: '四层应用服务器', status: 'normal', value: '91%', type: '服务器', uptime: '178天', cpu: '41%', memory: '58%', network: '112MB/s', temperature: '43°C', lastMaintenance: '2024-08-20' }
+                ],
+                deviceWarnings: [
+                    { id: 1, name: '一层存储设备容量不足', level: 'error', time: '10:23', deviceId: 5 },
+                    { id: 2, name: '三层网络交换机负载高', level: 'warning', time: '09:45', deviceId: 3 },
+                    { id: 3, name: '二层负载均衡器异常', level: 'warning', time: '09:12', deviceId: 7 },
+                    { id: 4, name: '二层数据库连接数超限', level: 'error', time: '08:56', deviceId: 2 },
+                    { id: 5, name: '四层备份任务失败', level: 'warning', time: '08:30', deviceId: 6 },
+                    { id: 6, name: '一层安全审计异常', level: 'error', time: '07:45', deviceId: 1 }
+                ],
+                currentFloor: 1,
+                floors: [
+                    {
+                        level: 1,
+                        name: '一层 - 数据中心',
+                        totalDevices: 32,
+                        onlineDevices: 30,
+                        warningDevices: 2,
+                        rooms: [
+                            { id: 101, name: '服务器机房A', position: { left: 5, top: 10, width: 25, height: 35 } },
+                            { id: 102, name: '服务器机房B', position: { left: 35, top: 10, width: 25, height: 35 } },
+                            { id: 103, name: '存储机房', position: { left: 65, top: 10, width: 30, height: 35 } },
+                            { id: 104, name: '网络设备间', position: { left: 5, top: 50, width: 25, height: 25 } },
+                            { id: 105, name: 'UPS电源室', position: { left: 35, top: 50, width: 25, height: 25 } },
+                            { id: 106, name: '空调机房', position: { left: 65, top: 50, width: 30, height: 25 } },
+                            { id: 107, name: '走廊', position: { left: 0, top: 80, width: 100, height: 15 } }
+                        ],
+                        devices: [
+                            { id: 101, name: '核心服务器1', status: 'normal', room: '服务器机房A', position: { x: 15, y: 20 }, type: '服务器' },
+                            { id: 102, name: '核心服务器2', status: 'normal', room: '服务器机房A', position: { x: 15, y: 30 }, type: '服务器' },
+                            { id: 103, name: '存储阵列A', status: 'warning', room: '存储机房', position: { x: 75, y: 20 }, type: '存储设备' },
+                            { id: 104, name: '网络交换机', status: 'normal', room: '网络设备间', position: { x: 15, y: 60 }, type: '网络设备' },
+                            { id: 105, name: '安全审计系统', status: 'error', room: '服务器机房B', position: { x: 45, y: 20 }, type: '安全设备' },
+                            { id: 106, name: 'UPS电源A', status: 'normal', room: 'UPS电源室', position: { x: 45, y: 60 }, type: '电源设备' },
+                            { id: 107, name: '备份服务器', status: 'normal', room: '服务器机房B', position: { x: 45, y: 30 }, type: '服务器' },
+                            { id: 108, name: '数据库集群', status: 'normal', room: '存储机房', position: { x: 75, y: 30 }, type: '服务器' }
+                        ]
+                    },
+                    {
+                        level: 2,
+                        name: '二层 - 网络中心',
+                        totalDevices: 28,
+                        onlineDevices: 26,
+                        warningDevices: 2,
+                        rooms: [
+                            { id: 201, name: '核心交换机房', position: { left: 10, top: 10, width: 35, height: 40 } },
+                            { id: 202, name: '防火墙区域', position: { left: 50, top: 10, width: 40, height: 40 } },
+                            { id: 203, name: '监控区域', position: { left: 10, top: 55, width: 35, height: 30 } },
+                            { id: 204, name: '设备维护室', position: { left: 50, top: 55, width: 40, height: 30 } },
+                            { id: 205, name: '走廊', position: { left: 0, top: 90, width: 100, height: 5 } }
+                        ],
+                        devices: [
+                            { id: 201, name: '路由器主', status: 'normal', room: '核心交换机房', position: { x: 25, y: 25 }, type: '网络设备' },
+                            { id: 202, name: '防火墙1', status: 'normal', room: '防火墙区域', position: { x: 65, y: 25 }, type: '安全设备' },
+                            { id: 203, name: '负载均衡器', status: 'warning', room: '核心交换机房', position: { x: 25, y: 35 }, type: '网络设备' },
+                            { id: 204, name: 'VPN网关', status: 'normal', room: '防火墙区域', position: { x: 65, y: 35 }, type: '安全设备' },
+                            { id: 205, name: 'IDS系统', status: 'warning', room: '监控区域', position: { x: 25, y: 70 }, type: '安全设备' },
+                            { id: 206, name: '网络监控', status: 'normal', room: '监控区域', position: { x: 25, y: 60 }, type: '监控设备' },
+                            { id: 207, name: '交换机A', status: 'normal', room: '设备维护室', position: { x: 65, y: 70 }, type: '网络设备' },
+                            { id: 208, name: '交换机B', status: 'normal', room: '设备维护室', position: { x: 75, y: 70 }, type: '网络设备' }
+                        ]
+                    },
+                    {
+                        level: 3,
+                        name: '三层 - 监控中心',
+                        totalDevices: 24,
+                        onlineDevices: 22,
+                        warningDevices: 2,
+                        rooms: [
+                            { id: 301, name: '大屏监控区', position: { left: 5, top: 5, width: 60, height: 45 } },
+                            { id: 302, name: '操作台区域', position: { left: 70, top: 5, width: 25, height: 45 } },
+                            { id: 303, name: '存储区', position: { left: 5, top: 55, width: 40, height: 35 } },
+                            { id: 304, name: '设备间', position: { left: 50, top: 55, width: 45, height: 35 } },
+                            { id: 305, name: '走廊', position: { left: 0, top: 95, width: 100, height: 5 } }
+                        ],
+                        devices: [
+                            { id: 301, name: '监控服务器', status: 'normal', room: '大屏监控区', position: { x: 30, y: 25 }, type: '服务器' },
+                            { id: 302, name: '录像设备', status: 'error', room: '存储区', position: { x: 20, y: 70 }, type: '存储设备' },
+                            { id: 303, name: '分析服务器', status: 'normal', room: '大屏监控区', position: { x: 45, y: 25 }, type: '服务器' },
+                            { id: 304, name: '报警主机', status: 'normal', room: '操作台区域', position: { x: 80, y: 25 }, type: '安全设备' },
+                            { id: 305, name: '门禁控制器', status: 'normal', room: '设备间', position: { x: 65, y: 70 }, type: '安防设备' },
+                            { id: 306, name: '环境监测', status: 'warning', room: '设备间', position: { x: 75, y: 70 }, type: '监控设备' },
+                            { id: 307, name: '摄像头控制', status: 'normal', room: '操作台区域', position: { x: 80, y: 35 }, type: '安防设备' },
+                            { id: 308, name: '报警系统', status: 'normal', room: '设备间', position: { x: 65, y: 80 }, type: '安全设备' }
+                        ]
+                    },
+                    {
+                        level: 4,
+                        name: '四层 - 办公区域',
+                        totalDevices: 20,
+                        onlineDevices: 18,
+                        warningDevices: 2,
+                        rooms: [
+                            { id: 401, name: '办公区A', position: { left: 5, top: 10, width: 40, height: 35 } },
+                            { id: 402, name: '办公区B', position: { left: 50, top: 10, width: 45, height: 35 } },
+                            { id: 403, name: '会议室', position: { left: 5, top: 50, width: 40, height: 35 } },
+                            { id: 404, name: '打印区', position: { left: 50, top: 50, width: 20, height: 35 } },
+                            { id: 405, name: '茶水间', position: { left: 75, top: 50, width: 20, height: 35 } },
+                            { id: 406, name: '走廊', position: { left: 0, top: 90, width: 100, height: 5 } }
+                        ],
+                        devices: [
+                            { id: 401, name: '办公服务器', status: 'normal', room: '办公区A', position: { x: 25, y: 25 }, type: '服务器' },
+                            { id: 402, name: '打印机', status: 'warning', room: '打印区', position: { x: 60, y: 65 }, type: '办公设备' },
+                            { id: 403, name: '网络终端', status: 'normal', room: '办公区B', position: { x: 70, y: 25 }, type: '网络设备' },
+                            { id: 404, name: '视频会议', status: 'normal', room: '会议室', position: { x: 25, y: 65 }, type: '会议设备' },
+                            { id: 405, name: '电话系统', status: 'warning', room: '办公区A', position: { x: 25, y: 35 }, type: '通信设备' },
+                            { id: 406, name: '考勤系统', status: 'normal', room: '办公区B', position: { x: 70, y: 35 }, type: '安防设备' },
+                            { id: 407, name: '门禁系统', status: 'normal', room: '走廊', position: { x: 50, y: 92 }, type: '安防设备' },
+                            { id: 408, name: '投影设备', status: 'normal', room: '会议室', position: { x: 25, y: 55 }, type: '会议设备' }
+                        ]
+                    }
+                ],
+                dataFlows: [],
+                barChart: null,
+                pieChart: null,
+                historyChart: null,
+                highlightedDevice: null
+    }},
+            computed: {
+                filteredDeviceStatus() {
+                    if (this.warningLevelFilter === 'all') {
+                        return this.deviceStatus;
+                    }
+                    return this.deviceStatus.filter(device => device.status === this.warningLevelFilter);
+                },
+                filteredWarnings() {
+                    if (this.warningLevelFilter === 'all') {
+                        return this.deviceWarnings;
+                    }
+                    return this.deviceWarnings.filter(warning => 
+                        (this.warningLevelFilter === 'error' && warning.level === 'error') ||
+                        (this.warningLevelFilter === 'warning' && warning.level === 'warning')
+                    );
+                }
+            },
+            mounted() {
+                this.updateTimeDisplay();
+                setInterval(this.updateTimeDisplay, 1000);
+                
+                // 初始化日期
+                const today = new Date();
+                this.historyEndDate = today.toISOString().split('T')[0];
+                const oneWeekAgo = new Date(today);
+                oneWeekAgo.setDate(today.getDate() - 7);
+                this.historyStartDate = oneWeekAgo.toISOString().split('T')[0];
+                
+                this.generateDataFlows();
+                
+                // 使用nextTick确保DOM已完全渲染
+                this.$nextTick(() => {
+                    this.initBarChart();
+                    this.initPieChart();
+                });
+                
+                // 监听窗口大小变化
+                window.addEventListener('resize', this.handleResize);
+                
+                // 模拟数据更新
+                setInterval(this.updateData, 5000);
+                
+                // 模拟WebSocket连接
+                this.simulateWebSocket();
+            },
+            beforeDestroy() {
+                // 移除事件监听
+                window.removeEventListener('resize', this.handleResize);
+                if (this.autoSwitchInterval) {
+                    clearInterval(this.autoSwitchInterval);
+                }
+            },
+            methods: {
+                updateTimeDisplay() {
+                    const now = new Date();
+                    this.currentTime = now.toLocaleString('zh-CN', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit',
+                        hour12: false
+                    });
+                    
+                    if (!this.updateTime) {
+                        this.updateTime = this.currentTime;
+                    }
+                },
+                
+                initBarChart() {
+                    this.barChart = echarts.init(this.$refs.chart);
+                    
+                    const option = {
+                        backgroundColor: 'transparent',
+                        tooltip: {
+                            trigger: 'axis',
+                            axisPointer: {
+                                type: 'shadow'
+                            }
+                        },
+                        legend: {
+                            data: ['正常设备', '预警设备', '故障设备'],
+                            textStyle: {
+                                color: '#a0aec0'
+                            },
+                            top: 10
+                        },
+                        grid: {
+                            left: '3%',
+                            right: '4%',
+                            bottom: '3%',
+                            containLabel: true
+                        },
+                        xAxis: {
+                            type: 'category',
+                            data: ['服务器', '网络设备', '存储设备', '安全设备', '备份设备'],
+                            axisLine: {
+                                lineStyle: {
+                                    color: '#4dabff'
+                                }
+                            },
+                            axisLabel: {
+                                color: '#a0aec0'
+                            }
+                        },
+                        yAxis: {
+                            type: 'value',
+                            axisLine: {
+                                lineStyle: {
+                                    color: '#4dabff'
+                                }
+                            },
+                            axisLabel: {
+                                color: '#a0aec0'
+                            },
+                            splitLine: {
+                                lineStyle: {
+                                    color: 'rgba(77, 171, 255, 0.2)'
+                                }
+                            }
+                        },
+                        series: [
+                            {
+                                name: '正常设备',
+                                type: 'bar',
+                                stack: 'total',
+                                emphasis: {
+                                    focus: 'series'
+                                },
+                                data: [32, 28, 15, 12, 8],
+                                itemStyle: {
+                                    color: '#4CAF50'
+                                }
+                            },
+                            {
+                                name: '预警设备',
+                                type: 'bar',
+                                stack: 'total',
+                                emphasis: {
+                                    focus: 'series'
+                                },
+                                data: [5, 7, 3, 2, 1],
+                                itemStyle: {
+                                    color: '#FF9800'
+                                }
+                            },
+                            {
+                                name: '故障设备',
+                                type: 'bar',
+                                stack: 'total',
+                                emphasis: {
+                                    focus: 'series'
+                                },
+                                data: [2, 1, 1, 0, 0],
+                                itemStyle: {
+                                    color: '#F44336'
+                                }
+                            }
+                        ]
+                    };
+                    
+                    this.barChart.setOption(option);
+                },
+                
+                initPieChart() {
+                    this.pieChart = echarts.init(this.$refs.pieChart);
+                    
+                    const option = {
+                        backgroundColor: 'transparent',
+                        tooltip: {
+                            trigger: 'item',
+                            formatter: '{a} <br/>{b}: {c} ({d}%)'
+                        },
+                        legend: {
+                            orient: 'vertical',
+                            right: 10,
+                            top: 'center',
+                            textStyle: {
+                                color: '#a0aec0'
+                            }
+                        },
+                        series: [
+                            {
+                                name: '设备类型',
+                                type: 'pie',
+                                radius: ['40%', '70%'],
+                                avoidLabelOverlap: false,
+                                itemStyle: {
+                                    borderRadius: 10,
+                                    borderColor: '#0a1633',
+                                    borderWidth: 2
+                                },
+                                label: {
+                                    show: false,
+                                    position: 'center'
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                        fontSize: '18',
+                                        fontWeight: 'bold',
+                                        color: '#62f7ff'
+                                    }
+                                },
+                                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' } }
+                                ]
+                            }
+                        ]
+                    };
+                    
+                    this.pieChart.setOption(option);
+                },
+                
+                initHistoryChart() {
+                    if (!this.$refs.historyChart) return;
+                    
+                    this.historyChart = echarts.init(this.$refs.historyChart);
+                    
+                    const option = {
+                        backgroundColor: 'transparent',
+                        tooltip: {
+                            trigger: 'axis'
+                        },
+                        legend: {
+                            data: ['CPU使用率', '内存使用率', '网络流量'],
+                            textStyle: {
+                                color: '#a0aec0'
+                            }
+                        },
+                        grid: {
+                            left: '3%',
+                            right: '4%',
+                            bottom: '3%',
+                            containLabel: true
+                        },
+                        xAxis: {
+                            type: 'category',
+                            boundaryGap: false,
+                            data: ['10-18', '10-19', '10-20', '10-21', '10-22', '10-23', '10-24'],
+                            axisLine: {
+                                lineStyle: {
+                                    color: '#4dabff'
+                                }
+                            },
+                            axisLabel: {
+                                color: '#a0aec0'
+                            }
+                        },
+                        yAxis: {
+                            type: 'value',
+                            axisLine: {
+                                lineStyle: {
+                                    color: '#4dabff'
+                                }
+                            },
+                            axisLabel: {
+                                color: '#a0aec0',
+                                formatter: '{value}%'
+                            },
+                            splitLine: {
+                                lineStyle: {
+                                    color: 'rgba(77, 171, 255, 0.2)'
+                                }
+                            }
+                        },
+                        series: [
+                            {
+                                name: 'CPU使用率',
+                                type: 'line',
+                                smooth: true,
+                                data: [45, 52, 48, 60, 55, 58, 62],
+                                itemStyle: {
+                                    color: '#4dabff'
+                                },
+                                areaStyle: {
+                                    color: {
+                                        type: 'linear',
+                                        x: 0,
+                                        y: 0,
+                                        x2: 0,
+                                        y2: 1,
+                                        colorStops: [{
+                                            offset: 0, color: 'rgba(77, 171, 255, 0.3)'
+                                        }, {
+                                            offset: 1, color: 'rgba(77, 171, 255, 0.1)'
+                                        }]
+                                    }
+                                }
+                            },
+                            {
+                                name: '内存使用率',
+                                type: 'line',
+                                smooth: true,
+                                data: [62, 58, 65, 70, 68, 72, 75],
+                                itemStyle: {
+                                    color: '#62f7ff'
+                                },
+                                areaStyle: {
+                                    color: {
+                                        type: 'linear',
+                                        x: 0,
+                                        y: 0,
+                                        x2: 0,
+                                        y2: 1,
+                                        colorStops: [{
+                                            offset: 0, color: 'rgba(98, 247, 255, 0.3)'
+                                        }, {
+                                            offset: 1, color: 'rgba(98, 247, 255, 0.1)'
+                                        }]
+                                    }
+                                }
+                            },
+                            {
+                                name: '网络流量',
+                                type: 'line',
+                                smooth: true,
+                                data: [78, 82, 75, 90, 85, 88, 95],
+                                itemStyle: {
+                                    color: '#ffa726'
+                                },
+                                areaStyle: {
+                                    color: {
+                                        type: 'linear',
+                                        x: 0,
+                                        y: 0,
+                                        x2: 0,
+                                        y2: 1,
+                                        colorStops: [{
+                                            offset: 0, color: 'rgba(255, 167, 38, 0.3)'
+                                        }, {
+                                            offset: 1, color: 'rgba(255, 167, 38, 0.1)'
+                                        }]
+                                    }
+                                }
+                            }
+                        ]
+                    };
+                    
+                    this.historyChart.setOption(option);
+                },
+                
+                generateDataFlows() {
+                    // 生成数据流动画元素
+                    const flows = [];
+                    const width = window.innerWidth;
+                    const height = window.innerHeight;
+                    
+                    for (let i = 0; i < 20; i++) {
+                        const startX = Math.random() * width;
+                        const startY = Math.random() * height;
+                        const targetX = Math.random() * width;
+                        const targetY = Math.random() * height;
+                        
+                        flows.push({
+                            x: startX,
+                            y: startY,
+                            tx: targetX - startX,
+                            ty: targetY - startY,
+                            delay: Math.random() * 5
+                        });
+                    }
+                    
+                    this.dataFlows = flows;
+                },
+                
+                handleResize() {
+                    // 重新生成数据流
+                    this.generateDataFlows();
+                    
+                    // 重新调整图表大小
+                    if (this.barChart) {
+                        this.barChart.resize();
+                    }
+                    if (this.pieChart) {
+                        this.pieChart.resize();
+                    }
+                    if (this.historyChart) {
+                        this.historyChart.resize();
+                    }
+                },
+                
+                updateData() {
+                    // 模拟数据更新
+                    this.warningStats.total = Math.floor(15 + Math.random() * 10);
+                    this.warningStats.highLevel = Math.floor(3 + Math.random() * 5);
+                    this.warningStats.mediumLevel = Math.floor(5 + Math.random() * 8);
+                    this.warningStats.lowLevel = this.warningStats.total - this.warningStats.highLevel - this.warningStats.mediumLevel;
+                    
+                    this.onlineDevices = Math.floor(90 + Math.random() * 15);
+                    
+                    // 更新设备状态
+                    this.deviceStatus.forEach(device => {
+                        if (device.status === 'normal' && Math.random() > 0.7) {
+                            device.status = Math.random() > 0.5 ? 'warning' : 'error';
+                        } else if (device.status !== 'normal' && Math.random() > 0.8) {
+                            device.status = 'normal';
+                        }
+                        
+                        // 更新设备数值
+                        if (device.status === 'normal') {
+                            device.value = Math.floor(85 + Math.random() * 15) + '%';
+                        } else if (device.status === 'warning') {
+                            device.value = Math.floor(60 + Math.random() * 20) + '%';
+                        } else {
+                            device.value = Math.floor(30 + Math.random() * 30) + '%';
+                        }
+                    });
+                    
+                    // 更新楼宇设备状态
+                    this.floors.forEach(floor => {
+                        floor.devices.forEach(device => {
+                            if (device.status === 'normal' && Math.random() > 0.8) {
+                                device.status = Math.random() > 0.5 ? 'warning' : 'error';
+                            } else if (device.status !== 'normal' && Math.random() > 0.9) {
+                                device.status = 'normal';
+                            }
+                        });
+                        
+                        // 更新楼层统计
+                        floor.onlineDevices = floor.devices.filter(d => d.status === 'normal').length;
+                        floor.warningDevices = floor.devices.filter(d => d.status !== 'normal').length;
+                    });
+                    
+                    // 更新图表数据
+                    if (this.barChart) {
+                        const option = this.barChart.getOption();
+                        option.series[0].data = option.series[0].data.map(() => Math.floor(20 + Math.random() * 20));
+                        option.series[1].data = option.series[1].data.map(() => Math.floor(1 + Math.random() * 8));
+                        option.series[2].data = option.series[2].data.map(() => Math.floor(0 + Math.random() * 3));
+                        this.barChart.setOption(option);
+                    }
+                    
+                    this.updateTime = this.currentTime;
+                },
 
-<style lang="scss" scoped>
+                // 新增功能方法
+                showDeviceDetail(device) {
+                    this.selectedDevice = device;
+                    this.showDeviceModal = true;
+                    
+                    // 初始化历史图表
+                    this.$nextTick(() => {
+                        this.initHistoryChart();
+                    });
+                },
+                
+                closeDeviceModal() {
+                    this.showDeviceModal = false;
+                    this.selectedDevice = {};
+                },
+                
+                showRoomDevices(room) {
+                    this.selectedRoom = room;
+                    this.showRoomModal = true;
+                },
+                
+                closeRoomModal() {
+                    this.showRoomModal = false;
+                    this.selectedRoom = {};
+                },
+                
+                getRoomDevices() {
+                    const currentFloor = this.getCurrentFloor();
+                    return currentFloor.devices.filter(device => device.room === this.selectedRoom.name);
+                },
+                
+                controlDevice(action) {
+                    alert(`执行设备控制: ${action} - ${this.selectedDevice.name}`);
+                    // 这里可以添加实际的设备控制逻辑
+                },
+                
+                loadHistoryData() {
+                    alert(`加载历史数据: ${this.historyStartDate} 至 ${this.historyEndDate}`);
+                    // 这里可以添加实际的历史数据加载逻辑
+                },
+                
+                filterByWarningLevel(level) {
+                    if (this.warningLevelFilter === level) {
+                        this.warningLevelFilter = 'all';
+                    } else {
+                        this.warningLevelFilter = level;
+                    }
+                },
+                
+                refreshDeviceStatus() {
+                    this.updateData();
+                    alert('设备状态已刷新');
+                },
+                
+                toggleSoundAlert() {
+                    this.soundAlert = !this.soundAlert;
+                    if (this.soundAlert) {
+                        // 播放提示音
+                        this.playAlertSound();
+                    }
+                },
+                
+                playAlertSound() {
+                    // 简单的提示音实现
+                    try {
+                        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                        const oscillator = audioContext.createOscillator();
+                        const gainNode = audioContext.createGain();
+                        
+                        oscillator.connect(gainNode);
+                        gainNode.connect(audioContext.destination);
+                        
+                        oscillator.frequency.value = 800;
+                        oscillator.type = 'sine';
+                        
+                        gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+                        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
+                        
+                        oscillator.start(audioContext.currentTime);
+                        oscillator.stop(audioContext.currentTime + 0.5);
+                    } catch (e) {
+                        console.log('音频播放不支持');
+                    }
+                },
+                
+                toggleAutoSwitch() {
+                    this.autoSwitch = !this.autoSwitch;
+                    
+                    if (this.autoSwitch) {
+                        this.autoSwitchInterval = setInterval(() => {
+                            this.currentFloor = this.currentFloor % this.floors.length + 1;
+                        }, 5000);
+                    } else {
+                        if (this.autoSwitchInterval) {
+                            clearInterval(this.autoSwitchInterval);
+                            this.autoSwitchInterval = null;
+                        }
+                    }
+                },
+                
+                exportWarningData() {
+                    alert('导出预警数据');
+                    // 这里可以添加实际的数据导出逻辑
+                },
+                
+                getStatusColor(status) {
+                    switch(status) {
+                        case 'normal': return '#4CAF50';
+                        case 'warning': return '#FF9800';
+                        case 'error': return '#F44336';
+                        default: return '#a0aec0';
+                    }
+                },
+                
+                getStatusText(status) {
+                    switch(status) {
+                        case 'normal': return '正常';
+                        case 'warning': return '警告';
+                        case 'error': return '故障';
+                        default: return '未知';
+                    }
+                },
+                
+                simulateWebSocket() {
+                    // 模拟WebSocket实时数据推送
+                    setInterval(() => {
+                        // 随机更新一个设备状态
+                        const floorIndex = Math.floor(Math.random() * this.floors.length);
+                        const deviceIndex = Math.floor(Math.random() * this.floors[floorIndex].devices.length);
+                        
+                        const device = this.floors[floorIndex].devices[deviceIndex];
+                        const oldStatus = device.status;
+                        
+                        if (Math.random() > 0.7) {
+                            device.status = Math.random() > 0.5 ? 'warning' : 'error';
+                        } else if (oldStatus !== 'normal' && Math.random() > 0.8) {
+                            device.status = 'normal';
+                        }
+                        
+                        // 如果状态发生变化，播放提示音
+                        if (this.soundAlert && oldStatus !== device.status) {
+                            this.playAlertSound();
+                        }
+                    }, 3000);
+                },
 
-        .body {
-            background-color: #f5f7fa;
-            color: #333;
-            line-height: 1.6;
-            padding: 20px;
+                // 楼层设备展示相关方法
+                switchFloor(floorLevel) {
+                    this.currentFloor = floorLevel;
+                },
+                
+                highlightDevice(deviceId) {
+                    this.highlightedDevice = deviceId;
+                },
+                
+                resetDeviceHighlight() {
+                    this.highlightedDevice = null;
+                },
+                
+                getCurrentFloor() {
+                    return this.floors.find(floor => floor.level === this.currentFloor) || this.floors[0];
+                },
+                
+                getCurrentFloorDevices() {
+                    return this.getCurrentFloor().devices;
+                }
+            }
+        
+}
+</script>
+<style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: "Microsoft YaHei", sans-serif;
+        }
+        
+        body {
+            background-color: #0a1633;
+            color: #e6e6e6;
+            overflow: hidden;
+        }
+        
+        .dashboard {
+            width: 100vw;
+            height: 100vh;
+            padding: 1.5vh 1.5vw;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            overflow: hidden;
+            min-width: 1200px;
+            min-height: 700px;
+            background-color: #0a1633;
+            color: #e6e6e6;
+            overflow: hidden;
         }
         
         .header {
-            text-align: center;
-            margin-bottom: 30px;
+            height: 10vh;
+            min-height: 70px;
+            max-height: 100px;
+            background: linear-gradient(90deg, rgba(10, 26, 58, 0.8), rgba(13, 36, 82, 0.8), rgba(10, 26, 58, 0.8));
+            border-radius: 1vh;
+            margin-bottom: 1.5vh;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 2vw;
+            border: 1px solid #1a3a7a;
+            box-shadow: 0 0 15px rgba(26, 58, 122, 0.5);
+            position: relative;
+            overflow: hidden;
+            backdrop-filter: blur(5px);
+        }
+        
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+            animation: headerShine 8s infinite;
+        }
+        
+        @keyframes headerShine {
+            0% { left: -100%; }
+            100% { left: 100%; }
         }
         
         .header h1 {
-            color: #2c3e50;
-            margin-bottom: 10px;
-            font-size: 28px;
+            font-size: clamp(1.5rem, 2.5vw, 2.5rem);
+            background: linear-gradient(90deg, #4dabff, #62f7ff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 0 10px rgba(77, 171, 255, 0.5);
+            letter-spacing: 2px;
         }
         
-        .header p {
-            color: #7f8c8d;
-            font-size: 16px;
+        .time-display {
+            font-size: clamp(1rem, 1.5vw, 1.5rem);
+            color: #62f7ff;
+            text-shadow: 0 0 5px rgba(98, 247, 255, 0.7);
         }
         
-        .container {
+        .main-content {
+            flex: 1;
             display: flex;
-            flex-direction: column;
-            gap: 20px;
+            gap: 1.5vh;
+            min-height: 0;
         }
         
-        .top-section {
+        .left-panel, .right-panel {
+            width: 25%;
+            min-width: 280px;
             display: flex;
-            gap: 20px;
+            flex-direction: column;
+            gap: 1.5vh;
+            min-height: 0;
         }
         
-        .bottom-section {
+        .center-panel {
+            flex: 1;
             display: flex;
             flex-direction: column;
-            gap: 20px;
+            gap: 1.5vh;
+            min-height: 0;
+            min-width: 500px;
         }
         
         .panel {
-            flex: 1;
+            background: rgba(16, 31, 63, 0.7);
+            border-radius: 1vh;
+            border: 1px solid #1a3a7a;
+            box-shadow: 0 0 10px rgba(26, 58, 122, 0.3);
+            padding: 1.5vh;
+            position: relative;
+            overflow: hidden;
             display: flex;
             flex-direction: column;
-            gap: 20px;
+            backdrop-filter: blur(5px);
+            flex: 1;
         }
         
-        .card {
-            background: white;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-            padding: 20px;
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            height: 100%;
+        .panel::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background: linear-gradient(90deg, #4dabff, #62f7ff);
+            box-shadow: 0 0 10px rgba(98, 247, 255, 0.7);
         }
         
-        .card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+        .panel-title {
+            font-size: clamp(0.9rem, 1.2vw, 1.3rem);
+            color: #62f7ff;
+            margin-bottom: 1.5vh;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-shrink: 0;
         }
         
-        .card-header {
+        .panel-title::before {
+            content: '';
+            display: inline-block;
+            width: 4px;
+            height: 18px;
+            background: #4dabff;
+            margin-right: 8px;
+            border-radius: 2px;
+        }
+        
+        .panel-actions {
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 15px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #eaeaea;
+            gap: 10px;
+        }
+        
+        .panel-btn {
+            background: rgba(26, 58, 122, 0.5);
+            border: 1px solid #2a4a94;
+            border-radius: 4px;
+            padding: 4px 8px;
+            font-size: 0.7rem;
+            color: #a0aec0;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        
+        .panel-btn:hover {
+            background: rgba(77, 171, 255, 0.3);
+            border-color: #4dabff;
+            color: #62f7ff;
         }
         
-        .card-title {
-            font-size: 18px;
-            font-weight: 600;
-            color: #2c3e50;
+        .warning-stats {
             display: flex;
+            flex-wrap: wrap;
+            gap: 1.5vh;
+        }
+        
+        .stat-item {
+            flex: 1;
+            min-width: 45%;
+            background: rgba(26, 58, 122, 0.3);
+            border-radius: 0.8vh;
+            padding: 1.2vh;
+            border: 1px solid #2a4a94;
+            display: flex;
+            flex-direction: column;
             align-items: center;
-            gap: 8px;
+            transition: all 0.3s;
+            cursor: pointer;
         }
         
-        .card-title i {
-            color: #3498db;
+        .stat-item:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(26, 58, 122, 0.5);
+            border-color: #4dabff;
         }
         
-        .stats-container {
-            display: grid;
-            justify-content: space-between;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 15px;
-            overflow-y: auto;
-            overflow-x: hidden;
-            height: 255px;
+        .stat-value {
+            font-size: clamp(1.5rem, 2.5vw, 2.2rem);
+            font-weight: bold;
+            margin: 0.5vh 0;
         }
         
-        .stat-card {
-            flex: 1;
-            background: linear-gradient(135deg, #3498db, #2c3e50);
-            color: white;
-            border-radius: 10px;
-            padding: 12px;
-            text-align: center;
-            box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
+        .stat-total {
+            color: #ff6b6b;
         }
         
-        .stat-card.warning {
-            background: linear-gradient(135deg, #e74c3c, #c0392b);
-            box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
+        .stat-high {
+            color: #ff6b6b;
         }
         
-        .stat-card.normal {
-            background: linear-gradient(135deg, #2ecc71, #27ae60);
-            box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
+        .stat-medium {
+            color: #ffa726;
         }
         
-        .stat-value {
-            font-size: 32px;
-            font-weight: 700;
-            margin: 10px 0;
+        .stat-low {
+            color: #4dabff;
         }
         
         .stat-label {
-            font-size: 14px;
-            opacity: 0.9;
+            font-size: clamp(0.7rem, 0.9vw, 0.9rem);
+            color: #a0aec0;
         }
         
         .device-list {
-            list-style: none;
+            height: 30vh;
+            min-height: 200px;
             overflow-y: auto;
-            overflow-x: hidden;
-            max-height: 255px;
-            padding-left: 0;
+            flex-shrink: 0;
+        }
+        
+        .device-list::-webkit-scrollbar {
+            width: 5px;
+        }
+        
+        .device-list::-webkit-scrollbar-thumb {
+            background: #4dabff;
+            border-radius: 10px;
         }
         
         .device-item {
             display: flex;
             align-items: center;
-            padding: 12px 15px;
-            margin-bottom: 10px;
-            background: #f8f9fa;
-            border-radius: 8px;
-            border-left: 4px solid #3498db;
-            transition: all 0.2s;
+            padding: 1.2vh 1vh;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s;
+            cursor: pointer;
         }
         
         .device-item:hover {
-            background: #edf2f7;
+            background: rgba(26, 58, 122, 0.3);
             transform: translateX(5px);
         }
         
-        .device-item.warning {
-            border-left-color: #e74c3c;
+        .device-status {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            margin-right: 10px;
+        }
+        
+        .status-normal {
+            background: #4CAF50;
+            box-shadow: 0 0 5px #4CAF50;
+        }
+        
+        .status-warning {
+            background: #FF9800;
+            box-shadow: 0 0 5px #FF9800;
+        }
+        
+        .status-error {
+            background: #F44336;
+            box-shadow: 0 0 5px #F44336;
+            animation: blink 1.5s infinite;
+        }
+        
+        @keyframes blink {
+            0%, 50% { opacity: 1; }
+            51%, 100% { opacity: 0.3; }
         }
         
-        .device-item.normal {
-            border-left-color: #2ecc71;
+        .device-name {
+            flex: 1;
+            font-size: clamp(0.8rem, 1vw, 1rem);
         }
         
-        .device-icon {
-            width: 40px;
-            height: 40px;
-            background: #3498db;
+        .device-value {
+            color: #62f7ff;
+            font-weight: bold;
+            font-size: clamp(0.8rem, 1vw, 1rem);
+        }
+        
+        /* 楼宇容器样式 */
+        .building-container {
+            flex: 1;
+            position: relative;
+            display: flex;
+            min-height: 40vh;
+        }
+
+        .floor-plans-container {
+            width: 70%;
+            height: 100%;
+            background: rgba(10, 22, 51, 0.8);
+            border-radius: 8px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .floor-plan {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            transition: opacity 0.5s ease;
+            opacity: 0;
+        }
+
+        .floor-plan.active {
+            opacity: 1;
+        }
+
+        .floor-title {
+            font-size: 1.5rem;
+            color: #62f7ff;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+
+        .floor-layout {
+            width: 90%;
+            height: 80%;
+            position: relative;
+            background: rgba(16, 31, 63, 0.5);
+            border-radius: 8px;
+            border: 1px solid #2a4a94;
+            overflow: hidden;
+        }
+
+        .room {
+            position: absolute;
+            background: rgba(26, 58, 122, 0.3);
+            border: 1px solid #2a4a94;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+            overflow: hidden;
+            cursor: pointer;
+        }
+
+        .room:hover {
+            background: rgba(26, 58, 122, 0.5);
+            border-color: #4dabff;
+        }
+
+        .room-label {
+            font-size: 0.7rem;
+            color: #a0aec0;
+            text-align: center;
+            padding: 2px;
+        }
+
+        .device-marker {
+            position: absolute;
+            width: 16px;
+            height: 16px;
             border-radius: 50%;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 0 6px currentColor;
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-right: 15px;
+            font-size: 8px;
             color: white;
+            z-index: 10;
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+
+        .device-marker:hover {
+            transform: translate(-50%, -50%) scale(1.4);
+            z-index: 20;
+        }
+
+        .device-normal {
+            background: #4CAF50;
+            color: #4CAF50;
+        }
+
+        .device-warning {
+            background: #FF9800;
+            color: #FF9800;
+        }
+
+        .device-error {
+            background: #F44336;
+            color: #F44336;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7); }
+            70% { box-shadow: 0 0 0 8px rgba(244, 67, 54, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
+        }
+
+        .floor-info {
+            width: 30%;
+            padding-left: 15px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .floor-selector {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            margin-bottom: 20px;
+        }
+
+        .floor-btn {
+            padding: 10px 15px;
+            background: rgba(26, 58, 122, 0.5);
+            border: 1px solid #2a4a94;
+            border-radius: 6px;
+            cursor: pointer;
+            text-align: center;
+            transition: all 0.3s;
+            color: #a0aec0;
+        }
+
+        .floor-btn:hover {
+            background: rgba(26, 58, 122, 0.8);
+            border-color: #4dabff;
+            color: #62f7ff;
+        }
+
+        .floor-btn.active {
+            background: rgba(77, 171, 255, 0.3);
+            border-color: #4dabff;
+            color: #62f7ff;
+            box-shadow: 0 0 10px rgba(77, 171, 255, 0.5);
+        }
+
+        .floor-details h3 {
+            color: #62f7ff;
+            margin-bottom: 15px;
+            font-size: 1.1rem;
+        }
+
+        .floor-stats {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .floor-stat {
+            display: flex;
+            justify-content: space-between;
+            padding: 8px 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .stat-label {
+            color: #a0aec0;
+        }
+
+        .stat-value {
+            color: #4dabff;
+            font-weight: bold;
+        }
+
+        .stat-value.online {
+            color: #4CAF50;
+        }
+
+        .stat-value.warning {
+            color: #FF9800;
+        }
+
+        .device-list-mini {
+            max-height: 200px;
+            overflow-y: auto;
+        }
+
+        .device-item-mini {
+            display: flex;
+            align-items: center;
+            padding: 6px 8px;
+            margin-bottom: 5px;
+            background: rgba(26, 58, 122, 0.3);
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 0.8rem;
+        }
+
+        .device-item-mini:hover {
+            background: rgba(77, 171, 255, 0.2);
+            transform: translateX(3px);
+        }
+
+        .device-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+
+        .device-name-mini {
+            flex: 1;
+            color: #e6e6e6;
+        }
+
+        .device-position {
+            color: #a0aec0;
+            font-size: 0.7rem;
+        }
+        
+        .chart-container {
+            height: 30vh;
+            min-height: 200px;
+            flex-shrink: 0;
+        }
+        
+        .footer {
+            height: 5vh;
+            min-height: 30px;
+            max-height: 50px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: #a0aec0;
+            font-size: clamp(0.7rem, 0.9vw, 0.9rem);
+            margin-top: 1vh;
+            flex-shrink: 0;
+        }
+        
+        .update-time {
+            color: #62f7ff;
+        }
+        
+        .data-flow {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            background: #62f7ff;
+            box-shadow: 0 0 8px #62f7ff;
+            animation: flow 3s linear infinite;
+            z-index: 1;
+        }
+        
+        @keyframes flow {
+            0% { transform: translate(0, 0); opacity: 0; }
+            10% { opacity: 1; }
+            90% { opacity: 1; }
+            100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
+        }
+        
+        /* 模态框样式 */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            backdrop-filter: blur(5px);
         }
         
-        .device-item.warning .device-icon {
-            background: #e74c3c;
+        .modal-content {
+            background: rgba(16, 31, 63, 0.95);
+            border-radius: 1vh;
+            border: 1px solid #1a3a7a;
+            box-shadow: 0 0 30px rgba(26, 58, 122, 0.8);
+            width: 80%;
+            max-width: 800px;
+            max-height: 80%;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .modal-header {
+            padding: 1.5vh 2vw;
+            border-bottom: 1px solid #1a3a7a;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba(10, 26, 58, 0.8);
+        }
+        
+        .modal-title {
+            font-size: 1.3rem;
+            color: #62f7ff;
+        }
+        
+        .modal-close {
+            background: none;
+            border: none;
+            color: #a0aec0;
+            font-size: 1.5rem;
+            cursor: pointer;
+            transition: all 0.3s;
         }
         
-        .device-item.normal .device-icon {
-            background: #2ecc71;
+        .modal-close:hover {
+            color: #62f7ff;
         }
         
-        .device-info {
+        .modal-body {
+            padding: 2vh 2vw;
             flex: 1;
+            overflow-y: auto;
         }
         
-        .device-name {
-            font-weight: 600;
-            margin-bottom: 5px;
+        .device-detail-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
         }
         
-        .device-details {
-            font-size: 13px;
-            color: #666;
+        .detail-section {
+            margin-bottom: 20px;
         }
         
-        .alert-badge {
-            background: #e74c3c;
-            color: white;
-            padding: 3px 8px;
-            border-radius: 12px;
-            font-size: 12px;
-            font-weight: 600;
+        .detail-section h3 {
+            color: #62f7ff;
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+            border-bottom: 1px solid #1a3a7a;
+            padding-bottom: 5px;
         }
         
-        .normal-badge {
-            background: #2ecc71;
-            color: white;
-            padding: 3px 8px;
-            border-radius: 12px;
-            font-size: 12px;
-            font-weight: 600;
+        .detail-item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
         
-        .table-container {
-            overflow-x: auto;
-            border-radius: 10px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        .detail-label {
+            color: #a0aec0;
         }
         
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            background: white;
+        .detail-value {
+            color: #e6e6e6;
+            font-weight: bold;
         }
         
-        th {
-            background: #2c3e50;
-            color: white;
-            padding: 15px 12px;
-            text-align: left;
-            font-weight: 600;
+        .control-buttons {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
         }
         
-        td {
-            padding: 12px;
-            border-bottom: 1px solid #eaeaea;
+        .control-btn {
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-weight: bold;
         }
         
-        tr:hover {
-            background-color: #f5f7fa;
+        .btn-restart {
+            background: #ffa726;
+            color: #fff;
         }
         
-        .status-indicator {
-            display: inline-block;
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            margin-right: 5px;
+        .btn-restart:hover {
+            background: #ff9800;
         }
         
-        .status-good {
-            background-color: #2ecc71;
+        .btn-shutdown {
+            background: #f44336;
+            color: #fff;
         }
         
-        .status-warning {
-            background-color: #f39c12;
+        .btn-shutdown:hover {
+            background: #d32f2f;
         }
         
-        .status-critical {
-            background-color: #e74c3c;
+        .btn-reset {
+            background: #4dabff;
+            color: #fff;
         }
         
-        .health-bar {
-            height: 6px;
-            background: #ecf0f1;
-            border-radius: 3px;
-            overflow: hidden;
+        .btn-reset:hover {
+            background: #2196f3;
         }
         
-        .health-fill {
-            height: 100%;
-            border-radius: 3px;
+        .history-chart {
+            height: 200px;
+            margin-top: 15px;
         }
         
-        .health-good {
-            background: #2ecc71;
-            width: 85%;
+        .search-controls {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+        }
+        
+        .search-input {
+            flex: 1;
+            background: rgba(26, 58, 122, 0.3);
+            border: 1px solid #2a4a94;
+            border-radius: 4px;
+            padding: 8px 12px;
+            color: #e6e6e6;
         }
         
-        .health-warning {
-            background: #f39c12;
-            width: 65%;
+        .search-input:focus {
+            outline: none;
+            border-color: #4dabff;
         }
         
-        .health-critical {
-            background: #e74c3c;
-            width: 40%;
+        .date-input {
+            background: rgba(26, 58, 122, 0.3);
+            border: 1px solid #2a4a94;
+            border-radius: 4px;
+            padding: 8px 12px;
+            color: #e6e6e6;
         }
         
-        .full-width {
-            width: 100%;
+        /* 响应式设计 - 中等屏幕 */
+        @media screen and (max-width: 1400px) {
+            .left-panel, .right-panel {
+                width: 28%;
+            }
+            
+            .center-panel {
+                width: 44%;
+            }
+        }
+        
+        /* 响应式设计 - 小屏幕 */
+        @media screen and (max-width: 1200px) {
+            .dashboard {
+                min-width: 1000px;
+            }
+            
+            .left-panel, .right-panel {
+                min-width: 250px;
+            }
+            
+            .center-panel {
+                min-width: 450px;
+            }
         }
         
-        @media (max-width: 1024px) {
-            .top-section {
+        /* 响应式设计 - 超小屏幕 */
+        @media screen and (max-width: 1000px) {
+            .dashboard {
+                min-width: 800px;
+                padding: 1vh 1vw;
+            }
+            
+            .main-content {
                 flex-direction: column;
+                gap: 1vh;
+            }
+            
+            .left-panel, .right-panel, .center-panel {
+                width: 100%;
+                min-width: auto;
+            }
+            
+            .left-panel, .right-panel {
+                flex-direction: row;
             }
             
-            .stats-container {
+            .panel {
+                flex: 1;
+            }
+        }
+        
+        /* 响应式设计 - 移动端 */
+        @media screen and (max-width: 768px) {
+            .dashboard {
+                min-width: auto;
+                min-height: auto;
+                padding: 0.5vh 0.5vw;
+            }
+            
+            .header {
+                height: 8vh;
+                padding: 0 1vw;
+                margin-bottom: 1vh;
+            }
+            
+            .main-content {
+                gap: 1vh;
+            }
+            
+            .left-panel, .right-panel {
                 flex-direction: column;
             }
+            
+            .footer {
+                height: 4vh;
+                font-size: 0.7rem;
+            }
         }
-</style>
+    </style>
\ No newline at end of file