楊 勇, 盧 標(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)控界面簡單、不夠直觀,無法實(shí)現(xiàn)360°畫面旋轉(zhuǎn),監(jiān)控設(shè)備出現(xiàn)故障時(shí)無法及時(shí)準(zhǔn)確地提示故障精準(zhǔn)位置,導(dǎo)致運(yùn)行值班人員無法第一時(shí)間確定故障設(shè)備,存在一定的安全播出供電隱患[1]。

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

1 項(xiàng)目概述

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

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

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

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

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

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

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

本平臺系統(tǒng)采用Ajax引擎的B/S架構(gòu)、瀏覽器界面端采用HTML5技術(shù),頁面之間的交互通過Ajax技術(shù)來實(shí)現(xiàn),三維可視化則采用WebGL技術(shù),數(shù)據(jù)庫采用的是開源對象關(guān)系型數(shù)據(jù)庫PostgreSql。數(shù)據(jù)庫中主要存儲了各機(jī)房設(shè)備的各種信息,其中包括機(jī)房及設(shè)備的3D模型、配電設(shè)備的運(yùn)行數(shù)據(jù)、供電線路的運(yùn)行參數(shù)、機(jī)房溫濕度、資產(chǎn)配置及設(shè)備告警信息等,采用JSON格式來存儲相關(guān)信息。服務(wù)器利用免費(fèi)開發(fā)源代碼的Tomcat小型輕量級應(yīng)用服務(wù)器提供Web服務(wù),服務(wù)器啟動以后,系統(tǒng)將自動加載應(yīng)用程序。瀏覽器端利用JavaScript 和WebGL技術(shù)實(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腳本本身實(shí)現(xiàn)Web交互式三維動畫的制作,無須安裝額外的任何瀏覽器插件或?yàn)g覽器擴(kuò)展,并且通過利用底層的圖形硬件加速功能進(jìn)行3D圖形渲染,因而可以在瀏覽器中更流暢地展現(xiàn)三維模型,大大提高了場景對象的交互性[4]。目前最新主流的電腦桌面瀏覽器和移動手機(jī)瀏覽器(Safari、Chrome和Mozilla Firefox)基本都支持WebGL,其相關(guān)引擎都是開源免費(fèi)使用的。WebGL繪制三維圖形的流程圖如圖1所示。

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

2.2 HTML5

HTML5是HTML規(guī)范的最新版本,是一個(gè)開放性、跨平臺、網(wǎng)絡(luò)功能豐富的內(nèi)容發(fā)布工具,其中3項(xiàng)最重要的技術(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è)計(jì)的新增元素,那么也需要用到JavaScript[5]。

2.3 Ajax

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

2.4 PostgreSql

PostgreSql是一個(gè)免費(fèi)的開源關(guān)系數(shù)據(jù)庫管理系統(tǒng)(RDBMS),是目前功能最強(qiáng)大的開源數(shù)據(jù)庫之一,支持多種豐富的數(shù)據(jù)類型(如JSON、JSONB、數(shù)組類型及二進(jìn)制格式)和用戶自定義的類型?？商峁┴S富的數(shù)據(jù)接口,具有高擴(kuò)展性的功能,如可以在GIST框架下實(shí)現(xiàn)自己的索引類型等。同時(shí)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í)時(shí)數(shù)據(jù)。

(2) 網(wǎng)絡(luò)通信層:按照國家廣電總局第62令的要求,播出配電監(jiān)控系統(tǒng)需要獨(dú)立組網(wǎng),由獨(dú)立局域網(wǎng)組成,將數(shù)據(jù)采集層實(shí)時(shí)采集到的異構(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)實(shí)現(xiàn)三維圖形的展示。

4 總體設(shè)計(jì)思路

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

圖3 總體流程示意圖

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

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

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

(4) 通過鼠標(biāo)點(diǎn)擊任一樓層機(jī)房可以進(jìn)入內(nèi)部查看該機(jī)房的供配電設(shè)備實(shí)時(shí)運(yùn)行參數(shù)、機(jī)房溫濕度、現(xiàn)場視頻及消防設(shè)施等,此時(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)點(diǎn)擊功能的不同,由前端Wed頁面決定是采用Three.js三維引擎執(zhí)行3D可視化渲染加載,還是采用JavaScript進(jìn)行相關(guān)設(shè)備運(yùn)行參數(shù)的顯示。

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

5 功能介紹

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

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

圖4 三維實(shí)景仿真界面

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

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

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

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

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

圖8 供電線路可視化界面

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

為了適應(yīng)平臺功能模塊的多樣化,更好地實(shí)現(xiàn)前后端數(shù)據(jù)的分離,使平臺具有高可用性、易于維護(hù)性和良好的擴(kuò)展性,采用經(jīng)典的Spring+Spring MVC+Mybatis后臺開發(fā)框架,使用SpringMVC作用于Web層,分離了控制器、模型對象、分配器和處理程序?qū)ο蟮慕巧?負(fù)責(zé)用戶請求的轉(zhuǎn)發(fā)及視圖管理[8]。Spring就像是項(xiàng)目中裝配bean的大工廠,實(shí)現(xiàn)業(yè)務(wù)對象管理,可以簡稱為項(xiàng)目的黏合劑。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)行操作查看。實(shí)現(xiàn)了配電機(jī)房設(shè)施可視化、供電線路可視化、固定資產(chǎn)可視化、自動巡檢可視化、動環(huán)可視化、報(bào)警可視化等功能。該平臺有效地提升了廣西廣播電視臺播出供電系統(tǒng)的運(yùn)行維護(hù)保障水平,同時(shí)降低了風(fēng)險(xiǎn)和運(yùn)行成本,減輕了運(yùn)行值班人員的工作強(qiáng)度,更好地保障播出供電系統(tǒng)的安全穩(wěn)定運(yùn)行。