功能说明
基于设计稿实现大屏页面，完成模型联动、数据展示、监控播放。
关联任务
- 依赖设计：[设计] 小区IoT中控大屏页面设计（按设计架构开发）
- 依赖后端：[后端] iot大屏接口开发
- 关联测试：[测试-前端] 小区IoT中控大屏页面测试
页面架构（来自设计任务，必须一致）
IoTDashboardPage
├── Header
│ ├── Title[小区IoT中控大屏]
│ └── ActionBar
│ ├── Button[全屏切换]
│ └── Button[刷新]
├── ModelCanvas[3D模型区域]
│ ├── Layer[楼栋]
│ ├── Layer[设备点位]
│ └── Tooltip[实体信息]
├── SidePanel
│ ├── Tab[全景浏览]
│ │ ├── Panel[数据总览]
│ │ │ ├── Card[小区概况]
│ │ │ ├── Card[房屋总量]
│ │ │ ├── Card[人员总量]
│ │ │ ├── Card[车辆总量]
│ │ │ └── Card[配套设施]
│ │ ├── Panel[楼栋详情卡]
│ │ └── Search[房屋搜索]
│ ├── Tab[社区安全]
│ │ ├── Panel[设备信息监控]
│ │ ├── Panel[报警统计]
│ │ ├── List[待处理报警]
│ │ └── Marquee[实时报警滚动]
│ ├── Tab[运营管理]
│ │ ├── Chart[房屋入住分析]
│ │ ├── Chart[人员分析]
│ │ ├── Chart[车辆分析]
│ │ ├── Chart[工单分析]
│ │ └── Chart[投诉分析]
│ └── Tab[监控录像]
│ ├── Grid[多画面监控]
│ └── Selector[重点区域]
├── BottomNav
│ ├── NavItem[全景浏览]
│ ├── NavItem[社区安全]
│ ├── NavItem[运营管理]
│ └── NavItem[监控录像]
└── Modal
├── Modal[楼栋详情]
└── Modal[报警详情]接口对接表
| 接口 | 后端任务 | 参数来源(控件) | 响应用途(展示) |
|---|---|---|---|
| GET /api/v1/panorama/summary | [后端] iot大屏接口开发 | communityId←上下文 | 数据总览卡片 |
| GET /api/v1/buildings/{id}/detail | [后端] iot大屏接口开发 | 模型点击楼栋 | 楼栋详情卡 |
| GET /api/v1/houses/search | [后端] iot大屏接口开发 | keyword←房屋搜索 | 搜索结果、模型定位 |
| GET /api/v1/security/alarms | [后端] iot大屏接口开发 | status、page、pageSize←筛选/分页 | 报警统计/列表/滚动 |
| GET /api/v1/operation/analytics | [后端] iot大屏接口开发 | dateRange←时间选择 | 运营图表 |
| GET /api/v1/monitor/streams | [后端] iot大屏接口开发 | limit←布局配置 | 监控流Grid |
控件交互实现（来自设计任务）
| 控件 | 事件 | 交互行为 | 调用接口 | 后续动作 |
|---|---|---|---|---|
| NavItem | click | 切换模块，调整模型视角 | - | 刷新对应面板数据 |
| 楼栋模型 | click | 弹出楼栋详情并高亮 | GET /api/v1/buildings/{id}/detail | 展示卡片，模型定位 |
| 房屋搜索输入 | enter | 搜索并在模型上高亮房屋 | GET /api/v1/houses/search | 结果列表，定位 |
| 设备类型项 | click | 模型定位设备点位 | GET /api/v1/panorama/summary | 高亮设备层 |
| 报警列表项 | click | 打开报警详情并定位 | GET /api/v1/security/alarms | 模型高亮报警位置 |
| 报警状态筛选 | change | 过滤报警列表 | GET /api/v1/security/alarms | 刷新列表 |
| 运营图表时间选择 | change | 重载运营分析数据 | GET /api/v1/operation/analytics | 更新图表 |
| 监控重点区域按钮 | click | 切换摄像头布局 | GET /api/v1/monitor/streams | 刷新视频流 |
| 全屏按钮 | click | 切换全屏模式 | - | 调整布局 |
| 刷新按钮 | click | 重新加载当前模块数据 | 对应当前模块接口 | 重置loading |
实现方式：3D模型采用三维渲染库，点击事件返回ID并触发接口；数据面板用图表库渲染；滚动播报使用定时队列；监控流使用播放器组件支持多路并行，离线显示占位。
状态管理
- loading: 模块级加载状态
- dataList: 各列表数据缓存
- pagination: 报警列表分页
- searchParams: 房屋搜索、报警筛选、时间筛选