基于Echarts的地鐵屏蔽門(mén)數(shù)據(jù)監(jiān)控系統(tǒng)的實(shí)現(xiàn)

楊嬌　陳強(qiáng)　王加賓　梁鑒如　周玲

摘 要：針對(duì)地鐵屏蔽門(mén)狀態(tài)監(jiān)控問(wèn)題，以上海申通地鐵2號(hào)線屏蔽門(mén)控制系統(tǒng)為研究對(duì)象，設(shè)計(jì)了基于Echarts的可視化地鐵屏蔽門(mén)數(shù)據(jù)體系監(jiān)控系統(tǒng)。整個(gè)系統(tǒng)分為8個(gè)子模塊，實(shí)時(shí)顯示、狀態(tài)量顯示、模擬量時(shí)序圖、預(yù)警、歷史報(bào)警、歷史記錄、設(shè)置、回放。實(shí)時(shí)顯示模塊，通過(guò)繼電器傳回的狀態(tài)值，動(dòng)態(tài)模擬地鐵屏蔽門(mén)的開(kāi)關(guān)狀態(tài)，在狀態(tài)量顯示模塊和模擬量時(shí)序圖模塊，采用了Echarts可視化技術(shù)，分別通過(guò)時(shí)序圖和折線圖的形式展示，開(kāi)門(mén)繼電器和門(mén)鎖閉繼電器的狀態(tài)信息和電壓電流值，通過(guò)滑動(dòng)條查詢(xún)不同時(shí)間段對(duì)應(yīng)的信息，通過(guò)折線圖的波動(dòng)情況可以知道屏蔽門(mén)的運(yùn)行狀態(tài)，達(dá)到實(shí)時(shí)更新，實(shí)時(shí)監(jiān)控的作用。并將回傳的信息保存在數(shù)據(jù)庫(kù)中，方便以后查詢(xún)。

關(guān)鍵詞：Echarts； Ajax； 可視化； JSON； 監(jiān)控； MySQL； STM32F103

Abstract： Aiming at the status monitoring of metro shield door， a visual monitoring system of metro shield door data system based on Echarts is designed based on the control system of Shanghai Shentong Metro Line 2 shield door. The whole system is divided into 8 submodules， which are real-time display， state display， analog sequence diagram， early warning， historical alarm， history record， setting and playback. The real-time display module dynamically simulates the switching state of the shield door through relays. In the state display module and the analog sequence diagram module， the Echarts visualization technology is adopted， respectively through the sequential diagram and broken line diagram form. The status information， voltage and current value of the subway platform door open relay and door lock relay are displayed， and the corresponding information of different time period is inquired through sliding bar. Through the fluctuation of the broken line diagram， the running state of the shield door can be known， and the function of real-time updating and real-time monitoring can be achieved. The returned information is saved in the database for convenient inquiry later. After the implementation of the system， the system is deployed.

Key words： Echarts； Ajax； visualization； JSON； monitoring； MySQL； STM32F103

引言

