基于B/S模式反渗透海水淡化远程监测系统研究

张兵+姜周曙+王剑+陈震南

摘  要： 针对日产10万吨级大型反渗透海水淡化工程，为解决海水淡化流程远程监测系统中实时性弱、可靠性差、操作复杂且资源不能有效共享等问题，研制开发了一套基于B/S技术的远程监测系统。该系统采用WCF通信模式实现本地监测系统与远程监测系统之间通信，同时使用Ajax和jQuery等网络前端新技术，实现了页面的局部刷新。用户可以通过浏览器终端远程访问监控中心服务器，对海水淡化进行实时数据监测，历史数据查询等操作。实际应用表明，系统运行可靠、稳定，能够有效地加强对海水淡化生产过程的实时监管。该系统具有较强的可移植性，可广泛应用子工业自动化、交通运输等各个行业，具有一定的实用价值。

关键词： 反渗透海水淡化; B/S; 远程监测; WCF; Ajax

中图分类号： TN919?34; TP277              文献标识码： A                       文章编号： 1004?373X（2014）24?0001?04

Research on  SWRO remote monitoring system based on B/S?mode

ZHANG Bing， JIANG Zhou?shu， WANG Jian， CHEN Zhen?nan

（College of Automation， Hangzhou Dianzi University， Hangzhou 310018， China）

Abstract： To solve the problems of weak real?time performance， poor reliability， complex operation and low efficiency resource sharing in the remote monitoring of the large?scale SWRO system whose daily production is 10 000 t， a remote monitoring system based on B/S technology was developed. WCF communication mode is used in this system to realize the communication between local and remote monitoring systems and the network leading technologies such as Ajax and jQuery are adopted to achieve the partial refresh in a page. The users can access the monitoring center server remotely， monitor the real?time data of the SWRO system and query the history data via browser terminal. Practical application shows that the system works reliable and stable， and can make the real?time monitoring of the SWRO process more efficient. This system has an excellent portability and can be widely applied to the industrial automation， transportation industry and so on. It is of high practical value.

Keywords： reverse osmosis desalination; B/S; remote monitoring; WCF; Ajax

0  引  言

淡水是人类社会赖以生存和发展的物质基础之一，是一切生命之源。然而，随着社会的发展、经济的增长、人口的不断增加以及环境的污染，导致淡水资源严重短缺，水资源问题已经发展为一个全球性问题，成为制约人类社会发展的关键因素。在我国，淡水资源总量为28 000亿m3，占世界水资源的6%，但我国人均占有量仅为世界平均水平的[14]，且分布不均，淡水资源已经成为影响中国经济社会发展的重要因素[1]。然而，海洋中蕴含着丰富的淡水资源，采用反渗透海水淡化技术获取淡水资源已成为沿海地区解决水资源问题最有效地的方法之一，受到越来越多的关注[2]。反渗透海水淡化是一个复杂的工艺流程，涉及海水的组分、pH值、温度、产水量、模特性等诸多相互联系、相互影响的变量，必须对其进行实时监控，保证其稳定、高效运行。

近年来， 网络在工业生产中的应用使得工业过程的远程监控功能得以实现。随着Internet和Web的广泛应用，C/S结构已经无法满足当前全球网络开放、互联和信息共享的新要求， 于是出现了B/S（Browser/Server）型模式，即浏览器/服务器结构[3]。在B/S架构下，任何有网络的地方，用户就可通过Web浏览器对工业生产过程进行在线实时监测。Web浏览器以图形、图表等形式向用户显示当前监测对象的实时运行信息。采用B/S架构的优点是用户可在任意平台上实现对服务器的访问，且用户数量不限，同时利用B/S 架构可以大大减少开发工作量，提高产品的可维护性[4?5]。

因此，针对目前海水淡化远程监测系统存在的不足，在物联网技术的基础上，提出一种基于B/S架构的海水淡化远程监测系统，实现对海水淡化工艺流程的远程实时监测。

1  系统整体架构设计

在总体结构设计上，反渗透海水淡化监测系统采用3层架构，整个系统从最底层的数据采集到用户交互，可分为现场控制层、现场监控层和远程监测层。反渗透海水淡化监控系统总体架构如图1所示。

