小部件库
所有IoT 仪表板都是使用小部件库中定义的YiCONNECT 小部件构建的。
小部件是在仪表板上显示特定类型的信息或功能的元素。小部件用于显示从连接到 YiCONNECT 平台的设备获取的数据和可视化信息、远程设备控制、警报管理以及显示静态自定义 HTML 内容。
小部件类型
根据所提供的功能，每个小部件定义代表一种特定的小部件类型。有五种小部件类型：
- 最新值；
- 时间序列;
- 控制小部件；
- 报警小部件；
- 静态小部件。
每个小部件类型都有其自己特定的数据源配置来可视化数据。可用数据源的类型取决于小部件类型：
- 警报源 ——这种数据源类型，主要用于警报小部件，需要一个源实体来显示相关警报及其相应字段；
- 警报计数 - 此数据源类型用于最新值小部件。您需要指定目标实体；
- 设备 - 此数据源类型用于时间序列和最新值小部件。基本上，你需要指定目标设备，以及时间序列键，或者属性名称，或者实体字段；
- 实体计数 - 此数据源类型用于最新值小部件。您需要指定目标实体；
- 实体 - 此数据源类型用于时间序列和最新值小部件。基本上，您需要通过指定实体别名、时间序列键或属性名称来选择目标实体；
- 功能 - 此数据源类型在时间序列和最新值小部件中使用以进行调试。基本上，您可以指定一个 JavaScript 函数来模拟来自设备的数据以设置可视化。
最新值
最新值小部件类型旨在展示特定实体属性或时间序列数据点（例如，任何仪表小部件或实体表小部件）的最新值。这种类型的小部件使用实体属性值或时间序列作为数据源。示例中的数字仪表显示当前温度值。
时间序列
时间序列小部件类型显示所选时间段的历史值，或特定时间窗口中的最新值（例如，时间序列折线图或时间序列条形图）。此小部件类型仅使用实体时间序列的值作为数据源。为了指定显示值的时间范围，使用 时间窗口设置。 时间窗口可以在仪表板页面或通过小部件详细信息指定。它可以是 实时 - 某个最新间隔的动态变化的时间范围，也可以是 历史 - 固定的历史时间范围。所有这些设置都是 Timeseries 小部件配置的一部分。示例中，“Timeseries Line Chart”实时显示设备的速度值。
控制小部件
控制小部件允许向设备发送 RPC 命令，它处理并可视化来自设备的回复（例如，Raspberry Pi GPIO 控制）。RPC 小部件是通过将目标设备指定为 RPC 命令的目标端点来配置的。在示例中，“基本 GPIO 控制”小部件发送 GPIO 开关命令并检测当前 GPIO 开关状态。
闹钟小部件
警报小工具类型显示在特定时间窗口内与指定实体相关的警报（例如，警报表）。要配置警报小部件，您可以指定一个实体作为警报源并定义相应的警报字段。与时间序列小部件一样，警报小部件具有时间窗口配置来指定显示警报的时间范围。此外，配置还包括“警报状态”、“警报严重程度”和“警报类型”等参数。“报警状态”参数显示正在获取的报警的状态。“警报严重性”参数显示警报获取的频率（以秒为单位）。“警报类型”参数有助于识别警报的主要来源。例如，“高温”和“低湿度”代表两种不同的警报。在这种情况下，“警报表”小部件实时显示设备的最新警报。
静止的
静态小部件类型显示静态的可定制 HTML 内容（例如 HTML 卡）。静态小部件不使用任何数据源，通常通过指定静态 HTML 内容和（可选）CSS 样式进行配置。静态小部件的一个示例是显示指定 HTML 内容的“HTML 卡”。
用于调整 HTML 卡样式的 CSS 样式函数的示例。
.card {
font-weight: bold;
font-size: 32px;
color: #999;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
用于指定卡片内容的 HTML 代码示例。
<h1>Static widget title</h1>
<div class='card'>Your text here</div>
小部件库（捆绑包）
小部件根据其用途分为小部件包。有些小部件可以同时在多个包中找到。例如，警报计数小组件可以在警报小组件包和计数小组件包中找到。
有系统级和租户级小部件包。初始 YiCONNECT 安装附带一组基本的系统级小部件包。
系统级捆绑包可以由系统管理员管理，并且可供系统中的任何租户使用。租户级捆绑包可由租户管理员管理，并且仅供该租户及其客户使用。您始终可以按照本指南实施和添加您的小部件。
要在所有小部件包中找到您需要的小部件，您可以使用搜索功能。
您还可以在“小部件”选项卡上通过其名称找到所需的小部件。在这里，所有可用的小部件默认按字母顺序列出。
空气质量
该小部件包包含用于可视化空气质量数据的小部件。
警报小部件
警报小部件包对于以实时和历史模式显示特定实体的警报可视化非常有用。
模拟仪表
模拟仪表小部件包对于温度、湿度、速度和其他整数或浮点值的可视化非常有用。
Cards 部件包
Cards 包对于表或卡片小部件中时间序列数据或属性的可视化非常有用。
图表
图表包对于使用时间窗口可视化历史或实时数据非常有用。
控制小部件
控制小部件包对于当前状态的可视化以及向目标设备发送 RPC 命令非常有用。
计数小部件
计数器小部件包可用于根据所选过滤器计算和可视化当前警报和实体的数量。
日期
日期小部件包对于更改仪表板上其他小部件的数据范围非常有用。
数字仪表
数字仪表包对于温度、湿度、速度和其他整数或浮点值的可视化非常有用。
边缘小部件
Edge 小部件包对于概述与指定 YiCONNECT Edge 实例相关的实体非常有用。
实体管理小部件
实体管理小部件是复杂小部件的模板，允许列出和创建/更新/删除设备和资产。
实体小部件
实体管理小部件显示实体列表及其数据、对实体进行计数，并根据实体的关系显示实体的层次结构。
网关小部件
网关小部件包对于管理扩展很有用。
GPIO 小部件
GPIO 小部件包对于可视化和控制目标设备的 GPIO 状态非常有用。
主页小部件
主页小部件包可用于自定义和显示平台 UI 组件、文档或主页上任何其他资源的快速链接，显示有关实体数量和 API 使用情况的统计信息等。
HTML 小部件
HTML 小部件包对于注入自定义 HTML 代码非常有用。或者用于显示可配置的 HTML，并能够从所选数据源注入值。
输入小部件
输入小部件包对于修改实体的属性非常有用。
地图
地图小部件包对于可视化设备的地理位置以及在实时和历史模式下跟踪设备路线非常有用。
导航小部件
导航小部件包对于定义用户的主页仪表板非常有用。
室外环境
户外环境小部件包可以有效地可视化与户外环境相关的数据。
状态指示灯
状态指示器小部件包包括用于可视化电池电量、信号强度和进度条的小部件。
表格小部件
当您需要显示一个或多个实体的实体列表、警报信号列表以及时间序列数据时，表格小部件包非常有用。此外，这个小部件包展示了基于实体别名的持久 RPC 请求。它还可以选择性地进行过滤并支持分页以增强可用性。
使用 Widget 进行操作
添加小部件
当系统管理员添加新的小部件时，它会自动成为系统小部件。这意味着只有管理员才有权修改或删除小部件。租户管理员还可以创建小部件，但他们被授予仅修改他们创建的小部件的权限。您始终可以按照本指南实施和添加您的小部件。
要添加新的小部件，您应该：
- 使用左侧的主菜单导航到“小部件库”页面。单击屏幕右上角的“+”图标，然后从下拉菜单中选择“创建新小部件”选项；
- 在弹出窗口中选择小部件类型；
- 在出现的对话框窗口中，输入新widget的名称，输入widget JavaScript代码，然后单击“保存”即可完成widget创建；
- 新的小部件已创建。
导出小部件
您可以从小部件包中以 JSON 格式导出特定类型的小部件，并将其导入到相同或不同的 YiCONNECT 实例中。
为了导出小部件类型，您应该转到“小部件库”页面，导航到“小部件”选项卡，然后单击特定小部件卡上的导出按钮。小部件配置文件将以 JSON 格式保存在您的计算机上。
导入小部件
请注意，只有系统管理员可以修改系统（默认）小部件。这包括在捆绑包中编辑、删除、添加或导入小部件的能力。当系统管理员创建新的小部件包时，它会被设置为租户的系统级项目，以防止他们对其进行修改。不过，租户可以添加自己的小部件。在这种情况下，他们拥有管理捆绑包内创建的小部件类型的完全权限。
要导入小部件，您应该：
- 单击“小部件”页面右上角的“+”按钮。从下拉菜单中选择“导入小部件”；
- 在弹出窗口中，系统将提示您上传 JSON 文件。从计算机中拖放文件，然后单击“导入”将小部件添加到小部件包中；
- 小部件已导入。
删除小部件
系统管理员或租户管理员可以使用以下方式之一删除小部件类型：
第一种方式：
- 单击要删除的小部件行中的“垃圾桶”图标；
- 在对话框中确认删除小部件。
第二种方式：
- 单击小部件行中的“铅笔”图标可打开小部件详细信息；
- 点击“删除小部件”按钮；
- 在对话框中确认删除小部件。
使用 Widget Bundle 进行操作
添加小部件包
当系统管理员添加新的小部件包时，它会自动成为系统小部件包。这意味着只有他们可以删除、编辑小部件以及将小部件添加到捆绑包中。租户管理员也可以创建小部件包。在这种情况下，他们有权修改已创建的捆绑包。您始终可以按照本指南实施和添加您的小部件。
要添加新的小部件包，您应该：
- 使用左侧的主菜单导航到“小部件捆绑包”页面。单击屏幕右上角的“+”图标，然后从下拉菜单中选择“创建新的小部件包”选项；
- 在打开的对话框窗口中，输入新包的名称。添加图像和描述是可选的。点击“添加”；
- 创建小部件包后，它将自动打开。现在，您可以在那里添加小部件。要添加您自己的现有小部件，请单击窗口中央的“+ 添加现有小部件”按钮。要创建（或导入）新的小部件，请单击窗口右上角的加号图标。现在，单击窗口中央的“+添加现有小部件”按钮；
- 单击“小部件”行，然后从下拉菜单中选择您的小部件；
- 点击“保存”完成将小部件添加到您的小部件包中；
- 由于小部件包是按字母顺序排列的，因此新创建的小部件包可能位于不同的页面上。
导出小部件包
您可以以 JSON 格式导出小部件包，并将其导入到相同或不同的 YiCONNECT 实例中。
为了导出小部件包，您应该：
- 单击特定小部件捆绑行上的导出按钮；
- 在弹出窗口中，可选择选中“在导出的数据中包含捆绑小部件类型”，然后单击“导出”。小部件捆绑配置文件将以 JSON 格式保存在您的计算机上。
导入小部件包
要导入小部件包，您应该：
- 单击“Widgets Bundles”页面右上角的“+”按钮。从下拉菜单中选择“导入小部件包”；
- 在弹出窗口中，系统将提示您上传 JSON 文件。从计算机中拖放文件，然后单击“导入”将小部件包添加到库中；
- 小部件包已导入
删除小部件包
系统管理员或租户管理员可以使用以下方式之一删除小部件包：
第一种方式：
- 单击要删除的小部件包名称旁边的“垃圾桶”图标；
- 在对话框中确认删除小部件包。
第二种方式：
- 单击小部件捆绑行中的“铅笔”图标可打开小部件捆绑详细信息；
- 单击“删除小部件包”按钮；
- 在对话框中确认删除小部件包。