阿里云数字工厂平台页面组态

组态编辑器

新手引导

第一次进入编辑器，将提示一段新手帮助，建议查看一遍：

页面管理区

项目客户的所有页面都将展示在这个区域中，用户可以选择操作新增页面、删除页面、编辑页面名称等功能进行操作：

新增：点击加号图标可以新增页面；

删除：选定一个页面后，点击回收站图标可以删除页面；

编辑：双击页面名称，可以编辑页面名称；

排序：选定一个页面，并拖动它，可以完成页面排序操作。

组件管理区

组件是编辑器工具的核心功能。它分门别类的提供了构成站点的基本要素，平台用户可以根据自身的需求选择并使用他们；每个组件由其功能不同，对应的属性配置也不一样，有些组件需要数据源支持，有些则需要直连设备，有些则纯粹是展示用途。

使用方法：双击组件图标，组件将被预置在画布中；选定拖拽的画布中也是一种操作方式。平台组态工具会随着自身的发展，不断的提供更多更强大的组件；当然，用户后期也可以通过市场或自研的方式获得组件（后续版本）；

属性配置区

站点页面和组件的属性配置，都将在这个工作区域中完成；针对选中的不同目标，所展示的属性也不一样。

当没有选择任何组件时，是针对当前页面进行配置；

标尺管理区

标尺：勾选后，页面边缘会以刻度尺的方式标注出当前的尺寸（位置）信息；
网格：勾选后，页面会出现5px*5px的栅格点，方便用户调整组件位置；另外，页面中所有的组件位置及尺寸都将自动按照栅格位置进行吸附和对齐；
适合画布：点击后，当前编辑界面会自适应到最佳的展示方式尽可能的显示页面中的内容；
缩放：拖动滑动条，可以放大和缩小展示当前页面；
页面尺寸：用户可以自定义页面的像素尺寸；
自适应：勾选以后，生成的页面会根据浏览器分辨率自适应页面尺寸（预览和发布后可以查看结果）。其他功能

剪切、复制、删除、图层顺序编辑、锁定，选择一个组件后，点击鼠标右键，可以获得这些操作；

成组，选择俩个及俩个以上组件时，点击鼠标右键，可以获得这个操作；

选择俩个及俩个以上组件时，在右侧的属性配置区域还可以对这些组件进行水平对齐、垂直对齐和分布管理。

界面类组件

准备事项

由于很多组件都可以完成与云端的数据源和边缘端的设备进行数据联动，从而获得十分重要的相关数据展示，所以在使用组件前，请务必保证项目内有可用的数据源、脚本和正常运行的设备。

关于数据源的创建配置、脚本的编写和设备的归属，请参见相关的章节介绍。

图片

这个组件主要用于在页面中展示图片资源，比如某些元素的背景、一些代表性的标志等，核心使用功能是上传本地的图片到站点资源中，并且让组件调用它们：

点击图片源链接后，可以上传一张需要使用的图片，或者在历史图片库内选择一张：

注意：单张图片大小不能超过3M；图片库总空间不能超过1G；

标准文字

标准文字组件不同于大多数编辑软件的地方在于，他可以是动态的数据，和某个数据源甚至是设备关联以后，可以随着上报的数据而改变：

静态内容：编辑“文字输入”提交框中的内容来获得，这些文字将静态的展示在页面中；数据源链接：选择一个数据源或者设备，那么这些文字内容将随着具体关联的数据而实时更新变动；

*注意：在关联数据节点时，需要注意在【关联节点】中已经排除了iotid、PK和时间戳

卡片
它的用途主要是具备一定界面样式的展示一些常用数据参数的组件（区别于文字组件），所以它一定需要绑定数据源或者设备才可以正常工作：

可以从数据源选择一个具体的数据：

也可以从设备选择一个具体的属性：

无论是选择数据源还是设备，都必须要从数据源或设备提供的可用字段和属性中选择一项具体要展示的值（*注意：单选且只展示整数型和浮点型的数据类型），就可以完成这个组件的配置了，当然别忘记了调整它的一些背景颜色样式等等：

滚动文字
它的配置方法和文字一致，只是在展示形式上的不通。“跑马灯”的展示方式在网页上比较常见，通过这个组件，在这里可以实现这种效果：

静态内容：编辑“文字输入”提交框中的内容来获得，这些文字将静态的展示在页面中；数据源链接：选择一个数据源或者设备，那么这些文字内容将随着具体关联的数据而实时更新变动；*注意：在关联数据节点时，需要注意在【关联节点】中已经排除iotid、PK和时间戳，展示数据节点名称+值