隨著城市軌道交通的快速發(fā)展，城市地鐵的數(shù)量和線路都在不斷增加，軌道交通的安全問(wèn)題也變得尤為重要，這就要求能夠?qū)崿F(xiàn)對(duì)于地鐵屏蔽門(mén)數(shù)據(jù)的實(shí)時(shí)監(jiān)控，防止問(wèn)題的出現(xiàn)[1]。上海地鐵2號(hào)線作為市區(qū)軌道交通的骨干線路之一，由于信號(hào)與屏蔽門(mén)聯(lián)動(dòng)功能的使用，屏蔽門(mén)的故障次數(shù)也在不斷增加。例如：車(chē)門(mén)與屏蔽門(mén)開(kāi)關(guān)不聯(lián)動(dòng)，屏蔽門(mén)意外打開(kāi)或者沒(méi)有跟隨車(chē)門(mén)的打開(kāi)而改變狀態(tài)，車(chē)門(mén)延時(shí)打開(kāi)等問(wèn)題。面對(duì)控制屏蔽門(mén)工作狀態(tài)的繼電器傳回到后臺(tái)眾多的數(shù)據(jù)，地鐵站的運(yùn)維人員很難從一堆數(shù)據(jù)中找到有用的信息，判斷故障所在的地方，此時(shí)圖形顯示和動(dòng)態(tài)模擬門(mén)的狀態(tài)就體現(xiàn)出了優(yōu)勢(shì)[2]。其能夠?qū)⑽谋局袛?shù)據(jù)信息以更為直觀的形式展現(xiàn)在工作人員面前，加快人們對(duì)信息的獲取，消化能力、增強(qiáng)理解力、降低認(rèn)知負(fù)擔(dān)。隨著技術(shù)的不斷改進(jìn)，催生了很多可視化工具[3]。本系統(tǒng)前端頁(yè)面開(kāi)發(fā)設(shè)計(jì)，在使用JavaScript語(yǔ)言基礎(chǔ)上，引入Echarts插件，結(jié)合以Json為數(shù)據(jù)傳輸格式的Ajax[4]，異步動(dòng)態(tài)調(diào)用數(shù)據(jù)庫(kù)讀取數(shù)據(jù)的方法，將數(shù)據(jù)以圖形化的界面展示在前臺(tái)，實(shí)現(xiàn)了對(duì)數(shù)據(jù)體系監(jiān)控系統(tǒng)可視化開(kāi)發(fā)工作，并通過(guò)良好的界面達(dá)到與用戶友好交互的目的。

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

本數(shù)據(jù)體系監(jiān)控系統(tǒng)是針對(duì)上海申通地鐵2號(hào)線屏蔽門(mén)數(shù)據(jù)服務(wù)體系開(kāi)發(fā)的一個(gè)監(jiān)控系統(tǒng)，該數(shù)據(jù)服務(wù)體系系統(tǒng)以減少地鐵安全事故的發(fā)生為目標(biāo)。硬件部分選用STM32F103為主控制芯片，選用電流傳感器、電壓傳感器檢測(cè)繼電器線圈的電流、電壓值，連接有兩個(gè)攝像頭，攝像頭1用于監(jiān)測(cè)繼電器結(jié)點(diǎn)信號(hào)，判斷繼電器處于吸起還是閉合狀態(tài)；攝像頭2 用來(lái)判斷列車(chē)是否進(jìn)站。其中，電流傳感器，選用信瑞達(dá)公司提供的F系列交流漏電流傳感器[5]，安裝在繼電器的線圈外，利用互感器電磁阻離、磁調(diào)制工作原理將被測(cè)交流微電流、直流微電流轉(zhuǎn)換為直流電流、直流電壓，并隔離輸出標(biāo)準(zhǔn)模擬信號(hào)或數(shù)字信號(hào)。電壓傳感器，選用卡斯柯信號(hào)有限公司生產(chǎn)的PBMCJ-1型屏蔽門(mén)電壓采集模塊，利用電磁隔離原理，使用專(zhuān)業(yè)的MCU控制器，可以同時(shí)測(cè)量4路屏蔽門(mén)狀態(tài)的供電電壓。軟件部分是基于Windows操作系統(tǒng)，基于MyEclipse平臺(tái)運(yùn)用Java語(yǔ)言開(kāi)發(fā)，選用Apache tomcat 7.0服務(wù)器應(yīng)用程序，MySQL關(guān)系型數(shù)據(jù)庫(kù)，采用SSH（Spring、Struts2、Hibernate）的企業(yè)級(jí)整合框架， 將系統(tǒng)從職責(zé)上分為4層：表示層、業(yè)務(wù)邏輯層、數(shù)據(jù)持久層和域模塊層（實(shí)體層）[6]。Struts作為系統(tǒng)的整體基礎(chǔ)架構(gòu)，負(fù)責(zé)MVC的分離，在Struts框架的模型部分，控制業(yè)務(wù)跳轉(zhuǎn)，利用Hibernate框架對(duì)持久層提供支持。Spring作為一個(gè)容器，整合了Hibernate和Struts2框架，構(gòu)造了整個(gè)監(jiān)控中心系統(tǒng)。系統(tǒng)總體架構(gòu)如圖1所示。

