基于Vue的地下綜合管廊管理平臺的前端設計與實現

摘? 要：地下管廊是城市的重要基礎設施，運用現代化的計算機系統維護其運營具有重要意義。文章使用Vue框架技術，設計了地下綜合管廊管理平臺的前端展示系統。該技術使用前后端分離方式和組件模式進行開發，提高了開發效率，縮短了開發周期，使系統更具擴展性而且可以更快交付使用。在前端系統中集成ElementUI組件庫，使開發更加便捷規范，顯示效果統一協調;使用Echarts圖表，使數據顯示更加形象直觀;這些技術的運用，提高了管廊運行的安全性，實現了管廊運營管理的高效性。

關鍵詞：綜合管廊;管理平臺;Vue;前端開發;組件化

中圖分類號：TP311? ? ? ? ? ? ? ? ? 文獻標識碼：A文章編號：2096-4706（2021）16-0013-06

Front end Design and Implementation of Underground Comprehensive Pipe Gallery Management Platform Based on Vue

LIU Zheng

（CRSC Communication & Information Group Company Ltd.， Beijing? 100070， China）

Abstract： Underground pipe gallery is an important urban infrastructure. It is of great significance to maintain it’s operation by using modern computer system. This paper uses Vue frame technology to design the front-end display system of underground comprehensive pipe gallery management platform. The technology uses the front-end and back-end separation mode and component mode for development， which improves the development efficiency， shortens the development cycle， makes the system more scalable and can be delivered faster. Integrate ElementUI component library in the front-end system to make the development more convenient and standardized， and the display effect is unified and coordinated; uses Echarts chart to make the data display more visual and intuitive; the application of these technologies improves the safety of pipe gallery operation and realizes the efficiency of pipe gallery operation and management.

Keywords： comprehensive pipe gallery; management platform; Vue; front end development; componentization

0? 引? 言

現代化的城市建設離不開水、電、氣等各種管線的鋪設，如果各種管線的安裝都各自為政會給管理帶來巨大的麻煩。這時地下綜合管廊就應運而生，它內部集成了城市中需要用到的大部分管線，對它們進行統一管理，這樣就避免了以前城市中常見的反復開挖道路對交通的不良影響，也避免了在管道施工過程中發生的各種事故。所以，地下綜合管廊是城市建設的一個重大進步[1]。

由于地下綜合管廊的復雜性，其運營關系到管廊內部各種管線的正常工作，所以建立一個現代化的管理系統[2]是格外必要的。在一個信息管理系統中，直接和用戶打交道的是前端展示子系統，一切數據計算，一切用戶操作，最終都要由前端系統來展示或反饋給用戶，所以前端系統的重要性不言而喻。因此，本文結合某綜合管廊管理系統，對使用VUE框架進行地下綜合管廊管理平臺的前端設計與實現進行闡述。

1? 關鍵技術研究

1.1? 前端開發領域的設計模式

伴隨著信息化建設的逐步加深，應用軟件的架構從客戶端服務器（CS）架構逐漸轉變為瀏覽器服務器（BS）架構。在BS架構中，前端系統運行于網頁瀏覽器上，以HTML頁面作為展現和互動的載體。

現代前端框架基本都使用了MVVM[3]（Model View ViewModel）設計模式，如圖1所示，這種設計模式由MVC[4]（Model View Controller）設計模式發展而來。MVVM設計模式最突出的特點是“雙向數據綁定”，即由ViewModel層來實現Model層和View層的雙向映射。當應用程序改變了Model層中的數據，ViewModel層會自動改變View層HTML頁面顯示的數據;當用戶通過輸入的方式改變了View層HTML頁面中的數據，ViewModel層會自動改變Model層中存儲的數據。按照這種設計模式開發的框架，省去了用戶直接控制dom的麻煩，讓開發者可以把更多的精力放在業務邏輯的開發上面。Vue前端框架就使用了MVVM設計模式。

1.2? Vue框架技術

Vue是一種漸近式前端框架[5]，它主要用來構建單頁應用，即整個系統只有1個HTML頁面，頁面中的內容都使用Vue進行構建。Vue的核心思想[6]是數據驅動和組件開發模式。所謂數據驅動，是指HTML頁面中的各種元素如事件、樣式、組件、邏輯處理等都被視為數據，開發者只需把數據組織好，只要數據發生改變，框架會自動處理好頁面中的相關元素，如此一來開發者不用直接處理dom，可以把精力集中到業務邏輯處理上。