输入框
这个组件的特点是可以实时读取设备的某一个功能属性并展示，重点是，可以在输入框内输入一个具体的“值”后，将这个“值”即刻下发给设备，并改变这个对应的属性；所以这个组件一定要关联到设备才能正常工作：

UI开关
这个组件主要用于在云端站点里改变设备某个具体的布尔值属性，比如控制设备的开启和关闭：

选择一个可用的设备（如果没有可用设备，请操作设备最左侧导航的设备）：

获得这个设备可展示的布尔值属性（在设备管理-产品开发里定义的属性），非布尔值属性不提供选择：

UI开关和其他工业开关的区别主要在于样式可以自定义，根据自己的需求上传开关的样式图片满足场景需求：

UI按钮
这个组件是提交框和下拉框组件联动的必要环节，它最终会将上面两个组件的内容数据提交给指定的处理方法上：

请重点关注一下脚本提交处理的方法，我们需要预先制作好一个脚本，并且在这选择它：

我们可以看到在参数一栏中有一个可操作的图标：

它的功能是将当前页面中可用的提交框和下拉框组件展示出来，选择一个关联上，则表示在页面中提交框或下拉框的具体填选值作为参数值提交：

根据具体需要执行的脚本，需要填写事先约定好的参数名称，也可以添加多个参数和参数值：

当然了，按钮也可以做其他的简单的动作，比如跳转到一个页面链接去：

或者显示/隐藏当前画布页面中的某一个组件：*注意：当在【点击执行】中选择【显示/隐藏组件】时，选择【点击出现】xxx，【点击隐藏】yyy，这里建议只使用【点击出现】或【点击隐藏】，若是同时选择，则会导致产生误解（其中一个不出现）。也可以使用2个【UI按钮】来配合使用，避免其中一个不出现。

UI输入框
这个组件相对来说很简单，只需要注意设置一些条件，比如类型和长度：

*注意：这个组件的主要用途是和按钮组件联动，所以具体功能在按钮组件中得以体现；
UI下拉框
这个组件有别于其他大多数编辑器中的功能是，它可以动态的获取你的设备信息，自动根据你的设备情况来动态生成数据：

选择产品后，可以看到产品下的设备类型，如果该类型有多个设备，那么这些设备数据都将被自动加载到下拉框中，形成一个下拉列表：

当然，这个组件也可以自定义下拉框里的内容，全部静态的填写，配置为自定义即可：

自定义内容状态下，可以自己手动添加或者删除列表内容，根据实际使用的情况来完成。*注意：无论那种数据获取方式，这个组件也必须和按钮组件联动才有意义；

iframe网页嵌入

这个组件在网页设计中是一个非常常见的元素，主要用于将站点外的内容纳入到同一个页面中来：

只需要输入一个URL，就能完成基本的配置了：

记得调整一下组件大小，它将决定这个嵌入页面的展示尺寸：

视频
这个组件可以帮助你在网页上配置直播的视频

选择一个可用的视频设备（如果没有可用设备，请操作设备最左侧导航的设备）：

记得调整一下组件大小，它将决定这个嵌入页面的展示尺寸：

仪表类组件
准备事项

这类组件都是和边缘端的设备进行数据联动，从而获得十分重要的相关数据展示，所以在使用组件前，请务必保证项目内有正常运行的设备。单色仪表盘90度/180度/270度顾名思义，这个组件主要反应了设备的某个属性值，大多数场景是一个设备的仪表，所以一定要关联设备或数据源才可以正常工作：

选择一个可用的数据源或设备（如果没有可用设备，请操作设备最左侧导航的设备）：

获得这个数据源或设备可展示的属性（在设备管理-产品开发里定义的属性、不适用于刻度表表达的属性都会被排除掉，比如布尔型）：

注意：在【关联节点】中只显示整数型和浮点型的数据类型。

根据实际情况，定义清楚仪表的具体展示参数：

最小刻度和最大刻度：顾名思义，这个仪表展示的最大和最小阈值；间隔：在阀值区间内每个间隔展示的大小，需要注意的是如果间隔值太小会影响使用，组件会给予提示进行调整；如果这个设备在线，那么就可以看到实时的数据情况了，不过请别忘记去调整一下仪表盘的样式：

多色仪表盘90度/180度/270度
这三个组件和单色仪表盘的功能完全一致，配置数据的方法已完全一致，不通的是在于它们的展现形式上，主要关注调整这几个展示配置：

区间盘分区数，最少2、最大5个，用于使用颜色来区分展示面积：

