快速搭建仪表盘应用

1. 概述

云智易物联网平台支持构建多种形式、多种场景的仪表盘可视化页面。本文以搭建“空气质量监测”应用为示例，介绍如何通过应用的页面设计功能实现仪表盘样式的可视化配置。

2. 详细操作指南

2.1 空气质量监测仪表盘搭建

步骤1：创建页面

操作步骤：

• 选择桌面端页面类型
• 设置页面名称为"空气质量监测"

步骤2：配置仪表盘容器

操作步骤：

1. 添加"仪表盘容器"组件
2. 设置属性→尺寸→高度→填充容器
3. 调整仪表盘卡片至合适位置

图：仪表盘容器基本设置

图：调整卡片布局位置

步骤3：构建左侧卡片布局

图：左侧卡片布局完成效果

3.1 卡片标题区配置

• 填入名称：空气质量监测
• 工具栏：加入标签组件显示空气质量等级

3.2 温湿度数据显示区域

• 第一个容器内添加组件：
  • 图片展示组件
  • 文字组件显示数据
• 右侧文字显示数据更新时间

图：温湿度数据显示区域

3.3 空气质量指数展示

• 使用垂直布局展示空气质量指数
• 加入按钮组件绑定页面事件，用于浮层显示介绍（浮层内容由绑定的页面决定）

图：空气质量指数垂直布局

3.4 进度展示组件

• 使用进度展示组件反映当前空气质量占比范围

图：空气质量进度展示

3.5 提示语区域

• 使用水平布局
• 采用图标+文字组合显示提示信息

图：水平布局的提示语区域

3.6 底部定位容器

• 第四个容器使用绝对定位
• 参考位置设置为左下角

图：绝对定位的底部容器

步骤4：配置底部设备属性

设备属性通过迭代器根据数组数据内的信息显示对应内容。

4.1 构建数据结构

图：构建迭代器所需的数据结构

4.2 调整迭代器布局

• 调整迭代器子容器的布局
• 设置合适的宽度

图：迭代器子容器布局配置

4.3 组件绑定与样式调整

• 在容器中加入相关组件
• 绑定数据源
• 调整组件样式

图：组件数据绑定和样式设置

4.4 选项卡配置

• 设置选项卡tab名称：今日、本周、本月
• 在每个选项卡中加入‘折线图’
• 折线图绑定数据

步骤5：配置地图

操作步骤：

1. 添加"地图"组件
2. 设置地图初始中心经纬度、初始缩放级别
3. 通过数据源进行点位加载（如果没有动态数据来源可以通过‘上下文变量’构建静态数据）
4. 设置点位点击事件（选中点位时，显示‘设备属性’）