基于B/S模式反滲透海水淡化遠(yuǎn)程監(jiān)測(cè)系統(tǒng)研究

張兵+姜周曙+王劍+陳震南

摘 ?要： 針對(duì)日產(chǎn)10萬(wàn)噸級(jí)大型反滲透海水淡化工程，為解決海水淡化流程遠(yuǎn)程監(jiān)測(cè)系統(tǒng)中實(shí)時(shí)性弱、可靠性差、操作復(fù)雜且資源不能有效共享等問(wèn)題，研制開(kāi)發(fā)了一套基于B/S技術(shù)的遠(yuǎn)程監(jiān)測(cè)系統(tǒng)。該系統(tǒng)采用WCF通信模式實(shí)現(xiàn)本地監(jiān)測(cè)系統(tǒng)與遠(yuǎn)程監(jiān)測(cè)系統(tǒng)之間通信，同時(shí)使用Ajax和jQuery等網(wǎng)絡(luò)前端新技術(shù)，實(shí)現(xiàn)了頁(yè)面的局部刷新。用戶可以通過(guò)瀏覽器終端遠(yuǎn)程訪問(wèn)監(jiān)控中心服務(wù)器，對(duì)海水淡化進(jìn)行實(shí)時(shí)數(shù)據(jù)監(jiān)測(cè)，歷史數(shù)據(jù)查詢等操作。實(shí)際應(yīng)用表明，系統(tǒng)運(yùn)行可靠、穩(wěn)定，能夠有效地加強(qiáng)對(duì)海水淡化生產(chǎn)過(guò)程的實(shí)時(shí)監(jiān)管。該系統(tǒng)具有較強(qiáng)的可移植性，可廣泛應(yīng)用子工業(yè)自動(dòng)化、交通運(yùn)輸?shù)雀鱾€(gè)行業(yè)，具有一定的實(shí)用價(jià)值。

關(guān)鍵詞： 反滲透海水淡化; B/S; 遠(yuǎn)程監(jiān)測(cè); WCF; Ajax

中圖分類號(hào)： TN919?34; TP277 ? ? ? ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼： A ? ? ? ? ? ? ? ? ? ? ? 文章編號(hào)： 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 ?引 ?言

淡水是人類社會(huì)賴以生存和發(fā)展的物質(zhì)基礎(chǔ)之一，是一切生命之源。然而，隨著社會(huì)的發(fā)展、經(jīng)濟(jì)的增長(zhǎng)、人口的不斷增加以及環(huán)境的污染，導(dǎo)致淡水資源嚴(yán)重短缺，水資源問(wèn)題已經(jīng)發(fā)展為一個(gè)全球性問(wèn)題，成為制約人類社會(huì)發(fā)展的關(guān)鍵因素。在我國(guó)，淡水資源總量為28 000億m3，占世界水資源的6%，但我國(guó)人均占有量?jī)H為世界平均水平的[14]，且分布不均，淡水資源已經(jīng)成為影響中國(guó)經(jīng)濟(jì)社會(huì)發(fā)展的重要因素[1]。然而，海洋中蘊(yùn)含著豐富的淡水資源，采用反滲透海水淡化技術(shù)獲取淡水資源已成為沿海地區(qū)解決水資源問(wèn)題最有效地的方法之一，受到越來(lái)越多的關(guān)注[2]。反滲透海水淡化是一個(gè)復(fù)雜的工藝流程，涉及海水的組分、pH值、溫度、產(chǎn)水量、模特性等諸多相互聯(lián)系、相互影響的變量，必須對(duì)其進(jìn)行實(shí)時(shí)監(jiān)控，保證其穩(wěn)定、高效運(yùn)行。

近年來(lái)， 網(wǎng)絡(luò)在工業(yè)生產(chǎn)中的應(yīng)用使得工業(yè)過(guò)程的遠(yuǎn)程監(jiān)控功能得以實(shí)現(xiàn)。隨著Internet和Web的廣泛應(yīng)用，C/S結(jié)構(gòu)已經(jīng)無(wú)法滿足當(dāng)前全球網(wǎng)絡(luò)開(kāi)放、互聯(lián)和信息共享的新要求， 于是出現(xiàn)了B/S（Browser/Server）型模式，即瀏覽器/服務(wù)器結(jié)構(gòu)[3]。在B/S架構(gòu)下，任何有網(wǎng)絡(luò)的地方，用戶就可通過(guò)Web瀏覽器對(duì)工業(yè)生產(chǎn)過(guò)程進(jìn)行在線實(shí)時(shí)監(jiān)測(cè)。Web瀏覽器以圖形、圖表等形式向用戶顯示當(dāng)前監(jiān)測(cè)對(duì)象的實(shí)時(shí)運(yùn)行信息。采用B/S架構(gòu)的優(yōu)點(diǎn)是用戶可在任意平臺(tái)上實(shí)現(xiàn)對(duì)服務(wù)器的訪問(wèn)，且用戶數(shù)量不限，同時(shí)利用B/S 架構(gòu)可以大大減少開(kāi)發(fā)工作量，提高產(chǎn)品的可維護(hù)性[4?5]。

因此，針對(duì)目前海水淡化遠(yuǎn)程監(jiān)測(cè)系統(tǒng)存在的不足，在物聯(lián)網(wǎng)技術(shù)的基礎(chǔ)上，提出一種基于B/S架構(gòu)的海水淡化遠(yuǎn)程監(jiān)測(cè)系統(tǒng)，實(shí)現(xiàn)對(duì)海水淡化工藝流程的遠(yuǎn)程實(shí)時(shí)監(jiān)測(cè)。

1 ?系統(tǒng)整體架構(gòu)設(shè)計(jì)

