技术交流

学习资料

立即试用 商务报价
社区版
社区版 专业版 云服务 Edge Edge PE 网关 授权服务 Trendz分析 Mobile 应用程序 Mobile PE应用程序
文档 > 仪表板 > 概述
入门
指南 安装 架构 API 常见问题

本页目录

仪表板

必备条件

ThingsBoard设备和仪表板必须按照入门指南进行熟悉才能更快地学习和理解本文档。

介绍

ThingsBoard 提供了创建和管理仪表板的能力,每个仪表板都可以包含大量部件并显示来自多个实体的数据:设备、资产等仪表板可以分配给客户。

添加

添加新的仪表板步骤:

  1. 打开仪表板;
  2. 单点右上角”+”号;

  3. 打开对话框输入仪表板标题。
公开

公开仪表板通过连接访问:

  1. 打开仪表板;
  2. 单击“共享”图标;

  3. 对话框中单击“是”

  4. 打开详细信息;
  5. 复制链接;

现在可以使用此链接共享仪表板请注意记得公开相关设备、资产和实体视图以访问其数据。

概述

在开始使用仪表板之前请先熟悉其它界面并了解哪些功能和具体操作。

标题

仪表板标题显示在界面面包屑中可以通过名称导航到具体界面并可以在仪表板的设置中修改标题名称,在编辑模式下仪表板标题显示在仪表板的左上角。

编辑

单击屏幕右下角的铅笔按钮进入仪表板编辑模式可以在仪表板工具栏中添加新的部件和访问控制,还可以使用应用更改按钮保存仪表板或撤销更改按钮取消所有未保存的更改。

工具栏

仪表板工具栏允许 使用工具栏中的相应图标管理状态布局设置别名过滤器和配置时间窗口,其中一些图标(布局、设置)仅在编辑模式下可见,其他图标在查看和编辑模式下均可见可以通过工具栏或设置配置为默认最小化。

别名

可以将别名视为对一个或多个设备的引用进行实体数据展示,引用可以是静态的或动态的。

静态别名是单个实体别名在对话框中配置一次所有用户有权访问此设备,他们就会看到相同的数据。

动态别名是设备类型别名显示特定类型的所有设备数据(例如“温度计”),此别名是动态的,因为设备列表取决于使用仪表板的用户,如果以租户管理员身份登录,则此别名将在所有温度计设备数据。如果以客户用户身份登录,则此别名将解析为该客户分配或者拥有的温度计设备数据。

请参阅实体别名文档以获取更多信息。

过滤器

实体过滤器允许你为实体别名解析的实体列表指定一个过滤器。

让我们看一个例子:
假设有数一千个温度计设备型号用属性存储并且显示指定型号和指定电池电量的温度计,电池电量存储为时间序列数据然后定义一个过滤器来检查型号是否为DHT22并且电池电量是否低于20%。

注意:添加过滤器时可以通过移动过滤器名称对面的滑块来为用户配置编辑它的能力。

过滤器只能用于属性或时间序列键的“最新”数据不能“过滤”历史时间序列数据。

可以使用复杂的过滤器将不同的逻辑表达式组合在一起例如:(A > 0 and A < 20) or (A > 50 and A < 100);还可以使用使用’and’关系组合不同键的两个表达式。例如:(A > 0 and A < 20) and (B > 50 and B < 100)”。
目前还不能使用’or’关系来组合不同的键例如:(A > 0 and A < 20) or (B > 50 and B < 100)。

通过此视频查看更多示例:

部件

类型

所有仪表板都是使用部件库中的部件进行构建从而形成一个最终功能界面提供给用户进行使用,例如:可视化、远程控制、警报和静态HTML内容。
有5种类型部件:

  • 时序值部件:显示特定时间的数据可以是实时的(例如:过去24小时)或历史的(2020年12月)而部件只能显示时序数据而不是属性;
  • 最新值部件:显示指定属性时序数据例如:设备型号或最新的温度数据;
  • RPC控制部件:通过为目标设备指定RPC命令向设备下发控制指令例如:保温设备所设置的温度;
  • 警报部件:显示与遥测,属性相关的告警信息;
  • 静态部件:显示静态可自定义的 HTML 内容不使用任何数据源。

可以在此处了解到有关部件类型的更多信息。

添加

部件添加到仪表板步骤:

  1. 进入编辑模式;
  2. 单击“+”图标打开“部件选择”对话框;
  3. 选择部件包;
  4. 选择部件然后打开“添加部件”对话框。

设置

