基于Echarts的地鐵屏蔽門數據監控系統的實現

楊嬌　陳強　王加賓　梁鑒如　周玲

摘 要：針對地鐵屏蔽門狀態監控問題，以上海申通地鐵2號線屏蔽門控制系統為研究對象，設計了基于Echarts的可視化地鐵屏蔽門數據體系監控系統。整個系統分為8個子模塊，實時顯示、狀態量顯示、模擬量時序圖、預警、歷史報警、歷史記錄、設置、回放。實時顯示模塊，通過繼電器傳回的狀態值，動態模擬地鐵屏蔽門的開關狀態，在狀態量顯示模塊和模擬量時序圖模塊，采用了Echarts可視化技術，分別通過時序圖和折線圖的形式展示，開門繼電器和門鎖閉繼電器的狀態信息和電壓電流值，通過滑動條查詢不同時間段對應的信息，通過折線圖的波動情況可以知道屏蔽門的運行狀態，達到實時更新，實時監控的作用。并將回傳的信息保存在數據庫中，方便以后查詢。

關鍵詞：Echarts； Ajax； 可視化； JSON； 監控； 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

引言

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

1 系統架構設計

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

監控系統首先利用電壓傳感器、電流傳感器采集門使能繼電器、開門繼電器、門鎖閉繼電器上電壓、電流值，并將采集到的數據傳送到服務器端。服務器端一方面將數據保存在數據庫中，另一方面發送給瀏覽器的遠程控制中心。遠程控制中心根據事先設定的閾值來進行預警還是報警提醒。數據每隔3 s鐘獲取一次，故而數據庫每隔3 s鐘刷新一次，頁面通過Ajax自動刷新。

2 功能模塊設計

2.1 實時顯示

實時顯示模塊，用于實時顯示地鐵站臺門的狀態信息。通過門使能繼電器，開門繼電器，門鎖閉繼電器傳回來的狀態值動態模擬地鐵屏蔽門的開關狀態，當值為0時表示門處于關閉狀態，同時設置門的顏色為紅色；當值為1時表示門打開狀態，此時門的顏色顯示綠色。通過顯示不同的顏色，也方便運維人員能夠及時發現故障門所在的位置。考慮到資源利用的最大化，上行站臺只在上下班高峰期才會使用。下行站臺分為四節編組和八節編組，根據下行六車道是否有電壓來判斷是四節開門還是八節開門，當沒有電壓值時四節開門，有電壓值時八節開門。如圖2所示。

2.2 狀態量顯示與模擬量時序圖

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

2.3 預警 、報警相關模塊

預警、歷史報警與歷史記錄都采用表格的形式，用來查詢特定時間段對應的繼電器傳回來的電流電壓的值和狀態量，根據傳回的數據顯示報警預警信息。設置模塊是用于閾值的修改，為后臺地鐵屏蔽門是否發生故障提供評判標準。回放模塊選定將某一時刻的所有信息顯示在同一行，再逐行顯示出每隔3 s傳回來的數據信息。所選時間段內的信息會以滾動的形式播放在相應的區域框中，并且提供有5倍，10倍的倍速供選擇，可以根據需要去改變相應的播放速度。

3 技術簡介

3.1 Echarts

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

3.2 MySQL

MySQL是一個小型的關系型數據庫管理系統，把數據存儲在表格中，使用標準的結構化查詢語言——sql訪問數據庫。MySQL的調試、管理、優化更為簡單。因此在本項目中選用MySQL作為后臺數據庫管理系統，并結合Navicat可視化工具，實現對數據庫的管理和開發。Navicat使用圖形化的用戶界面，可以讓用戶使用和管理更為輕松。

3.3 Ajax

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

4 系統設計與實現

4.1 系統動態監測過程

在瀏覽器端訪問相應的網頁，觸發其與服務器端的交互。瀏覽器端使用jQuery通過XMLHttpRequest發送請求，服務器接收請求后，通過Struts定位到所需要調用的Action類中的方法，并通過該類中的方法獲取數據傳輸信息，并以JSon的格式返回至前臺頁面后，再通過Echarts可視化方法生成JSP文件，并存放在指定的位置，在前端生成可視化界面展示給用戶，具體過程如圖5所示。

4.2 利用Echarts可視化技術的系統實現

系統硬件部分通過各種傳感器采集數據，與遠程地鐵監管中心建立網絡通信。當硬件系統與遠程地鐵屏蔽門監控中心建立連接之后，硬件系統會向監管中心每隔3 s主動以字符串的形式發送數據信息，服務器端將傳回來的數據信息保存在數據庫中，為狀態量顯示和模擬量時序圖2個模塊提供了數據源。采用Ajax異步調用的方式，通過調用后臺Java代碼讀取所需要的數據信息，以Json的數據格式傳輸，利用Echarts可視化插件[11]，將數據傳輸信息以圖形化的方式呈現在用戶面前。其具體流程如圖6所示。

5 系統調試

現場對地鐵屏蔽門數據監控系統進行測試，屏蔽門運行狀態檢測平臺實物圖如圖7所示。通過PC端打開瀏覽器，輸入相應的網址，進入遠程監控中心系統，同時啟動Tomcat服務器，保證通信。現場測試實時顯示模塊是否能夠根據硬件傳輸的參數改變相應的門的狀態。其中S表示車的狀態，是否有車進站；P1、P2、P3分別表示上行、中行、下行門的狀態。1表示門是開的狀態，在頁面門的位置用綠色來表示，0表示門是關的狀態，在頁面門的位置用紅色來表示。P4用來控制下行是四節開門還是八節開門，四節開門的位置在下行的右邊，當P4的值為1時表示八節開門，值為0時表示四節開門。具體數據狀態見表1。

6 結束語

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

參考文獻

[1] 馬殷元，王虎軍，謝文洋. 鐵路空調客車地面電源監控系統軟件設計[J]. 測控技術，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] 佟進. 基于AJAX框架WEB應用系統研究與設計[D]. 沈陽：沈陽工業大學，2009.

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

[6] 黃宇達，魏霞，王迤冉. 基于SSH框架技術的學生信息管理系統的設計與實現[J]. 自動化技術與應用，2016，35（10）：37-41.

[7] 王子毅，張春海. 基于ECharts的數據可視化分析組件設計實現[J]. 微型機與應用，2016，35（14）：46-48，51.

[8] 章銳，陳樹勇，劉道偉，等. 基于ECharts的電網Web可視化研究及應用 [J]. 電測與儀表，2017，54（19）：59-66.

[9] 冀瀟，李楊. 采用ECharts可視化技術實現的數據體系監控系統[J]. 計算機系統應用，2017，26（6）：72-76.

[10]郭慶燕，張敏，楊賢棟. JQuery Ajax異步處理JSON數據實現氣象圖片的顯示 [J]. 計算機應用與軟件，2016，33（6）：20-22，67.

[11]陳鵬鵬. 移動互聯網下數據可視化技術及應用[J]. 智能計算機與應用，2015，5（6）：38-41.