在總體結(jié)構(gòu)設(shè)計(jì)上，反滲透海水淡化監(jiān)測(cè)系統(tǒng)采用3層架構(gòu)，整個(gè)系統(tǒng)從最底層的數(shù)據(jù)采集到用戶交互，可分為現(xiàn)場(chǎng)控制層、現(xiàn)場(chǎng)監(jiān)控層和遠(yuǎn)程監(jiān)測(cè)層。反滲透海水淡化監(jiān)控系統(tǒng)總體架構(gòu)如圖1所示。

圖1 反滲透海水淡化監(jiān)控系統(tǒng)總體架構(gòu)

現(xiàn)場(chǎng)控制層主要由各種傳感器、儀表以及PLC控制器組成，PLC控制器是現(xiàn)場(chǎng)控制層的核心，負(fù)責(zé)對(duì)現(xiàn)場(chǎng)各種壓力數(shù)據(jù)、流量數(shù)據(jù)等參數(shù)信號(hào)的采集，并對(duì)現(xiàn)場(chǎng)生產(chǎn)設(shè)備運(yùn)行狀況進(jìn)行實(shí)時(shí)控制。

現(xiàn)場(chǎng)監(jiān)控層包括交換機(jī)、現(xiàn)場(chǎng)監(jiān)控主機(jī)、海水淡化本地監(jiān)控系統(tǒng)、Web服務(wù)器、數(shù)據(jù)庫(kù)服務(wù)器等。本地監(jiān)控系統(tǒng)具有現(xiàn)場(chǎng)監(jiān)測(cè)數(shù)據(jù)的自動(dòng)采集、數(shù)據(jù)處理與保存、動(dòng)態(tài)顯示、遠(yuǎn)程傳輸、用戶管理等功能。系統(tǒng)采用數(shù)據(jù)挖掘、故障樹(shù)、信息融合等先進(jìn)技術(shù)，對(duì)海水淡化機(jī)組運(yùn)行狀態(tài)進(jìn)行故障診斷、故障預(yù)測(cè)以及故障處理，提高了系統(tǒng)運(yùn)行的穩(wěn)定性和可靠性，保證了機(jī)組高效運(yùn)行。

反滲透海水淡化遠(yuǎn)程監(jiān)測(cè)系統(tǒng)采用基于B/S模式的ASP.NET技術(shù)，用戶可以通過(guò)瀏覽器終端輸入海水淡化本地監(jiān)控系統(tǒng)服務(wù)器IP，以動(dòng)態(tài)網(wǎng)頁(yè)的形式實(shí)時(shí)監(jiān)測(cè)海水淡化生產(chǎn)狀況，以Flash動(dòng)畫、曲線等方式顯示實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)，并擁有故障報(bào)警、歷史數(shù)據(jù)查詢以及水質(zhì)監(jiān)測(cè)數(shù)據(jù)查詢等功能。系統(tǒng)設(shè)計(jì)了管理員和操作員兩種用戶權(quán)限，享有相應(yīng)權(quán)限的用戶可執(zhí)行權(quán)限內(nèi)的操作，對(duì)生產(chǎn)設(shè)備參數(shù)以及水質(zhì)情況進(jìn)行遠(yuǎn)程監(jiān)控管理。只要有網(wǎng)絡(luò)的地方，就能通過(guò)瀏覽器對(duì)海水淡化整個(gè)生產(chǎn)過(guò)程進(jìn)行實(shí)時(shí)在線監(jiān)測(cè)，獲取海水淡化設(shè)備實(shí)時(shí)運(yùn)行信息。系統(tǒng)功能架構(gòu)如圖2所示。

圖2 遠(yuǎn)程監(jiān)測(cè)系統(tǒng)功能架構(gòu)

2 ?軟件實(shí)現(xiàn)的關(guān)鍵技術(shù)

2.1 ?遠(yuǎn)程WCF通信

WCF是Microsoft為構(gòu)建面向服務(wù)的應(yīng)用提供的分布式通信編程框架，是.NET的重要組成部分，使用該框架，開(kāi)發(fā)人員可以構(gòu)建跨平臺(tái)、安全、可靠和支持事務(wù)處理的企業(yè)級(jí)互聯(lián)應(yīng)用解決方案[6]。WCF通信模型如圖3所示， 客戶端與服務(wù)端通過(guò)消息在匹配的訪問(wèn)點(diǎn)之間進(jìn)行信息交互， 基于消息的通信機(jī)制是 SOA架構(gòu)的特點(diǎn)[7]。服務(wù)端作用是實(shí)現(xiàn)服務(wù)并對(duì)客服端進(jìn)行相應(yīng)，主要包括服務(wù)契約的設(shè)計(jì)和實(shí)現(xiàn)以及配置WCF服務(wù)的Endpoint設(shè)置。

海水淡化遠(yuǎn)程監(jiān)測(cè)系統(tǒng)采用OPC通信[8]和WCF通信相結(jié)合的通信方式，本地監(jiān)測(cè)系統(tǒng)通過(guò)OPC通信方式讀取PLC控制器上的數(shù)據(jù)，并且通過(guò)WCF通信方式向Web網(wǎng)頁(yè)發(fā)送本地監(jiān)控端采集的時(shí)間監(jiān)測(cè)數(shù)據(jù)，實(shí)現(xiàn)對(duì)海水淡化整個(gè)運(yùn)作過(guò)程的遠(yuǎn)程實(shí)時(shí)監(jiān)測(cè)。

<＼＼192.168.6.11＼現(xiàn)代電子技術(shù)14年37卷第24期＼Image＼07t3.tif>

圖3 WCF通信模型

