Appearance
快速搭建设备管理应用
1. 概述
云智易物联网平台支持快速构建设备管理类应用页面。本文以“设备管理”应用为示例，介绍如何通过页面设计功能搭建典型的设备管理前端，包括列表页、详情页及常用组件的配置要点。
2. 操作指南
2.1 设备管理（列表页面）
操作总览：
- 创建页面（桌面端）
- 启用标题区与工具区并设置标题
- 配置指标卡组
- 配置表头功能区（搜索、筛选、按钮）
- 配置表格与分页
- 配置批量操作和已勾选提示
详细步骤：
创建页面
- 新建页面，选择“桌面端页面”。
- 新建页面，选择“桌面端页面”。
启用标题区与工具区
- 在右侧设置中勾选「标题栏」「工具栏」。
- 设置标题名称为“设备管理”。
- 提示：编辑页面前请启用编辑权限。
配置指标卡组
- 指标卡组样式选择“卡片”。
- 新增指标卡并修改名称与指标值（支持固定值或绑定字段）。
- 设置对齐方式为“居中”。
配置表头功能区
- 添加容器，放入输入组合（用于搜索）和下拉框（用于筛选），调整组件宽度。
- 选中容器后使用“组件包裹”功能以保持布局结构。
- 为表头添加操作按钮（如“关联设备”，样式通常设为主色）。
- 容器样式建议：外层横向布局、两端对齐；内层尺寸设为“适应内容”。
- 下拉框可设置为固定值或绑定数据供给器。
配置表格与分页
- 添加并绑定数据供给器（数据源）。
- 配置表格显示列、启用“操作列”和“行选择（多选）”。
- 在页面底部添加容器，放置批量操作按钮（如“批量移除”）和显示已勾选项的文字组件；将分页组件与表格数据源绑定。
配置批量移除与已勾选提示
- 选中表格，右侧工具栏进入“事件”配置：
- 添加事件“选择表格项”，使用“变量赋值”将已选项存入页面变量（需先在页面数据中定义该变量）。
- 配置“批量移除”动作：在属性高级中启用二次确认并设置提示文本（例如“确定要移除该设备？”）；在事件中添加“发送请求”或“更新表数据”以执行移除操作。
- 选中表格，右侧工具栏进入“事件”配置：
2.2 设备详情页
操作总览：
- 创建详情页
- 配置详情组件并绑定数据
- 使用选项卡组织内容
- 配置从列表页跳转并传参
详细步骤：
创建页面
- 新建“详情”页面用于显示单设备信息。
配置详情组件
- 添加设备详情数据供给器，绑定查询设备详情的接口（通常以设备 ID 查询）。
- 添加“详情”组件并将其数据源绑定到该供给器。
配置选项卡
- 添加选项卡组件并设置每个选项卡的名称。
- 在第一个选项卡添加“视频监控”“设备状态”等组件，确保在属性中关联设备标识字段（例如物联平台设备 ID）。
- 其他选项卡可放置表格或更多详情（参照列表页面的表格配置）。
列表页跳转与传参
- 回到“设备管理”列表页，选中表格的操作列“详情”按钮，配置事件为“打开页面”。
- 在跳转配置中选择“设备详情”页面，并传入所需参数（例如当前行的设备 ID）以供详情页查询使用。
提示与最佳实践
- 页面变量：使用前请在页面数据中先定义变量名称与类型。
- 数据供给器：建议统一管理接口与字段映射，便于多个页面复用。
- 布局一致性：表格、按钮、卡片等组件风格在不同页面保持一致，提升用户体验。
- 权限与发布：编辑完成后请检查页面权限并进行发布或保存草稿。