基于Spring Boot的云端數(shù)據(jù)監(jiān)控管理與可視化應(yīng)用系統(tǒng)①

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

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

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

3(遼寧省環(huán)境監(jiān)測(cè)實(shí)驗(yàn)中心,沈陽 110161)

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

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

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

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

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

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

2.1 Spring Boot 微服務(wù)

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

2.2 前端Vue 框架

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

2.3 百度地圖API

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

2.4 云服務(wù)器

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

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

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

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

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

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

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

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

表2 部分API 接口信息表

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

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

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

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

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

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

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

(3)報(bào)警管理實(shí)現(xiàn)

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

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

圖4 報(bào)警管理圖

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

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

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

圖5 地圖報(bào)警可視化

圖6 PM2.5 熱力圖可視化

5 結(jié)論與展望

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