From e066bca3dbb46c22efce8a90795ca83f9575ff92 Mon Sep 17 00:00:00 2001
From: Wangxin <wangxin@icanag.com>
Date: Tue, 28 Oct 2025 20:30:19 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E3=80=90web=E3=80=91=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=AB=99=E5=86=85=E4=BF=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ALOps_sys_fe/alops-ui/package.json            |    1 +
 ALOps_sys_fe/alops-ui/src/layout/index.vue    |   22 +-
 ALOps_sys_fe/alops-ui/src/permission.js       |   28 +-
 ALOps_sys_fe/alops-ui/src/router/index.js     |   25 +-
 .../alops-ui/src/store/modules/permission.js  |    1 +
 .../alops-ui/src/store/modules/user.js        |   20 +-
 ALOps_sys_fe/alops-ui/src/utils/websocket.js  |  225 ++
 ALOps_sys_fe/alops-ui/src/views/dp.html       | 1990 +++++++++++++++++
 ALOps_sys_fe/alops-ui/src/views/index_1.vue   |  571 +++++
 ALOps_sys_fe/alops-ui/src/views/login.vue     |    2 +-
 .../src/views/message/notificationTest.vue    |  197 ++
 11 files changed, 3065 insertions(+), 17 deletions(-)
 create mode 100644 ALOps_sys_fe/alops-ui/src/utils/websocket.js
 create mode 100644 ALOps_sys_fe/alops-ui/src/views/dp.html
 create mode 100644 ALOps_sys_fe/alops-ui/src/views/index_1.vue
 create mode 100644 ALOps_sys_fe/alops-ui/src/views/message/notificationTest.vue

diff --git a/ALOps_sys_fe/alops-ui/package.json b/ALOps_sys_fe/alops-ui/package.json
index aa33ef61..e006c998 100644
--- a/ALOps_sys_fe/alops-ui/package.json
+++ b/ALOps_sys_fe/alops-ui/package.json
@@ -44,6 +44,7 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "splitpanes": "2.4.1",
+    "tencentcloud-sdk-nodejs": "^4.1.135",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
diff --git a/ALOps_sys_fe/alops-ui/src/layout/index.vue b/ALOps_sys_fe/alops-ui/src/layout/index.vue
index 05e2fa91..24e158ed 100644
--- a/ALOps_sys_fe/alops-ui/src/layout/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/layout/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
+  <div v-if="!isFullscreen" :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
     <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
@@ -11,6 +11,10 @@
       <settings ref="settingRef"/>
     </div>
   </div>
+  <!-- 全屏模式 -->
+  <div v-else class="fullscreen-wrapper">
+    <app-main/>
+  </div>
 </template>
 
 <script>
@@ -38,6 +42,10 @@ export default {
       needTagsView: state => state.settings.tagsView,
       fixedHeader: state => state.settings.fixedHeader
     }),
+    isFullscreen() {
+      // 检查当前路由是否需要全屏显示
+      return this.$route.meta.fullscreen === true;
+    },
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
@@ -76,6 +84,18 @@ export default {
       top: 0;
     }
   }
