组态编辑使用说明


前言:本说明文档旨在帮助管理员用户快速掌握EMCP物联网云平台EG设备管理中的组态编辑功能的操作方法。【EG设备管理】中的【组态编辑】里导出的组态页面文件,不能导入到【数据规则】中的【画面组态】页面中,由于两者网关技术和平台功能设计上有所差异,所以两者不兼容。

一. 功能介绍

1.1 组态展示

EMCP物联网云平台通过设置,可以使用组态画面的形式来展示用户的设备运行情况。

1.2 组态功能管理

管理员用户,通过【后台管理】→【EG设备管理】→【编辑】→第五步:组态管理,这几个步骤来选择使用组态展示形式来展示对应设备或者编辑对应的组态画面,如下图。
组态编辑功能,可进行设备的组态的编辑,也可以切换当前设备的前台展示方式,默认为组态展示方式

二. 画面组态编辑

2.1 组态编辑页面介绍

在【组态页面管理】处,可以增加新的子页面,也可以将任意子页面设置为组态首页面,如图。
点击对应页面的编辑按钮,进入组态编辑页,各功能区域注释如图中的标识。

2.2 组态控件展示

下表展示了所有组态编辑的控件,简要介绍各控件功能,着重展示各控件的使用注意。

2.3 组态操作与功能实现

在组态编辑页面,管理员通过新增控件、个性化控件设置、绑定数据等一系列操作进行组态,最终实现适用于展示的组态页面,下面对每一种操作和功能实现进行详细说明。

2.3.1 页面属性设置

如图通过顶部菜单栏的“页面属性”功能进入设置页,可以重命名当前页面,设置页面分辨率和背景颜色或背景图片,在“宽×高”选择自定义,就可以自己手动在“宽”和“高”输入想要的分辨率。

2.3.2 画布功能介绍

2.3.2.1 画布缩放

画布拥有缩放功能,以鼠标为缩放圆心,摁住键盘Ctrl键,滑动鼠标滚轮即可将画布进行缩放,使绘制组态更加便捷,如图
将鼠标放在饼图图例处,按住键盘Ctrl键,滑动鼠标滚轮,可以图例为圆心将画布进行缩放,如图

2.3.2.2 画布中标尺

在画布周围的标尺,添加控件后,无论控件怎样移动都可以清楚看清控件所在位置以及控件大小,如图

2.3.2.3 画布中辅助线

为了方便进行控件对齐等操作,可使用画布中控件辅助线,鼠标临近画布标尺,可浮出辅助线,点击可创建固定辅助线,如图
点击标尺处辅助线叉号可将辅助线删除

2.3.2.4 画布中自动吸附

在画布中,可以快速的调整控件对不齐的情况。如图

2.3.3 新增控件

如图,当要在组态画面新增控件时,只需要在左侧的“基本形状”、“常用控件”和“高级控件”控件窗单击鼠标左键选中控件,然后在画布区选中的位置按住鼠标左键不放向右拖动,松开鼠标左键完成新增控件操作

2.3.4 调整控件大小

如图,控件大小的调整方式有两种:
l  第一种:是直接鼠标左键点击要调整的控件,在其周围会出现调整节点,鼠标放置到节点上,就能显示出来这个节点能够调整哪个方向的大小,然后按住鼠标左键沿箭头方向拖动,就可以调整对应方向的控件大小(与Windows桌面调整窗口大小基本一样);
l  第二种:所有控件的属性中都有宽、高或半径等调整选项,只要调整对应的大小数值,就能够调整大小。

2.3.5 旋转控件

旋转控件有两种方式:如图
l  第一种:是直接鼠标左键点击要调整的控件,在其周围会出现旋转调整点,鼠标放置到节点上,按住左键进行拖动,就可以任意调整控件的旋转角度。
l  第二种:控件属性中有【旋转】一栏,可以填入角度来实现控件的旋转。

2.3.6 移动控件

移动控件可产生磁力效应,当有多个控件时,移动其中一个控件,可出现对齐磁力线,放开控件,可将控件自动吸到磁力线位置,如图

2.3.7 复选控件

复选控件有两种方法来实现:如图
l  第一种:按住键盘Ctrl键,鼠标左键依次点击需要复选的控件,实现复选,与Windows桌面鼠标复选多个图片操作一样。
l  第二种:使用鼠标左键在画布区空白位置按住不放,然后向多个控件方向拖动,会出现灰色的选择框,将要选择的控件全部覆盖在选择框中后,松开鼠标左键,就能复选这些控件,可以对复选的这些控件进行复制,删除和位移操作。(与Windows桌面鼠标框选多个图标操作一样)