組件開發模式，指在Vue工程中，所有的開發對象都以組件的形式出現，這樣會極大地提升代碼的可復用性和工程的可擴展性。Vue的2.x版使用ES5協議中的Object.defineProperty方法對數據變化進行監控，以此實現“雙向數據綁定”，但此方法無法感知引用對象的內部數據的變化。所以，Vue從3.0版開始采用ES6協議中的Proxy對象來實現“雙向數據綁定”。

1.3? 其他相關技術

Vuex[7]是和Vue相配套的數據狀態管理工具。它用來在各個組件間共享數據，并且可以記錄數據變化的歷史記錄。

Vue Router[8]是和Vue相配套的路由管理工具。它用來在各個組件間進行導航，主要通過對瀏覽器地址變化進行攔截，在同一頁面上渲染不同組件的方式來實現切換頁面內容的效果。它還可以通過“導航守衛”的方式，對路由切換進行檢測，可以在進入路由頁面前或后，進行相應處理。

Webpack[9]是一個前端工程化管理工具。它可以管理工程中引入的工具包，最后把工程打包成靜態資源文件，以便進行部署。

Vue Cli[10]是一個快速開發Vue工程的“腳手架”工具。之所以稱之為“腳手架”工具，是因為只要通過幾個選擇步驟就可以生成一個空的Vue工程，里面已經安裝好各種選定的工具如Vuex和Vue Router等。如果使用Vue Cli創建Vue工程，則已經內置Webpack，不用再單獨安裝。

Element UI[11]是一個專門針對Vue2.x的UI組件庫，由餓了嗎團隊推出。其中UI組件種類齊全，功能完善，技術成熟，在Vue生態圈中使用此組件庫的人數眾多。

2? 綜合管廊管理平臺的前端系統

2.1? 前端系統性能需求

可用性。在用戶輸入錯誤信息時，系統能夠拒絕執行并給出提示。用戶交互界面簡潔高效，具有較高的用戶體驗。

安全性。前端系統通過相應的設計避免出現安全性漏洞，防止常見的針對前端系統的網絡攻擊。

健壯性。當運行出現錯誤時，系統有對應處理預案，防止系統崩潰;用戶界面能夠及時給出錯誤提示，引導用戶正確處理問題。

可擴展性。系統設計時考慮到今后增加新業務模塊或更改現有模塊的需求，使系統不需要重新設計就可以方便地增加或更改業務模塊。

2.2? 前端系統架構

前端系統架構設計如圖2所示。其中，Nginx是一款高性能的HTTP和反向代理服務器，我們的前端系統就運行于此服務器中，它的反向代理功能使前端可以訪問非同源的后端接口。公共工具包括如Axios和 Echarts這樣的通用工具，自己編寫的公共組件如定制表格，配置數據文件可以配置包括后端接口地址和菜單等數據。頁面容器包括Vue框架，ElementUI組件庫和Vuex狀態管理工具，負責組織頁面數據。Web pack負責管理外部引入的工具包管理和程序打包，最后生成一個可在瀏覽器中使用的單頁應用程序。

2.3? 前端系統設計與實現

綜合管廊管理平臺的業務分模塊進行開發，業務模塊代碼被統一放在views目錄下。視頻分析模塊負責攝像頭和視頻的管理，綜合監控模塊負責監控設備運行狀態，通信廣播模塊負責管理管廊內部顯示屏和廣播系統的管理，運維管理負責巡更管理和設備故障管理，資產管理負責電子數據和設備檔案管理，應急管理負責預警預案管理，策略節能負責能源使用策略管理，告警負責設備告警數據管理，通話負責開通視頻會議。業務模塊布局如圖3所示。

2.3.1? 基礎通用功能

基礎通用功能包括，網絡請求，路由管理，狀態管理，圖表展示，這些模塊為業務模塊服務：

（1）網絡請求。本系統使用Axios[12]作為Ajax[13]請求工具。Axios是一個基于Promise規范的網絡請求庫，在瀏覽器環境下運行使用XMLHttpRequests方式，可以很好地解決傳統Ajax調用過程中的回調地獄問題。

在本系統中把Axios定義代碼封裝在request.js文件中，主要功能為向后臺服務發送請求并接收返回數據，在請求攔截器中向請求頭添加token數據，在響應攔截器中檢查返回信息，對錯誤信息給出提示。

（2）路由管理。本系統使用Vue Router作為路由管理器。路由定義代碼封裝在router目錄下的index.js文件中，主要定義了路由表中各跳轉路徑對應的業務模塊，以及全局前置守衛，在路由跳轉前其中代碼會被運行。