+  
+  .fullscreen-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: #f0f2f5;
+  }
 
   .drawer-bg {
     background: #000;
diff --git a/ALOps_sys_fe/alops-ui/src/permission.js b/ALOps_sys_fe/alops-ui/src/permission.js
index b66190b3..e0e32981 100644
--- a/ALOps_sys_fe/alops-ui/src/permission.js
+++ b/ALOps_sys_fe/alops-ui/src/permission.js
@@ -21,7 +21,12 @@ router.beforeEach((to, from, next) => {
     to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
     /* has token*/
     if (to.path === '/login') {
-      next({ path: '/' })
+      // 登录后根据角色重定向到不同主页
+      if (store.getters.roles && store.getters.roles.includes('admin')) {
+        next({ path: '/index_admin' })
+      } else {
+        next({ path: '/' })
+      }
       NProgress.done()
     } else if (isWhiteList(to.path)) {
       next()
@@ -29,21 +34,32 @@ router.beforeEach((to, from, next) => {
       if (store.getters.roles.length === 0) {
         isRelogin.show = true
         // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
+        store.dispatch('user/getInfo').then(() => {
           isRelogin.show = false
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
+          store.dispatch('permission/GenerateRoutes').then(accessRoutes => {
             // 根据roles权限生成可访问的路由表
             router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+            // 获取角色信息后，判断是跳转到默认路由还是管理员路由
+            const redirectPath = store.getters.roles.includes('admin') ? '/index_admin' : to.path
+            next({ path: redirectPath, replace: true }) // hack方法 确保addRoutes已完成
           })
         }).catch(err => {
-            store.dispatch('LogOut').then(() => {
+            store.dispatch('user/LogOut').then(() => {
               Message.error(err)
               next({ path: '/' })
             })
           })
       } else {
-        next()
+        // 如果访问的是根路径，根据角色重定向
+        if (to.path === '/') {
+          if (store.getters.roles.includes('admin')) {
+            next({ path: '/index_admin', replace: true })
+          } else {
+            next()
+          }
+        } else {
+          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 f5dba92c..56fbd564 100644
--- a/ALOps_sys_fe/alops-ui/src/router/index.js
+++ b/ALOps_sys_fe/alops-ui/src/router/index.js
@@ -30,6 +30,19 @@ import Layout from '@/layout'
 
 // 公共路由
 export const constantRoutes = [
+  {
+    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,
@@ -70,7 +83,7 @@ export const constantRoutes = [
         path: 'index',
         component: () => import('@/views/index'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+        meta: { title: '首页', icon: 'dashboard', affix: true, roles: ['common'] }
       }
     ]
   },
@@ -180,5 +193,13 @@ Router.prototype.replace = function push(location) {
 export default new Router({
   mode: 'history', // 去掉url中的#
   scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
+  routes: [
+    ...constantRoutes,
+    // 站内信测试页面路由
+    {
+      path: '/message/notificationTest',
+      component: () => import('@/views/message/notificationTest'),
+      hidden: true
+    }
+  ]
 })
diff --git a/ALOps_sys_fe/alops-ui/src/store/modules/permission.js b/ALOps_sys_fe/alops-ui/src/store/modules/permission.js
index b549ef07..52246431 100644
--- a/ALOps_sys_fe/alops-ui/src/store/modules/permission.js
+++ b/ALOps_sys_fe/alops-ui/src/store/modules/permission.js
@@ -6,6 +6,7 @@ import ParentView from '@/components/ParentView'
 import InnerLink from '@/layout/components/InnerLink'
 
 const permission = {
+  namespaced: true,
   state: {
     routes: [],
     addRoutes: [],
diff --git a/ALOps_sys_fe/alops-ui/src/store/modules/user.js b/ALOps_sys_fe/alops-ui/src/store/modules/user.js
index 6a7b710a..b487071a 100644
--- a/ALOps_sys_fe/alops-ui/src/store/modules/user.js
+++ b/ALOps_sys_fe/alops-ui/src/store/modules/user.js
@@ -2,10 +2,12 @@ import router from '@/router'
 import { MessageBox, } from 'element-ui'
 import { login, logout, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
+import websocketClient from '@/utils/websocket.js'
 import { isHttp, isEmpty } from "@/utils/validate"
 import defAva from '@/assets/images/profile.jpg'
 
 const user = {
+  namespaced: true,
   state: {
     token: getToken(),
     id: '',
@@ -42,13 +44,10 @@ const user = {
 
   actions: {
     // 登录
-    Login({ commit }, userInfo) {
-      const username = userInfo.username.trim()
-      const password = userInfo.password
-      const code = userInfo.code
-      const uuid = userInfo.uuid
+    login({ commit }, userInfo) {
+      const { username, password, code, uuid } = userInfo
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
+        login(username.trim(), password, code, uuid).then(res => {
           setToken(res.token)
           commit('SET_TOKEN', res.token)
           resolve()
@@ -59,7 +58,7 @@ const user = {
     },
 
     // 获取用户信息
-    GetInfo({ commit, state }) {
+    getInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
         getInfo().then(res => {
           const user = res.user
@@ -77,6 +76,9 @@ const user = {
           commit('SET_NAME', user.userName)
           commit('SET_NICK_NAME', user.nickName)
           commit('SET_AVATAR', avatar)
+          
+          // 初始化WebSocket连接，用于接收站内信
+          websocketClient.init(user.userId)
           /* 初始密码提示 */
           if(res.isDefaultModifyPwd) {
             MessageBox.confirm('您的密码还是初始密码，请修改密码！',  '安全提示', {  confirmButtonText: '确定',  cancelButtonText: '取消',  type: 'warning' }).then(() => {
@@ -104,6 +106,8 @@ const user = {
           commit('SET_ROLES', [])
           commit('SET_PERMISSIONS', [])
           removeToken()
+          // 关闭WebSocket连接
+          websocketClient.close()
           resolve()
         }).catch(error => {
           reject(error)
@@ -116,6 +120,8 @@ const user = {
       return new Promise(resolve => {
         commit('SET_TOKEN', '')
         removeToken()
+        // 关闭WebSocket连接
+        websocketClient.close()
         resolve()
       })
     }
diff --git a/ALOps_sys_fe/alops-ui/src/utils/websocket.js b/ALOps_sys_fe/alops-ui/src/utils/websocket.js
new file mode 100644
index 00000000..19653ffe
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/utils/websocket.js
@@ -0,0 +1,225 @@
+import { Message, Notification } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+class WebSocketClient {
+  constructor() {
+    this.ws = null
+    this.url = ''
+    this.userId = ''
+    this.reconnectAttempts = 0
+    this.maxReconnectAttempts = 5
+    this.reconnectInterval = 3000
+    this.connected = false
+  }
+
+  // 初始化WebSocket连接
+  init(userId) {
+    // 重置重连计数
+    this.reconnectAttempts = 0
+    
+    // 检查必要参数
+    if (!userId) {
+      console.error('WebSocket初始化失败: 用户ID不能为空')
+      return false
+    }
+    
+    // 获取token并检查登录状态
+    // 检查token有效性
+    const token = getToken()
+    if (!token) {
+      console.warn('WebSocket初始化失败: 未获取到token，请先登录')
+      return false
+    }
+    
+    this.userId = userId
+    // 确保baseURL不包含多余的引号或反引号
+    let baseURL = process.env.VUE_APP_BASE_API
+    if (!baseURL) {
+      console.error('WebSocket初始化失败: 未配置VUE_APP_BASE_API环境变量')
+      return false
+    }
+    
+    // 清理baseURL格式
+    baseURL = baseURL.replace(/[`'"\s]/g, '')
+    console.log('清理后的baseURL:', baseURL)
+    
+    // 构建WebSocket URL，将http替换为ws，https替换为wss
+    let wsProtocol = baseURL.includes('https') ? 'wss' : 'ws'
+    let wsBaseURL = baseURL.replace(/^https?:\/\//, '')
+    
+    // 将token添加到URL查询参数
+    this.url = `${wsProtocol}://${wsBaseURL}/ws/onlineMessage?userId=${userId}&token=${token}`
+    
+    // 输出环境变量和配置信息以调试
+    console.log('WebSocket配置:', {
+      baseURL,
+      userId,
+      wsProtocol,
+      wsBaseURL,
+      hasToken: !!token
+    })
+    console.log('尝试连接WebSocket URL:', this.url)
+    
+    // 初始化连接
+    this.connect()
+    return true
+  }
+  
+  // 手动重新初始化连接（用于登录后重新连接）
+  reinitialize() {
+    if (this.userId && getToken()) {
+      console.log('尝试重新初始化WebSocket连接...')
+      return this.init(this.userId)
+    }
+    console.warn('无法重新初始化WebSocket连接: 用户ID或token缺失')
+    return false
+  }
+
+  // 建立连接
+  connect() {
+    // 检查URL是否已初始化
+    if (!this.url) {
+      console.error('WebSocket连接失败: URL未初始化')
+      return
+    }
+    
+    // 确保之前的连接已关闭
+    if (this.ws) {
+      try {
+        this.ws.close()
+      } catch (e) {
+        console.warn('关闭旧WebSocket连接时出错:', e)
+      }
+      this.ws = null
+    }
+    
+    try {
+      console.log(`正在建立WebSocket连接 (尝试 ${this.reconnectAttempts + 1}/${this.maxReconnectAttempts})`)
+      this.ws = new WebSocket(this.url)
+      
+      // 设置事件监听
+      this.ws.onopen = this.onOpen.bind(this)
+      this.ws.onmessage = this.onMessage.bind(this)
+      this.ws.onerror = this.onError.bind(this)
+      this.ws.onclose = this.onClose.bind(this)
+    } catch (error) {
+      console.error('WebSocket连接异常:', error)
+      // 直接触发重连
+      setTimeout(() => this.reconnect(), this.reconnectInterval)
+    }
+  }
+
+  // 连接打开回调
+  onOpen(event) {
+    console.log('WebSocket连接已建立')
+    this.connected = true
+    this.reconnectAttempts = 0
+  }
+
+  // 接收消息回调
+  onMessage(event) {
+    try {
+      const message = JSON.parse(event.data)
+      this.handleMessage(message)
+    } catch (error) {
+      console.error('解析消息失败:', error)
+    }
+  }
+
+  // 处理接收到的消息
+  handleMessage(message) {
+    console.log('收到站内信:', message)
+    
+    // 使用Element UI的Notification组件显示消息
+    Notification({
+      title: message.title || '系统通知',
+      message: message.content,
+      type: 'info',
+      duration: 10000, // 10秒后自动关闭
+      showClose: true,
+      onClick: () => {
+        // 可以在这里添加点击通知后的处理逻辑
+        console.log('用户点击了通知:', message.messageId)
+      }
+    })
+  }
+
+  // 错误处理回调
+  onError(error) {
+    console.error('WebSocket错误:', error)
+    // 添加更详细的错误信息
+    if (this.ws) {
+      console.error('WebSocket状态:', this.ws.readyState)
+      console.error('WebSocket URL:', this.ws.url)
+    }
+    // 可能的原因分析
+    console.error('可能的连接失败原因：')
+    console.error('1. 服务器WebSocket服务未运行或路径错误')
+    console.error('2. 网络问题或防火墙阻止')
+    console.error('3. CORS配置问题')
+    console.error('4. token无效或过期')
+  }
+
+  // 连接关闭回调
+  onClose(event) {
+    console.log('WebSocket连接已关闭', event)
+    // 输出关闭原因和代码
+    console.log('关闭代码:', event.code)
+    console.log('关闭原因:', event.reason)
+    console.log('是否正常关闭:', event.wasClean)
+    
+    this.connected = false
+    this.reconnect()
+  }
+
+  // 重连逻辑
+  reconnect() {
+    // 检查token是否仍然有效
+    const token = getToken()
+    if (!token) {
+      console.warn('WebSocket重连取消: token已失效或不存在')
+      return
+    }
+    
+    if (this.reconnectAttempts < this.maxReconnectAttempts) {
+      this.reconnectAttempts++
+      // 指数退避策略 - 每次重连间隔增加
+      const currentInterval = this.reconnectInterval * Math.pow(1.5, this.reconnectAttempts - 1)
+      console.log(`WebSocket将在 ${Math.round(currentInterval/1000)} 秒后进行第${this.reconnectAttempts}次重连...`)
+      
+      setTimeout(() => {
+        // 重连前刷新token参数
+        if (this.url && this.userId) {
+          this.url = this.url.replace(/token=[^&]*/, `token=${token}`)
+        }
+        this.connect()
+      }, currentInterval)
+    } else {
+      console.error('WebSocket重连失败，已达到最大重试次数')
+      // 不显示错误消息，避免干扰用户体验
+      // Message.error('消息服务连接失败，请刷新页面重试')
+    }
+  }
+
+  // 发送消息
+  send(data) {
+    if (this.connected && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(data))
+    } else {
+      console.error('WebSocket连接未建立')
+    }
+  }
+
+  // 关闭连接
+  close() {
+    if (this.ws) {
+      this.ws.close()
+      this.ws = null
+    }
+    this.connected = false
+  }
+}
+
+// 导出单例实例
+const websocketClient = new WebSocketClient()
+export default websocketClient
\ No newline at end of file
diff --git a/ALOps_sys_fe/alops-ui/src/views/dp.html b/ALOps_sys_fe/alops-ui/src/views/dp.html
new file mode 100644
index 00000000..b2422655
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/views/dp.html
@@ -0,0 +1,1990 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>唐山市设备监控大屏 - 智能管理版</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js"></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;
+        }
+        
+        /* SVG地图背景 */
+        .map-background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.4;
+        }
+        
+        .map-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at 30% 40%, rgba(26, 58, 122, 0.3) 0%, transparent 50%),
+                        radial-gradient(circle at 70% 60%, rgba(77, 171, 255, 0.2) 0%, transparent 50%);
+            z-index: -1;
+        }
+        
+        .header {
+            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 {
+            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;
+        }
+        
+        .time-display {
+            font-size: clamp(1rem, 1.5vw, 1.5rem);
+            color: #62f7ff;
+            text-shadow: 0 0 5px rgba(98, 247, 255, 0.7);
+        }
+        
+        .main-content {
+            flex: 1;
+            display: flex;
+            gap: 1.5vh;
+            min-height: 0;
+        }
+        
+        .left-panel, .right-panel {
+            width: 25%;
+            min-width: 280px;
+            display: flex;
+            flex-direction: column;
+            gap: 1.5vh;
+            min-height: 0;
+        }
+        
+        .center-panel {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 1.5vh;
+            min-height: 0;
+            min-width: 500px;
+        }
+        
+        .panel {
+            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;
+            backdrop-filter: blur(5px);
+            flex: 1;
+        }
+        
+        .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);
+        }
+        
+        .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;
+        }
+        
+        .panel-title::before {
+            content: '';
+            display: inline-block;
+            width: 4px;
+            height: 18px;
+            background: #4dabff;
+            margin-right: 8px;
+            border-radius: 2px;
+        }
+        
+        .panel-actions {
+            display: flex;
+            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;
+        }
+        
+        .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;
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+        
+        .stat-item:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(26, 58, 122, 0.5);
+            border-color: #4dabff;
+        }
+        
+        .stat-value {
+            font-size: clamp(1.5rem, 2.5vw, 2.2rem);
+            font-weight: bold;
+            margin: 0.5vh 0;
+        }
+        
+        .stat-total {
+            color: #ff6b6b;
+        }
+        
+        .stat-high {
+            color: #ff6b6b;
+        }
+        
+        .stat-medium {
+            color: #ffa726;
+        }
+        
+        .stat-low {
+            color: #4dabff;
+        }
+        
+        .stat-label {
+            font-size: clamp(0.7rem, 0.9vw, 0.9rem);
+            color: #a0aec0;
+        }
+        
+        .device-list {
+            height: 30vh;
+            min-height: 200px;
+            overflow-y: auto;
+            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: 1.2vh 1vh;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+        
+        .device-item:hover {
+            background: rgba(26, 58, 122, 0.3);
+            transform: translateX(5px);
+        }
+        
+        .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-name {
+            flex: 1;
+            font-size: clamp(0.8rem, 1vw, 1rem);
+        }
+        
+        .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;
+            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);
+        }
+        
+        .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;
+        }
+        
+        .modal-close:hover {
+            color: #62f7ff;
+        }
+        
+        .modal-body {
+            padding: 2vh 2vw;
+            flex: 1;
+            overflow-y: auto;
+        }
+        
+        .device-detail-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+        }
+        
+        .detail-section {
+            margin-bottom: 20px;
+        }
+        
+        .detail-section h3 {
+            color: #62f7ff;
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+            border-bottom: 1px solid #1a3a7a;
+            padding-bottom: 5px;
+        }
+        
+        .detail-item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .detail-label {
+            color: #a0aec0;
+        }
+        
+        .detail-value {
+            color: #e6e6e6;
+            font-weight: bold;
+        }
+        
+        .control-buttons {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
+        }
+        
+        .control-btn {
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-weight: bold;
+        }
+        
+        .btn-restart {
+            background: #ffa726;
+            color: #fff;
+        }
+        
+        .btn-restart:hover {
+            background: #ff9800;
+        }
+        
+        .btn-shutdown {
+            background: #f44336;
+            color: #fff;
+        }
+        
+        .btn-shutdown:hover {
+            background: #d32f2f;
+        }
+        
+        .btn-reset {
+            background: #4dabff;
+            color: #fff;
+        }
+        
+        .btn-reset:hover {
+            background: #2196f3;
+        }
+        
+        .history-chart {
+            height: 200px;
+            margin-top: 15px;
+        }
+        
+        .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;
+        }
+        
+        .search-input:focus {
+            outline: none;
+            border-color: #4dabff;
+        }
+        
+        .date-input {
+            background: rgba(26, 58, 122, 0.3);
+            border: 1px solid #2a4a94;
+            border-radius: 4px;
+            padding: 8px 12px;
+            color: #e6e6e6;
+        }
+        
+        /* 响应式设计 - 中等屏幕 */
+        @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 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;
+            }
+            
+            .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>
+</head>
+<body>
+    <div id="app" class="dashboard">
+        <!-- SVG地图背景 -->
+        <div class="map-background">
+            <svg width="100%" height="100%" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet">
+                <!-- 唐山市轮廓 -->
+                <path id="tangshan-outline" d="M200,200 Q300,150 400,200 Q500,180 600,250 Q700,220 800,200 Q850,300 700,400 Q600,500 500,450 Q400,500 300,400 Q150,350 200,200 Z" 
+                      fill="rgba(13, 36, 82, 0.3)" 
+                      stroke="#4dabff" 
+                      stroke-width="3" 
+                      stroke-dasharray="10,5"
+                      filter="url(#glow)"/>
+                
+                <!-- 区县边界 -->
+                <path d="M300,250 L500,280 L450,350 L350,320 Z" 
+                      fill="rgba(26, 58, 122, 0.2)" 
+                      stroke="#62f7ff" 
+                      stroke-width="1.5" 
+                      stroke-dasharray="5,3"/>
+                
+                <path d="M550,300 L700,280 L750,350 L600,380 Z" 
+                      fill="rgba(26, 58, 122, 0.2)" 
+                      stroke="#62f7ff" 
+                      stroke-width="1.5" 
+                      stroke-dasharray="5,3"/>
+                
+                <path d="M350,350 L450,380 L400,450 L300,420 Z" 
+                      fill="rgba(26, 58, 122, 0.2)" 
+                      stroke="#62f7ff" 
+                      stroke-width="1.5" 
+                      stroke-dasharray="5,3"/>
+                
+                <!-- 主要城市点 -->
+                <circle cx="350" cy="280" r="8" fill="#4dabff" filter="url(#glow)">
+                    <animate attributeName="r" values="8;12;8" dur="3s" repeatCount="indefinite"/>
+                </circle>
+                <circle cx="550" cy="320" r="8" fill="#4dabff" filter="url(#glow)">
+                    <animate attributeName="r" values="8;12;8" dur="3s" repeatCount="indefinite" begin="1s"/>
+                </circle>
+                <circle cx="400" cy="400" r="8" fill="#4dabff" filter="url(#glow)">
+                    <animate attributeName="r" values="8;12;8" dur="3s" repeatCount="indefinite" begin="2s"/>
+                </circle>
+                
+                <!-- 数据流动线 -->
+                <path id="data-flow-1" d="M350,280 L550,320" stroke="url(#gradient)" stroke-width="2" stroke-dasharray="10,5">
+                    <animate attributeName="stroke-dashoffset" values="0;50" dur="2s" repeatCount="indefinite"/>
+                </path>
+                
+                <path id="data-flow-2" d="M550,320 L400,400" stroke="url(#gradient)" stroke-width="2" stroke-dasharray="10,5">
+                    <animate attributeName="stroke-dashoffset" values="0;50" dur="2s" repeatCount="indefinite" begin="0.5s"/>
+                </path>
+                
+                <path id="data-flow-3" d="M400,400 L350,280" stroke="url(#gradient)" stroke-width="2" stroke-dasharray="10,5">
+                    <animate attributeName="stroke-dashoffset" values="0;50" dur="2s" repeatCount="indefinite" begin="1s"/>
+                </path>
+                
+                <!-- 滤镜效果 -->
+                <defs>
+                    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
+                        <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8" result="glow"/>
+                        <feComposite in="SourceGraphic" in2="glow" operator="over"/>
+                    </filter>
+                    
+                    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                        <stop offset="0%" stop-color="#4dabff" stop-opacity="0"/>
+                        <stop offset="50%" stop-color="#62f7ff" stop-opacity="1"/>
+                        <stop offset="100%" stop-color="#4dabff" stop-opacity="0"/>
+                    </linearGradient>
+                </defs>
+            </svg>
+        </div>
+        
+        <div class="map-overlay"></div>
+        
+        <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="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-item" @click="filterByWarningLevel('high')">
+                            <div class="stat-value stat-high">{{ warningStats.highLevel }}</div>
+                            <div class="stat-label">高级别预警</div>
+                        </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-item" @click="filterByWarningLevel('low')">
+                            <div class="stat-value stat-low">{{ warningStats.lowLevel }}</div>
+                            <div class="stat-label">低级别预警</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <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>
+                </div>
+            </div>
+            
+            <!-- 中间面板 - 楼层房间布局展示 -->
+            <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>
+                    <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>
+                        
+                        <!-- 楼层信息面板 -->
+                        <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>
+                            <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="modal-overlay" v-if="showDeviceModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">设备详情 - {{ selectedDevice.name }}</h2>
+                    <button class="modal-close" @click="closeDeviceModal">&times;</button>
+                </div>
+                <div class="modal-body">
+                    <div class="device-detail-grid">
+                        <div class="detail-section">
+                            <h3>基本信息</h3>
+                            <div class="detail-item">
+                                <span class="detail-label">设备名称:</span>
+                                <span class="detail-value">{{ selectedDevice.name }}</span>
+                            </div>
+                            <div class="detail-item">
+                                <span class="detail-label">设备ID:</span>
+                                <span class="detail-value">{{ selectedDevice.id }}</span>
+                            </div>
+                            <div class="detail-item">
+                                <span class="detail-label">所在位置:</span>
+                                <span class="detail-value">{{ selectedDevice.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>
+                    
+                    <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>
+
+    <script>
+        new Vue({
+            el: '#app',
+            data: {
+                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;
+                },
+
+                // 新增功能方法
+                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);
+                },
+
+                // 楼层设备展示相关方法
+                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>
+</body>
+</html>
\ No newline at end of file
diff --git a/ALOps_sys_fe/alops-ui/src/views/index_1.vue b/ALOps_sys_fe/alops-ui/src/views/index_1.vue
new file mode 100644
index 00000000..032f6767
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/views/index_1.vue
@@ -0,0 +1,571 @@
+<template>
+  <div class="body">
+    <div class="container">
+      <!-- 管理员专属欢迎信息 -->
+      <div class="admin-welcome">
+        <h1>管理员控制台</h1>
+        <p>欢迎回来，管理员！您可以在这里查看所有系统信息和管理用户。</p>
+      </div>
+        <!-- 上层：三个模块并排 -->
+        <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>
+                    <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>
+                        <div class="stat-card" :class="alertMessageData.monthCount == 0?'normal':''">
+                            <div class="stat-label">月预警总数</div>
+                            <div class="stat-value">{{ alertMessageData.monthCount }}</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>
+                        <!-- 设备预警 -->
+                        <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>
+                    </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>
+                    <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>
+                    <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>
+                            <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>
+                            <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>
+            </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>
+                <div class="table-container">
+                    
+                    <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>
+            </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"
+
+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>
+
+<style lang="scss" scoped>
+.admin-welcome {
+  background-color: #f5f7fa;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  border-left: 4px solid #409eff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.admin-welcome h1 {
+  color: #409eff;
+  margin-bottom: 10px;
+  font-size: 24px;
+}
+
+.admin-welcome p {
+  color: #606266;
+  margin: 0;
+  font-size: 14px;
+}
+
+        .body {
+            background-color: #f5f7fa;
+            color: #333;
+            line-height: 1.6;
+            padding: 20px;
+        }
+        
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        
+        .header h1 {
+            color: #2c3e50;
+            margin-bottom: 10px;
+            font-size: 28px;
+        }
+        
+        .header p {
+            color: #7f8c8d;
+            font-size: 16px;
+        }
+        
+        .container {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        .top-section {
+            display: flex;
+            gap: 20px;
+        }
+        
+        .bottom-section {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        .panel {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        .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%;
+        }
+        
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+        }
+        
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #eaeaea;
+        }
+        
+        .card-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #2c3e50;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .card-title i {
+            color: #3498db;
+        }
+        
+        .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-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-card.warning {
+            background: linear-gradient(135deg, #e74c3c, #c0392b);
+            box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
+        }
+        
+        .stat-card.normal {
+            background: linear-gradient(135deg, #2ecc71, #27ae60);
+            box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
+        }
+        
+        .stat-value {
+            font-size: 32px;
+            font-weight: 700;
+            margin: 10px 0;
+        }
+        
+        .stat-label {
+            font-size: 14px;
+            opacity: 0.9;
+        }
+        
+        .device-list {
+            list-style: none;
+            overflow-y: auto;
+            overflow-x: hidden;
+            max-height: 255px;
+            padding-left: 0;
+        }
+        
+        .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;
+        }
+        
+        .device-item:hover {
+            background: #edf2f7;
+            transform: translateX(5px);
+        }
+        
+        .device-item.warning {
+            border-left-color: #e74c3c;
+        }
+        
+        .device-item.normal {
+            border-left-color: #2ecc71;
+        }
+        
+        .device-icon {
+            width: 40px;
+            height: 40px;
+            background: #3498db;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            color: white;
+        }
+        
+        .device-item.warning .device-icon {
+            background: #e74c3c;
+        }
+        
+        .device-item.normal .device-icon {
+            background: #2ecc71;
+        }
+        
+        .device-info {
+            flex: 1;
+        }
+        
+        .device-name {
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+        
+        .device-details {
+            font-size: 13px;
+            color: #666;
+        }
+        
+        .alert-badge {
+            background: #e74c3c;
+            color: white;
+            padding: 3px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 600;
+        }
+        
+        .normal-badge {
+            background: #2ecc71;
+            color: white;
+            padding: 3px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 600;
+        }
+        
+        .table-container {
+            overflow-x: auto;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        }
+        
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            background: white;
+        }
+        
+        th {
+            background: #2c3e50;
+            color: white;
+            padding: 15px 12px;
+            text-align: left;
+            font-weight: 600;
+        }
+        
+        td {
+            padding: 12px;
+            border-bottom: 1px solid #eaeaea;
+        }
+        
+        tr:hover {
+            background-color: #f5f7fa;
+        }
+        
+        .status-indicator {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            margin-right: 5px;
+        }
+        
+        .status-good {
+            background-color: #2ecc71;
+        }
+        
+        .status-warning {
+            background-color: #f39c12;
+        }
+        
+        .status-critical {
+            background-color: #e74c3c;
+        }
+        
+        .health-bar {
+            height: 6px;
+            background: #ecf0f1;
+            border-radius: 3px;
+            overflow: hidden;
+        }
+        
+        .health-fill {
+            height: 100%;
+            border-radius: 3px;
+        }
+        
+        .health-good {
+            background: #2ecc71;
+            width: 85%;
+        }
+        
+        .health-warning {
+            background: #f39c12;
+            width: 65%;
+        }
+        
+        .health-critical {
+            background: #e74c3c;
+            width: 40%;
+        }
+        
+        .full-width {
+            width: 100%;
+        }
+        
+        @media (max-width: 1024px) {
+            .top-section {
+                flex-direction: column;
+            }
+            
+            .stats-container {
+                flex-direction: column;
+            }
+        }
+</style>
diff --git a/ALOps_sys_fe/alops-ui/src/views/login.vue b/ALOps_sys_fe/alops-ui/src/views/login.vue
index 5bdda11c..889901da 100644
--- a/ALOps_sys_fe/alops-ui/src/views/login.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/login.vue
@@ -141,7 +141,7 @@ export default {
             Cookies.remove("password")
             Cookies.remove('rememberMe')
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
+          this.$store.dispatch("user/login", this.loginForm).then(() => {
             this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
           }).catch(() => {
             this.loading = false
diff --git a/ALOps_sys_fe/alops-ui/src/views/message/notificationTest.vue b/ALOps_sys_fe/alops-ui/src/views/message/notificationTest.vue
new file mode 100644
index 00000000..cd21e953
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/views/message/notificationTest.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="notification-test-container">
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span>站内信功能测试</span>
+        </div>
+      </template>
+      
+      <div class="test-content">
+        <el-alert
+          title="WebSocket连接状态"
+          :type="connectionStatus === 'connected' ? 'success' : 'warning'"
+          :closable="false"
+          show-icon
+        >
+          <template #description>
+            当前状态: {{ connectionStatusText }}
+          </template>
+        </el-alert>
+        
+        <div class="test-actions">
+          <el-button type="primary" @click="testNotification">发送测试通知</el-button>
+          <el-button @click="reconnectWebSocket">重新连接WebSocket</el-button>
+          <el-button type="danger" @click="disconnectWebSocket">断开WebSocket连接</el-button>
+        </div>
+        
+        <div class="message-log">
+          <h3>消息日志</h3>
+          <el-scrollbar height="300px" class="log-scrollbar">
+            <div v-for="(log, index) in messageLogs" :key="index" class="log-item">
+              <span class="log-time">{{ formatTime(log.time) }}</span>
+              <span class="log-content">{{ log.content }}</span>
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import websocketClient from '@/utils/websocket.js'
+import { Notification } from 'element-ui'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'NotificationTest',
+  data() {
+    return {
+      connectionStatus: 'disconnected',
+      connectionStatusText: '未连接',
+      messageLogs: []
+    }
+  },
+  computed: {
+    ...mapState({
+      userId: state => state.user.id
+    })
+  },
+  mounted() {
+    this.checkConnectionStatus()
+    this.logMessage('页面已加载，WebSocket状态检查完成')
+  },
+  methods: {
+    // 检查WebSocket连接状态
+    checkConnectionStatus() {
+      if (websocketClient.connected) {
+        this.connectionStatus = 'connected'
+        this.connectionStatusText = '已连接'
+      } else {
+        this.connectionStatus = 'disconnected'
+        this.connectionStatusText = '未连接'
+      }
+    },
+    
+    // 发送测试通知
+    testNotification() {
+      // 模拟接收到的WebSocket消息格式
+      const mockMessage = {
+        messageId: Date.now(),
+        title: '测试通知',
+        content: '这是一条测试通知，用于验证站内信功能是否正常工作。',
+        timestamp: new Date().toISOString()
+      }
+      
+      // 使用Notification组件显示消息
+      Notification({
+        title: mockMessage.title,
+        message: mockMessage.content,
+        type: 'info',
+        duration: 10000, // 10秒后自动关闭
+        showClose: true,
+        onClick: () => {
+          this.logMessage(`用户点击了通知: ${mockMessage.messageId}`)
+        }
+      })
+      
+      this.logMessage(`已发送测试通知: ${mockMessage.title}`)
+    },
+    
+    // 重新连接WebSocket
+    reconnectWebSocket() {
+      if (this.userId) {
+        websocketClient.init(this.userId)
+        this.checkConnectionStatus()
+        this.logMessage('正在重新连接WebSocket...')
+      } else {
+        this.logMessage('无法重新连接：未获取到用户ID')
+        this.$message.error('未获取到用户ID，请先登录')
+      }
+    },
+    
+    // 断开WebSocket连接
+    disconnectWebSocket() {
+      websocketClient.close()
+      this.checkConnectionStatus()
+      this.logMessage('WebSocket已断开连接')
+    },
+    
+    // 记录消息日志
+    logMessage(content) {
+      this.messageLogs.push({
+        time: new Date(),
+        content: content
+      })
+      // 保持日志最新的100条
+      if (this.messageLogs.length > 100) {
+        this.messageLogs.shift()
+      }
+      // 滚动到底部
+      this.$nextTick(() => {
+        const scrollbar = this.$el.querySelector('.log-scrollbar .el-scrollbar__wrap')
+        if (scrollbar) {
+          scrollbar.scrollTop = scrollbar.scrollHeight
+        }
+      })
+    },
+    
+    // 格式化时间
+    formatTime(date) {
+      const d = new Date(date)
+      const hh = d.getHours().toString().padStart(2, '0')
+      const mm = d.getMinutes().toString().padStart(2, '0')
+      const ss = d.getSeconds().toString().padStart(2, '0')
+      return `${hh}:${mm}:${ss}`
+    }
+  }
+}
+</script>
+
+<style scoped>
+.notification-test-container {
+  padding: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.test-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.test-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.message-log h3 {
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.log-item {
+  display: flex;
+  padding: 5px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.log-time {
+  color: #909399;
+  margin-right: 10px;
+  font-size: 12px;
+  min-width: 80px;
+}
+
+.log-content {
+  flex: 1;
+  font-size: 14px;
+}
+</style>
\ No newline at end of file

From e6d5b85785ef3474e9b52c24fdffdfd77da3c512 Mon Sep 17 00:00:00 2001
From: Wangxin <wangxin@icanag.com>
Date: Tue, 28 Oct 2025 21:50:08 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E3=80=90web=E3=80=91=20=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E7=AB=99=E5=86=85=E4=BF=A1=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ALOps_sys_fe/alops-ui/src/router/index.js    | 19 ++++-
 ALOps_sys_fe/alops-ui/src/utils/websocket.js | 89 +++++++++++++++++---
 2 files changed, 94 insertions(+), 14 deletions(-)

diff --git a/ALOps_sys_fe/alops-ui/src/router/index.js b/ALOps_sys_fe/alops-ui/src/router/index.js
index 56fbd564..0b076c27 100644
--- a/ALOps_sys_fe/alops-ui/src/router/index.js
+++ b/ALOps_sys_fe/alops-ui/src/router/index.js
@@ -37,12 +37,25 @@ export const constantRoutes = [
     children: [
       {
         path: 'index_admin',
-        component: () => import('@/views/index_1'),
-        name: 'IndexAdmin',
-        meta: { title: '管理员首页', icon: 'dashboard', affix: true, fullscreen: true }
+        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,
diff --git a/ALOps_sys_fe/alops-ui/src/utils/websocket.js b/ALOps_sys_fe/alops-ui/src/utils/websocket.js
index 19653ffe..778dd75f 100644
--- a/ALOps_sys_fe/alops-ui/src/utils/websocket.js
+++ b/ALOps_sys_fe/alops-ui/src/utils/websocket.js
@@ -10,6 +10,26 @@ class WebSocketClient {
     this.maxReconnectAttempts = 5
     this.reconnectInterval = 3000
     this.connected = false
+    // token传递方式: 'url'（默认，URL参数）, 'header'（请求头）, 'message'（首次消息）
+    this.tokenMode = 'url'
+  }
+
+  // 设置token传递方式
+  setTokenMode(mode) {
+    const validModes = ['url', 'header', 'message']
+    if (validModes.includes(mode)) {
+      this.tokenMode = mode
+      console.log(`WebSocket token传递方式已设置为: ${mode}`)
+      
+      // 特别说明header模式的限制
+      if (mode === 'header') {
+        console.warn('注意: header模式使用WebSocket子协议传递token，受浏览器API限制，实际token将通过Sec-WebSocket-Protocol头传递')
+        console.warn('后端需要从Sec-WebSocket-Protocol请求头中提取token信息')
+      }
+      return true
+    }
+    console.error('无效的token传递方式，可选值: url, header, message')
+    return false
   }
 
   // 初始化WebSocket连接
@@ -24,7 +44,6 @@ class WebSocketClient {
     }
     
     // 获取token并检查登录状态
-    // 检查token有效性
     const token = getToken()
     if (!token) {
       console.warn('WebSocket初始化失败: 未获取到token，请先登录')
@@ -47,8 +66,14 @@ class WebSocketClient {
     let wsProtocol = baseURL.includes('https') ? 'wss' : 'ws'
     let wsBaseURL = baseURL.replace(/^https?:\/\//, '')
     
-    // 将token添加到URL查询参数
-    this.url = `${wsProtocol}://${wsBaseURL}/ws/onlineMessage?userId=${userId}&token=${token}`
+    // 根据token传递方式构建URL
+    if (this.tokenMode === 'url') {
+      // 在token前面加上'token-'前缀
+      this.url = `${wsProtocol}://${wsBaseURL}/ws/onlineMessage?token=token-${token}`
+    } else {
+      // header或message模式下，URL不包含token
+      this.url = `${wsProtocol}://${wsBaseURL}/ws/onlineMessage`
+    }
     
     // 输出环境变量和配置信息以调试
     console.log('WebSocket配置:', {
@@ -56,7 +81,8 @@ class WebSocketClient {
       userId,
       wsProtocol,
       wsBaseURL,
-      hasToken: !!token
+      hasToken: !!token,
+      tokenMode: this.tokenMode
     })
     console.log('尝试连接WebSocket URL:', this.url)
     
@@ -94,8 +120,27 @@ class WebSocketClient {
     }
     
     try {
-      console.log(`正在建立WebSocket连接 (尝试 ${this.reconnectAttempts + 1}/${this.maxReconnectAttempts})`)
-      this.ws = new WebSocket(this.url)
+      console.log(`正在建立WebSocket连接${this.tokenMode} (尝试 ${this.reconnectAttempts + 1}/${this.maxReconnectAttempts})`)
+      
+      // 根据token模式创建WebSocket连接
+      if (this.tokenMode === 'header') {
+        // header模式: 使用WebSocket子协议传递token
+        // 注意：JavaScript WebSocket API要求子协议名必须是有效的字符串，不能包含特殊字符
+        // 后端应从Sec-WebSocket-Protocol请求头中获取token信息
+        const token = getToken()
+        if (token) {
+          // 在token前面加上'token-'前缀
+          // 使用简洁的子协议名称，让后端从请求头中解析完整token
+          this.ws = new WebSocket(this.url, ['auth-token'])
+          console.log('WebSocket连接将通过Sec-WebSocket-Protocol头传递token')
+        } else {
+          console.error('无法获取token，使用普通连接')
+          this.ws = new WebSocket(this.url)
+        }
+      } else {
+        // url或message模式: 直接创建连接
+        this.ws = new WebSocket(this.url)
+      }
       
       // 设置事件监听
       this.ws.onopen = this.onOpen.bind(this)
@@ -114,6 +159,20 @@ class WebSocketClient {
     console.log('WebSocket连接已建立')
     this.connected = true
     this.reconnectAttempts = 0
+    
+    // message模式: 连接成功后发送token
+        if (this.tokenMode === 'message') {
+          const token = getToken()
+          if (token) {
+            const authMessage = {
+              type: 'auth',
+              token: `token-${token}`, // 在token前面加上'token-'前缀
+              userId: this.userId
+            }
+            this.send(authMessage)
+            console.log('已发送认证消息:', authMessage)
+          }
+        }
   }
 
   // 接收消息回调
@@ -135,7 +194,7 @@ class WebSocketClient {
       title: message.title || '系统通知',
       message: message.content,
       type: 'info',
-      duration: 10000, // 10秒后自动关闭
+      duration: 1000000, // 10秒后自动关闭
       showClose: true,
       onClick: () => {
         // 可以在这里添加点击通知后的处理逻辑
@@ -188,10 +247,18 @@ class WebSocketClient {
       console.log(`WebSocket将在 ${Math.round(currentInterval/1000)} 秒后进行第${this.reconnectAttempts}次重连...`)
       
       setTimeout(() => {
-        // 重连前刷新token参数
-        if (this.url && this.userId) {
-          this.url = this.url.replace(/token=[^&]*/, `token=${token}`)
-        }
+        // 根据不同token模式更新认证信息
+    if (this.tokenMode === 'url' && this.url) {
+      // URL模式: 更新URL中的token参数
+      // 在token前面加上'token-'前缀
+      this.url = this.url.replace(/token=[^&]*/, `token=token-${token}`)
+    } else if (this.tokenMode === 'header') {
+      // Header模式: 重连时会自动从getToken()获取最新token
+      console.log('Header模式下重连，将使用最新token')
+    } else if (this.tokenMode === 'message') {
+      // Message模式: 重连成功后会自动发送认证消息
+      console.log('Message模式下重连，将在连接建立后发送认证消息')
+    }
         this.connect()
       }, currentInterval)
     } else {