输入对应数值后，颜色配置项和对应的区间阈值都必须填写。

还可以通过配置渐变选项来实现更多的颜色效果：

刻度表横/竖
刻度表本质上也可以看作是仪表的一种，但是它们的配置还是有一定的区别，可以选择关联到一个数据源或者设备上：

选择一个数据源或者设备：

配置这个刻度表需要表达的属性（不适用于刻度表表达的属性都会被排除掉，比如布尔型）：注意：在【关联属性】中只显示整数型和浮点型的数据类型。

数据关联成功后，还需要根据实际使用的场景来配置它的展示规则：

最后，还可以配置一下这个组件的显示样式，用来配合你的界面：

刻度滑动条横/竖 & 滑动条横/竖
这个组件和刻度表的区别是，它不仅可以展示某个设备当前的具体属性值，还可以通过操作滑动“滑块”来改变这个数值，并且下发给设备，变更它；同样，我们必须关联一个设备：

选择一个数据源或者设备：

关联一个具体的属性（不适用于刻度表表达的属性都会被排除掉，比如布尔型）：注意：在【关联属性】中只显示整数型和浮点型的数据类型。

配置成功以后，别忘记根据使用场景调整它们的显示样式：

同样可以个性化配置一些显示特征，便于更佳符合你的页面样式：

仪表时钟
这是一个拟物组件，以12小时为单位展示当前系统时间：

可以针对一些样式配置它的显示效果：

数码时钟
文字时钟，展示当前系统日期和时间：

可以选择时间展示的样式：

可以自定义颜色等方案用于更佳配合页面风格：

形状组件
有哪些形状

矩形、圆形、三角、星形、箭头。这些基本的形状能够满足大多数场景的拼装。

类型特点

这个类型的组件主要是在页面中完成结构相关的拼装，它们的特点是可以触发一些页面的事件：

选择执行方式为脚本后，可以从脚本库中选择一个待执行的脚本完成关联，成功以后，这个组件被点击就会执行这个脚本；这个形状做成按钮是不错的选择：

选择执行方式为超链接后，将获得这个站点里的页面清单，选择一个页面，那么这个形状被点击的时候就会打开这个页面，当然您也可以自定义一个URL；这个形状用来制作导航是不错的选择：

选择执行方式为显示/隐藏组件后，这个形状具备基本的鼠标事件功能，可以根据您的设定来触发和其他组件的显现条件；这个形状用来制作弹窗等比较合适：

图表组件
准备事项

由于很多组件都可以完成与云端的数据源和边缘端的设备进行数据联动，从而获得十分重要的相关数据展示，所以在使用组件前，请务必保证项目内有可用的数据源、脚本和正常运行的设备。关于数据源的创建配置、脚本的编写和设备的归属，请参见数据源

折线图&柱状图

这两个图标是最常见的统计组件，它们主要用来查看历史数据，反映一定时间区间内的数据趋势情况，所以它们一定必须要关联数据源或设备：

选择一个可用的数据源或设备（根据实际使用目的创建数据源，比如设备某个参数的月度报表等）：

表格数据的构成分为纬度和度量，纬度一般是时间，度量一般是某个具体需要查看的指标，比如设备的温度等：

*注意：图表无法正常生成的原因主要有两点：1、数据源建立不合理，过多的脏数据或数据量超出统计报表的范畴；2、纬度选择不正确，绝大多数情况下，时间是最好的统计纬度；3、在关联数据节点时，度量：多选（上限5个）只展示整数型和浮点型的数据类型，纬度：iotid改名为设备、PK改名为产品、时间戳改名为时间。4、在关联设备属性时，度量：多选（上限5个）只展示整数型和浮点型的数据类型，纬度为时间

配置完成数据后，千万别忘记去调整一下图表的样式，这样可以让图表展示的更加合理：

在最终生成的站点页面中，这个组件可以根据一定时间区间来筛选查看：

实时曲线
这个组件和其他图表的区别在于，它是通过透传的方式直接链接一个数据源或设备，实时（5秒刷新）的显示这个设备的某一个具体的参数：

选择一个可用的数据源或设备（如果没有可用设备，请操作设备最左侧导航的设备）：

获得这个数据源或设备可展示的属性（在设备管理-产品开发里定义的属性）：

如果这个数据源或设备工作正常，就可以看到有源源不断的数据上报并展示出来：

在最终生成的站点页面中，这个组件可以根据一定时间区间来筛选查看：