部件由不同类型、一个或多个数据源、基本设置和高级设置组成,“添加小部件”对话框包含四个用于定义小部件的选项卡。
注意:只有数据源配置是必须设置项所有其他配置选项卡可以采用默认值。

1. 数据设置

部件数据设置用于添加一个或多个数据源,数据源是数据源类型实体别名过滤器和数据键列表(实体时间序列)的组合,基本上数据源确定应该使用哪些实体(别名和过滤器)部件以及为这些实体获取哪些数据键。

假如获取系统中所有型号为DHT22温度传感器设置并显示电池电量低于20%的温度和湿度值,可以通过对应的别名和过滤器进行数据筛;温度和湿度是两个时序列数据键而数据源的数据键列表与部件类型相关:(参见别名过滤器文档)

在上面的例子中’temperature‘和’humidity‘是两个时序数据key数据源的数数据键列表了决于部件类型

  • 时间序列部件允许在数据源和时间窗口中选择数据键;
  • 最新值部件使用时间序列、属性和实体字段;
  • 静态部件不需要任何数据源
  • 警报部件使用所有数据键:时间序列、属性、实体和警报字段此外你还可以配置时间窗口警报过滤

如果系统中没有所需要的时间序列或属性依然可以在数据源中添加数据键,一旦设备发送数据到平台界面上就可以显示对应数据。

还可以选择要在值旁边显示的符号以及浮点数后的位数如果想对所有轴应用相同的设置则可以通过此处进行配置;例如:如果要显示多个设备的温度读数可以添加“°C”或“°F”符号但是要同时显示温度和湿度则必须使用数据键设置分别配置这些数据键。

还可以指定在部件没有传入数据时将显示的替代消息当数据到达时消息将消失并显示传入数据。

2. 数据源类型
  • 实体数据源

实体数据源从指定的实体别名中获取数据通过一个基本示例来熟悉此功能在部件上显示所有现有设备。

打开仪表板并添加实体别名:

  1. 进入编辑模式
  2. 添加加名
  3. 输入别名
  4. 单击保存

添加别名后通过一个部件进行数据展示:

  1. 单击“添加部件”
  2. 选择Cards部件

现在添加数据源:

  1. 选择实体类型
  2. 自定义数据源单击添加

通过实体数据源添加了显示所有的设备部件


  • 实体计数数据源

ThingsBoard 3.2.2及以上版本添加了实体计数数据源允许在部件上显示实体数量,从而确定设备、资产等数量。

使用一个基本示例来了此功能在部件上显示现有设备的总数。

打开仪表板并添加实体别名:

  1. 进入编辑模式
  2. 添加加名
  3. 输入别名
  4. 单击保存

添加别名后通过一个部件进行数据展示:

  1. 单击“添加部件”
  2. 选择Cards部件

现在添加数据源:

  1. 选择实体计数
  2. 自定义数据源单击添加


添加了设备计算部件在默认情况下部件本身会有特殊符号 (C°)所以进入部件编辑模式将其删除。

在设置选项卡中找到特殊符号行并删除或将其替换为所需的特殊符号此外还可以指定浮点数后的位数,修改后不要忘记通过单击对话框右上角的橙色复选标记进行保存。

现在有一个显示现有设备数量的部件。

  • 函数数据源

如果没有任何数据要测试部件可视化时,使用函数数据源。

首先要显示数据需要添加一个部件:

  1. 单击“添加部件”
  2. 选择Cards部件

现在添加数据源

  1. 选择函数
  2. 自定义数据源单击添加

通过带有函数的数据源部件可以了解部件展示数据的最终效果。

3. 数据键

数据键定义在部件中使用的时序数据、属性或实体字段,数据键定义由类型(时列数据、属性、实体字段)和实际键组成;属性键列表是设备的或其它实体的客户端属性、服务端属性和共享属性;时序键列表是设备上传的时序数据或通过规则引擎、REST API保存的数据。

实体字段列表取决于实体类型:

  • 设备、资产和实体视图具有:创建时间、实体类型、名称、类型、标签和附加信息;
  • 用户具有:创建时间、名字、姓氏、邮箱和附加信息;
  • 客户具有:创建时间、实体类型、邮箱、标题、国家、州、城市、邮编、电话和附加信息。
3.1. 数据设置

在基本设置中可以对名称、颜色、标签、特殊符号,小数位数进行配置,在指定小数位数后可以启用/禁用使用数据处理函数。

