功能说明
定义小区IoT中控大屏的页面架构与控件交互，覆盖全景浏览、社区安全、运营管理、监控录像四大视图。
关联任务
- 依赖后端：[后端] iot大屏接口开发
- 关联前端：[前端] iot大屏页面开发
- 关联测试：[测试-前端] iot大屏页面测试
页面架构（前端必须按此结构开发）
IoTCommunityDashboard // 页面主容器
├── Header // 顶部抬头
│ ├── Title[小区IoT中控大屏]
│ └── StatusBar[时间/天气/在线状态]
├── NavBarBottom // 底部导航
│ ├── Tab[全景浏览]
│ ├── Tab[社区安全]
│ ├── Tab[运营管理]
│ └── Tab[监控录像]
├── MainArea // 主体区域
│ ├── SceneView[3D模型] // 中央3D模型
│ └── SidePanel // 侧边数据面板
│ ├── Panel[全景浏览]
│ │ ├── Card[数据总览]
│ │ ├── Search[房屋搜索]
│ │ └── List[配套设施]
│ ├── Panel[社区安全]
│ │ ├── Card[设备总览]
│ │ ├── Chart[设备类型分布]
│ │ ├── Board[报警统计]
│ │ └── List[报警滚动]
│ ├── Panel[运营管理]
│ │ ├── Chart[入住趋势]
│ │ ├── Chart[人员构成]
│ │ ├── Chart[车辆占比]
│ │ ├── List[异常通行]
│ │ ├── List[工单最新]
│ │ ├── List[投诉分析]
│ │ └── Table[值班排班]
│ └── Panel[监控录像]
│ ├── Grid[多画面播放器]
│ └── List[重点区域快捷]
└── FloatWidgets
├── Tooltip[模型点位详情]
└── MiniMap[快速定位]控件交互定义（前端必须实现）
| 控件 | 事件 | 交互行为 | 调用接口 | 后续动作 |
|---|
| 底部Tab | click | 切换场景视图，更新侧边面板 | - | 切换对应Panel内容 |
| 房屋搜索框 | enter | 按房号搜索并定位模型 | GET /api/v1/community/buildings/{buildingId} | 高亮模型房屋 |
| 模型楼栋点 | click | 展示楼栋详情卡片 | GET /api/v1/community/buildings/{buildingId} | 弹出卡片更新数据 |
| 设备类型图例 | click | 定位设备点位 | GET /api/v1/security/alerts | 模型高亮设备 |
| 报警列表项 | click | 定位报警点位 | - | 模型镜头跳转 |
| 报警状态筛选 | change | 切换报警状态统计与列表 | GET /api/v1/security/alerts | 刷新看板与滚动 |
| 运营时间筛选 | change | 刷新运营分析数据 | GET /api/v1/operation/analytics | 更新趋势图 |
| 重点区域快捷 | click | 切换监控流 | GET /api/v1/monitor/streams | 播放器加载新流 |
| 多画面播放器单元 | click | 放大单画面 | - | 进入单画面全屏 |
| 报警滚动暂停 | hover | 暂停滚动 | - | 停留展示详情 |
弹窗/表单设计
新增/编辑弹窗
Modal[设备/报警详情]
├── InfoCard[基本信息]
├── Tabs
│ ├── Tab[概览]
│ ├── Tab[关联录像]
│ └── Tab[处理记录]
└── Footer
├── Button[关闭]
└── Button[确认/标记误报]表单字段规则
| 字段 | 控件 | 必填 | 校验规则 | 接口参数 |
|---|
| 处置备注 | Textarea | 否 | 0-200字符 | remark |
| 处置状态 | Radio | 是 | 枚举：确认/误报 | status |
条件渲染规则
| 元素 | 显示条件 | 数据来源 |
|---|
| 报警确认按钮 | alert.status === 'pending' | 报警列表行 |
| 误报按钮 | alert.status === 'pending' | 报警列表行 |
| 重点标签 | stream.isKeyPoint === true | 监控流数据 |