概述

先决条件

在继续阅读本指南之前，建议您按照入门指南熟悉 YiCONNECT 设备和仪表板。这将增强您的学习体验和对此处介绍的概念的理解。

介绍

YiCONNECT 提供了一项强大的功能——创建和自定义交互式可视化效果（也称为仪表板）的能力。这些仪表板是有效监控和管理数据和设备的工具。借助 YiCONNECT 仪表板，用户可以根据自己的特定需求调整界面，从而比以往更轻松地检查其 IoT 设备和数据。出色之处在于每个仪表板都可以填充大量小部件，从而提供灵活性和定制性。这些仪表板不限于单个数据源；它们可以显示来自各种实体的数据，包括设备、资产等。此外，您可以将仪表板分配给特定客户，确保合适的个人或团队能够访问他们所需的数据。

YiCONNECT 中的仪表板为用户提供以下功能：

• 数据可视化 ：用户可以创建各种小部件，例如图表、图形、表格等，以可视化从连接设备获得的数据。这使得操作员和分析师能够轻松分析信息并跟踪设备状态。
• 设备管理 ：仪表板可用于对设备进行管理操作，例如打开或关闭设备、更改参数等。用户可以设置操作并响应来自设备的实时数据。
• 交互性 ：仪表板可以设计有按钮、开关等交互元素，允许用户与设备和数据交互。
• 显示定制 ：用户可以定制小部件的排列和大小，选择调色板、字体和其他可视化方面，以创建用户友好且信息丰富的界面。
• 基于角色的访问 ：YiCONNECT 允许根据用户角色使用不同级别的权限控制对仪表板的访问。这确保了数据的安全性和机密性。

本指南涵盖主要概念和各种仪表板设置。

创建新的仪表板

要添加新的仪表板，您应该：

• 登录您的 YiCONNECT 实例并通过屏幕左侧的主菜单导航到“仪表板”页面。然后，点击屏幕右上角的“+”号，并从下拉菜单中选择“创建新仪表板”；
• 在打开的对话框中，需要输入仪表板标题，描述是可选的。点击“添加”；
• 创建仪表板后，它将自动打开。单击右上角的“保存”按钮保存。
• 您的第一个仪表板已成功创建。当您继续添加新仪表板时，它们将显示在列表顶部。此默认排序基于创建时间戳。

导入仪表板

您可以从 JSON 文件导入仪表板。

要导入仪表板，请执行以下步骤：

• 进入“仪表板”页面，点击页面右上角“+”按钮，在下拉菜单中选择“导入仪表板”；
• 在导入仪表板窗口中，上传JSON文件并单击“导入”；
• 您已导入仪表板。打开它;
• 您的仪表板及其所有小部件已导入。

管理仪表板

通过仪表板，您可以使用仪表板旁边的相应图标执行诸如以 JSON 格式导出仪表板、公开仪表板、管理分配的客户、编辑仪表板和删除仪表板等操作。

我们来看看每个操作。

导出仪表板

在 YiCONNECT 中，您可以将仪表板导出为 JSON 格式的配置文件。您可以使用此文件将仪表板或小部件配置传输到另一个实例。

要导出仪表板，请转到“仪表板”页面。在列表中找到要导出的仪表板，然后单击仪表板名称旁边的“导出仪表板”按钮。JSON 格式的配置文件以及控制面板上的所有设置将保存在您的 PC 上。

要直接从工具栏导出仪表板，请打开仪表板并单击屏幕右上角的“导出仪表板”按钮。Dashboard 以 JSON 格式导出到配置文件。

公开仪表板

您可以公开仪表板并与其他用户共享其链接。

为此，您应该：

• 转到“仪表板”页面。单击要公开的仪表板旁边的“公开”图标；
• 仪表板现已公开。在弹出窗口中，单击“复制公共链接”图标。您现在可以使用此链接共享仪表板，例如通过电子邮件发送。或者您可以使用快速按钮在社交网络上分享链接；
• 下次您可以在仪表板详细信息窗口中找到仪表板的公共链接；

