杜英魁,王 楊,關(guān) 屏,彭 躍,趙麗娟,劉 樞

1(沈陽大學 信息工程學院,沈陽 110014)

2(沈陽恒源偉業(yè)環(huán)境檢測服務有限公司,沈陽 110003)

3(遼寧省環(huán)境監(jiān)測實驗中心,沈陽 110161)

近年來,隨著國家經(jīng)濟結(jié)構(gòu)的轉(zhuǎn)型,推動經(jīng)濟高質(zhì)量發(fā)展,對于環(huán)境問題越來越重視.而空氣污染依舊經(jīng)是環(huán)境保護中的一個頑疾,空氣質(zhì)量的優(yōu)劣直接關(guān)系到人民的日常生活,對人們的健康有著直接的影響,能否獲取空氣質(zhì)量相關(guān)最新的信息,對人們來說越來越重要[1].許多國內(nèi)外學者進行了相關(guān)系統(tǒng)的開發(fā)與研究分析.史姣姣等建立了基于物聯(lián)網(wǎng)的PM2.5監(jiān)測系統(tǒng),實現(xiàn)了硬件設(shè)計與針對PM2.5在線監(jiān)測Web 平臺,實現(xiàn)了手機實時查看與統(tǒng)計分析[2].程家盼實現(xiàn)了基于GIS 技術(shù)的空氣質(zhì)量數(shù)據(jù)可視化,采用先進的AcrGIS平臺對空氣質(zhì)量監(jiān)測數(shù)據(jù)進行可視化研究[3].周劍等設(shè)計并實現(xiàn)了基于多種交互方式的分布式空氣質(zhì)量監(jiān)測系統(tǒng),構(gòu)建了云端數(shù)據(jù)交互、三維可視化交互等模塊[4].然而這些空氣數(shù)據(jù)監(jiān)測或可視化系統(tǒng)要么數(shù)據(jù)過于單一,要么對于數(shù)據(jù)未能實時可視化.

同時,各種軟件架構(gòu)更新迭代造成了巨大的資源浪費,為了降低軟件產(chǎn)品的耦合性,各種微服務框架應運而生[5].因此采用了目前國內(nèi)外最流行的微服務框架Spring Boot 來進行本系統(tǒng)的搭建.同時系統(tǒng)使用Vue 來實現(xiàn)前端頁面開發(fā),Vue 支持雙向數(shù)據(jù)綁定,可以使用Axios 實現(xiàn)復雜的邏輯交互,實現(xiàn)了系統(tǒng)對于數(shù)據(jù)實時監(jiān)控管理與實時可視化的需求[6].

1 云端空氣質(zhì)量數(shù)據(jù)

本系統(tǒng)主要針對傳輸?shù)皆贫说目諝鈹?shù)據(jù)的進行監(jiān)控管理與可視化開發(fā)而搭建.數(shù)據(jù)由空氣監(jiān)測無線傳感器設(shè)備進行在線采集,采用自定義協(xié)議長連接實現(xiàn)傳輸,云端再接收、讀取、解析.將解析完的最新數(shù)據(jù)緩存到Redis 數(shù)據(jù)庫,每天固定時間再存儲到MySQL數(shù)據(jù)庫中.如發(fā)生失誤導致信息未能及時上傳,恢復通信后也會補傳數(shù)據(jù).Redis 數(shù)據(jù)庫與MySQL 數(shù)據(jù)庫結(jié)合作為數(shù)據(jù)存儲的載體,不僅保證數(shù)據(jù)的不丟失、不冗余,同時也是本系統(tǒng)業(yè)務邏輯的承載體,是系統(tǒng)的核心組成部分[7].系統(tǒng)數(shù)據(jù)庫解析存儲的空氣數(shù)據(jù)有:細顆粒物(PM2.5)、可吸入顆粒物(PM10)、二氧化硫(SO2)、二氧化氮(NO2)、一氧化碳(CO)、臭氧(O3)、溫度、濕度、甲醛等.空氣質(zhì)量數(shù)據(jù)庫表設(shè)計如表1.

表1 空氣質(zhì)量數(shù)據(jù)庫表設(shè)計

2 系統(tǒng)關(guān)鍵技術(shù)

2.1 Spring Boot 微服務

Spring Boot 微服務實際上是大量開源庫的集合,自配Tomcat,Jetty 容器,無需部署WAR 包只需在pom.xml 中寫好相關(guān)依賴,減少了系統(tǒng)開發(fā)的繁瑣[8].Spring Boot 框架下有著完善的MVC 設(shè)計模型支持,對于項目的配置工作采用自動化配置的方式,使得在Spring Boot 環(huán)境下進行MVC 模式的開發(fā)變得尤為簡單[9].Spring Boot 還提供REST 獲取進程運作期參數(shù)來進行監(jiān)控,本系統(tǒng)主要為GET、POST、DELETE 等分別用于獲取資源、新建資源、刪除資源等.本系統(tǒng)需要對MySQL 數(shù)據(jù)庫的增刪查等操作,所以系統(tǒng)使用MyBatis 編寫SQL 語句來實現(xiàn),采用JDBC 與數(shù)據(jù)庫建立連接[10].

