1. 工程嵌入式模板控件库
用于在工程内创建自定义的组合控件模块库,用于通过对控件库中模板进行修改后,可批量更新至该工程所有HMI页面,减少重复性工作,提升效率。
该控件库里的模板控件相对于系统控件库,有四个特点:
1)该控件库里的模板控件仅对所属工程有效,不属于也不影响也应用于其他工程;
2)该控件库里的模板控件均为组合控件,且以一个panel为底座,即不管这个组合控件由多少个系统控件组成,都需要在一个panel内进行创建;
3)一个panel底座将拥有一个且唯一的类名标识(模板标识),即系统将以这个类名来识别一个模板控件,以此为基础进行批量更新;
4)工程的导出和导入,都会携带这个模板控件库。
1.1. 图标与入口
打开工程嵌入式模板控件库的路径:工程->HMI->组态->底部栏点击工程嵌入式控件库图标,即可进入。

1.2. 模板控件库的创建
模版控件库的创建有两个入口,一个是从HMI页导入进行创建,一个是从底部模版控件库图标进入模板控件库界面进行新建。
1.2.1. 从HMI页导入
在HMI组态的时候,Panel控件以及它所携带的子控件集合,具有导入到模板控件库的功能,即点击Panel控件,通过配置面板的导入到模板控件库图标,即可将当前Panel控件及内容作为模版导入到该工程的模版控件库中。
导入完成后,从底部栏打开模板控件库管理界面,可以看到当前Panel已经被导入到其中,以供管理和组态:
1.2.2. 从模板控件库创建
从底部栏打开模板控件库界面,在这里可以直接创建新的模版,具体组态方式和HMI基本组态方式相同。
不同是所有的模板,均需要以一个Panel控件为基础,作为一个模板元素组合的载体。
1.3. 模板控件库的组态与使用
模板库里的模板控件组态方式与HMI组态相同,通过选择和拖拽控件以及设置配置面板中的参数、编写脚本来进行操作。
具体组态的操作在此不进行详述,以下将对于脚本的编写和在工程中的应用进行说明。
1.3.1. 脚本的编写
需要特别注意的是,在模块控件库中编写脚本,要尽量使用this,而非控件的id,原因是,在一个组合出来的模板,在导入到工程中的时候,需要多大量的控件进行重新计算和设置每个控件的id,在对于比较复杂的情况的时候,很有可能会导致部分id未成功修改或id变化之后,对应的关系无法正确识别而导致脚本失效,所以在组合模版中的脚本,要尽量避免使用具体的id,而该用this,this代表控件本身,在Panel里写的脚本,this就代表Panel本身,在文本控件里写的脚本,this就代表文本控件本身,这样之后,不管是复制模板还是导入到工程还是批量修改,都不需要再进行脚本的逐一检查和编辑。
那么,如何在Panel里的一个控件中编写脚本的时候,如何控制另Panel里的另一个控件呢?可以通过这种控件的从属关系进行,有如下两种情况:
l 通过控件自带类名
假如在Panel中,想在一个Canvas控件的脚本中,从另一个文本控件获取到位号名以及位号值,并且这个Panel下只有一个目标控件类型(如文本类型),那么就可以直接使用控件自带类名来调取:
Canvas脚本:
说明:
1)$(this).parent()是指当前控件(Canvas)的父级控件,也就是Panel;
2)$(this).parent().find(“.text”)也就是从Panel中寻找一个文本控件
l 通过自定义类名
假如在Panel中,想在一个Canvas控件的脚本中,从另一个文本控件获取到位号名以及位号值,但是这个Panel下只有多个相同类型的控件(如文本控件),那么就不能通过类型来调取了,需要给目标控件事先自定义个类名(在目标控件的配置面板中填写一个唯一的类名,在Panel内唯一即可),然后就可以通过这个类名来进行调取:
Canvas脚本:
说明:
1)$(this).parent()是指当前控件(Canvas)的父级控件,也就是Panel;
2)$(this).parent().find(“.AI001”)也就是从Panel中寻找一个类名为AI001的控件
1.3.2. 在工程中的应用
l 将模板添加到当前HMI页中
在模板控件库中编辑好的模版,可以添加到当前打开的HMI页面中。
点击模版中的Panel,在配置面板中点击嵌入到当前HMI的图标:
即可将该模版添加到HMI页中,可自行调整位置和再编辑操作。
l 将模板批量更新到当前工程中(通过模板标识)
所有模板控件库中的模板,其最底层的Panel都会自动生成一个pmd开头的类名,且在模版库中唯一的编号:
这个编号是由系统生成的,是在模板库中创建的时候,或者从HMI页导入进入模板库的时候自动产生的,如果是从HMI页导入的,那么HMI中的原控件组合的最底层Panel也会自动生成这个标识,代表这是一个模板库中的模板,这样在模板库中编辑之后,就可以根据这个标识来进行批量更新,并且支持批量更新到所有HMI页,只要有相同的标识编码即可。
在模板控件库里编辑好的模版,点击模版中的Panel,在配置面板中点击批量覆盖当前工程的图标,即可更新到所有HMI中。
l 旧的工程中没有模版标识的控件组合如何实现批量编辑更新
对于已有的项目,已经组了很多相同的控件组合到各个HMI中,这些控件组合都是没有模版标识的,如果要进行批量操作,需要先把一个组合导入到模板控件库,这个时候就产生了一个pmd开头的模板标识编号,将此编号复制,并逐一添加到各个HMI页的同类型的组合控件的Panel上,后续就可以方便进行批量修改了。
2. 工程控件Excel批量编辑
指将页面里的控件部分或者全部导出为Excel,在Excel中进行编辑,然后在重新导入回工程,这里的批量编辑涵盖当前工程下的所有HMI页面。
Excel的整个工程的批量编辑分为系统控件和模版控件,系统控件是指工程下所有HMI页里的控件,模版控件是指该工程下的模板控件库里的所有模版的控件组合。
2.1. 系统控件的批量编辑
2.1.1. 入口
2.1.2. 导出Excel
根据实际需要可以按控件类型单独导出也可以导出全部控件。
提示:如果选择全部控件,并且连接的数据库为异地数据库,尤其是外网的远程数据库,可能会需要等待较长时间。
2.1.3. Excel编辑
目前仅支持对控件title、控件描述、宽度、高度、位号、载入脚本、实时脚本、点击事件/输入事件脚本进行编辑,其他列不要进行修改,尤其是id列用于导入时进行精准匹配,如果修改了则会导致对应的控件无法成功完成更新,非id列但是标识为只读的列,即使修改了,也不会进行更新。
2.1.4. Excel导入工程
将修改后的Excel保存,并通过以下位置进行上传和导入操作:
提示:在Excel批量导入更新之前,尽量对工程进行备份,避免意外的发生。
导入成功并确认之后,列表会自动刷新,重新打开HMI的组态界面,就可以看到更新后的内容。
2.2. 模板控件库控件的批量编辑
2.2.1. 入口
2.2.2. 导出Excel
根据实际需要可以单独导出某个模板也可以将模板库中的所有模板全部导出。
提示:为了便于分辨模板的内容,建议每个模板都在Panel的配置面板中填写好控件说明。
2.2.3. Excel编辑
目前仅支持对控件描述、宽度、高度、位号、载入脚本、实时脚本、点击事件/输入事件脚本进行编辑,其他列不要进行修改,尤其是id列用于导入时进行精准匹配,如果修改了则会导致对应的控件无法成功完成更新,非id列但是标识为只读的列,即使修改了,也不会进行更新:
2.2.4. Excel导入工程
将修改后的Excel保存,并通过以下位置进行上传和导入操作:
提示:在Excel批量导入更新之前,尽量对工程进行备份,避免意外的发生。
导入成功并确认之后,重新进入工程嵌入式控件库界面,就可以看到更新后的内容。
3. 授权码升级
由取Mac地址修改为取cpu ID编号:
4. 3D-Surface控件
新增控件,用于显示3D图形,数据源需配置x、y、z轴的三维数据,均为数组格式,在sepsim中配置。
5. 增加Redis数据源
增加了对redis数据源的支持,便于在不同系统或模块之间进行简单的数据交换,一方系统将数据存入redis,另一方从redis读取,双方定义好数据格式即可。
HMI可实现从redis读取和回写功能,应用效果和操作步骤基本与连接sepsim源相同。
在redis中,是根据key名来查询和返回对应的value值,key名在redis中是唯一的,名字相同会覆盖。在兼容aedm、atsm等软件格式的情况下,HMI中配置的位号名,如TJ_ZR_ALMCOUNT_101,则在redis中的key名会体现为“tag:TJ_ZR_ALMCOUNT_101”,即在位号名的前面加上“tag:”即可;redis中value的格式为“20231221100100;99;192”,即:时间戳;值;质量戳。
6. 传参动态数据端口
为方便线上运行时可以自由的动态变换数据源地址(目前应用于OTS系统),HMI浏览页增加动端口传参功能,即根据传参动态设置所访问的HMI页的数据源端口。
格式为在原HMI浏览地址的基础上,增加一个ioUrl的参数,如:
Hmi-explorer:
http://127.0.0.1:9999/hmiExplorer/?pipe=hmi240321111834&ioUrl=http://127.0.0.1:2291
Hmi-studio:
http://127.0.0.1:9999/hmi/?pipe=hmi241123153803&ioUrl=http://127.0.0.1:2291
实现效果就是,虽然该HMI页面配置的地址可能是http://127.0.0.1:2289,但是如上加了ioUrl参数之后,实际HMI页面在载入并运行的时候,会变成连接2291端口。
提示:因考虑到实时数据接口和历史数据接口可能是不同的,所以设计为实时数据接口和历史数据接口的动态传参是分开的,历史数据源参数名为trendUrl,如果需要修改历史数据源地址,需要增加的参数为:&trendUrl=http://127.0.0.1:2291
7. 增加历史数据导出功能
在脚本帮助里的一个模块“通用脚本”中或页面搜索“历史数据导出”,即可找到使用历史数据导出的使用说明。
脚本如下:
//历史数据导出csv
var hmiCode=""; //非必填,默认为当前页面的HMI代码
var tags="1601_FT_337.PV"; //必填项,位号集合,多个位号用英文逗号隔开
var startTime=""; //非必填,默认为最近的30分钟
var endTime=""; //非必填,默认为最近的30分钟
var interval="2"; //历史数据之间的时间间隔(秒),非必填,默认为10秒
var ioUrl=""; //历史数据接口地址,非必填项,默认为当前HMI页配置的历史数据接口地址
exportTagHistory(hmiCode,tags,startTime,endTime,1,ioUrl);
配置的参数有6个,其中必填项只有位号名tags,支持填写多个(可从其他控件中获取),其他参数上面脚本注释中有说明。直接将脚本贴进点击事件里即可。
一般应用在一个按钮的点击事件中,导出的格式为cvs格式,历史数据源于配置的历史数据接口地址,也就是trendSvr格式。
提示:数据的时间跨度不宜过长,如果时间较长,需适当增大interval值,避免因数据量过大而导致导出失败或导出时间过长。
8. 页面增加全局样式表
页面全局样式表,主要为方便批量控制页面内相同类型的控件的样式,尤其需要中途修改某些控件的样式的时候,不需要再逐个的去修改。
但前如果某个具体的控件自己本身已经设定了样式,则以自身的设置为优先。
全局样式表的设置位置在“页面”的配置面板中:
图中的.mybt代表样式名,.开头代表后面的名称就是样式名,在配置面板中也就是类名,也就是页面中的控件如果类名设置了“mybt”这个名称,则会受此处的样式控制。
9. 报警历史存储和查询功能
HMI增加了对报警信息的存储和查询功能,报警信息,在页面上通常体现为类似于顶部栏展现的报警列表,报警数据来自于sepsim,是实时报警数据,所以接口为实时数据接口。
9.1. 存储
HMI的存储方式为,后端定时读取sepsim的报警实时数据并进行存储,这个存储需要两个参数,一个是最大支持多少数据量,二是存储哪些位号的报警。
9.1.1. 最大存储量的设置
最大存储量的设置是在application.properties配置文件中。
提示:HMI因受限于数据库的类型,如sqlite性能不如kingbase和mysql,mysql不如sqlserver,也可能数据库中不同的设置造成不能的性能影响,所以HMI默认最大存储量为60万条,但根据数据的性能条件来看,用户可根据自身情况在application.properties中调节这个限制,参数名为sepsim.alarm.hisdata.max,此参数为非必填(可以没有此参数,但是有此参数就不能为空,且值必须为数字),未设置此参数的情况下,默认就是存储60万条。
9.1.2. 报警位号设置
HMI默认并不存储报警数据,触发报警数据的存储设置是在D&R模块,不管是在Explorer还是Studio,都有一个D&R模块,这里的设置在两个版本里都是相通的,所以在其中一个D&R里设置即可。
在D&R里新增一个设置,代码填“alarmdb”,名称可以随便填,如“报警历史数据设置”
提示:如果未配置位号描述,则在页面里,比如表格来展示的时候,就无法按描述来显示报警信息,只能显示位号名称、事件和报警类型(H、HH、L、LL);
另外建议尽量设置具体的位号,而不是默认都填all,因为数据量过大,一个是存储的时长短,二是太大的数据量会导致显示卡顿,影响界面体验。
9.2. 查询
报警历史数据的查询主要用脚本来实现,页面展现一般是列表形式,所以主要使用表格控件。
如果需要实时刷新列表,则把脚本填写到实时脚本中,否则就填写到载入脚本。
脚本的使用,可以点开脚本帮助,并导航到报警历史
主要常用需要修改的参数有位号名(也可从其他控件获取)、每页条数和表格控件的id。接口地址可以通过页面实时数据地址获取:var apiUrl = $(“#ioUrl”).val();
脚本帮助中也提供的上下分页的使用脚本。
案例脚本:
10. Ctrl多选编辑面板增加整体移动功能
11. 内存限制和超限自动重启功能
增加最大内存限制的设置,如果HMI运行的java内存超过限制,则HMI会在1小时内进行重启。
11.1. 配置方法一(手动配置启动命令):
提示:此设置为非必须,即无此设置也可以正常运行,如果现场环境需要限制,则进行此限制。为避免在白天使用期间重启导致影响工作,超限重启会在1小时内进行,因内存轮询检查周期即为1小时,并且重启时间会比较短暂,大约10秒内完成。
注意配置的启动命令server.commond.restart后面的路径在windows环节下需用双反斜杠:
server.commond.restart=.\\jdk-11.0.1\\bin\\java-sephmi -Dfile.encoding=utf-8 -jar sephmi-studio-4.5.jar --server.port=9999
在linux下是正斜杠:./jdk-11.0.1/bin/java-sepshmi -Dfile.encoding=utf-8 -jar sephmi-studio-4.5.jar --server.port=9999
如果设置的话,建议不低于2G;同时在设置之后,建议去掉run.bat里的启动内存设置,改为最简洁的启动方式即可:
11.2. 配置方法二(不配置启动命令)
在不配置启动命令的情况下,程序在识别到内存超出后,启动命令会从当前jar所在文件夹内搜索bat文件,并从中自动识别启动命令并执行启动。
所以这里有两个前提条件:
1)不设置server.commond.onlyshutdown或者设置server.commond.onlyshutdown=false;
2)在jar所在文件夹内,仅有一个bat文件,如果有多个启动SEPHMI的bat文件,可能会读取到错误的启动命令。
11.3. 内存超出关闭或重启日志
在jar所在文件夹中,找到logs文件夹,并打开要查看的日期文件
12. 新增和常用脚本使用方法
12.1. AES加密解密方法
加密:
var txt=$("#t4").text();
var txt_sign=encryptAES(txt,null);
encryptAES的第一个参数是原文,第二个参数是密钥,可以自定义一个字符串,只要解密的时候,也使用这个相同的密钥就可以解密,默认也可以不设置密码,填写null即可,不填的时候使用的是系统自带密钥。
解密:
var txt_sign=$("#t5").text();
var txt_src=decryptAES(txt_sign,null);
decryptAES的第一个参数是密文,第二个参数是密钥,需要与加密的时候使用的密钥相同。
提示:加密后,可能会存在一些特殊字符,如加号、斜杠、逗号、单引号、与号之类的,如果要通过get方式进行http传输,则这些符号会被转义或截断,导致无法解密,所以如果要进行链接传输的话,加密的时候可使用encryptAES2(txt,null);
12.2. 根据类名循环所有该类名的控件
//以类名“aaaa”为例
$(“.aaaa”).each(function(){
var vl = $(this).attr(“val”);
.......
})
12.3. 修改按钮的显示文字
//将按钮文字设置为“取消”
$(“#bt1”).val(“取消”);
12.4. 历史数据导出csv
//历史数据导出csv
var hmiCode=””; //非必填,默认为当前页面的HMI代码
var tags=”1601_FT_337.PV”; //必填项,位号集合,多个位号用英文逗号隔开
var startTime=””; //非必填,默认为最近的30分钟
var endTime=””; //非必填,默认为最近的30分钟
var interval=”2”; //历史数据之间的时间间隔(秒),非必填,默认为10秒
var ioUrl=””; //历史数据接口地址,非必填项,默认为当前HMI页配置的历史数据接口地址
exportTagHistory(hmiCode,tags,startTime,endTime,1,ioUrl);
12.5. 弹窗页设置弹窗标题样式
if(window.frameElement){
var iframeId = window.frameElement.id;
iframeId=iframeId.substring(1);
Var titleObj=window.parent.document.getElementById("title"+iframeId);
//设置弹窗标题文字
$(titleObj).text("xxxxx");
//设置标题文字大小、颜色
$(titleObj).css("font-size","16px").css("color","yellow");
//设置标题栏背景色
$(window.parent.document.getElementById("p"+iframeId)).css("background-color","red");
//设置标题栏高度
$(titleObj).parent().css("height","60px");
}
12.6. 从弹窗里的子页面来关闭这个弹窗
//子页中的按钮,关闭当前弹窗
var frameEle = window.parent.document.getElementById(window.frameElement.id);
$(frameEle).parent().remove();
13. 日志升级
13.1. 分类与统一格式
将日志拆分为系统日志和事件日志,系统日志记录系统运行信息,事件日志主要记录用户操作记录,包括组态记录和运行界面的回写操作记录。
13.2. 定期清理
系统定期清理超过100天的日志。
14. 关于启动命令的说明
14.1. 启动命令
title SEPHMI-V4.5 port:9999
.\jdk-17.0.0.1\bin\java-sephmi -XX:+UseG1GC -XX:MaxRAM=4g -XX:MaxGCPauseMillis=200 -XX:InitiatingHeapOccupancyPercent=35 -XX:ConcGCThreads=4 -Xms3g -Xmx3g -XX:MaxDirectMemorySize=512m -XX:MetaspaceSize=256m -XX:MaxMetaspaceSize=512m -XX:CompressedClassSpaceSize=128m -XX:ReservedCodeCacheSize=128m -XX:+AlwaysPreTouch -XX:+UseStringDeduplication -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=utf-8 -jar sephmi-studio-4.5.jar --server.port=9999
14.2. 一键启动的配置方法
1 [L:\sepsim_web_v4\jdk-11.0.1\bin\java-sephmi.exe] [L:\sepsim_web_v4\] [-Xms4g -Xmx4g -Xmn1g -XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=512m -XX:+UseG1GC -XX:MaxGCPauseMillis=200 -XX:GCTimeRatio=99 -Dfile.encoding=utf-8 -jar sephmi-studio-4.5.jar --server.port=9999] 1
说明:
1、第一个中括号里的内容为jdk的exe路径,如果bin下有java-sephmi.exe则在脚本里尽量用这个名字,用于与其他java在资源管理器中进行区分,如果没有,则可以用java.exe;
2、第二个中括号的内容为sephmi-studio-4.5.jar所在的目录,最后有斜杆符号;
3、第三个中括号的内容为run.bat里的启动参数,详细参数说明见上面8.1中的介绍。
15. 其他
15.1. 复制工程
解决Explorer版复制工程后,脚本中的hmi代码未更新问题
解决Explorer版复制工程后,工程首页小旗子链接不正确问题
趋势图和数组趋势图控件增加线区域颜色设置
解决从工程列表点击小旗子的页面趋势图无数据的问题
关闭在组态页面缩放之后页面自动执行一次保存的操作
液泛图控件增加实时小圆点是否显示的选项
前端增加可调用的传参防篡改AES加密方法
文本控件、canvas、panel、按钮控件点击事件增加下沉效果
完善趋势控件的量程和时间范围的变更情况下的曲线稳定性
修正前端在调用回写函数tagReWriteToUrl时,如果填写了redis接口地址,后端无法正确解析的问题
解决组态页面配置面板移动支最左侧时,脚本编辑器放大越过左侧编辑显示不全的问题
解决energyBL柱状图控件点击弹出D&R报警详情窗口时tagName和alarmType获取失败问题
修改公共函数open2Panel,避免url中的参数与paramObj的属性参数重复
运行界面增加鼠标未移动监听,并将未移动时长标识在divMain中为业务提供服务
修复HMI预览页面传参zoom缩放后,页面弹出和拖动位置不准问题