基于Vue的地下綜合管廊管理平臺(tái)的前端設(shè)計(jì)與實(shí)現(xiàn)

摘? 要：地下管廊是城市的重要基礎(chǔ)設(shè)施，運(yùn)用現(xiàn)代化的計(jì)算機(jī)系統(tǒng)維護(hù)其運(yùn)營(yíng)具有重要意義。文章使用Vue框架技術(shù)，設(shè)計(jì)了地下綜合管廊管理平臺(tái)的前端展示系統(tǒng)。該技術(shù)使用前后端分離方式和組件模式進(jìn)行開(kāi)發(fā)，提高了開(kāi)發(fā)效率，縮短了開(kāi)發(fā)周期，使系統(tǒng)更具擴(kuò)展性而且可以更快交付使用。在前端系統(tǒng)中集成ElementUI組件庫(kù)，使開(kāi)發(fā)更加便捷規(guī)范，顯示效果統(tǒng)一協(xié)調(diào);使用Echarts圖表，使數(shù)據(jù)顯示更加形象直觀;這些技術(shù)的運(yùn)用，提高了管廊運(yùn)行的安全性，實(shí)現(xiàn)了管廊運(yùn)營(yíng)管理的高效性。

關(guān)鍵詞：綜合管廊;管理平臺(tái);Vue;前端開(kāi)發(fā);組件化

中圖分類號(hào)：TP311? ? ? ? ? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：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? 引? 言

現(xiàn)代化的城市建設(shè)離不開(kāi)水、電、氣等各種管線的鋪設(shè)，如果各種管線的安裝都各自為政會(huì)給管理帶來(lái)巨大的麻煩。這時(shí)地下綜合管廊就應(yīng)運(yùn)而生，它內(nèi)部集成了城市中需要用到的大部分管線，對(duì)它們進(jìn)行統(tǒng)一管理，這樣就避免了以前城市中常見(jiàn)的反復(fù)開(kāi)挖道路對(duì)交通的不良影響，也避免了在管道施工過(guò)程中發(fā)生的各種事故。所以，地下綜合管廊是城市建設(shè)的一個(gè)重大進(jìn)步[1]。

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

1? 關(guān)鍵技術(shù)研究

1.1? 前端開(kāi)發(fā)領(lǐng)域的設(shè)計(jì)模式

伴隨著信息化建設(shè)的逐步加深，應(yīng)用軟件的架構(gòu)從客戶端服務(wù)器（CS）架構(gòu)逐漸轉(zhuǎn)變?yōu)闉g覽器服務(wù)器（BS）架構(gòu)。在BS架構(gòu)中，前端系統(tǒng)運(yùn)行于網(wǎng)頁(yè)瀏覽器上，以HTML頁(yè)面作為展現(xiàn)和互動(dòng)的載體。

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

1.2? Vue框架技術(shù)

Vue是一種漸近式前端框架[5]，它主要用來(lái)構(gòu)建單頁(yè)應(yīng)用，即整個(gè)系統(tǒng)只有1個(gè)HTML頁(yè)面，頁(yè)面中的內(nèi)容都使用Vue進(jìn)行構(gòu)建。Vue的核心思想[6]是數(shù)據(jù)驅(qū)動(dòng)和組件開(kāi)發(fā)模式。所謂數(shù)據(jù)驅(qū)動(dòng)，是指HTML頁(yè)面中的各種元素如事件、樣式、組件、邏輯處理等都被視為數(shù)據(jù)，開(kāi)發(fā)者只需把數(shù)據(jù)組織好，只要數(shù)據(jù)發(fā)生改變，框架會(huì)自動(dòng)處理好頁(yè)面中的相關(guān)元素，如此一來(lái)開(kāi)發(fā)者不用直接處理dom，可以把精力集中到業(yè)務(wù)邏輯處理上。

組件開(kāi)發(fā)模式，指在Vue工程中，所有的開(kāi)發(fā)對(duì)象都以組件的形式出現(xiàn)，這樣會(huì)極大地提升代碼的可復(fù)用性和工程的可擴(kuò)展性。Vue的2.x版使用ES5協(xié)議中的Object.defineProperty方法對(duì)數(shù)據(jù)變化進(jìn)行監(jiān)控，以此實(shí)現(xiàn)“雙向數(shù)據(jù)綁定”，但此方法無(wú)法感知引用對(duì)象的內(nèi)部數(shù)據(jù)的變化。所以，Vue從3.0版開(kāi)始采用ES6協(xié)議中的Proxy對(duì)象來(lái)實(shí)現(xiàn)“雙向數(shù)據(jù)綁定”。

