产品定价 立即试用
社区版
文档 > 部件 > 实体表部件
入门
指南 安装 架构 API 常见问题
目录

实体表部件

概述

实体表(Entity Table)部件显示与所选别名和筛选器匹配的实体列表及其最新值,支持附加全文搜索和分页选项。 可通过部件样式数据源键部件操作进行高度自定义。

配置实体表部件

要开始使用实体表部件,需先创建仪表板并向其添加部件。

创建仪表板

首先创建仪表板以可视化我们的遥测数据。 可使用现有仪表板或为新用例创建新仪表板。本示例中,我们为教程创建了名为“Entity Table”的新仪表板。

向仪表板添加部件

下一步是可视化遥测数据。要向仪表板添加实体表部件,请执行:

  • 通过点击屏幕右下角的铅笔图标进入仪表板编辑模式。
  • 点击屏幕中间的大加号或屏幕右下角的加号图标("添加新小部件")。从下拉菜单中选择"创建新小部件"。
  • 在部件束选择对话框窗口中,选择"卡片"。
  • 从"卡片"束中选择"实体表"小部件。
  • 单击"添加"以将数据源附加到您的小部件,以指定我们将从中接收遥测数据的实体。
  • 如果您之前添加过别名,请从下拉菜单中选择它。如果没有,请单击"创建一个新的!"。
  • 您可以通过跟随截图部分下面的链接来学习如何添加别名和别名类型。配置别名设置后,单击"添加"。
  • 从下拉菜单中添加遥测数据以显示在小部件上。
  • 当您完成数据源配置后,单击"添加"。
  • 拖动小部件的边缘以调整其大小,并通过单击屏幕右下角的复选标记来保存所有应用的更改。

学习如何向部件添加别名

设置

要开始自定义部件,应在仪表板编辑模式下点击部件右上角的铅笔图标进入部件编辑模式。

1. 标题样式

可更改部件标题tooltip和标题样式。标题本身需通过高级标题设置修改。 还可为标题添加图标并调整其颜色、不透明度和大小。下方为配置及对应效果。

  • 您可以更改"标题"设置、其工具提示并自定义标题样式。此外,您可以添加图标并调整其设置。
  • 设置完所有首选配置后,通过单击屏幕右上角的复选标记来应用更改。
  • 如您所见,标题样式已更改,并且自定义图标已添加到其旁边。要保存所有应用的更改,请单击屏幕右下角的复选标记。

复选框负责显示/隐藏部件标题、部件阴影及启用/禁用全屏模式。

2. 部件样式

可使用CSS属性为部件自定义样式。 该样式将应用于部件的主div元素。 还可更改背景色、文字颜色、内边距和外边距。下方为配置及对应效果。

请注意,样式和背景色仅为示例,并非我们的指导规范。

1
2
3
4
{
  "border": "3px solid #2E86C1",
  "cursor": "pointer"
}
  • 在部件样式字段中,输入函数以自定义部件的外观。
  • 您可以通过单击相应的圆圈并移动滑块来选择所需的颜色来手动调整背景和文本颜色。在填充和边距行中输入首选值。配置所需选项后,单击屏幕右上角的复选标记。
  • 如您所见,小部件的外观已更改。要保存所有应用的更改,请单击屏幕右下角的复选标记。

3. 特殊符号和浮点数位数

可为部件实体值添加将显示在旁的特殊符号。还可自定义值浮点数后显示的位数。 下方为配置及对应效果。

  • 输入希望在值旁边显示的所需符号。输入要在小数点后显示的位数。通过单击屏幕右上角的复选标记来应用更改。
  • 如您所见,已添加特殊符号,位数已更改。

4. 图例设置

图例设置仅在默认启用此选项的时序部件中有意义。此处了解更多图例设置

高级设置

实体表部件的高级设置允许调整部件标题更改部件上对象的可见性自定义列设置分页表格数据排序以及更改部件行样式

要进入高级模式并开始调整上述设置,请执行:

  • 单击屏幕右下角的铅笔图标("进入编辑模式")。
  • 单击"实体表"小部件本身右上角的铅笔图标("编辑小部件")。
  • 移至"高级"单元格。

1. 实体表标题

ThingsBoard对名称无符号或字符数量限制。但若标题过长,在实体表部件中将无法完整显示,会以省略号截断。不过,应用更改并全屏打开部件后,将能看到完整标题。例如,可使用简短标题如“新部件标题”:

  • 在标题栏中输入所需的标题。点击右上角的橙色复选标记。
  • 部件的标题已更改。

2. 复选框设置

  • 启用实体搜索

勾选此复选框后,部件右上角的放大镜可用于搜索部件实体。

  • 启用选择要显示的列

勾选此复选框后,部件右上角的黑条可用于选择隐藏和显示哪些列。

  • 始终显示表头

勾选此复选框后,滚动实体列表时部件表头始终可见。若不勾选,表头将停留在顶部。

  • 始终显示操作列

勾选此复选框后,滚动部件遥测数据时行操作单元格始终可见。若不勾选,行操作单元格将停留在行末。

  • 显示实体名称列

勾选此复选框后,实体名称列可见。若不勾选,将隐藏。

3. 列设置

3.1. 实体列标题

要更改列标题,请执行:

  • 在相应的行中输入新标题。
  • 单击右上角的橙色复选标记以应用更改。实体列标题已更改。

3.2. 显示实体标签列

勾选“显示实体标签列”复选框后,可添加标签列并命名。 点击右上角的橙色勾选标记后,将出现带自定义名称的标签列。

3.3. 显示实体类型列

“显示实体类型列”复选框负责在部件上显示实体类型(如“device”)。默认显示实体类型列,取消勾选可隐藏。

4. 分页

默认情况下,部件显示每页可见条数及总页数。显示该信息为可选。 通过勾选/取消“显示分页”复选框可更改。禁用该复选框后,将不显示每页条数和页数信息。 要应用更改,请点击右上角的橙色勾选标记。

请注意:要理解以下设置,需启用“显示分页”复选框以查看每页条数。

默认每页大小为10条。若要更改该数值,请执行:

5. 表格部件中的数据排序

默认情况下,表格部件中的数据按升序排序。 若列中的值非数值(如名称和类型),则按字母顺序规则排序。

若要按遥测数据键类型(temperature、humidity等)排序,可在默认排序顺序行中输入值的名称。 示例中使用temperature。 若需改为降序排序,请执行:

  • 如前所述,默认排序顺序是升序。
  • 在"默认排序顺序"行中的数据键名称前键入"-"(负号)符号。单击右上角的橙色复选标记以应用更改。
  • 现在,遥测数据按我们需要的降序排序。

6. 行样式函数

自3.2.2版本起,可根据条件更改部件行样式。通过简单示例说明: 假设需要观察哪些设备处于活跃状态、哪些不活跃。为简化任务,应使用行样式函数。

示例及对应效果:

1
2
3
4
5
6
7
result = {background:"white"};
if (entity.active == "false") {
   result.background = '#FF0000';
} else {
   result.background = '#00FF00';
}
return result;

保存更改

要使更改生效并保存,需点击仪表板右下角的橙色勾选标记。

即可确认表格部件的更改已正确应用并保存。