要再次将仪表板设为私有，请按照以下步骤操作：

• 单击要设为私有的仪表板旁边的“设为私有”图标；
• 在确认对话框中单击“是”。

请注意： 您不应忘记公开相关设备、资产和实体视图，以便访问其数据。

管理指定客户

您可以为您的客户分配仪表板。客户只能查看仪表板，无法在仪表板上执行任何其他操作。

要将仪表板分配给客户，您应该：

• 转到“仪表板”页面，然后单击要分配给客户的仪表板旁边的“管理分配的客户”图标；
• 选择要分配仪表板的客户。点击“更新”；
• 分配给所选客户的仪表板。

您可以取消分配客户的仪表板。为了这：

• 转到“仪表板”页面，然后单击要分配给客户的仪表板旁边的“管理分配的客户”图标；
• 从指定的客户列表中删除客户。点击“更新”；
• 已更新指定客户列表。

要同时向客户分配/取消分配多个仪表板，请选择所需的仪表板并使用“分配仪表板”和“取消分配仪表板”按钮。

• 进入“仪表板”页面，标记一个或多个仪表板。然后，使用屏幕右上角的“分配仪表板”或“取消分配仪表板”按钮选择所需的功能。
• 选择要分配仪表板的客户，然后单击“分配”；
• 分配了所选仪表板的客户列表已更新。

编辑仪表板

编辑您需要的字段，例如仪表板的标题或描述。进行编辑后，请记住保存所有更改。通过这些步骤，您将成功更新仪表板信息。

让我们看看如何做到这一点：

• 进入“仪表板”页面，点击需要编辑的仪表板旁边的“仪表板详细信息”图标；
• 点击“铅笔”图标进入编辑模式；
• 编辑您需要的字段。例如，编辑仪表板的标题，指定说明。进行编辑后，请记住保存所有更改；
• 您已更新仪表板信息。

删除仪表板

您可以使用以下方式之一删除仪表板：

第一种方式：

• 转到“仪表板”页面，然后单击要删除的仪表板名称对面的“垃圾箱”图标；
• 在对话框中确认删除仪表板。

第二种方式：

• 单击要删除的仪表板旁边的“仪表板详细信息”图标；
• 在仪表板详情中，点击“删除仪表板”按钮；
• 在对话框中确认删除仪表板。

您还可以一次删除多个仪表板。

• 标记您要删除的一个或多个仪表板。点击右上角的“垃圾箱”图标；
• 在对话框中确认删除仪表板。

仪表板工具栏

在开始使用仪表板之前，请熟悉其界面，了解哪些功能负责哪些操作。

仪表板工具栏允许您管理 状态、 布局、 设置、 别名、 过滤器、 时间窗口、 进入编辑模式以及使用工具栏中相应的图标添加新的小部件。

其中一些图标（状态、布局、设置、实体别名、过滤器、版本控制、添加新小部件）仅在“编辑”模式下可见。所有其他图标在“查看”和“编辑”模式下均可见。您可以隐藏这些图标或使用设置将工具栏配置为默认最小化。

编辑模式

要进入仪表板编辑模式，只需打开要编辑的仪表板，然后单击屏幕右上角的“编辑模式”按钮即可。

切换到编辑模式后，您可以访问仪表板工具栏以添加新元素和访问控件。不要忘记使用“保存”按钮保存更改，或者如果您决定放弃任何未保存的编辑，可以通过单击“取消”按钮来执行此操作。

添加新的小部件

所有物联网仪表板都是使用 YiCONNECT 小部件构建的。小部件是在仪表板上显示特定类型的信息或功能的元素。小部件用于可视化数据、远程设备控制、警报管理以及显示静态自定义 HTML 内容。

要将小部件添加到仪表板，您应该：