監(jiān)控系統(tǒng)首先利用電壓傳感器、電流傳感器采集門(mén)使能繼電器、開(kāi)門(mén)繼電器、門(mén)鎖閉繼電器上電壓、電流值，并將采集到的數(shù)據(jù)傳送到服務(wù)器端。服務(wù)器端一方面將數(shù)據(jù)保存在數(shù)據(jù)庫(kù)中，另一方面發(fā)送給瀏覽器的遠(yuǎn)程控制中心。遠(yuǎn)程控制中心根據(jù)事先設(shè)定的閾值來(lái)進(jìn)行預(yù)警還是報(bào)警提醒。數(shù)據(jù)每隔3 s鐘獲取一次，故而數(shù)據(jù)庫(kù)每隔3 s鐘刷新一次，頁(yè)面通過(guò)Ajax自動(dòng)刷新。

2 功能模塊設(shè)計(jì)

2.1 實(shí)時(shí)顯示

實(shí)時(shí)顯示模塊，用于實(shí)時(shí)顯示地鐵站臺(tái)門(mén)的狀態(tài)信息。通過(guò)門(mén)使能繼電器，開(kāi)門(mén)繼電器，門(mén)鎖閉繼電器傳回來(lái)的狀態(tài)值動(dòng)態(tài)模擬地鐵屏蔽門(mén)的開(kāi)關(guān)狀態(tài)，當(dāng)值為0時(shí)表示門(mén)處于關(guān)閉狀態(tài)，同時(shí)設(shè)置門(mén)的顏色為紅色；當(dāng)值為1時(shí)表示門(mén)打開(kāi)狀態(tài)，此時(shí)門(mén)的顏色顯示綠色。通過(guò)顯示不同的顏色，也方便運(yùn)維人員能夠及時(shí)發(fā)現(xiàn)故障門(mén)所在的位置。考慮到資源利用的最大化，上行站臺(tái)只在上下班高峰期才會(huì)使用。下行站臺(tái)分為四節(jié)編組和八節(jié)編組，根據(jù)下行六車(chē)道是否有電壓來(lái)判斷是四節(jié)開(kāi)門(mén)還是八節(jié)開(kāi)門(mén)，當(dāng)沒(méi)有電壓值時(shí)四節(jié)開(kāi)門(mén)，有電壓值時(shí)八節(jié)開(kāi)門(mén)。如圖2所示。

2.2 狀態(tài)量顯示與模擬量時(shí)序圖

在狀態(tài)量顯示模塊和模擬量時(shí)序圖模塊，分別通過(guò)時(shí)序圖和折線圖的形式展示地鐵站臺(tái)門(mén)使能繼電器、開(kāi)門(mén)繼電器和門(mén)鎖閉繼電器的狀態(tài)信息和電壓、電流值[7]，并且設(shè)計(jì)了滑動(dòng)條，可以查詢(xún)不同時(shí)間段對(duì)應(yīng)的值。通過(guò)折線圖的波動(dòng)情況可知屏蔽門(mén)的運(yùn)行狀態(tài)，達(dá)到實(shí)時(shí)監(jiān)控的作用。同時(shí)采用浮窗形式來(lái)顯示每個(gè)點(diǎn)的數(shù)據(jù)信息，當(dāng)鼠標(biāo)移到某一個(gè)未知的時(shí)候，該點(diǎn)所覆蓋的電壓、電流、狀態(tài)值以浮窗的形式顯示出來(lái)。為了方便用戶操作，設(shè)置了下載按鈕，可以隨時(shí)保存當(dāng)前頁(yè)面的參數(shù)值。支持用戶放大或縮小圖表信息，提供參考曲線[8]。如圖3、圖4所示。

2.3 預(yù)警 、報(bào)警相關(guān)模塊

