基于HTML5的DCS可视化远程实时监控系统设计

打开文本图片集

摘 要：研究了现场总线在DCS监控系统中的应用以及基于Canvas和WebSocket技术实现DCS实时数据Web发布的可能。利用Canvas实现DCS实时、历史曲线以及流程监控图的浏览器端无插件显示。采用WebSocket通信协议实现实时通信，提高了网络通信效率，降低了服务器的通信压力。实例证明所设计的监控系统可视化效果良好、稳定且易维护。

关键词：实时监控；DCS；现场总线

DOI：10.16640/j.cnki.37-1222/t.2017.03.202

0 引言

工业互联网时代将会带来开放、全球化的网络，它将把人、机器与数据结合起来，这就要求更高、更实时的通信方式来提高工业控制中的数据传输[1]。传统电厂信息化监控系统大多采用轮询或者Comet的方式进行数据传输，这在工业互联网的时代已经不能满足要求。

电厂厂级监控信息系统是基于電厂DCS系统实现人机交互的重要组成部分，它可以直观的显示监测节点的实时以及历史数据，方便了解和分析电力设备的运行状态[2]。然而，当前的大部分DCS系统所提供的监控画面只能在安装了特有的客户端之后才能查看，这显然不易于随时随地了解设备运行情况。为此，本文提出了基于HTML5实现实时监控系统的方法和思路。

近年来出现的HTML5技术在HTML4的基础上新增了许多控件与元素，比如data、article等。在新功能上，HTML5增加了语义化标签、音频、视频、Canvas以及实时通信协议WebSocket等先进技术。Canvas实现了前端页面的动态显示，WebSocket协议实现了数据的动态实时传输。基于此，本文提出了一种DCS数据监控的实时可视化方法，服务器端采用了java语言实现WebSocket Server，客户端采用Canvas绘图技术绘制动态页面，并结合实例对系统进行了评估与测试。

1 实验对象模型设计

20世纪80年代发展起来的现场总线主要用于实现控制设备之间的双向串行多节点通信，它的出现为打破自动化系统的信息孤岛创造了可能。现场总线的出现节约了现场控制系统成本，同时其良好的互操作性以及系统拓展性都促进了传统DCS的系统结构转变。因此在现场总线系统尚未成熟时，DCS与现场总线技术的结合为我们提供了比较好的技术选择[4]。

DCS分散控制系统的现场仪表大多由传感器与调理电路组成，其采用4-20mA标准电流输出与二线制连线。被测量量不论是压力、温度或是其他物理量都会被转换为4-20mA的标准量传送给DCS系统。然而传统DCS现场仪表接线复杂、不易维护且拓展性能差等缺点早已成为制约工业自动化发展的一大障碍[5]。现场总线仪表的使用可以大量采集控制量与过程信息，实现就地处理、就地控制等，这样更方便实现分散控制。现场总线仪表能实现自己管控自己，能很大程度上保证工作的稳定性，其内部的微处理器能够进行自我非线性校正、频率和温度补偿。在开放性与互换性方面，不同厂家生产的产品只要采用国际标准，其硬件软件连线方式就可以互相兼容，这也对用户选择不同的现场总线仪表带来了极大的方便。现场总线仪表可以互相交换信息完成闭环控制的功能，也可以通过标准总线接口与DCS系统交换信息。

本文根据百万千瓦超超临界燃煤机组电厂生产流程及工艺，设计了一套一体化半实物模拟仿真对象。对象模型的设计按照某电气集团1000MW超超临界直流锅炉图纸按相应比例缩小制作。锅炉以整体适宜，其余（过热器、再热器、水冷器、省煤器、汽水分离器）做出外形展示。脱硝脱硫部分（烟气部分）按1000MW机组脱硝脱硫布置的流程图按比例设计，对象测点根据实际电厂的测点分布，测点数据能够被DCS采集进行逻辑控制和联锁保护等。同时，对象的现场采用了HART、FF、ProfiBus-DP/PA等先进智能化仪表，实现温度、压力、流量等信号的现场总线方式传输。对象的设计符合“两化融合”、“工业4.0”等智能工厂建设需求，仿真对象如图1所示。

2 WEB监控系统设计

2.1 现场控制站与WEB服务器的通信设计

现场总线仪表采集的实时数据传入现场控制站，现场控制站与WEB服务器之间的通信设计显得尤为重要。本文中现场控制站与WEB服务器的通信采用基于TCP/IP协议的Socket技术。Socket作为一个完成通信的句柄，主要用来描述IP地址与相应的端口。通信连接分为三个步骤：WEB服务器启动监听、客户端请求连接及连接确认。WEB服务器作为Socket套接字的服务器，现场控制站作为Socket套接字的客户端。具体通信的流程图如图2所示。

客户端的Socket通过指定的IP地址与端口号请求连接服务器，服务器监听到连接请求后会建立一个新的进程并将服务器端套接字描述发送给客户端，客户端接收并确认服务器的描述信息后，连接完成。此后，服务器端套接字会继续监听其他客户端是否有连接请求。