1.3? 其他相關(guān)技術(shù)

Vuex[7]是和Vue相配套的數(shù)據(jù)狀態(tài)管理工具。它用來(lái)在各個(gè)組件間共享數(shù)據(jù)，并且可以記錄數(shù)據(jù)變化的歷史記錄。

Vue Router[8]是和Vue相配套的路由管理工具。它用來(lái)在各個(gè)組件間進(jìn)行導(dǎo)航，主要通過(guò)對(duì)瀏覽器地址變化進(jìn)行攔截，在同一頁(yè)面上渲染不同組件的方式來(lái)實(shí)現(xiàn)切換頁(yè)面內(nèi)容的效果。它還可以通過(guò)“導(dǎo)航守衛(wèi)”的方式，對(duì)路由切換進(jìn)行檢測(cè)，可以在進(jìn)入路由頁(yè)面前或后，進(jìn)行相應(yīng)處理。

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

Vue Cli[10]是一個(gè)快速開(kāi)發(fā)Vue工程的“腳手架”工具。之所以稱之為“腳手架”工具，是因?yàn)橹灰ㄟ^(guò)幾個(gè)選擇步驟就可以生成一個(gè)空的Vue工程，里面已經(jīng)安裝好各種選定的工具如Vuex和Vue Router等。如果使用Vue Cli創(chuàng)建Vue工程，則已經(jīng)內(nèi)置Webpack，不用再單獨(dú)安裝。

Element UI[11]是一個(gè)專門針對(duì)Vue2.x的UI組件庫(kù)，由餓了嗎團(tuán)隊(duì)推出。其中UI組件種類齊全，功能完善，技術(shù)成熟，在Vue生態(tài)圈中使用此組件庫(kù)的人數(shù)眾多。

2? 綜合管廊管理平臺(tái)的前端系統(tǒng)

2.1? 前端系統(tǒng)性能需求

可用性。在用戶輸入錯(cuò)誤信息時(shí)，系統(tǒng)能夠拒絕執(zhí)行并給出提示。用戶交互界面簡(jiǎn)潔高效，具有較高的用戶體驗(yàn)。

安全性。前端系統(tǒng)通過(guò)相應(yīng)的設(shè)計(jì)避免出現(xiàn)安全性漏洞，防止常見(jiàn)的針對(duì)前端系統(tǒng)的網(wǎng)絡(luò)攻擊。

健壯性。當(dāng)運(yùn)行出現(xiàn)錯(cuò)誤時(shí)，系統(tǒng)有對(duì)應(yīng)處理預(yù)案，防止系統(tǒng)崩潰;用戶界面能夠及時(shí)給出錯(cuò)誤提示，引導(dǎo)用戶正確處理問(wèn)題。

可擴(kuò)展性。系統(tǒng)設(shè)計(jì)時(shí)考慮到今后增加新業(yè)務(wù)模塊或更改現(xiàn)有模塊的需求，使系統(tǒng)不需要重新設(shè)計(jì)就可以方便地增加或更改業(yè)務(wù)模塊。

2.2? 前端系統(tǒng)架構(gòu)

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

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

綜合管廊管理平臺(tái)的業(yè)務(wù)分模塊進(jìn)行開(kāi)發(fā)，業(yè)務(wù)模塊代碼被統(tǒng)一放在views目錄下。視頻分析模塊負(fù)責(zé)攝像頭和視頻的管理，綜合監(jiān)控模塊負(fù)責(zé)監(jiān)控設(shè)備運(yùn)行狀態(tài)，通信廣播模塊負(fù)責(zé)管理管廊內(nèi)部顯示屏和廣播系統(tǒng)的管理，運(yùn)維管理負(fù)責(zé)巡更管理和設(shè)備故障管理，資產(chǎn)管理負(fù)責(zé)電子數(shù)據(jù)和設(shè)備檔案管理，應(yīng)急管理負(fù)責(zé)預(yù)警預(yù)案管理，策略節(jié)能負(fù)責(zé)能源使用策略管理，告警負(fù)責(zé)設(shè)備告警數(shù)據(jù)管理，通話負(fù)責(zé)開(kāi)通視頻會(huì)議。業(yè)務(wù)模塊布局如圖3所示。