預(yù)警、歷史報(bào)警與歷史記錄都采用表格的形式，用來(lái)查詢(xún)特定時(shí)間段對(duì)應(yīng)的繼電器傳回來(lái)的電流電壓的值和狀態(tài)量，根據(jù)傳回的數(shù)據(jù)顯示報(bào)警預(yù)警信息。設(shè)置模塊是用于閾值的修改，為后臺(tái)地鐵屏蔽門(mén)是否發(fā)生故障提供評(píng)判標(biāo)準(zhǔn)?；胤拍K選定將某一時(shí)刻的所有信息顯示在同一行，再逐行顯示出每隔3 s傳回來(lái)的數(shù)據(jù)信息。所選時(shí)間段內(nèi)的信息會(huì)以滾動(dòng)的形式播放在相應(yīng)的區(qū)域框中，并且提供有5倍，10倍的倍速供選擇，可以根據(jù)需要去改變相應(yīng)的播放速度。

3 技術(shù)簡(jiǎn)介

3.1 Echarts

Echarts是個(gè)純JavaScript語(yǔ)言的圖庫(kù)表，提供了常規(guī)的折線圖、柱狀圖、地理數(shù)據(jù)可視化的地圖、數(shù)據(jù)統(tǒng)計(jì)的盒形圖等。能夠?qū)崿F(xiàn)數(shù)據(jù)的動(dòng)態(tài)變化驅(qū)動(dòng)圖表的改變，考慮到移動(dòng)端的顯示，利用代碼的重構(gòu)，使得核心圖表庫(kù)的體積盡量小。本項(xiàng)目狀態(tài)量顯示以及模擬量時(shí)序圖模塊中，使用Echarts實(shí)現(xiàn)數(shù)據(jù)的圖形化顯示，每3 s鐘根據(jù)硬件部分傳回來(lái)的數(shù)據(jù)刷新界面，更新圖表信息[9]。在繪圖之前需要為Echarts準(zhǔn)備一個(gè)具有寬高的Dom容器，基于準(zhǔn)備好的Dom容器初始化Echarts圖表，可以根據(jù)實(shí)際的項(xiàng)目需求在一個(gè)DOM容器中設(shè)置多個(gè)grid組件，最后生成動(dòng)態(tài)折線圖。

3.2 MySQL

MySQL是一個(gè)小型的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，把數(shù)據(jù)存儲(chǔ)在表格中，使用標(biāo)準(zhǔn)的結(jié)構(gòu)化查詢(xún)語(yǔ)言——sql訪問(wèn)數(shù)據(jù)庫(kù)。MySQL的調(diào)試、管理、優(yōu)化更為簡(jiǎn)單。因此在本項(xiàng)目中選用MySQL作為后臺(tái)數(shù)據(jù)庫(kù)管理系統(tǒng)，并結(jié)合Navicat可視化工具，實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的管理和開(kāi)發(fā)。Navicat使用圖形化的用戶界面，可以讓用戶使用和管理更為輕松。

3.3 Ajax

Ajax 即 “Asynchronous JavaScript And XML” （異步 JavaScript 及 XML），其不是一種編程語(yǔ)言，而是一種異步請(qǐng)求技術(shù)，可以創(chuàng)建更好、更快且交互性更強(qiáng)的Web 應(yīng)用程序[10]。傳統(tǒng)的Web 應(yīng)用程序會(huì)把數(shù)據(jù)提交至Web 服務(wù)器，等Web 服務(wù)器處理完所有數(shù)據(jù)之后，重新刷新整個(gè)頁(yè)面，這會(huì)導(dǎo)致運(yùn)行速度緩慢，增加服務(wù)器壓力，降低網(wǎng)站使用率。而Ajax使用 JavaScript 在Web 瀏覽器與Web 服務(wù)器之間發(fā)送和接收數(shù)據(jù)。通過(guò)與Web 服務(wù)器交換數(shù)據(jù)，僅僅需要修改網(wǎng)頁(yè)的某部分，縮短網(wǎng)站的響應(yīng)時(shí)間。在本項(xiàng)目中，硬件部分通過(guò)傳感器采集電壓電流等數(shù)據(jù)，每隔3 s將此數(shù)據(jù)傳回至服務(wù)器端，前端頁(yè)面顯示通過(guò)Ajax異步加載技術(shù)來(lái)定時(shí)地與服務(wù)器建立連接，以獲取云服務(wù)器端的數(shù)據(jù)，實(shí)時(shí)地刷新頁(yè)面數(shù)據(jù)顯示。

