功能说明
实现小区3D大屏,含全景、社区安全、运营管理、监控录像四大模块与底部导航切换
关联任务
- 依赖后端任务:[后端] 全景浏览接口开发;[后端] 社区安全接口开发;[后端] 运营管理接口开发;[后端] 监控录像接口开发
- 关联测试任务:[测试-前端] 中控大屏前端测试
接口对接表(必须与后端任务定义一致)
| 接口 | 后端任务 | 参数来源 | 响应用途 |
|---|
| GET /api/v1/overview/summary | [后端] 全景浏览接口开发 | communityId←配置 | 概况指标展示 |
| GET /api/v1/buildings/{id} | [后端] 全景浏览接口开发 | id←模型点击 | 楼栋信息卡片 |
| GET /api/v1/units/search | [后端] 全景浏览接口开发 | keyword←搜索框;buildingId←下拉 | 列表与定位 |
| GET /api/v1/map/locate-by-entity | [后端] 全景浏览接口开发 | entityType/entityId←面板点击 | 模型高亮 |
| GET /api/v1/security/devices | [后端] 社区安全接口开发 | communityId←配置;type←点击 | 设备分布与定位 |
| GET /api/v1/security/alarms | [后端] 社区安全接口开发 | status/limit←筛选 | 报警看板+列表 |
| GET /api/v1/security/alarms/realtime | [后端] 社区安全接口开发 | since/limit←轮询 | 滚动播报 |
| GET /api/v1/security/personnel-stats | [后端] 社区安全接口开发 | communityId←配置 | 人员实时卡片 |
| GET /api/v1/security/vehicle-stats | [后端] 社区安全接口开发 | communityId←配置 | 车辆实时卡片 |
| GET /api/v1/ops/occupancy | [后端] 运营管理接口开发 | range←筛选 | 入住率与趋势 |
| GET /api/v1/ops/personnel | [后端] 运营管理接口开发 | range←筛选 | 人员分析图表 |
| GET /api/v1/ops/vehicles | [后端] 运营管理接口开发 | range←筛选 | 车辆分析图表 |
| GET /api/v1/ops/workorders | [后端] 运营管理接口开发 | category/status←筛选 | 工单统计+最新 |
| GET /api/v1/ops/complaints | [后端] 运营管理接口开发 | category←筛选 | AI归纳+最新 |
| GET /api/v1/ops/duty | [后端] 运营管理接口开发 | date←日期选择 | 值班表与状态 |
| GET /api/v1/monitor/streams | [后端] 监控录像接口开发 | layout/cameraIds←布局与选择 | 多画面播放 |
| GET /api/v1/monitor/focus | [后端] 监控录像接口开发 | area←快捷按钮 | 重点区域播放 |
页面结构
Shell
└── BottomNav(全景/安全/运营/监控)
├── PanoramaView: 概览面板、楼栋卡片、搜索定位
├── SafetyView: 设备分布、报警看板、实时滚动
├── OperationView: 入住/人员/车辆/工单/投诉/值班
└── MonitorView: 多画面播放器、重点区域按钮
控件交互
| 控件 | 事件 | 行为 | 调用接口 |
|---|
| 搜索房屋 | click | 根据keyword刷新列表并定位 | GET /api/v1/units/search |
| 楼栋点击 | click | 加载楼栋详情 | GET /api/v1/buildings/{id} |
| 设备类型 | click | 过滤并定位设备 | GET /api/v1/security/devices |
| 报警筛选 | change | 刷新报警列表 | GET /api/v1/security/alarms |
| 报警滚动 | poll | 拉取最新报警 | GET /api/v1/security/alarms/realtime |
| 时间筛选 | change | 刷新运营图表 | GET /api/v1/ops/occupancy; /ops/personnel; /ops/vehicles |
| 工单筛选 | change | 刷新工单数据 | GET /api/v1/ops/workorders |
| 投诉筛选 | change | 刷新投诉数据 | GET /api/v1/ops/complaints |
| 值班日期 | change | 查询值班表 | GET /api/v1/ops/duty |
| 多画面布局 | change | 加载流 | GET /api/v1/monitor/streams |
| 重点区域按钮 | click | 加载重点区域流 | GET /api/v1/monitor/focus |