廣西廣播電視臺播出供電系統(tǒng)三維可視化管理平臺的設(shè)計與實現(xiàn)

楊 勇, 盧 標(biāo), 易兆祥, 黃榮考, 黃 飛, 孔祥翔, 劉 峰

(廣西廣播電視臺, 廣西 南寧 530022)

0 引 言

隨著廣播電視行業(yè)的快速發(fā)展及科學(xué)技術(shù)的不斷進(jìn)步,信息的爆炸式增長與更新推動著傳統(tǒng)廣播電視行業(yè)的轉(zhuǎn)型升級,對廣播電視節(jié)目的制作、播出和傳輸方式都有了更高的技術(shù)要求,從而對播出供電系統(tǒng)的穩(wěn)定性和可靠性的維護(hù)保障水平也提出了更高的要求。傳統(tǒng)的2D監(jiān)控管理平臺監(jiān)控界面簡單、不夠直觀,無法實現(xiàn)360°畫面旋轉(zhuǎn),監(jiān)控設(shè)備出現(xiàn)故障時無法及時準(zhǔn)確地提示故障精準(zhǔn)位置,導(dǎo)致運行值班人員無法第一時間確定故障設(shè)備,存在一定的安全播出供電隱患[1]。

因此,通過虛擬化建立一個“可視化、智能化、遠(yuǎn)程化”的播出供電系統(tǒng)三維可視化管理平臺變得非常迫切。實現(xiàn)遠(yuǎn)程集中監(jiān)控管理,實時動態(tài)呈現(xiàn)設(shè)備告警信息及設(shè)備參數(shù),快速定位出故障設(shè)備,使維護(hù)和管理從人工被動看守的方式向計算機集中控制和管理的模式轉(zhuǎn)變[2]。

1 項目概述

播出供電系統(tǒng)的穩(wěn)定性和可靠性是廣播電視安全播出的基本保障,傳統(tǒng)的播出供電系統(tǒng)管理平臺存在以下不足。

(1) 涉及到播出供電系統(tǒng)的各子系統(tǒng)分散孤立,操作不方便,無法提供統(tǒng)一的管理界面。

(2) 只能簡單地監(jiān)控供電設(shè)備的運行參數(shù),無法對配電設(shè)施的空間布局和電纜敷設(shè)路由直觀地展示出來。

(3) 只能通過人工巡檢機房,巡檢工作量大,人力成本高,無法實現(xiàn)三維自動巡檢功能。

(4) 數(shù)據(jù)分析統(tǒng)計主要通過表格形式,不夠直觀生動,缺乏有效的可視化分析功能。

(5) 沒有統(tǒng)一的預(yù)警機制,系統(tǒng)出現(xiàn)故障時,無法快速定位故障設(shè)備、明確故障影響范圍和故障根源。

2 主要關(guān)鍵技術(shù)

本平臺系統(tǒng)采用Ajax引擎的B/S架構(gòu)、瀏覽器界面端采用HTML5技術(shù),頁面之間的交互通過Ajax技術(shù)來實現(xiàn),三維可視化則采用WebGL技術(shù),數(shù)據(jù)庫采用的是開源對象關(guān)系型數(shù)據(jù)庫PostgreSql。數(shù)據(jù)庫中主要存儲了各機房設(shè)備的各種信息,其中包括機房及設(shè)備的3D模型、配電設(shè)備的運行數(shù)據(jù)、供電線路的運行參數(shù)、機房溫濕度、資產(chǎn)配置及設(shè)備告警信息等,采用JSON格式來存儲相關(guān)信息。服務(wù)器利用免費開發(fā)源代碼的Tomcat小型輕量級應(yīng)用服務(wù)器提供Web服務(wù),服務(wù)器啟動以后,系統(tǒng)將自動加載應(yīng)用程序。瀏覽器端利用JavaScript 和WebGL技術(shù)實現(xiàn)三維可視化的展示[3]。

2.1 WebGL