2.3.8 复制、粘贴和删除控件

复制、粘贴和删除控件的方法有两种,操作之前都需要单选或复选要操作的控件或控件组合:
l  第一种,使用顶部菜单的【复制】、【粘贴】、【删除】功能,如图;
l  第二种,使用键盘快捷键:
  复制:Ctrl+C
  粘贴:Ctrl+V
  删除:Delete

2.3.9  控件对齐

控件对齐操作之前都需要单选或复选要操作的控件或控件组合,使用顶部菜单的【对齐】按钮实现;

2.3.10 控件图层的设置

控件图层设置,如图,操作之前都需要单选或复选要操作的控件或控件组合:
注:顶层的控件会覆盖底层的控件,只有能选中的控件才可以进行图层设置。
l  使用顶部菜单的【移层】按钮实现;

2.3.11 撤销和恢复

如图用顶部菜单栏的【撤销】按钮,可以对之前进行的操作进行依次删除,使用【恢复】按钮,可以对撤销的操作依次进行还原,用法与Windows里面的“Ctrl+Z”和“Ctrl+Y”一样。

2.3.12 组态保存

如图通过顶部的菜单栏可以使用保存功能对当前的页面进行保存。   
注:在组态过程中请注意及时保存。

2.3.13  组态页导入和导出

导出:在组态编辑页面,点击页面顶部菜单栏的【导出】按钮,导出对应的JSON文件到PC本地,如图;
导入:在组态编辑页面,点击页面顶部菜单栏的【导入】按钮,将PC本地的JSON文件导入到此组态编辑页面,如图;

2.3.14 控件样式设置

组态编辑页提供的控件,均可以通过右侧属性窗口设置其自己的显示样式。样式的情况大同小异,下面以文本显示控件为例进行说明,如图
l  填充:设置控件的背景色。
l  圆角:设置控件的边框弧度。
l  边框:设置边框的颜色,边框的样式和边框的粗细。
l  文本:在右侧文本框输入要显示的文本内容,可以分行输入。输入完毕点击页面任意位置既完成输入;
l  字体、字体大小、字体粗细和字体颜色:可以设置显示时的文本样式;
l  对齐:具备文本的控件,可以设置文本显示的左中右和上中下对齐方式;

2.3.15 控件图片设置和图库管理

在组态编辑页中,所有能够显示图片的控件,都可以在属性栏中进入图库进行图片的选择,上传和管理。
具备图片显示功能的控件有:【按钮】、【图片】和【动画】。
如图,在这些控件的属性窗口中,当选择为图片形式展示时,会出现【选择图片】按钮,点击此按钮,就可以进入组态图库,可以选择图库中各分类文件夹内的图片,也可以从电脑本地上传图片到“我的图库”,并进行图片的管理。
注:上传图片支持的格式为:jpg,png,svg ,gif

2.3.16 控件数据绑定

组态编辑页展示数据的控件有两类:
l  数据展示控件:【数显框】、【动画】、【仪表盘】、【流动条】、【百分比填充】、【实时曲线】、【历史曲线】、【柱状图】和【饼图】。
l  读写操作控件:【按钮】
数据展示控件在属性窗口的变量绑定项可以选择本设备下的变量进行展示。【按钮】控件是绑定可读写的变量来进行远程操控,如图,选中控件后,在属性窗口之间点击【绑定变量】的【选择】按钮,出现绑定列表选择窗口,选择要绑定的设备驱动名称,出现该驱动对应的所有变量,选择要绑定的变量后,点击【保存】按钮完成绑定。

2.3.17 控件动画效果设置

控件动画效果是控件对于一个或多个数据条件的动画响应功能。比如,当指定数据满足设置的指定条件时,控件可见或不可见,用户可以利用这些功能,更好的进行组态展示。

2.3.17.1 显隐设置

功能描述:可设置指定的变量满足指定的条件后,控件可见或不可见。
具备显隐设置的控件:除【实时曲线】、【历史曲线】和【视频】外,其余控件都具备【显隐】动画功能。
如图,在属性栏中,在【显隐】前点击【启用】按钮,使用【显隐】功能,然后点击【显隐】的设置按钮进入设置进行指定变量的设置和判断条件的设置。

