元件库-组态编辑器-有人云

元件承载组态编辑器的核心功能，是构成组态编辑器的基本要素。拖拽所需元件到选中页面的画布中，再配置元件的数据源、交互、展示样式等，便可使用该元件的功能。目前元件库中包含“基本元件”、“控制元件”、“图表元件”三大类，下面将会针对每一个元件的功能进行详细介绍。
   ![](/Public/attached/20221009040609_95017.png)
###  通用操作
##### 添加元件到画布
从左侧元件中选择文本元件，鼠标左键按住不放，拖拽至组态设计画布中，松开鼠标左键，元件在画面上显示出来。
##### 调整元件尺寸和位置
改变大小：鼠标点击元件，此时文本元件周围有圆点的小矩形框，鼠标挪到小矩形框上，鼠标箭头变为方向箭头时，按下鼠标左键并拖动，可以改变元件的大小。
改变位置：当鼠标在元件上变为双“十”字型时，按下鼠标左键并拖动，可以改变元件的位置。
注意：元件的尺寸设置太小时，会影响展示效果。
##### 调整元件方向
改变方向：鼠标点击元件，此时文本元件周围有圆点的小矩形框，并出现旋转小图标，鼠标放置于选中小图标上，此时鼠标变为双“十”字型时，按住鼠标左键并拖动，可以改变元件的方向。
### 基本操作
元件的基本操作有复制、粘贴、剪切、复制、左对齐、居中对齐、右对齐、顶部对齐、中部对齐、底部对齐、置顶、置底、缩放、组合、锁定、解锁等操作，详情请查看上面工具栏介绍。
### 基本元件
![](/Public/attached/20221009040932_46127.png)
基本元件包括文本、矩形、圆形、直线、表格、时间、天气。
##### 文本
用来表达和展示所指定的内容，在页面画布上双击元件便可以直接输入文本。
在数据配置中支持配置该元件的标题、交互事件（按下、弹起、单击、双击），详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、对齐方式、加粗、倾斜、下划线、背景颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
##### 矩形
矩形元件可以用于满足各种场景拼装。例如拼装出展示图案，或作为数字或文字的背景等。
在页画布双击矩形元件可以直接输入文本。
在数据配置中支持配置该元件的标题、交互事件（按下、弹起、单击、双击），详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、对齐方式、加粗、倾斜、下划线、背景颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
##### 圆形
在页面画布上双击元件可以直接输入文本
在数据配置中支持配置该元件的标题、交互事件（按下、弹起、单击、双击），详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、对齐方式、加粗、倾斜、下划线、背景颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
##### 直线
直线元件仅支持样式配置，在样式配置中不支持设置改元件的位置和尺寸，支持设置直线的角度、线段类型、线段宽度、线段颜色、不透明度，针对直线元件特有配置见下面介绍，通用配置参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
鼠标悬浮到选中的直线元件时，会出现十字形的光标，可以拖到光标到任意方向，调整直线的形状。
线段类型：提供实线、虚线多种线段类型选择；
线段宽度：默认为1px，可以根据自己的需要配置；
线段颜色：设置直线的颜色，点击图标””，弹出拾色器，选择自己想要的颜色
##### 表格
表格元件仅支持样式配置，在样式配置中支持对元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、对齐方式、加粗、倾斜、下划线、背景颜色、不透明度、行列的增减，下面会对单元格特有的行列设置进行介绍，通用配置参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
左边插入列：选中表格元件，点击鼠标右键选择”增加左边一列”或者在”外观”分类中点击图标””
右边插入列：选中表格元件，点击鼠标右键选择”增加右边一列”或者在”外观”分类中点击图标””
左侧删除列：选中表格元件，点击鼠标右键选择”删除左边一列”或者在”外观”分类中点击图标””
右侧删除列：选中表格元件，点击鼠标右键选择”删除右边一列”或者在”外观”分类中点击图标””
上方插入行：选中表格元件，点击鼠标右键选择”增加顶部一行”或者在”外观”分类中点击图标””
下方插入行：选中表格元件，点击鼠标右键选择”增加底部一行”或者在”外观”分类中点击图标””
顶部删除行：选中表格元件，点击鼠标右键选择”删除顶部一行”或者在”外观”分类中点击图标””
底部删除行：选中表格元件，点击鼠标右键选择”增加左边一列”或者在”外观”分类中点击图标””
注意：
双击表格元件后再单击单个单元格，可以针对每个单元格设置文本，文本的设置是针对整个表格内的所有内容生效。
##### 时间
时间元件仅支持样式配置，在样式配置中支持对元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、对齐方式、加粗、倾斜、下划线、时间格式、背景颜色、边框颜色、不透明度，下面会对时间元件特有的”时间格式”进行介绍，通用配置参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
时间元件的格式有”yyyy-mm-dd hh-MM-ss”、”yyyy-mm-dd”、”hh-MM-ss”三种，以数字形式展示，”yyyy-mm-dd hh-MM-ss”代表年-月-日 时-分-秒，”yyyy-mm-dd”代表年-月-日，”hh-MM-ss代表时-分-秒。

