1 неделя назад · ef4ef5ee73
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
 
																+node_modules
															
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 
																+module.exports = {
															
 
																+  presets: [
															
 
																+    '@vue/cli-plugin-babel/preset'
															
 
																+  ]
															
 
																+}
															
--- a/call-word/UI.png
+++ b/call-word/UI.png
--- a/call-word/index-v2.html
+++ b/call-word/index-v2.html
--- a/call-word/play.md
+++ b/call-word/play.md
@@ -0,0 +1,101 @@
 
																+# 项目：大屏数据展示（Vue2）
															
 
																+
															
 
																+## 一、项目基础信息
															
 
																+- **项目名称**：大屏数据展示
															
 
																+- **技术栈**：
															
 
																+  - 框架：Vue 2.7.x
															
 
																+  - 构建工具：@vue/cli 4/5
															
 
																+  - UI组件库：Element UI（完整引入）
															
 
																+  - 状态管理：Vuex 3.x
															
 
																+  - 路由：Vue Router 3.x
															
 
																+  - HTTP请求：axios
															
 
																+  - 图表：ECharts 5
															
 
																+  - 工具库：js-md5（用于密码加密）
															
 
																+  - CSS预处理器：Sass（使用 `node-sass` 或 `sass`）
															
 
																+  - 包管理器：npm
															
 
																+- **Node版本要求**：>= 14.0
															
 
																+
															
 
																+## 二、核心功能需求
															
 
																+- 构建一个典型的大屏数据展示系统,分辨率尺寸为9600*2800px
															
 
																+- 包含以下完整页面：
															
 
																+
															
 
																+### 1. 登录页（Login）
															
 
																+- 表单：用户名/手机号、密码（密码使用 `js-md5` 加密后模拟提交）
															
 
																+- 验证码（可选，可用模拟验证码 0000）
															
 
																+- 登录按钮，点击后调用模拟登录API（使用 `axios`，可先mock数据）
															
 
																+- 登录成功后保存token（使用Vuex存储）并跳转到首页
															
 
																+- 该页面样式你自行发挥 主要配色与UI图相近即可
															
 
																+
															
 
																+### 2. 大屏页面
															
 
																+- 该页面应由多个组件组成 
															
 
																+- 如 实验室事件情况统计 为一个组件 实实验室安全合格统计为一个组件 如此类推
															
 
																+- 页面样式严格按照 UI图 样式 项目基础尺寸严格按照9600*2800px制作
															
 
																+
															
 
																+## 三、设计风格与规范
															
 
																+- 样式：统一使用Sass编写自定义样式，变量文件统一管理
															
 
																+
															
 
																+## 四、执行计划
															
 
																+
															
 
																+### 步骤1：初始化项目骨架
															
 
																+- 使用 `vue create` 创建项目，选择以下特性：
															
 
																+  - Babel
															
 
																+  - Router（使用history模式）
															
 
																+  - Vuex
															
 
																+  - CSS Pre-processors（选择Sass/SCSS）
															
 
																+- 删除默认的HelloWorld组件，清理App.vue
															
 
																+- 安装依赖：`element-ui`、`axios`、`echarts`、`js-md5`
															
 
																+- 在 `main.js` 中完整引入Element UI和样式
															
 
																+- 创建基本目录结构：
															
 
																+src/
															
 
																+api/ # axios接口封装
															
 
																+assets/ # 静态资源
															
 
																+components/ # 公共组件
															
 
																+router/ # 路由配置
															
 
																+store/ # Vuex模块
															
 
																+styles/ # 全局样式
															
 
																+utils/ # 工具函数
															
 
																+views/ # 页面视图
															
 
																+
															
 
																+- 配置 `vue.config.js`（如有必要，可设置别名等）
															
 
																+
															
 
																+
															
 
																+### 步骤2：配置路由和基础布局
															
 
																+- 在 `router/index.js` 中配置登录页（/login）
															
 
																+- 在 `App.vue` 中放置路由视图
															
 
																+
															
 
																+### 步骤3：实现页面
															
 
																+- 实现 大屏页面
															
 
																+- 页面中的视频相关功能不用实现 后期我来处理 只需提供基础box与样式即可
															
 
																+## 五、附加说明
															
 
																+- 所有API请求先在 `src/api` 中用 `setTimeout` 模拟返回数据，便于独立开发
															
 
																+- 代码风格使用函数式组件（Vue2 Options API即可）
															
 
																+- 注释：复杂逻辑（如图表初始化、加密）需添加注释
															
 
																+
															
 
																+**开始执行吧**
															
 
																+
															
 
																+# 修改页面
															
 
																+- 观察UI图 调整4个大区域的比例
															
 
																+
															
 
																+# 修改页面
															
 
																+- 调整4个区域比例 从左至右 第一个区域占比20% 第二个区域占比15% 第三个区域占比45% 第四个区域占比20%
															
 
																+
															
 
																+# 修改页面-解析 call-word\index-v2.html 文件
															
 
																+1. 解析文件 把页面中的内容拆分到我的项目中替换原有组件
															
 
																+
															
 
																+# 读取新的UI图
															
 
																+- @call-word/UI.png
															
 
																+- 检查重构的页面是否一致
															
 
																+
															
 
																+# 排版布局错误 修改组件尺寸
															
 
																+1. 左侧第一个列 从上到下的组件应是
															
 
																+- 实验室基本情况统计 宽1892 高956
															
 
																+- 实验室安全分级统计 宽1892 高1017
															
 
																+- 实验室进入人数统计及走势 宽1892 高591
															
 
																+2. 左侧第二个列 从上到下的组件应是
															
 
																+- 智能环境感知应用设备统计 宽1414 高666
															
 
																+- 实验室设备分类及使用统计 宽1414 高1916
															
 
																+3. 左侧第三个列
															
 
																+- 实时监控  宽4282 高2600
															
 
																+3. 左侧第四个列 从上到下的组件应是
															
 
																+- 实验环境安全智能感知 宽1892 高1807
															
 
																+- 实验室实时风险预警 宽1892 高775
															
--- a/dist/css/515.286b12d8.css
+++ b/dist/css/515.286b12d8.css
--- a/dist/css/553.6898c014.css
+++ b/dist/css/553.6898c014.css
--- a/dist/css/app.397d4214.css
+++ b/dist/css/app.397d4214.css
--- a/dist/css/chunk-vendors.10dd4e95.css
+++ b/dist/css/chunk-vendors.10dd4e95.css
--- a/dist/fonts/element-icons.f1a45d74.ttf
+++ b/dist/fonts/element-icons.f1a45d74.ttf
--- a/dist/fonts/element-icons.ff18efd1.woff
+++ b/dist/fonts/element-icons.ff18efd1.woff
--- a/dist/index.html
+++ b/dist/index.html
--- a/dist/js/515.40e467b6.js
+++ b/dist/js/515.40e467b6.js
--- a/dist/js/515.40e467b6.js.map
+++ b/dist/js/515.40e467b6.js.map
--- a/dist/js/553.7a41c852.js
+++ b/dist/js/553.7a41c852.js
--- a/dist/js/553.7a41c852.js.map
+++ b/dist/js/553.7a41c852.js.map
--- a/dist/js/app.16ae2cba.js
+++ b/dist/js/app.16ae2cba.js
--- a/dist/js/app.16ae2cba.js.map
+++ b/dist/js/app.16ae2cba.js.map
--- a/dist/js/chunk-vendors.db81f0fc.js
+++ b/dist/js/chunk-vendors.db81f0fc.js
--- a/dist/js/chunk-vendors.db81f0fc.js.map
+++ b/dist/js/chunk-vendors.db81f0fc.js.map
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,33 @@
 
																+{
															
 
																+  "name": "lab-safety-screen",
															
 
																+  "version": "1.0.0",
															
 
																+  "private": true,
															
 
																+  "scripts": {
															
 
																+    "serve": "vue-cli-service serve",
															
 
																+    "build": "vue-cli-service build"
															
 
																+  },
															
 
																+  "dependencies": {
															
 
																+    "axios": "^0.27.2",
															
 
																+    "core-js": "^3.8.3",
															
 
																+    "echarts": "^5.4.3",
															
 
																+    "element-ui": "^2.15.14",
															
 
																+    "js-md5": "^0.8.3",
															
 
																+    "vue": "^2.7.16",
															
 
																+    "vue-router": "^3.6.5",
															
 
																+    "vuex": "^3.6.2"
															
 
																+  },
															
 
																+  "devDependencies": {
															
 
																+    "@vue/cli-plugin-babel": "~5.0.8",
															
 
																+    "@vue/cli-plugin-router": "~5.0.8",
															
 
																+    "@vue/cli-plugin-vuex": "~5.0.8",
															
 
																+    "@vue/cli-service": "~5.0.8",
															
 
																+    "sass": "~1.32.13",
															
 
																+    "sass-loader": "^12.0.0",
															
 
																+    "vue-template-compiler": "^2.7.16"
															
 
																+  },
															
 
																+  "browserslist": [
															
 
																+    "> 1%",
															
 
																+    "last 2 versions",
															
 
																+    "not dead"
															
 
																+  ]
															
 
																+}
															
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,16 @@
 
																+<!DOCTYPE html>
															
 
																+<html lang="zh-CN">
															
 
																+  <head>
															
 
																+    <meta charset="utf-8">
															
 
																+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
															
 
																+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
															
 
																+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
															
 
																+    <title>实验室安全智能监测与管控中心</title>
															
 
																+  </head>
															
 
																+  <body>
															
 
																+    <noscript>
															
 
																+      <strong>请启用JavaScript以获得最佳体验。</strong>
															
 
																+    </noscript>
															
 
																+    <div id="app"></div>
															
 
																+  </body>
															
 
																+</html>
															
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,18 @@
 
																+<template>
															
 
																+  <div id="app">
															
 
																+    <router-view />
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+export default {
															
 
																+  name: 'App'
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss">
															
 
																+#app {
															
 
																+  width: 100%;
															
 
																+  height: 100%;
															
 
																+}
															
 
																+</style>
															
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -0,0 +1,27 @@
 
																+/**
															
 
																+ * 模拟登录 API
															
 
																+ * 使用 setTimeout 模拟异步请求
															
 
																+ */
															
 
																+export function loginApi(data) {
															
 
																+  return new Promise((resolve) => {
															
 
																+    setTimeout(() => {
															
 
																+      // 模拟登录成功，返回 token
															
 
																+      if (data.username && data.password) {
															
 
																+        resolve({
															
 
																+          code: 200,
															
 
																+          message: '登录成功',
															
 
																+          data: {
															
 
																+            token: 'mock_token_' + Date.now(),
															
 
																+            username: data.username
															
 
																+          }
															
 
																+        })
															
 
																+      } else {
															
 
																+        resolve({
															
 
																+          code: 400,
															
 
																+          message: '用户名或密码不能为空',
															
 
																+          data: null
															
 
																+        })
															
 
																+      }
															
 
																+    }, 500)
															
 
																+  })
															
 
																+}
															
--- a/src/api/screen.js
+++ b/src/api/screen.js
@@ -0,0 +1,220 @@
 
																+/**
															
 
																+ * 大屏页面模拟数据 - 匹配 index-v2.html
															
 
																+ */
															
 
																+
															
 
																+// 实验室基本情况统计
															
 
																+export function getLabStats() {
															
 
																+  return new Promise(resolve => {
															
 
																+    setTimeout(() => {
															
 
																+      resolve({
															
 
																+        code: 200,
															
 
																+        data: {
															
 
																+          total: 128,
															
 
																+          levels: [
															
 
																+            { name: 'I级', label: 'I 级（危险）', value: 12, color: '#cc0000' },
															
 
																+            { name: 'II级', label: 'II 级（较危险）', value: 28, color: '#ff8000' },
															
 
																+            { name: 'III级', label: 'III 级（一般）', value: 45, color: '#ffcc00' },
															
 
																+            { name: 'IV级', label: 'IV 级（较安全）', value: 43, color: '#0066cc' }
															
 
																+          ],
															
 
																+          status: { active: 20, warning: 3, idle: 105 }
															
 
																+        }
															
 
																+      })
															
 
																+    }, 300)
															
 
																+  })
															
 
																+}
															
 
																+
															
 
																+// 实验室安全分级统计
															
 
																+export function getSafetyLevelStats() {
															
 
																+  return new Promise(resolve => {
															
 
																+    setTimeout(() => {
															
 
																+      resolve({
															
 
																+        code: 200,
															
 
																+        data: {
															
 
																+          levels: ['I级', 'II级', 'III级', 'IV级'],
															
 
																+          colors: ['#cc0000', '#ff8000', '#ffcc00', '#0066cc'],
															
 
																+          units: ['化学所', '生物所', '材料所', '物理所', '工程所', '核能所', '信息所', '环境所', '计量所', '医学所'],
															
 
																+          totals: [28, 22, 18, 24, 16, 12, 20, 15, 10, 14],
															
 
																+          series: [
															
 
																+            [2, 3, 5, 4, 2, 1, 3, 2, 1, 2],
															
 
																+            [5, 6, 4, 7, 4, 3, 5, 4, 3, 4],
															
 
																+            [9, 8, 6, 8, 5, 5, 7, 5, 4, 5],
															
 
																+            [12, 5, 3, 5, 5, 3, 5, 4, 2, 3]
															
 
																+          ]
															
 
																+        }
															
 
																+      })
															
 
																+    }, 300)
															
 
																+  })
															
 
																+}
															
 
																+
															
 
																+// 实验室进入人数统计及走势
															
 
																+export function getPersonnelStats() {
															
 
																+  return new Promise(resolve => {
															
 
																+    setTimeout(() => {
															
 
																+      resolve({
															
 
																+        code: 200,
															
 
																+        data: {
															
 
																+          totalEntry: 1284,
															
 
																+          currentPresent: 47,
															
 
																+          trend: {
															
 
																+            times: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
															
 
																+            entry: [0, 0, 2, 86, 128, 145, 160, 90, 30],
															
 
																+            present: [0, 0, 2, 62, 98, 108, 120, 72, 20]
															
 
																+          }
															
 
																+        }
															
 
																+      })
															
 
																+    }, 300)
															
 
																+  })
															
 
																+}
															
 
																+
															
 
																+// 智能环境感知应用设备统计
															
 
																+export function getDeviceStats() {
															
 
																+  return new Promise(resolve => {
															
 
																+    setTimeout(() => {
															
 
																+      resolve({
															
 
																+        code: 200,
															
 
																+        data: {
															
 
																+          online: 312,
															
 
																+          offline: 18,
															
 
																+          onlineRate: 94.5,
															
 
																+          devices: [
															
 
																+            { name: '电子信息铭牌', value: 86, icon: '🏷️' },
															
 
																+            { name: '化学品智能终端', value: 44, icon: '⚗️' },
															
 
																+            { name: '传感器套件', value: 128, icon: '🌡️' },
															
 
																+            { name: '智能摄像设备', value: 72, icon: '📷' }
															
 
																+          ]
															
 
																+        }
															
 
																+      })
															
 
																+    }, 300)
															
 
																+  })
															
 
																+}
															
 
																+
															
 
																+// 实验室设备分类及使用统计
															
 
																+export function getEquipmentStats() {
															
 
																+  return new Promise(resolve => {
															
 
																+    setTimeout(() => {
															
 
																+      resolve({
															
 
																+        code: 200,
															
 
																+        data: {
															
 
																+          totalEquipment: 2458,
															
 
																+          totalHours: 18620,
															
 
																+          usageRate: 62.4,
															
 
																+          categories: [
															
 
																+            { value: 680, name: '检测设备', color: '#1e90ff' },
															
 
																+            { value: 520, name: '分析仪器', color: '#4361ee' },
															
 
																+            { value: 380, name: '制备设备', color: '#00e676' },
															
 
																+            { value: 280, name: '安全设备', color: '#ffd740' },
															
 
																+            { value: 240, name: '辅助设备', color: '#00e5c8' },
															
 
																+            { value: 358, name: '其他', color: '#f97316' }
															
 
																+          ],
															
 
																+          usageStatus: [
															
 
																+            { value: 486, name: '使用', color: '#1e90ff' },
															
 
																+            { value: 1840, name: '空闲', color: '#00e676' },
															
 
																+            { value: 34, name: '维修', color: '#f59e0b' }
															
 
																+          ]
															
 
																+        }
															
 
																+      })
															
 
																+    }, 300)
															
 
																+  })
															
 
																+}
															
 
																+
															
 
																+// 实验环境安全智能感知
															
 
																+export function getSensorList() {
															
 
																+  return new Promise(resolve => {
															
 
																+    setTimeout(() => {
															
 
																+      resolve({
															
 
																+        code: 200,
															
 
																+        data: [
															
 
																+          { name: '化学分析实验室', room: 'A301', unit: '化学研究所', t: 22.5, h: 58, tvoc: 0.82, co2: 650, o2: 20.9, alert: true },
															
 
																+          { name: '生物安全实验室', room: 'B201', unit: '生物研究所', t: 20.1, h: 62, tvoc: 0.18, co2: 580, o2: 20.8, alert: false },
															
 
																+          { name: '材料测试实验室', room: 'C401', unit: '材料研究所', t: 24.0, h: 45, tvoc: 0.09, co2: 520, o2: 20.9, alert: false },
															
 
																+          { name: '精密仪器实验室', room: 'A205', unit: '物理研究所', t: 21.5, h: 50, tvoc: 0.14, co2: 490, o2: 20.9, alert: false },
															
 
																+          { name: '有机合成实验室', room: 'B302', unit: '化学研究所', t: 23.8, h: 55, tvoc: 2.10, co2: 725, o2: 20.5, alert: true },
															
 
																+          { name: '光学检测实验室', room: 'C203', unit: '物理研究所', t: 22.0, h: 52, tvoc: 0.11, co2: 510, o2: 20.9, alert: false },
															
 
																+          { name: '高压实验室', room: 'D101', unit: '工程研究所', t: 25.5, h: 48, tvoc: 0.30, co2: 600, o2: 20.7, alert: false },
															
 
																+          { name: '低温实验室', room: 'D205', unit: '物理研究所', t: 18.0, h: 40, tvoc: 0.07, co2: 480, o2: 20.9, alert: false },
															
 
																+          { name: '核磁共振室', room: 'A302', unit: '化学研究所', t: 20.5, h: 54, tvoc: 0.05, co2: 505, o2: 20.9, alert: false },
															
 
																+          { name: '质谱分析室', room: 'A303', unit: '化学研究所', t: 21.0, h: 53, tvoc: 0.19, co2: 530, o2: 20.8, alert: false }
															
 
																+        ]
															
 
																+      })
															
 
																+    }, 300)
															
 
																+  })
															
 
																+}
															
 
																+
															
 
																+// 实验室实时风险预警
															
 
																+export function getWarningList() {
															
 
																+  return new Promise(resolve => {
															
 
																+    setTimeout(() => {
															
 
																+      resolve({
															
 
																+        code: 200,
															
 
																+        data: {
															
 
																+          total: 42,
															
 
																+          list: [
															
 
																+            { lab: '化学分析实验室', room: 'A301', unit: '化学研究所', metric: 'TVOC浓度超标', val: '2.85 mg/m³', time: '2026-03-05 14:32:18' },
															
 
																+            { lab: '有机合成实验室', room: 'B302', unit: '化学研究所', metric: 'CO₂浓度偏高', val: '725 ppm', time: '2026-03-05 13:58:44' },
															
 
																+            { lab: '高压实验室', room: 'D101', unit: '工程研究所', metric: '温度异常', val: '38.5 °C', time: '2026-03-05 12:15:07' },
															
 
																+            { lab: '生物安全实验室', room: 'B201', unit: '生物研究所', metric: '湿度超标', val: '88% RH', time: '2026-03-05 11:40:22' },
															
 
																+            { lab: '材料测试实验室', room: 'C401', unit: '材料研究所', metric: 'TVOC超标', val: '1.2 mg/m³', time: '2026-03-05 10:08:55' },
															
 
																+            { lab: '光学检测实验室', room: 'C203', unit: '物理研究所', metric: 'O₂浓度偏低', val: '19.2 %', time: '2026-03-05 09:22:33' },
															
 
																+            { lab: '精密仪器实验室', room: 'A205', unit: '物理研究所', metric: '温度超标', val: '28.5 °C', time: '2026-03-05 08:45:11' },
															
 
																+            { lab: '低温实验室', room: 'D205', unit: '物理研究所', metric: '气压异常', val: '85 kPa', time: '2026-03-04 23:12:40' }
															
 
																+          ]
															
 
																+        }
															
 
																+      })
															
 
																+    }, 300)
															
 
																+  })
															
 
																+}
															
 
																+
															
 
																+// 监控摄像头列表
															
 
																+export function getCameraList() {
															
 
																+  return new Promise(resolve => {
															
 
																+    setTimeout(() => {
															
 
																+      resolve({
															
 
																+        code: 200,
															
 
																+        data: [
															
 
																+          'A301 有机合成室', 'A302 核磁共振室', 'A303 质谱室',
															
 
																+          'A301 走廊', 'A302 走廊', 'A303 走廊',
															
 
																+          'A层公共区域', 'A层安全通道', 'A层出入口'
															
 
																+        ]
															
 
																+      })
															
 
																+    }, 300)
															
 
																+  })
															
 
																+}
															
 
																+
															
 
																+// 监控树形数据
															
 
																+export function getMonitorTree() {
															
 
																+  return new Promise(resolve => {
															
 
																+    setTimeout(() => {
															
 
																+      resolve({
															
 
																+        code: 200,
															
 
																+        data: {
															
 
																+          label: '安科院主园区',
															
 
																+          children: [
															
 
																+            {
															
 
																+              label: '综合实验楼A',
															
 
																+              children: [
															
 
																+                { label: '1层', children: [{ label: 'A101 化学实验室' }, { label: 'A102 分析室' }] },
															
 
																+                { label: '2层', children: [{ label: 'A201 生物实验室' }] },
															
 
																+                { label: '3层', children: [{ label: 'A301 有机合成室' }, { label: 'A302 核磁共振室' }, { label: 'A303 质谱室' }] },
															
 
																+                { label: '4层', children: [{ label: 'A401 X射线室' }] }
															
 
																+              ]
															
 
																+            },
															
 
																+            {
															
 
																+              label: '物理实验楼B',
															
 
																+              children: [
															
 
																+                { label: '1层', children: [{ label: 'B101 光学实验室' }] },
															
 
																+                { label: '2层', children: [{ label: 'B201 低温实验室' }] }
															
 
																+              ]
															
 
																+            },
															
 
																+            {
															
 
																+              label: '工程技术楼C',
															
 
																+              children: [
															
 
																+                { label: '1层', children: [{ label: 'C101 机械加工室' }] },
															
 
																+                { label: '2层', children: [{ label: 'C201 材料测试室' }] }
															
 
																+              ]
															
 
																+            }
															
 
																+          ]
															
 
																+        }
															
 
																+      })
															
 
																+    }, 300)
															
 
																+  })
															
 
																+}
															