让我们看一下基本数据键设置例如Cards包中的Entities表:

  • 键: 可以将数据键和显示的名称进行更改后将显示数据键对应的数据, 注意: 共有三种类型的键分别是属性、时序数据、实体字段和警报字段(仅适用于警报部件)。如果要正确显示数据,把键名更改为相同类型的键名即可。如果您在系统中没有所需的时序数据或属性键,仍然可以向数据源添加键,一旦设备将数据发送数据部件就会自动显示数据。
  • 标签. 在部件中数据列的名称是标签名称可以根据需要更改标签名称后进行保存。
  • 颜色. 每个键可以分配了不同的颜色同时在某些部件(例如,图表)中显示的线条的颜色可以进行修改。
  • 符号. 可以指定将在值显示的特殊符号。
  • 小数 指定小数位数显示的所需位数。

聚合

ThingsBoard3.4.2及以上版本支持数据键聚合最新值部件默认没有启用聚合因为没有时间窗口,如果为最新值启用聚合则会出时间窗口控件可以为每一个遥测分别设置聚合同时不需要保存在数据库中,时间配置仅限于间隔(当前/当天/当月)和历史时间,由于性能原因不支持最后30分钟或最后24小时针对这种聚合建议将遥测进行保存具体文档请参见此处信息。

聚合选项:

  • MinMax:
    用于计算指定时间的最小值或最大值,例如:电涌、空气污染、设备能耗等。
  • 平均值:
    用于计算指定时间的平均值(汇总然后除以遥测数量),例如:能耗、噪音、风扇速度、信息质量等。
  • 求和:
    用于计算指定时间的求和,例如:里程(km)、用水量等。
  • 计数:
    用于计算指定时间的消息数量用于设置和优化设备的性能或评估传感器的灵敏度等。

增量计算:

计算当前和相对时间间隔的聚合值之间的增量。

比较时期 - 根据选择的时间和选项进行参数换算。

  • 历史时间间隔 (默认) - 在计算时同时考虑时间和间隔(当天或当前时间等)。
    示例: 历史 - 当月截止 假设是1.09.22至25.09.22那么之前的时间是1.08.22至25.08.22。
  • 一天前 - 当前时间间隔的开始和结束时间24时间以内;
    示例:当前时间的总量和前一天的增量。
  • 一周前 - 当前时间间隔的开始和结时间168小时以内一周前的间隔时间;
    示例:当前时间总量和一周前的增量。
  • 一月前 -当前时间间隔的开始和结时间减去1天的间隔时间, 假如二月(28天)则是一月前时间减去28天;
    示例:当前时间的总量和一月前的增量
  • 一年前 - 当前时间间隔的开始和结时间减去365天的间隔时间,
    假设比较的是上月和前年上月的聚合。
  • 自定义间隔 - 用于设置单独的间隔最大允许值为int类型;示例:43200000=12小时。

增量计算结果:

此选项指定结果显示方式:

  • 上个值 - 比较间隔的聚合值。

  • 绝对值 - 比较间隔的差值。

  • 百分比 - 比较间隔的百分比:(IntervalValue - prevIntervalValue)/prevIntervalValue*100

使用数据后处理功能 数据后处理功能可以根据具体需求修改数据输出。

3.2. 高级设置

高级数据键配置负责部件上特定数据键列的可见性、样式和外观;实体部件、警报部件和实体管理部件捆绑包具有相同的高级数据配置,图表部件捆绑包具有自己独特的高级数据键配置,其他部件捆绑包只有基本的数据键配置。

此处了解更多关于高级设置的信息。

4.部件时间窗口

部件时间窗口定义了一个时间间隔和聚合函数用于获取时间序列或警报数据默认情况下每个部件都使用仪表板工具栏中的时间窗口;你可以使用“使用仪表板时间窗口”复选框覆盖默认时间窗口或使用“显示时间窗口”复选框向用户隐藏部件的时间窗口选择。

此处了解更多关于时间窗口的信息。

5. 警报过滤

警报部件还允许根据状态严重性类型过滤警报同时可以选择警报状态和严重性的组合同时还可以定义特定的警报类型以及启用传播警报的搜索。

基础设置

假设已添加“Timeseries Line Chart”部件使用部件数据配置步骤设置并显示温度值(发送数据可以看见一个实线的折线图表)。

下面是部件的基础设置:

1. 标题

输入自定义部件标题、提示和标题样式或设置图标并控制图标的颜色和大小。

标题样式:

1
2
3
4
{
  "fontSize": "15px",
  "fontWeight": 600
}
2. 样式

使用CSS属性自定义部件样式应用于部件的div元素,还可以使用“投影”复选框禁用部件阴影,并使用“启用全屏”复选框禁用全屏所有设置都是默认启用,与此同时依然可以更改背景颜色、文本颜色、填充和边距。