4 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

4.1 系統(tǒng)動(dòng)態(tài)監(jiān)測(cè)過(guò)程

在瀏覽器端訪問(wèn)相應(yīng)的網(wǎng)頁(yè)，觸發(fā)其與服務(wù)器端的交互。瀏覽器端使用jQuery通過(guò)XMLHttpRequest發(fā)送請(qǐng)求，服務(wù)器接收請(qǐng)求后，通過(guò)Struts定位到所需要調(diào)用的Action類(lèi)中的方法，并通過(guò)該類(lèi)中的方法獲取數(shù)據(jù)傳輸信息，并以JSon的格式返回至前臺(tái)頁(yè)面后，再通過(guò)Echarts可視化方法生成JSP文件，并存放在指定的位置，在前端生成可視化界面展示給用戶，具體過(guò)程如圖5所示。

4.2 利用Echarts可視化技術(shù)的系統(tǒng)實(shí)現(xiàn)

系統(tǒng)硬件部分通過(guò)各種傳感器采集數(shù)據(jù)，與遠(yuǎn)程地鐵監(jiān)管中心建立網(wǎng)絡(luò)通信。當(dāng)硬件系統(tǒng)與遠(yuǎn)程地鐵屏蔽門(mén)監(jiān)控中心建立連接之后，硬件系統(tǒng)會(huì)向監(jiān)管中心每隔3 s主動(dòng)以字符串的形式發(fā)送數(shù)據(jù)信息，服務(wù)器端將傳回來(lái)的數(shù)據(jù)信息保存在數(shù)據(jù)庫(kù)中，為狀態(tài)量顯示和模擬量時(shí)序圖2個(gè)模塊提供了數(shù)據(jù)源。采用Ajax異步調(diào)用的方式，通過(guò)調(diào)用后臺(tái)Java代碼讀取所需要的數(shù)據(jù)信息，以Json的數(shù)據(jù)格式傳輸，利用Echarts可視化插件[11]，將數(shù)據(jù)傳輸信息以圖形化的方式呈現(xiàn)在用戶面前。其具體流程如圖6所示。

5 系統(tǒng)調(diào)試

現(xiàn)場(chǎng)對(duì)地鐵屏蔽門(mén)數(shù)據(jù)監(jiān)控系統(tǒng)進(jìn)行測(cè)試，屏蔽門(mén)運(yùn)行狀態(tài)檢測(cè)平臺(tái)實(shí)物圖如圖7所示。通過(guò)PC端打開(kāi)瀏覽器，輸入相應(yīng)的網(wǎng)址，進(jìn)入遠(yuǎn)程監(jiān)控中心系統(tǒng)，同時(shí)啟動(dòng)Tomcat服務(wù)器，保證通信?，F(xiàn)場(chǎng)測(cè)試實(shí)時(shí)顯示模塊是否能夠根據(jù)硬件傳輸?shù)膮?shù)改變相應(yīng)的門(mén)的狀態(tài)。其中S表示車(chē)的狀態(tài)，是否有車(chē)進(jìn)站；P1、P2、P3分別表示上行、中行、下行門(mén)的狀態(tài)。1表示門(mén)是開(kāi)的狀態(tài)，在頁(yè)面門(mén)的位置用綠色來(lái)表示，0表示門(mén)是關(guān)的狀態(tài)，在頁(yè)面門(mén)的位置用紅色來(lái)表示。P4用來(lái)控制下行是四節(jié)開(kāi)門(mén)還是八節(jié)開(kāi)門(mén)，四節(jié)開(kāi)門(mén)的位置在下行的右邊，當(dāng)P4的值為1時(shí)表示八節(jié)開(kāi)門(mén)，值為0時(shí)表示四節(jié)開(kāi)門(mén)。具體數(shù)據(jù)狀態(tài)見(jiàn)表1。

