admin-9grid-config-prompt.md 13 KB
数据可视化配置页面 · 产品需求与设计说明
所属项目：实验室安全智能监测与管控中心 页面文件：
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 必须分配 AI 摄像头（拖拽互换时同样校验，违规自动回滚）
- 同一摄像头不可重复分配至多个槽位（分配时自动从原槽位移除）
- 离线摄像头可分配，但显示占位画面
7.6 状态统计栏（卡片底部）
| 字段 | 说明 |
|---|---|
| 已配置 | X / N（满配绿色，否则橙色；N=9 或 4 取决于当前模式） |
| AI槽位 | 槽位1是否满足约束（✓ 绿 / ✗ 红） |
| 待配置 | 空槽位数（0 绿色，否则橙色） |
| 在线率 | 已配置中在线摄像头占比 |
| 右侧约束徽章 | 全局 AI 约束状态（满足绿色 / 不满足红色闪烁） |
八、底部操作栏
左侧状态信息：
● 系统运行正常（绿色脉冲点）上次保存：HH:MM:SS（保存后更新）- 配置有效性描述（AI约束满足 + 槽位完整度）
右侧操作区（从左到右）：
| 控件 | 类型 | 说明 |
|---|---|---|
| 立即生效 | Toggle 开关（默认开启） | 控制保存时是否同步推送大屏；开启=蓝色，关闭=灰色 |
重置 |
默认样式按钮 | 将当前标签的配置恢复至最近一次保存的快照 |
预览效果 |
描边蓝色按钮 | 弹出模拟大屏宫格预览弹窗 |
💾 保存 |
蓝色主按钮 | 保存配置；若「立即生效」开启则同时推送大屏，否则仅保存草稿 |
立即生效 Toggle 逻辑：
- 开关开启（checked）→ 保存时 toast 提示「已保存并生效，大屏即时更新」
- 开关关闭（unchecked）→ 保存时 toast 提示「草稿已保存」
doSave()读取#apply-togglecheckbox 的.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[]
{
id: 'A301-1', // 唯一ID
name: 'A301 有机合成室 #1', // 显示名称
code: 'A301', // 房间号
labName: '有机合成实验室', // 实验室名称
floor: '3层', // 楼层
building: '综合实验楼A', // 楼栋
unit: '化学研究所', // 二级单位
type: 'ai' | 'normal', // 摄像头类型
status: 'online' | 'offline' // 在线状态
}
槽位对象 slots9[] / slots4[]
{
pos: 1, // 槽位编号（安全大厦: 1~9，基地: 1~4）
camId: null, // 已分配摄像头ID（null=空）
aiRequired: true // 是否要求AI摄像头（仅pos=1为true）
}
双模式独立状态
let slots9 = Array(9) // 安全大厦槽位数组（独立）
let slots4 = Array(4) // 基地槽位数组（独立）
let savedSnapshot9 = [] // 安全大厦最近保存快照
let savedSnapshot4 = [] // 基地最近保存快照
let gridMode = 9 // 当前激活模式（9 或 4）
let slots = slots9 // 运行时指针，switchGridMode() 切换
十二、待扩展功能（预留）
- 与后端 API 对接：摄像头列表拉取、配置读取/写入
- 配置历史记录查询与回滚
- 摄像头实时在线状态 WebSocket 推送
- 多套宫格方案管理（草稿/发布）
- 操作权限控制（仅指定角色可保存生效）