（3）狀態管理。本系統使用Vuex統一管理各個組件的數據，其實就是把需要共享的數據統一存儲在內存中。Vuex的定義代碼封裝在store目錄下的index.js中，主要創建了Vuex實例對象;getters.js中定義了getters對象，用來快捷獲取狀態數據;modules目錄下的文件中定義了對應于各業務模塊的Vuex子模塊，用來管理各業務模塊的狀態數據。

（4）圖表展示。本系統使用Echarts[14]作為圖表生成工具。Echarts是一個用Javascript語言實現的開源圖表庫，編寫很少的代碼就可以實現效果豐富的圖表。Echarts的功能代碼被封裝在myChart.js文件中，主要功能為，根據傳入的參數生成圖表實例對象，并為實例對象添加功能函數。

系統開發時，將此類功能抽離單獨編寫，有利于系統功能的維護和擴展。

2.3.2? 視頻分析

管廊出入口需要監控人員進出，管廊內部的管線和設備需要視頻監控其運行狀態。本模塊由四部分組成，分別為視頻、信息庫、布控和結果：

（1）視頻，在視頻模塊中可以查看攝像頭的實時畫面，如圖4所示。

先從左側的樹狀結構中找到想看的攝像頭，或使用搜索框搜索，然后點擊對應的攝像頭選項，中部的顯示區域就會顯示相應的攝像頭內容。顯示區域右上方的1、4、9按鈕可以分別切換同時顯示攝像頭的數目。右側PTZ控制區域可以控制攝像頭的指向和放大倍數。本模塊使用flv.js技術以websocket協議傳輸視頻流數據，向后臺服務發送ajax請求的方式獲取攝像頭集合數據，也以此方式控制攝像頭的縮放和移動。

（2）信息庫，系統中可以存儲人臉識別信息和車輛識別信息，以供管理人員進行比對。信息庫數據以表格方式顯示，可以在此模塊中進行增刪改查操作。表格使用了el-table組件，按鈕使用了el-button組件。

（3）布控，用戶可以將信息庫與攝像頭資源關聯起來，以此形成一項布控任務，對指定人員或車輛進行監控。可以在此模塊中開始和停止任務，也可以新建和刪除任務。其中任務列表使用了el-tree組件。

（4）結果，此模塊用表格的方式來顯示布控任務的結果，每條任務結果的內容為任務開始日期和時間、任務名稱、事件類型、事件地點、報警信息和圖片。在模塊中可以按照日期、任務名稱或關鍵字來查詢任務結果。其中的布控任務選中菜單使用了el-select組件，選單數據需要在模塊載入時從后臺接口獲取。

2.3.3? 綜合監控

綜合監控模塊包括七個部分：照明監控，環境監測，環境控制，安全防范，井蓋監測，結構監測，用電監測。界面如圖5所示。

本模塊的主要功能為，對前述七個部分的傳感器數據進行監測，同時可以對設備進行控制。界面數據顯示和控制都通過ajax請求方式與后臺服務器進行通信。

2.3.4? 通信廣播

在管廊和其附屬設施內關鍵部位都安裝有顯示屏和揚聲器，工作人員可以使用本模塊播放文字廣播或語音廣播：

（1）廣播播放，通過表格形式顯示系統中正在播放的廣播，顯示內容有廣播ID，標題，創建日期，類型，位置，循環次數，開始時間，結束時間，也可以點擊停止按鈕，停止此條廣播的播放?？梢栽诖私缑嬷苯觿摻ㄕZ音廣播或文字廣播。語音喊話為，工作人員直接通過麥克風向選定區域進行語音廣播。正在播放的廣播狀態，由后臺使用websocket協議推送到前端，前端接收到狀態改變數據后，改變表格中對應的廣播數據。

（2）廣播庫，通過表格形式顯示已經創建的廣播記錄，顯示的內容有創建日期，播放內容（語音文件名或文字），類型?？梢灾苯硬シ呕騽h除對應的廣播，也可以創建廣播記錄。通過輸入關鍵字可以查詢廣播記錄。需要上傳語音廣播文件時，使用了el-upload組件，上傳成功后需要把返回的文件地址存入上傳組件配置的數組中。

（3）播放歷史，通過表格形式顯示播放過的廣播，顯示的內容與創建日期，標題，位置，播放次數，開始和結束時間，廣播類型，還可以通過詳情按鈕查看廣播內容。通過選擇播放時間段和類型，可以查詢相應的廣播記錄。其中查詢類型菜單中的數據需要從后臺接口讀取，然后存入el-select組件配置的數組中。

（4）固定語音通信，通過列表的形式顯示當前存在的工業電話，可以直接撥打或掛斷選中的電話。通過關鍵字和區域，可以查詢相應的電話。電話響鈴或掛斷狀態的轉變，需要后臺使用websocket推送。用戶主動撥打電話或掛斷電話，需要調用相應后臺接口。