### 控制元件
![](/Public/attached/20200521112110_59465.png)
控制元件包括开关、按钮。
##### 开关
在数据配置中支持配置该元件的标题、数据来源、状态设置，下面会针对开关特有的”状态设置”进行详情介绍，通用配置参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、背景颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
状态设置：
点击状态设置字段右侧的图标””，出现状态设置的弹窗。开关的状态有开启和关闭两种状态，设置状态的触发值和展示图片，点击”应用”完成状态设置。
在弹窗上点击”展示图片”字段下的图片可以更换图片，开启状态的触发值默认为1，关闭状态的触发值默认为0，默认展示滑块开关的样式。

##### 按钮
在数据配置中支持配置该元件的标题、交互，详情配置参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、背景颜色、背景图片、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
注意：双击该元件可以在元件上编辑文本，支持上传背景图片，做为按钮的展示图片。

### 图表元件
![](/Public/attached/20200521112235_13776.png)
图标元件包括：变量值、变量值、变量值图片、流动条、仪表盘：数据曲线图：数据表格：报警表格、饼图、指示灯、计量器、设备状态、网页、视频。

##### 变量值
变量值元件以绑定变量的数据做为动态数据源来展示数值或配置的内容，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、数据来源、翻译内容、动效、交互事件（按下、弹起、单击、双击），下面会针对”翻译内容”进行详细介绍，其他通用配置项参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、对齐方式、加粗、倾斜、下划线、背景颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
设置翻译内容
设置所绑定变量不同值代表的内容，比如变量温度为”100”时翻译成”高温”进行展示；点击设置翻译内容右侧的图标””时，出现设置翻译内容的弹窗，设置最小值和最大值和达到触发值时对应展示的内容，最多可以添加20条。
注意：设置的最小值和最大值代表最小值至最大值的范围，组态运行时当达到这个范围后便会展示设置的翻译内容。最大值和最小值相等时，触发值就是这个相等的值，例如最大值和最小值都设置为10 ，当组态运行后，绑定变量的数值达到10后便会展示设置的翻译内容。
##### 变量值图片
变量值图片主要用于当变量处于不同的值时显示不同的图片，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、数据来源、设置变量图片、交互事件（按下、弹起、单击、双击），下面会针对”设置变量图片”进行详细介绍，其他通用配置项参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
###### 设置变量图片
点击设置翻译内容右侧的图标””时，出现设置翻译内容的弹窗，设置最小值和最大值以及对应图片和对应的颜色，最多可以添加9条，点击应用按钮设置成功。
最小值和最大值：设置的最小值和最大值代表最小值至最大值的范围，最大值和最小值相等时，触发值就是这个相等的值。
对应图片：支持选择本地图片和系统图片，运行组态后所绑定的变量值达到触发值便会展示对应的图片；
对应颜色：点击图标””时，出现拾色器，选择想要的颜色，运行组态后所绑定的变量值达到触发值便会展示对应的颜色；
![](/Public/attached/20200521113303_91963.png)
##### 流动条
流动条元件主要用于展示一些水流等效果，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、数据来源、设置流向，下面会针对”设置流向”进行详细介绍，其他通用配置项参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中流动条元件不支持设置位置和尺寸，支持设置背景颜色、流动条颜色，角度、背景颜色请参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
######  设置流向
当绑定的变量处于不同的值时触发该元件的不同流向。点击设置流向右侧的图标””时，出现设置流向的弹窗，选择水流效果、设置最小值和最大值，最多可以设置9条，点击”应用”按钮完成设置。
水流效果：水流效果有7种，主要为正向流动、反向流动、停止流动、快速正向流动、慢速正向流动、快速反向流动、慢速反向流动；
最小值和最大值：设置的最小值和最大值代表最小值至最大值的范围。运行组态后所绑定的变量值达到触发值便会显示不同的水流效果。
![](/Public/attached/20200521113343_49376.png)
##### 仪表盘
该元件支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、数据来源、最小刻度、最大刻度的，标题、数据来源通用配置项参见数据配置
在样式配置中支持配置该元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、外观，下面会详细介绍外观设置，其他通用设置详情参见样式配置
刻度设置：最小刻度默认为0，最大刻度默认为100，支持自定义设置
外观设置：外观支持设置刻度颜色、面板颜色、指针颜色、中心颜色、不透明度。
![](/Public/attached/20200521113416_43325.png)
##### 数据曲线图
该元件主要用于查看绑定变量的实时数据或历史数据的趋势图，支持数据和样式配置。
在数据配置中，支持配置标题、数据来源、图形类型。数据来源支持选择实时数据或历史数据，需要绑定变量提供数据源，最多可以选择9个变量。图形类型可以选择曲线图、纵向柱状图、横向柱状图。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、外观，下面会详细介绍外观设置，其他通用设置详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
外观设置：图形类型为曲线图时，外观支持设置背景颜色、坐标值颜色、坐标颜色、不透明度；图形类型为柱状图时，外观支持设置背景颜色、柱形颜色、坐标颜色、不透明度。