2.1.1 ?WCF服務(wù)的實(shí)現(xiàn)

本地監(jiān)測(cè)軟件是基于.NET的Windows窗體應(yīng)用程序，開(kāi)發(fā)工具是VS 2008，WCF選擇本地監(jiān)控軟件作為承載服務(wù)的宿主，遠(yuǎn)程監(jiān)測(cè)系統(tǒng)通過(guò)互聯(lián)網(wǎng)調(diào)用WCF服務(wù)提供的遠(yuǎn)程方法。系統(tǒng)中定義了一個(gè)IMoveDataContract接口和一個(gè)MoveDataContractsService類，用于為遠(yuǎn)程監(jiān)測(cè)端提供遠(yuǎn)程服務(wù)，服務(wù)契約設(shè)計(jì)如表1所示。

表1 服務(wù)契約設(shè)計(jì)

定義好接口后，定義一個(gè)MoveDataContractsService類實(shí)現(xiàn)接口中定義的抽象函數(shù)。服務(wù)實(shí)現(xiàn)后在服務(wù)的宿主本地監(jiān)測(cè)軟件的程序配置文件App.config文件中用XML語(yǔ)言定義終結(jié)點(diǎn)額地址、綁定和契約。配置文件中的代碼如下所示。

behaviorConfiguration="metadataBehavior"

name="DesailinationWCF.MoveDataContract

sService">

actsService” ? binding="wsHttpBinding"

contract="DesailinationWCF.IMoveDataContract"/>

2.1.2 ?遠(yuǎn)程監(jiān)測(cè)端即客戶端的實(shí)現(xiàn)

遠(yuǎn)程監(jiān)測(cè)軟件的開(kāi)發(fā)工具是VS 2008，啟動(dòng)海水淡化本地監(jiān)控軟件即服務(wù)端后在工程中添加服務(wù)應(yīng)用，工具自動(dòng)生成代理類并配置訪問(wèn)點(diǎn)。在遠(yuǎn)程監(jiān)測(cè)系統(tǒng)中實(shí)例化代理并調(diào)用服務(wù)契約中的函數(shù)，從而實(shí)現(xiàn)服務(wù)的調(diào)用。

2.2 ?Ajax技術(shù)在前臺(tái)網(wǎng)頁(yè)中的實(shí)現(xiàn)

Ajax是一種使用客戶端腳本并能與Web服務(wù)器交互的客戶端Web開(kāi)發(fā)技術(shù)，它的特點(diǎn)在于Ajax是基于客戶端的，并能夠以異步的方式與服務(wù)器交互[5]。Ajax根據(jù)“按需取數(shù)據(jù)”的原則，大大降低了冗余請(qǐng)求及響應(yīng)對(duì)服務(wù)器照成的負(fù)擔(dān)[9]。無(wú)刷新更新頁(yè)面減少了用戶心理和實(shí)際等待時(shí)間，它只和服務(wù)器交換有用的數(shù)據(jù)，而頁(yè)面元素、樣式等一些不必要的數(shù)據(jù)就不重新從服務(wù)器端加載，減少了寬帶消耗[10]。海水淡化本地監(jiān)測(cè)系統(tǒng)中，系統(tǒng)每隔8 s采用OPC通信協(xié)議從PLC控制器中讀取一次數(shù)據(jù)，在遠(yuǎn)程監(jiān)測(cè)系統(tǒng)中，為了顯示最新采集的實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)，系統(tǒng)必須每隔幾秒刷新一下界面，以顯示最新監(jiān)測(cè)數(shù)據(jù)。傳統(tǒng)方法是用在Aspx頁(yè)面開(kāi)頭head中加Refresh標(biāo)簽

來(lái)實(shí)現(xiàn)，這種方法會(huì)刷新不需要更新的頁(yè)面元素使整個(gè)頁(yè)面回發(fā)，增加界面響應(yīng)時(shí)間，并影響用戶對(duì)界面的操作。為避免出現(xiàn)整體閃動(dòng)提高頁(yè)面響應(yīng)速度，系統(tǒng)使用Ajax技術(shù)來(lái)對(duì)界面進(jìn)行定時(shí)局部刷新。系統(tǒng)需要刷新的界面使用ASP.NET Ajax腳本庫(kù)ScriptManager，UpdatePanel 和 Timer定時(shí)器來(lái)對(duì)系統(tǒng)局部空間進(jìn)行刷新[10]，主要代碼如下所示：

<！—需要定時(shí)刷新的控件或THML元素 -->

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

海水淡化遠(yuǎn)程監(jiān)測(cè)系統(tǒng)，每隔8 s觸發(fā)一次定時(shí)器事件，對(duì)界面進(jìn)行局部刷新，顯示海水淡化過(guò)程中設(shè)備以及水質(zhì)參數(shù)等實(shí)時(shí)數(shù)據(jù)，實(shí)現(xiàn)對(duì)反滲透海水淡化工藝的遠(yuǎn)程實(shí)時(shí)監(jiān)測(cè)，保證系統(tǒng)穩(wěn)定高效的運(yùn)行。

2.3 ?jQuery在系統(tǒng)的應(yīng)用

為了使界面具有更好的靈活性和友好性，系統(tǒng)開(kāi)發(fā)周期更短，該系統(tǒng)中使用一個(gè)JavaScript著名的開(kāi)源庫(kù)jQuery技術(shù)，jQuery以簡(jiǎn)單的代碼實(shí)現(xiàn)更強(qiáng)大的功能簡(jiǎn)潔、快速、靈活的JavaScript框架[9]。引入jQuery后，開(kāi)發(fā)人員能做到“寫得更少，做得更多”，能將JS代碼和HTML代碼完全分離，便于代碼的維護(hù)和修改，從而減少網(wǎng)絡(luò)頁(yè)面布局時(shí)間，提高開(kāi)發(fā)效率[11]。