WebGL是一種把JavaScript和OpenGL ES 3.0結(jié)合在一起的3D繪圖標(biāo)準(zhǔn),這種繪圖技術(shù)標(biāo)準(zhǔn)基于OpenGL的JavaScript API,它通過HTML腳本本身實現(xiàn)Web交互式三維動畫的制作,無須安裝額外的任何瀏覽器插件或瀏覽器擴(kuò)展,并且通過利用底層的圖形硬件加速功能進(jìn)行3D圖形渲染,因而可以在瀏覽器中更流暢地展現(xiàn)三維模型,大大提高了場景對象的交互性[4]。目前最新主流的電腦桌面瀏覽器和移動手機瀏覽器(Safari、Chrome和Mozilla Firefox)基本都支持WebGL,其相關(guān)引擎都是開源免費使用的。WebGL繪制三維圖形的流程圖如圖1所示。

圖1 WebGL繪制三維圖形的流程圖

2.2 HTML5

HTML5是HTML規(guī)范的最新版本,是一個開放性、跨平臺、網(wǎng)絡(luò)功能豐富的內(nèi)容發(fā)布工具,其中3項最重要的技術(shù)分別是HTML5核心規(guī)范、層疊樣式表(CSS)和JavaScript。HTML5核心規(guī)范定義用于標(biāo)記內(nèi)容的元素,并明確其含義。層疊樣式表可控制標(biāo)記過的內(nèi)容呈現(xiàn)在用戶前面的外貌。JavaScript則可以用來操作HTML文檔的內(nèi)容以及響應(yīng)用戶的操作,此外如果要想使用HTML5中一些為編程目的設(shè)計的新增元素,那么也需要用到JavaScript[5]。

2.3 Ajax

Ajax是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的Web開發(fā)技術(shù),其核心是Java Script 可以通過對象XMLHttpRequest在瀏覽器和Web服務(wù)器之間建立異步數(shù)據(jù)傳輸請求,不需要重新加載頁面完成一個數(shù)據(jù)請求到服務(wù)器并且接收返回信息,不會阻塞前端Web頁面的用戶響應(yīng),增強用戶體驗感。

2.4 PostgreSql

PostgreSql是一個免費的開源關(guān)系數(shù)據(jù)庫管理系統(tǒng)(RDBMS),是目前功能最強大的開源數(shù)據(jù)庫之一,支持多種豐富的數(shù)據(jù)類型(如JSON、JSONB、數(shù)組類型及二進(jìn)制格式)和用戶自定義的類型?？商峁┴S富的數(shù)據(jù)接口,具有高擴(kuò)展性的功能,如可以在GIST框架下實現(xiàn)自己的索引類型等。同時PostgreSQL是完全的事務(wù)安全性數(shù)據(jù)庫,完整地支持外鍵、視圖、觸發(fā)器和存儲過程(函數(shù)),不但支持使用C語言編譯自定義函數(shù)及觸發(fā)器,還支持多種流行語言開發(fā)存儲過程,如PL/PGSQL、Perl、Python等。

3 可視化平臺軟件架構(gòu)

平臺軟件架構(gòu)主要由底層數(shù)據(jù)采集層、網(wǎng)絡(luò)通信層、三維服務(wù)器層和可視化展示層組成[6]。軟件架構(gòu)圖如圖2所示。

圖2 軟件架構(gòu)圖

(1) 數(shù)據(jù)采集層:由電力監(jiān)控系統(tǒng)、安防監(jiān)控系統(tǒng)、環(huán)境監(jiān)控系統(tǒng)、資產(chǎn)管理系統(tǒng)和其他第三方監(jiān)控系統(tǒng)提供實時數(shù)據(jù)。

(2) 網(wǎng)絡(luò)通信層:按照國家廣電總局第62令的要求,播出配電監(jiān)控系統(tǒng)需要獨立組網(wǎng),由獨立局域網(wǎng)組成,將數(shù)據(jù)采集層實時采集到的異構(gòu)數(shù)據(jù)推送到三維服務(wù)器層。

(3) 三維服務(wù)層:主要是對采集的異構(gòu)數(shù)據(jù)進(jìn)行處理并存儲在數(shù)據(jù)庫中,接收客戶端的Ajax請求,并將相應(yīng)的請求數(shù)據(jù)發(fā)送給客戶端。

(4) 可視化展示層:主要是數(shù)據(jù)的處理轉(zhuǎn)換、可視化映射、三維視圖變換等過程。將底層采集的原始數(shù)據(jù)轉(zhuǎn)換為三維可視化的圖像和圖形進(jìn)行直觀明了的展示,可通過自行安裝瀏覽器(如Firefox、Chrome)訪問平臺的用戶界面,客戶端發(fā)送Ajax需求從服務(wù)器端獲取數(shù)據(jù),利用WebGL對數(shù)據(jù)進(jìn)行解析重構(gòu)實現(xiàn)三維圖形的展示。