通過本模塊的固定語音通信子模塊，工作人員可以與管廊中的工業電話機進行通話。

2.3.5? 運維管理

管廊維護包括巡更任務管理，巡更執行管理和處理設備故障：

（1）巡更任務管理，在模塊載入時從后臺接口讀取數據，通過表格的形式顯示已創建的巡更任務，顯示內容有序號，任務名稱，任務描述?？梢詫x擇的任務進行修改、任務下發和刪除操作。通過輸入關鍵字，可以查詢任務。點擊新建巡更任務按鈕可以調用對應后臺接口新建任務。

（2）巡更執行管理，在模塊載入時從后臺接口讀取數據，通過表格的形式顯示已下發的巡更任務，顯示內容有序號，任務名稱，任務描述，是否過期，過期時間，任務開始時間，任務完成時間，巡更人員，執行狀態?？梢渣c擊開始任務按鈕開始任務，也可以查看相應任務詳情。通過輸入關鍵字和選擇任務狀態，可以查詢任務。

（3）設備故障管理，在模塊載入時從后臺接口讀取數據，通過表格形式顯示設備故障記錄，顯示內容有序號，設備名稱，報修時間，報修人，維修時間，維修人，完成時間，故障處理人，狀態。可以點擊分配維修，彈出對話框，把維修任務分配給指定維修人員，點擊維修完成，關閉維修任務。通過輸入任務名稱或編號，選擇任務區域，維修狀態和類型查詢維修任務。其中對話框使用el-dialog組件。

通過本模塊，可以方便地對這兩部分進行管理。

2.3.6? 資產管理

管廊及其附屬設施中有很多設備，通過本模塊，可以方便地對這些設備進行管理：

（1）電子數據，使用el-tabs組件以Tabs標簽頁的方式顯示各種分類下的設備信息，這些信息包括技術概況和相關技術文件。頁面上有編輯按鈕，可以對信息進行編輯，還可以作為Excel文件的方式導出。

（2）設備檔案，如圖6所示。在模塊載入時從后臺接口讀取數據，使用表格的方式顯示各個設備的檔案信息，包括：序號，設備名稱，設備編號，位置，質保到期時間，上次保養時間，下次保養時間，累計運行天數。在頁面中可以編輯檔案信息，也可查看檔案詳情。通過關鍵字和位置信息，可以查詢相關檔案。也可以把檔案數據作為Excel文件導出。其中區域選擇使用el-cascader級聯選擇器組件，區域數據需要在模塊載入時從后臺接口讀取。

2.3.7? 應急管理

在現代工業管理中為了應對突發事件都會預先設定應急預案，本模塊的功能就是管理管廊的應急預案：

（1）預案執行-當前執行，在模塊載入時從后臺接口讀取數據，以表格方式顯示現在正在執行的預案信息，包括：序號，所屬類別，所屬單位，名稱，危險目標，負責人，聯系人電話，啟用時間，地點，應急等級，當前進度。點擊當前進度可以查看預案執行詳情，如圖7所示。其中執行進度條使用el-progress組件。

預案詳情中除了有預案的基本信息外，還可以對預案的執行進行控制，在右下部列出了預案的所有執行步驟和實時視頻畫面，點擊確認完成當前步驟。左下部顯示當前步驟的記錄，可以點擊添加記錄按鈕，添加文字和圖片記錄。顯示步驟使用了el-timeline時間線組件。

（2）預案執行-歷史執行，在模塊載入時從后臺接口讀取數據，顯示預案的執行統計數據，主頁面分為上下兩部分，如圖8所示。上部顯示執行總次數，用Echarts生成的環狀圖表示歷史執行次數中各個應急等級比例，用柱狀圖表示在執行次數與時間的關系。下部用表格的形式顯示歷史上執行過預案信息，包括序號，所屬類別，所屬單位，名稱，危險目標，負責人，聯系人電話，啟用時間，解除時間，地點，應急等級，可以點擊查看顯示預案執行報告。使用Echarts圖表，需要先引入myChart類，生成實例對象后，調用initChart函數初始化圖表。

（3）預警預案，在此模塊設置預案，在模塊載入時從后臺接口讀取數據，用表格方式顯示已經設置好但還沒執行的預案信息，包括序號，所屬類別，所屬單位，名稱，危險目標，點擊編輯可以再次編輯所選預案。選中某項預案后可以執行或導出為文件，也可以刪除。點擊應急演練按鈕，可以讓選中的預案進入應急演練模式。在沒有選中任何預案時，應急演練按鈕，執行按鈕和導出按鈕都會被設置為不可用狀態。