##### 数据表格
该元件主要用于展示实时数据或历史数据的报表，支持数据和样式的配置。
在数据配置中支持配置该元件的标题、数据来源和功能；
在样式配置中支持配置该元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、对齐方式、背景颜色、边框颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
表格类型：该元件支持选择实时数据表格或历史数据表格；
功能：用于配置数据表格的数据来源，最多可以绑定9个变量
##### 报警表格
该元件主要用于展示实时报警数据或历史报警数据的报表，支持数据和样式的配置。
在数据配置中支持配置该元件的标题、数据来源和功能；
在样式配置中支持配置该元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、对齐方式、背景颜色、边框颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
表格类型：该元件支持选择实时报警数据表格或历史报警数据表格；
功能：用于配置数据表格的数据来源，最多可以绑定9个变量

##### 饼图
该元件主要用于展示不同变量数据之间的占比，支持数据和样式的配置。
在数据配置中支持配置该元件的标题、数据来源；在数据来源中最多可以绑定9个变量，支持设置每个变量的展示颜色
在样式配置中支持配置该元件的标题、位置、尺寸、角度、背景颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。

##### 指示灯
在数据配置中支持配置该元件的标题、数据来源、状态设置，下面会针对改元件的”状态设置”进行详情介绍，其他通用配置参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、背景颜色、不透明度，详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
状态设置：
点击状态设置字段右侧的图标””，出现状态设置的弹窗。指示灯的状态有开启和关闭两种状态，设置状态的触发值和展示图片，点击”应用”完成状态设置。
在弹窗上点击”展示图片”字段下的图片可以更换图片，开启状态的触发值默认为1，关闭状态的触发值默认为0。

##### 计量器
计量器元件主要用于测量，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、数据来源、展示类型、最小刻度、最大刻度的，标题、数据来源通用配置项参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">数据配置</a>。
在样式配置中支持配置该元件的标题、位置、尺寸、角度、文本字体、字号大小、颜色、外观，下面会详细介绍不同展示类型的外观设置，其他通用设置详情参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
展示类型：展示类型分为温度计、棒图、容量器三种。
刻度设置：展示类型为温度计和棒图时，需要设置最小刻度和最大刻度，展示类型为容量器时需要设置最大刻度。绑定变量的值大于设置的最大值或小于设置的最小刻度值时按照刻度的最大值或最小值显示。
外观设置：展示类型为温度计，外观支持设置液位颜色、边框颜色、填充颜色、背景颜色；
展示类型为棒图时，外观支持设置填充颜色、刻度颜色；
展示类型为容量时，外观支持设置外层圆圈颜色、波浪划过文字的颜色、波浪颜色；

##### 设备状态
设备状态元件主要是用于展示设备在线、离线、报警三种状态，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、状态图片。
在样式配置中流动条元件不支持设置位置和尺寸，支持设置角度、不透明度，详情请参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
状态图片：
设置设备在线、离线、报警三种状态对应的显示图片，支持从本地和系统图片中选择。
##### 网页
网页元件是组态设计中的一个常见元素，主要用于将站点外的内容纳入到页面中，支持配置数据和样式。
在数据配置中支持配置网页元件的标题和链接。在功能分类下的网页链接字段中配置URL地址。
在样式配置中支持设置位置、尺寸、角度，配置详情请参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
##### 视频
视频元件主要应用于在组态画面的视频播放，支持”数据”和”样式”配置。
在数据配置中支持配置该元件的标题、数据来源（独立组态）、视频播放形式。
在样式配置中支持设置位置、尺寸、角度、不透明度，配置详情请参见<a href="http://cloud.usr.cn/document/230.html" target="_blank">样式配置</a>。
数据来源：设计的组态为独立组态时，需要关联设备。被关联的设备如果没有绑定摄像头该元件则无法正常使用。
视频播放：勾选自动播放时，组态运行时视频元件处于自动播放状态；未勾选自动播放时，组态运行时，需要手动点击视频元件才可以播放视频画面。
注意：在手机端运行时，该元件只支持手动播放。若需要集成多个视频创建多个播放器即可实现，但需要注意的是集成多个播放器需要注意单个播放器的长宽比例限制最小为{w: 400px;h: 300px;}（chrome浏览器限制），小于这个大小时自动播放会失效。