跳转至

实体表小部件

概述

实体表小部件显示最新值以及与所选别名和过滤器相匹配的实体列表,并具有附加全文搜索和分页选项的功能。使用小部件样式、数据源键和 小部件操作进行高度可定制。

设置实体表小部件

要开始使用实体表小部件,您首先需要创建一个仪表板并向其中添加一个小部件。

创建仪表板

因此,让我们创建一个仪表板来可视化我们的遥测数据。 您可以使用现有仪表板或为新用例创建新仪表板。在我们的示例中,出于教程的目的,我们创建了一个名为“实体表”的新仪表板。

将小部件添加到仪表板

下一步是可视化遥测。要将实体表小部件添加到仪表板,您应该:

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

单击屏幕右下角的铅笔图标进入仪表板编辑模式。

单击屏幕中间的大标志或屏幕右下角的加号图标(“添加新小部件”)。 从下拉菜单中,选择创建新小部件。

在小部件捆绑包选择对话框窗口中,选择“卡片”。

从卡片包中,选择实体表小部件。

单击“添加”将数据源附加到您的小部件,以指定我们将从中接收遥测数据的实体。

如果您之前添加过别名,请从下拉菜单中选择它。 如果没有,请单击“创建一个新的!”。

您可以通过屏幕截图部分下方的链接了解如何添加别名和别名类型。 配置别名设置后,单击“添加”。

从下拉菜单中添加遥测数据以显示在小部件上。

完成数据源配置后,单击“添加”。

拖动小部件的边缘以调整其大小,并通过单击屏幕右下角的复选标记保存所有应用的更改。

了解如何向您的小部件添加别名

设置

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

1. 标题样式

您可以更改小部件标题工具提示和标题样式。您应该通过高级标题设置更改标题本身。此外,您还可以向标题添加图标并调整其颜色、不透明度和大小。请参阅下面的配置和相应的结果。

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

您可以更改标题设置、其工具提示并自定义标题样式。 此外,您可以添加图标并调整其设置。

设置所有首选配置后,单击屏幕右上角的复选标记应用更改。

可以看到,标题样式发生了变化,并且旁边添加了自定义图标。 要保存所有应用的更改,请单击屏幕右下角的复选标记。

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

2. Widget样式

您可以使用 CSS 属性自定义小部件的个人风格。此样式将应用于小部件的主 div 元素。您还可以更改背景颜色、文本颜色、填充和边距。请参阅下面的配置和相应的结果。

请注意,样式和背景颜色只是一个示例,绝对不是我们指南的一部分。

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

在小部件样式字段中,输入自定义小部件外观的功能。

您可以通过单击相应的圆圈并移动滑块来选择所需的颜色来手动调整背景和文本颜色。 在填充线和边距线中输入首选值。 配置所需选项后,单击屏幕右上角的复选标记。

如您所见,小部件的外观已更改。 要保存所有应用的更改,请单击屏幕右下角的复选标记。

3、特殊符号及浮点后位数

您可以添加一个特殊符号,该符号将显示在小部件的实体值旁边。此外,您还可以自定义值的浮点数后显示的位数。请参阅下面的配置和相应的结果。

  • 输入要在值旁边显示的所需符号。输入浮点数后要显示的位数。单击屏幕右上角的复选标记应用更改。
  • 正如您所看到的,特殊符号已被添加,并且位数已更改。

输入要在值旁边显示的所需符号。 输入浮点数后要显示的位数。 单击屏幕右上角的复选标记应用更改。

正如您所看到的,特殊符号已被添加,并且位数已更改。

4.图例设置

图例设置仅在默认启用此选项的时间序列小部件中配置才有意义。

高级设置

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

要进入高级模式并开始调整上述设置,您应该:

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

单击屏幕右下角的铅笔图标(“进入编辑模式”)。

单击实体表小部件本身右上角的铅笔图标(“编辑小部件”)。

移至高级单元格。

1.实体表标题

YiCONNECT 没有名称限制,无论是符号还是字符数。然而,如果标题太长,它不会完全显示在实体表小部件中,而是以三个点结束。但是,应用更改并以全屏模式打开小部件后,您将能够看到小部件的完整名称。例如,让我们使用一些简单的标题,例如“新的小部件标题”:

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

在标题栏中输入所需的标题。 单击右上角的橙色复选标记。

小部件的标题已更改。

2. 复选框设置

  • 启用实体搜索

如果选中该复选框,则小部件右上角的放大镜允许您搜索小部件实体。

  • 启用选择列显示

如果选中该复选框,则小部件右上角的黑条允许您选择要隐藏和显示的列。

  • 始终显示标题

如果选中该复选框,则当我们滚动实体列表时,小部件标题始终可见。如果未选中该框,小部件标题将保留在顶部。

  • 始终显示操作列

如果选中该复选框,则当我们滚动小部件的遥测数据时,行操作单元始终可见。未选中时,行操作单元格保留在行的末尾。

  • 显示实体名称列

如果选中该复选框,则实体名称列可见。如果未选中,它将被隐藏。

3. 栏目设置

3.1. 实体列标题

要更改列的标题,您应该:

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

在相应行中输入新标题。

单击右上角的橙色复选标记以应用更改。 实体列标题已更改。

3.2. 显示实体标签列

如果选中“显示实体标签列”复选框,则可以添加标签列并命名。单击右上角的橙色复选标记后,带有自定义名称的标签列将出现在小部件中。

3.3. 显示实体类型列

“显示实体类型列”复选框负责显示小部件上实体的类型(例如“设备”)。默认情况下,会显示实体类型列,但您可以通过取消选中该框来隐藏它。

4. 分页

默认情况下,小部件显示每页有多少个可见项目以及一般有多少页。显示此信息是可选的。它通过选中/取消选中“显示分页”复选框来更改。如果禁用该复选框,则不会显示有关每页项目和页数的信息。要应用更改,请单击右上角的橙色复选标记。

请注意: 要了解接下来的设置,我们需要启用“显示分页”复选框以查看每页的项目数。

默认情况下,页面大小设置为每页 10 个项目。如果您需要更改此号码,您应该:

手动输入数字或使用行尾的箭头。

单击右上角的橙色复选标记以应用更改。 该页面现在将具有所需数量的项目,如表格小部件中所示。

5. 对表格小部件中的数据进行排序

默认情况下,表格小部件中的数据按升序排序。如果列中的值不是数字(例如名称和类型),则将根据字母顺序规则进行排序。

例如,如果您想按遥测数据键类型(温度、湿度等)对数据进行排序,则可以通过在默认排序顺序行中输入值的名称来完成此操作。在示例中,使用了温度。如果您需要降序排序,您应该:

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

如前所述,默认排序顺序是升序。

在默认排序顺序行中的数据键名称前面键入“-”(减号)符号。 单击右上角的橙色复选标记以应用更改

现在,遥测数据按我们需要的降序排序。

6.行式功能

从版本 3.2.2 开始,出现了根据条件更改小部件行样式的机会。让我们看看它是如何在简单的例子中工作的: 假设,我们需要观察哪个设备是活动的,哪个不是。为了使我们的任务更容易,我们应该使用 Row 样式函数。

它的一个例子和相应的结果:

result = {background:"white"};
if (entity.active == "false") {
   result.background = '#FF0000';
} else {
   result.background = '#00FF00';
}
return result;

保存更改

要应用和保存更改,您必须单击仪表板右下角的橙色复选标记。

然后您可以确保对表格小部件的更改已正确应用并保存。