雷勇　陳宮　張文成

摘? 要： 保護(hù)水資源是環(huán)境保護(hù)的重中之重。利用React、Antd等前端框架和Spring、Spring MVC、Mybatis等服務(wù)端框架，設(shè)計(jì)實(shí)現(xiàn)在線水質(zhì)監(jiān)測系統(tǒng)，為用戶提供監(jiān)測數(shù)據(jù)的獲取、存儲、分析，以及數(shù)據(jù)可視化和更深層次的預(yù)測服務(wù)，同時(shí)為管理者和決策者提供更加精準(zhǔn)科學(xué)的數(shù)據(jù)參考。

關(guān)鍵詞： 水質(zhì)監(jiān)測; SSM; React; 預(yù)測

中圖分類號：TP391? ? ? ? ? 文獻(xiàn)標(biāo)識碼：A? ? ?文章編號：1006-8228（2022）05-52-04

Online water quality monitoring system based on regression prediction

Lei Yong Chen Gong ?Zhang Wencheng

Abstract： The protection of water resources has become the top priority of environmental protection. The online water quality monitoring system is designed and implemented by using front-end frameworks such as React and Antd， and server-side frameworks such as Spring， Spring MVC and Mybatis. It can provide users with monitoring data acquisition， storage， analysis， data visualization and deeper prediction services， so as to provide more accurate and scientific data reference for managers and decision makers.

Key words： water quality monitoring; SSM; React; prediction

引言

水質(zhì)監(jiān)測系統(tǒng)可對水質(zhì)污染情況自動監(jiān)測，并及時(shí)發(fā)出預(yù)警，追蹤污染源，提供水質(zhì)數(shù)據(jù)的獲取、存儲、分析和數(shù)據(jù)可視化，以及預(yù)測服務(wù)，為水環(huán)境保護(hù)工作帶來極大的便利。自1998年以來，我國已先后在七大水系的十個(gè)重點(diǎn)流域建成了100個(gè)國家地表水水質(zhì)自動監(jiān)測站。各地方根據(jù)環(huán)境管理需要，也陸續(xù)建立了400多個(gè)地方級地表水水質(zhì)自動監(jiān)測站，實(shí)現(xiàn)了水質(zhì)自動監(jiān)測周報(bào)[1]。

水質(zhì)監(jiān)測技術(shù)的逐步應(yīng)用，為環(huán)境管理工作提供了堅(jiān)實(shí)的數(shù)據(jù)支持，在重點(diǎn)流域和工程建立水質(zhì)監(jiān)管、污染事件預(yù)警以及飲用水安全保障等方面發(fā)揮著重要的作用[2-3]。本系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)是結(jié)合現(xiàn)有水質(zhì)監(jiān)測系統(tǒng)的優(yōu)缺點(diǎn)，在原有功能的基礎(chǔ)上添加具有特色的預(yù)測功能和直觀的數(shù)據(jù)可視化界面，為水質(zhì)環(huán)境管理者和決策者提供更加直觀和科學(xué)的數(shù)據(jù)監(jiān)控平臺。

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

系統(tǒng)采用B/S架構(gòu)進(jìn)行開發(fā)設(shè)計(jì)，同時(shí)整體實(shí)現(xiàn)前后端的分離。

1.1 前、后端技術(shù)架構(gòu)

前端采用React框架，由于其自身的高性能特性使得所編寫的前端應(yīng)用相比于傳統(tǒng)HTML、CSS、JavaScript所編寫的前端應(yīng)用有著更好的性能體驗(yàn)。除此之外，還采用螞蟻集團(tuán)所開源的Antd組件庫來進(jìn)行前端頁面的開發(fā)，在提高開發(fā)效率的同時(shí)還能帶來更好的視覺體驗(yàn)。系統(tǒng)服務(wù)端采用Spring、Spring MVC、Mybatis來編寫，持久層采用MySQL數(shù)據(jù)庫。

1.2 系統(tǒng)架構(gòu)的特點(diǎn)