2.3.1? 基礎(chǔ)通用功能

基礎(chǔ)通用功能包括，網(wǎng)絡(luò)請(qǐng)求，路由管理，狀態(tài)管理，圖表展示，這些模塊為業(yè)務(wù)模塊服務(wù)：

（1）網(wǎng)絡(luò)請(qǐng)求。本系統(tǒng)使用Axios[12]作為Ajax[13]請(qǐng)求工具。Axios是一個(gè)基于Promise規(guī)范的網(wǎng)絡(luò)請(qǐng)求庫(kù)，在瀏覽器環(huán)境下運(yùn)行使用XMLHttpRequests方式，可以很好地解決傳統(tǒng)Ajax調(diào)用過(guò)程中的回調(diào)地獄問(wèn)題。

在本系統(tǒng)中把Axios定義代碼封裝在request.js文件中，主要功能為向后臺(tái)服務(wù)發(fā)送請(qǐng)求并接收返回?cái)?shù)據(jù)，在請(qǐng)求攔截器中向請(qǐng)求頭添加token數(shù)據(jù)，在響應(yīng)攔截器中檢查返回信息，對(duì)錯(cuò)誤信息給出提示。

（2）路由管理。本系統(tǒng)使用Vue Router作為路由管理器。路由定義代碼封裝在router目錄下的index.js文件中，主要定義了路由表中各跳轉(zhuǎn)路徑對(duì)應(yīng)的業(yè)務(wù)模塊，以及全局前置守衛(wèi)，在路由跳轉(zhuǎn)前其中代碼會(huì)被運(yùn)行。

（3）狀態(tài)管理。本系統(tǒng)使用Vuex統(tǒng)一管理各個(gè)組件的數(shù)據(jù)，其實(shí)就是把需要共享的數(shù)據(jù)統(tǒng)一存儲(chǔ)在內(nèi)存中。Vuex的定義代碼封裝在store目錄下的index.js中，主要?jiǎng)?chuàng)建了Vuex實(shí)例對(duì)象;getters.js中定義了getters對(duì)象，用來(lái)快捷獲取狀態(tài)數(shù)據(jù);modules目錄下的文件中定義了對(duì)應(yīng)于各業(yè)務(wù)模塊的Vuex子模塊，用來(lái)管理各業(yè)務(wù)模塊的狀態(tài)數(shù)據(jù)。

（4）圖表展示。本系統(tǒng)使用Echarts[14]作為圖表生成工具。Echarts是一個(gè)用Javascript語(yǔ)言實(shí)現(xiàn)的開(kāi)源圖表庫(kù)，編寫很少的代碼就可以實(shí)現(xiàn)效果豐富的圖表。Echarts的功能代碼被封裝在myChart.js文件中，主要功能為，根據(jù)傳入的參數(shù)生成圖表實(shí)例對(duì)象，并為實(shí)例對(duì)象添加功能函數(shù)。

系統(tǒng)開(kāi)發(fā)時(shí)，將此類功能抽離單獨(dú)編寫，有利于系統(tǒng)功能的維護(hù)和擴(kuò)展。

2.3.2? 視頻分析

管廊出入口需要監(jiān)控人員進(jìn)出，管廊內(nèi)部的管線和設(shè)備需要視頻監(jiān)控其運(yùn)行狀態(tài)。本模塊由四部分組成，分別為視頻、信息庫(kù)、布控和結(jié)果：

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

先從左側(cè)的樹(shù)狀結(jié)構(gòu)中找到想看的攝像頭，或使用搜索框搜索，然后點(diǎn)擊對(duì)應(yīng)的攝像頭選項(xiàng)，中部的顯示區(qū)域就會(huì)顯示相應(yīng)的攝像頭內(nèi)容。顯示區(qū)域右上方的1、4、9按鈕可以分別切換同時(shí)顯示攝像頭的數(shù)目。右側(cè)PTZ控制區(qū)域可以控制攝像頭的指向和放大倍數(shù)。本模塊使用flv.js技術(shù)以websocket協(xié)議傳輸視頻流數(shù)據(jù)，向后臺(tái)服務(wù)發(fā)送ajax請(qǐng)求的方式獲取攝像頭集合數(shù)據(jù)，也以此方式控制攝像頭的縮放和移動(dòng)。

