概述
实体表(Entity Table)部件显示与所选别名和筛选器匹配的实体列表及其最新值,支持附加全文搜索和分页选项。 可通过部件样式、数据源键和 部件操作进行高度自定义。
配置实体表部件
要开始使用实体表部件,需先创建仪表板并向其添加部件。
创建仪表板
首先创建仪表板以可视化我们的遥测数据。 可使用现有仪表板或为新用例创建新仪表板。本示例中,我们为教程创建了名为“Entity Table”的新仪表板。
向仪表板添加部件
下一步是可视化遥测数据。要向仪表板添加实体表部件,请执行:
- Enter dashboard edit mode by clicking the pencil icon in the lower right corner of the screen.
- 点击屏幕中央的大图标或右下角的加号图标("添加新部件")。从弹出菜单中选择创建新部件。
- 在部件包选择对话框中,选择 Cards。
- 从 Cards 包中选择实体表部件。
- 点击 Add 为部件添加数据源,以指定获取遥测数据的实体。
- 若已添加别名,从下拉菜单选择;否则点击 "Create a new one!"。
- 可按截图下方的链接学习如何添加别名及别名类型。配置别名设置后,点击 Add。
- 从下拉菜单添加要在部件上显示的遥测。
- 完成数据源配置后,点击 Add。
- 拖动部件边缘调整大小,点击屏幕右下角的勾选标记保存所有更改。
学习如何向部件添加别名。
设置
要开始自定义部件,应在仪表板编辑模式下点击部件右上角的铅笔图标进入部件编辑模式。
1. 标题样式
可更改部件标题tooltip和标题样式。标题本身需通过高级标题设置修改。 还可为标题添加图标并调整其颜色、不透明度和大小。下方为配置及对应效果。
- 可修改标题设置、工具提示并自定义标题样式。此外可添加图标并调整其设置。
- 完成所有配置后,点击屏幕右上角的勾选标记应用更改。
- 标题样式已修改,并已添加自定义图标。点击屏幕右下角的勾选标记保存所有更改。
复选框负责显示/隐藏部件标题、部件阴影及启用/禁用全屏模式。
2. 部件样式
可使用CSS属性为部件自定义样式。 该样式将应用于部件的主div元素。 还可更改背景色、文字颜色、内边距和外边距。下方为配置及对应效果。
请注意,样式和背景色仅为示例,并非我们的指导规范。
1
2
3
4
{
"border": "3px solid #2E86C1",
"cursor": "pointer"
}
- 在部件样式字段中输入函数以自定义部件外观。
- 可通过点击对应圆圈并移动滑块手动调整背景和文字颜色。 在 padding 和 margin 行输入首选值。 配置完成后,点击屏幕右上角的勾选标记。
- 部件外观已更改。点击屏幕右下角的勾选标记保存所有更改。
3. 特殊符号和浮点数位数
可为部件实体值添加将显示在旁的特殊符号。还可自定义值浮点数后显示的位数。 下方为配置及对应效果。
- 输入要显示在值旁边的符号。输入小数点后要显示的位数。 点击屏幕右上角的勾选标记应用更改。
- 已添加特殊符号,小数位数已更改。
4. 图例设置
图例设置仅在默认启用此选项的时序部件中有意义。此处了解更多图例设置。
高级设置
实体表部件的高级设置允许调整部件标题、更改部件上对象的可见性、 自定义列、设置分页、 表格数据排序以及更改部件行样式。
要进入高级模式并开始调整上述设置,请执行:
- 点击屏幕右下角的铅笔图标("进入编辑模式")。
- Click the pencil icon (“Edit widget”) in the upper right corner of the Entity Table widget itself.
- 切换到 Advanced 单元格。
1. 实体表标题
ThingsBoard对名称无符号或字符数量限制。但若标题过长,在实体表部件中将无法完整显示,会以省略号截断。不过,应用更改并全屏打开部件后,将能看到完整标题。例如,可使用简短标题如“新部件标题”:
- 在标题栏输入所需标题。点击右上角的橙色勾选标记。
- 部件标题已修改。
2. 复选框设置
- 启用实体搜索
勾选此复选框后,部件右上角的放大镜可用于搜索部件实体。
- 启用选择要显示的列
勾选此复选框后,部件右上角的黑条可用于选择隐藏和显示哪些列。
- 始终显示表头
勾选此复选框后,滚动实体列表时部件表头始终可见。若不勾选,表头将停留在顶部。
- 始终显示操作列
勾选此复选框后,滚动部件遥测数据时行操作单元格始终可见。若不勾选,行操作单元格将停留在行末。
- 显示实体名称列
勾选此复选框后,实体名称列可见。若不勾选,将隐藏。
3. 列设置
3.1. 实体列标题
要更改列标题,请执行:
- 在对应行输入新标题。
- 点击右上角橙色勾选标记应用更改。实体列标题已修改。
3.2. 显示实体标签列
勾选“显示实体标签列”复选框后,可添加标签列并命名。 点击右上角的橙色勾选标记后,将出现带自定义名称的标签列。
3.3. 显示实体类型列
“显示实体类型列”复选框负责在部件上显示实体类型(如“device”)。默认显示实体类型列,取消勾选可隐藏。
4. 分页
默认情况下,部件显示每页可见条数及总页数。显示该信息为可选。 通过勾选/取消“显示分页”复选框可更改。禁用该复选框后,将不显示每页条数和页数信息。 要应用更改,请点击右上角的橙色勾选标记。
请注意:要理解以下设置,需启用“显示分页”复选框以查看每页条数。
默认每页大小为10条。若要更改该数值,请执行:
5. 表格部件中的数据排序
默认情况下,表格部件中的数据按升序排序。 若列中的值非数值(如名称和类型),则按字母顺序规则排序。
若要按遥测数据键类型(temperature、humidity等)排序,可在默认排序顺序行中输入值的名称。 示例中使用temperature。 若需改为降序排序,请执行:
- 如前所述,默认排序为升序。
- Type the “-” (minus) symbol in front of the data key name in the Default sort order line. Click the orange checkmark in the upper right corner to apply the changes
- 遥测数据已按所需降序排列。
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;
保存更改
要使更改生效并保存,需点击仪表板右下角的橙色勾选标记。
即可确认表格部件的更改已正确应用并保存。