海水淡化遠(yuǎn)程監(jiān)測(cè)系統(tǒng)中大量使用了jQuery插件，由于其具有和墻的擴(kuò)展功能，根據(jù)系統(tǒng)的實(shí)際需要進(jìn)行了大量的代碼擴(kuò)展，以滿足系統(tǒng)的需要。大量插件在系統(tǒng)中的運(yùn)用實(shí)現(xiàn)了與Ajax技術(shù)的完美融合。應(yīng)用時(shí)將jQuery框架文件保存在項(xiàng)目文件夾JS中，在頁(yè)面的

加入以下代碼：

系統(tǒng)使用該插件來(lái)控制界面中實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)的曲線動(dòng)態(tài)顯示，界面更加友好。

3 ?系統(tǒng)主要功能模塊的設(shè)計(jì)與實(shí)現(xiàn)

3.1 ?Flash動(dòng)畫顯示界面

用戶由系統(tǒng)登錄界面通過(guò)輸入相應(yīng)的用戶名和密碼，經(jīng)Web服務(wù)器驗(yàn)證通過(guò)后進(jìn)入遠(yuǎn)程監(jiān)測(cè)系統(tǒng)的Flash動(dòng)畫顯示界面，如圖4所示，該界面提供Flash動(dòng)畫模擬現(xiàn)場(chǎng)生產(chǎn)工藝流程，把海水淡化工藝流程、特點(diǎn)、工作原理以動(dòng)畫的形式立體呈現(xiàn)出來(lái)，并在動(dòng)畫中顯示生產(chǎn)設(shè)備參數(shù)以及各階段水質(zhì)狀況等監(jiān)測(cè)數(shù)據(jù)，使用戶直觀、詳實(shí)、全方位動(dòng)態(tài)的監(jiān)測(cè)海水淡化機(jī)組的實(shí)時(shí)運(yùn)行狀況。同時(shí)，在網(wǎng)頁(yè)的左側(cè)欄提供相應(yīng)關(guān)鍵數(shù)據(jù)的報(bào)警信號(hào)。點(diǎn)擊界面上的鏈接可以跳轉(zhuǎn)到相應(yīng)的界面，如數(shù)據(jù)曲線顯示界面、信息查詢界面、水質(zhì)查詢界面、故障報(bào)警界面等。

3.2 ?數(shù)據(jù)文本顯示界面

該界面顯示了海水淡化過(guò)程中所有的監(jiān)測(cè)數(shù)據(jù)，包括電機(jī)參數(shù)，水質(zhì)參數(shù)，流量參數(shù)，液位參數(shù)以及壓力參數(shù)。并根據(jù)海水淡化工藝流程，將實(shí)時(shí)數(shù)據(jù)按預(yù)處理、前處理和反滲透等幾個(gè)階段分開(kāi)顯示，使數(shù)據(jù)顯示更加清晰有條理。數(shù)據(jù)文本顯示界面如圖5所示。

圖5 數(shù)據(jù)文本顯示界面

3.3 ?數(shù)據(jù)曲線顯示界面

數(shù)據(jù)曲線網(wǎng)頁(yè)采用HighCharts控件對(duì)不同類型的數(shù)據(jù)進(jìn)行分開(kāi)顯示，如流量數(shù)據(jù)、壓力數(shù)據(jù)、水質(zhì)參數(shù)數(shù)據(jù)等。系統(tǒng)定時(shí)繪制監(jiān)測(cè)數(shù)據(jù)動(dòng)態(tài)曲線，使用戶對(duì)監(jiān)測(cè)數(shù)據(jù)的整體變化趨勢(shì)有更直觀的了解。曲線顯示界面如圖6所示。

圖6 曲線顯示界面

3.4 ?信息查詢界面

歷史數(shù)據(jù)查詢界面包括歷史數(shù)據(jù)查詢以及各水質(zhì)監(jiān)測(cè)點(diǎn)的水質(zhì)監(jiān)測(cè)數(shù)據(jù)查詢。系統(tǒng)采用數(shù)據(jù)庫(kù)是SQL Server 2005， SQL Server是一個(gè)關(guān)系數(shù)據(jù)庫(kù)，具有強(qiáng)大的數(shù)據(jù)處理功能。用戶可自主選擇查詢條件，點(diǎn)擊查詢按鈕，向Web服務(wù)器提交用戶查詢請(qǐng)求。Web服務(wù)器調(diào)用數(shù)據(jù)庫(kù)服務(wù)器中的相應(yīng)數(shù)據(jù)，發(fā)送回頁(yè)面進(jìn)行表格數(shù)據(jù)顯示。數(shù)據(jù)表格采用分頁(yè)技術(shù)，每頁(yè)顯示固定的數(shù)據(jù)行，用戶對(duì)海量數(shù)據(jù)的查詢一目了然。歷史數(shù)據(jù)查詢界面如圖7所示。

圖7 歷史數(shù)據(jù)查詢界面

4 ?結(jié) ?語(yǔ)