采用瀏覽器/服務(wù)器結(jié)構(gòu)。由于瀏覽器小巧靈活、運(yùn)行速度快且占用CPU資源較低，同時(shí)還能在不同的操作系統(tǒng)上運(yùn)行，這些都成為這種架構(gòu)的優(yōu)點(diǎn)之一。除此之外，B/S架構(gòu)還具有運(yùn)營和維護(hù)成本較低、開發(fā)周期短等特點(diǎn)。從系統(tǒng)數(shù)據(jù)采集點(diǎn)數(shù)量通常較多、軟件所運(yùn)行的平臺不統(tǒng)一、軟件更新迭代較快、實(shí)際開發(fā)周期短等特點(diǎn)來考慮，B/S架構(gòu)更適合本軟件系統(tǒng)的使用場景。

2 系統(tǒng)功能需求分析及概要設(shè)計(jì)

本系統(tǒng)結(jié)合實(shí)際使用情況，前端主要功能模塊為監(jiān)測點(diǎn)管理模塊、數(shù)據(jù)可視化面板模塊、數(shù)據(jù)分析與展示模塊、水質(zhì)預(yù)測預(yù)警模塊、個(gè)人中心模塊、登錄模塊等;由于采用前后端分離的模式，后臺主要功能包括對前臺發(fā)送的請求數(shù)據(jù)進(jìn)行收發(fā)、數(shù)據(jù)處理、數(shù)據(jù)存儲等。系統(tǒng)主要功能如圖1所示。

3 系統(tǒng)詳細(xì)設(shè)計(jì)

3.1 監(jiān)測點(diǎn)管理

由于在實(shí)際使用時(shí)需要大量數(shù)據(jù)采集儀提供監(jiān)測數(shù)據(jù)，因此需要對監(jiān)測點(diǎn)進(jìn)行統(tǒng)一管理。通過此模塊可對監(jiān)測點(diǎn)進(jìn)行增加、刪除、修改操作，同時(shí)，通過列表的方式可以直觀地了解監(jiān)測站中各個(gè)數(shù)據(jù)監(jiān)測點(diǎn)信息，包括站點(diǎn)所屬區(qū)域、站點(diǎn)監(jiān)測類型、站點(diǎn)狀態(tài)、站點(diǎn)編碼、站點(diǎn)創(chuàng)建時(shí)間、站點(diǎn)備注等。

3.2 數(shù)據(jù)可視化面板

數(shù)據(jù)可視化面板方便用戶對大量數(shù)據(jù)進(jìn)行直觀認(rèn)識。通過可視化圖表的方式能夠很快地提取常規(guī)數(shù)據(jù)列表所不能展示出的信息，同時(shí)也能帶給用戶較好的視覺體驗(yàn)。

本模塊設(shè)計(jì)了站點(diǎn)信息可視化和監(jiān)測數(shù)據(jù)可視化兩部分。其中，站點(diǎn)信息可視化將站點(diǎn)位置信息通過接入高德地圖標(biāo)點(diǎn)的方式進(jìn)行展示，監(jiān)測數(shù)據(jù)可視化主要是通過可視化圖表進(jìn)行數(shù)據(jù)展示。

采用阿里開源的AntdV數(shù)據(jù)可視化開源框架，通過獲取當(dāng)前站點(diǎn)總數(shù)信息，并通過輪詢的方式實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)展示效果。站點(diǎn)地圖的展示是通過使用AntV中的點(diǎn)標(biāo)注圖組件，通過傳入每個(gè)站點(diǎn)位置坐標(biāo)值將監(jiān)測點(diǎn)的地理信息標(biāo)記在地圖中，方便用戶直觀地從現(xiàn)實(shí)地圖上看到監(jiān)測點(diǎn)的分布。

3.3 數(shù)據(jù)分析與展示

數(shù)據(jù)分析與展示模塊是對數(shù)據(jù)可視化面板的補(bǔ)充。通過數(shù)據(jù)分析，來挖取更深層次數(shù)據(jù)信息，以便用戶進(jìn)行參考決策。首先，主要展示污染物近期變化情況。例如，周同比增長、環(huán)比增長從而展示出污染物近期的增長狀況。其次，對監(jiān)測站整體數(shù)據(jù)進(jìn)行分析，其中包括監(jiān)測站整體流量統(tǒng)計(jì)、污染監(jiān)測類型統(tǒng)計(jì)、整體合格率統(tǒng)計(jì)等。通過這些數(shù)據(jù)管理員可以快速了解到目前監(jiān)測站的負(fù)載情況以及監(jiān)測的污染物類型情況，從而可以據(jù)此增加或刪除某些監(jiān)測點(diǎn)來實(shí)現(xiàn)效率最大化。另外，對污染物近期合格率進(jìn)行詳細(xì)統(tǒng)計(jì)，展示出各個(gè)污染物的詳細(xì)數(shù)據(jù)，同時(shí)通過與整體合格率進(jìn)行參照，可以快速定位污染問題。