2.3.17.2 其他动画效果设置

除【显隐】功能外,某些控件还具备【闪烁】、【旋转】等一个或多个功能。这些动画效果的使用方法与【显隐】基本类似,以下仅展示设置页面。
【闪烁】:如图,当指定变量满足指定条件时,控件可以出现显隐闪烁或控件的背景色、边框和文字可以展示闪烁效果。
【旋转】:如图,当指定变量满足指定条件时,控件可以进行顺时针或逆时针的旋转效果。

2.3.18 控件颜色变幻效果设置

控件颜色变幻效果是指当指定数据满足设置的指定条件时,控件会发生颜色的变化,用户可以利用这些功能,更好的进行组态展示。

2.3.18.1 颜色填充设置

功能描述:可设置指定的变量满足指定的条件后,控件的填充颜色会发生变化。
具备可见度的控件:【数显框】、【按钮】、【文本】、【系统时间】、和基本形状。
如图,在属性栏中,在【填充】前点击【启用】按钮,使用【填充】功能,然后点击【填充】的设置按钮进入设置进行指定数据的设置和数据条件的设置。
【填充】:如图,当指定变量满足指定不同的条件时,控件可以展示不同的填充颜色效果。

2.3.18.2其他颜色变换设置

除【填充】功能外,某些控件还具备【边框】、【文字】等一个或多个功能。这些动画效果的使用方法与【填充】基本类似,以下仅展示设置页面。
【边框】:如图,当指定变量满足指定不同的条件时,控件可以展示不同的边框颜色效果。
【文字】:如图,当指定变量满足指定不同的条件时,控件的文字可以展示不同颜色的效果。

2.3.19 按钮控件使用说明

【按钮】控件是组态常用的一个控件,其可以实现如下几个功能:
操控变量:绑定可读写变量,【按钮】控件设置为固定值操控或可设值操控模式,如图。
开关/点动 支持的写入方式
1)按 1 松 0 :按下按钮后,写入数值1,松开按钮后,写入数值 0
2)  按 0 松 1: 按下按钮后,写入数值0,松开按钮后,写入数值 1
3)置1:按下按钮后,写入数值1
4)置0:按下按钮后,写入数值 0
5) 取反:按下按钮后,如果当前 变量值为0,则写入1,如果当前变量值为1,则写入值 0(仅支持开关类型变量)
打开功能页面:设置【按钮】控件功能是打开【历史报表】或【报警记录】,功能页默认为弹出小窗口打开,如图    
组态页面跳转:设置指定同设备的其他组态页面,实现页面跳转。跳转模式可设置为在当前页刷新、新网页展示或子窗口展示。如图   
打开外部链接:设置【按钮】控件功能是打开外部链接网页,可以选择打开方式,如图    

2.3.20 动画控件使用说明

【动画】控件是组态中常用的一个控件,动画可以实现当指定的变量满足指定的条件时,展示不同的文本内容或图片内容。使用方法如下:
第一步:通过【变量选择】设置按钮,绑定指定的变量;
第二步:在【段点设置】中选择展示文本动画或图像动画,并进入设置页面进行条件与展示内容的设定,如图
第三步:在【显示实现】中选择动画执行方式,默认是按第二步中的各段点条件进行触发。可以选择另一种模式,即,当一个总的判断条件成立时,【动画】控件依次显示各段点设置的文字或图片,以此可以实现静态图变动态图的效果。如图

2.3.21 仪表盘控件使用说明

【仪表盘】控件使用方法如下:如图
第一步:通过【变量选择】设置按钮,绑定指定的变量;
第二步:设置仪表盘整体的背景、表盘、指针、刻度的颜色;
第三步:设置变量值、变量名和标注文字颜色,字体样式等,即可使用

2.3.22 历史曲线控件使用说明

第一步:通过【绑定变量】设置按钮,绑定要展示的变量,可以在一个曲线控件中绑定多个数据进行多曲线的展示。同时可以设置,每个数据曲线的对应颜色,以及想要展示的时间范围,如图
第二步:绑定完变量,设置曲线的各项显示样式,就可以正常使用了,如图

2.3.23 实时曲线控件使用说明

第一步:通过【选择变量】设置按钮,绑定要展示的变量,可以在一个曲线控件中绑定多个数据进行多曲线的展示。同时可以设置,Y轴自适应量程或自定义量程和每个数据曲线的对应颜色,如图
第二步:绑定完数据,设置曲线的各项显示样式,就可以正常使用了,如图