本文設(shè)計(jì)了一種適合對(duì)反滲透海水淡化整套生產(chǎn)設(shè)備進(jìn)行遠(yuǎn)程在線監(jiān)測(cè)，獲取設(shè)備實(shí)時(shí)運(yùn)行狀況的新型遠(yuǎn)程監(jiān)測(cè)系統(tǒng)，并給出系統(tǒng)的總體結(jié)構(gòu)。該系統(tǒng)基于B/S架構(gòu)，監(jiān)測(cè)端可以位于任何與Internet相連的地方，使用戶可以方便有效地掌握系統(tǒng)的運(yùn)行狀況。系統(tǒng)采用WCF通信模式，實(shí)現(xiàn)本地監(jiān)測(cè)系統(tǒng)與遠(yuǎn)程監(jiān)測(cè)系統(tǒng)之間的通信，同時(shí)，系統(tǒng)使用Ajax和jQuery等網(wǎng)絡(luò)前端新技術(shù)，實(shí)現(xiàn)了頁(yè)面的局部刷新，提高了頁(yè)面的響應(yīng)速度，使用戶界面更加友好。

參考文獻(xiàn)

[1] 張利平，夏軍，胡志芳.中國(guó)水資源狀況與水資源安全問(wèn)題分析[J].長(zhǎng)江流域資源與環(huán)境，2009（2）：116?120.

[2] 馮廣軍.海水淡化：解決淡水資源短缺的有效方案[J].華北電力技術(shù)，2005（3）：41?44.

[3] 陳若珠，劉承倩，駱東松，等. B/S構(gòu)架的工業(yè)遠(yuǎn)程監(jiān)測(cè)系統(tǒng)的研究[J].自動(dòng)化儀表，2010（4）：32?34.

[4] 李廣鑫，馬志欣，丁振國(guó)，等.基于B/S結(jié)構(gòu)的遠(yuǎn)程實(shí)時(shí)監(jiān)測(cè)系統(tǒng)[J].計(jì)算機(jī)應(yīng)用研究，2003（10）：147?150.

[5] 廖玉霞.基于B/S模式的水環(huán)境監(jiān)測(cè)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[D].成都：電子科技大學(xué)，2013.

[6] 顧悅，王建軍.基于WCF的遠(yuǎn)程數(shù)據(jù)訪問(wèn)技術(shù)研究[J].電腦知識(shí)與技術(shù)，2010（31）：8675?8676.

[7] 韓旭，王海波，柳克俊.基于.NET Framework WCF的面向服務(wù)SOA中間件設(shè)計(jì)[J].小型微型計(jì)算機(jī)系統(tǒng)，2010（12）：2359?2364.

[8] 龔攀峰.基于OPC技術(shù)的城市能源監(jiān)測(cè)系統(tǒng)的研究[D].廣州：華南理工大學(xué)，2012.

[9] 高鵬，徐小力，吳國(guó)新，等.基于Ajax的四層架構(gòu)遠(yuǎn)程監(jiān)測(cè)系統(tǒng)設(shè)計(jì)[J].計(jì)算機(jī)工程與設(shè)計(jì)，2014（2）：695?699.

[10] 黃志春.基于AJAX技術(shù)的環(huán)保監(jiān)控系統(tǒng)[D].杭州：浙江大學(xué)，2006.

[11] 周玲余.基于jQuery框架的頁(yè)面前端特效的設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)與現(xiàn)代化，2013（1）：61?63.

<！—需要定時(shí)刷新的控件或THML元素 -->

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

海水淡化遠(yuǎn)程監(jiān)測(cè)系統(tǒng)，每隔8 s觸發(fā)一次定時(shí)器事件，對(duì)界面進(jìn)行局部刷新，顯示海水淡化過(guò)程中設(shè)備以及水質(zhì)參數(shù)等實(shí)時(shí)數(shù)據(jù)，實(shí)現(xiàn)對(duì)反滲透海水淡化工藝的遠(yuǎn)程實(shí)時(shí)監(jiān)測(cè)，保證系統(tǒng)穩(wěn)定高效的運(yùn)行。

2.3 ?jQuery在系統(tǒng)的應(yīng)用

為了使界面具有更好的靈活性和友好性，系統(tǒng)開(kāi)發(fā)周期更短，該系統(tǒng)中使用一個(gè)JavaScript著名的開(kāi)源庫(kù)jQuery技術(shù)，jQuery以簡(jiǎn)單的代碼實(shí)現(xiàn)更強(qiáng)大的功能簡(jiǎn)潔、快速、靈活的JavaScript框架[9]。引入jQuery后，開(kāi)發(fā)人員能做到“寫得更少，做得更多”，能將JS代碼和HTML代碼完全分離，便于代碼的維護(hù)和修改，從而減少網(wǎng)絡(luò)頁(yè)面布局時(shí)間，提高開(kāi)發(fā)效率[11]。

海水淡化遠(yuǎn)程監(jiān)測(cè)系統(tǒng)中大量使用了jQuery插件，由于其具有和墻的擴(kuò)展功能，根據(jù)系統(tǒng)的實(shí)際需要進(jìn)行了大量的代碼擴(kuò)展，以滿足系統(tǒng)的需要。大量插件在系統(tǒng)中的運(yùn)用實(shí)現(xiàn)了與Ajax技術(shù)的完美融合。應(yīng)用時(shí)將jQuery框架文件保存在項(xiàng)目文件夾JS中，在頁(yè)面的

加入以下代碼：

系統(tǒng)使用該插件來(lái)控制界面中實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)的曲線動(dòng)態(tài)顯示，界面更加友好。

3 ?系統(tǒng)主要功能模塊的設(shè)計(jì)與實(shí)現(xiàn)

3.1 ?Flash動(dòng)畫顯示界面

