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

建任务

所属执行

任务类型

父任务

指派给

多人任务

任务名称

日程规划

优先级

预计（单位：小时）

任务描述

<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><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><h3>弹窗/表单设计</h3><h4>楼栋详情弹窗</h4><pre>Modal[楼栋详情]
├── Section[入住率]
├── Chart[房屋类型分布]
├── Chart[人员分类]
└── List[登记车辆]</pre><h4>报警详情弹窗</h4><pre>Modal[报警详情]
├── Field[报警时间]
├── Field[报警内容]
├── Field[报警点位]
├── Field[状态]
└── Button[定位模型]</pre><h4>表单字段规则</h4><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>房屋关键词</td><td>Input</td><td>是</td><td>1-50字符</td><td>keyword</td></tr><tr><td>报警状态筛选</td><td>Select</td><td>否</td><td>固定枚举</td><td>status</td></tr><tr><td>时间范围</td><td>DatePicker</td><td>否</td><td>90天内</td><td>dateRange</td></tr></table><h3>条件渲染规则</h3><table border="1" cellpadding="6" cellspacing="0" width="100%"><tr style="background:#f2f2f2"><th>元素</th><th>显示条件</th><th>数据来源</th></tr><tr><td>报警误报标记</td><td>row.status === 'falseAlarm'</td><td>报警列表</td></tr><tr><td>设备离线标识</td><td>device.status === 'offline'</td><td>设备数据</td></tr><tr><td>轮巡按钮</td><td>streams.length > 4</td><td>监控流数据</td></tr></table>

添加之后

返回任务列表

返回研发需求列表

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

所属模块

所有模块