2.3.24 百分比填充控件使用说明

【百分比填充】控件使用方法如下:如图
第一步:通过【变量选择】设置按钮, 绑定变量;
第二步:绑定完变量,设置填充的百分比对应的数据范围,比如最小值设置为0,最大值设置为1000,当实时数据为300时,填充控件的色块就按设置方向填充整个控件的30%。
第三步:设置填充的方向;
第四步:设置颜色、字体样式等属性,即可正常使用。

2.3.25 流动条控件使用说明

【流动条】控件使用方法如下:如图
第一步:通过【变量选择】设置按钮, 绑定变量;
第二步:绑定完变量,设置判断条件,当判断条件成立时,流动条开始流动;
第三步:设置流动的方向和流动的速度,可以使用【动作预览】按钮体验流动的效果;
第四步:设置流动条的样式,以及流动色块的大小,颜色,即可正常使用。

2.3.26  视频控件使用说明

【视频】控件使用方法如下:如图
第一步:在合适位置放置【视频】控件,并调整大小;
第二步:在视频流的【设置】页面,设置视频流或萤石云视频监控模式。
注:因视频涉及第三方服务,设置内容较多,请参考《EMCP物联网云平台视频使用说明》

2.3.27  柱状图控件使用说明

【柱状图】控件使用方法如下
第一步:通过【选择变量】设置按钮,绑定要展示的数据,可以在一个柱形图控件中绑定多个数据进行多个柱形的展示。同时可以设置,每个数据柱形的对应颜色,如图
第二步:绑定完数据,设置柱形的各项显示样式,就可以正常使用了,如图

2.3.28  饼图控件使用说明

【饼图】控件使用方法如下
第一步:通过【选择变量】设置按钮,绑定要展示的数据,可以在一个饼图控件中绑定多个数据进行展示。同时可以设置,每个数据对应扇形的颜色,如图
第二步:绑定完数据,设置扇形的各项显示样式,就可以正常使用了,如图

2.3.29  安全区功能使用说明

当管理员账号在编辑组态时启用控件的【安全区】功能后,如果普通账号没有对应的安全区权限,在使用此组态时,是无法看到和使用此控件的。
具备【安全区】功能的控件有:【按钮】。
下面以一个例子来演示安全区的使用方法:
第一步:在组态编辑页,将对应的控件的安全区勾选上,可以选择为A、B、C和D,4个区的一个或多个。如图32,蓝色的按钮控件的安全区被设置为A+B+D。如图
第二步:在平台【后台管理】→【账号管理】→【内部账号管理】设置普通账号的安全区权限。如图
                                                             左为安全区A的普通账号,右为安全区为C的普通账号
第三步:在平台【后台管理】→【账号管理】→【内部账号管理】中找到该两个普通账号,分别点击两个普通账号后面的【设备授权】,将刚才设置了安全区的组态设备授权给两个普通账号。
第四步:展示两个不同账号使用此设备同一个画面的效果,如图
因为控件的安全区是A+B+D,而C安全区权限的普通账号的安全区是C,所以其看不到也无法使用A+B+D安全区的任何控件。

2.4 组态编辑技巧介绍

2.4.1 数据监视和控制同框

如上图,组态应用中,很多数据都需要进行监视的同时还需要能够设置。在EMCP云平台的组态功能中,数据监视使用的是“数显框”控件,数据设置使用的是“控制按钮”控件,下面为大家介绍如何使用这两个控件来实现数据的监视和控制同框功能。
 第一步: 在【变量管理】中添加该变量,【读写方式】设置为“读写”。如图。
第二步: 在组态编辑页,添加一个数显框和一个控制按钮控件,分别绑定该变量:
第三步:将控制按钮控件的“文本”内容删除并输入一个空格,将其“填充-颜色”设置为“隐藏”。此时,控制按钮控件变成了一个“透明”的控件,将控制按钮覆盖在数显框控件上,这样就实现了,在同一个位置既能显示数据又能进行设置的功能。
最终效果如下:
--------------------------END--------------------
河北蓝蜂信息科技有限公司
技术支持:400-808-6168
官方网站:www.lanfengkeji.com
帮助中心 帮助中心
3 个月前
465

扫描下方二维码手机阅读文章