2.2 前端Vue 框架

前端Vue 框架是一款漸進式MVVM 框架,使用node.js 技術(shù),安卓vue-cli 腳手架構(gòu)建工具,由vuerouter 配置路由,使用Axios 插件封裝的Ajax 進行數(shù)據(jù)交互,實現(xiàn)數(shù)據(jù)持久化,保證良好的用戶交互體驗[11].

2.3 百度地圖API

目前國內(nèi)外各大互聯(lián)網(wǎng)公司均推出了各自的地理信息服務平臺,如高德地圖、百度地圖、谷歌地圖等[12].考慮本系統(tǒng)開發(fā)環(huán)境、功能需求等因素,采用百度地圖作為數(shù)據(jù)可視化開發(fā)的重要平臺.百度地圖API 是百度公司免費開放的一系列地圖服務接口,開發(fā)者在獲得接口使用權(quán)限后即可在自己的系統(tǒng)中使用地圖服務[13].本系統(tǒng)可視化開發(fā)需要百度地圖API 提供的熱力圖、覆蓋物類等功能來完成.

2.4 云服務器

在阿里云官網(wǎng)上申請賬號,就能擁有自己的云主機,并可以進行屬于自己的相關(guān)部署,例如安全規(guī)則等,然后就可以對外服務.通過MobaXterm 工具連接阿里云服務器,安裝JDK、Tomacat 等相關(guān)配置,搭建好的Web 項目,將打包好的.war 文件上傳到Tomcat 的webapps 文件夾下,在瀏覽器中連接公網(wǎng)IP,即可訪問已部署好的Web 項目[14].

3 系統(tǒng)總體設(shè)計

本系統(tǒng)的前端實現(xiàn)數(shù)據(jù)監(jiān)控下載、報警管理、百度地圖可視化的頁面.后端主要包括API 接口、數(shù)據(jù)庫操作模塊、采集到的云端數(shù)據(jù).用戶可以直接通過node.js 發(fā)出各種指令,如:查詢數(shù)據(jù)、刪除數(shù)據(jù)等.后端根據(jù)請求內(nèi)容對存儲在數(shù)據(jù)庫中的云端空氣質(zhì)量數(shù)據(jù)進行讀寫操作,并將請求結(jié)果返回頁面,然后頁面進行更新.通過Axios 封裝的Ajax 技術(shù)作為中間層實現(xiàn)前后端請求響應與數(shù)據(jù)交互,使用JavaScript 向后端發(fā)出請求并處理響應,通過XML 與HTTPRequest 對象可以在不重載頁面的情況下實現(xiàn)前后端數(shù)據(jù)交互[15].中間層的存在,實現(xiàn)了前后端分離.系統(tǒng)總體框架如圖1.

4 系統(tǒng)總體實現(xiàn)

4.1 數(shù)據(jù)交互實現(xiàn)

本系統(tǒng)中數(shù)據(jù)交互模塊是非常重要的一部分,Axios 插件中封裝的Ajax 技術(shù)使用前端技術(shù)來實現(xiàn)數(shù)據(jù)交互(請求-獲取-處理的過程),在實現(xiàn)前后端分離后,后端更專注于業(yè)務邏輯和數(shù)據(jù)處理[16].Spring Boot 框架完全支持REST 開發(fā)規(guī)范,通過“@RestController”注解的使用即可實現(xiàn)對控制器的聲明和響應,將系統(tǒng)的數(shù)據(jù)格式自動轉(zhuǎn)化為JSON 格式[17].數(shù)據(jù)真正的交互在于這個JSON 數(shù)據(jù)的請求和返回.JSON 的本質(zhì)是JS 對象以鍵值對呈現(xiàn)的字符串.而“@RequestMapping(value="/device",method={RequestMethod.DELETE,RequestMethod.GET,RequestMethod.POST,RequestMethod.PUT},produces={"application/json;charset=UTF-8"})”注釋是用來限制整個類中的請求方法和定義類的URL.表2為本系統(tǒng)定義的部分API接口信息列表.

圖1 系統(tǒng)總體框架圖

