功能说明
基于设计架构实现IoT大屏前端,包含四大模块的导航、数据展示、模型联动和视频播放。
关联任务
- 依赖设计:[设计] iot大屏页面设计
- 依赖后端:[后端] iot大屏接口开发
- 关联测试:[测试-前端] iot大屏页面测试
页面架构
必须与设计任务的IoTDashboard树形结构完全一致。
接口对接表
| 接口 | 后端任务 | 参数来源(控件) | 响应用途(展示) |
|---|---|---|---|
| GET /api/v1/panorama/overview | [后端] iot大屏接口开发 | communityId←全局 | OverviewPanel卡片 |
| GET /api/v1/panorama/buildings/{id} | [后端] | 楼栋点击 | BuildingDetailPanel |
| GET /api/v1/panorama/search-house | [后端] | SearchBar.keyword | 模型定位+详情 |
| GET /api/v1/security/devices | [后端] | DevicePanel.type | 设备分布/模型点位 |
| GET /api/v1/security/alarms | [后端] | AlarmPanel.status/page | 列表+播报 |
| GET /api/v1/operation/dashboard | [后端] | OperationPanel.range | 运营分析图表 |
| GET /api/v1/video/streams | [后端] | VideoPanel.area/limit | 视频流列表 |
控件交互实现
严格实现设计任务定义的所有交互事件与后续动作(Tab切换、搜索定位、楼栋点击、设备类型过滤、报警列表点击定位、报警滚动播报、运营时间切换、视频区域切换)。
状态管理
- loading: 模块加载状态
- dataList/panels: 各模块数据
- pagination: 报警列表分页
- searchParams: keyword/type/range
- selectedBuilding/selectedAlarm/selectedCameras