6 結(jié)束語(yǔ)

本文通過(guò)對(duì)上海申通2號(hào)線地鐵屏蔽門(mén)數(shù)據(jù)監(jiān)控系統(tǒng)的展示與分析，可以看出整個(gè)系統(tǒng)采用模塊化設(shè)計(jì)，每個(gè)模塊實(shí)現(xiàn)對(duì)應(yīng)的功能，有效地提高了監(jiān)控平臺(tái)的效率，也達(dá)到了監(jiān)控的及時(shí)性。同時(shí)系統(tǒng)開(kāi)放了數(shù)據(jù)檢測(cè)采集和傳輸接口，為系統(tǒng)提供了延展性，可以應(yīng)用到其它地鐵項(xiàng)目中。為方便運(yùn)維人員的工作，采用Echarts可視化技術(shù)，圖形化的表現(xiàn)形式一目了然，更加直觀地了解到地鐵屏蔽門(mén)的工作狀態(tài)，及時(shí)發(fā)現(xiàn)故障位置，減少地鐵安全事故的發(fā)生，保障乘客的人身安全，從而提升用戶的體驗(yàn)感。

參考文獻(xiàn)

[1] 馬殷元，王虎軍，謝文洋. 鐵路空調(diào)客車(chē)地面電源監(jiān)控系統(tǒng)軟件設(shè)計(jì)[J]. 測(cè)控技術(shù)，2016，35（4）：120-123，137.

[2] SU Jifeng， YU Yixin，JIA Hongjie，et al. Visualization of Aoltage stability region of bulk power system[C]//International Conference on Power System Technology. Kuming，China：IEEE，2002：1665-1668.

[3] OVERBYE T J， WIEGMANN D A， Thomas R J. Visualization of power systems：final report [M]. NewYork，USA：Pserc Publication，2005：17-30.

[4] 佟進(jìn). 基于AJAX框架WEB應(yīng)用系統(tǒng)研究與設(shè)計(jì)[D]. 沈陽(yáng)：沈陽(yáng)工業(yè)大學(xué)，2009.

[5] 劉歡. 基于漏電流傳感器的機(jī)車(chē)絕緣檢測(cè)裝置的研究[J]. 儀表技術(shù)與傳感器，2017（1）：58-60.

[6] 黃宇達(dá)，魏霞，王迤冉. 基于SSH框架技術(shù)的學(xué)生信息管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 自動(dòng)化技術(shù)與應(yīng)用，2016，35（10）：37-41.

[7] 王子毅，張春海. 基于ECharts的數(shù)據(jù)可視化分析組件設(shè)計(jì)實(shí)現(xiàn)[J]. 微型機(jī)與應(yīng)用，2016，35（14）：46-48，51.

[8] 章銳，陳樹(shù)勇，劉道偉，等. 基于ECharts的電網(wǎng)Web可視化研究及應(yīng)用 [J]. 電測(cè)與儀表，2017，54（19）：59-66.

[9] 冀瀟，李楊. 采用ECharts可視化技術(shù)實(shí)現(xiàn)的數(shù)據(jù)體系監(jiān)控系統(tǒng)[J]. 計(jì)算機(jī)系統(tǒng)應(yīng)用，2017，26（6）：72-76.

[10]郭慶燕，張敏，楊賢棟. JQuery Ajax異步處理JSON數(shù)據(jù)實(shí)現(xiàn)氣象圖片的顯示 [J]. 計(jì)算機(jī)應(yīng)用與軟件，2016，33（6）：20-22，67.

[11]陳鵬鵬. 移動(dòng)互聯(lián)網(wǎng)下數(shù)據(jù)可視化技術(shù)及應(yīng)用[J]. 智能計(jì)算機(jī)與應(yīng)用，2015，5（6）：38-41.