用戶由系統(tǒng)登錄界面通過(guò)輸入相應(yīng)的用戶名和密碼，經(jīng)Web服務(wù)器驗(yàn)證通過(guò)后進(jìn)入遠(yuǎn)程監(jiān)測(cè)系統(tǒng)的Flash動(dòng)畫顯示界面，如圖4所示，該界面提供Flash動(dòng)畫模擬現(xiàn)場(chǎng)生產(chǎn)工藝流程，把海水淡化工藝流程、特點(diǎn)、工作原理以動(dòng)畫的形式立體呈現(xiàn)出來(lái)，并在動(dòng)畫中顯示生產(chǎn)設(shè)備參數(shù)以及各階段水質(zhì)狀況等監(jiān)測(cè)數(shù)據(jù)，使用戶直觀、詳實(shí)、全方位動(dòng)態(tài)的監(jiān)測(cè)海水淡化機(jī)組的實(shí)時(shí)運(yùn)行狀況。同時(shí)，在網(wǎng)頁(yè)的左側(cè)欄提供相應(yīng)關(guān)鍵數(shù)據(jù)的報(bào)警信號(hào)。點(diǎn)擊界面上的鏈接可以跳轉(zhuǎn)到相應(yīng)的界面，如數(shù)據(jù)曲線顯示界面、信息查詢界面、水質(zhì)查詢界面、故障報(bào)警界面等。

3.2 ?數(shù)據(jù)文本顯示界面

該界面顯示了海水淡化過(guò)程中所有的監(jiān)測(cè)數(shù)據(jù)，包括電機(jī)參數(shù)，水質(zhì)參數(shù)，流量參數(shù)，液位參數(shù)以及壓力參數(shù)。并根據(jù)海水淡化工藝流程，將實(shí)時(shí)數(shù)據(jù)按預(yù)處理、前處理和反滲透等幾個(gè)階段分開(kāi)顯示，使數(shù)據(jù)顯示更加清晰有條理。數(shù)據(jù)文本顯示界面如圖5所示。

圖5 數(shù)據(jù)文本顯示界面

3.3 ?數(shù)據(jù)曲線顯示界面

數(shù)據(jù)曲線網(wǎng)頁(yè)采用HighCharts控件對(duì)不同類型的數(shù)據(jù)進(jìn)行分開(kāi)顯示，如流量數(shù)據(jù)、壓力數(shù)據(jù)、水質(zhì)參數(shù)數(shù)據(jù)等。系統(tǒng)定時(shí)繪制監(jiān)測(cè)數(shù)據(jù)動(dòng)態(tài)曲線，使用戶對(duì)監(jiān)測(cè)數(shù)據(jù)的整體變化趨勢(shì)有更直觀的了解。曲線顯示界面如圖6所示。

圖6 曲線顯示界面

3.4 ?信息查詢界面

歷史數(shù)據(jù)查詢界面包括歷史數(shù)據(jù)查詢以及各水質(zhì)監(jiān)測(cè)點(diǎn)的水質(zhì)監(jiān)測(cè)數(shù)據(jù)查詢。系統(tǒng)采用數(shù)據(jù)庫(kù)是SQL Server 2005， SQL Server是一個(gè)關(guān)系數(shù)據(jù)庫(kù)，具有強(qiáng)大的數(shù)據(jù)處理功能。用戶可自主選擇查詢條件，點(diǎn)擊查詢按鈕，向Web服務(wù)器提交用戶查詢請(qǐng)求。Web服務(wù)器調(diào)用數(shù)據(jù)庫(kù)服務(wù)器中的相應(yīng)數(shù)據(jù)，發(fā)送回頁(yè)面進(jìn)行表格數(shù)據(jù)顯示。數(shù)據(jù)表格采用分頁(yè)技術(shù)，每頁(yè)顯示固定的數(shù)據(jù)行，用戶對(duì)海量數(shù)據(jù)的查詢一目了然。歷史數(shù)據(jù)查詢界面如圖7所示。

圖7 歷史數(shù)據(jù)查詢界面

4 ?結(jié) ?語(yǔ)

本文設(shè)計(jì)了一種適合對(duì)反滲透海水淡化整套生產(chǎn)設(shè)備進(jìn)行遠(yuǎn)程在線監(jiān)測(cè)，獲取設(shè)備實(shí)時(shí)運(yùn)行狀況的新型遠(yuǎn)程監(jiān)測(cè)系統(tǒng)，并給出系統(tǒng)的總體結(jié)構(gòu)。該系統(tǒng)基于B/S架構(gòu)，監(jiān)測(cè)端可以位于任何與Internet相連的地方，使用戶可以方便有效地掌握系統(tǒng)的運(yùn)行狀況。系統(tǒng)采用WCF通信模式，實(shí)現(xiàn)本地監(jiān)測(cè)系統(tǒng)與遠(yuǎn)程監(jiān)測(cè)系統(tǒng)之間的通信，同時(shí)，系統(tǒng)使用Ajax和jQuery等網(wǎng)絡(luò)前端新技術(shù)，實(shí)現(xiàn)了頁(yè)面的局部刷新，提高了頁(yè)面的響應(yīng)速度，使用戶界面更加友好。

參考文獻(xiàn)

[1] 張利平，夏軍，胡志芳.中國(guó)水資源狀況與水資源安全問(wèn)題分析[J].長(zhǎng)江流域資源與環(huán)境，2009（2）：116?120.

[2] 馮廣軍.海水淡化：解決淡水資源短缺的有效方案[J].華北電力技術(shù)，2005（3）：41?44.

[3] 陳若珠，劉承倩，駱東松，等. B/S構(gòu)架的工業(yè)遠(yuǎn)程監(jiān)測(cè)系統(tǒng)的研究[J].自動(dòng)化儀表，2010（4）：32?34.

[4] 李廣鑫，馬志欣，丁振國(guó)，等.基于B/S結(jié)構(gòu)的遠(yuǎn)程實(shí)時(shí)監(jiān)測(cè)系統(tǒng)[J].計(jì)算機(jī)應(yīng)用研究，2003（10）：147?150.