注意:样式和背景颜色只是示例不是指南内容部分。

部件样式:

1
2
3
4
{
  "border": "3px solid #2E86C1",
  "cursor": "pointer"
}
3. 图例

图表部件默认启用“显示图例”选项图例用于显示最小值、最大值、平均值、总数其他部件已禁用此选项,启用图例后可以选择图例的方向和位置并包含哪些数据(最小值、最大值、平均值、总数)以及是否对数据键进行排序。 图例显示每个数据键标签在同一个部件中拥有来自多个设备的数据时,很难在图例或提示中找到哪个设备对应于哪个记录,为了使图例和提示清晰应该在数据键配置中使用“${entityName}”或“${entityLabel}”进行区分。

配置效果:

4. 移动界面

移动模式设置包含两个选项:

  • 排序:指定在移动模式下以整数值的顺序优先级显示部件(移动模式下部件以垂直方式显示)。
  • 高度:指定在移动模式下将部件的高度设置在70像素至700像素之间并忽略其原始高度,取值范围是1至10的整数值。

高级设置

高级部件设置特定于部件实现这些设置可以微调部件,例如:“Timeseries - Flot”部件允许配置线型、宽度、启用与前一个时间间隔的比较以及使用图例中的实体属性。

可以在相应的小部件文档中了解有关特定高级设置的更多信息:

即将推出…

部件动作

可以快速轻松地配置状态并转换、路由到其他仪表板甚至更新所在的仪表板,根据部件操作源会有所不同但是选择相同的操作类型部件都是相同的,如果完全理解如何使用Actions必须在面板添加一个状态(State)在部件操作文档中有详细的说明。

请参阅部件动作文档以获取更多信息。

时间窗口

仪表板时间窗口用于获取时序数据或警报数据的时间间隔和聚合函数,所有时序数据和警报部件都可以使用时间窗口除非被指定配置覆盖。
时间部件使用与时间窗口匹配的时间戳获取遥测数据。
警报部件使用与时间窗口匹配的创建时间来获取警报。

时间窗口有两种模式:

  • 实时模式情况下部件从服务器接收最新数据并自动与当前时间戳进行数据匹配。
  • 历史模式情况下部件初始化加载数据。


数据聚合功能仅适用时序数据并支持5种函数:Min、Max、Average、Sum和Count而None是一个特殊的函数用于禁用聚合,如果所有时序数据不在UI进行聚合而是通过数据库聚会时建议对聚合进行禁用,使用聚合函数的优势在于节约网络资源和浏览器计算能力,在有很多原始数据的情况下建议尽可能使用聚合函数。

ThingsBoard3.2.2及以上版本支持最近多少分钟、小时、天以外还可以自定义时间范围(当天、昨天、上月等)而间隔时间是指24小时(今天晚上12时至明天晚上12时),而当前时间范围是指晚上12时至当前时间。
注意当天前间隔表示24小时(晚上12点至第二天晚上12点)而当天前到目前为止表示从晚上12点到更新时间窗口的时间所有其他间隔以相同的方式区分。

如果时间太长可以按住鼠标右键将水平轴放大可以显示更加详细的数据否则使用鼠标左键双击部件恢复原始数据显示方式。

ThingsBoard3.2.2及以上版本支持时区设置仪表板默认使用浏览器提供的时区,但是可以通过时区配置对仪表板的时区进行手动设置。

设置

仪表板设置允许调整和更改仪表板的整体外观并自定义提升用户体验,租户管理员对状态控制、保持工具栏、标题,工具栏,颜色,容器,间距或移动端进行配置从而实现界面明细布局控制,首先应该单击页面右下角的“铅笔”图标进入编辑模式。

进入编辑模式后单击窗口顶部的“齿轮”图标将打开仪表板设置。

状态控制

默认使用“实体”作为仪表板的状态如果要使用所有功能建议使用这种状态。

保持工具栏打开

工具栏允许对当前仪表板的时间窗口、导出仪表板并仪表板全屏进行控制,通过复选框保持工具栏按钮启用在仪表板页面上显示工具栏。

如果禁用复选框标工具栏将关闭然后在屏幕右上角会显示三点图标通过单击它将打开隐藏的工具栏。

标题

通过标题设置可以轻松配置显示、颜色、透明度选项控制标题样式。

仪表板工具栏

通过仪表板选项、实体选项、过滤器、时间窗口和导出选项控制仪表板工具栏面板上相应选项是否可见。

如果需要限制客户修改