（2）信息庫(kù)，系統(tǒng)中可以存儲(chǔ)人臉識(shí)別信息和車輛識(shí)別信息，以供管理人員進(jìn)行比對(duì)。信息庫(kù)數(shù)據(jù)以表格方式顯示，可以在此模塊中進(jìn)行增刪改查操作。表格使用了el-table組件，按鈕使用了el-button組件。

（3）布控，用戶可以將信息庫(kù)與攝像頭資源關(guān)聯(lián)起來(lái)，以此形成一項(xiàng)布控任務(wù)，對(duì)指定人員或車輛進(jìn)行監(jiān)控?？梢栽诖四K中開(kāi)始和停止任務(wù)，也可以新建和刪除任務(wù)。其中任務(wù)列表使用了el-tree組件。

（4）結(jié)果，此模塊用表格的方式來(lái)顯示布控任務(wù)的結(jié)果，每條任務(wù)結(jié)果的內(nèi)容為任務(wù)開(kāi)始日期和時(shí)間、任務(wù)名稱、事件類型、事件地點(diǎn)、報(bào)警信息和圖片。在模塊中可以按照日期、任務(wù)名稱或關(guān)鍵字來(lái)查詢?nèi)蝿?wù)結(jié)果。其中的布控任務(wù)選中菜單使用了el-select組件，選單數(shù)據(jù)需要在模塊載入時(shí)從后臺(tái)接口獲取。

2.3.3? 綜合監(jiān)控

綜合監(jiān)控模塊包括七個(gè)部分：照明監(jiān)控，環(huán)境監(jiān)測(cè)，環(huán)境控制，安全防范，井蓋監(jiān)測(cè)，結(jié)構(gòu)監(jiān)測(cè)，用電監(jiān)測(cè)。界面如圖5所示。

本模塊的主要功能為，對(duì)前述七個(gè)部分的傳感器數(shù)據(jù)進(jìn)行監(jiān)測(cè)，同時(shí)可以對(duì)設(shè)備進(jìn)行控制。界面數(shù)據(jù)顯示和控制都通過(guò)ajax請(qǐng)求方式與后臺(tái)服務(wù)器進(jìn)行通信。

2.3.4? 通信廣播

在管廊和其附屬設(shè)施內(nèi)關(guān)鍵部位都安裝有顯示屏和揚(yáng)聲器，工作人員可以使用本模塊播放文字廣播或語(yǔ)音廣播：

（1）廣播播放，通過(guò)表格形式顯示系統(tǒng)中正在播放的廣播，顯示內(nèi)容有廣播ID，標(biāo)題，創(chuàng)建日期，類型，位置，循環(huán)次數(shù)，開(kāi)始時(shí)間，結(jié)束時(shí)間，也可以點(diǎn)擊停止按鈕，停止此條廣播的播放?？梢栽诖私缑嬷苯觿?chuàng)建語(yǔ)音廣播或文字廣播。語(yǔ)音喊話為，工作人員直接通過(guò)麥克風(fēng)向選定區(qū)域進(jìn)行語(yǔ)音廣播。正在播放的廣播狀態(tài)，由后臺(tái)使用websocket協(xié)議推送到前端，前端接收到狀態(tài)改變數(shù)據(jù)后，改變表格中對(duì)應(yīng)的廣播數(shù)據(jù)。

（2）廣播庫(kù)，通過(guò)表格形式顯示已經(jīng)創(chuàng)建的廣播記錄，顯示的內(nèi)容有創(chuàng)建日期，播放內(nèi)容（語(yǔ)音文件名或文字），類型。可以直接播放或刪除對(duì)應(yīng)的廣播，也可以創(chuàng)建廣播記錄。通過(guò)輸入關(guān)鍵字可以查詢廣播記錄。需要上傳語(yǔ)音廣播文件時(shí)，使用了el-upload組件，上傳成功后需要把返回的文件地址存入上傳組件配置的數(shù)組中。

（3）播放歷史，通過(guò)表格形式顯示播放過(guò)的廣播，顯示的內(nèi)容與創(chuàng)建日期，標(biāo)題，位置，播放次數(shù)，開(kāi)始和結(jié)束時(shí)間，廣播類型，還可以通過(guò)詳情按鈕查看廣播內(nèi)容。通過(guò)選擇播放時(shí)間段和類型，可以查詢相應(yīng)的廣播記錄。其中查詢類型菜單中的數(shù)據(jù)需要從后臺(tái)接口讀取，然后存入el-select組件配置的數(shù)組中。