图1 反渗透海水淡化监控系统总体架构

现场控制层主要由各种传感器、仪表以及PLC控制器组成，PLC控制器是现场控制层的核心，负责对现场各种压力数据、流量数据等参数信号的采集，并对现场生产设备运行状况进行实时控制。

现场监控层包括交换机、现场监控主机、海水淡化本地监控系统、Web服务器、数据库服务器等。本地监控系统具有现场监测数据的自动采集、数据处理与保存、动态显示、远程传输、用户管理等功能。系统采用数据挖掘、故障树、信息融合等先进技术，对海水淡化机组运行状态进行故障诊断、故障预测以及故障处理，提高了系统运行的稳定性和可靠性，保证了机组高效运行。

反渗透海水淡化远程监测系统采用基于B/S模式的ASP.NET技术，用户可以通过浏览器终端输入海水淡化本地监控系统服务器IP，以动态网页的形式实时监测海水淡化生产状况，以Flash动画、曲线等方式显示实时监测数据，并拥有故障报警、历史数据查询以及水质监测数据查询等功能。系统设计了管理员和操作员两种用户权限，享有相应权限的用户可执行权限内的操作，对生产设备参数以及水质情况进行远程监控管理。只要有网络的地方，就能通过浏览器对海水淡化整个生产过程进行实时在线监测，获取海水淡化设备实时运行信息。系统功能架构如图2所示。

图2 远程监测系统功能架构

2  软件实现的关键技术

2.1  远程WCF通信

WCF是Microsoft为构建面向服务的应用提供的分布式通信编程框架，是.NET的重要组成部分，使用该框架，开发人员可以构建跨平台、安全、可靠和支持事务处理的企业级互联应用解决方案[6]。WCF通信模型如图3所示， 客户端与服务端通过消息在匹配的访问点之间进行信息交互， 基于消息的通信机制是 SOA架构的特点[7]。服务端作用是实现服务并对客服端进行相应，主要包括服务契约的设计和实现以及配置WCF服务的Endpoint设置。

海水淡化远程监测系统采用OPC通信[8]和WCF通信相结合的通信方式，本地监测系统通过OPC通信方式读取PLC控制器上的数据，并且通过WCF通信方式向Web网页发送本地监控端采集的时间监测数据，实现对海水淡化整个运作过程的远程实时监测。

<＼＼192.168.6.11＼现代电子技术14年37卷第24期＼Image＼07t3.tif>

图3 WCF通信模型

2.1.1  WCF服务的实现

本地监测软件是基于.NET的Windows窗体应用程序，开发工具是VS 2008，WCF选择本地监控软件作为承载服务的宿主，远程监测系统通过互联网调用WCF服务提供的远程方法。系统中定义了一个IMoveDataContract接口和一个MoveDataContractsService类，用于为远程监测端提供远程服务，服务契约设计如表1所示。

表1 服务契约设计

定义好接口后，定义一个MoveDataContractsService类实现接口中定义的抽象函数。服务实现后在服务的宿主本地监测软件的程序配置文件App.config文件中用XML语言定义终结点额地址、绑定和契约。配置文件中的代码如下所示。

behaviorConfiguration="metadataBehavior"

name="DesailinationWCF.MoveDataContract

sService">

actsService”   binding="wsHttpBinding"

contract="DesailinationWCF.IMoveDataContract"/>

2.1.2  远程监测端即客户端的实现

远程监测软件的开发工具是VS 2008，启动海水淡化本地监控软件即服务端后在工程中添加服务应用，工具自动生成代理类并配置访问点。在远程监测系统中实例化代理并调用服务契约中的函数，从而实现服务的调用。

2.2  Ajax技术在前台网页中的实现

Ajax是一种使用客户端脚本并能与Web服务器交互的客户端Web开发技术，它的特点在于Ajax是基于客户端的，并能够以异步的方式与服务器交互[5]。Ajax根据“按需取数据”的原则，大大降低了冗余请求及响应对服务器照成的负担[9]。无刷新更新页面减少了用户心理和实际等待时间，它只和服务器交换有用的数据，而页面元素、样式等一些不必要的数据就不重新从服务器端加载，减少了宽带消耗[10]。海水淡化本地监测系统中，系统每隔8 s采用OPC通信协议从PLC控制器中读取一次数据，在远程监测系统中，为了显示最新采集的实时监测数据，系统必须每隔几秒刷新一下界面，以显示最新监测数据。传统方法是用在Aspx页面开头head中加Refresh标签