*注意：1、在关联数据节点时，度量：多选（上限5个）只展示整数型和浮点型的数据类型，纬度为时间2、在管理设备属性时，度量：多选（上限5个）只展示整数型和浮点型的数据类型，纬度为时间
交叉表
表格组件，应用场景也十分广泛，它必须和数据源或设备关联上，才可以展示具体的数据：

选择一个数据源或设备，开始配置数据：

交叉表的纬度只可以是时间，在图表上也就是表格第一列，度量根据需求自行选择：

配置成功后就可以构成这样一张表格了：

*注意：图表无法正常生成的原因主要有两点：1、数据源建立不合理，过多的脏数据或数据量超出统计报表的范畴；2、度量选择不正确，绝大多数情况下，如果数据上报的时间未对齐则无法正常的展示；

当表格数据过多时，可以开启分页展示：

轮播表
这个表格组件和交叉表的区别在于，它可以根据配置动态的滚动播放一定量的数据；同样，这个表格也必须关联数据源或者设备才能正常工作：

选择一个数据源或设备：

轮播表的纬度只可以是时间，在图表上也就是表格第一列，度量根据需求自行选择：

数据配置成功后，记得配置一下展示的规则，这样表格用起来体验才更好：

工业组件
准备事项

这类组件都是和边缘端的设备进行数据联动，从而获得十分重要的相关数据展示，并且可以控制它们部分功能，所以在使用组件前，请务必保证项目内有正常运行的设备。一字管道横/竖这2个管道组件可以静态使用，也支持动态关联设备使用，当静态使用的时候，可以调整和设置它的一些显示状态，用以配合实际使用场景：

当组件关联到具体设备时，管道的各种显示状态会依据实际设备发生的数据而改变，并且显示优先级高于上面讲到的静态配置内容；首先我们需要关联设备（比如是一个管道内的传感器）：

关联成功后，我们需要配置一个具体的条件值，用来表达管道是否正常工作、是否有问题：

配置成功后，管道会动态的显示出对应的流动状态。如果这个设备具有流动方向感应的属性，我们配置以后，组件会根据实际配置的条件来展示当前流动的效果：

十字管道/T字管道/L字管道

这3个组件目前都仅仅是连接展示形的组件，可以反转调整它们以符合使用场景：

无管风机/有管风机

这2个组件的差别主要在外观上，有管风机更适合与管道组件配合；无论哪个风机组件，都必须和设备关联才可以正常工作：

选择一个数据源或设备：

选择这个设备的具体某个属性，比如转速：

注意：在【关联属性】中只显示整数型和浮点型的数据类型。

设定转速的阈值非常重要，这个值决定了风机显示时的转速情况，是必填项。配置完成后，如果设备在线并且运行正常，就可以看到风机组件已经开始转动了。现在可以针对转速情况，配置一下对应的显示颜色样式：

阀门

这个组件主要配合管道组件使用，这是一个状态展示的组件，也必须连接到设备上：

选择一个数据源或者设备：

关联到一个具体的布尔值属性（非布尔值会被排除），比如开关，阀门的显示状态会依据属性定义里的开启或者关闭来展示对应的状态：

最后别忘记配置一下显示颜色，以便更符合页面场景：

指示灯圆/方

这个组件主要用于在云端站点里展示设备某个具体的布尔值属性，比如设备的运行状态：

选择一个可用的设备（如果没有可用设备，请操作设备最左侧导航的设备）：

获得这个设备可展示的布尔值属性（在设备管理-产品开发里定义的属性），非布尔值属性不提供选择：

关联好设备和属性后，可以去设置一下这个组件的样式：

同样，这个组件也支持自定义样式，选择实际场景中的外观，通过图片：

数码管

数码管可以用于数字的显示，属性配置如下图所示，数据关联操作在“数据”页面中进行设置。

注意：在【关联节点/属性】中只显示整数型和浮点型的数据类型。

锅炉

这是一个设备状态展示组件，首先关联一个数据源或设备：

选择对应的属性，即可以看到这个设备的状态了：

注意：在【关联节点/属性】中只显示整数型和浮点型的数据类型。

最后别忘记配置一下显示的样式：

旋钮开关

这个组件属于开关的一种，特征是旋钮形状的外观，它的数据配置和开关组件一致，除了这个外观选择外：

工业按钮圆/方

这2个组件也是属于开关的一种，特征是更佳拟物化，它的数据配置和开关组件一致：

工业按钮发光

这个组件和工业按钮圆的区别在于可以定义颜色外观：

图表组件
概述

本章讲解：图表类的组件用途是哪些？怎么配置它们？