4 總體設(shè)計思路

在做好播出供電系統(tǒng)三維可視化的功能需求分析和業(yè)務(wù)邏輯架構(gòu)設(shè)計工作的基礎(chǔ)上,對平臺的整個構(gòu)建流程進(jìn)行總體設(shè)計[7]。總體流程可以分為以下方面:3D可視化模型準(zhǔn)備、Web端頁面設(shè)計、Client端數(shù)據(jù)傳輸?？傮w流程示意圖如圖3所示。

圖3 總體流程示意圖

(1) 通過前期臺區(qū)的高清圖片影像、真實的地理影像數(shù)據(jù)以及技術(shù)業(yè)務(wù)綜合樓機房的相對坐標(biāo)系信息,利用專業(yè)軟件進(jìn)行三維建模,并在建模工作完成后進(jìn)行格式轉(zhuǎn)換,最終得到 GLTF 模型文件。

(2) 通過 Three.js引擎執(zhí)行渲染創(chuàng)建一個WebGL三維場景,構(gòu)建前端Web顯示頁面,登錄系統(tǒng)后,顯示整個臺區(qū)的三維瀏覽場景。

(3) 服務(wù)器后臺管理平臺根據(jù)底層設(shè)備的通信協(xié)議,采集終端設(shè)備的實時運行信息數(shù)據(jù)返回至服務(wù)器時,將這些數(shù)據(jù)根據(jù)傳輸協(xié)議統(tǒng)一編譯成供前端調(diào)用的接口模式。

(4) 通過鼠標(biāo)點擊任一樓層機房可以進(jìn)入內(nèi)部查看該機房的供配電設(shè)備實時運行參數(shù)、機房溫濕度、現(xiàn)場視頻及消防設(shè)施等,此時根據(jù)后臺數(shù)據(jù)庫唯一的ID在后臺服務(wù)器調(diào)取相應(yīng)的數(shù)據(jù),并將該ID返回至前臺。

(5) 前端頁面根據(jù)用戶的操作向后端服務(wù)器發(fā)送請求指令,并且以唯一的ID作為信息數(shù)據(jù)的指令識別碼,信息數(shù)據(jù)在前后端通過JSON形式進(jìn)行傳輸。

(6) 根據(jù)用戶鼠標(biāo)點擊功能的不同,由前端Wed頁面決定是采用Three.js三維引擎執(zhí)行3D可視化渲染加載,還是采用JavaScript進(jìn)行相關(guān)設(shè)備運行參數(shù)的顯示。

(7) 用戶所有的操作完成以后,通過鼠標(biāo)點擊關(guān)閉頁面系統(tǒng),此時系統(tǒng)流程結(jié)束。

5 功能介紹

本平臺實現(xiàn)了播出供電系統(tǒng)的三維可視化和浸入式的感官體驗,可對涉及安全播出供電系統(tǒng)的所有配電設(shè)施進(jìn)行可視化管理,所有監(jiān)控子系統(tǒng)和告警信息均統(tǒng)一在一個平臺上展示,從頂層視角掌握播出供電系統(tǒng)的實時運行狀況,提高管理效率和保障播出供電系統(tǒng)的穩(wěn)定運行,主要功能有以下5個方面。

(1) 三維實景仿真。用3D虛擬仿真的模式完整展示我臺技術(shù)業(yè)務(wù)綜合樓建筑的整體狀況、重點實現(xiàn)建筑外觀、樓層及各配電機房內(nèi)部實際情況的虛擬仿真,為用戶帶來沉浸式的 3D 場景漫游體驗,可以詳細(xì)直觀地了解涉及安全播出供電的所有機房的分布規(guī)劃情況,同時為整個播出供電系統(tǒng)對外展示搭建了一個基礎(chǔ)平臺。三維實景仿真界面如圖4所示。

圖4 三維實景仿真界面