3.4 水質(zhì)預(yù)測預(yù)警

3.4.1 預(yù)測模塊設(shè)計(jì)

通過對歷史數(shù)據(jù)的分析訓(xùn)練，使程序擁有一定的“經(jīng)驗(yàn)”，從而對未來的數(shù)據(jù)變化做出預(yù)測，方便用戶提前做出應(yīng)對策略[4]。本模塊對未來一周的數(shù)據(jù)情況進(jìn)行預(yù)測，結(jié)果通過熱點(diǎn)圖的方式進(jìn)行展示。其中，顏色越深代表數(shù)值越大，結(jié)合熱點(diǎn)圖的優(yōu)點(diǎn)用戶可以直觀地看到未來一周的數(shù)據(jù)變化情況。此外，模塊也會對預(yù)測結(jié)果進(jìn)行判斷，若有超標(biāo)風(fēng)險(xiǎn)會及時(shí)對用戶進(jìn)行提醒。

3.4.2 預(yù)測算法設(shè)計(jì)

模塊采用線性回歸模型進(jìn)行數(shù)據(jù)預(yù)測?；貧w問題是研究自變量和因變量之間的關(guān)系，從而對未來數(shù)據(jù)進(jìn)行預(yù)測的一種數(shù)據(jù)模型。將歷史數(shù)據(jù)代入線性等式，利用最小二乘法或梯度下降法得到系數(shù)后即可預(yù)測新自變量的變化趨勢[5]。

有公式[y=kx+b]，當(dāng)知道參數(shù)k和b的情況下，任意一個(gè)x值都可以得到y(tǒng)的值，那么這個(gè)式子就是線性的。從函數(shù)圖形來看，線性函數(shù)是一條直線;從形式上看，只要函數(shù)滿足圖2這種形式就是線性的。因此，線性回歸就是通過數(shù)據(jù)集訓(xùn)練后，找一個(gè)形式像線性方程的函數(shù)來擬合數(shù)據(jù)實(shí)現(xiàn)數(shù)據(jù)預(yù)測的過程。

通過歷史數(shù)據(jù)對預(yù)測模型進(jìn)行訓(xùn)練，將實(shí)際數(shù)據(jù)和預(yù)測數(shù)據(jù)進(jìn)行對比得到預(yù)測誤差，最終把所有實(shí)際和預(yù)測之間的誤差加在一起就可以量化實(shí)際數(shù)據(jù)和預(yù)測數(shù)據(jù)之間的誤差。然后，結(jié)合數(shù)學(xué)模型得到線性回歸的損失函數(shù)，見公式⑴。

⑴

當(dāng)損失函數(shù)得到的值越小，就說明找到的直線越能擬合數(shù)據(jù)，就可以將參數(shù)求解問題轉(zhuǎn)換為求最小誤差問題。常見獲得最佳擬合線的方法有最小二乘法和梯度下降算法等。本文采用最小二乘法來獲取最佳擬合線。

對于一個(gè)樣本集嘗試用[y=ax+b+e]去進(jìn)行擬合可以得到公式⑵。

⑵

把所有的[e]都求和構(gòu)造一個(gè)函數(shù)，見公式⑶。當(dāng)Q最小時(shí)即可得到最佳擬合的直線，同時(shí)也可求導(dǎo)得到a、b。

⑶

[R2]可用來評估擬合程度，見公式⑷。其可以解釋為數(shù)據(jù)集中能夠被模型所解釋的方差占數(shù)據(jù)總方差的比重，因此，值越接近1，說明模型對數(shù)據(jù)的擬合程度越高[6]。

⑷

預(yù)測模型的主要代碼為：

/* 訓(xùn)練得到預(yù)測參數(shù)a、b */

