> For the complete documentation index, see [llms.txt](https://doc.yuncitys.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.yuncitys.com/guan-li-jie-mian/yi-biao-zu-jian.md).

# 仪表组件

### 简介 <a href="#jian-jie" id="jian-jie"></a>

所有IoT仪表板都是使用平台中的部件库中定义的Widget进行构建。每个部件都提供对应功能让用户进行操作，例如数据可视化，远程设备控制，警报管理以及显示静态自定义html内容。

### 部件类型 <a href="#bu-jian-lei-xing" id="bu-jian-lei-xing"></a>

根据提供的功能每个部件窗口定义代表特定的部件类型窗口。平台提供五种类型：

* Latest values
* Time-series
* RPC (Control widget)
* Alarm widget
* Static

每种部件类型都有自己特定的数据源配置和相应的部件API。

每个小部件都需要数据源才能进行数据可视化。

可用数据源的类型取决于窗口部件的窗口部件类型：

* 目标设备 - RPC中使用此数据源类型。 基本上你需要为RPC部件指定目标设备
* 警报源 - 警报部件中使用此数据源类型. 此数据源要求源实体显示相关的警报和相应的警报字段。
* 实体 - 时间序列和最新值部件均使用此数据源类型. 基本上你需要指定目标实体和时间序列key或attribute名称。
* 函数 - 此数据源类型在时间序列和最新值部件中均用于调试。基本上你可以指定一个javascript函数，该函数将模拟设备中的数据以调整可视化效果。

### Latest values

显示特定实体属性或时间序列数据点的最新值（例如，任何“仪表”部件或“实体列表”部件）。这种小部件使用实体属性或时间序列的值作为数据源。

![](/files/-MK3zbfMf5M9cAiU4C5y)

以下是最新值部件的示例-显示当前功率值的数字仪表。

![](/files/-MK3zeiQhPdiN_KsOP4C)

### Time-series

显示选定时间段的历史值或特定时间窗口中的最新值（例如“时间序列-浮点”或“时间序列表”）。 这种部件仅将实体时间序列的值用作数据源。 为了指定显示值的时间范围，使用**Timewindow**设置。 可以在仪表板级别或部件级别指定Timewindow。 它可以是实时-动态更改某个最近间隔的时间范围，也可以是历史-固定历史时间范围。所有这些设置都是 **Time-series**窗口部件配置的一部分。

![](/files/-MK3zhjVTYdy4TFgDNus)

以下是时间序列部件的示例-“Timeseries - Flot”实时显示三个设备的安培数。

![](/files/-MK3ziv9YSjzUmzh4Yed)

### RPC (Control部件)

允许将RPC命令发送到设备并处理/可视化来自设备的答复（例如“ Raspberry Pi GPIO控制”）。通过将目标设备指定为RPC命令的目标端点来配置RPC窗口小部件。

![](/files/-MK3zkQMryGJg3oLOAk6)

以下是RPC小部件的示例-“基本GPIO控制”-发送GPIO切换命令并检测当前的GPIO切换状态。

![](/files/-MK3zldBGjKrWIFmx_Cz)

### Alarm部件

在特定时间窗口中显示与指定实体相关的警报（例如“警报表”）。 通过将实体指定为警报源和相应的警报字段来配置警报窗口小部件。 像**Time-series widgets**一样，警报部件具有时间窗口配置，以便指定显示警报的时间范围。另外，配置还包含“Alarm status”和“Alarms polling interval”参数。“ Alarm status”参数指定正在获取的警报的状态。“Alarms polling interval”控制警报获取频率（以秒为单位）。

![](/files/-MK3zn0Z63Jjj87YD6S3)

以下是“警报”窗口小部件的示例-“警报表”实时显示资产的最新警报

![](/files/-MK3zpNib2BIupgaJGWO)

### Static

显示静态的可定制html内容（例如“ HTML卡”）。静态小部件不使用任何数据源，通常通过指定静态html内容和可选的CSS样式进行配置

![](/files/-MK3zr4ooVrJsLNQVay2)

以下是一个静态小部件的示例-显示指定html内容的“ HTML卡”。

![](/files/-MK3zsIWTIeGaJF5mRX4)

&#x20;