--- a/src/components/AlarmInfo.vue
+++ b/src/components/AlarmInfo.vue
@@ -0,0 +1,243 @@
 
																+<template>
															
 
																+  <div class="panel alarm-info">
															
 
																+    <!-- Animated border beam -->
															
 
																+    <div class="border-beam"></div>
															
 
																+    <!-- Panel header -->
															
 
																+    <div class="panel-header">
															
 
																+      <div class="panel-header-icon">&#x26A0;&#xFE0F;</div>
															
 
																+      <span class="panel-title">实验室实时风险预警</span>
															
 
																+      <div class="header-count" style="margin-left:auto">
															
 
																+        <span class="count-label">本月</span>
															
 
																+        <span class="count-value">{{ totalCount }}</span>
															
 
																+        <span class="count-label">次</span>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+    <!-- Scrolling warning list -->
															
 
																+    <div class="warn-scroll-wrap">
															
 
																+      <div class="warn-scroll-inner">
															
 
																+        <div
															
 
																+          v-for="(item, idx) in scrollList"
															
 
																+          :key="idx"
															
 
																+          class="warn-item"
															
 
																+        >
															
 
																+          <div class="warn-item-head">
															
 
																+            <span class="warn-lab">&#x1F6A8; {{ item.lab }}（{{ item.room }}）- {{ item.unit }}</span>
															
 
																+            <span class="warn-time">{{ item.time }}</span>
															
 
																+          </div>
															
 
																+          <div class="warn-detail">
															
 
																+            异常指标：<span class="warn-metric-val">{{ item.metric }} {{ item.val }}</span>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import { getWarningList } from '@/api/screen'
															
 
																+
															
 
																+export default {
															
 
																+  name: 'AlarmInfo',
															
 
																+  data() {
															
 
																+    return {
															
 
																+      totalCount: 0,
															
 
																+      warningList: []
															
 
																+    }
															
 
																+  },
															
 
																+  computed: {
															
 
																+    /** Duplicate data for seamless CSS scroll loop */
															
 
																+    scrollList() {
															
 
																+      return [...this.warningList, ...this.warningList]
															
 
																+    }
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    this.fetchData()
															
 
																+  },
															
 
																+  methods: {
															
 
																+    async fetchData() {
															
 
																+      const res = await getWarningList()
															
 
																+      if (res.code === 200) {
															
 
																+        this.totalCount = res.data.total
															
 
																+        this.warningList = res.data.list
															
 
																+      }
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+.alarm-info {
															
 
																+  position: relative;
															
 
																+  border-radius: 15px;
															
 
																+  overflow: hidden;
															
 
																+  background: $bg-panel;
															
 
																+  border: 1px solid $border;
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  height: 100%;
															
 
																+
															
 
																+  &::before {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    inset: 0;
															
 
																+    pointer-events: none;
															
 
																+    border-radius: inherit;
															
 
																+    background: linear-gradient(135deg, rgba(30,144,255,0.05) 0%, transparent 50%, rgba(0,216,255,0.03) 100%);
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+/* ===== Animated border beam ===== */
															
 
																+.border-beam {
															
 
																+  position: absolute;
															
 
																+  inset: 0;
															
 
																+  pointer-events: none;
															
 
																+  border-radius: inherit;
															
 
																+  overflow: hidden;
															
 
																+  z-index: 2;
															
 
																+
															
 
																+  &::before {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    top: 0;
															
 
																+    left: -100%;
															
 
																+    width: 40%;
															
 
																+    height: 3px;
															
 
																+    background: linear-gradient(90deg, transparent, rgba(30,144,255,0.9), rgba(0,216,255,0.7), transparent);
															
 
																+    animation: beamTop 5s linear infinite;
															
 
																+  }
															
 
																+
															
 
																+  &::after {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    bottom: 0;
															
 
																+    right: -100%;
															
 
																+    width: 40%;
															
 
																+    height: 3px;
															
 
																+    background: linear-gradient(90deg, transparent, rgba(0,216,255,0.7), rgba(30,144,255,0.9), transparent);
															
 
																+    animation: beamBottom 5s linear infinite 2.5s;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@keyframes beamTop    { from { left: -40%; }  to { left: 100%; } }
															
 
																+@keyframes beamBottom { from { right: -40%; } to { right: 100%; } }
															
 
																+
															
 
																+/* ===== Panel header ===== */
															
 
																+.panel-header {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 25px;
															
 
																+  padding: 20px 30px 18px;
															
 
																+  border-bottom: 1px solid $border;
															
 
																+  background: linear-gradient(90deg, rgba(0,60,160,0.18), transparent);
															
 
																+  flex-shrink: 0;
															
 
																+}
															
 
																+
															
 
																+.panel-header-icon {
															
 
																+  width: 65px;
															
 
																+  height: 65px;
															
 
																+  border-radius: 12px;
															
 
																+  flex-shrink: 0;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+  font-size: 32px;
															
 
																+  background: linear-gradient(135deg, rgba(30,144,255,0.25), rgba(0,216,255,0.15));
															
 
																+  border: 1px solid rgba(30,144,255,0.35);
															
 
																+  animation: iconGlow 3s ease-in-out infinite;
															
 
																+}
															
 
																+
															
 
																+@keyframes iconGlow {
															
 
																+  0%, 100% { box-shadow: 0 0 15px rgba(30,144,255,0.3); }
															
 
																+  50%      { box-shadow: 0 0 35px rgba(30,144,255,0.7), 0 0 12px rgba(0,216,255,0.3); }
															
 
																+}
															
 
																+
															
 
																+.panel-title {
															
 
																+  font-size: 30px;
															
 
																+  font-weight: 600;
															
 
																+  letter-spacing: 2px;
															
 
																+  color: $cyan;
															
 
																+}
															
 
																+
															
 
																+/* ===== Header count ===== */
															
 
																+.header-count {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 10px;
															
 
																+  flex-shrink: 0;
															
 
																+}
															
 
																+
															
 
																+.count-label {
															
 
																+  font-size: 25px;
															
 
																+  color: $text-dim;
															
 
																+}
															
 
																+
															
 
																+.count-value {
															
 
																+  font-size: 50px;
															
 
																+  font-weight: 700;
															
 
																+  color: #f59e0b;
															
 
																+}
															
 
																+
															
 
																+/* ===== Warning scroll ===== */
															
 
																+.warn-scroll-wrap {
															
 
																+  overflow: hidden;
															
 
																+  flex: 1;
															
 
																+  min-height: 0;
															
 
																+  padding: 15px 20px;
															
 
																+}
															
 
																+
															
 
																+.warn-scroll-inner {
															
 
																+  animation: scrollUp 22s linear infinite;
															
 
																+
															
 
																+  &:hover {
															
 
																+    animation-play-state: paused;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@keyframes scrollUp {
															
 
																+  0%   { transform: translateY(0); }
															
 
																+  100% { transform: translateY(-50%); }
															
 
																+}
															
 
																+
															
 
																+/* ===== Warning item ===== */
															
 
																+.warn-item {
															
 
																+  padding: 18px 20px;
															
 
																+  border-radius: 10px;
															
 
																+  margin-bottom: 12px;
															
 
																+  background: rgba(245,158,11,0.05);
															
 
																+  border: 1px solid rgba(245,158,11,0.2);
															
 
																+}
															
 
																+
															
 
																+.warn-item-head {
															
 
																+  display: flex;
															
 
																+  justify-content: space-between;
															
 
																+  align-items: flex-start;
															
 
																+  margin-bottom: 10px;
															
 
																+  gap: 15px;
															
 
																+}
															
 
																+
															
 
																+.warn-lab {
															
 
																+  font-size: 28px;
															
 
																+  font-weight: 600;
															
 
																+  color: #fcd34d;
															
 
																+  flex: 1;
															
 
																+}
															
 
																+
															
 
																+.warn-time {
															
 
																+  font-size: 25px;
															
 
																+  color: $text-dim;
															
 
																+  white-space: nowrap;
															
 
																+}
															
 
																+
															
 
																+.warn-detail {
															
 
																+  font-size: 25px;
															
 
																+  color: $text-dim;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 10px;
															
 
																+}
															
 
																+
															
 
																+.warn-metric-val {
															
 
																+  color: #fb923c;
															
 
																+  font-weight: 600;
															
 
																+}
															
 
																+</style>
															
--- a/src/components/CategoryChart.vue
+++ b/src/components/CategoryChart.vue
@@ -0,0 +1,144 @@
 
																+<template>
															
 
																+  <div class="panel category-chart">
															
 
																+    <div class="panel__title">实验室危险源分类统计</div>
															
 
																+    <div class="chart-wrap">
															
 
																+      <div ref="chart" class="chart"></div>
															
 
																+    </div>
															
 
																+    <div class="btn-row">
															
 
																+      <button class="btn-floorplan">返回平面图</button>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import * as echarts from 'echarts'
															
 
																+import { getHazardStats } from '@/api/screen'
															
 
																+
															
 
																+export default {
															
 
																+  name: 'CategoryChart',
															
 
																+  data() {
															
 
																+    return {
															
 
																+      total: 0,
															
 
																+      chart: null
															
 
																+    }
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    this.fetchData()
															
 
																+  },
															
 
																+  beforeDestroy() {
															
 
																+    if (this.chart) this.chart.dispose()
															
 
																+  },
															
 
																+  methods: {
															
 
																+    async fetchData() {
															
 
																+      const res = await getHazardStats()
															
 
																+      if (res.code === 200) {
															
 
																+        this.total = res.data.total
															
 
																+        this.$nextTick(() => this.initChart(res.data.categories))
															
 
																+      }
															
 
																+    },
															
 
																+    /** 初始化环形图 - 展示危险源分类分布 */
															
 
																+    initChart(categories) {
															
 
																+      this.chart = echarts.init(this.$refs.chart)
															
 
																+      const option = {
															
 
																+        color: categories.map(c => c.color),
															
 
																+        tooltip: {
															
 
																+          trigger: 'item',
															
 
																+          textStyle: { fontSize: 24 },
															
 
																+          formatter: '{b}: {c} ({d}%)'
															
 
																+        },
															
 
																+        legend: {
															
 
																+          orient: 'vertical',
															
 
																+          right: 10,
															
 
																+          top: 'center',
															
 
																+          textStyle: { color: 'rgba(180,210,255,0.85)', fontSize: 24 },
															
 
																+          itemWidth: 20,
															
 
																+          itemHeight: 12,
															
 
																+          itemGap: 18
															
 
																+        },
															
 
																+        series: [{
															
 
																+          type: 'pie',
															
 
																+          radius: ['42%', '65%'],
															
 
																+          center: ['35%', '50%'],
															
 
																+          label: { show: false },
															
 
																+          data: categories.map(c => ({ name: c.name, value: c.value })),
															
 
																+          itemStyle: {
															
 
																+            borderColor: '#0a1a3a',
															
 
																+            borderWidth: 3
															
 
																+          }
															
 
																+        }],
															
 
																+        graphic: [{
															
 
																+          type: 'group',
															
 
																+          left: '23%',
															
 
																+          top: 'center',
															
 
																+          children: [
															
 
																+            {
															
 
																+              type: 'text',
															
 
																+              left: 'center',
															
 
																+              top: -28,
															
 
																+              style: {
															
 
																+                text: String(this.total),
															
 
																+                fill: '#00e5ff',
															
 
																+                fontSize: 56,
															
 
																+                fontWeight: 'bold',
															
 
																+                textAlign: 'center'
															
 
																+              }
															
 
																+            },
															
 
																+            {
															
 
																+              type: 'text',
															
 
																+              left: 'center',
															
 
																+              top: 28,
															
 
																+              style: {
															
 
																+                text: '危险源总数',
															
 
																+                fill: 'rgba(180,210,255,0.7)',
															
 
																+                fontSize: 24,
															
 
																+                textAlign: 'center'
															
 
																+              }
															
 
																+            }
															
 
																+          ]
															
 
																+        }]
															
 
																+      }
															
 
																+      this.chart.setOption(option)
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+.category-chart {
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  height: 100%;
															
 
																+}
															
 
																+
															
 
																+.chart-wrap {
															
 
																+  flex: 1;
															
 
																+  min-height: 0;
															
 
																+
															
 
																+  .chart {
															
 
																+    width: 100%;
															
 
																+    height: 100%;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.btn-row {
															
 
																+  display: flex;
															
 
																+  justify-content: center;
															
 
																+  padding-top: 16px;
															
 
																+
															
 
																+  .btn-floorplan {
															
 
																+    padding: 12px 48px;
															
 
																+    font-size: $font-size-small;
															
 
																+    color: $color-cyan;
															
 
																+    background: rgba(0, 229, 255, 0.1);
															
 
																+    border: 1px solid rgba(0, 229, 255, 0.4);
															
 
																+    border-radius: 6px;
															
 
																+    cursor: pointer;
															
 
																+    letter-spacing: 4px;
															
 
																+    transition: all 0.3s;
															
 
																+
															
 
																+    &:hover {
															
 
																+      background: rgba(0, 229, 255, 0.2);
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
--- a/src/components/EnvMonitorStats.vue
+++ b/src/components/EnvMonitorStats.vue
@@ -0,0 +1,330 @@
 
																+<template>
															
 
																+  <div class="panel env-monitor-stats">
															
 
																+    <div class="border-beam"></div>
															
 
																+    <svg class="pc tl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
															
 
																+    <svg class="pc tr" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
															
 
																+    <svg class="pc bl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
															
 
																+    <svg class="pc br" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
															
 
																+    <div class="panel-header">
															
 
																+      <div class="panel-header-icon">📡</div>
															
 
																+      <span class="panel-title">智能环境感知应用设备统计</span>
															
 
																+    </div>
															
 
																+    <div class="panel-body">
															
 
																+      <!-- 在线/离线设备 -->
															
 
																+      <div class="device-online-row">
															
 
																+        <div class="device-stat-chip online">
															
 
																+          <div class="dv">{{ online }}</div>
															
 
																+          <div class="dl">在线设备</div>
															
 
																+        </div>
															
 
																+        <div class="device-stat-chip offline">
															
 
																+          <div class="dv">{{ offline }}</div>
															
 
																+          <div class="dl">离线设备</div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+      <!-- 仪表盘 + 设备列表 -->
															
 
																+      <div class="device-middle">
															
 
																+        <div ref="gauge" class="gauge-chart"></div>
															
 
																+        <div class="device-list-row">
															
 
																+          <div class="device-list-item" v-for="item in devices" :key="item.name">
															
 
																+            <div class="dli-icon">{{ item.icon }}</div>
															
 
																+            <div class="dli-num">{{ item.value }}</div>
															
 
																+            <div class="dli-name">{{ item.name }}</div>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import * as echarts from 'echarts'
															
 
																+import { getDeviceStats } from '@/api/screen'
															
 
																+
															
 
																+export default {
															
 
																+  name: 'EnvMonitorStats',
															
 
																+  data() {
															
 
																+    return {
															
 
																+      online: 312,
															
 
																+      offline: 18,
															
 
																+      onlineRate: 94.5,
															
 
																+      devices: [
															
 
																+        { icon: '🏷️', value: 86, name: '电子信息铭牌' },
															
 
																+        { icon: '⚗️', value: 44, name: '化学品智能终端' },
															
 
																+        { icon: '🌡️', value: 128, name: '传感器套件' },
															
 
																+        { icon: '📷', value: 72, name: '智能摄像设备' }
															
 
																+      ],
															
 
																+      chart: null
															
 
																+    }
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    this.fetchData()
															
 
																+  },
															
 
																+  beforeDestroy() {
															
 
																+    if (this.chart) this.chart.dispose()
															
 
																+    window.removeEventListener('resize', this.handleResize)
															
 
																+  },
															
 
																+  methods: {
															
 
																+    async fetchData() {
															
 
																+      try {
															
 
																+        const res = await getDeviceStats()
															
 
																+        if (res.code === 200) {
															
 
																+          this.online = res.data.online
															
 
																+          this.offline = res.data.offline
															
 
																+          this.onlineRate = res.data.onlineRate
															
 
																+          this.devices = res.data.devices
															
 
																+        }
															
 
																+      } catch (e) {
															
 
																+        // use defaults
															
 
																+      }
															
 
																+      this.$nextTick(() => this.initChart())
															
 
																+    },
															
 
																+    handleResize() {
															
 
																+      if (this.chart) this.chart.resize()
															
 
																+    },
															
 
																+    /** 初始化仪表盘 - 展示设备在线率 */
															
 
																+    initChart() {
															
 
																+      this.chart = echarts.init(this.$refs.gauge, null, { renderer: 'canvas', devicePixelRatio: 2 })
															
 
																+      const option = {
															
 
																+        backgroundColor: 'transparent',
															
 
																+        series: [{
															
 
																+          type: 'gauge',
															
 
																+          radius: '90%',
															
 
																+          center: ['50%', '60%'],
															
 
																+          startAngle: 210,
															
 
																+          endAngle: -30,
															
 
																+          min: 0,
															
 
																+          max: 100,
															
 
																+          splitNumber: 5,
															
 
																+          axisLine: {
															
 
																+            lineStyle: {
															
 
																+              width: 30,
															
 
																+              color: [
															
 
																+                [0.3, '#ef4444'],
															
 
																+                [0.6, '#f59e0b'],
															
 
																+                [1, '#1e90ff']
															
 
																+              ]
															
 
																+            }
															
 
																+          },
															
 
																+          axisTick: { show: false },
															
 
																+          splitLine: { show: false },
															
 
																+          axisLabel: { show: false },
															
 
																+          pointer: {
															
 
																+            icon: 'path://M12.8,0.7l12.3,0 M0,0 l9.2,12.4 M0,0 l2.2,-1.6',
															
 
																+            offsetCenter: [0, '-60%'],
															
 
																+            width: 8,
															
 
																+            length: '60%',
															
 
																+            itemStyle: { color: '#1e90ff' }
															
 
																+          },
															
 
																+          detail: {
															
 
																+            valueAnimation: true,
															
 
																+            formatter: '{value}%',
															
 
																+            color: '#ffd740',
															
 
																+            fontSize: 45,
															
 
																+            fontWeight: 700,
															
 
																+            offsetCenter: [0, '30%']
															
 
																+          },
															
 
																+          title: {
															
 
																+            show: true,
															
 
																+            offsetCenter: [0, '62%'],
															
 
																+            color: 'rgba(110,165,210,0.6)',
															
 
																+            fontSize: 25
															
 
																+          },
															
 
																+          data: [{ value: this.onlineRate, name: '在线率' }]
															
 
																+        }]
															
 
																+      }
															
 
																+      this.chart.setOption(option)
															
 
																+      window.addEventListener('resize', this.handleResize)
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+.env-monitor-stats {
															
 
																+  position: relative;
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+}
															
 
																+
															
 
																+/* ---- Border beam ---- */
															
 
																+.border-beam {
															
 
																+  position: absolute;
															
 
																+  inset: 0;
															
 
																+  pointer-events: none;
															
 
																+  border-radius: inherit;
															
 
																+  overflow: hidden;
															
 
																+  z-index: 2;
															
 
																+
															
 
																+  &::before {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    top: 0;
															
 
																+    left: -100%;
															
 
																+    width: 40%;
															
 
																+    height: 3px;
															
 
																+    background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.9), rgba(0, 216, 255, 0.7), transparent);
															
 
																+    animation: beamTop 5s linear infinite;
															
 
																+  }
															
 
																+
															
 
																+  &::after {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    bottom: 0;
															
 
																+    right: -100%;
															
 
																+    width: 40%;
															
 
																+    height: 3px;
															
 
																+    background: linear-gradient(90deg, transparent, rgba(0, 216, 255, 0.7), rgba(30, 144, 255, 0.9), transparent);
															
 
																+    animation: beamBottom 5s linear infinite 2.5s;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@keyframes beamTop    { from { left: -40%; } to { left: 100%; } }
															
 
																+@keyframes beamBottom { from { right: -40%; } to { right: 100%; } }
															
 
																+
															
 
																+/* ---- Corner ornaments ---- */
															
 
																+.pc {
															
 
																+  position: absolute;
															
 
																+  width: 35px;
															
 
																+  height: 35px;
															
 
																+  z-index: 3;
															
 
																+  pointer-events: none;
															
 
																+
															
 
																+  &.tl { top: 0; left: 0; }
															
 
																+  &.tr { top: 0; right: 0; transform: scaleX(-1); }
															
 
																+  &.bl { bottom: 0; left: 0; transform: scaleY(-1); }
															
 
																+  &.br { bottom: 0; right: 0; transform: scale(-1); }
															
 
																+
															
 
																+  svg { width: 100%; height: 100%; }
															
 
																+}
															
 
																+
															
 
																+/* ---- Panel header ---- */
															
 
																+.panel-header {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 25px;
															
 
																+  padding: 20px 30px 18px;
															
 
																+  border-bottom: 1px solid $border;
															
 
																+  background: linear-gradient(90deg, rgba(0, 60, 160, 0.18), transparent);
															
 
																+  flex-shrink: 0;
															
 
																+}
															
 
																+
															
 
																+.panel-header-icon {
															
 
																+  width: 65px;
															
 
																+  height: 65px;
															
 
																+  border-radius: 12px;
															
 
																+  flex-shrink: 0;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+  font-size: 32px;
															
 
																+  background: linear-gradient(135deg, rgba(30, 144, 255, 0.25), rgba(0, 216, 255, 0.15));
															
 
																+  border: 1px solid rgba(30, 144, 255, 0.35);
															
 
																+  animation: iconGlow 3s ease-in-out infinite;
															
 
																+}
															
 
																+
															
 
																+@keyframes iconGlow {
															
 
																+  0%, 100% { box-shadow: 0 0 15px rgba(30, 144, 255, 0.3); }
															
 
																+  50% { box-shadow: 0 0 35px rgba(30, 144, 255, 0.7), 0 0 12px rgba(0, 216, 255, 0.3); }
															
 
																+}
															
 
																+
															
 
																+.panel-title {
															
 
																+  font-size: 30px;
															
 
																+  font-weight: 600;
															
 
																+  letter-spacing: 2px;
															
 
																+  color: $cyan;
															
 
																+}
															
 
																+
															
 
																+/* ---- Panel body ---- */
															
 
																+.panel-body {
															
 
																+  padding: 20px 25px;
															
 
																+}
															
 
																+
															
 
																+/* ---- Online / Offline row ---- */
															
 
																+.device-online-row {
															
 
																+  display: flex;
															
 
																+  gap: 18px;
															
 
																+  margin-bottom: 18px;
															
 
																+}
															
 
																+
															
 
																+.device-stat-chip {
															
 
																+  flex: 1;
															
 
																+  padding: 15px;
															
 
																+  border-radius: 10px;
															
 
																+  text-align: center;
															
 
																+  background: $bg-card;
															
 
																+  border: 1px solid $border;
															
 
																+
															
 
																+  &.online {
															
 
																+    border-color: $green;
															
 
																+  }
															
 
																+
															
 
																+  &.offline {
															
 
																+    border-color: $red;
															
 
																+  }
															
 
																+
															
 
																+  .dv {
															
 
																+    font-size: 50px;
															
 
																+    font-weight: 700;
															
 
																+  }
															
 
																+
															
 
																+  &.online .dv {
															
 
																+    color: $green;
															
 
																+  }
															
 
																+
															
 
																+  &.offline .dv {
															
 
																+    color: $red;
															
 
																+  }
															
 
																+
															
 
																+  .dl {
															
 
																+    font-size: 25px;
															
 
																+    color: $text-dim;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+/* ---- Middle: gauge + device grid ---- */
															
 
																+.device-middle {
															
 
																+  display: flex;
															
 
																+  gap: 20px;
															
 
																+  align-items: center;
															
 
																+}
															
 
																+
															
 
																+.gauge-chart {
															
 
																+  flex: 0 0 295px;
															
 
																+  height: 295px;
															
 
																+}
															
 
																+
															
 
																+.device-list-row {
															
 
																+  flex: 1;
															
 
																+  display: grid;
															
 
																+  grid-template-columns: 1fr 1fr;
															
 
																+  gap: 12px;
															
 
																+}
															
 
																+
															
 
																+.device-list-item {
															
 
																+  padding: 15px;
															
 
																+  border-radius: 10px;
															
 
																+  background: $bg-card;
															
 
																+  border: 1px solid $border;
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  align-items: center;
															
 
																+  gap: 8px;
															
 
																+
															
 
																+  .dli-icon {
															
 
																+    font-size: 40px;
															
 
																+  }
															
 
																+
															
 
																+  .dli-num {
															
 
																+    font-size: 38px;
															
 
																+    font-weight: 700;
															
 
																+    color: $gold;
															
 
																+  }
															
 
																+
															
 
																+  .dli-name {
															
 
																+    font-size: 22px;
															
 
																+    color: $text-dim;
															
 
																+    text-align: center;
															
 
																+    line-height: 1.3;
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
--- a/src/components/EquipmentStats.vue
+++ b/src/components/EquipmentStats.vue
@@ -0,0 +1,403 @@
 
																+<template>
															
 
																+  <div class="panel equipment-stats">
															
 
																+    <div class="border-beam"></div>
															
 
																+    <div class="panel-header">
															
 
																+      <div class="panel-header-icon">🔬</div>
															
 
																+      <span class="panel-title">实验室设备分类及使用统计</span>
															
 
																+    </div>
															
 
																+    <!-- 4:2:4 vertical layout -->
															
 
																+    <div class="equip-layout">
															
 
																+      <!-- Top: ring/donut chart - equipment classification -->
															
 
																+      <div class="equip-section equip-top">
															
 
																+        <div ref="ringChart" class="ring-chart"></div>
															
 
																+      </div>
															
 
																+      <!-- Middle: 3 stat items -->
															
 
																+      <div class="equip-section equip-mid">
															
 
																+        <div class="equip-mid-row">
															
 
																+          <div class="equip-stat-item">
															
 
																+            <div class="ev">{{ totalEquipment.toLocaleString() }}</div>
															
 
																+            <div class="el">设备总数（台）</div>
															
 
																+          </div>
															
 
																+          <div class="equip-stat-item">
															
 
																+            <div class="ev">{{ totalHours.toLocaleString() }}</div>
															
 
																+            <div class="el">使用时长（h）</div>
															
 
																+          </div>
															
 
																+          <div class="equip-stat-item">
															
 
																+            <div class="ev">{{ usageRate }}%</div>
															
 
																+            <div class="el">设备使用率</div>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+      <!-- Bottom: pie chart - usage status -->
															
 
																+      <div class="equip-section equip-bottom">
															
 
																+        <div ref="pieChart" class="pie-chart"></div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import * as echarts from 'echarts'
															
 
																+import { getEquipmentStats } from '@/api/screen'
															
 
																+
															
 
																+const TOOLTIP_CFG = {
															
 
																+  backgroundColor: 'rgba(3,14,42,0.92)',
															
 
																+  borderColor: 'rgba(30,144,255,0.3)',
															
 
																+  textStyle: { color: '#a8cce8', fontSize: 28 }
															
 
																+}
															
 
																+
															
 
																+export default {
															
 
																+  name: 'EquipmentStats',
															
 
																+  data() {
															
 
																+    return {
															
 
																+      totalEquipment: 2458,
															
 
																+      totalHours: 18620,
															
 
																+      usageRate: 62.4,
															
 
																+      categories: [
															
 
																+        { value: 680, name: '检测设备', color: '#1e90ff' },
															
 
																+        { value: 520, name: '分析仪器', color: '#4361ee' },
															
 
																+        { value: 380, name: '制备设备', color: '#00e676' },
															
 
																+        { value: 280, name: '安全设备', color: '#ffd740' },
															
 
																+        { value: 240, name: '辅助设备', color: '#00e5c8' },
															
 
																+        { value: 358, name: '其他', color: '#f97316' }
															
 
																+      ],
															
 
																+      usageStatus: [
															
 
																+        { value: 486, name: '使用', color: '#1e90ff' },
															
 
																+        { value: 1840, name: '空闲', color: '#00e676' },
															
 
																+        { value: 34, name: '维修', color: '#f59e0b' }
															
 
																+      ],
															
 
																+      ringChart: null,
															
 
																+      pieChart: null
															
 
																+    }
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    this.fetchData()
															
 
																+  },
															
 
																+  beforeDestroy() {
															
 
																+    if (this.ringChart) this.ringChart.dispose()
															
 
																+    if (this.pieChart) this.pieChart.dispose()
															
 
																+    window.removeEventListener('resize', this.handleResize)
															
 
																+  },
															
 
																+  methods: {
															
 
																+    async fetchData() {
															
 
																+      try {
															
 
																+        const res = await getEquipmentStats()
															
 
																+        if (res.code === 200) {
															
 
																+          this.totalEquipment = res.data.totalEquipment
															
 
																+          this.totalHours = res.data.totalHours
															
 
																+          this.usageRate = res.data.usageRate
															
 
																+          this.categories = res.data.categories
															
 
																+          this.usageStatus = res.data.usageStatus
															
 
																+        }
															
 
																+      } catch (e) {
															
 
																+        // use defaults
															
 
																+      }
															
 
																+      this.$nextTick(() => {
															
 
																+        this.initRingChart()
															
 
																+        this.initPieChart()
															
 
																+        window.addEventListener('resize', this.handleResize)
															
 
																+      })
															
 
																+    },
															
 
																+    handleResize() {
															
 
																+      if (this.ringChart) this.ringChart.resize()
															
 
																+      if (this.pieChart) this.pieChart.resize()
															
 
																+    },
															
 
																+    /** 初始化环形图 - 设备分类 */
															
 
																+    initRingChart() {
															
 
																+      this.ringChart = echarts.init(this.$refs.ringChart, null, { renderer: 'canvas', devicePixelRatio: 2 })
															
 
																+
															
 
																+      // Build count map for legend formatter
															
 
																+      const countMap = {}
															
 
																+      this.categories.forEach(c => { countMap[c.name] = c.value })
															
 
																+
															
 
																+      const ringData = this.categories.map(c => ({
															
 
																+        value: c.value,
															
 
																+        name: c.name,
															
 
																+        itemStyle: {
															
 
																+          color: c.color,
															
 
																+          shadowBlur: 8,
															
 
																+          shadowColor: c.color.replace(')', ',0.5)').replace('rgb', 'rgba')
															
 
																+        }
															
 
																+      }))
															
 
																+
															
 
																+      const option = {
															
 
																+        backgroundColor: 'transparent',
															
 
																+        tooltip: {
															
 
																+          trigger: 'item',
															
 
																+          formatter: '{b}: {c}台 ({d}%)',
															
 
																+          ...TOOLTIP_CFG
															
 
																+        },
															
 
																+        legend: {
															
 
																+          orient: 'vertical',
															
 
																+          right: '1%',
															
 
																+          top: 'middle',
															
 
																+          icon: 'circle',
															
 
																+          itemWidth: 28,
															
 
																+          itemHeight: 28,
															
 
																+          itemGap: 22,
															
 
																+          textStyle: { color: '#a8cce8', fontSize: 22 },
															
 
																+          formatter: function(name) {
															
 
																+            return '{nm|' + name + '}  {vl|' + countMap[name] + '台}'
															
 
																+          },
															
 
																+          rich: {
															
 
																+            nm: { fontSize: 22, color: '#a8cce8', width: 90 },
															
 
																+            vl: { fontSize: 26, fontWeight: 700, color: '#fff' }
															
 
																+          }
															
 
																+        },
															
 
																+        series: [{
															
 
																+          type: 'pie',
															
 
																+          radius: ['38%', '62%'],
															
 
																+          center: ['36%', '50%'],
															
 
																+          itemStyle: {
															
 
																+            borderRadius: 4,
															
 
																+            borderColor: 'rgba(3,14,31,0.5)',
															
 
																+            borderWidth: 2
															
 
																+          },
															
 
																+          label: {
															
 
																+            show: true,
															
 
																+            formatter: '{c}台',
															
 
																+            fontSize: 20,
															
 
																+            color: '#a8cce8'
															
 
																+          },
															
 
																+          labelLine: {
															
 
																+            length: 10,
															
 
																+            length2: 10,
															
 
																+            lineStyle: { color: 'rgba(30,144,255,0.4)', width: 2 }
															
 
																+          },
															
 
																+          data: ringData,
															
 
																+          emphasis: {
															
 
																+            scale: true,
															
 
																+            scaleSize: 5,
															
 
																+            itemStyle: {
															
 
																+              shadowBlur: 20,
															
 
																+              shadowColor: 'rgba(30,144,255,0.6)'
															
 
																+            }
															
 
																+          }
															
 
																+        }]
															
 
																+      }
															
 
																+      this.ringChart.setOption(option)
															
 
																+    },
															
 
																+    /** 初始化饼图 - 设备使用状态 */
															
 
																+    initPieChart() {
															
 
																+      this.pieChart = echarts.init(this.$refs.pieChart, null, { renderer: 'canvas', devicePixelRatio: 2 })
															
 
																+
															
 
																+      // Build count map for legend formatter
															
 
																+      const countMap = {}
															
 
																+      this.usageStatus.forEach(s => { countMap[s.name] = s.value })
															
 
																+
															
 
																+      const pieData = this.usageStatus.map(s => ({
															
 
																+        value: s.value,
															
 
																+        name: s.name,
															
 
																+        itemStyle: {
															
 
																+          color: s.color,
															
 
																+          shadowBlur: 10,
															
 
																+          shadowColor: s.color.replace(')', ',0.5)').replace('rgb', 'rgba')
															
 
																+        }
															
 
																+      }))
															
 
																+
															
 
																+      const option = {
															
 
																+        backgroundColor: 'transparent',
															
 
																+        tooltip: {
															
 
																+          trigger: 'item',
															
 
																+          formatter: '{b}: {c}台 ({d}%)',
															
 
																+          ...TOOLTIP_CFG
															
 
																+        },
															
 
																+        legend: {
															
 
																+          show: true,
															
 
																+          orient: 'vertical',
															
 
																+          right: '2%',
															
 
																+          top: 'middle',
															
 
																+          icon: 'circle',
															
 
																+          itemWidth: 36,
															
 
																+          itemHeight: 36,
															
 
																+          itemGap: 40,
															
 
																+          textStyle: { color: '#a8cce8', fontSize: 28 },
															
 
																+          formatter: function(name) {
															
 
																+            return '{nm|' + name + '}  {vl|' + countMap[name] + '台}'
															
 
																+          },
															
 
																+          rich: {
															
 
																+            nm: { fontSize: 28, color: '#a8cce8', width: 90 },
															
 
																+            vl: { fontSize: 34, fontWeight: 700, color: '#fff' }
															
 
																+          }
															
 
																+        },
															
 
																+        series: [{
															
 
																+          type: 'pie',
															
 
																+          radius: ['36%', '62%'],
															
 
																+          center: ['38%', '52%'],
															
 
																+          itemStyle: {
															
 
																+            borderRadius: 5,
															
 
																+            borderColor: 'rgba(3,14,31,0.5)',
															
 
																+            borderWidth: 2
															
 
																+          },
															
 
																+          label: {
															
 
																+            show: true,
															
 
																+            formatter: '{b}\n{c}台',
															
 
																+            fontSize: 24,
															
 
																+            color: '#a8cce8',
															
 
																+            lineHeight: 36,
															
 
																+            distanceToLabelLine: 6
															
 
																+          },
															
 
																+          labelLine: {
															
 
																+            length: 18,
															
 
																+            length2: 14,
															
 
																+            lineStyle: { color: 'rgba(30,144,255,0.4)', width: 2 }
															
 
																+          },
															
 
																+          data: pieData,
															
 
																+          emphasis: {
															
 
																+            scale: true,
															
 
																+            scaleSize: 6,
															
 
																+            itemStyle: {
															
 
																+              shadowBlur: 25,
															
 
																+              shadowColor: 'rgba(30,144,255,0.6)'
															
 
																+            }
															
 
																+          }
															
 
																+        }]
															
 
																+      }
															
 
																+      this.pieChart.setOption(option)
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+.equipment-stats {
															
 
																+  position: relative;
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  height: 100%;
															
 
																+}
															
 
																+
															
 
																+/* ---- Border beam ---- */
															
 
																+.border-beam {
															
 
																+  position: absolute;
															
 
																+  inset: 0;
															
 
																+  pointer-events: none;
															
 
																+  border-radius: inherit;
															
 
																+  overflow: hidden;
															
 
																+  z-index: 2;
															
 
																+
															
 
																+  &::before {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    top: 0;
															
 
																+    left: -100%;
															
 
																+    width: 40%;
															
 
																+    height: 3px;
															
 
																+    background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.9), rgba(0, 216, 255, 0.7), transparent);
															
 
																+    animation: beamTop 5s linear infinite;
															
 
																+  }
															
 
																+
															
 
																+  &::after {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    bottom: 0;
															
 
																+    right: -100%;
															
 
																+    width: 40%;
															
 
																+    height: 3px;
															
 
																+    background: linear-gradient(90deg, transparent, rgba(0, 216, 255, 0.7), rgba(30, 144, 255, 0.9), transparent);
															
 
																+    animation: beamBottom 5s linear infinite 2.5s;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@keyframes beamTop    { from { left: -40%; } to { left: 100%; } }
															
 
																+@keyframes beamBottom { from { right: -40%; } to { right: 100%; } }
															
 
																+
															
 
																+/* ---- Panel header ---- */
															
 
																+.panel-header {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 25px;
															
 
																+  padding: 20px 30px 18px;
															
 
																+  border-bottom: 1px solid $border;
															
 
																+  background: linear-gradient(90deg, rgba(0, 60, 160, 0.18), transparent);
															
 
																+  flex-shrink: 0;
															
 
																+}
															
 
																+
															
 
																+.panel-header-icon {
															
 
																+  width: 65px;
															
 
																+  height: 65px;
															
 
																+  border-radius: 12px;
															
 
																+  flex-shrink: 0;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+  font-size: 32px;
															
 
																+  background: linear-gradient(135deg, rgba(30, 144, 255, 0.25), rgba(0, 216, 255, 0.15));
															
 
																+  border: 1px solid rgba(30, 144, 255, 0.35);
															
 
																+  animation: iconGlow 3s ease-in-out infinite;
															
 
																+}
															
 
																+
															
 
																+@keyframes iconGlow {
															
 
																+  0%, 100% { box-shadow: 0 0 15px rgba(30, 144, 255, 0.3); }
															
 
																+  50% { box-shadow: 0 0 35px rgba(30, 144, 255, 0.7), 0 0 12px rgba(0, 216, 255, 0.3); }
															
 
																+}
															
 
																+
															
 
																+.panel-title {
															
 
																+  font-size: 30px;
															
 
																+  font-weight: 600;
															
 
																+  letter-spacing: 2px;
															
 
																+  color: $cyan;
															
 
																+}
															
 
																+
															
 
																+/* ---- 4:2:4 Layout ---- */
															
 
																+.equip-layout {
															
 
																+  flex: 1;
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  padding: 15px 25px;
															
 
																+  gap: 12px;
															
 
																+  min-height: 0;
															
 
																+}
															
 
																+
															
 
																+.equip-section {
															
 
																+  min-height: 0;
															
 
																+}
															
 
																+
															
 
																+.equip-top {
															
 
																+  flex: 4;
															
 
																+}
															
 
																+
															
 
																+.equip-mid {
															
 
																+  flex: 2;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+}
															
 
																+
															
 
																+.equip-bottom {
															
 
																+  flex: 4;
															
 
																+}
															
 
																+
															
 
																+.ring-chart,
															
 
																+.pie-chart {
															
 
																+  width: 100%;
															
 
																+  height: 100%;
															
 
																+}
															
 
																+
															
 
																+/* ---- Middle stat row ---- */
															
 
																+.equip-mid-row {
															
 
																+  display: flex;
															
 
																+  gap: 15px;
															
 
																+  width: 100%;
															
 
																+}
															
 
																+
															
 
																+.equip-stat-item {
															
 
																+  flex: 1;
															
 
																+  text-align: center;
															
 
																+  padding: 15px 10px;
															
 
																+  border-radius: 10px;
															
 
																+  background: $bg-card;
															
 
																+  border: 1px solid $border;
															
 
																+
															
 
																+  .ev {
															
 
																+    font-size: 38px;
															
 
																+    font-weight: 700;
															
 
																+    color: $gold;
															
 
																+  }
															
 
																+
															
 
																+  .el {
															
 
																+    font-size: 22px;
															
 
																+    color: $text-dim;
															
 
																+    margin-top: 5px;
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
--- a/src/components/EventStats.vue
+++ b/src/components/EventStats.vue
@@ -0,0 +1,570 @@
 
																+<template>
															
 
																+  <div class="panel lab-stats">
															
 
																+    <!-- Border beam animation -->
															
 
																+    <div class="border-beam"></div>
															
 
																+    <!-- Corner ornaments -->
															
 
																+    <svg class="pc tl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
															
 
																+    <svg class="pc tr" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
															
 
																+    <svg class="pc bl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
															
 
																+    <svg class="pc br" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
															
 
																+    <!-- Panel header -->
															
 
																+    <div class="panel-header">
															
 
																+      <div class="panel-header-icon">🏛️</div>
															
 
																+      <span class="panel-title">实验室基本情况统计</span>
															
 
																+      <div class="status-dot green"></div>
															
 
																+    </div>
															
 
																+
															
 
																+    <!-- Upper section: left gauge + right donut -->
															
 
																+    <div class="upper-section">
															
 
																+      <!-- Left: SVG gauge showing total -->
															
 
																+      <div class="gauge-side">
															
 
																+        <svg width="320" height="320" viewBox="0 0 320 320">
															
 
																+          <defs>
															
 
																+            <linearGradient id="arcG1" x1="0%" y1="0%" x2="100%" y2="100%">
															
 
																+              <stop offset="0%" stop-color="#1e90ff"/>
															
 
																+              <stop offset="100%" stop-color="#00d8ff"/>
															
 
																+            </linearGradient>
															
 
																+            <filter id="glow1">
															
 
																+              <feGaussianBlur stdDeviation="4" result="blur"/>
															
 
																+              <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
															
 
																+            </filter>
															
 
																+          </defs>
															
 
																+          <!-- Outermost decorative ring -->
															
 
																+          <circle cx="160" cy="160" r="148" fill="none" stroke="rgba(30,144,255,0.08)" stroke-width="1" stroke-dasharray="6 6"/>
															
 
																+          <!-- Outer track -->
															
 
																+          <circle cx="160" cy="160" r="136" fill="none" stroke="rgba(30,144,255,0.14)" stroke-width="3"/>
															
 
																+          <!-- Main arc 300deg -->
															
 
																+          <circle cx="160" cy="160" r="136" fill="none" stroke="url(#arcG1)" stroke-width="8"
															
 
																+            stroke-dasharray="711 143" stroke-linecap="round" transform="rotate(-240 160 160)" filter="url(#glow1)"/>
															
 
																+          <!-- Inner track -->
															
 
																+          <circle cx="160" cy="160" r="110" fill="rgba(3,14,31,0.7)" stroke="rgba(0,216,255,0.15)" stroke-width="2"/>
															
 
																+          <!-- Four-level color arcs -->
															
 
																+          <circle cx="160" cy="160" r="88" fill="none" stroke="#cc0000" stroke-width="12"
															
 
																+            :stroke-dasharray="levelArcs[0].dash" stroke-linecap="round" transform="rotate(-90 160 160)" opacity="0.9"/>
															
 
																+          <circle cx="160" cy="160" r="88" fill="none" stroke="#ff8000" stroke-width="12"
															
 
																+            :stroke-dasharray="levelArcs[1].dash" stroke-linecap="round" :transform="'rotate(' + levelArcs[1].rotate + ' 160 160)'" opacity="0.9"/>
															
 
																+          <circle cx="160" cy="160" r="88" fill="none" stroke="#ffcc00" stroke-width="12"
															
 
																+            :stroke-dasharray="levelArcs[2].dash" stroke-linecap="round" :transform="'rotate(' + levelArcs[2].rotate + ' 160 160)'" opacity="0.9"/>
															
 
																+          <circle cx="160" cy="160" r="88" fill="none" stroke="#0066cc" stroke-width="12"
															
 
																+            :stroke-dasharray="levelArcs[3].dash" stroke-linecap="round" :transform="'rotate(' + levelArcs[3].rotate + ' 160 160)'" opacity="0.9"/>
															
 
																+          <!-- Endpoint glow -->
															
 
																+          <circle cx="160" cy="24" r="6" fill="#1e90ff" opacity="0.9"/>
															
 
																+          <!-- Center number -->
															
 
																+          <text x="160" y="145" text-anchor="middle" fill="#ffd740" font-size="72" font-weight="900" font-family="Arial,sans-serif" letter-spacing="-2">{{ total }}</text>
															
 
																+          <text x="160" y="190" text-anchor="middle" fill="rgba(168,204,232,0.75)" font-size="26" font-family="Arial,sans-serif" letter-spacing="4">间</text>
															
 
																+        </svg>
															
 
																+        <!-- Labels -->
															
 
																+        <div class="gauge-label">
															
 
																+          <div class="gauge-label-main">实验室总数</div>
															
 
																+          <div class="gauge-label-sub">TOTAL LABORATORIES</div>
															
 
																+        </div>
															
 
																+        <!-- Color bar showing proportions -->
															
 
																+        <div class="color-bar-wrap">
															
 
																+          <div class="color-bar">
															
 
																+            <div v-for="level in levels" :key="level.name" :style="{ flex: level.value, background: level.color, boxShadow: '0 0 10px ' + level.color + '80' }"></div>
															
 
																+          </div>
															
 
																+          <div class="color-bar-labels">
															
 
																+            <span v-for="level in levels" :key="'lbl-' + level.name" :style="{ flex: level.value }">{{ level.name.replace('级', '') }}</span>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+
															
 
																+      <!-- Right: ECharts donut + level detail list -->
															
 
																+      <div class="donut-side">
															
 
																+        <div ref="donutChart" class="donut-chart"></div>
															
 
																+        <div class="level-list">
															
 
																+          <div
															
 
																+            v-for="level in levels"
															
 
																+            :key="'detail-' + level.name"
															
 
																+            class="level-item"
															
 
																+            :style="{ background: level.color + '12', borderLeftColor: level.color }"
															
 
																+          >
															
 
																+            <span class="level-item-left">
															
 
																+              <span class="level-dot" :style="{ background: level.color, boxShadow: '0 0 8px ' + level.color + 'cc' }"></span>
															
 
																+              {{ level.label }}
															
 
																+            </span>
															
 
																+            <span class="level-item-val" :style="{ color: levelValColor(level.color) }">{{ level.value }}间</span>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+
															
 
																+    <!-- Lower section: 3 status badges -->
															
 
																+    <div class="lower-section">
															
 
																+      <div class="status-row">
															
 
																+        <div class="status-badge active">
															
 
																+          <div class="val">{{ status.active }}</div>
															
 
																+          <div class="lbl">使用（间）</div>
															
 
																+        </div>
															
 
																+        <div class="status-badge warning">
															
 
																+          <div class="val">{{ status.warning }}</div>
															
 
																+          <div class="lbl">异常（间）</div>
															
 
																+        </div>
															
 
																+        <div class="status-badge idle">
															
 
																+          <div class="val">{{ status.idle }}</div>
															
 
																+          <div class="lbl">空闲（间）</div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import * as echarts from 'echarts'
															
 
																+import { getLabStats } from '@/api/screen'
															
 
																+
															
 
																+export default {
															
 
																+  name: 'EventStats',
															
 
																+  data() {
															
 
																+    return {
															
 
																+      total: 0,
															
 
																+      levels: [],
															
 
																+      status: { active: 0, warning: 0, idle: 0 },
															
 
																+      chart: null
															
 
																+    }
															
 
																+  },
															
 
																+  computed: {
															
 
																+    /** 计算SVG仪表盘中四个分级色弧的dasharray和旋转角度 */
															
 
																+    levelArcs() {
															
 
																+      if (!this.levels.length) {
															
 
																+        return [
															
 
																+          { dash: '0 553', rotate: -90 },
															
 
																+          { dash: '0 553', rotate: -90 },
															
 
																+          { dash: '0 553', rotate: -90 },
															
 
																+          { dash: '0 553', rotate: -90 }
															
 
																+        ]
															
 
																+      }
															
 
																+      const circumference = 2 * Math.PI * 88 // ~553
															
 
																+      const totalVal = this.levels.reduce((s, l) => s + l.value, 0)
															
 
																+      const arcs = []
															
 
																+      let accAngle = -90 // start at top
															
 
																+      for (let i = 0; i < this.levels.length; i++) {
															
 
																+        const ratio = this.levels[i].value / totalVal
															
 
																+        const arcLen = Math.round(ratio * circumference)
															
 
																+        const gapLen = Math.round(circumference - arcLen)
															
 
																+        arcs.push({
															
 
																+          dash: arcLen + ' ' + gapLen,
															
 
																+          rotate: Math.round(accAngle)
															
 
																+        })
															
 
																+        accAngle += ratio * 360
															
 
																+      }
															
 
																+      return arcs
															
 
																+    }
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    this.fetchData()
															
 
																+  },
															
 
																+  beforeDestroy() {
															
 
																+    if (this.chart) {
															
 
																+      this.chart.dispose()
															
 
																+      this.chart = null
															
 
																+    }
															
 
																+  },
															
 
																+  methods: {
															
 
																+    async fetchData() {
															
 
																+      const res = await getLabStats()
															
 
																+      if (res.code === 200) {
															
 
																+        this.total = res.data.total
															
 
																+        this.levels = res.data.levels
															
 
																+        this.status = res.data.status
															
 
																+        this.$nextTick(() => this.initDonutChart())
															
 
																+      }
															
 
																+    },
															
 
																+    /** 根据分级主色计算稍亮的数值展示色 */
															
 
																+    levelValColor(color) {
															
 
																+      const map = {
															
 
																+        '#cc0000': '#ff6666',
															
 
																+        '#ff8000': '#ffaa44',
															
 
																+        '#ffcc00': '#ffe066',
															
 
																+        '#0066cc': '#4499ff'
															
 
																+      }
															
 
																+      return map[color] || color
															
 
																+    },
															
 
																+    /** 初始化ECharts环形图 - 展示四级分类占比，中心显示总数 */
															
 
																+    initDonutChart() {
															
 
																+      this.chart = echarts.init(this.$refs.donutChart, null, {
															
 
																+        renderer: 'canvas',
															
 
																+        devicePixelRatio: 2
															
 
																+      })
															
 
																+      const option = {
															
 
																+        backgroundColor: 'transparent',
															
 
																+        tooltip: {
															
 
																+          trigger: 'item',
															
 
																+          formatter: '{b}: {c}间 ({d}%)',
															
 
																+          backgroundColor: 'rgba(3,14,42,0.92)',
															
 
																+          borderColor: 'rgba(30,144,255,0.3)',
															
 
																+          textStyle: { color: '#a8cce8', fontSize: 28 }
															
 
																+        },
															
 
																+        graphic: [
															
 
																+          {
															
 
																+            type: 'text',
															
 
																+            left: 'center',
															
 
																+            top: '40%',
															
 
																+            style: {
															
 
																+              text: String(this.total),
															
 
																+              fill: '#ffd740',
															
 
																+              font: 'bold 80px Arial',
															
 
																+              textAlign: 'center'
															
 
																+            }
															
 
																+          },
															
 
																+          {
															
 
																+            type: 'text',
															
 
																+            left: 'center',
															
 
																+            top: '58%',
															
 
																+            style: {
															
 
																+              text: '实验室总数（间）',
															
 
																+              fill: 'rgba(168,204,232,0.65)',
															
 
																+              font: '22px Arial',
															
 
																+              textAlign: 'center'
															
 
																+            }
															
 
																+          }
															
 
																+        ],
															
 
																+        series: [{
															
 
																+          type: 'pie',
															
 
																+          radius: ['42%', '68%'],
															
 
																+          center: ['50%', '50%'],
															
 
																+          startAngle: 100,
															
 
																+          itemStyle: {
															
 
																+            borderRadius: 6,
															
 
																+            borderColor: 'rgba(3,14,31,0.6)',
															
 
																+            borderWidth: 3
															
 
																+          },
															
 
																+          label: {
															
 
																+            show: true,
															
 
																+            formatter: function (params) {
															
 
																+              return '{lvl|' + params.name + '}\n{cnt|' + params.value + '间}\n{pct|' + params.percent + '%}'
															
 
																+            },
															
 
																+            rich: {
															
 
																+              lvl: { fontSize: 24, fontWeight: 700, color: '#ddf0ff', lineHeight: 36 },
															
 
																+              cnt: { fontSize: 30, fontWeight: 900, color: '#ffd740', lineHeight: 42 },
															
 
																+              pct: { fontSize: 22, color: 'rgba(168,204,232,0.6)', lineHeight: 32 }
															
 
																+            },
															
 
																+            distanceToLabelLine: 8
															
 
																+          },
															
 
																+          labelLine: {
															
 
																+            show: true,
															
 
																+            length: 20,
															
 
																+            length2: 25,
															
 
																+            lineStyle: { color: 'rgba(30,144,255,0.45)', width: 2 }
															
 
																+          },
															
 
																+          data: this.levels.map(function (l) {
															
 
																+            return {
															
 
																+              value: l.value,
															
 
																+              name: l.name,
															
 
																+              itemStyle: {
															
 
																+                color: l.color,
															
 
																+                shadowBlur: 12,
															
 
																+                shadowColor: l.color + '80'
															
 
																+              }
															
 
																+            }
															
 
																+          }),
															
 
																+          emphasis: {
															
 
																+            scale: true,
															
 
																+            scaleSize: 8,
															
 
																+            itemStyle: { shadowBlur: 30, shadowColor: 'rgba(30,144,255,0.6)' },
															
 
																+            label: { fontSize: 28 }
															
 
																+          }
															
 
																+        }]
															
 
																+      }
															
 
																+      this.chart.setOption(option)
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+.lab-stats {
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  position: relative;
															
 
																+  border-radius: 15px;
															
 
																+  overflow: hidden;
															
 
																+  background: $bg-panel;
															
 
																+  border: 1px solid $border;
															
 
																+}
															
 
																+
															
 
																+.lab-stats::before {
															
 
																+  content: '';
															
 
																+  position: absolute;
															
 
																+  inset: 0;
															
 
																+  pointer-events: none;
															
 
																+  border-radius: inherit;
															
 
																+  background: linear-gradient(135deg, rgba(30, 144, 255, 0.05) 0%, transparent 50%, rgba(0, 216, 255, 0.03) 100%);
															
 
																+}
															
 
																+
															
 
																+/* ---- Border beam ---- */
															
 
																+.border-beam {
															
 
																+  position: absolute;
															
 
																+  inset: 0;
															
 
																+  pointer-events: none;
															
 
																+  border-radius: inherit;
															
 
																+  overflow: hidden;
															
 
																+  z-index: 2;
															
 
																+
															
 
																+  &::before {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    top: 0;
															
 
																+    left: -100%;
															
 
																+    width: 40%;
															
 
																+    height: 3px;
															
 
																+    background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.9), rgba(0, 216, 255, 0.7), transparent);
															
 
																+    animation: beamTop 5s linear infinite;
															
 
																+  }
															
 
																+
															
 
																+  &::after {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    bottom: 0;
															
 
																+    right: -100%;
															
 
																+    width: 40%;
															
 
																+    height: 3px;
															
 
																+    background: linear-gradient(90deg, transparent, rgba(0, 216, 255, 0.7), rgba(30, 144, 255, 0.9), transparent);
															
 
																+    animation: beamBottom 5s linear infinite 2.5s;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@keyframes beamTop    { from { left: -40%; }  to { left: 100%; } }
															
 
																+@keyframes beamBottom { from { right: -40%; } to { right: 100%; } }
															
 
																+
															
 
																+/* ---- Corner ornaments ---- */
															
 
																+.pc {
															
 
																+  position: absolute;
															
 
																+  width: 35px;
															
 
																+  height: 35px;
															
 
																+  z-index: 3;
															
 
																+  pointer-events: none;
															
 
																+
															
 
																+  &.tl { top: 0; left: 0; }
															
 
																+  &.tr { top: 0; right: 0; transform: scaleX(-1); }
															
 
																+  &.bl { bottom: 0; left: 0; transform: scaleY(-1); }
															
 
																+  &.br { bottom: 0; right: 0; transform: scale(-1); }
															
 
																+}
															
 
																+
															
 
																+/* ---- Panel header ---- */
															
 
																+.panel-header {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 25px;
															
 
																+  padding: 20px 30px 18px;
															
 
																+  border-bottom: 1px solid $border;
															
 
																+  background: linear-gradient(90deg, rgba(0, 60, 160, 0.18), transparent);
															
 
																+  flex-shrink: 0;
															
 
																+}
															
 
																+
															
 
																+.panel-header-icon {
															
 
																+  width: 65px;
															
 
																+  height: 65px;
															
 
																+  border-radius: 12px;
															
 
																+  flex-shrink: 0;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+  font-size: 32px;
															
 
																+  background: linear-gradient(135deg, rgba(30, 144, 255, 0.25), rgba(0, 216, 255, 0.15));
															
 
																+  border: 1px solid rgba(30, 144, 255, 0.35);
															
 
																+  animation: iconGlow 3s ease-in-out infinite;
															
 
																+}
															
 
																+
															
 
																+@keyframes iconGlow {
															
 
																+  0%, 100% { box-shadow: 0 0 15px rgba(30, 144, 255, 0.3); }
															
 
																+  50%      { box-shadow: 0 0 35px rgba(30, 144, 255, 0.7), 0 0 12px rgba(0, 216, 255, 0.3); }
															
 
																+}
															
 
																+
															
 
																+.panel-title {
															
 
																+  font-size: 30px;
															
 
																+  font-weight: 600;
															
 
																+  letter-spacing: 2px;
															
 
																+  color: $cyan;
															
 
																+}
															
 
																+
															
 
																+/* ---- Status dot ---- */
															
 
																+.status-dot {
															
 
																+  width: 20px;
															
 
																+  height: 20px;
															
 
																+  border-radius: 50%;
															
 
																+  display: inline-block;
															
 
																+  margin-left: auto;
															
 
																+  animation: dotPulse 2s ease-in-out infinite;
															
 
																+
															
 
																+  &.green {
															
 
																+    background: $green;
															
 
																+    box-shadow: 0 0 15px $green;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@keyframes dotPulse {
															
 
																+  0%, 100% { transform: scale(1); opacity: 1; }
															
 
																+  50%      { transform: scale(1.3); opacity: 0.7; }
															
 
																+}
															
 
																+
															
 
																+/* ---- Upper section ---- */
															
 
																+.upper-section {
															
 
																+  flex: 4;
															
 
																+  display: flex;
															
 
																+  min-height: 0;
															
 
																+  overflow: hidden;
															
 
																+}
															
 
																+
															
 
																+/* Left gauge side */
															
 
																+.gauge-side {
															
 
																+  flex: 4;
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+  gap: 18px;
															
 
																+  padding: 25px 20px;
															
 
																+  border-right: 1px solid $border;
															
 
																+  background: linear-gradient(180deg, rgba(30, 144, 255, 0.04), transparent);
															
 
																+}
															
 
																+
															
 
																+.gauge-label {
															
 
																+  text-align: center;
															
 
																+
															
 
																+  &-main {
															
 
																+    font-size: 30px;
															
 
																+    font-weight: 700;
															
 
																+    color: $cyan;
															
 
																+    letter-spacing: 4px;
															
 
																+  }
															
 
																+
															
 
																+  &-sub {
															
 
																+    font-size: 22px;
															
 
																+    color: $text-dim;
															
 
																+    margin-top: 6px;
															
 
																+    letter-spacing: 2px;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.color-bar-wrap {
															
 
																+  width: 100%;
															
 
																+  padding: 0 10px;
															
 
																+}
															
 
																+
															
 
																+.color-bar {
															
 
																+  display: flex;
															
 
																+  gap: 5px;
															
 
																+  height: 12px;
															
 
																+  border-radius: 6px;
															
 
																+  overflow: hidden;
															
 
																+}
															
 
																+
															
 
																+.color-bar-labels {
															
 
																+  display: flex;
															
 
																+  gap: 5px;
															
 
																+  margin-top: 8px;
															
 
																+  font-size: 22px;
															
 
																+  color: $text-dim;
															
 
																+  text-align: center;
															
 
																+}
															
 
																+
															
 
																+/* Right donut side */
															
 
																+.donut-side {
															
 
																+  flex: 6;
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  justify-content: center;
															
 
																+  padding: 25px 25px 20px;
															
 
																+  gap: 0;
															
 
																+}
															
 
																+
															
 
																+.donut-chart {
															
 
																+  flex: 0 0 340px;
															
 
																+  width: 100%;
															
 
																+}
															
 
																+
															
 
																+/* ---- Level detail list ---- */
															
 
																+.level-list {
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  gap: 10px;
															
 
																+  margin-top: 10px;
															
 
																+}
															
 
																+
															
 
																+.level-item {
															
 
																+  display: flex;
															
 
																+  justify-content: space-between;
															
 
																+  align-items: center;
															
 
																+  font-size: 26px;
															
 
																+  padding: 10px 16px;
															
 
																+  border-radius: 8px;
															
 
																+  border-left: 4px solid transparent;
															
 
																+
															
 
																+  &-left {
															
 
																+    display: flex;
															
 
																+    align-items: center;
															
 
																+    gap: 12px;
															
 
																+  }
															
 
																+
															
 
																+  &-val {
															
 
																+    font-weight: 700;
															
 
																+    font-size: 28px;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.level-dot {
															
 
																+  width: 16px;
															
 
																+  height: 16px;
															
 
																+  border-radius: 3px;
															
 
																+  display: inline-block;
															
 
																+}
															
 
																+
															
 
																+/* ---- Lower section ---- */
															
 
																+.lower-section {
															
 
																+  flex: 1;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  padding: 0 25px 20px;
															
 
																+  border-top: 1px solid $border;
															
 
																+  gap: 15px;
															
 
																+  min-height: 0;
															
 
																+}
															
 
																+
															
 
																+.status-row {
															
 
																+  display: flex;
															
 
																+  gap: 15px;
															
 
																+  width: 100%;
															
 
																+}
															
 
																+
															
 
																+.status-badge {
															
 
																+  flex: 1;
															
 
																+  padding: 15px 10px;
															
 
																+  border-radius: 10px;
															
 
																+  text-align: center;
															
 
																+  background: $bg-card;
															
 
																+  border: 1px solid $border;
															
 
																+
															
 
																+  &.active {
															
 
																+    border-color: $green;
															
 
																+    background: rgba(0, 230, 118, 0.07);
															
 
																+
															
 
																+    .val { color: $green; }
															
 
																+  }
															
 
																+
															
 
																+  &.warning {
															
 
																+    border-color: #f59e0b;
															
 
																+    background: rgba(245, 158, 11, 0.07);
															
 
																+
															
 
																+    .val { color: #f59e0b; }
															
 
																+  }
															
 
																+
															
 
																+  &.idle {
															
 
																+    border-color: $indigo;
															
 
																+    background: rgba(67, 97, 238, 0.07);
															
 
																+
															
 
																+    .val { color: $indigo; }
															
 
																+  }
															
 
																+
															
 
																+  .val {
															
 
																+    font-size: 48px;
															
 
																+    font-weight: 700;
															
 
																+  }
															
 
																+
															
 
																+  .lbl {
															
 
																+    font-size: 25px;
															
 
																+    color: $text-dim;
															
 
																+    margin-top: 5px;
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
--- a/src/components/LabEnvironment.vue
+++ b/src/components/LabEnvironment.vue
@@ -0,0 +1,310 @@
 
																+<template>
															
 
																+  <div class="panel lab-environment">
															
 
																+    <!-- Animated border beam -->
															
 
																+    <div class="border-beam"></div>
															
 
																+    <!-- Corner ornaments -->
															
 
																+    <svg class="pc tl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
															
 
																+    <svg class="pc tr" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
															
 
																+    <svg class="pc bl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
															
 
																+    <svg class="pc br" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
															
 
																+    <!-- Panel header -->
															
 
																+    <div class="panel-header">
															
 
																+      <div class="panel-header-icon">&#x1F321;&#xFE0F;</div>
															
 
																+      <span class="panel-title">实验环境安全智能感知</span>
															
 
																+      <div class="status-dot red" style="margin-left:auto"></div>
															
 
																+    </div>
															
 
																+    <!-- Scrolling sensor list -->
															
 
																+    <div class="sensor-scroll-wrap">
															
 
																+      <div class="sensor-scroll-inner">
															
 
																+        <div
															
 
																+          v-for="(item, idx) in scrollList"
															
 
																+          :key="idx"
															
 
																+          class="sensor-item"
															
 
																+          :class="{ alert: item.alert }"
															
 
																+        >
															
 
																+          <div class="sensor-item-head">
															
 
																+            <span class="sensor-name">{{ item.name }}（{{ item.room }}）</span>
															
 
																+            <span class="sensor-unit">{{ item.unit }}</span>
															
 
																+            <span v-if="item.alert" class="sensor-status alarm-status">&#x1F6A8; 告警</span>
															
 
																+            <span v-else class="sensor-status normal-status">&#x25CF; 正常</span>
															
 
																+          </div>
															
 
																+          <div class="sensor-metrics">
															
 
																+            <div class="sensor-metric">&#x1F321;&#xFE0F; {{ item.t }}&deg;C</div>
															
 
																+            <div class="sensor-metric">&#x1F4A7; {{ item.h }}%</div>
															
 
																+            <div class="sensor-metric" :class="{ alarm: item.tvoc > 0.6 }">&#x1F9EA; TVOC {{ item.tvoc }}</div>
															
 
																+            <div class="sensor-metric" :class="{ alarm: item.co2 > 700 }">&#x1F4A8; CO&#x2082; {{ item.co2 }}</div>
															
 
																+            <div class="sensor-metric">&#x1FAE7; O&#x2082; {{ item.o2 }}%</div>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import { getSensorList } from '@/api/screen'
															
 
																+
															
 
																+export default {
															
 
																+  name: 'LabEnvironment',
															
 
																+  data() {
															
 
																+    return {
															
 
																+      sensorList: []
															
 
																+    }
															
 
																+  },
															
 
																+  computed: {
															
 
																+    /** Duplicate data for seamless CSS scroll loop */
															
 
																+    scrollList() {
															
 
																+      return [...this.sensorList, ...this.sensorList]
															
 
																+    }
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    this.fetchData()
															
 
																+  },
															
 
																+  methods: {
															
 
																+    async fetchData() {
															
 
																+      const res = await getSensorList()
															
 
																+      if (res.code === 200) {
															
 
																+        this.sensorList = res.data
															
 
																+      }
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+.lab-environment {
															
 
																+  position: relative;
															
 
																+  border-radius: 15px;
															
 
																+  overflow: hidden;
															
 
																+  background: $bg-panel;
															
 
																+  border: 1px solid $border;
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  height: 100%;
															
 
																+
															
 
																+  &::before {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    inset: 0;
															
 
																+    pointer-events: none;
															
 
																+    border-radius: inherit;
															
 
																+    background: linear-gradient(135deg, rgba(30,144,255,0.05) 0%, transparent 50%, rgba(0,216,255,0.03) 100%);
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+/* ===== Corner ornaments ===== */
															
 
																+.pc {
															
 
																+  position: absolute;
															
 
																+  width: 35px;
															
 
																+  height: 35px;
															
 
																+  z-index: 3;
															
 
																+  pointer-events: none;
															
 
																+
															
 
																+  &.tl { top: 0; left: 0; }
															
 
																+  &.tr { top: 0; right: 0; transform: scaleX(-1); }
															
 
																+  &.bl { bottom: 0; left: 0; transform: scaleY(-1); }
															
 
																+  &.br { bottom: 0; right: 0; transform: scale(-1); }
															
 
																+
															
 
																+  svg { width: 100%; height: 100%; }
															
 
																+}
															
 
																+
															
 
																+/* ===== Animated border beam ===== */
															
 
																+.border-beam {
															
 
																+  position: absolute;
															
 
																+  inset: 0;
															
 
																+  pointer-events: none;
															
 
																+  border-radius: inherit;
															
 
																+  overflow: hidden;
															
 
																+  z-index: 2;
															
 
																+
															
 
																+  &::before {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    top: 0;
															
 
																+    left: -100%;
															
 
																+    width: 40%;
															
 
																+    height: 3px;
															
 
																+    background: linear-gradient(90deg, transparent, rgba(30,144,255,0.9), rgba(0,216,255,0.7), transparent);
															
 
																+    animation: beamTop 5s linear infinite;
															
 
																+  }
															
 
																+
															
 
																+  &::after {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    bottom: 0;
															
 
																+    right: -100%;
															
 
																+    width: 40%;
															
 
																+    height: 3px;
															
 
																+    background: linear-gradient(90deg, transparent, rgba(0,216,255,0.7), rgba(30,144,255,0.9), transparent);
															
 
																+    animation: beamBottom 5s linear infinite 2.5s;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@keyframes beamTop    { from { left: -40%; }  to { left: 100%; } }
															
 
																+@keyframes beamBottom { from { right: -40%; } to { right: 100%; } }
															
 
																+
															
 
																+/* ===== Panel header ===== */
															
 
																+.panel-header {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 25px;
															
 
																+  padding: 20px 30px 18px;
															
 
																+  border-bottom: 1px solid $border;
															
 
																+  background: linear-gradient(90deg, rgba(0,60,160,0.18), transparent);
															
 
																+  flex-shrink: 0;
															
 
																+}
															
 
																+
															
 
																+.panel-header-icon {
															
 
																+  width: 65px;
															
 
																+  height: 65px;
															
 
																+  border-radius: 12px;
															
 
																+  flex-shrink: 0;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+  font-size: 32px;
															
 
																+  background: linear-gradient(135deg, rgba(30,144,255,0.25), rgba(0,216,255,0.15));
															
 
																+  border: 1px solid rgba(30,144,255,0.35);
															
 
																+  animation: iconGlow 3s ease-in-out infinite;
															
 
																+}
															
 
																+
															
 
																+@keyframes iconGlow {
															
 
																+  0%, 100% { box-shadow: 0 0 15px rgba(30,144,255,0.3); }
															
 
																+  50%      { box-shadow: 0 0 35px rgba(30,144,255,0.7), 0 0 12px rgba(0,216,255,0.3); }
															
 
																+}
															
 
																+
															
 
																+.panel-title {
															
 
																+  font-size: 30px;
															
 
																+  font-weight: 600;
															
 
																+  letter-spacing: 2px;
															
 
																+  color: $cyan;
															
 
																+}
															
 
																+
															
 
																+/* ===== Status dot ===== */
															
 
																+.status-dot {
															
 
																+  width: 20px;
															
 
																+  height: 20px;
															
 
																+  border-radius: 50%;
															
 
																+  display: inline-block;
															
 
																+
															
 
																+  &.red {
															
 
																+    background: $red;
															
 
																+    box-shadow: 0 0 15px $red;
															
 
																+    animation: blinkRed 0.8s ease-in-out infinite;
															
 
																+  }
															
 
																+
															
 
																+  &.green {
															
 
																+    background: $green;
															
 
																+    box-shadow: 0 0 15px $green;
															
 
																+    animation: dotPulse 2s ease-in-out infinite;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@keyframes dotPulse {
															
 
																+  0%, 100% { transform: scale(1); opacity: 1; }
															
 
																+  50%      { transform: scale(1.3); opacity: 0.7; }
															
 
																+}
															
 
																+
															
 
																+@keyframes blinkRed {
															
 
																+  0%, 100% { opacity: 1; }
															
 
																+  50%      { opacity: 0.35; }
															
 
																+}
															
 
																+
															
 
																+/* ===== Sensor scroll ===== */
															
 
																+.sensor-scroll-wrap {
															
 
																+  overflow: hidden;
															
 
																+  flex: 1;
															
 
																+  min-height: 0;
															
 
																+  padding: 15px 20px;
															
 
																+}
															
 
																+
															
 
																+.sensor-scroll-inner {
															
 
																+  animation: scrollUp 30s linear infinite;
															
 
																+
															
 
																+  &:hover {
															
 
																+    animation-play-state: paused;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@keyframes scrollUp {
															
 
																+  0%   { transform: translateY(0); }
															
 
																+  100% { transform: translateY(-50%); }
															
 
																+}
															
 
																+
															
 
																+/* ===== Sensor item ===== */
															
 
																+.sensor-item {
															
 
																+  padding: 18px 20px;
															
 
																+  border-radius: 10px;
															
 
																+  margin-bottom: 12px;
															
 
																+  background: $bg-card;
															
 
																+  border: 1px solid $border;
															
 
																+
															
 
																+  &.alert {
															
 
																+    border-color: rgba(255,59,59,0.6);
															
 
																+    background: rgba(255,30,30,0.07);
															
 
																+    animation: alertGlow 1.5s ease-in-out infinite;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@keyframes alertGlow {
															
 
																+  0%, 100% { box-shadow: 0 0 12px rgba(255,59,59,0.25); }
															
 
																+  50%      { box-shadow: 0 0 40px rgba(255,59,59,0.6); }
															
 
																+}
															
 
																+
															
 
																+.sensor-item-head {
															
 
																+  display: flex;
															
 
																+  justify-content: space-between;
															
 
																+  align-items: center;
															
 
																+  margin-bottom: 10px;
															
 
																+}
															
 
																+
															
 
																+.sensor-name {
															
 
																+  font-size: 28px;
															
 
																+  font-weight: 600;
															
 
																+  color: $white;
															
 
																+}
															
 
																+
															
 
																+.sensor-unit {
															
 
																+  font-size: 25px;
															
 
																+  color: $text-dim;
															
 
																+}
															
 
																+
															
 
																+.sensor-status {
															
 
																+  font-size: 25px;
															
 
																+}
															
 
																+
															
 
																+.alarm-status {
															
 
																+  color: $red;
															
 
																+  animation: blinkRed 0.8s ease-in-out infinite;
															
 
																+}
															
 
																+
															
 
																+.normal-status {
															
 
																+  color: $green;
															
 
																+}
															
 
																+
															
 
																+/* ===== Sensor metrics ===== */
															
 
																+.sensor-metrics {
															
 
																+  display: flex;
															
 
																+  gap: 10px;
															
 
																+  flex-wrap: wrap;
															
 
																+}
															
 
																+
															
 
																+.sensor-metric {
															
 
																+  padding: 5px 15px;
															
 
																+  border-radius: 5px;
															
 
																+  font-size: 25px;
															
 
																+  background: rgba(4,16,45,0.7);
															
 
																+  border: 1px solid rgba(30,144,255,0.2);
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 8px;
															
 
																+  color: $text;
															
 
																+
															
 
																+  &.alarm {
															
 
																+    background: rgba(255,0,30,0.12);
															
 
																+    border-color: $red;
															
 
																+    color: $red;
															
 
																+    animation: blinkRed 0.8s ease-in-out infinite;
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
--- a/src/components/PersonnelTrend.vue
+++ b/src/components/PersonnelTrend.vue
@@ -0,0 +1,285 @@
 
																+<template>
															
 
																+  <div class="panel personnel-trend">
															
 
																+    <div class="border-beam"></div>
															
 
																+    <div class="panel-header">
															
 
																+      <div class="panel-header-icon">👥</div>
															
 
																+      <span class="panel-title">实验室进入人数统计及走势</span>
															
 
																+    </div>
															
 
																+    <div class="panel-body">
															
 
																+      <!-- Flip counter digits -->
															
 
																+      <div class="flip-counters">
															
 
																+        <div class="flip-counter">
															
 
																+          <div class="fc-label">今日进入总人数</div>
															
 
																+          <div class="fc-digits">
															
 
																+            <div
															
 
																+              v-for="(digit, idx) in totalDigits"
															
 
																+              :key="'total-' + idx"
															
 
																+              class="flip-digit"
															
 
																+            >{{ digit }}</div>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+        <div class="flip-counter">
															
 
																+          <div class="fc-label">当前在场实验人数</div>
															
 
																+          <div class="fc-digits">
															
 
																+            <div
															
 
																+              v-for="(digit, idx) in presentDigits"
															
 
																+              :key="'present-' + idx"
															
 
																+              class="flip-digit"
															
 
																+            >{{ digit }}</div>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+      <!-- Line chart -->
															
 
																+      <div class="chart-wrap">
															
 
																+        <div ref="chart" class="chart"></div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import * as echarts from 'echarts'
															
 
																+import { getPersonnelStats } from '@/api/screen'
															
 
																+
															
 
																+export default {
															
 
																+  name: 'PersonnelTrend',
															
 
																+  data() {
															
 
																+    return {
															
 
																+      totalEntry: 0,
															
 
																+      currentPresent: 0,
															
 
																+      displayTotal: 0,
															
 
																+      displayPresent: 0,
															
 
																+      chart: null,
															
 
																+      animTimerTotal: null,
															
 
																+      animTimerPresent: null
															
 
																+    }
															
 
																+  },
															
 
																+  computed: {
															
 
																+    totalDigits() {
															
 
																+      return String(this.displayTotal).padStart(4, '0').split('')
															
 
																+    },
															
 
																+    presentDigits() {
															
 
																+      return String(this.displayPresent).padStart(4, '0').split('')
															
 
																+    }
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    this.fetchData()
															
 
																+  },
															
 
																+  beforeDestroy() {
															
 
																+    if (this.animTimerTotal) cancelAnimationFrame(this.animTimerTotal)
															
 
																+    if (this.animTimerPresent) cancelAnimationFrame(this.animTimerPresent)
															
 
																+    if (this.chart) {
															
 
																+      this.chart.dispose()
															
 
																+      this.chart = null
															
 
																+    }
															
 
																+  },
															
 
																+  methods: {
															
 
																+    async fetchData() {
															
 
																+      const res = await getPersonnelStats()
															
 
																+      if (res.code === 200) {
															
 
																+        this.totalEntry = res.data.totalEntry
															
 
																+        this.currentPresent = res.data.currentPresent
															
 
																+
															
 
																+        // Animated count-up on mount
															
 
																+        this.$nextTick(() => {
															
 
																+          setTimeout(() => this.animateCount('total', 0, this.totalEntry, 2000), 600)
															
 
																+          setTimeout(() => this.animateCount('present', 0, this.currentPresent, 1500), 900)
															
 
																+          this.initChart(res.data.trend)
															
 
																+        })
															
 
																+      }
															
 
																+    },
															
 
																+
															
 
																+    /** Animate count from `from` to `to` over `duration` ms */
															
 
																+    animateCount(type, from, to, duration) {
															
 
																+      const startTime = Date.now()
															
 
																+      const tick = () => {
															
 
																+        const elapsed = Date.now() - startTime
															
 
																+        const progress = Math.min(elapsed / duration, 1)
															
 
																+        const current = Math.round(from + (to - from) * progress)
															
 
																+        if (type === 'total') {
															
 
																+          this.displayTotal = current
															
 
																+        } else {
															
 
																+          this.displayPresent = current
															
 
																+        }
															
 
																+        if (progress < 1) {
															
 
																+          if (type === 'total') {
															
 
																+            this.animTimerTotal = requestAnimationFrame(tick)
															
 
																+          } else {
															
 
																+            this.animTimerPresent = requestAnimationFrame(tick)
															
 
																+          }
															
 
																+        }
															
 
																+      }
															
 
																+      tick()
															
 
																+    },
															
 
																+
															
 
																+    /** 初始化面积折线图 - 展示24小时进入/在场人数走势 */
															
 
																+    initChart(trend) {
															
 
																+      this.chart = echarts.init(this.$refs.chart, null, {
															
 
																+        renderer: 'canvas',
															
 
																+        devicePixelRatio: 2
															
 
																+      })
															
 
																+
															
 
																+      const TOOLTIP_CFG = {
															
 
																+        backgroundColor: 'rgba(3,14,42,0.92)',
															
 
																+        borderColor: 'rgba(30,144,255,0.3)',
															
 
																+        textStyle: { color: '#a8cce8', fontSize: 28 }
															
 
																+      }
															
 
																+
															
 
																+      const option = {
															
 
																+        backgroundColor: 'transparent',
															
 
																+        tooltip: {
															
 
																+          trigger: 'axis',
															
 
																+          ...TOOLTIP_CFG
															
 
																+        },
															
 
																+        legend: {
															
 
																+          data: ['进入人数', '在场人数'],
															
 
																+          top: 0,
															
 
																+          right: 0,
															
 
																+          textStyle: { color: '#a8cce8', fontSize: 25 },
															
 
																+          icon: 'circle',
															
 
																+          itemWidth: 20,
															
 
																+          itemHeight: 20
															
 
																+        },
															
 
																+        grid: {
															
 
																+          left: 28,
															
 
																+          right: 8,
															
 
																+          top: 45,
															
 
																+          bottom: 50,
															
 
																+          containLabel: true
															
 
																+        },
															
 
																+        xAxis: {
															
 
																+          type: 'category',
															
 
																+          data: trend.times,
															
 
																+          axisLabel: { color: '#5890b8', fontSize: 22 },
															
 
																+          axisLine: { lineStyle: { color: 'rgba(30,144,255,0.2)' } },
															
 
																+          axisTick: { show: false }
															
 
																+        },
															
 
																+        yAxis: {
															
 
																+          type: 'value',
															
 
																+          axisLabel: { color: '#5890b8', fontSize: 22 },
															
 
																+          axisLine: { show: false },
															
 
																+          splitLine: { lineStyle: { color: 'rgba(30,144,255,0.1)' } }
															
 
																+        },
															
 
																+        series: [
															
 
																+          {
															
 
																+            name: '进入人数',
															
 
																+            type: 'line',
															
 
																+            data: trend.entry,
															
 
																+            smooth: true,
															
 
																+            symbol: 'circle',
															
 
																+            symbolSize: 12,
															
 
																+            lineStyle: { color: '#1e90ff', width: 5 },
															
 
																+            itemStyle: { color: '#1e90ff' },
															
 
																+            areaStyle: {
															
 
																+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
															
 
																+                { offset: 0, color: 'rgba(30,144,255,0.32)' },
															
 
																+                { offset: 1, color: 'rgba(30,144,255,0.02)' }
															
 
																+              ])
															
 
																+            }
															
 
																+          },
															
 
																+          {
															
 
																+            name: '在场人数',
															
 
																+            type: 'line',
															
 
																+            data: trend.present,
															
 
																+            smooth: true,
															
 
																+            symbol: 'circle',
															
 
																+            symbolSize: 12,
															
 
																+            lineStyle: { color: '#ffd740', width: 5 },
															
 
																+            itemStyle: { color: '#ffd740' },
															
 
																+            areaStyle: {
															
 
																+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
															
 
																+                { offset: 0, color: 'rgba(255,215,64,0.22)' },
															
 
																+                { offset: 1, color: 'rgba(255,215,64,0.01)' }
															
 
																+              ])
															
 
																+            }
															
 
																+          }
															
 
																+        ]
															
 
																+      }
															
 
																+
															
 
																+      this.chart.setOption(option)
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+.personnel-trend {
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+}
															
 
																+
															
 
																+.panel-body {
															
 
																+  flex: 1;
															
 
																+  min-height: 0;
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  padding: 20px 25px;
															
 
																+}
															
 
																+
															
 
																+// Flip counters section
															
 
																+.flip-counters {
															
 
																+  display: flex;
															
 
																+  gap: 25px;
															
 
																+}
															
 
																+
															
 
																+.flip-counter {
															
 
																+  flex: 1;
															
 
																+  text-align: center;
															
 
																+  padding: 18px 15px;
															
 
																+  border-radius: 10px;
															
 
																+  background: $bg-card;
															
 
																+  border: 1px solid $border;
															
 
																+
															
 
																+  .fc-label {
															
 
																+    font-size: 25px;
															
 
																+    color: $text-dim;
															
 
																+    margin-bottom: 12px;
															
 
																+    letter-spacing: 2px;
															
 
																+  }
															
 
																+
															
 
																+  .fc-digits {
															
 
																+    display: flex;
															
 
																+    gap: 8px;
															
 
																+    justify-content: center;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.flip-digit {
															
 
																+  width: 50px;
															
 
																+  height: 75px;
															
 
																+  border-radius: 8px;
															
 
																+  background: linear-gradient(180deg, rgba(4, 18, 55, 0.9), rgba(2, 10, 32, 0.95));
															
 
																+  border: 1px solid rgba(30, 144, 255, 0.3);
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+  font-size: 45px;
															
 
																+  font-weight: 700;
															
 
																+  color: $gold;
															
 
																+  font-variant-numeric: tabular-nums;
															
 
																+  position: relative;
															
 
																+  overflow: hidden;
															
 
																+
															
 
																+  &::after {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    left: 0;
															
 
																+    right: 0;
															
 
																+    top: 50%;
															
 
																+    height: 2px;
															
 
																+    background: rgba(0, 0, 0, 0.4);
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+// Chart area
															
 
																+.chart-wrap {
															
 
																+  flex: 1;
															
 
																+  min-height: 0;
															
 
																+  margin-top: 12px;
															
 
																+
															
 
																+  .chart {
															
 
																+    width: 100%;
															
 
																+    height: 100%;
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
--- a/src/components/SafetyCompliance.vue
+++ b/src/components/SafetyCompliance.vue
@@ -0,0 +1,165 @@
 
																+<template>
															
 
																+  <div class="panel safety-compliance">
															
 
																+    <div class="border-beam"></div>
															
 
																+    <div class="panel-header">
															
 
																+      <div class="panel-header-icon">📊</div>
															
 
																+      <span class="panel-title">实验室安全分级统计</span>
															
 
																+    </div>
															
 
																+    <div class="chart-wrap">
															
 
																+      <div ref="chart" class="chart"></div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import * as echarts from 'echarts'
															
 
																+import { getSafetyLevelStats } from '@/api/screen'
															
 
																+
															
 
																+export default {
															
 
																+  name: 'SafetyCompliance',
															
 
																+  data() {
															
 
																+    return {
															
 
																+      chart: null,
															
 
																+      scrollTimer: null,
															
 
																+      scrollIndex: 0
															
 
																+    }
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    this.fetchData()
															
 
																+  },
															
 
																+  beforeDestroy() {
															
 
																+    if (this.scrollTimer) {
															
 
																+      clearInterval(this.scrollTimer)
															
 
																+      this.scrollTimer = null
															
 
																+    }
															
 
																+    if (this.chart) {
															
 
																+      this.chart.dispose()
															
 
																+      this.chart = null
															
 
																+    }
															
 
																+  },
															
 
																+  methods: {
															
 
																+    async fetchData() {
															
 
																+      const res = await getSafetyLevelStats()
															
 
																+      if (res.code === 200) {
															
 
																+        this.$nextTick(() => this.initChart(res.data))
															
 
																+      }
															
 
																+    },
															
 
																+    /** 初始化堆叠柱状图 - 展示各单位实验室安全分级统计 */
															
 
																+    initChart(data) {
															
 
																+      this.chart = echarts.init(this.$refs.chart, null, {
															
 
																+        renderer: 'canvas',
															
 
																+        devicePixelRatio: 2
															
 
																+      })
															
 
																+
															
 
																+      const { levels, colors, units, totals, series: seriesData } = data
															
 
																+
															
 
																+      // X-axis labels: "unitName\n(total)"
															
 
																+      const xLabels = units.map((u, i) => `${u}\n(${totals[i]})`)
															
 
																+
															
 
																+      const TOOLTIP_CFG = {
															
 
																+        backgroundColor: 'rgba(3,14,42,0.92)',
															
 
																+        borderColor: 'rgba(30,144,255,0.3)',
															
 
																+        textStyle: { color: '#a8cce8', fontSize: 28 }
															
 
																+      }
															
 
																+
															
 
																+      const option = {
															
 
																+        backgroundColor: 'transparent',
															
 
																+        tooltip: {
															
 
																+          trigger: 'axis',
															
 
																+          axisPointer: { type: 'shadow' },
															
 
																+          ...TOOLTIP_CFG
															
 
																+        },
															
 
																+        legend: {
															
 
																+          data: levels,
															
 
																+          top: 0,
															
 
																+          right: 0,
															
 
																+          textStyle: { color: '#a8cce8', fontSize: 25 },
															
 
																+          icon: 'rect',
															
 
																+          itemWidth: 25,
															
 
																+          itemHeight: 15
															
 
																+        },
															
 
																+        grid: {
															
 
																+          left: 30,
															
 
																+          right: 8,
															
 
																+          top: 55,
															
 
																+          bottom: 110,
															
 
																+          containLabel: true
															
 
																+        },
															
 
																+        xAxis: {
															
 
																+          type: 'category',
															
 
																+          data: xLabels,
															
 
																+          axisLabel: {
															
 
																+            color: '#5890b8',
															
 
																+            fontSize: 22,
															
 
																+            interval: 0,
															
 
																+            lineHeight: 35
															
 
																+          },
															
 
																+          axisLine: { lineStyle: { color: 'rgba(30,144,255,0.2)' } },
															
 
																+          axisTick: { show: false }
															
 
																+        },
															
 
																+        yAxis: {
															
 
																+          type: 'value',
															
 
																+          name: '间',
															
 
																+          nameTextStyle: { color: '#5890b8', fontSize: 25 },
															
 
																+          axisLabel: { color: '#5890b8', fontSize: 25 },
															
 
																+          axisLine: { show: false },
															
 
																+          splitLine: { lineStyle: { color: 'rgba(30,144,255,0.1)' } }
															
 
																+        },
															
 
																+        dataZoom: [{
															
 
																+          type: 'inside',
															
 
																+          startValue: 0,
															
 
																+          endValue: 5
															
 
																+        }],
															
 
																+        series: levels.map((name, i) => ({
															
 
																+          name: name,
															
 
																+          type: 'bar',
															
 
																+          stack: 'total',
															
 
																+          barMaxWidth: 55,
															
 
																+          data: seriesData[i].map(v => ({
															
 
																+            value: v,
															
 
																+            itemStyle: { color: colors[i], opacity: 0.88 }
															
 
																+          })),
															
 
																+          emphasis: { itemStyle: { opacity: 1 } }
															
 
																+        }))
															
 
																+      }
															
 
																+
															
 
																+      this.chart.setOption(option)
															
 
																+
															
 
																+      // Auto-scroll dataZoom every 5 seconds
															
 
																+      this.scrollIndex = 0
															
 
																+      this.scrollTimer = setInterval(() => {
															
 
																+        this.scrollIndex++
															
 
																+        if (this.scrollIndex >= units.length - 5) {
															
 
																+          this.scrollIndex = -1
															
 
																+        }
															
 
																+        if (this.chart) {
															
 
																+          this.chart.dispatchAction({
															
 
																+            type: 'dataZoom',
															
 
																+            startValue: this.scrollIndex,
															
 
																+            endValue: this.scrollIndex + 5
															
 
																+          })
															
 
																+        }
															
 
																+      }, 5000)
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+.safety-compliance {
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  height: 100%;
															
 
																+}
															
 
																+
															
 
																+.chart-wrap {
															
 
																+  flex: 1;
															
 
																+  min-height: 0;
															
 
																+  padding: 15px 20px;
															
 
																+
															
 
																+  .chart {
															
 
																+    width: 100%;
															
 
																+    height: 100%;
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
--- a/src/components/ScreenHeader.vue
+++ b/src/components/ScreenHeader.vue
@@ -0,0 +1,278 @@
 
																+<template>
															
 
																+  <div class="screen-header">
															
 
																+    <!-- Left: Clock -->
															
 
																+    <div class="nav-left">
															
 
																+      <div class="nav-clock">
															
 
																+        <div class="time">{{ currentTime }}</div>
															
 
																+        <div class="date">{{ currentDate }}</div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+
															
 
																+    <!-- Center: Logo + Org + Divider + Title -->
															
 
																+    <div class="nav-center">
															
 
																+      <div class="nav-logo">
															
 
																+        <div class="nav-logo-ring"></div>
															
 
																+      </div>
															
 
																+      <div class="nav-org">
															
 
																+        <strong>中国安全生产科学研究院</strong>
															
 
																+        <span>National Institute for Occupational Safety</span>
															
 
																+      </div>
															
 
																+      <div class="nav-divider"></div>
															
 
																+      <div class="nav-title-wrap">
															
 
																+        <div class="nav-title">实验室安全智能监测与管控中心</div>
															
 
																+        <div class="nav-title-deco"></div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+
															
 
																+    <!-- Right: Weather -->
															
 
																+    <div class="nav-right">
															
 
																+      <div class="nav-weather">
															
 
																+        <span class="icon">&#9925;</span>
															
 
																+        <div>
															
 
																+          <div class="weather-location">北京 &middot; 晴转多云</div>
															
 
																+          <div class="weather-detail">12&deg;C / AQI 68</div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+export default {
															
 
																+  name: 'ScreenHeader',
															
 
																+  data() {
															
 
																+    return {
															
 
																+      currentTime: '',
															
 
																+      currentDate: '',
															
 
																+      timer: null
															
 
																+    }
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    this.updateTime()
															
 
																+    this.timer = setInterval(this.updateTime, 1000)
															
 
																+  },
															
 
																+  beforeDestroy() {
															
 
																+    if (this.timer) {
															
 
																+      clearInterval(this.timer)
															
 
																+      this.timer = null
															
 
																+    }
															
 
																+  },
															
 
																+  methods: {
															
 
																+    updateTime() {
															
 
																+      const now = new Date()
															
 
																+      const h = String(now.getHours()).padStart(2, '0')
															
 
																+      const m = String(now.getMinutes()).padStart(2, '0')
															
 
																+      const s = String(now.getSeconds()).padStart(2, '0')
															
 
																+      this.currentTime = `${h}:${m}:${s}`
															
 
																+
															
 
																+      const y = now.getFullYear()
															
 
																+      const mon = now.getMonth() + 1
															
 
																+      const d = now.getDate()
															
 
																+      const weekDays = ['日', '一', '二', '三', '四', '五', '六']
															
 
																+      this.currentDate = `${y}年${mon}月${d}日 星期${weekDays[now.getDay()]}`
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+@import '../styles/variables.scss';
															
 
																+
															
 
																+/* ========== ringPulse: logo outer ring breathing animation ========== */
															
 
																+@keyframes ringPulse {
															
 
																+  0%, 100% {
															
 
																+    transform: scale(1);
															
 
																+    opacity: 0.5;
															
 
																+  }
															
 
																+  50% {
															
 
																+    transform: scale(1.1);
															
 
																+    opacity: 1;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+/* ========== titleShine: title gradient scroll animation ========== */
															
 
																+@keyframes titleShine {
															
 
																+  from {
															
 
																+    background-position: 0% center;
															
 
																+  }
															
 
																+  to {
															
 
																+    background-position: 200% center;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+/* ========== decoGlow: decorative line glow animation ========== */
															
 
																+@keyframes decoGlow {
															
 
																+  0%, 100% {
															
 
																+    opacity: 0.5;
															
 
																+  }
															
 
																+  50% {
															
 
																+    opacity: 1;
															
 
																+    filter: blur(1px);
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+/* ========== TOP NAV ========== */
															
 
																+.screen-header {
															
 
																+  position: relative;
															
 
																+  z-index: 10;
															
 
																+  flex-shrink: 0;
															
 
																+  width: 100%;
															
 
																+  height: 160px;
															
 
																+  display: flex;
															
 
																+  align-items: stretch;
															
 
																+  background: linear-gradient(180deg, rgba(4, 18, 52, 0.99) 0%, rgba(3, 12, 36, 0.97) 100%);
															
 
																+  border-bottom: 1px solid rgba(30, 144, 255, 0.3);
															
 
																+  box-shadow: 0 2px 30px rgba(0, 80, 220, 0.28), inset 0 1px 0 rgba(30, 144, 255, 0.15);
															
 
																+  font-family: $font-main;
															
 
																+}
															
 
																+
															
 
																+/* ========== LEFT: Clock ========== */
															
 
																+.nav-left {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  padding: 0 50px;
															
 
																+  width: 950px;
															
 
																+  gap: 30px;
															
 
																+}
															
 
																+
															
 
																+.nav-clock {
															
 
																+  .time {
															
 
																+    font-size: 55px;
															
 
																+    font-weight: 300;
															
 
																+    color: $gold;
															
 
																+    font-variant-numeric: tabular-nums;
															
 
																+    letter-spacing: 4px;
															
 
																+    line-height: 1;
															
 
																+  }
															
 
																+
															
 
																+  .date {
															
 
																+    font-size: 30px;
															
 
																+    color: $text-dim;
															
 
																+    margin-top: 5px;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+/* ========== CENTER: Logo + Org + Divider + Title ========== */
															
 
																+.nav-center {
															
 
																+  flex: 1;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+  gap: 30px;
															
 
																+  position: relative;
															
 
																+}
															
 
																+
															
 
																+.nav-logo {
															
 
																+  width: 100px;
															
 
																+  height: 100px;
															
 
																+  border-radius: 20px;
															
 
																+  flex-shrink: 0;
															
 
																+  background: linear-gradient(135deg, #0d2d6b, #1565c0);
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+  box-shadow: 0 0 40px rgba(30, 144, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.1);
															
 
																+  position: relative;
															
 
																+  overflow: visible;
															
 
																+
															
 
																+  &::after {
															
 
																+    content: '安';
															
 
																+    font-size: 45px;
															
 
																+    font-weight: 900;
															
 
																+    color: rgba(255, 255, 255, 0.95);
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.nav-logo-ring {
															
 
																+  position: absolute;
															
 
																+  inset: -10px;
															
 
																+  border-radius: 25px;
															
 
																+  border: 2px solid rgba(30, 144, 255, 0.5);
															
 
																+  animation: ringPulse 2s ease-in-out infinite;
															
 
																+}
															
 
																+
															
 
																+.nav-org {
															
 
																+  font-size: 30px;
															
 
																+  color: $text-dim;
															
 
																+  line-height: 1.4;
															
 
																+  margin-right: 50px;
															
 
																+
															
 
																+  strong {
															
 
																+    display: block;
															
 
																+    font-size: 32px;
															
 
																+    color: $cyan;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.nav-divider {
															
 
																+  width: 2px;
															
 
																+  height: 80px;
															
 
																+  background: linear-gradient(180deg, transparent, rgba(30, 144, 255, 0.6), transparent);
															
 
																+  flex-shrink: 0;
															
 
																+  margin-right: 50px;
															
 
																+}
															
 
																+
															
 
																+.nav-title-wrap {
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  align-items: center;
															
 
																+  position: relative;
															
 
																+}
															
 
																+
															
 
																+.nav-title {
															
 
																+  font-size: 65px;
															
 
																+  font-weight: 700;
															
 
																+  letter-spacing: 10px;
															
 
																+  background: linear-gradient(90deg, $blue, $cyan, $white, $cyan, $blue);
															
 
																+  background-size: 200% auto;
															
 
																+  -webkit-background-clip: text;
															
 
																+  -webkit-text-fill-color: transparent;
															
 
																+  background-clip: text;
															
 
																+  animation: titleShine 4s linear infinite;
															
 
																+  filter: drop-shadow(0 0 40px rgba(30, 144, 255, 0.5));
															
 
																+  white-space: nowrap;
															
 
																+}
															
 
																+
															
 
																+.nav-title-deco {
															
 
																+  position: absolute;
															
 
																+  bottom: -5px;
															
 
																+  left: 50%;
															
 
																+  transform: translateX(-50%);
															
 
																+  width: 900px;
															
 
																+  height: 2px;
															
 
																+  background: linear-gradient(90deg, transparent, $blue, $cyan, $blue, transparent);
															
 
																+  animation: decoGlow 3s ease-in-out infinite;
															
 
																+}
															
 
																+
															
 
																+/* ========== RIGHT: Weather ========== */
															
 
																+.nav-right {
															
 
																+  width: 950px;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: flex-end;
															
 
																+  padding: 0 50px;
															
 
																+  gap: 50px;
															
 
																+}
															
 
																+
															
 
																+.nav-weather {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 20px;
															
 
																+  font-size: 32px;
															
 
																+  color: $text-dim;
															
 
																+
															
 
																+  .icon {
															
 
																+    font-size: 45px;
															
 
																+  }
															
 
																+
															
 
																+  .weather-location {
															
 
																+    color: $text-dim;
															
 
																+  }
															
 
																+
															
 
																+  .weather-detail {
															
 
																+    font-size: 28px;
															
 
																+    color: $gold;
															
 
																+    margin-top: 4px;
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
--- a/src/components/SecurityMonitor.vue
+++ b/src/components/SecurityMonitor.vue
@@ -0,0 +1,593 @@
 
																+<template>
															
 
																+  <div class="security-monitor panel">
															
 
																+    <!-- Monitor Header -->
															
 
																+    <div class="monitor-header">
															
 
																+      <span class="monitor-title-cn">&#x1F4F9; &#x5B9E;&#x65F6;&#x76D1;&#x63A7;</span>
															
 
																+      <span class="monitor-title-en">CCTV Live Feed</span>
															
 
																+      <div class="monitor-status">
															
 
																+        <div class="status-dot green"></div>
															
 
																+        <span class="monitor-status-text">&#x4FE1;&#x53F7;&#x6B63;&#x5E38;</span>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+
															
 
																+    <!-- Monitor Inner: 2-column grid -->
															
 
																+    <div class="monitor-inner">
															
 
																+      <!-- Left Column: Search + Filter + Tree -->
															
 
																+      <div class="monitor-left">
															
 
																+        <div class="search-box">
															
 
																+          <span class="search-icon">&#x1F50D;</span>
															
 
																+          <input
															
 
																+            v-model="searchText"
															
 
																+            type="text"
															
 
																+            placeholder="&#x641C;&#x7D22;&#x697C;&#x680B; / &#x697C;&#x5C42; / &#x623F;&#x95F4;&#x2026;"
															
 
																+          />
															
 
																+        </div>
															
 
																+
															
 
																+        <select v-model="selectedUnit" class="filter-select">
															
 
																+          <option value="">&#x5168;&#x90E8;&#x4E8C;&#x7EA7;&#x5355;&#x4F4D;</option>
															
 
																+          <option>&#x5316;&#x5B66;&#x7814;&#x7A76;&#x6240;</option>
															
 
																+          <option>&#x7269;&#x7406;&#x7814;&#x7A76;&#x6240;</option>
															
 
																+          <option>&#x751F;&#x7269;&#x7814;&#x7A76;&#x6240;</option>
															
 
																+          <option>&#x6750;&#x6599;&#x7814;&#x7A76;&#x6240;</option>
															
 
																+          <option>&#x5DE5;&#x7A0B;&#x7814;&#x7A76;&#x6240;</option>
															
 
																+        </select>
															
 
																+
															
 
																+        <div class="tree-wrap">
															
 
																+          <tree-node
															
 
																+            v-if="treeData"
															
 
																+            :node="treeData"
															
 
																+            :depth="0"
															
 
																+            :selected-label="selectedTreeLabel"
															
 
																+            @select="onTreeNodeSelect"
															
 
																+          />
															
 
																+        </div>
															
 
																+      </div>
															
 
																+
															
 
																+      <!-- Right Column: Breadcrumb + Pager + Camera Grid -->
															
 
																+      <div class="monitor-right">
															
 
																+        <div class="camera-grid-header">
															
 
																+          <div class="camera-breadcrumb">
															
 
																+            <span>&#x5B89;&#x79D1;&#x9662;&#x4E3B;&#x56ED;&#x533A;</span> &#x203A;
															
 
																+            <span>&#x7EFC;&#x5408;&#x5B9E;&#x9A8C;&#x697C;A</span> &#x203A;
															
 
																+            <span>3&#x5C42;</span>
															
 
																+          </div>
															
 
																+          <div class="camera-pager">
															
 
																+            <button class="pager-btn" @click="prevPage">&lsaquo;</button>
															
 
																+            <span class="pager-info">{{ currentPage }} / {{ totalPages }} &#x9875;</span>
															
 
																+            <button class="pager-btn" @click="nextPage">&rsaquo;</button>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+
															
 
																+        <div class="camera-grid">
															
 
																+          <div
															
 
																+            v-for="(cam, idx) in cameras"
															
 
																+            :key="'cam-' + idx"
															
 
																+            class="camera-cell"
															
 
																+            :class="{ 'ai-cam': idx === 0 }"
															
 
																+          >
															
 
																+            <!-- AI badge (first cell only) -->
															
 
																+            <div v-if="idx === 0" class="camera-ai-badge">&#x1F916; AI&#x68C0;&#x6D4B;</div>
															
 
																+
															
 
																+            <!-- REC indicator -->
															
 
																+            <div class="camera-rec">REC</div>
															
 
																+
															
 
																+            <!-- Video placeholder -->
															
 
																+            <div class="camera-placeholder-text">CCTV</div>
															
 
																+
															
 
																+            <!-- AI detection box (first cell only) -->
															
 
																+            <div v-if="idx === 0" class="ai-detection-box" style="left:28%;top:18%;width:22%;height:38%">
															
 
																+              <div class="ai-detection-label">&#x5371;&#x9669;&#x884C;&#x4E3A;: &#x672A;&#x4F69;&#x6234;&#x9632;&#x62A4;</div>
															
 
																+            </div>
															
 
																+
															
 
																+            <!-- Camera label -->
															
 
																+            <div class="camera-label">{{ cam }}</div>
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import { getCameraList } from '@/api/screen'
															
 
																+
															
 
																+const TreeNode = {
															
 
																+  name: 'TreeNode',
															
 
																+  props: {
															
 
																+    node: { type: Object, required: true },
															
 
																+    depth: { type: Number, default: 0 },
															
 
																+    selectedLabel: { type: String, default: '' }
															
 
																+  },
															
 
																+  data() {
															
 
																+    return {
															
 
																+      expanded: this.depth === 0
															
 
																+    }
															
 
																+  },
															
 
																+  computed: {
															
 
																+    isLeaf() {
															
 
																+      return !this.node.children || this.node.children.length === 0
															
 
																+    },
															
 
																+    icon() {
															
 
																+      const icons = ['\u{1F3E2}', '\u{1F3D7}\uFE0F', '\u{1F4D0}', '\u{1F52C}']
															
 
																+      return icons[Math.min(this.depth, 3)]
															
 
																+    },
															
 
																+    isSelected() {
															
 
																+      return this.node.label === this.selectedLabel
															
 
																+    }
															
 
																+  },
															
 
																+  methods: {
															
 
																+    toggle() {
															
 
																+      if (!this.isLeaf) {
															
 
																+        this.expanded = !this.expanded
															
 
																+      }
															
 
																+      this.$emit('select', this.node.label)
															
 
																+    },
															
 
																+    onChildSelect(label) {
															
 
																+      this.$emit('select', label)
															
 
																+    }
															
 
																+  },
															
 
																+  template: `
															
 
																+    <div class="tree-node">
															
 
																+      <div
															
 
																+        class="tree-node-label"
															
 
																+        :class="{ selected: isSelected }"
															
 
																+        @click="toggle"
															
 
																+      >
															
 
																+        <span class="arrow" :class="{ open: expanded }">
															
 
																+          <template v-if="!isLeaf">&#x25B6;</template>
															
 
																+          <template v-else>&nbsp;&nbsp;</template>
															
 
																+        </span>
															
 
																+        <span>{{ icon }}</span>
															
 
																+        <span>{{ node.label }}</span>
															
 
																+      </div>
															
 
																+      <div v-if="!isLeaf" class="tree-children" :class="{ open: expanded }">
															
 
																+        <tree-node
															
 
																+          v-for="(child, i) in node.children"
															
 
																+          :key="i"
															
 
																+          :node="child"
															
 
																+          :depth="depth + 1"
															
 
																+          :selected-label="selectedLabel"
															
 
																+          @select="onChildSelect"
															
 
																+        />
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  `
															
 
																+}
															
 
																+
															
 
																+export default {
															
 
																+  name: 'SecurityMonitor',
															
 
																+  components: {
															
 
																+    TreeNode
															
 
																+  },
															
 
																+  data() {
															
 
																+    return {
															
 
																+      searchText: '',
															
 
																+      selectedUnit: '',
															
 
																+      selectedTreeLabel: '',
															
 
																+      currentPage: 1,
															
 
																+      totalPages: 3,
															
 
																+      cameras: [],
															
 
																+      treeData: {
															
 
																+        label: '\u5B89\u79D1\u9662\u4E3B\u56ED\u533A',
															
 
																+        children: [
															
 
																+          {
															
 
																+            label: '\u7EFC\u5408\u5B9E\u9A8C\u697CA',
															
 
																+            children: [
															
 
																+              { label: '1\u5C42', children: [{ label: 'A101 \u5316\u5B66\u5B9E\u9A8C\u5BA4' }, { label: 'A102 \u5206\u6790\u5BA4' }] },
															
 
																+              { label: '2\u5C42', children: [{ label: 'A201 \u751F\u7269\u5B9E\u9A8C\u5BA4' }] },
															
 
																+              { label: '3\u5C42', children: [{ label: 'A301 \u6709\u673A\u5408\u6210\u5BA4' }, { label: 'A302 \u6838\u78C1\u5171\u632F\u5BA4' }, { label: 'A303 \u8D28\u8C31\u5BA4' }] },
															
 
																+              { label: '4\u5C42', children: [{ label: 'A401 X\u5C04\u7EBF\u5BA4' }] }
															
 
																+            ]
															
 
																+          },
															
 
																+          {
															
 
																+            label: '\u7269\u7406\u5B9E\u9A8C\u697CB',
															
 
																+            children: [
															
 
																+              { label: '1\u5C42', children: [{ label: 'B101 \u5149\u5B66\u5B9E\u9A8C\u5BA4' }] },
															
 
																+              { label: '2\u5C42', children: [{ label: 'B201 \u4F4E\u6E29\u5B9E\u9A8C\u5BA4' }] }
															
 
																+            ]
															
 
																+          },
															
 
																+          {
															
 
																+            label: '\u5DE5\u7A0B\u6280\u672F\u697CC',
															
 
																+            children: [
															
 
																+              { label: '1\u5C42', children: [{ label: 'C101 \u673A\u68B0\u52A0\u5DE5\u5BA4' }] },
															
 
																+              { label: '2\u5C42', children: [{ label: 'C201 \u6750\u6599\u6D4B\u8BD5\u5BA4' }] }
															
 
																+            ]
															
 
																+          }
															
 
																+        ]
															
 
																+      }
															
 
																+    }
															
 
																+  },
															
 
																+  created() {
															
 
																+    this.fetchCameras()
															
 
																+  },
															
 
																+  methods: {
															
 
																+    async fetchCameras() {
															
 
																+      try {
															
 
																+        const res = await getCameraList()
															
 
																+        if (res.code === 200) {
															
 
																+          this.cameras = res.data
															
 
																+        }
															
 
																+      } catch (e) {
															
 
																+        // fallback to static data
															
 
																+        this.cameras = [
															
 
																+          'A301 \u6709\u673A\u5408\u6210\u5BA4',
															
 
																+          'A302 \u6838\u78C1\u5171\u632F\u5BA4',
															
 
																+          'A303 \u8D28\u8C31\u5BA4',
															
 
																+          'A301 \u8D70\u5ECA',
															
 
																+          'A302 \u8D70\u5ECA',
															
 
																+          'A303 \u8D70\u5ECA',
															
 
																+          'A\u5C42\u516C\u5171\u533A\u57DF',
															
 
																+          'A\u5C42\u5B89\u5168\u901A\u9053',
															
 
																+          'A\u5C42\u51FA\u5165\u53E3'
															
 
																+        ]
															
 
																+      }
															
 
																+    },
															
 
																+    onTreeNodeSelect(label) {
															
 
																+      this.selectedTreeLabel = label
															
 
																+    },
															
 
																+    prevPage() {
															
 
																+      if (this.currentPage > 1) {
															
 
																+        this.currentPage--
															
 
																+      }
															
 
																+    },
															
 
																+    nextPage() {
															
 
																+      if (this.currentPage < this.totalPages) {
															
 
																+        this.currentPage++
															
 
																+      }
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+.security-monitor {
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  height: 100%;
															
 
																+  min-height: 0;
															
 
																+}
															
 
																+
															
 
																+// ========== Monitor Header ==========
															
 
																+.monitor-header {
															
 
																+  padding: 20px 30px;
															
 
																+  border-bottom: 1px solid $border;
															
 
																+  flex-shrink: 0;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 25px;
															
 
																+  background: linear-gradient(90deg, rgba(0, 60, 160, 0.18), transparent);
															
 
																+}
															
 
																+
															
 
																+.monitor-title-cn {
															
 
																+  font-size: 32px;
															
 
																+  font-weight: 600;
															
 
																+  color: $cyan;
															
 
																+  letter-spacing: 2px;
															
 
																+}
															
 
																+
															
 
																+.monitor-title-en {
															
 
																+  font-size: 28px;
															
 
																+  color: $text-dim;
															
 
																+  margin-left: 10px;
															
 
																+}
															
 
																+
															
 
																+.monitor-status {
															
 
																+  margin-left: auto;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 15px;
															
 
																+}
															
 
																+
															
 
																+.monitor-status-text {
															
 
																+  font-size: 28px;
															
 
																+  color: $text-dim;
															
 
																+}
															
 
																+
															
 
																+// ========== Monitor Inner (2-column grid) ==========
															
 
																+.monitor-inner {
															
 
																+  flex: 1;
															
 
																+  display: grid;
															
 
																+  grid-template-columns: 575px 1fr;
															
 
																+  gap: 0;
															
 
																+  min-height: 0;
															
 
																+  overflow: hidden;
															
 
																+}
															
 
																+
															
 
																+// ========== Left Column ==========
															
 
																+.monitor-left {
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  gap: 15px;
															
 
																+  padding: 20px;
															
 
																+  border-right: 1px solid $border;
															
 
																+  min-height: 0;
															
 
																+  overflow: hidden;
															
 
																+}
															
 
																+
															
 
																+.search-box {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 18px;
															
 
																+  padding: 15px 25px;
															
 
																+  border-radius: 10px;
															
 
																+  background: $bg-card;
															
 
																+  border: 1px solid $border;
															
 
																+  flex-shrink: 0;
															
 
																+
															
 
																+  .search-icon {
															
 
																+    font-size: 32px;
															
 
																+    color: $text-dim;
															
 
																+  }
															
 
																+
															
 
																+  input {
															
 
																+    flex: 1;
															
 
																+    background: none;
															
 
																+    border: none;
															
 
																+    outline: none;
															
 
																+    color: $text;
															
 
																+    font-size: 30px;
															
 
																+    font-family: inherit;
															
 
																+
															
 
																+    &::placeholder {
															
 
																+      color: $text-dim;
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.filter-select {
															
 
																+  padding: 12px 25px;
															
 
																+  border-radius: 10px;
															
 
																+  width: 100%;
															
 
																+  flex-shrink: 0;
															
 
																+  background: $bg-card;
															
 
																+  border: 1px solid $border;
															
 
																+  color: $text;
															
 
																+  font-size: 28px;
															
 
																+  font-family: inherit;
															
 
																+  outline: none;
															
 
																+  cursor: pointer;
															
 
																+  appearance: none;
															
 
																+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='rgba(30,144,255,0.6)'/%3E%3C/svg%3E");
															
 
																+  background-repeat: no-repeat;
															
 
																+  background-position: right 25px center;
															
 
																+}
															
 
																+
															
 
																+// ========== Tree ==========
															
 
																+.tree-wrap {
															
 
																+  flex: 1;
															
 
																+  overflow-y: auto;
															
 
																+  overflow-x: hidden;
															
 
																+  min-height: 0;
															
 
																+
															
 
																+  &::-webkit-scrollbar {
															
 
																+    width: 8px;
															
 
																+  }
															
 
																+
															
 
																+  &::-webkit-scrollbar-thumb {
															
 
																+    background: $border;
															
 
																+    border-radius: 5px;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+::v-deep .tree-node-label {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 15px;
															
 
																+  padding: 12px 20px;
															
 
																+  border-radius: 8px;
															
 
																+  font-size: 28px;
															
 
																+  color: $text;
															
 
																+  transition: all 0.2s;
															
 
																+  user-select: none;
															
 
																+  cursor: pointer;
															
 
																+
															
 
																+  &:hover {
															
 
																+    background: $blue-dim;
															
 
																+    color: $blue;
															
 
																+  }
															
 
																+
															
 
																+  &.selected {
															
 
																+    background: rgba(30, 144, 255, 0.15);
															
 
																+    color: $cyan;
															
 
																+    border-left: 5px solid $blue;
															
 
																+  }
															
 
																+
															
 
																+  .arrow {
															
 
																+    transition: transform 0.2s;
															
 
																+    font-size: 25px;
															
 
																+    color: $text-dim;
															
 
																+    flex-shrink: 0;
															
 
																+
															
 
																+    &.open {
															
 
																+      transform: rotate(90deg);
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+::v-deep .tree-children {
															
 
																+  padding-left: 35px;
															
 
																+  display: none;
															
 
																+
															
 
																+  &.open {
															
 
																+    display: block;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+// ========== Right Column ==========
															
 
																+.monitor-right {
															
 
																+  padding: 20px;
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  gap: 15px;
															
 
																+  min-height: 0;
															
 
																+}
															
 
																+
															
 
																+.camera-grid-header {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: space-between;
															
 
																+  flex-shrink: 0;
															
 
																+}
															
 
																+
															
 
																+.camera-breadcrumb {
															
 
																+  font-size: 30px;
															
 
																+  color: $text-dim;
															
 
																+
															
 
																+  span {
															
 
																+    color: $cyan;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.camera-pager {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 15px;
															
 
																+}
															
 
																+
															
 
																+.pager-btn {
															
 
																+  width: 60px;
															
 
																+  height: 60px;
															
 
																+  border-radius: 8px;
															
 
																+  cursor: pointer;
															
 
																+  background: $bg-card;
															
 
																+  border: 1px solid $border;
															
 
																+  color: $text-dim;
															
 
																+  font-size: 32px;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+  transition: all 0.2s;
															
 
																+
															
 
																+  &:hover {
															
 
																+    border-color: $blue;
															
 
																+    color: $blue;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.pager-info {
															
 
																+  font-size: 28px;
															
 
																+  color: $text-dim;
															
 
																+}
															
 
																+
															
 
																+// ========== Camera Grid (3x3) ==========
															
 
																+.camera-grid {
															
 
																+  display: grid;
															
 
																+  grid-template-columns: repeat(3, 1fr);
															
 
																+  grid-template-rows: repeat(3, 1fr);
															
 
																+  gap: 12px;
															
 
																+  flex: 1;
															
 
																+  min-height: 0;
															
 
																+}
															
 
																+
															
 
																+.camera-cell {
															
 
																+  position: relative;
															
 
																+  border-radius: 10px;
															
 
																+  overflow: hidden;
															
 
																+  background: #020810;
															
 
																+  border: 1px solid $border;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+
															
 
																+  &:hover {
															
 
																+    border-color: $blue;
															
 
																+  }
															
 
																+
															
 
																+  &.ai-cam {
															
 
																+    border-color: rgba(0, 230, 118, 0.4);
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.camera-placeholder-text {
															
 
																+  font-size: 48px;
															
 
																+  color: rgba(110, 165, 210, 0.15);
															
 
																+  letter-spacing: 8px;
															
 
																+  font-weight: 700;
															
 
																+  user-select: none;
															
 
																+}
															
 
																+
															
 
																+.camera-label {
															
 
																+  position: absolute;
															
 
																+  bottom: 10px;
															
 
																+  left: 15px;
															
 
																+  font-size: 25px;
															
 
																+  color: rgba(255, 255, 255, 0.75);
															
 
																+  background: rgba(0, 0, 0, 0.5);
															
 
																+  padding: 3px 10px;
															
 
																+  border-radius: 5px;
															
 
																+}
															
 
																+
															
 
																+.camera-rec {
															
 
																+  position: absolute;
															
 
																+  top: 10px;
															
 
																+  right: 15px;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 8px;
															
 
																+  font-size: 25px;
															
 
																+  color: $red;
															
 
																+  background: rgba(0, 0, 0, 0.5);
															
 
																+  padding: 3px 10px;
															
 
																+  border-radius: 5px;
															
 
																+
															
 
																+  &::before {
															
 
																+    content: '';
															
 
																+    width: 12px;
															
 
																+    height: 12px;
															
 
																+    border-radius: 50%;
															
 
																+    background: $red;
															
 
																+    animation: blinkRed 1s ease-in-out infinite;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.camera-ai-badge {
															
 
																+  position: absolute;
															
 
																+  top: 10px;
															
 
																+  left: 15px;
															
 
																+  font-size: 25px;
															
 
																+  color: $green;
															
 
																+  background: rgba(0, 30, 15, 0.75);
															
 
																+  padding: 3px 10px;
															
 
																+  border-radius: 5px;
															
 
																+  border: 1px solid rgba(0, 230, 118, 0.3);
															
 
																+  z-index: 2;
															
 
																+}
															
 
																+
															
 
																+.ai-detection-box {
															
 
																+  position: absolute;
															
 
																+  border: 5px solid $red;
															
 
																+  background: rgba(255, 59, 59, 0.1);
															
 
																+  border-radius: 5px;
															
 
																+  animation: detBox 1.5s ease-in-out infinite;
															
 
																+}
															
 
																+
															
 
																+.ai-detection-label {
															
 
																+  position: absolute;
															
 
																+  bottom: 100%;
															
 
																+  left: 0;
															
 
																+  white-space: nowrap;
															
 
																+  font-size: 25px;
															
 
																+  background: $red;
															
 
																+  color: #fff;
															
 
																+  padding: 3px 10px;
															
 
																+  border-radius: 5px;
															
 
																+  margin-bottom: 5px;
															
 
																+}
															
 
																+
															
 
																+// ========== Keyframes ==========
															
 
																+@keyframes blinkRed {
															
 
																+  0%, 100% { opacity: 1; }
															
 
																+  50% { opacity: 0.35; }
															
 
																+}
															
 
																+
															
 
																+@keyframes detBox {
															
 
																+  0%, 100% {
															
 
																+    border-color: #ff3b3b;
															
 
																+    box-shadow: 0 0 20px rgba(255, 59, 59, 0.4);
															
 
																+  }
															
 
																+  50% {
															
 
																+    border-color: #fca5a5;
															
 
																+    box-shadow: 0 0 45px rgba(255, 59, 59, 0.7);
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,21 @@
 
																+import Vue from 'vue'
															
 
																+import App from './App.vue'
															
 
																+import router from './router'
															
 
																+import store from './store'
															
 
																+
															
 
																+// 完整引入 Element UI
															
 
																+import ElementUI from 'element-ui'
															
 
																+import 'element-ui/lib/theme-chalk/index.css'
															
 
																+
															
 
																+// 全局样式
															
 
																+import '@/styles/global.scss'
															
 
																+
															
 
																+Vue.use(ElementUI)
															
 
																+
															
 
																+Vue.config.productionTip = false
															
 
																+
															
 
																+new Vue({
															
 
																+  router,
															
 
																+  store,
															
 
																+  render: h => h(App)
															
 
																+}).$mount('#app')
															
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,40 @@
 
																+import Vue from 'vue'
															
 
																+import VueRouter from 'vue-router'
															
 
																+
															
 
																+Vue.use(VueRouter)
															
 
																+
															
 
																+const routes = [
															
 
																+  {
															
 
																+    path: '/',
															
 
																+    redirect: '/login'
															
 
																+  },
															
 
																+  {
															
 
																+    path: '/login',
															
 
																+    name: 'Login',
															
 
																+    component: () => import('@/views/Login.vue')
															
 
																+  },
															
 
																+  {
															
 
																+    path: '/screen',
															
 
																+    name: 'Screen',
															
 
																+    component: () => import('@/views/Screen.vue'),
															
 
																+    meta: { requiresAuth: true }
															
 
																+  }
															
 
																+]
															
 
																+
															
 
																+const router = new VueRouter({
															
 
																+  mode: 'history',
															
 
																+  base: process.env.BASE_URL,
															
 
																+  routes
															
 
																+})
															
 
																+
															
 
																+// 路由守卫：未登录跳转到登录页
															
 
																+router.beforeEach((to, from, next) => {
															
 
																+  const token = localStorage.getItem('token')
															
 
																+  if (to.meta.requiresAuth && !token) {
															
 
																+    next('/login')
															
 
																+  } else {
															
 
																+    next()
															
 
																+  }
															
 
																+})
															
 
																+
															
 
																+export default router
															
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,31 @@
 
																+import Vue from 'vue'
															
 
																+import Vuex from 'vuex'
															
 
																+
															
 
																+Vue.use(Vuex)
															
 
																+
															
 
																+export default new Vuex.Store({
															
 
																+  state: {
															
 
																+    token: localStorage.getItem('token') || ''
															
 
																+  },
															
 
																+  mutations: {
															
 
																+    SET_TOKEN(state, token) {
															
 
																+      state.token = token
															
 
																+      localStorage.setItem('token', token)
															
 
																+    },
															
 
																+    CLEAR_TOKEN(state) {
															
 
																+      state.token = ''
															
 
																+      localStorage.removeItem('token')
															
 
																+    }
															
 
																+  },
															
 
																+  actions: {
															
 
																+    login({ commit }, token) {
															
 
																+      commit('SET_TOKEN', token)
															
 
																+    },
															
 
																+    logout({ commit }) {
															
 
																+      commit('CLEAR_TOKEN')
															
 
																+    }
															
 
																+  },
															
 
																+  getters: {
															
 
																+    isAuthenticated: state => !!state.token
															
 
																+  }
															
 
																+})
															
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -0,0 +1,161 @@
 
																+// 全局样式 - 匹配 index-v2.html
															
 
																+
															
 
																+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
															
 
																+
															
 
																+html, body {
															
 
																+  width: 100%;
															
 
																+  height: 100%;
															
 
																+  overflow: auto;
															
 
																+  background: $bg-deep;
															
 
																+  font-family: $font-main;
															
 
																+  color: $text;
															
 
																+}
															
 
																+
															
 
																+// 滚动条
															
 
																+::-webkit-scrollbar { width: 8px; height: 8px; }
															
 
																+::-webkit-scrollbar-track { background: transparent; }
															
 
																+::-webkit-scrollbar-thumb { background: $border; border-radius: 5px; }
															
 
																+
															
 
																+// ========== 面板系统 ==========
															
 
																+.panel {
															
 
																+  position: relative;
															
 
																+  border-radius: 15px;
															
 
																+  overflow: hidden;
															
 
																+  background: $bg-panel;
															
 
																+  border: 1px solid $border;
															
 
																+
															
 
																+  &::before {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    inset: 0;
															
 
																+    pointer-events: none;
															
 
																+    border-radius: inherit;
															
 
																+    background: linear-gradient(135deg, rgba(30, 144, 255, 0.05) 0%, transparent 50%, rgba(0, 216, 255, 0.03) 100%);
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+// 角标装饰
															
 
																+.pc {
															
 
																+  position: absolute;
															
 
																+  width: 35px;
															
 
																+  height: 35px;
															
 
																+  z-index: 3;
															
 
																+  pointer-events: none;
															
 
																+
															
 
																+  &.tl { top: 0; left: 0; }
															
 
																+  &.tr { top: 0; right: 0; transform: scaleX(-1); }
															
 
																+  &.bl { bottom: 0; left: 0; transform: scaleY(-1); }
															
 
																+  &.br { bottom: 0; right: 0; transform: scale(-1); }
															
 
																+
															
 
																+  svg { width: 100%; height: 100%; }
															
 
																+}
															
 
																+
															
 
																+// 光束边框动画
															
 
																+.border-beam {
															
 
																+  position: absolute;
															
 
																+  inset: 0;
															
 
																+  pointer-events: none;
															
 
																+  border-radius: inherit;
															
 
																+  overflow: hidden;
															
 
																+  z-index: 2;
															
 
																+
															
 
																+  &::before {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    top: 0;
															
 
																+    left: -100%;
															
 
																+    width: 40%;
															
 
																+    height: 3px;
															
 
																+    background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.9), rgba(0, 216, 255, 0.7), transparent);
															
 
																+    animation: beamTop 5s linear infinite;
															
 
																+  }
															
 
																+
															
 
																+  &::after {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    bottom: 0;
															
 
																+    right: -100%;
															
 
																+    width: 40%;
															
 
																+    height: 3px;
															
 
																+    background: linear-gradient(90deg, transparent, rgba(0, 216, 255, 0.7), rgba(30, 144, 255, 0.9), transparent);
															
 
																+    animation: beamBottom 5s linear infinite 2.5s;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@keyframes beamTop { from { left: -40%; } to { left: 100%; } }
															
 
																+@keyframes beamBottom { from { right: -40%; } to { right: 100%; } }
															
 
																+
															
 
																+// 面板头部
															
 
																+.panel-header {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  gap: 25px;
															
 
																+  padding: 20px 30px 18px;
															
 
																+  border-bottom: 1px solid $border;
															
 
																+  background: linear-gradient(90deg, rgba(0, 60, 160, 0.18), transparent);
															
 
																+  flex-shrink: 0;
															
 
																+}
															
 
																+
															
 
																+.panel-header-icon {
															
 
																+  width: 65px;
															
 
																+  height: 65px;
															
 
																+  border-radius: 12px;
															
 
																+  flex-shrink: 0;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+  font-size: 32px;
															
 
																+  background: linear-gradient(135deg, rgba(30, 144, 255, 0.25), rgba(0, 216, 255, 0.15));
															
 
																+  border: 1px solid rgba(30, 144, 255, 0.35);
															
 
																+  animation: iconGlow 3s ease-in-out infinite;
															
 
																+}
															
 
																+
															
 
																+@keyframes iconGlow {
															
 
																+  0%, 100% { box-shadow: 0 0 15px rgba(30, 144, 255, 0.3); }
															
 
																+  50% { box-shadow: 0 0 35px rgba(30, 144, 255, 0.7), 0 0 12px rgba(0, 216, 255, 0.3); }
															
 
																+}
															
 
																+
															
 
																+.panel-title {
															
 
																+  font-size: 30px;
															
 
																+  font-weight: 600;
															
 
																+  letter-spacing: 2px;
															
 
																+  color: $cyan;
															
 
																+}
															
 
																+
															
 
																+// 扫描线效果
															
 
																+.scan-effect {
															
 
																+  position: absolute;
															
 
																+  inset: 0;
															
 
																+  pointer-events: none;
															
 
																+  overflow: hidden;
															
 
																+  z-index: 0;
															
 
																+
															
 
																+  &::after {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    left: 0;
															
 
																+    right: 0;
															
 
																+    height: 200px;
															
 
																+    top: -200px;
															
 
																+    background: linear-gradient(180deg, transparent, rgba(30, 144, 255, 0.025), transparent);
															
 
																+    animation: scanFull 9s linear infinite;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@keyframes scanFull { from { top: -200px; } to { top: 100%; } }
															
 
																+
															
 
																+// 状态圆点
															
 
																+.status-dot {
															
 
																+  width: 20px;
															
 
																+  height: 20px;
															
 
																+  border-radius: 50%;
															
 
																+  display: inline-block;
															
 
																+  animation: dotPulse 2s ease-in-out infinite;
															
 
																+
															
 
																+  &.green { background: $green; box-shadow: 0 0 15px $green; }
															
 
																+  &.red { background: $red; box-shadow: 0 0 15px $red; animation: blinkRed 0.8s ease-in-out infinite; }
															
 
																+  &.orange { background: #f59e0b; box-shadow: 0 0 15px #f59e0b; }
															
 
																+}
															
 
																+
															
 
																+@keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } }
															
 
																+@keyframes blinkRed { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
															
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -0,0 +1,37 @@
 
																+// Sass 全局变量 - 匹配 index-v2.html 深蓝科幻主题
															
 
																+
															
 
																+// 主背景色
															
 
																+$bg-deep: #030e1f;
															
 
																+$bg-panel: rgba(5, 16, 42, 0.95);
															
 
																+$bg-card: rgba(7, 22, 54, 0.85);
															
 
																+
															
 
																+// 主色
															
 
																+$blue: #1e90ff;
															
 
																+$blue-dim: rgba(30, 144, 255, 0.14);
															
 
																+$blue-glow: rgba(30, 144, 255, 0.5);
															
 
																+$cyan: #00d8ff;
															
 
																+$cyan-dim: rgba(0, 216, 255, 0.12);
															
 
																+$teal: #00e5c8;
															
 
																+$indigo: #4361ee;
															
 
																+$red: #ff3b3b;
															
 
																+$green: #00e676;
															
 
																+$gold: #ffd740;
															
 
																+
															
 
																+// 文字
															
 
																+$white: #ddf0ff;
															
 
																+$text: #a8cce8;
															
 
																+$text-dim: rgba(110, 165, 210, 0.55);
															
 
																+
															
 
																+// 边框
															
 
																+$border: rgba(30, 144, 255, 0.22);
															
 
																+$border-h: rgba(30, 144, 255, 0.65);
															
 
																+
															
 
																+// 阴影
															
 
																+$shadow: 0 4px 24px rgba(0, 80, 220, 0.22);
															
 
																+
															
 
																+// 字体
															
 
																+$font-main: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
															
 
																+
															
 
																+// 尺寸
															
 
																+$screen-width: 9600px;
															
 
																+$screen-height: 2800px;
															
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -0,0 +1,33 @@
 
																+import axios from 'axios'
															
 
																+
															
 
																+// 创建 axios 实例
															
 
																+const service = axios.create({
															
 
																+  baseURL: process.env.VUE_APP_BASE_API || '/api',
															
 
																+  timeout: 10000
															
 
																+})
															
 
																+
															
 
																+// 请求拦截器
															
 
																+service.interceptors.request.use(
															
 
																+  config => {
															
 
																+    const token = localStorage.getItem('token')
															
 
																+    if (token) {
															
 
																+      config.headers['Authorization'] = `Bearer ${token}`
															
 
																+    }
															
 
																+    return config
															
 
																+  },
															
 
																+  error => {
															
 
																+    return Promise.reject(error)
															
 
																+  }
															
 
																+)
															
 
																+
															
 
																+// 响应拦截器
															
 
																+service.interceptors.response.use(
															
 
																+  response => {
															
 
																+    return response.data
															
 
																+  },
															
 
																+  error => {
															
 
																+    return Promise.reject(error)
															
 
																+  }
															
 
																+)
															
 
																+
															
 
																+export default service
															
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -0,0 +1,238 @@
 
																+<template>
															
 
																+  <div class="login-container">
															
 
																+    <div class="login-card">
															
 
																+      <div class="login-header">
															
 
																+        <h1>实验室安全智能监测与管控中心</h1>
															
 
																+        <p>中国安全生产科学研究院</p>
															
 
																+      </div>
															
 
																+      <el-form
															
 
																+        ref="loginForm"
															
 
																+        :model="loginForm"
															
 
																+        :rules="loginRules"
															
 
																+        class="login-form"
															
 
																+      >
															
 
																+        <el-form-item prop="username">
															
 
																+          <el-input
															
 
																+            v-model="loginForm.username"
															
 
																+            placeholder="请输入用户名/手机号"
															
 
																+            prefix-icon="el-icon-user"
															
 
																+          />
															
 
																+        </el-form-item>
															
 
																+        <el-form-item prop="password">
															
 
																+          <el-input
															
 
																+            v-model="loginForm.password"
															
 
																+            type="password"
															
 
																+            placeholder="请输入密码"
															
 
																+            prefix-icon="el-icon-lock"
															
 
																+            show-password
															
 
																+            @keyup.enter.native="handleLogin"
															
 
																+          />
															
 
																+        </el-form-item>
															
 
																+        <el-form-item prop="captcha">
															
 
																+          <div class="captcha-row">
															
 
																+            <el-input
															
 
																+              v-model="loginForm.captcha"
															
 
																+              placeholder="请输入验证码"
															
 
																+              prefix-icon="el-icon-key"
															
 
																+            />
															
 
																+            <div class="captcha-img" @click="refreshCaptcha">
															
 
																+              {{ captchaText }}
															
 
																+            </div>
															
 
																+          </div>
															
 
																+        </el-form-item>
															
 
																+        <el-form-item>
															
 
																+          <el-button
															
 
																+            type="primary"
															
 
																+            :loading="loading"
															
 
																+            class="login-btn"
															
 
																+            @click="handleLogin"
															
 
																+          >
															
 
																+            登 录
															
 
																+          </el-button>
															
 
																+        </el-form-item>
															
 
																+      </el-form>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import md5 from 'js-md5'
															
 
																+import { loginApi } from '@/api/auth'
															
 
																+
															
 
																+export default {
															
 
																+  name: 'Login',
															
 
																+  data() {
															
 
																+    return {
															
 
																+      loginForm: {
															
 
																+        username: '',
															
 
																+        password: '',
															
 
																+        captcha: ''
															
 
																+      },
															
 
																+      loginRules: {
															
 
																+        username: [
															
 
																+          { required: true, message: '请输入用户名', trigger: 'blur' }
															
 
																+        ],
															
 
																+        password: [
															
 
																+          { required: true, message: '请输入密码', trigger: 'blur' }
															
 
																+        ],
															
 
																+        captcha: [
															
 
																+          { required: true, message: '请输入验证码', trigger: 'blur' }
															
 
																+        ]
															
 
																+      },
															
 
																+      loading: false,
															
 
																+      captchaText: '0000'
															
 
																+    }
															
 
																+  },
															
 
																+  methods: {
															
 
																+    refreshCaptcha() {
															
 
																+      // 模拟验证码刷新，固定为 0000
															
 
																+      this.captchaText = '0000'
															
 
																+    },
															
 
																+    handleLogin() {
															
 
																+      this.$refs.loginForm.validate(async (valid) => {
															
 
																+        if (!valid) return
															
 
																+
															
 
																+        // 验证码校验
															
 
																+        if (this.loginForm.captcha !== '0000') {
															
 
																+          this.$message.error('验证码错误')
															
 
																+          return
															
 
																+        }
															
 
																+
															
 
																+        this.loading = true
															
 
																+        try {
															
 
																+          // 密码使用 md5 加密后提交
															
 
																+          const encryptedPassword = md5(this.loginForm.password)
															
 
																+          const res = await loginApi({
															
 
																+            username: this.loginForm.username,
															
 
																+            password: encryptedPassword
															
 
																+          })
															
 
																+
															
 
																+          if (res.code === 200) {
															
 
																+            // 保存 token 到 Vuex
															
 
																+            this.$store.dispatch('login', res.data.token)
															
 
																+            this.$message.success('登录成功')
															
 
																+            this.$router.push('/screen')
															
 
																+          } else {
															
 
																+            this.$message.error(res.message)
															
 
																+          }
															
 
																+        } catch (err) {
															
 
																+          this.$message.error('登录失败，请重试')
															
 
																+        } finally {
															
 
																+          this.loading = false
															
 
																+        }
															
 
																+      })
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+.login-container {
															
 
																+  width: 100%;
															
 
																+  height: 100%;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: center;
															
 
																+  background: linear-gradient(135deg, #0a1a3a 0%, #0d2b5e 50%, #0a1a3a 100%);
															
 
																+  position: relative;
															
 
																+
															
 
																+  &::before {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    top: 0;
															
 
																+    left: 0;
															
 
																+    right: 0;
															
 
																+    bottom: 0;
															
 
																+    background:
															
 
																+      radial-gradient(ellipse at 20% 50%, rgba(0, 100, 200, 0.15) 0%, transparent 50%),
															
 
																+      radial-gradient(ellipse at 80% 50%, rgba(0, 150, 255, 0.1) 0%, transparent 50%);
															
 
																+    pointer-events: none;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.login-card {
															
 
																+  width: 480px;
															
 
																+  padding: 48px 40px;
															
 
																+  background: rgba(8, 30, 65, 0.9);
															
 
																+  border: 1px solid rgba(46, 120, 210, 0.4);
															
 
																+  border-radius: 12px;
															
 
																+  backdrop-filter: blur(10px);
															
 
																+  z-index: 1;
															
 
																+}
															
 
																+
															
 
																+.login-header {
															
 
																+  text-align: center;
															
 
																+  margin-bottom: 40px;
															
 
																+
															
 
																+  h1 {
															
 
																+    font-size: 24px;
															
 
																+    color: $cyan;
															
 
																+    margin-bottom: 8px;
															
 
																+    letter-spacing: 2px;
															
 
																+  }
															
 
																+
															
 
																+  p {
															
 
																+    font-size: 14px;
															
 
																+    color: $text-dim;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.login-form {
															
 
																+  ::v-deep .el-input__inner {
															
 
																+    background: rgba(6, 40, 90, 0.6);
															
 
																+    border: 1px solid rgba(46, 120, 210, 0.3);
															
 
																+    color: #fff;
															
 
																+    height: 44px;
															
 
																+
															
 
																+    &::placeholder {
															
 
																+      color: rgba(140, 180, 230, 0.5);
															
 
																+    }
															
 
																+
															
 
																+    &:focus {
															
 
																+      border-color: $cyan;
															
 
																+    }
															
 
																+  }
															
 
																+
															
 
																+  ::v-deep .el-input__prefix {
															
 
																+    color: $cyan;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.captcha-row {
															
 
																+  display: flex;
															
 
																+  gap: 12px;
															
 
																+
															
 
																+  .el-input {
															
 
																+    flex: 1;
															
 
																+  }
															
 
																+
															
 
																+  .captcha-img {
															
 
																+    width: 120px;
															
 
																+    height: 44px;
															
 
																+    background: rgba(6, 40, 90, 0.8);
															
 
																+    border: 1px solid rgba(46, 120, 210, 0.3);
															
 
																+    border-radius: 4px;
															
 
																+    display: flex;
															
 
																+    align-items: center;
															
 
																+    justify-content: center;
															
 
																+    font-size: 20px;
															
 
																+    color: $cyan;
															
 
																+    letter-spacing: 8px;
															
 
																+    cursor: pointer;
															
 
																+    user-select: none;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+.login-btn {
															
 
																+  width: 100%;
															
 
																+  height: 44px;
															
 
																+  font-size: 16px;
															
 
																+  background: linear-gradient(90deg, #1890ff, #00e5ff);
															
 
																+  border: none;
															
 
																+  letter-spacing: 8px;
															
 
																+
															
 
																+  &:hover {
															
 
																+    opacity: 0.9;
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
--- a/src/views/Screen.vue
+++ b/src/views/Screen.vue
@@ -0,0 +1,130 @@
 
																+<template>
															
 
																+  <div class="screen-container">
															
 
																+    <div class="bg-hex"></div>
															
 
																+    <div class="scan-effect"></div>
															
 
																+    <ScreenHeader />
															
 
																+    <div class="screen-content">
															
 
																+      <!-- 1区：3个面板 -->
															
 
																+      <div class="panel-col">
															
 
																+        <EventStats />
															
 
																+        <SafetyCompliance />
															
 
																+        <PersonnelTrend />
															
 
																+      </div>
															
 
																+      <!-- 2区：2个面板 -->
															
 
																+      <div class="panel-col">
															
 
																+        <EnvMonitorStats />
															
 
																+        <EquipmentStats />
															
 
																+      </div>
															
 
																+      <!-- 3区：实时监控 -->
															
 
																+      <div class="center-col">
															
 
																+        <SecurityMonitor />
															
 
																+      </div>
															
 
																+      <!-- 4区：环境感知 + 预警 -->
															
 
																+      <div class="panel-col col-right">
															
 
																+        <LabEnvironment />
															
 
																+        <AlarmInfo />
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import ScreenHeader from '@/components/ScreenHeader.vue'
															
 
																+import EventStats from '@/components/EventStats.vue'
															
 
																+import SafetyCompliance from '@/components/SafetyCompliance.vue'
															
 
																+import PersonnelTrend from '@/components/PersonnelTrend.vue'
															
 
																+import EnvMonitorStats from '@/components/EnvMonitorStats.vue'
															
 
																+import EquipmentStats from '@/components/EquipmentStats.vue'
															
 
																+import SecurityMonitor from '@/components/SecurityMonitor.vue'
															
 
																+import LabEnvironment from '@/components/LabEnvironment.vue'
															
 
																+import AlarmInfo from '@/components/AlarmInfo.vue'
															
 
																+
															
 
																+export default {
															
 
																+  name: 'Screen',
															
 
																+  components: {
															
 
																+    ScreenHeader,
															
 
																+    EventStats,
															
 
																+    SafetyCompliance,
															
 
																+    PersonnelTrend,
															
 
																+    EnvMonitorStats,
															
 
																+    EquipmentStats,
															
 
																+    SecurityMonitor,
															
 
																+    LabEnvironment,
															
 
																+    AlarmInfo
															
 
																+  }
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="scss" scoped>
															
 
																+.screen-container {
															
 
																+  width: 9600px;
															
 
																+  height: 2800px;
															
 
																+  position: relative;
															
 
																+  overflow: hidden;
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  background: $bg-deep;
															
 
																+}
															
 
																+
															
 
																+/* 六角形背景纹理 */
															
 
																+.bg-hex {
															
 
																+  position: absolute;
															
 
																+  inset: 0;
															
 
																+  pointer-events: none;
															
 
																+  z-index: 0;
															
 
																+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpolygon points='30,2 58,17 58,47 30,52 2,47 2,17' fill='none' stroke='rgba(30,144,255,0.05)' stroke-width='1'/%3E%3C/svg%3E");
															
 
																+  background-size: 150px 130px;
															
 
																+
															
 
																+  &::after {
															
 
																+    content: '';
															
 
																+    position: absolute;
															
 
																+    inset: 0;
															
 
																+    background: radial-gradient(ellipse at 50% 50%, transparent 25%, #030e1f 85%);
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+/* 主内容区域：4列精确像素布局 */
															
 
																+.screen-content {
															
 
																+  flex: 1;
															
 
																+  min-height: 0;
															
 
																+  display: grid;
															
 
																+  grid-template-columns: 1892px 1414px 4282px 1892px;
															
 
																+  column-gap: 20px;
															
 
																+  padding: 20px 30px;
															
 
																+  position: relative;
															
 
																+  z-index: 2;
															
 
																+}
															
 
																+
															
 
																+.panel-col {
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  gap: 18px;
															
 
																+  min-height: 0;
															
 
																+}
															
 
																+
															
 
																+.center-col {
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  min-height: 0;
															
 
																+  position: relative;
															
 
																+}
															
 
																+
															
 
																+/* 第1列：基本情况(956) + 安全分级(1017) + 人数走势(591) */
															
 
																+.panel-col:nth-child(1) {
															
 
																+  > :nth-child(1) { flex: 956; min-height: 0; }
															
 
																+  > :nth-child(2) { flex: 1017; min-height: 0; }
															
 
																+  > :nth-child(3) { flex: 591; min-height: 0; }
															
 
																+}
															
 
																+
															
 
																+/* 第2列：设备统计(666) + 设备分类(1916) */
															
 
																+.panel-col:nth-child(2) {
															
 
																+  > :nth-child(1) { flex: 666; min-height: 0; }
															
 
																+  > :nth-child(2) { flex: 1916; min-height: 0; }
															
 
																+}
															
 
																+
															
 
																+/* 第4列：环境感知(1807) + 风险预警(775) */
															
 
																+.col-right {
															
 
																+  > :first-child { flex: 1807; min-height: 0; }
															
 
																+  > :last-child { flex: 775; min-height: 0; }
															
 
																+}
															
 
																+</style>
															
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,17 @@
 
																+const { defineConfig } = require('@vue/cli-service')
															
 
																+
															
 
																+module.exports = defineConfig({
															
 
																+  transpileDependencies: true,
															
 
																+  lintOnSave: false,
															
 
																+  devServer: {
															
 
																+    port: 8080,
															
 
																+    open: true
															
 
																+  },
															
 
																+  css: {
															
 
																+    loaderOptions: {
															
 
																+      sass: {
															
 
																+        additionalData: `@import "@/styles/variables.scss";`
															
 
																+      }
															
 
																+    }
															
 
																+  }
															
 
																+})