南山区杏林雅苑项目视察-建任务

建任务

所属执行

任务类型

父任务

指派给

多人任务

任务名称

日程规划

优先级

预计（单位：小时）

任务描述

<h3>功能说明</h3><p>基于设计稿实现大屏页面，完成模型联动、数据展示、监控播放。</p><h3>关联任务</h3><ul><li>依赖设计：[设计] 小区IoT中控大屏页面设计（按设计架构开发）</li><li>依赖后端：[后端] iot大屏接口开发</li><li>关联测试：[测试-前端] 小区IoT中控大屏页面测试</li></ul><h3>页面架构（来自设计任务，必须一致）</h3><pre>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[报警详情]</pre><h3>接口对接表</h3><table border="1" cellpadding="6" cellspacing="0" width="100%"><tr style="background:#f2f2f2"><th>接口</th><th>后端任务</th><th>参数来源(控件)</th><th>响应用途(展示)</th></tr><tr><td>GET /api/v1/panorama/summary</td><td>[后端] iot大屏接口开发</td><td>communityId←上下文</td><td>数据总览卡片</td></tr><tr><td>GET /api/v1/buildings/{id}/detail</td><td>[后端] iot大屏接口开发</td><td>模型点击楼栋</td><td>楼栋详情卡</td></tr><tr><td>GET /api/v1/houses/search</td><td>[后端] iot大屏接口开发</td><td>keyword←房屋搜索</td><td>搜索结果、模型定位</td></tr><tr><td>GET /api/v1/security/alarms</td><td>[后端] iot大屏接口开发</td><td>status、page、pageSize←筛选/分页</td><td>报警统计/列表/滚动</td></tr><tr><td>GET /api/v1/operation/analytics</td><td>[后端] iot大屏接口开发</td><td>dateRange←时间选择</td><td>运营图表</td></tr><tr><td>GET /api/v1/monitor/streams</td><td>[后端] iot大屏接口开发</td><td>limit←布局配置</td><td>监控流Grid</td></tr></table><h3>控件交互实现（来自设计任务）</h3><table border="1" cellpadding="6" cellspacing="0" width="100%"><tr style="background:#f2f2f2"><th>控件</th><th>事件</th><th>交互行为</th><th>调用接口</th><th>后续动作</th></tr><tr><td>NavItem</td><td>click</td><td>切换模块，调整模型视角</td><td>-</td><td>刷新对应面板数据</td></tr><tr><td>楼栋模型</td><td>click</td><td>弹出楼栋详情并高亮</td><td>GET /api/v1/buildings/{id}/detail</td><td>展示卡片，模型定位</td></tr><tr><td>房屋搜索输入</td><td>enter</td><td>搜索并在模型上高亮房屋</td><td>GET /api/v1/houses/search</td><td>结果列表，定位</td></tr><tr><td>设备类型项</td><td>click</td><td>模型定位设备点位</td><td>GET /api/v1/panorama/summary</td><td>高亮设备层</td></tr><tr><td>报警列表项</td><td>click</td><td>打开报警详情并定位</td><td>GET /api/v1/security/alarms</td><td>模型高亮报警位置</td></tr><tr><td>报警状态筛选</td><td>change</td><td>过滤报警列表</td><td>GET /api/v1/security/alarms</td><td>刷新列表</td></tr><tr><td>运营图表时间选择</td><td>change</td><td>重载运营分析数据</td><td>GET /api/v1/operation/analytics</td><td>更新图表</td></tr><tr><td>监控重点区域按钮</td><td>click</td><td>切换摄像头布局</td><td>GET /api/v1/monitor/streams</td><td>刷新视频流</td></tr><tr><td>全屏按钮</td><td>click</td><td>切换全屏模式</td><td>-</td><td>调整布局</td></tr><tr><td>刷新按钮</td><td>click</td><td>重新加载当前模块数据</td><td>对应当前模块接口</td><td>重置loading</td></tr></table><p>实现方式：3D模型采用三维渲染库，点击事件返回ID并触发接口；数据面板用图表库渲染；滚动播报使用定时队列；监控流使用播放器组件支持多路并行，离线显示占位。</p><h3>状态管理</h3><ul><li>loading: 模块级加载状态</li><li>dataList: 各列表数据缓存</li><li>pagination: 报警列表分页</li><li>searchParams: 房屋搜索、报警筛选、时间筛选</li></ul>

添加之后

返回任务列表

返回研发需求列表

继续为该研发需求添加任务

所属模块

所有模块