• 打开仪表板并进入编辑模式；
• 单击屏幕顶部的“+ 添加小部件”图标，或者（如果这是此仪表板上的第一个小部件）单击屏幕中间的大“添加新小部件”标志以打开“选择小部件捆绑包”对话框;
• 选择一个小部件包，例如“图表”。要快速找到所需的小部件，请通过单击放大镜图标并输入小部件的名称来使用搜索栏；
• 选择一个小部件，例如“时间序列折线图”，然后单击它以打开“添加小部件”对话框窗口；
• 指定数据源，添加数据键，然后单击“添加”按钮。最后，应用您的更改；
• 您的第一个小部件已创建。

每个小部件通常都有特定的设置和参数，允许用户根据自己的需要自定义其行为和外观。有关小部件、如何创建它们及其设置的更多信息，请单击下面的按钮：

小部件文档

时间窗

仪表板时间窗口表示将用于获取时间序列或警报数据的时间间隔和聚合函数。所有时间序列和警报小部件都使用时间窗口，除非它们被显式配置为覆盖其执行。对于时间序列小部件，YiCONNECT 会使用与时间窗口匹配的时间戳来获取遥测数据。对于警报小部件，YiCONNECT 会使用与时间窗口匹配的创建时间来获取警报。

时间窗口可以以两种模式工作：

• 在实时模式下，小部件不断从服务器接收更新，并自动仅向您显示与当前时间戳的时间窗口匹配的数据；
• 在历史模式下，小部件仅在初始加载期间接收数据，并且不会通过 WebSocket 发出更新。

数据聚合功能适用于时间序列数据，不适用于告警。目前有五种聚合函数可用：Min、Max、Average、Sum 和 Count。名为 None 的特殊函数用于禁用聚合。当您不想将所有时间序列数据提取到 UI，并且希望在数据库级别对其进行预聚合时，数据聚合非常有用。使用聚合函数可以节省网络带宽和客户端浏览器的计算能力。如果您有大量原始值，我们建议尽可能使用聚合函数。

除了最后 X 分钟/小时/天之外，YiCONNECT 还可以使用预定义的时间间隔（当前天、前一天、上个月等）。

请注意： 当前日期间隔是指 24 小时（晚上 12 点到第二天晚上 12 点），而当前日期到目前为止是指从晚上 12 点到时间窗口更新的时间。所有其他间隔都以相同的方式区分。

有时时间间隔很长，您希望在不改变时间戳的情况下更近地查看数据，因此，您需要放大。按住鼠标右键进行放大，然后将其在图表上移动到需要的位置。你需要仔细看看。要缩小到图表的原始大小，请双击小部件。

YiCONNECT 引入了时区配置。默认情况下，仪表板使用浏览器提供的时区。现在可以设置浏览器或特定国家的时间。要快速找到所需的时区，请开始在时区栏中输入其名称。

过滤器

实体过滤器允许您为实体别名解析的实体列表指定过滤器。

让我们看一个例子。假设您有数千个“温度计”设备，并且您希望显示特定型号和特定电池电量的温度计。我们还假设温度计模型存储为属性，电池电量存储为时间序列数据。我们将定义一个过滤器来检查传感器型号是否为“DHT22”并且电池电量是否低于 20%。

请注意： 添加过滤器时，您可以通过移动过滤器名称对面的滑块来配置为用户编辑过滤器的功能。

• 打开仪表板，进入编辑模式，然后单击仪表板窗口右上角的“过滤器”按钮。在弹出的窗口中点击“添加过滤器”按钮；
• 在弹出的窗口中点击“添加关键过滤器”按钮；
• 输入键名称，选择键类型和值类型。然后添加一个过滤器，检查传感器型号是否为“DHT22”，然后单击“添加”；
• 添加另一个关键过滤器；
• 添加过滤器，检查电池电量是否低于 20%；
• 点击“添加”按钮添加新的过滤器；
• 单击“保存”并应用所有更改。

过滤器仅应用于属性或时间序列键的“最新”值。不要使用此功能来“过滤”历史时间序列值。