public void getAB（） {

for（DataNodedataNode：list） {

sumX+=dataNode.getX（）;

sumY+=dataNode.getY（）;

sumXY+=dataNode.getXY（）;

sumX2+=Math.pow（dataNode.getX（）， 2）;

}

this.alpha=（（（sumY*sumX）/n）-sumXY）/

（（（sumX*sumX）/n）-sumX2）;

this.beta=（sumY-this.alpha*sumX）/n;

}

/* R2評估擬合程度 */

public void getR2（） {

for （DataNodedataNode：list） {

sumY+=dataNode.getY（）;

}

doubleavgY=sumY/list.size（）;

for （DataNodedataNode：list） {

num+=Math.pow（（dataNode.getY（）-（dataNode

.getX（）*this.alpha+beta））， 2）;

den+=Math.pow（（dataNode.getY（）-avgY）， 2）;

}

this.r=1-（num/den）;

}

至此，可以使用更多的環(huán)境數(shù)據(jù)進(jìn)行訓(xùn)練，從而得到所需的環(huán)境數(shù)據(jù)預(yù)測模型。若誤差較大還需要加上漂移因子來糾正預(yù)測數(shù)據(jù)，最終實(shí)現(xiàn)數(shù)據(jù)預(yù)測。

4 系統(tǒng)實(shí)現(xiàn)環(huán)境與結(jié)果展示

系統(tǒng)前臺使用React、Antd、AntdPro和Node.js開發(fā)，服務(wù)器端采用Java技術(shù)。由于高性能程序的需求，后臺程序結(jié)合Spring、Spring MVC、Mybatis框架開發(fā)，數(shù)據(jù)存儲采用MySQL數(shù)據(jù)庫。系統(tǒng)監(jiān)測點(diǎn)管理和數(shù)據(jù)可視化面板如圖3所示，數(shù)據(jù)分析與展示如圖4所示，水質(zhì)預(yù)測預(yù)警如圖5所示。

5 結(jié)束語

本文從實(shí)際水質(zhì)監(jiān)測工作出發(fā)，采用React、Java、SSM以及前后端分離的架構(gòu)模式進(jìn)行在線水質(zhì)監(jiān)測系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)，并結(jié)合回歸模型實(shí)現(xiàn)監(jiān)測數(shù)據(jù)的預(yù)測功能。在滿足用戶工作需求的同時(shí)提高了用戶體驗(yàn)，一定程度上方便了環(huán)境監(jiān)測工作。未來將結(jié)合實(shí)際使用情況進(jìn)一步改進(jìn)系統(tǒng)功能，同時(shí)在水質(zhì)預(yù)測方面選擇更加精確的預(yù)測模型進(jìn)行優(yōu)化。

參考文獻(xiàn)（References）：

[1] 孫海林，李巨峰，朱媛媛.我國水質(zhì)在線監(jiān)測系統(tǒng)的發(fā)展與

展望[J].中國環(huán)保產(chǎn)業(yè)，2009（3）：12-16

[2] 夏文文.地表水水質(zhì)自動監(jiān)測系統(tǒng)建設(shè)及運(yùn)行管理中若干

問題的探討[J].清洗世界，2020，36（11）：102-103

[3] 成思夢.基于在線監(jiān)測的湖泊水質(zhì)預(yù)測及評價(jià)研究[D].武漢

理工大學(xué)機(jī)電工程學(xué)院，2019

[4] 陳聰.基于多元線性回歸模型的深圳市空氣質(zhì)量實(shí)證分析[J].

科學(xué)技術(shù)創(chuàng)新，2021（9）：29-32

[5] 龐鋮鋮，戎袁杰，劉昕，等.基于線性回歸和MLP神經(jīng)網(wǎng)絡(luò)的

招標(biāo)采購預(yù)測模型[J].寧夏電力，2021（1）：12-17

[6] 廖黎暉.多元線性回歸分析在成本預(yù)測中的應(yīng)用[J].鄭州航

院報(bào)，1984：50-55

收稿日期：2021-09-24

*基金項(xiàng)目：廣西高等教育本科教學(xué)改革工程項(xiàng)目（2021JGB200）; 廣西高等教育本科教學(xué)改革工程項(xiàng)目 （2020JGB211）

作者簡介：雷勇（1997-），男，陜西漢中人，本科，主要研究方向：計(jì)算機(jī)應(yīng)用。

通訊作者：陳宮（1976-），男，廣西桂林人，碩士，副教授，主要研究方向：計(jì)算機(jī)應(yīng)用。