# 数据可视化配置页面 · 产品需求与设计说明

> 所属项目：实验室安全智能监测与管控中心
> 页面文件：`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 推送
- [ ] 多套宫格方案管理（草稿/发布）
- [ ] 操作权限控制（仅指定角色可保存生效）