（4）固定語(yǔ)音通信，通過(guò)列表的形式顯示當(dāng)前存在的工業(yè)電話，可以直接撥打或掛斷選中的電話。通過(guò)關(guān)鍵字和區(qū)域，可以查詢相應(yīng)的電話。電話響鈴或掛斷狀態(tài)的轉(zhuǎn)變，需要后臺(tái)使用websocket推送。用戶主動(dòng)撥打電話或掛斷電話，需要調(diào)用相應(yīng)后臺(tái)接口。

通過(guò)本模塊的固定語(yǔ)音通信子模塊，工作人員可以與管廊中的工業(yè)電話機(jī)進(jìn)行通話。

2.3.5? 運(yùn)維管理

管廊維護(hù)包括巡更任務(wù)管理，巡更執(zhí)行管理和處理設(shè)備故障：

（1）巡更任務(wù)管理，在模塊載入時(shí)從后臺(tái)接口讀取數(shù)據(jù)，通過(guò)表格的形式顯示已創(chuàng)建的巡更任務(wù)，顯示內(nèi)容有序號(hào)，任務(wù)名稱，任務(wù)描述?？梢詫?duì)選擇的任務(wù)進(jìn)行修改、任務(wù)下發(fā)和刪除操作。通過(guò)輸入關(guān)鍵字，可以查詢?nèi)蝿?wù)。點(diǎn)擊新建巡更任務(wù)按鈕可以調(diào)用對(duì)應(yīng)后臺(tái)接口新建任務(wù)。

（2）巡更執(zhí)行管理，在模塊載入時(shí)從后臺(tái)接口讀取數(shù)據(jù)，通過(guò)表格的形式顯示已下發(fā)的巡更任務(wù)，顯示內(nèi)容有序號(hào)，任務(wù)名稱，任務(wù)描述，是否過(guò)期，過(guò)期時(shí)間，任務(wù)開(kāi)始時(shí)間，任務(wù)完成時(shí)間，巡更人員，執(zhí)行狀態(tài)。可以點(diǎn)擊開(kāi)始任務(wù)按鈕開(kāi)始任務(wù)，也可以查看相應(yīng)任務(wù)詳情。通過(guò)輸入關(guān)鍵字和選擇任務(wù)狀態(tài)，可以查詢?nèi)蝿?wù)。

（3）設(shè)備故障管理，在模塊載入時(shí)從后臺(tái)接口讀取數(shù)據(jù)，通過(guò)表格形式顯示設(shè)備故障記錄，顯示內(nèi)容有序號(hào)，設(shè)備名稱，報(bào)修時(shí)間，報(bào)修人，維修時(shí)間，維修人，完成時(shí)間，故障處理人，狀態(tài)?？梢渣c(diǎn)擊分配維修，彈出對(duì)話框，把維修任務(wù)分配給指定維修人員，點(diǎn)擊維修完成，關(guān)閉維修任務(wù)。通過(guò)輸入任務(wù)名稱或編號(hào)，選擇任務(wù)區(qū)域，維修狀態(tài)和類型查詢維修任務(wù)。其中對(duì)話框使用el-dialog組件。

通過(guò)本模塊，可以方便地對(duì)這兩部分進(jìn)行管理。

2.3.6? 資產(chǎn)管理

管廊及其附屬設(shè)施中有很多設(shè)備，通過(guò)本模塊，可以方便地對(duì)這些設(shè)備進(jìn)行管理：

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

（2）設(shè)備檔案，如圖6所示。在模塊載入時(shí)從后臺(tái)接口讀取數(shù)據(jù)，使用表格的方式顯示各個(gè)設(shè)備的檔案信息，包括：序號(hào)，設(shè)備名稱，設(shè)備編號(hào)，位置，質(zhì)保到期時(shí)間，上次保養(yǎng)時(shí)間，下次保養(yǎng)時(shí)間，累計(jì)運(yùn)行天數(shù)。在頁(yè)面中可以編輯檔案信息，也可查看檔案詳情。通過(guò)關(guān)鍵字和位置信息，可以查詢相關(guān)檔案。也可以把檔案數(shù)據(jù)作為Excel文件導(dǎo)出。其中區(qū)域選擇使用el-cascader級(jí)聯(lián)選擇器組件，區(qū)域數(shù)據(jù)需要在模塊載入時(shí)從后臺(tái)接口讀取。

2.3.7? 應(yīng)急管理