(2) 統(tǒng)一監(jiān)控。不但實現(xiàn)了傳統(tǒng)電力監(jiān)控系統(tǒng)的采集和展示,而且實現(xiàn)了安防監(jiān)控系統(tǒng)、環(huán)境監(jiān)控系統(tǒng)、資產(chǎn)管理系統(tǒng)和其他第三方監(jiān)控系統(tǒng)等的統(tǒng)一可視化展示。點擊相應(yīng)的設(shè)備,就可以方便地查看設(shè)備的實際運行參數(shù),可通過資產(chǎn)搜索或者三維場景找到需要查看的固定資產(chǎn)的品牌、型號、位置等信息,方便對資產(chǎn)的統(tǒng)計管理,運行維護(hù)人員不需要熟悉掌握多套監(jiān)控系統(tǒng),可大大減輕了值班工作強度。統(tǒng)一監(jiān)控界面如圖5所示。

圖5 統(tǒng)一監(jiān)控界面

(3) 巡檢演示功能?？梢酝ㄟ^第一人稱或者第三人稱巡檢模式對整個播出供電系統(tǒng)的機房設(shè)施和設(shè)備的運行狀況進(jìn)行自動定時循環(huán)巡檢演示。同時根據(jù)日常巡檢的需求規(guī)劃設(shè)置自動巡檢路徑,并自定義設(shè)置定時巡檢時間間隔,自動巡檢過程中可實時判斷巡檢路徑點關(guān)聯(lián)的所有供配電設(shè)備和機房攝像頭實時畫面,巡檢完成以后可自動形成巡檢日志報表并保存入庫,方便后期查詢。智能巡檢界面如圖6所示。

(4) 聯(lián)動告警功能。有設(shè)備出現(xiàn)故障告警時,平臺能自動快速識別具體告警設(shè)備,并能自動播放語音提醒具體告警信息,同時通過短信第一時間通知運行值班人員故障設(shè)備的位置和具體故障情況,用鼠標(biāo)點擊故障設(shè)備的報警標(biāo)識可以展示詳細(xì)的告警信息情況,具有歷史報警查詢功能,可設(shè)置告警類型、級別和閾值等參數(shù)。智能聯(lián)動告警界面如圖7所示。

(5) 供電線路可視化。根據(jù)播出供電線路的CAD實際布線圖,以三維可視化的形式展示出播出供電系統(tǒng)的具體敷設(shè)路由,可實現(xiàn)對配電設(shè)備及電纜等固定資產(chǎn)信息的鏈路查看,線路出現(xiàn)故障會通過警示顏色進(jìn)行提醒具體故障線路的位置,對整條播出供電鏈路實現(xiàn)可視化智能管理,有效提高了播出供電線路的管理維護(hù)水平。供電線路可視化界面如圖8所示。

圖8 供電線路可視化界面

6 后臺框架的設(shè)計

為了適應(yīng)平臺功能模塊的多樣化,更好地實現(xiàn)前后端數(shù)據(jù)的分離,使平臺具有高可用性、易于維護(hù)性和良好的擴(kuò)展性,采用經(jīng)典的Spring+Spring MVC+Mybatis后臺開發(fā)框架,使用SpringMVC作用于Web層,分離了控制器、模型對象、分配器和處理程序?qū)ο蟮慕巧?負(fù)責(zé)用戶請求的轉(zhuǎn)發(fā)及視圖管理[8]。Spring就像是項目中裝配bean的大工廠,實現(xiàn)業(yè)務(wù)對象管理,可以簡稱為項目的黏合劑。Mybatis作為數(shù)據(jù)對象的持久化引擎,支持定制化SQL、存儲過程和高級映射,使用簡單的XML或注釋來配置和映射原始信息。該平臺的后臺管理模塊具有首頁管理、動環(huán)管理、溫度云圖、監(jiān)控管理、資產(chǎn)管理、基礎(chǔ)數(shù)據(jù)、用戶管理、工具管理、系統(tǒng)配置等功能。后臺管理界面如圖9所示。

圖9 后臺管理界面

7 結(jié) 語

廣西廣播電視臺播出供電系統(tǒng)三維可視化管理平臺,不需要安裝客戶端及相關(guān)插件,通過瀏覽器登錄平臺即可進(jìn)行操作查看。實現(xiàn)了配電機房設(shè)施可視化、供電線路可視化、固定資產(chǎn)可視化、自動巡檢可視化、動環(huán)可視化、報警可視化等功能。該平臺有效地提升了廣西廣播電視臺播出供電系統(tǒng)的運行維護(hù)保障水平,同時降低了風(fēng)險和運行成本,減輕了運行值班人員的工作強度,更好地保障播出供電系統(tǒng)的安全穩(wěn)定運行。