功能说明
定义小区IoT中控大屏的页面架构与控件交互，覆盖全景浏览、社区安全、运营管理、监控录像四大模块。
关联任务
- 依赖后端：[后端] iot大屏接口开发（接口字段对齐）
- 关联前端：[前端] iot大屏页面开发
- 关联测试：[测试-前端] iot大屏页面测试
页面架构
IoTDashboard // 大屏根页面
├── HeaderBar // 顶部：标题、时间、全局状态
├── ModelCanvas // 中央3D模型区
├── SidePanel // 右侧信息区（随模块切换）
│ ├── OverviewPanel // 全景数据总览卡片
│ ├── BuildingDetailPanel // 楼栋点击详情弹层
│ ├── DevicePanel // 设备分布/筛选
│ ├── AlarmPanel // 报警列表+播报
│ ├── OperationPanel // 运营分析卡片
│ └── VideoPanel // 监控流列表/多画面
├── BottomNav // 底部导航（4个Tab）
│ ├── Tab[全景浏览]
│ ├── Tab[社区安全]
│ ├── Tab[运营管理]
│ └── Tab[监控录像]
├── SearchBar // 房屋搜索输入+定位
└── ToastArea // 提示/告警
控件交互定义
| 控件 | 事件 | 交互行为 | 调用接口 | 后续动作 |
|---|
| Tab[全景浏览] | click | 切换主场景，加载总览数据 | GET /api/v1/panorama/overview | 更新OverviewPanel+模型总览视角 |
| Tab[社区安全] | click | 切换安全场景 | GET /api/v1/security/devices, GET /api/v1/security/alarms | 更新DevicePanel/AlarmPanel，模型聚焦重点区域 |
| Tab[运营管理] | click | 切换运营场景 | GET /api/v1/operation/dashboard | 刷新运营卡片，模型聚焦人流/车流热点 |
| Tab[监控录像] | click | 切换监控场景 | GET /api/v1/video/streams | 加载多画面视频 |
| SearchBar | enter | 根据房号搜索并定位模型 | GET /api/v1/panorama/search-house | 模型飞行高亮房屋并弹出详情 |
| ModelCanvas-楼栋 | click | 请求楼栋详情并展示 | GET /api/v1/panorama/buildings/{id} | 高亮楼栋、弹出BuildingDetailPanel |
| DevicePanel-类型标签 | click | 过滤设备列表并定位模型 | GET /api/v1/security/devices?type=xx | 模型高亮对应设备点 |
| AlarmPanel-列表行 | click | 定位报警点位 | - | 模型定位，弹出小气泡 |
| AlarmPanel-播报 | auto | 滚动显示最新报警 | GET /api/v1/security/alarms | 循环轮播 |
| OperationPanel-时间切换 | click | 切换统计范围 | GET /api/v1/operation/dashboard?range=xx | 刷新图表 |
| VideoPanel-区域选择 | change | 按区域筛选视频流 | GET /api/v1/video/streams?area=xx | 刷新多画面 |
弹窗/表单设计
BuildingDetailPanel
Panel[楼栋详情]
├── Card[入住率]
├── Chart[房屋类型分布]
├── Chart[人员分类]
└── List[登记车辆]
表单字段规则
| 字段 | 控件 | 必填 | 校验规则 | 接口参数 |
|---|
| 房屋搜索 | Input | 是 | 1-50字符 | keyword |
| 时间范围 | Select | 否 | 值为7/30/90/custom | range |
| 设备类型 | Tag/Select | 否 | 枚举设备类型 | type |
条件渲染规则
| 元素 | 显示条件 | 数据来源 |
|---|
| BuildingDetailPanel | 当前存在选中楼栋 | 前端状态selectedBuilding |
| AlarmPanel红色高亮 | alarm.level === 'high' | 报警数据 |
| 视频高清按钮 | role === 'admin' | 用户角色 |