在現(xiàn)代工業(yè)管理中為了應(yīng)對(duì)突發(fā)事件都會(huì)預(yù)先設(shè)定應(yīng)急預(yù)案，本模塊的功能就是管理管廊的應(yīng)急預(yù)案：

（1）預(yù)案執(zhí)行-當(dāng)前執(zhí)行，在模塊載入時(shí)從后臺(tái)接口讀取數(shù)據(jù)，以表格方式顯示現(xiàn)在正在執(zhí)行的預(yù)案信息，包括：序號(hào)，所屬類別，所屬單位，名稱，危險(xiǎn)目標(biāo)，負(fù)責(zé)人，聯(lián)系人電話，啟用時(shí)間，地點(diǎn)，應(yīng)急等級(jí)，當(dāng)前進(jìn)度。點(diǎn)擊當(dāng)前進(jìn)度可以查看預(yù)案執(zhí)行詳情，如圖7所示。其中執(zhí)行進(jìn)度條使用el-progress組件。

預(yù)案詳情中除了有預(yù)案的基本信息外，還可以對(duì)預(yù)案的執(zhí)行進(jìn)行控制，在右下部列出了預(yù)案的所有執(zhí)行步驟和實(shí)時(shí)視頻畫面，點(diǎn)擊確認(rèn)完成當(dāng)前步驟。左下部顯示當(dāng)前步驟的記錄，可以點(diǎn)擊添加記錄按鈕，添加文字和圖片記錄。顯示步驟使用了el-timeline時(shí)間線組件。

（2）預(yù)案執(zhí)行-歷史執(zhí)行，在模塊載入時(shí)從后臺(tái)接口讀取數(shù)據(jù)，顯示預(yù)案的執(zhí)行統(tǒng)計(jì)數(shù)據(jù)，主頁(yè)面分為上下兩部分，如圖8所示。上部顯示執(zhí)行總次數(shù)，用Echarts生成的環(huán)狀圖表示歷史執(zhí)行次數(shù)中各個(gè)應(yīng)急等級(jí)比例，用柱狀圖表示在執(zhí)行次數(shù)與時(shí)間的關(guān)系。下部用表格的形式顯示歷史上執(zhí)行過(guò)預(yù)案信息，包括序號(hào)，所屬類別，所屬單位，名稱，危險(xiǎn)目標(biāo)，負(fù)責(zé)人，聯(lián)系人電話，啟用時(shí)間，解除時(shí)間，地點(diǎn)，應(yīng)急等級(jí)，可以點(diǎn)擊查看顯示預(yù)案執(zhí)行報(bào)告。使用Echarts圖表，需要先引入myChart類，生成實(shí)例對(duì)象后，調(diào)用initChart函數(shù)初始化圖表。

（3）預(yù)警預(yù)案，在此模塊設(shè)置預(yù)案，在模塊載入時(shí)從后臺(tái)接口讀取數(shù)據(jù)，用表格方式顯示已經(jīng)設(shè)置好但還沒(méi)執(zhí)行的預(yù)案信息，包括序號(hào)，所屬類別，所屬單位，名稱，危險(xiǎn)目標(biāo)，點(diǎn)擊編輯可以再次編輯所選預(yù)案。選中某項(xiàng)預(yù)案后可以執(zhí)行或?qū)С鰹槲募?，也可以刪除。點(diǎn)擊應(yīng)急演練按鈕，可以讓選中的預(yù)案進(jìn)入應(yīng)急演練模式。在沒(méi)有選中任何預(yù)案時(shí)，應(yīng)急演練按鈕，執(zhí)行按鈕和導(dǎo)出按鈕都會(huì)被設(shè)置為不可用狀態(tài)。

（4）應(yīng)急演練，模擬預(yù)案的步驟，給工作人員進(jìn)行日常演練。頁(yè)面顯示預(yù)案的基本信息和預(yù)案執(zhí)行步驟，可以修改執(zhí)行步驟的內(nèi)容。

2.3.8? 策略節(jié)能

管廊建設(shè)中會(huì)集成很多子系統(tǒng)，而這些子系統(tǒng)基本上也是智慧系統(tǒng)，通過(guò)接口集成，管廊管理系統(tǒng)可以直接“命令”這些子系統(tǒng)執(zhí)行預(yù)定任務(wù)：

（1）策略應(yīng)用，在模塊載入時(shí)從后臺(tái)接口讀取數(shù)據(jù)，以表格形式顯示出各區(qū)域?qū)?yīng)的策略名稱如高能模式和節(jié)能模式，可以切換對(duì)應(yīng)區(qū)域的策略。