来实现，这种方法会刷新不需要更新的页面元素使整个页面回发，增加界面响应时间，并影响用户对界面的操作。为避免出现整体闪动提高页面响应速度，系统使用Ajax技术来对界面进行定时局部刷新。系统需要刷新的界面使用ASP.NET Ajax脚本库ScriptManager，UpdatePanel 和 Timer定时器来对系统局部空间进行刷新[10]，主要代码如下所示：

<！—需要定时刷新的控件或THML元素 -->

ControlID="TimerRaise"EventName="Tick" />

海水淡化远程监测系统，每隔8 s触发一次定时器事件，对界面进行局部刷新，显示海水淡化过程中设备以及水质参数等实时数据，实现对反渗透海水淡化工艺的远程实时监测，保证系统稳定高效的运行。

2.3  jQuery在系统的应用

为了使界面具有更好的灵活性和友好性，系统开发周期更短，该系统中使用一个JavaScript著名的开源库jQuery技术，jQuery以简单的代码实现更强大的功能简洁、快速、灵活的JavaScript框架[9]。引入jQuery后，开发人员能做到“写得更少，做得更多”，能将JS代码和HTML代码完全分离，便于代码的维护和修改，从而减少网络页面布局时间，提高开发效率[11]。

海水淡化远程监测系统中大量使用了jQuery插件，由于其具有和墙的扩展功能，根据系统的实际需要进行了大量的代码扩展，以满足系统的需要。大量插件在系统中的运用实现了与Ajax技术的完美融合。应用时将jQuery框架文件保存在项目文件夹JS中，在页面的

加入以下代码：

系统使用该插件来控制界面中实时监测数据的曲线动态显示，界面更加友好。

3  系统主要功能模块的设计与实现

3.1  Flash动画显示界面

用户由系统登录界面通过输入相应的用户名和密码，经Web服务器验证通过后进入远程监测系统的Flash动画显示界面，如图4所示，该界面提供Flash动画模拟现场生产工艺流程，把海水淡化工艺流程、特点、工作原理以动画的形式立体呈现出来，并在动画中显示生产设备参数以及各阶段水质状况等监测数据，使用户直观、详实、全方位动态的监测海水淡化机组的实时运行状况。同时，在网页的左侧栏提供相应关键数据的报警信号。点击界面上的链接可以跳转到相应的界面，如数据曲线显示界面、信息查询界面、水质查询界面、故障报警界面等。

3.2  数据文本显示界面

该界面显示了海水淡化过程中所有的监测数据，包括电机参数，水质参数，流量参数，液位参数以及压力参数。并根据海水淡化工艺流程，将实时数据按预处理、前处理和反渗透等几个阶段分开显示，使数据显示更加清晰有条理。数据文本显示界面如图5所示。

图5 数据文本显示界面

3.3  数据曲线显示界面

数据曲线网页采用HighCharts控件对不同类型的数据进行分开显示，如流量数据、压力数据、水质参数数据等。系统定时绘制监测数据动态曲线，使用户对监测数据的整体变化趋势有更直观的了解。曲线显示界面如图6所示。

图6 曲线显示界面

3.4  信息查询界面

历史数据查询界面包括历史数据查询以及各水质监测点的水质监测数据查询。系统采用数据库是SQL Server 2005， SQL Server是一个关系数据库，具有强大的数据处理功能。用户可自主选择查询条件，点击查询按钮，向Web服务器提交用户查询请求。Web服务器调用数据库服务器中的相应数据，发送回页面进行表格数据显示。数据表格采用分页技术，每页显示固定的数据行，用户对海量数据的查询一目了然。历史数据查询界面如图7所示。

图7 历史数据查询界面

4  结  语