您可以使用“复杂”过滤器将不同的逻辑表达式组合到一个键上。例如：“（A > 0 且 A < 20）或（A > 50 且 A < 100）”。此外，您可以使用“与”关系组合不同键的两个表达式。例如：“（A > 0 且 A < 20）且（B > 50 且 B < 100）”。目前还不可能使用“或”来组合不同的键。例如：“（A > 0 且 A < 20）或（B > 50 且 B < 100）”。

实体别名

实体别名确定您想要在仪表板上显示哪些实体（设备、资产等）。别名可以被认为是对一个或多个设备的引用。这些引用可以是静态的或动态的。

静态别名的一个示例是单一实体别名。实体在别名对话框中配置一次。如果所有用户有权访问该设备，他们都会看到相同的数据。

动态别名的一个示例是设备类型别名，它显示某种类型的所有设备（例如“温度计”）。此别名是动态的，因为设备列表取决于使用仪表板的用户。如果您以租户管理员身份登录，则所有温度计设备都将允许使用此别名。但是，如果您以客户用户身份登录，则此别名将解析为该客户分配/拥有的温度计设备。

让我们创建一个动态别名，它显示某种“智能传感器”类型的所有设备。

• 打开仪表板，进入编辑模式，然后单击仪表板窗口右上角的“实体别名”按钮。在弹出的窗口中点击“添加别名”按钮；
• 在弹出窗口中输入别名，选择过滤器类型和设备类型。然后点击“添加”按钮；
• 单击“保存”按钮保存别名并保存所有更改。

请参阅实体别名文档以获取更多信息。

设置

仪表板设置允许调整和改变仪表板的整体外观。您可以更改标题、徽标并自定义工具栏。

要开始自定义仪表板，请进入编辑模式，然后单击仪表板窗口右上角的“齿轮”图标以打开仪表板设置窗口。

标题设置

如果您希望标题显示在仪表板上，则需要启用“显示仪表板标题”复选框。默认文本颜色为黑色。通过单击彩色圆圈并通过移动滑块选择所需的标题颜色，可以使用“标题颜色”参数轻松调整颜色和透明度。更改后的标题显示在仪表板的左上角。

仪表板徽标设置

您可以设置在仪表板全屏模式下显示的仪表板徽标。为此，请选中“在仪表板全屏模式下显示徽标”框并添加仪表板徽标图像。

工具栏设置

“显示仪表板选择”、“显示实体选择”、“显示过滤器”、“显示时间窗口”、“显示导出”和“显示更新仪表板图像”复选框负责仪表板工具栏面板上相应选项的可见性。

仅当至少创建了一个过滤器时，“显示过滤器”选项才会显示在工具栏面板上。如果创建了过滤器，但您想限制客户修改设备指示器的机会，我们可以通过取消选中相应的复选框来禁用在工具栏面板上查看过滤器的功能。

您可以显示/隐藏工具栏图标。让我们隐藏仪表板页面上的“显示仪表板选择”、“显示时间窗口”和“显示导出”图标。

“隐藏工具栏”选项将从仪表板页面隐藏工具栏。相反，您会在屏幕右上角找到“进入编辑模式”图标。

“保持工具栏打开”选项负责在仪表板页面上显示工具栏。如果我们禁用它，工具栏将关闭。相反，您会在屏幕右上角找到三点图标。单击它，将打开隐藏的工具栏。

布局

布局定义小部件在仪表板上的排列方式。要管理布局，您应该进入编辑模式并单击仪表板窗口左上角的三个矩形按钮“管理布局”。它打开用于布局控制的小窗口。

“主”布局是您现在正在管理的布局。基本上，它是你的仪表板。单击名为“布局设置”的“齿轮”图标，打开布局设置窗口。

布局设置

列数

在编辑仪表板时，特别是小部件的大小和空间时，您可以注意到灰色背景上有一个白色的网格。这些列决定仪表板上可以水平放置多少个小部件。默认情况下，列数为 24。您可以增加或减少列数。最小列数为 10。最大列数为 1000 列。

小部件之间的边距