[5] 廖玉霞.基于B/S模式的水環(huán)境監(jiān)測(cè)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[D].成都：電子科技大學(xué)，2013.

[6] 顧悅，王建軍.基于WCF的遠(yuǎn)程數(shù)據(jù)訪問(wèn)技術(shù)研究[J].電腦知識(shí)與技術(shù)，2010（31）：8675?8676.

[7] 韓旭，王海波，柳克俊.基于.NET Framework WCF的面向服務(wù)SOA中間件設(shè)計(jì)[J].小型微型計(jì)算機(jī)系統(tǒng)，2010（12）：2359?2364.

[8] 龔攀峰.基于OPC技術(shù)的城市能源監(jiān)測(cè)系統(tǒng)的研究[D].廣州：華南理工大學(xué)，2012.

[9] 高鵬，徐小力，吳國(guó)新，等.基于Ajax的四層架構(gòu)遠(yuǎn)程監(jiān)測(cè)系統(tǒng)設(shè)計(jì)[J].計(jì)算機(jī)工程與設(shè)計(jì)，2014（2）：695?699.

[10] 黃志春.基于AJAX技術(shù)的環(huán)保監(jiān)控系統(tǒng)[D].杭州：浙江大學(xué)，2006.

[11] 周玲余.基于jQuery框架的頁(yè)面前端特效的設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)與現(xiàn)代化，2013（1）：61?63.

<！—需要定時(shí)刷新的控件或THML元素 -->

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

海水淡化遠(yuǎn)程監(jiān)測(cè)系統(tǒng)，每隔8 s觸發(fā)一次定時(shí)器事件，對(duì)界面進(jìn)行局部刷新，顯示海水淡化過(guò)程中設(shè)備以及水質(zhì)參數(shù)等實(shí)時(shí)數(shù)據(jù)，實(shí)現(xiàn)對(duì)反滲透海水淡化工藝的遠(yuǎn)程實(shí)時(shí)監(jiān)測(cè)，保證系統(tǒng)穩(wěn)定高效的運(yùn)行。

2.3 ?jQuery在系統(tǒng)的應(yīng)用

為了使界面具有更好的靈活性和友好性，系統(tǒng)開(kāi)發(fā)周期更短，該系統(tǒng)中使用一個(gè)JavaScript著名的開(kāi)源庫(kù)jQuery技術(shù)，jQuery以簡(jiǎn)單的代碼實(shí)現(xiàn)更強(qiáng)大的功能簡(jiǎn)潔、快速、靈活的JavaScript框架[9]。引入jQuery后，開(kāi)發(fā)人員能做到“寫得更少，做得更多”，能將JS代碼和HTML代碼完全分離，便于代碼的維護(hù)和修改，從而減少網(wǎng)絡(luò)頁(yè)面布局時(shí)間，提高開(kāi)發(fā)效率[11]。

海水淡化遠(yuǎn)程監(jiān)測(cè)系統(tǒng)中大量使用了jQuery插件，由于其具有和墻的擴(kuò)展功能，根據(jù)系統(tǒng)的實(shí)際需要進(jìn)行了大量的代碼擴(kuò)展，以滿足系統(tǒng)的需要。大量插件在系統(tǒng)中的運(yùn)用實(shí)現(xiàn)了與Ajax技術(shù)的完美融合。應(yīng)用時(shí)將jQuery框架文件保存在項(xiàng)目文件夾JS中，在頁(yè)面的

加入以下代碼：

系統(tǒng)使用該插件來(lái)控制界面中實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)的曲線動(dòng)態(tài)顯示，界面更加友好。

3 ?系統(tǒng)主要功能模塊的設(shè)計(jì)與實(shí)現(xiàn)

3.1 ?Flash動(dòng)畫顯示界面

用戶由系統(tǒng)登錄界面通過(guò)輸入相應(yīng)的用戶名和密碼，經(jīng)Web服務(wù)器驗(yàn)證通過(guò)后進(jìn)入遠(yuǎn)程監(jiān)測(cè)系統(tǒng)的Flash動(dòng)畫顯示界面，如圖4所示，該界面提供Flash動(dòng)畫模擬現(xiàn)場(chǎng)生產(chǎn)工藝流程，把海水淡化工藝流程、特點(diǎn)、工作原理以動(dòng)畫的形式立體呈現(xiàn)出來(lái)，并在動(dòng)畫中顯示生產(chǎn)設(shè)備參數(shù)以及各階段水質(zhì)狀況等監(jiān)測(cè)數(shù)據(jù)，使用戶直觀、詳實(shí)、全方位動(dòng)態(tài)的監(jiān)測(cè)海水淡化機(jī)組的實(shí)時(shí)運(yùn)行狀況。同時(shí)，在網(wǎng)頁(yè)的左側(cè)欄提供相應(yīng)關(guān)鍵數(shù)據(jù)的報(bào)警信號(hào)。點(diǎn)擊界面上的鏈接可以跳轉(zhuǎn)到相應(yīng)的界面，如數(shù)據(jù)曲線顯示界面、信息查詢界面、水質(zhì)查詢界面、故障報(bào)警界面等。

3.2 ?數(shù)據(jù)文本顯示界面

該界面顯示了海水淡化過(guò)程中所有的監(jiān)測(cè)數(shù)據(jù)，包括電機(jī)參數(shù)，水質(zhì)參數(shù)，流量參數(shù)，液位參數(shù)以及壓力參數(shù)。并根據(jù)海水淡化工藝流程，將實(shí)時(shí)數(shù)據(jù)按預(yù)處理、前處理和反滲透等幾個(gè)階段分開(kāi)顯示，使數(shù)據(jù)顯示更加清晰有條理。數(shù)據(jù)文本顯示界面如圖5所示。

