|
|
@@ -0,0 +1,297 @@
|
|
|
+# 数据可视化配置页面 · 产品需求与设计说明
|
|
|
+
|
|
|
+> 所属项目：实验室安全智能监测与管控中心
|
|
|
+> 页面文件：`prototype-ui/admin-9grid-config.html`
|
|
|
+> 设计分辨率：1920×1080px（屏幕等比缩放自适应）
|
|
|
+> 设计风格：亮色企业管理后台（Ant Design 规范）
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 一、页面定位
|
|
|
+
|
|
|
+本页面为大屏「默认」视图中固定监控宫格的**后台配置入口**，供系统管理员分别配置「安全大厦」（9路，3×3）和「基地」（4路，2×2）两套监控方案的摄像头槽位。配置保存后可选择是否立即生效并推送至大屏端。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 二、整体布局
|
|
|
+
|
|
|
+```
|
|
|
+┌─────────────────────────── 顶部标题栏 (56px) ───────────────────────────┐
|
|
|
+│ Logo │ ← 返回 │ 首页 / 基础结构管理* / 实验室管理 / 系统配置 / 数据报表 │ 右侧操作区 │
|
|
|
+├──────────┬────────────────────┬──────────────────────────────────────────┤
|
|
|
+│ 左导航菜单│ 摄像头库侧边栏 │ 槽位配置区（选项卡切换） │
|
|
|
+│ 282px │ 322px │ flex:1 │
|
|
|
+│ │ │ │
|
|
|
+│ 基础结构 │ [搜索框] │ 顶部：[标题栏] ‖ 右侧 [安全大厦][基地] 标签 │
|
|
|
+│ 管理 │ [单位筛选] │ │
|
|
|
+│ > 数据可 │ 摄像头树形列表 │ 安全大厦模式 (3×3)： │
|
|
|
+│ 视化配置│ (按楼栋/楼层/房间) │ ┌──┬──┬──┐ │
|
|
|
+│ 实验室管理│ │ │1 │2 │3 │ │
|
|
|
+│ 系统设置 │ │ ├──┼──┼──┤ │
|
|
|
+│ │ │ │4 │5 │6 │ │
|
|
|
+│ │ │ ├──┼──┼──┤ │
|
|
|
+│ │ │ │7 │8 │9 │ │
|
|
|
+│ │ │ └──┴──┴──┘ │
|
|
|
+│ │ │ │
|
|
|
+│ │ │ 基地模式 (2×2)： │
|
|
|
+│ │ │ ┌──┬──┐ │
|
|
|
+│ │ │ │1 │2 │ │
|
|
|
+│ │ │ ├──┼──┤ │
|
|
|
+│ │ │ │3 │4 │ │
|
|
|
+│ │ │ └──┴──┘ │
|
|
|
+│ │ │ │
|
|
|
+│ │ │ [配置状态统计栏] │
|
|
|
+├──────────┴────────────────────┴──────────────────────────────────────────┤
|
|
|
+│ 底部操作栏：系统状态 | 保存时间 | 有效性 ‖ 立即生效 开关 | 重置/预览/保存 │
|
|
|
+└──────────────────────────────────────────────────────────────────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 三、顶部标题栏
|
|
|
+
|
|
|
+| 区域 | 内容 |
|
|
|
+|------|------|
|
|
|
+| Logo | 圆形蓝色图标「安」+ 系统名称「安科院管理后台」+ 副标题 |
|
|
|
+| 返回按钮 | `← 返回`，调用 `history.back()`，hover 变蓝 |
|
|
|
+| 横向导航 | 首页 / **基础结构管理**（激活）/ 实验室管理 / 系统配置 / 数据报表 |
|
|
|
+| 右侧操作 | 查看大屏图标按钮（新标签打开 `index-v2.html`）、通知铃铛、分割线、用户信息（姓名+角色） |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 四、左导航菜单（282px）
|
|
|
+
|
|
|
+分三个分组，带分组标题：
|
|
|
+
|
|
|
+**基础结构管理**
|
|
|
+- 🖥️ 实时监控大屏
|
|
|
+- 📺 **数据可视化配置**（**当前页，激活高亮，蓝色左边框**）
|
|
|
+- 📷 摄像头管理（角标显示数量）
|
|
|
+- 🗺️ 点位地图
|
|
|
+
|
|
|
+**实验室管理**
|
|
|
+- 🔬 实验室列表（角标 128）
|
|
|
+- 📊 安全分级
|
|
|
+- 👥 人员管理
|
|
|
+- ⚗️ 化学品管理
|
|
|
+
|
|
|
+**系统设置**
|
|
|
+- 👤 用户管理
|
|
|
+- 🔔 预警配置
|
|
|
+- 📋 操作日志
|
|
|
+
|
|
|
+> 激活项样式：蓝色左边框 `border-left: 3px solid #1890ff`，背景 `#e6f7ff`，文字蓝色加粗。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 五、面包屑导航
|
|
|
+
|
|
|
+顶部内容区面包屑路径：`基础结构管理 / 数据可视化配置`
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 六、摄像头库侧边栏（322px）
|
|
|
+
|
|
|
+### 6.1 顶部信息区
|
|
|
+- 标题「摄像头库」+ 数量角标（共 N 台）
|
|
|
+- 三个统计芯片：在线数（绿色）/ 离线数（红色）/ 总计（蓝色）
|
|
|
+
|
|
|
+### 6.2 搜索与筛选
|
|
|
+- 搜索框：带搜索图标，实时过滤摄像头名称/房间号
|
|
|
+- 下拉筛选：按二级单位（化学/物理/生物/材料/工程研究所）筛选
|
|
|
+
|
|
|
+### 6.3 摄像头树形列表
|
|
|
+结构层级：**楼栋 → 楼层 → 摄像头**，前两级可展开/折叠。
|
|
|
+
|
|
|
+每条摄像头条目显示：
|
|
|
+- `⠿` 拖拽手柄
|
|
|
+- 圆点状态（绿=在线 / 红=离线）
|
|
|
+- 摄像头名称（超长省略）
|
|
|
+- 类型标签（等宽 38px）：
|
|
|
+ - **AI**（绿色）：AI 智能摄像头
|
|
|
+ - **已配置**（绿色）：已分配至某槽位
|
|
|
+ - 普通摄像头不显示标签
|
|
|
+
|
|
|
+> ⚠️ 摄像头条目**不显示**悬浮预览浮窗，鼠标经过无弹层。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 七、槽位配置区
|
|
|
+
|
|
|
+### 7.1 选项卡（内容区顶部右侧）
|
|
|
+
|
|
|
+配置区顶部操作栏右侧提供两个标签按钮，切换当前配置的方案：
|
|
|
+
|
|
|
+| 标签 | 说明 |
|
|
|
+|------|------|
|
|
|
+| **安全大厦**（默认激活） | 9路监控，3×3 宫格布局 |
|
|
|
+| **基地** | 4路监控，2×2 宫格布局 |
|
|
|
+
|
|
|
+- 两套方案的槽位数据**完全独立**，切换标签不影响另一套方案
|
|
|
+- 切换标签时同步更新卡片标题、宫格布局及统计栏
|
|
|
+- 当前激活标签：蓝色填充背景 + 白色文字；未激活：灰白底色
|
|
|
+
|
|
|
+### 7.2 卡片标题栏
|
|
|
+
|
|
|
+从左到右单行排列：
|
|
|
+
|
|
|
+```
|
|
|
+📺 安全大厦监控配置 | 槽位1须为 AI 摄像头 · 保存后即时生效 | ● 大屏实时同步
|
|
|
+ [右对齐]
|
|
|
+💡 点选摄像头→点击槽位，或直接拖拽 [🗑 清空全部]
|
|
|
+```
|
|
|
+
|
|
|
+- 安全大厦模式：卡片标题显示「安全大厦监控配置」
|
|
|
+- 基地模式：卡片标题显示「基地监控配置」
|
|
|
+- 快捷操作区**仅保留** 🗑 清空全部 按钮
|
|
|
+
|
|
|
+### 7.3 宫格槽位网格
|
|
|
+
|
|
|
+**安全大厦模式（gridMode = 9）**：3×3 共 9 个槽位
|
|
|
+**基地模式（gridMode = 4）**：2×2 共 4 个槽位
|
|
|
+
|
|
|
+每个槽位包含：
|
|
|
+- 左上角编号徽标（选中时变蓝填充）
|
|
|
+- 右上角：AI 标签（绿色）/ "须AI" 警告标签（橙色）/ REC 录制标签（红色闪烁）/ 离线标签
|
|
|
+- Canvas 模拟监控画面（深色背景 `#040d1e`）
|
|
|
+- 底部：摄像头名称（左）+ 房间号·楼层（右）
|
|
|
+- 悬停显示操作浮层：**替换** / **清除（红色）**
|
|
|
+
|
|
|
+**槽位 1 特殊规则（两种模式共同）：**
|
|
|
+- 强制要求分配 AI 智能摄像头
|
|
|
+- 已正确配置：绿色边框
|
|
|
+- 未配置或配置非 AI：橙色警告边框 + "须AI" 标签
|
|
|
+- 仅槽位 1 显示危险行为检测框（红色动画虚框 + "危险行为检测"标签）
|
|
|
+
|
|
|
+**空槽位：**
|
|
|
+- 槽位 1：显示 🤖 + "请分配 AI 摄像头"
|
|
|
+- 其他：显示 📷 + "点击选择摄像头"
|
|
|
+- 均显示「或从左侧拖拽至此」提示
|
|
|
+
|
|
|
+### 7.4 分配交互方式
|
|
|
+
|
|
|
+| 方式 | 操作描述 |
|
|
|
+|------|----------|
|
|
|
+| 点选分配 | 点击左侧摄像头条目 → 再点击目标槽位 |
|
|
|
+| 先选槽后选摄像头 | 点击槽位激活 → 再点击摄像头条目 |
|
|
|
+| 拖拽（从树）| 从摄像头库拖拽条目至目标槽位 |
|
|
|
+| 槽位互换 | 从已配置槽位拖拽至另一槽位 |
|
|
|
+| 替换 | 悬停槽位 → 点击「替换」→ 再选摄像头 |
|
|
|
+| 清除 | 悬停槽位 → 点击「清除」 |
|
|
|
+
|
|
|
+### 7.5 配置规则（强制约束）
|
|
|
+1. **槽位 1 必须分配 AI 摄像头**（拖拽互换时同样校验，违规自动回滚）
|
|
|
+2. 同一摄像头不可重复分配至多个槽位（分配时自动从原槽位移除）
|
|
|
+3. 离线摄像头可分配，但显示占位画面
|
|
|
+
|
|
|
+### 7.6 状态统计栏（卡片底部）
|
|
|
+
|
|
|
+| 字段 | 说明 |
|
|
|
+|------|------|
|
|
|
+| 已配置 | X / N（满配绿色，否则橙色；N=9 或 4 取决于当前模式）|
|
|
|
+| AI槽位 | 槽位1是否满足约束（✓ 绿 / ✗ 红）|
|
|
|
+| 待配置 | 空槽位数（0 绿色，否则橙色）|
|
|
|
+| 在线率 | 已配置中在线摄像头占比 |
|
|
|
+| 右侧约束徽章 | 全局 AI 约束状态（满足绿色 / 不满足红色闪烁）|
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 八、底部操作栏
|
|
|
+
|
|
|
+**左侧状态信息：**
|
|
|
+- `● 系统运行正常`（绿色脉冲点）
|
|
|
+- `上次保存：HH:MM:SS`（保存后更新）
|
|
|
+- 配置有效性描述（AI约束满足 + 槽位完整度）
|
|
|
+
|
|
|
+**右侧操作区（从左到右）：**
|
|
|
+
|
|
|
+| 控件 | 类型 | 说明 |
|
|
|
+|------|------|------|
|
|
|
+| 立即生效 | Toggle 开关（默认开启） | 控制保存时是否同步推送大屏；开启=蓝色，关闭=灰色 |
|
|
|
+| `重置` | 默认样式按钮 | 将当前标签的配置恢复至最近一次保存的快照 |
|
|
|
+| `预览效果` | 描边蓝色按钮 | 弹出模拟大屏宫格预览弹窗 |
|
|
|
+| `💾 保存` | 蓝色主按钮 | 保存配置；若「立即生效」开启则同时推送大屏，否则仅保存草稿 |
|
|
|
+
|
|
|
+> **立即生效 Toggle 逻辑：**
|
|
|
+> - 开关开启（checked）→ 保存时 toast 提示「已保存并生效，大屏即时更新」
|
|
|
+> - 开关关闭（unchecked）→ 保存时 toast 提示「草稿已保存」
|
|
|
+> - `doSave()` 读取 `#apply-toggle` checkbox 的 `.checked` 状态决定行为，无参数传入
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 九、预览效果弹窗
|
|
|
+
|
|
|
+点击「预览效果」后弹出全屏遮罩弹窗，内容：
|
|
|
+- 标题：「📺 大屏监控宫格预览」+ 副标题（根据当前 gridMode 显示对应格数）
|
|
|
+- 深色背景 `#1a1a2e` 内展示对应 Canvas 模拟监控网格
|
|
|
+- 每格显示：编号、摄像头名称、AI 标签（仅 AI 摄像头）
|
|
|
+- 底部按钮：关闭 / **确认并保存生效**（强制打开「立即生效」开关后调用 `doSave()`）
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 十、设计规范
|
|
|
+
|
|
|
+| 属性 | 值 |
|
|
|
+|------|-----|
|
|
|
+| 设计分辨率 | 1920×1080px |
|
|
|
+| 缩放方式 | `transform: scale()` 等比缩放居中，响应窗口 resize |
|
|
|
+| 主色 | `#1890ff` |
|
|
|
+| 成功色 | `#52c41a` |
|
|
|
+| 警告色 | `#faad14` |
|
|
|
+| 错误色 | `#ff4d4f` |
|
|
|
+| 主要文字 | `#262626` |
|
|
|
+| 次要文字 | `#595959` / `#8c8c8c` |
|
|
|
+| 页面背景 | `#f5f7fa` |
|
|
|
+| 卡片背景 | `#ffffff` |
|
|
|
+| 边框色 | `#e8e8e8` |
|
|
|
+| 圆角 | `8px`（卡片）/ `4px`（按钮/输入框）|
|
|
|
+| 字体 | `-apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif` |
|
|
|
+| 图表库 | 无（Canvas 2D 模拟）|
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 十一、数据结构
|
|
|
+
|
|
|
+### 摄像头对象 `CAM_DB[]`
|
|
|
+```javascript
|
|
|
+{
|
|
|
+ id: 'A301-1', // 唯一ID
|
|
|
+ name: 'A301 有机合成室 #1', // 显示名称
|
|
|
+ code: 'A301', // 房间号
|
|
|
+ labName: '有机合成实验室', // 实验室名称
|
|
|
+ floor: '3层', // 楼层
|
|
|
+ building: '综合实验楼A', // 楼栋
|
|
|
+ unit: '化学研究所', // 二级单位
|
|
|
+ type: 'ai' | 'normal', // 摄像头类型
|
|
|
+ status: 'online' | 'offline' // 在线状态
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 槽位对象 `slots9[]` / `slots4[]`
|
|
|
+```javascript
|
|
|
+{
|
|
|
+ pos: 1, // 槽位编号（安全大厦: 1~9，基地: 1~4）
|
|
|
+ camId: null, // 已分配摄像头ID（null=空）
|
|
|
+ aiRequired: true // 是否要求AI摄像头（仅pos=1为true）
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 双模式独立状态
|
|
|
+```javascript
|
|
|
+let slots9 = Array(9) // 安全大厦槽位数组（独立）
|
|
|
+let slots4 = Array(4) // 基地槽位数组（独立）
|
|
|
+let savedSnapshot9 = [] // 安全大厦最近保存快照
|
|
|
+let savedSnapshot4 = [] // 基地最近保存快照
|
|
|
+let gridMode = 9 // 当前激活模式（9 或 4）
|
|
|
+let slots = slots9 // 运行时指针，switchGridMode() 切换
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 十二、待扩展功能（预留）
|
|
|
+
|
|
|
+- [ ] 与后端 API 对接：摄像头列表拉取、配置读取/写入
|
|
|
+- [ ] 配置历史记录查询与回滚
|
|
|
+- [ ] 摄像头实时在线状态 WebSocket 推送
|
|
|
+- [ ] 多套宫格方案管理（草稿/发布）
|
|
|
+- [ ] 操作权限控制（仅指定角色可保存生效）
|
anne