Ajax 以輪詢的方式實現(xiàn)使用異步調(diào)用,傳遞數(shù)據(jù)方式主要有兩種:GET 是從后端獲取要渲染的數(shù)據(jù),而POST 則是向后端傳遞要添加或者處理過的數(shù)據(jù).前端拿到傳遞過來的JSON 數(shù)據(jù),因為后端有一個對象轉(zhuǎn)化為JSON 字符串的過程,所以JSON 數(shù)據(jù)傳遞到前端后,也有一個數(shù)據(jù)解析/解讀的過程[18].應用解析好的數(shù)據(jù),頁面進行內(nèi)容填充或者局部動態(tài)更新.反過來前端向后端傳遞改變的數(shù)據(jù),也會打包成JSON 字符串形式,后端再進行響應與數(shù)據(jù)解析,再完成對數(shù)據(jù)庫的讀寫操作.

表2 部分API 接口信息表

4.2 前端頁面實現(xiàn)

出于對業(yè)務需求的分析,系統(tǒng)需要實現(xiàn)多個功能來完成對數(shù)據(jù)的實時監(jiān)控管理與可視化開發(fā).主要實現(xiàn)的功能為:數(shù)據(jù)監(jiān)控下載、報警管理以及百度地圖可視化.在瀏覽器中連接相應的公網(wǎng)IP 地址,用戶就可以看到系統(tǒng)功能頁面的實現(xiàn),從而進行使用.

(1)數(shù)據(jù)監(jiān)控實現(xiàn)

系統(tǒng)需要對云端的數(shù)據(jù)實現(xiàn)監(jiān)控管理,輸入想要查看的設(shè)備號,前端通過GET 請求獲取到全部云端空氣質(zhì)量數(shù)據(jù),在瀏覽器的頁面通過表格的樣式進行渲染,表格隨的數(shù)據(jù)更新不斷刷新.使得用戶更加清晰觀察數(shù)據(jù)更新狀態(tài).實現(xiàn)效果如圖2所示.

圖2 數(shù)據(jù)監(jiān)控圖

(2)數(shù)據(jù)下載實現(xiàn)

系統(tǒng)擁有對云端的數(shù)據(jù)進行備份下載的功能,輸入要下載數(shù)據(jù)信息(即設(shè)備號、時間段),查看點擊確定后便可選擇下載,頁面實現(xiàn)效果如圖3所示.

(3)報警管理實現(xiàn)

系統(tǒng)需要對上傳云端數(shù)據(jù)狀態(tài)進行監(jiān)控,通過查詢設(shè)備最新數(shù)據(jù)上傳的時間與上一次上傳的之間間隔確定上傳數(shù)據(jù)的狀態(tài),如果超過15 分鐘依然未有新的上傳數(shù)據(jù),該設(shè)備ID 將被標紅.用戶可以對報警的設(shè)備進行管理,可以刪除或許修改信息.頁面每隔3 分鐘刷新一次,實現(xiàn)方法為:window.setInterval(code,180 000).實現(xiàn)效果如圖4所示.

圖3 數(shù)據(jù)下載圖

圖4 報警管理圖

(4)百度地圖可視化實現(xiàn)

百度地圖可視化是本系統(tǒng)主要的可視化展示方式,百度地圖API 提供了向地圖添加自定義標注覆蓋物的功能[19].開發(fā)通過移除舊標注的“removeOverlay 方法”和添加新標注的“addOverlay 方法”來實現(xiàn)設(shè)備與數(shù)據(jù)值報警百度地圖可視化.用標注顏色來反映設(shè)備上傳數(shù)據(jù)的狀態(tài)或監(jiān)測的數(shù)據(jù)超標情況,頁面也是每隔3 分鐘刷新一次.百度地圖報警可視化頁面如圖5所示.

同時百度地圖提供了熱力圖這一非常流行的地圖可視化功能,其主要就是將要素密集程度用特殊而高亮的方式來展示,疊加在網(wǎng)絡(luò)地圖上的不同顏色來描述該地區(qū)中空氣污染分布情況[20],本系統(tǒng)中紫色表示空氣污染程度最深、橙色次之、綠色表示程度最輕,每隔3 分鐘刷新一次頁面.其中PM2.5熱力圖可視化頁面實現(xiàn)效果如圖6所示.

圖5 地圖報警可視化

圖6 PM2.5 熱力圖可視化

5 結(jié)論與展望

本文雖然初步搭建起了對云端數(shù)據(jù)實時監(jiān)控管理與可視化應用系統(tǒng),但本系統(tǒng)對采集的空氣數(shù)據(jù)可視化處理還不夠完善,可以嘗試使用R 語言或Python 等強大的數(shù)據(jù)處理分析語言進行更多的可視化分析.該系統(tǒng)是一項網(wǎng)絡(luò)化、高效化、現(xiàn)代化的數(shù)據(jù)管理與可視化展示平臺,在其構(gòu)建并成功運行的過程中,認識學習了很多相關(guān)技術(shù)知識,為后續(xù)開發(fā)工作打下基礎(chǔ).