2.2 服务器端与前端页面的数据通信设计

WebSocket是HTML5规范中的一个重要组成部分，也被标榜为下一代客户端-服务器异步通信的标准[6]，WebSocket通过WebSocket协议在第一次握手时建立。浏览器端通过固定的端口（80和443）和服务器请求握手，此时服务器通过Http header来判断请求是否是一个WebSocket请求，如果是，就将协议升级为WebSocket协议，此后就进入双向长连接的数据传输阶段[7]。WebSocket协议的工作示意图如图3所示。

WebSocket只需要发送一次请求就可以建立连接，且发送请求的header比传统的http请求更小，可以节约带宽以解决消息滞后的问题[7]。WebSocket使用相对简单，首先需要根据客户端提供的URL创建一个WebSocket对象。此后在服务器端发送数据之前建立一些监听事件，监听事件建立完成之后只便可以调用send函数来发送数据，数据发送完成之后调用close函数。

2.3 基于Canvas的实时数据显示

前端采用Canvas画布技术绘制监控画面，可以实现在浏览器上无插件显示，同时Canvas提供了通过javascript绘制各类简单图形（路劲、矩形、圆弧、字符等）的方法，因此，使用Canvas绘制图形非常方便。HTML5是W3C制定的标准，这使得它基本兼容所有浏览器，Canvas允许浏览器直接绘制矢量图，在有硬解码的帮助下，绘图效率得到大幅提升。使用Canvas绘图也非常简单，只需要在HTML页面中建立一个标签，然后使用其内置对象getContext（‘2d’）即可绘图。

DCS可视化监控画面设计采用基于Canvas的Sparkline和ECharts圖表控件实现。Sparkline是一类信息体积小和数据密度高的图表，目前它被用作一些测量相关变化信息呈现的方式。Sparkline常常以一组多条的形式出现在柱状图、折线图当中；ECharts是商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11、chrome、firefox、Safari等）。底层依赖轻量级的Canvas类库ZRender，提供直观、生动、可交互及可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）等火种图形。

监控画面包括实时数据的缩略图、实时数据的完整图以及一些历史数据图。对于实时数据的缩略图，将后台压缩的数据在前端通过jquery解析并赋值给相应变量，利用Sparkline绘制小体积的图表。

对于完整的实时数据图以及历史数据图，首先根据标签选择不同机组不同参数确定查询条件，然后服务器根据查询条件推送不同的json数据，在浏览器端将后台读取的实时数据存入数组Data0中，Data0中包含实时数据以及时间标签，此时通过将Data0中的第（s+1）*n个元素读出并存入数组Time0中。在浏览器端调用echarts.init（）将图表实例化，再接受json数据后开始定义option格式，最后按照定义好的option进行绘制图像myChart.setOption（option）。当服务器有新的数据推送时，调用myChart.clear（）清空图表，调用myChart.dispose（）释放图表，然后重新定义图表。图4所示为根据机组DCS监控系统实现的远程实时趋势显示。

为方便PC端与移动端同时访问监控画面，本文中监控画面都采用了自适应网页设计。自适应网页设计（Responsive Web Design）是由Ethan Marcotte在2010年提出的，指可以自动识别屏幕宽度，并做出相应调整的网页设计。自适应页面的设计实现相较容易，首先在页面头部加入viewport元标签，然后定义initial-scale属性的值为1，这样做的目的在于定义网页宽度默认为屏幕宽度，其次不能使用绝对宽度布局网页，因为网页会根据屏幕宽度调整布局。再者字体大小不能使用px定义，取而代之应使用相对大小em定义。

3 结束语

本文设计的基于现场总线的DCS可视化实时监控系统已经通过测试，被证实是完全可行的。该系统实现了服务器端与浏览器端的全双工通信，降低了网络负荷，实现了无插件的页面动态显示，为DCS监控领域提供了一种新的实时解决方案。

参考文献：

[1]沈苏彬，杨震.工业互联网概念和模型分析[J].南京邮电大学学报（自然科学版），2015，35（05）：1-10.

[2]张桢，牛玉刚.DCS与现场总线综述[J].电气自动化，2013， 35（01）：4-6.

[3]张钊熙.基于B/S架构的DCS现场控制站数据服务器设计[D]. 河北大学，2012.

[4]张靖宇.基于DCS与现场总线集成的管控一体化系统的设计与实现[D].山东大学，2007.

[5]邢建春，杨启亮，王平.新技术形势下DCS的发展对策[J].自动化仪表，2003，24（01）：1-4.

[6]李兴华.基于WebSocket的移动即时通信系统[D].重庆大学， 2013.

[7]郑玲，郑晓天.基于WebSocket的电力系统实时数据更新研究[J]. 计算机与现代化，2013（01）：85-87.

推荐访问:可视化 监控系统 实时 设计 HTML5