本文设计了一种适合对反渗透海水淡化整套生产设备进行远程在线监测，获取设备实时运行状况的新型远程监测系统，并给出系统的总体结构。该系统基于B/S架构，监测端可以位于任何与Internet相连的地方，使用户可以方便有效地掌握系统的运行状况。系统采用WCF通信模式，实现本地监测系统与远程监测系统之间的通信，同时，系统使用Ajax和jQuery等网络前端新技术，实现了页面的局部刷新，提高了页面的响应速度，使用户界面更加友好。

参考文献

[1] 张利平，夏军，胡志芳.中国水资源状况与水资源安全问题分析[J].长江流域资源与环境，2009（2）：116?120.

[2] 冯广军.海水淡化：解决淡水资源短缺的有效方案[J].华北电力技术，2005（3）：41?44.

[3] 陈若珠，刘承倩，骆东松，等. B/S构架的工业远程监测系统的研究[J].自动化仪表，2010（4）：32?34.

[4] 李广鑫，马志欣，丁振国，等.基于B/S结构的远程实时监测系统[J].计算机应用研究，2003（10）：147?150.

[5] 廖玉霞.基于B/S模式的水环境监测系统设计与实现[D].成都：电子科技大学，2013.

[6] 顾悦，王建军.基于WCF的远程数据访问技术研究[J].电脑知识与技术，2010（31）：8675?8676.

[7] 韩旭，王海波，柳克俊.基于.NET Framework WCF的面向服务SOA中间件设计[J].小型微型计算机系统，2010（12）：2359?2364.

[8] 龚攀峰.基于OPC技术的城市能源监测系统的研究[D].广州：华南理工大学，2012.

[9] 高鹏，徐小力，吴国新，等.基于Ajax的四层架构远程监测系统设计[J].计算机工程与设计，2014（2）：695?699.

[10] 黄志春.基于AJAX技术的环保监控系统[D].杭州：浙江大学，2006.

[11] 周玲余.基于jQuery框架的页面前端特效的设计与实现[J]. 计算机与现代化，2013（1）：61?63.

<！—需要定时刷新的控件或THML元素 -->

ControlID="TimerRaise"EventName="Tick" />

海水淡化远程监测系统，每隔8 s触发一次定时器事件，对界面进行局部刷新，显示海水淡化过程中设备以及水质参数等实时数据，实现对反渗透海水淡化工艺的远程实时监测，保证系统稳定高效的运行。

2.3  jQuery在系统的应用

为了使界面具有更好的灵活性和友好性，系统开发周期更短，该系统中使用一个JavaScript著名的开源库jQuery技术，jQuery以简单的代码实现更强大的功能简洁、快速、灵活的JavaScript框架[9]。引入jQuery后，开发人员能做到“写得更少，做得更多”，能将JS代码和HTML代码完全分离，便于代码的维护和修改，从而减少网络页面布局时间，提高开发效率[11]。

海水淡化远程监测系统中大量使用了jQuery插件，由于其具有和墙的扩展功能，根据系统的实际需要进行了大量的代码扩展，以满足系统的需要。大量插件在系统中的运用实现了与Ajax技术的完美融合。应用时将jQuery框架文件保存在项目文件夹JS中，在页面的

加入以下代码：

系统使用该插件来控制界面中实时监测数据的曲线动态显示，界面更加友好。

3  系统主要功能模块的设计与实现

3.1  Flash动画显示界面

用户由系统登录界面通过输入相应的用户名和密码，经Web服务器验证通过后进入远程监测系统的Flash动画显示界面，如图4所示，该界面提供Flash动画模拟现场生产工艺流程，把海水淡化工艺流程、特点、工作原理以动画的形式立体呈现出来，并在动画中显示生产设备参数以及各阶段水质状况等监测数据，使用户直观、详实、全方位动态的监测海水淡化机组的实时运行状况。同时，在网页的左侧栏提供相应关键数据的报警信号。点击界面上的链接可以跳转到相应的界面，如数据曲线显示界面、信息查询界面、水质查询界面、故障报警界面等。

3.2  数据文本显示界面

该界面显示了海水淡化过程中所有的监测数据，包括电机参数，水质参数，流量参数，液位参数以及压力参数。并根据海水淡化工艺流程，将实时数据按预处理、前处理和反渗透等几个阶段分开显示，使数据显示更加清晰有条理。数据文本显示界面如图5所示。