（2）策略管理，在模塊載入時(shí)從后臺(tái)接口讀取數(shù)據(jù)，以表格形式顯示出現(xiàn)有策略模式，如高能模式、節(jié)能模式等，在頁(yè)面中可以編輯選中的策略模式，也可以新建或刪除策略模式。

本模塊針對(duì)節(jié)能制定策略，協(xié)調(diào)相關(guān)子系統(tǒng)的控制。

2.3.9? 告警

管廊中的傳感器在監(jiān)測(cè)到某些危險(xiǎn)情況時(shí)會(huì)產(chǎn)生告警數(shù)據(jù)，本模塊對(duì)這些告警數(shù)據(jù)進(jìn)行管理。告警的標(biāo)題后會(huì)動(dòng)態(tài)顯示當(dāng)前存在的告警數(shù)目，此數(shù)據(jù)需要后臺(tái)通過(guò)websocket推送。

（1）當(dāng)前告警，在模塊載入時(shí)從后臺(tái)接口讀取數(shù)據(jù)，以表格形式顯示出當(dāng)前的告警數(shù)據(jù)，包括詳情，等級(jí)，告警類型，設(shè)備名稱，位置，告警時(shí)間，是否確認(rèn)，其中詳情指告警的詳細(xì)信息，不同等級(jí)的文字顏色不同。點(diǎn)擊處理可以標(biāo)識(shí)對(duì)應(yīng)告警記錄為已處理，從當(dāng)前告警中移除。通過(guò)告警等級(jí)，區(qū)域，確認(rèn)狀態(tài)和關(guān)鍵字，可以查詢告警記錄，點(diǎn)擊刷新按鈕可以刷新當(dāng)前告警記錄。

（2）告警日志，在模塊載入時(shí)從后臺(tái)接口讀取數(shù)據(jù)，以表格形式顯示出曾經(jīng)發(fā)生過(guò)的告警數(shù)據(jù)，表格中的字段和當(dāng)前告警模塊中的表格一致。可以通過(guò)時(shí)間段，區(qū)域和關(guān)鍵字查詢?nèi)罩緮?shù)據(jù)，也可以將數(shù)據(jù)作為Excel文件導(dǎo)出。

（3）區(qū)域報(bào)警統(tǒng)計(jì)，在模塊載入時(shí)從后臺(tái)接口讀取數(shù)據(jù)，用Echarts生成的環(huán)形圖按比例顯示出某個(gè)時(shí)間段的告警數(shù)量，如圖9所示。可以指定區(qū)域和時(shí)間段。

3? 結(jié)? 論

本文基于Vue框架，綜合運(yùn)用Webpack、Vuex、VueRouter、 ElementUI、Axios、Echarts等技術(shù)，構(gòu)建了地下綜合管廊管理平臺(tái)的前端系統(tǒng)，實(shí)現(xiàn)了綜合管廊的視頻監(jiān)控管理、設(shè)備監(jiān)控管理、通信廣播管理、運(yùn)維管理、設(shè)備資產(chǎn)管理、應(yīng)急管理、策略節(jié)能管理和告警管理等綜合管控系統(tǒng)的前端部分。使用前后端分離的開(kāi)發(fā)方式，使前端系統(tǒng)的開(kāi)發(fā)不再依賴后端的開(kāi)發(fā)進(jìn)度，極大地提高了開(kāi)發(fā)效率。Vue的組件化開(kāi)發(fā)思想使代碼更容易復(fù)用，擴(kuò)展系統(tǒng)功能更方便。

參考文獻(xiàn)：

[1] 梁薦，郝志成.淺議城市地下綜合管廊發(fā)展現(xiàn)狀及應(yīng)對(duì)措施 [J].城市建筑，2013（14）：286-287.

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

[3] 李嘉，趙凱強(qiáng)，李長(zhǎng)云.Web前端開(kāi)發(fā)技術(shù)的演化與MVVM設(shè)計(jì)模式研究 [J].電腦知識(shí)與技術(shù)，2018，14（2）：221-222+251.

[4] 嚴(yán)偉，郭丹.基于MVC設(shè)計(jì)模式的前端設(shè)計(jì) [J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2016（9）：46+48.

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

[6] 張耀春.Vue.js權(quán)威指南 [M].電子工業(yè)出版社，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中文網(wǎng).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.

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