圖5 數(shù)據(jù)文本顯示界面

3.3 ?數(shù)據(jù)曲線顯示界面

數(shù)據(jù)曲線網(wǎng)頁(yè)采用HighCharts控件對(duì)不同類型的數(shù)據(jù)進(jìn)行分開(kāi)顯示，如流量數(shù)據(jù)、壓力數(shù)據(jù)、水質(zhì)參數(shù)數(shù)據(jù)等。系統(tǒng)定時(shí)繪制監(jiān)測(cè)數(shù)據(jù)動(dòng)態(tài)曲線，使用戶對(duì)監(jiān)測(cè)數(shù)據(jù)的整體變化趨勢(shì)有更直觀的了解。曲線顯示界面如圖6所示。

圖6 曲線顯示界面

3.4 ?信息查詢界面

歷史數(shù)據(jù)查詢界面包括歷史數(shù)據(jù)查詢以及各水質(zhì)監(jiān)測(cè)點(diǎn)的水質(zhì)監(jiān)測(cè)數(shù)據(jù)查詢。系統(tǒng)采用數(shù)據(jù)庫(kù)是SQL Server 2005， SQL Server是一個(gè)關(guān)系數(shù)據(jù)庫(kù)，具有強(qiáng)大的數(shù)據(jù)處理功能。用戶可自主選擇查詢條件，點(diǎn)擊查詢按鈕，向Web服務(wù)器提交用戶查詢請(qǐng)求。Web服務(wù)器調(diào)用數(shù)據(jù)庫(kù)服務(wù)器中的相應(yīng)數(shù)據(jù)，發(fā)送回頁(yè)面進(jìn)行表格數(shù)據(jù)顯示。數(shù)據(jù)表格采用分頁(yè)技術(shù)，每頁(yè)顯示固定的數(shù)據(jù)行，用戶對(duì)海量數(shù)據(jù)的查詢一目了然。歷史數(shù)據(jù)查詢界面如圖7所示。

圖7 歷史數(shù)據(jù)查詢界面

4 ?結(jié) ?語(yǔ)

本文設(shè)計(jì)了一種適合對(duì)反滲透海水淡化整套生產(chǎn)設(shè)備進(jìn)行遠(yuǎn)程在線監(jiān)測(cè)，獲取設(shè)備實(shí)時(shí)運(yùn)行狀況的新型遠(yuǎn)程監(jiān)測(cè)系統(tǒng)，并給出系統(tǒng)的總體結(jié)構(gòu)。該系統(tǒng)基于B/S架構(gòu)，監(jiān)測(cè)端可以位于任何與Internet相連的地方，使用戶可以方便有效地掌握系統(tǒng)的運(yùn)行狀況。系統(tǒng)采用WCF通信模式，實(shí)現(xiàn)本地監(jiān)測(cè)系統(tǒng)與遠(yuǎn)程監(jiān)測(cè)系統(tǒng)之間的通信，同時(shí)，系統(tǒng)使用Ajax和jQuery等網(wǎng)絡(luò)前端新技術(shù)，實(shí)現(xiàn)了頁(yè)面的局部刷新，提高了頁(yè)面的響應(yīng)速度，使用戶界面更加友好。

參考文獻(xiàn)

[1] 張利平，夏軍，胡志芳.中國(guó)水資源狀況與水資源安全問(wèn)題分析[J].長(zhǎng)江流域資源與環(huán)境，2009（2）：116?120.

[2] 馮廣軍.海水淡化：解決淡水資源短缺的有效方案[J].華北電力技術(shù)，2005（3）：41?44.

[3] 陳若珠，劉承倩，駱東松，等. B/S構(gòu)架的工業(yè)遠(yuǎn)程監(jiān)測(cè)系統(tǒng)的研究[J].自動(dòng)化儀表，2010（4）：32?34.

[4] 李廣鑫，馬志欣，丁振國(guó)，等.基于B/S結(jié)構(gòu)的遠(yuǎn)程實(shí)時(shí)監(jiān)測(cè)系統(tǒng)[J].計(jì)算機(jī)應(yīng)用研究，2003（10）：147?150.

[5] 廖玉霞.基于B/S模式的水環(huán)境監(jiān)測(cè)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[D].成都：電子科技大學(xué)，2013.

[6] 顧悅，王建軍.基于WCF的遠(yuǎn)程數(shù)據(jù)訪問(wèn)技術(shù)研究[J].電腦知識(shí)與技術(shù)，2010（31）：8675?8676.

[7] 韓旭，王海波，柳克俊.基于.NET Framework WCF的面向服務(wù)SOA中間件設(shè)計(jì)[J].小型微型計(jì)算機(jī)系統(tǒng)，2010（12）：2359?2364.

[8] 龔攀峰.基于OPC技術(shù)的城市能源監(jiān)測(cè)系統(tǒng)的研究[D].廣州：華南理工大學(xué)，2012.

[9] 高鵬，徐小力，吳國(guó)新，等.基于Ajax的四層架構(gòu)遠(yuǎn)程監(jiān)測(cè)系統(tǒng)設(shè)計(jì)[J].計(jì)算機(jī)工程與設(shè)計(jì)，2014（2）：695?699.

[10] 黃志春.基于AJAX技術(shù)的環(huán)保監(jiān)控系統(tǒng)[D].杭州：浙江大學(xué)，2006.

[11] 周玲余.基于jQuery框架的頁(yè)面前端特效的設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)與現(xiàn)代化，2013（1）：61?63.