准备事项

由于很多组件都可以完成与云端的数据源和边缘端的设备进行数据联动，从而获得十分重要的相关数据展示，所以在使用组件前，请务必保证项目内有可用的数据源、脚本和正常运行的设备。关于数据源的创建配置、脚本的编写和设备的归属，请参见相关的章节介绍。

折线图&柱状图

这两个图标是最常见的统计组件，它们主要用来查看历史数据，反映一定时间区间内的数据趋势情况，所以它们一定必须要关联数据源或设备：

选择一个可用的数据源或设备（根据实际使用目的创建数据源，比如设备某个参数的月度报表等）：

表格数据的构成分为纬度和度量，纬度一般是时间，度量一般是某个具体需要查看的指标，比如设备的温度等：

*注意：图表无法正常生成的原因主要有两点：

数据源建立不合理，过多的脏数据或数据量超出统计报表的范畴；

纬度选择不正确，绝大多数情况下，时间是最好的统计纬度；

在关联数据节点时，度量：多选（上限5个）只展示整数型和浮点型的数据类型，纬度：iotid改名为设备、PK改名为产品、时间戳改名为时间。

在关联设备属性时，度量：多选（上限5个）只展示整数型和浮点型的数据类型，纬度为时间

配置完成数据后，千万别忘记去调整一下图表的样式，这样可以让图表展示的更加合理：

在最终生成的站点页面中，这个组件可以根据一定时间区间来筛选查看：

实时曲线

这个组件和其他图表的区别在于，它是通过透传的方式直接链接一个数据源或设备，实时（5秒刷新）的显示这个设备的某一个具体的参数：

选择一个可用的数据源或设备（如果没有可用设备，请操作设备最左侧导航的设备）：

获得这个数据源或设备可展示的属性（在设备管理-产品开发里定义的属性）：

如果这个数据源或设备工作正常，就可以看到有源源不断的数据上报并展示出来：

在最终生成的站点页面中，这个组件可以根据一定时间区间来筛选查看：

*注意：

1、在关联数据节点时，度量：多选（上限5个）只展示整数型和浮点型的数据类型，纬度为时间2、在管理设备属性时，度量：多选（上限5个）只展示整数型和浮点型的数据类型，纬度为时间

交叉表

表格组件，应用场景也十分广泛，它必须和数据源或设备关联上，才可以展示具体的数据：

选择一个数据源或设备，开始配置数据：

交叉表的纬度只可以是时间，在图表上也就是表格第一列，度量根据需求自行选择：

配置成功后就可以构成这样一张表格了：

*注意：图表无法正常生成的原因主要有两点：1、数据源建立不合理，过多的脏数据或数据量超出统计报表的范畴；2、度量选择不正确，绝大多数情况下，如果数据上报的时间未对齐则无法正常的展示；

当表格数据过多时，可以开启分页展示：

轮播表

这个表格组件和交叉表的区别在于，它可以根据配置动态的滚动播放一定量的数据；同样，这个表格也必须关联数据源或者设备才能正常工作：

选择一个数据源或设备：

轮播表的纬度只可以是时间，在图表上也就是表格第一列，度量根据需求自行选择：

数据配置成功后，记得配置一下展示的规则，这样表格用起来体验才更好：

组态页面导入
如果在其他工业项目中已经完成了组态页面开发，需要复用到其他项目中，可以使用导入页面的功能，导入的项目称做目标项目，被复用页面的项目称做源项目。在目标项目的组态页面中选择“导入页面”：

在弹出页面以后将列出系统集成商所有的实施的项目，以及项目包括的组态页面数、项目状态、创建时间以及客户名称。

选择其中的一个项目作为源项目，然后点击“下一步”：

第二步将列出所有源项目中所有页面中，列出已经绑定了组件中的设备属性，显示物模型名称和属性的名称，可以选择“替换属性”，用目标项目中的物模型的属性去替代组件中的属性：

选择项目中的物模型属性，确认替代，比如用涂胶机的设备产量替代源项目中的最新产量这个属性：

选择好所有替代的属性以后，点击“导入”，将把源项目中的所有页面导入到目标项目中，并且将自动替换掉所有组件关联的物联网属性。导入成功以后将出现在组态列表中。

组态预览
创建一个组态页面

站点设置关联到导航

需要在权限| 站点设置菜单下，进行导航配置。配置一级模块”组态预览”，以及一级模块下的页面名“预览0321”，然后把点击关联导航页面。

预览导航效果

点击“预航导航效果”，即可看到组态的预览效果。