[发明专利]基于SVG的Web组态画面存储与展示系统和方法及介质

说明书

本发明提供一种基于SVG的Web组态画面存储与展示方法和系统，通过拖拽配置的方式搭建监控画面，将监控画面对应的画面元素内容生成XML格式文件，生成画面脚本，将XML格式文件、画面脚本保存并发送至后台服务；后台服务接收XML格式文件、画面脚本，将XML格式文件、画面脚本转换为能够在浏览器中运行的HTML页面；画面运行态加载监控画面，在浏览器中渲染画面元素，向后台服务进行监控画面的注册、监控画面的数据刷新，响应用户交互事件，对画面元素进行刷新。实现浏览器环境下的工业监控HMI软件，提高企业生产效率，降低企业在实施工业监控项目中的成本，最终为企业管理层提供直观、全面、准确的决策依据。

技术领域

本发明涉及工业监控领域，具体地，涉及一种基于SVG的Web组态画面存储与展示系统和方法及介质。

背景技术

在传统的SCADA系统中，HMI部分都是以CS模式进行部署和开发，但是随着BS应用和移动应用等的不断普及，传统的HMI软件也在向Web端迁移。随着Web相关技术最近几年非常迅速的发展，HTML5、Javascript、CSS3以及WebGL等相关标准也在不断完善，其中SVG技术使得可以在浏览器引擎中展现矢量图形，并且能够以对象模型的形式来组织画面中的各种元素。基于Web技术的HMI系统使用非常方便，可以说随时随地能够对用户所关心的资产进行监控，提供给管理层决策依据，对于企业来说能够真正提升生产效率，大幅降低成本。

Web HMI系统无需在客户端安装任何软件或插件，用户通过无处不在的浏览器端便可以直接使用，同时可以无缝扩展到移动端；Web HMI系统能够实现跨平台部署，可以在Windows、Linux和iOS、Android等系统中运行；Web HMI系统能够很方便的实现集中管理，通过页面间的链接与嵌入可以和已有的各种信息化系统进行集成；Web HMI系统更加易于使用，对于众多需要在工程现场进行项目实施的企业来说，基于浏览器的HMI系统更易于上手，能非常大程度降低对实施人员的培训成本。

专利文献CN108509192A公开了一种基于组态软件SVG发布服务的Web显示方法，在组态软件原有图形引擎的基础上将原先的图形界面转换为SVG格式并发布到SVG发布服务器上，浏览器从SVG发布服务器上下载SVG图形文件和相应脚本，在Web浏览器中进行展示，用户在Web浏览器中与图形的人机交互将由JavaScript脚本实现。该方法可以为降低Web程序开发的工作量，图形数据定义比较简单，只需在组态软件中进行定义即可，工作量相对较少，扩展了Web端的使用范围。但是上述专利文献无法让用户直接在浏览器环境中通过拖拽方式制作组态画面，编写事件响应脚本以及对图形元素进行关联点操作；并且也没有说明，如何在组态软件将画面转换为SVG格式的图形表示，因为每个组态软件定义的格式都不相同，所述转换过程将会非常复杂，如果处理不好，很容易出现画面不一致的情况。

专利文献CN108089857A公开了一种工业web实时监测页面的生成方法，所述生成方法包括：增加用于生成web页面的对应输入接口；在组态系统生成组态页面的同时，自动获取相关组态图元；根据组态图元的类别，将其转换为对应的SVG图元；获取与SVG图元关联的变量名称，通过webSocket协议接口获取实时数据；通过SVG事件的关联响应,采用javascript脚本进行数据调用；定义SVG的事件，在事件函数中定时调用实时数据，并赋值给对应的SVG图元显示；重复上述步骤，即可完成整个工程的web页面生成。可有效解决采用传统ActiveX控件嵌入方式发布的代码重复编写、浏览器不兼容、系统不安全等诸多问题。但是上述专利文献仍然需要在C/S客户端软件中制作组态画面，无法通过拖拽配置的方式直接在浏览器中搭建组态画面。只是应用了SVG标准中的各种图形展示，并不能有效扩充其他展示形态，比如趋势曲线控件、视频展示控件和实时报警列表控件等。

发明内容

针对现有技术中的缺陷，本发明的目的是提供一种基于SVG的Web组态画面存储与展示系统和方法及介质。

根据本发明提供的一种基于SVG的Web组态画面存储与展示系统，包括画面设计器模块、后台服务模块、画面运行态模块；