过滤器选项仅在创建时显示在工具栏上,如果已经创建过滤器还想限制修改可以将禁用工具栏面板取消。

颜色

通过颜色可以配置仪表板中的文本颜色打开颜色窗口可以设置具体的颜色和透明度,单击左侧彩色圆圈可以打一个调整颜色的小窗口通过移动滑块可以调整文本的颜色和透明度。

容器

  • 列数

在仪表板编辑时可以修改网格的水平列数,这样可以实现在放一些较小的部件是很有用,默认列数是24,最小列数据是10,最大列数据是1000。

  • 边距

每一个部件的间距默认为10可以通过设置对间距进自定义修改但是最大间距不能超过50。

  • 自适应高度

默认自动填充布局高度复选框未选中这样可以更自由调整小部件的大小,如果选中仪表板上的所有部件将垂直填充到屏幕空间中。

背景

背景颜色

背景颜色选项允许在仪表板自定义背景颜色通过单击彩色圆圈然后使用滑块选择所需的颜色和透明度“保存”并应用更改可以看到自定义的背景了。

背景图片

背景图片选项允许自定义仪表板背景图片通过将图片拖放并上传或者从计算机上的文件夹中上传图片,然后可以在左侧的预览窗口中进行查看如果需要更精确地调整图像的位置请单击下拉菜单并选择图片填充方式。

移动布局设置

默认自动填充布局高度复选框未选中以便可以在移动设备上自由调整小部件的大小,如果选中此选项仪表板上的所有部件将垂直填充到屏幕空间中。
行高定义部件在移动设备上的高度默认高度设置为70像素,但是可以将其设置得更小或更大,移动端行高最小为5px最大为 200px。

布局

布局定义了部件在仪表板上的排列方式要设置布局通过单击屏幕右下角的“铅笔”图标进入编辑模式进行修改,进入编辑模式单击仪表板窗口左上角的三个矩形小按钮“管理布局”打开布局控制的小窗口。

Main布局是你的仪表板管理的布局单名Main下方的主形按钮打开窗口并设置仪表板的容器背景

如果勾选”Right”复选框将仪表板分成两个独立的部分并且每个部件都能够配置自己的设置和界面。

这个只是它的样式以完全不同的方式设置这两种布局在屏幕可以看到设置之间的差异(这只是一个示例,绝对不是建议)调整设置后单击“布局”窗口中的“保存”按钮以查看更改。

状态

状态是一种类似于绘图软件中图层或者分组的形式用于实现仪表板层次划分,系统默认使用root状态定义了仪表板的入口状态如果要正确使用状态需要指定给特定的部件这样可以实现状态间的切换,可以在左上角有两个层的方块按钮上单击打开仪表板状态窗口进行配置。

单击窗口中的“+”按钮创建一个状态并输入名称同时会自动生成根据名称生成一个状态ID但是可以进行修改。

动作是一种用于为仪表板中的部件添加交互能力和事件的实现方式,进入编辑模式选择需要添加动作的部件导航到操作单元格中单击“+”按钮添加一个操作。

  • 动作源:为实现目标需要执行的动作;
  • 名称:动作的标题;
  • 图标:动作的图标;
  • 类型:动作的执行目标分类。

下例子中类型应该是“导航到新的仪表板状态”选择此选项后将出现“目标仪表板状态”必须在其中选择一个新创建的状态。完成新状态的配置后单击“保存”按钮新状态出现在操作列表中单击窗口右上角的橙色刻度线以应用更改。

由于选择了“On row click”动作需要点击部件的行为来使动作生效单击后会立即转移到选择的状态。

使用${entityName}作为状态的名称因此在动作期间将被转换到与参与动作的实体相同的状态。

导入

打开仪表板列表页面单击右上角“+”按钮后在弹出窗中选择需要导入的JSON文件完成仪表板导入。

导出

ThingsBoard社区版支持仪表板导出部件导出为JSON格式的配置文件可以使用此文件将仪表板或部件配置到另一个实例。

仪表板

在“仪表板”中找到要从列表中导出的仪表板单击“导出仪表板”按钮会将控制面板上所有设置的JSON格式的配置文件将保存在电脑中。

打开仪表板并单击屏幕右上角的“导出仪表板”按钮可以直接导出。

部件

打开部件成在的仪表板然后单击下角的“铝笔”按钮进入编辑模式在所需的部件上单击导出部件”按钮将包含部件的所有设置的JSON格式文件并保存在电脑中。

专业版导出

ThingsBoard专业版中仪表板可以导出多种格式:PDF、PNG和JPG如果通过邮件或打印时这个则十分有用。