所有物联网仪表板都是使用在小部件库中定义的睿珀物联网云平台小部件构建的。每个小部件都提供最终用户功能，例如数据可视化、远程设备控制、警报管理和静态自定义 HTML 内容的显示。

小部件类型

根据提供的功能，每个小部件定义代表一种特定类型的小部件。有五种小部件类型：

  • 最新值
  • 时间序列
  • RPC（控制小部件）
  • 警报小部件
  • 静态小部件

image.png

每个小部件类型都有自己特定的数据源配置和相应的 API 小部件。每个小部件都需要数据源来可视化数据。可用数据源的类型取决于小部件的小部件类型：

  • 目标设备 - 此数据源类型用于 RPC。基本上，您需要为 RPC 小部件指定目标设备；
  • 警报源 - 此数据源类型用于警报小部件。该数据源要求源实体显示相关告警和对应的告警字段；
  • 实体 - 此数据源类型用于时间序列和最新值小部件。基本上，您需要指定目标实体，以及时间序列键，或者属性名称；
  • 实体计数 - 此数据源类型用于最新值小部件。基本上，您需要指定目标实体。
  • 函数 - 此数据源类型用于时间序列和最新值小部件以进行调试。基本上，您可以指定一个 javascript 函数来模拟来自设备的数据以设置可视化；

最新值

最新值小部件类型显示特定实体属性或时间序列数据点的最新值（例如，任何仪表小部件或实体表小部件）。这种类型的小部件使用实体属性或时间序列的值作为数据源。示例中的数字仪表显示当前温度值。
image.png
image.png

时间序列

时间序列小部件类型显示所选时间段的历史值，或特定时间窗口中的最新值（例如，“时间序列折线图”或“时间序列条形图”）。此小部件类型仅使用实体时间序列的值作为数据源。为了指定显示值的时间范围，使用时间窗口设置。可以在仪表板页面或小部件详细信息中指定时间窗口。它可以是实时的 - 某个最近间隔的动态更改时间范围，也可以是历史- 固定的历史时间范围。所有这些设置都是时间序列小部件配置的一部分。在示例中，“Timeseries Line Chart”实时显示设备的温度值。
image.png
image.png

RPC（控制小部件）

Control 小部件允许向设备发送 RPC 命令，它处理和可视化来自设备的回复（例如，“设备开关状态”）。通过将目标设备指定为 RPC 命令的目标端点来配置 RPC 小部件。在示例中，“基本设备开关控制”小部件发送设备开关命令并检测当前设备开关状态。
image.png

Alarm widgets(警报小部件)

Alarm Widget类型在特定时间窗口显示与指定实体相关的警报（例如，“警报表”）。通过指定实体作为警报源以及相应的警报字段来配置警报小部件。作为时间序列小部件，警报小部件具有时间窗口配置以指定显示警报的时间范围。
此外，配置还包含“报警状态”、“报警严重性”和“报警类型”参数。“警报状态”参数指定正在获取的警报的状态。“警报严重性”以秒为单位控制警报获取频率。“报警类型”有助于识别报警的根本原因。例如，“HighTemperature”和“LowHumidity”是两个不同的警报。在示例中，“警报表”小部件实时显示设备的最新警报。
image.png
image.png

静态的

静态小部件类型显示静态可自定义的 HTML 内容（例如，“HTML 卡片”）。静态小部件不使用任何数据源，通常通过指定静态 HTML 内容和可选的 CSS 样式进行配置。静态小部件的一个示例是显示指定 HTML 内容的“HTML 卡片”。
image.png
image.png
用于调整 HTML 卡片样式的 CSS 样式函数示例。

  1. .card {
  2.         font-weight: bold;
  3.         font-size: 32px;
  4.         color: #999;
  5.         width: 100%;
  6.         height: 100%;
  7.         display: flex;
  8.         align-items: center;
  9.         justify-content: center;
  10. }

用于指定卡片内容的 HTML 代码示例。

  1. <div class='card'>Static Widget title</div>

小部件库

小部件根据其用途分为小部件包。有系统级别和租户级别的小部件捆绑包。初始睿珀物联网云平台安装附带一组基本的系统级小部件捆绑包。
系统级捆绑包可由系统管理员管理，可供系统中的任何租户使用。租户级别捆绑包可由租户管理员管理，并且仅供此租户及其客户使用。您始终可以按照本指南实施和添加小部件。
image.png
image.png

