功能说明
定义大屏页面架构与控件交互，对应全景浏览、社区安全、运营管理、监控录像四大模块。
关联任务
- 依赖后端：[后端] 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[报警详情]控件交互定义（前端必须实现）
| 控件 | 事件 | 交互行为 | 调用接口 | 后续动作 |
|---|
| 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 |
弹窗/表单设计
楼栋详情弹窗
Modal[楼栋详情]
├── Section[入住率]
├── Chart[房屋类型分布]
├── Chart[人员分类]
└── List[登记车辆]
报警详情弹窗
Modal[报警详情]
├── Field[报警时间]
├── Field[报警内容]
├── Field[报警点位]
├── Field[状态]
└── Button[定位模型]
表单字段规则
| 字段 | 控件 | 必填 | 校验规则 | 接口参数 |
|---|
| 房屋关键词 | Input | 是 | 1-50字符 | keyword |
| 报警状态筛选 | Select | 否 | 固定枚举 | status |
| 时间范围 | DatePicker | 否 | 90天内 | dateRange |
条件渲染规则
| 元素 | 显示条件 | 数据来源 |
|---|
| 报警误报标记 | row.status === 'falseAlarm' | 报警列表 |
| 设备离线标识 | device.status === 'offline' | 设备数据 |
| 轮巡按钮 | streams.length > 4 | 监控流数据 |