此边距类型决定小部件之间的空间大小。默认情况下，边距设置为 10。您可以通过将“ 小部件之间的边距” 字段设置为 0 或增加边距（即小部件之间的距离）来删除它。允许的最大边距为 50。

自动填充布局高度

默认情况下，自动填充布局高度复选框处于未选中状态，以便您可以自由调整小部件的大小。如果勾选此选项，仪表板上的所有小部件将垂直填充屏幕空间。

背景颜色

背景颜色选项允许您自定义仪表板背景上的颜色。要更改它，请单击背景颜色行。在带有滑块的弹出窗口中选择所需的颜色和所需的透明度。然后，按“保存”应用更改。保存后就可以看到自定义的背景了。

背景图

此选项允许将图片设置为背景。为此，您应该将图像拖放到相应的字段中，或从计算机上的文件夹上传图像。选择它后，图像预览将出现在“设置”窗口的左侧。要更精确地调整图像的位置，请单击下拉菜单并选择图片填充背景空间的精确程度。例如，我们选择“覆盖”，然后单击“保存”，看看背景发生了怎样的变化。

移动布局设置

默认情况下，自动填充布局高度复选框处于未选中状态，以便您可以自由调整移动设备上小部件的大小。如果勾选此选项，仪表板上的所有小部件将垂直填充屏幕空间。

移动设备行高决定了您希望小部件在移动设备上的高度。默认情况下，高度设置为 70px，但您可以将其变小或变大。最小移动行高度为 5 像素，最大允许值为 200 像素。

分频器

如果我们切换“分隔符”复选框，我们会将仪表板分为两个独立的部分。对于每个部分，我们都可以配置自己的设置和界面。

只是为了看看它是什么样子，让我们以完全不同的方式设置这两种布局。让我们向左侧布局添加背景图像，并向右侧布局应用新的背景颜色。我们以一定的百分比调整窗口的大小（这只是一个例子，绝对不是建议）。设置参数后，单击布局窗口中的“保存”按钮即可查看更改。设置参数后，单击布局窗口中的“保存”按钮即可查看更改。

状态

状态功能的存在是为了在仪表板中创建分层层次结构。要正确使用状态，您需要为小部件分配特定操作，以帮助您在所需状态之间快速“旅行”。为此，您应该进入编辑模式，然后单击仪表板窗口左上角的两层方块按钮“管理仪表板状态”。将打开管理仪表板状态配置窗口。

由于您尚未创建任何状态，因此您只有“根状态”，即仪表板。根状态定义了层次结构的主要状态。创建其他状态后，您可以通过单击“铅笔”图标（编辑仪表板状态）并选择“根状态”复选框来轻松更改根状态。

要添加新状态，您需要单击窗口右上角的“+”图标，它将打开“添加仪表板状态”窗口。指定一个名称，状态 ID 将根据该名称自动生成，但您可以选择修改它。单击“添加”，然后保存所有更改。

为特定的小部件提供相应的操作可以允许在状态之间移动。要添加动作，您应该单击小部件右上角的“铅笔”图标（编辑小部件）以进入小部件配置模式。您需要导航到“操作”选项卡，然后单击“+”图标添加新操作。

它将打开“添加操作”窗口。

• 行动来源是为了实现目标而需要采取的特定行动。
• 名称是指操作的首选标题。
• 图标定义了行动的符号。
• 类型决定了行动的目标。

在我们的例子中，类型应该是“导航到新的仪表板状态”。选择此选项后，将出现“目标仪表板状态”行，我们必须在其中选择新创建的状态。新操作配置完成后，单击“添加”按钮。新操作将显示在操作列表中。单击窗口右上角的“应用”按钮以应用更改。

由于我们选择了“行单击”操作，因此我们需要单击小部件的行才能使操作生效。点击后，我们立即转入选择的状态。

对于要以实体命名的状态，请使用 ${entityName} 作为状态的名称。因此，在操作期间，您将转换到与参与操作的实体相同的状态。