Alarm widgets(警报小部件)

警报小部件捆绑包可用于实时和历史模式下特定实体的可视化警报。
image.png

Analogue gauges(模拟仪表)

Analog Gauges 捆绑包可用于可视化温度、湿度、速度和其他整数或浮点值。
image.png

Cards(卡片）

Cards bundle 对于可视化时间序列数据或表格或卡片小部件中的属性很有用。
image.png

Charts(图表)

图表包对于使用时间窗口可视化历史或实时数据很有用。
image.png

Control widgets(控制小部件)

控件小部件捆绑包可用于可视化当前状态并将 RPC 命令发送到目标设备。
image.png

Date(日期小部件)

日期小部件包对于更改仪表板上其他小部件的数据范围很有用。
image.png

Digital gauges(数字仪表)

数字仪表包可用于可视化温度、湿度、速度和其他整数或浮点值。
image.png

Entity admin widgets(实体管理小部件)

实体管理小部件是允许列出和创建/更新/删除设备和资产的复杂小部件的模板。
image.png


GPIO widgets(GPIO 小部件)

GPIO 小部件捆绑包可用于可视化和控制目标设备的 GPIO 状态。
image.png

Input widgets(输入小部件)

输入小部件包对于修改实体的属性很有用。
image.png

Maps(地图小部件)

地图小部件捆绑包对于在实时和历史模式下可视化设备的地理位置和跟踪设备路线很有用。
image.png

添加小部件捆绑

如果系统管理员添加了新的小部件捆绑包，它会自动成为系统捆绑包。这意味着只有他可以删除、编辑和添加小部件类型到包中。租户管理员也可以创建小部件捆绑包。在这种情况下，他们有权修改创建的捆绑包。您始终可以按照本指南实施和添加小部件。
要添加新的小部件捆绑包，您应该：

  • 通过左侧的主菜单导航到小部件捆绑页面。单击屏幕右上角的“+”图标，然后从下拉菜单中选择“创建新的小部件捆绑包”选项。
  • 在打开的对话窗口中，输入部件组名称。单击“添加”以保存应用的更改。
  • 由于小部件捆绑包按字母顺序排列，因此新创建的组件不可能位于第二页。
  • 添加小部件捆绑包后，您可以在其中添加小部件类型。

image.png

image.png
image.png

image.png

小部件捆绑导出/导入

小部件捆绑导出

您可以以 JSON 格式导出小部件包，并将其导入相同或不同的部件组实例。
为了导出小部件包，您应该：

  • 转到小部件库页面，然后单击特定小部件捆绑行上的导出按钮。

image.png

小部件捆绑导入

导入小部件包与导出它非常相似。要导入小部件捆绑包，您应该：

  • 进入Widgets Library页面，点击“Widgets Bundles”页面右上角的“+”按钮。从下拉菜单中选择“导入小部件包”。
  • 小部件包导入窗口应该会弹出，系统会提示您上传 JSON 文件。从您的计算机拖放一个文件，然后单击“导入”以将一个小部件包添加到库中。

image.png
image.png

小部件类型导出/导入

您可以从小部件包中以 JSON 格式导出特定类型的小部件，并将其导入相同或不同的小部件实例中。

小部件类型导出

为了导出小部件类型，您应该：

  • 转到小部件库页面，然后打开所需的小部件包并单击特定小部件类型卡上的导出按钮。

image.png

小部件类型导入

请注意，只有系统管理员才能修改系统（默认）小部件捆绑包。这意味着只有他们可以删除系统小部件包、编辑和删除包内的小部件、添加或导入新小部件到包中。通过在系统管理员级别创建一个新的小部件捆绑包，它将作为一个系统显示在他的租户的帐户中，他们将无法修改它。
不过，租户可以添加自己的小部件捆绑包。在这种情况下，他们拥有管理包内创建的小部件类型的完全权限。
要导入小部件类型，您应该：

  • 进入小部件库页面，打开小部件包，然后单击屏幕右下角的“+”按钮。
  • 单击导入按钮。
  • 导入小部件类型窗口中将出现一个弹出窗口，系统将提示您加载 JSON 文件。从您的计算机拖放一个文件，然后单击“导入”以将小部件类型添加到包中。

image.png

image.png
image.png