（4）應急演練，模擬預案的步驟，給工作人員進行日常演練。頁面顯示預案的基本信息和預案執行步驟，可以修改執行步驟的內容。

2.3.8? 策略節能

管廊建設中會集成很多子系統，而這些子系統基本上也是智慧系統，通過接口集成，管廊管理系統可以直接“命令”這些子系統執行預定任務：

（1）策略應用，在模塊載入時從后臺接口讀取數據，以表格形式顯示出各區域對應的策略名稱如高能模式和節能模式，可以切換對應區域的策略。

（2）策略管理，在模塊載入時從后臺接口讀取數據，以表格形式顯示出現有策略模式，如高能模式、節能模式等，在頁面中可以編輯選中的策略模式，也可以新建或刪除策略模式。

本模塊針對節能制定策略，協調相關子系統的控制。

2.3.9? 告警

管廊中的傳感器在監測到某些危險情況時會產生告警數據，本模塊對這些告警數據進行管理。告警的標題后會動態顯示當前存在的告警數目，此數據需要后臺通過websocket推送。

（1）當前告警，在模塊載入時從后臺接口讀取數據，以表格形式顯示出當前的告警數據，包括詳情，等級，告警類型，設備名稱，位置，告警時間，是否確認，其中詳情指告警的詳細信息，不同等級的文字顏色不同。點擊處理可以標識對應告警記錄為已處理，從當前告警中移除。通過告警等級，區域，確認狀態和關鍵字，可以查詢告警記錄，點擊刷新按鈕可以刷新當前告警記錄。

（2）告警日志，在模塊載入時從后臺接口讀取數據，以表格形式顯示出曾經發生過的告警數據，表格中的字段和當前告警模塊中的表格一致?？梢酝ㄟ^時間段，區域和關鍵字查詢日志數據，也可以將數據作為Excel文件導出。

（3）區域報警統計，在模塊載入時從后臺接口讀取數據，用Echarts生成的環形圖按比例顯示出某個時間段的告警數量，如圖9所示?？梢灾付▍^域和時間段。

3? 結? 論

本文基于Vue框架，綜合運用Webpack、Vuex、VueRouter、 ElementUI、Axios、Echarts等技術，構建了地下綜合管廊管理平臺的前端系統，實現了綜合管廊的視頻監控管理、設備監控管理、通信廣播管理、運維管理、設備資產管理、應急管理、策略節能管理和告警管理等綜合管控系統的前端部分。使用前后端分離的開發方式，使前端系統的開發不再依賴后端的開發進度，極大地提高了開發效率。Vue的組件化開發思想使代碼更容易復用，擴展系統功能更方便。

參考文獻：

[1] 梁薦，郝志成.淺議城市地下綜合管廊發展現狀及應對措施 [J].城市建筑，2013（14）：286-287.

[2] 曹茂春，張東霞.智慧管廊信息化建設探討 [J].智能建筑與智慧城市，2016（11）：76-80.

[3] 李嘉，趙凱強，李長云.Web前端開發技術的演化與MVVM設計模式研究 [J].電腦知識與技術，2018，14（2）：221-222+251.

[4] 嚴偉，郭丹.基于MVC設計模式的前端設計 [J].網絡安全技術與應用，2016（9）：46+48.

[5] Vue.js.Vue實例[EB/OL].[2021-06-10].https：//cn.vuejs.org.

[6] 張耀春.Vue.js權威指南 [M].電子工業出版社，2016.

[7] Vuex.What is Vuex [EB/OL].[2021-06-01].https：//vuex.vuejs.org/zh/.

[8] Vue.js.Vue Router [EB/OL].[2021-06-10].https：//router.vuejs.org/zh/.

[9] Webpack .Webpack中文文檔 [EB/OL].[2021-06-01].https：//webpack.docschina.org/concepts/.

[10] Vue.js.Vue Cli [EB/OL].[2021-06-10].https：//cli.vuejs.org/zh/.

[11] Element UI [EB/OL].[2021-06-10].https：//element.eleme.cn/.

[12] Axios [EB/OL].[2021-06-10].https：//axios-http.com/.

[13] Mozilla. axios中文網.Ajax [EB/OL].[2021-05-31].https：//developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX.

[14] LI D，MEI H H，SHEN Y，et al. ECharts：A Declarative Framework for Rapid Construction of Wed-based Visualization [J].Visual Informatics，2018（2）：136-146.

作者簡介：劉正（1981—），男，漢族，北京人，軟件開發工程師，碩士，研究方向：地下管廊信息化。