图5 数据文本显示界面

3.3  数据曲线显示界面

数据曲线网页采用HighCharts控件对不同类型的数据进行分开显示，如流量数据、压力数据、水质参数数据等。系统定时绘制监测数据动态曲线，使用户对监测数据的整体变化趋势有更直观的了解。曲线显示界面如图6所示。

图6 曲线显示界面

3.4  信息查询界面

历史数据查询界面包括历史数据查询以及各水质监测点的水质监测数据查询。系统采用数据库是SQL Server 2005， SQL Server是一个关系数据库，具有强大的数据处理功能。用户可自主选择查询条件，点击查询按钮，向Web服务器提交用户查询请求。Web服务器调用数据库服务器中的相应数据，发送回页面进行表格数据显示。数据表格采用分页技术，每页显示固定的数据行，用户对海量数据的查询一目了然。历史数据查询界面如图7所示。

图7 历史数据查询界面

4  结  语

本文设计了一种适合对反渗透海水淡化整套生产设备进行远程在线监测，获取设备实时运行状况的新型远程监测系统，并给出系统的总体结构。该系统基于B/S架构，监测端可以位于任何与Internet相连的地方，使用户可以方便有效地掌握系统的运行状况。系统采用WCF通信模式，实现本地监测系统与远程监测系统之间的通信，同时，系统使用Ajax和jQuery等网络前端新技术，实现了页面的局部刷新，提高了页面的响应速度，使用户界面更加友好。

参考文献

[1] 张利平，夏军，胡志芳.中国水资源状况与水资源安全问题分析[J].长江流域资源与环境，2009（2）：116?120.

[2] 冯广军.海水淡化：解决淡水资源短缺的有效方案[J].华北电力技术，2005（3）：41?44.

[3] 陈若珠，刘承倩，骆东松，等. B/S构架的工业远程监测系统的研究[J].自动化仪表，2010（4）：32?34.

[4] 李广鑫，马志欣，丁振国，等.基于B/S结构的远程实时监测系统[J].计算机应用研究，2003（10）：147?150.

[5] 廖玉霞.基于B/S模式的水环境监测系统设计与实现[D].成都：电子科技大学，2013.

[6] 顾悦，王建军.基于WCF的远程数据访问技术研究[J].电脑知识与技术，2010（31）：8675?8676.

[7] 韩旭，王海波，柳克俊.基于.NET Framework WCF的面向服务SOA中间件设计[J].小型微型计算机系统，2010（12）：2359?2364.

[8] 龚攀峰.基于OPC技术的城市能源监测系统的研究[D].广州：华南理工大学，2012.

[9] 高鹏，徐小力，吴国新，等.基于Ajax的四层架构远程监测系统设计[J].计算机工程与设计，2014（2）：695?699.

[10] 黄志春.基于AJAX技术的环保监控系统[D].杭州：浙江大学，2006.

[11] 周玲余.基于jQuery框架的页面前端特效的设计与实现[J]. 计算机与现代化，2013（1）：61?63.

<！—需要定时刷新的控件或THML元素 -->

ControlID="TimerRaise"EventName="Tick" />

海水淡化远程监测系统，每隔8 s触发一次定时器事件，对界面进行局部刷新，显示海水淡化过程中设备以及水质参数等实时数据，实现对反渗透海水淡化工艺的远程实时监测，保证系统稳定高效的运行。

2.3  jQuery在系统的应用

为了使界面具有更好的灵活性和友好性，系统开发周期更短，该系统中使用一个JavaScript著名的开源库jQuery技术，jQuery以简单的代码实现更强大的功能简洁、快速、灵活的JavaScript框架[9]。引入jQuery后，开发人员能做到“写得更少，做得更多”，能将JS代码和HTML代码完全分离，便于代码的维护和修改，从而减少网络页面布局时间，提高开发效率[11]。

海水淡化远程监测系统中大量使用了jQuery插件，由于其具有和墙的扩展功能，根据系统的实际需要进行了大量的代码扩展，以满足系统的需要。大量插件在系统中的运用实现了与Ajax技术的完美融合。应用时将jQuery框架文件保存在项目文件夹JS中，在页面的

加入以下代码：

系统使用该插件来控制界面中实时监测数据的曲线动态显示，界面更加友好。

3  系统主要功能模块的设计与实现

3.1  Flash动画显示界面

用户由系统登录界面通过输入相应的用户名和密码，经Web服务器验证通过后进入远程监测系统的Flash动画显示界面，如图4所示，该界面提供Flash动画模拟现场生产工艺流程，把海水淡化工艺流程、特点、工作原理以动画的形式立体呈现出来，并在动画中显示生产设备参数以及各阶段水质状况等监测数据，使用户直观、详实、全方位动态的监测海水淡化机组的实时运行状况。同时，在网页的左侧栏提供相应关键数据的报警信号。点击界面上的链接可以跳转到相应的界面，如数据曲线显示界面、信息查询界面、水质查询界面、故障报警界面等。

3.2  数据文本显示界面

该界面显示了海水淡化过程中所有的监测数据，包括电机参数，水质参数，流量参数，液位参数以及压力参数。并根据海水淡化工艺流程，将实时数据按预处理、前处理和反渗透等几个阶段分开显示，使数据显示更加清晰有条理。数据文本显示界面如图5所示。

图5 数据文本显示界面

3.3  数据曲线显示界面

数据曲线网页采用HighCharts控件对不同类型的数据进行分开显示，如流量数据、压力数据、水质参数数据等。系统定时绘制监测数据动态曲线，使用户对监测数据的整体变化趋势有更直观的了解。曲线显示界面如图6所示。

图6 曲线显示界面

3.4  信息查询界面

历史数据查询界面包括历史数据查询以及各水质监测点的水质监测数据查询。系统采用数据库是SQL Server 2005， SQL Server是一个关系数据库，具有强大的数据处理功能。用户可自主选择查询条件，点击查询按钮，向Web服务器提交用户查询请求。Web服务器调用数据库服务器中的相应数据，发送回页面进行表格数据显示。数据表格采用分页技术，每页显示固定的数据行，用户对海量数据的查询一目了然。历史数据查询界面如图7所示。

图7 历史数据查询界面

4  结  语

本文设计了一种适合对反渗透海水淡化整套生产设备进行远程在线监测，获取设备实时运行状况的新型远程监测系统，并给出系统的总体结构。该系统基于B/S架构，监测端可以位于任何与Internet相连的地方，使用户可以方便有效地掌握系统的运行状况。系统采用WCF通信模式，实现本地监测系统与远程监测系统之间的通信，同时，系统使用Ajax和jQuery等网络前端新技术，实现了页面的局部刷新，提高了页面的响应速度，使用户界面更加友好。

参考文献

[1] 张利平，夏军，胡志芳.中国水资源状况与水资源安全问题分析[J].长江流域资源与环境，2009（2）：116?120.

[2] 冯广军.海水淡化：解决淡水资源短缺的有效方案[J].华北电力技术，2005（3）：41?44.

[3] 陈若珠，刘承倩，骆东松，等. B/S构架的工业远程监测系统的研究[J].自动化仪表，2010（4）：32?34.

[4] 李广鑫，马志欣，丁振国，等.基于B/S结构的远程实时监测系统[J].计算机应用研究，2003（10）：147?150.

[5] 廖玉霞.基于B/S模式的水环境监测系统设计与实现[D].成都：电子科技大学，2013.

[6] 顾悦，王建军.基于WCF的远程数据访问技术研究[J].电脑知识与技术，2010（31）：8675?8676.

[7] 韩旭，王海波，柳克俊.基于.NET Framework WCF的面向服务SOA中间件设计[J].小型微型计算机系统，2010（12）：2359?2364.

[8] 龚攀峰.基于OPC技术的城市能源监测系统的研究[D].广州：华南理工大学，2012.

[9] 高鹏，徐小力，吴国新，等.基于Ajax的四层架构远程监测系统设计[J].计算机工程与设计，2014（2）：695?699.

[10] 黄志春.基于AJAX技术的环保监控系统[D].杭州：浙江大学，2006.

[11] 周玲余.基于jQuery框架的页面前端特效的设计与实现[J]. 计算机与现代化，2013（1）：61?63.