新基建背景下，催生智慧園區三維管控系統解決方案

前言

系統概述

　　「智慧園區管控系統」基於物聯網生態體系操控平臺架構，利用新一代信息與通訊技術來感知、監測、分析、控制、整合園區各個關鍵環節的資源，集成了光伏、變電站、停車場等管控場景界面，使各系統之間互聯、共享、智慧，實現了多信息協同聯動，爲園區安全管理、業主便捷生活、物業信息化管理提供了有力保障。有效的下降了企業運營成本，提升工做效率，增強各種園區創新、服務和管理能力。根據此種狀況，咱們經過 HT for Web 打造了一款圖撲園區智慧管控系統。

應用場合及優點

　　適用於工業園區、產業園區、智慧社區、物業等場景的綜合管理，應用於多個領域。

1.數據可視化：

　　集企業數據可視化、能耗數據可視化、告警設備可視化、設備數據可視化等多維立體展示。

2.設施管理檢測自動化：

　　經過自動化技術、物聯網技術的應用，將園區基礎設施逐漸升級爲智能設備，能夠遠程監控和控制實現智能化。

3.各部門協調管理一體化：

　　智慧化管理實現後，可以輕鬆掌握園區運行狀況和園區設備控制及各種服務。

4.各環節溝通訊息化：

　　園區內信息將經過平臺建設走向集成，大大提升園區系統的集成程度，信息和資源獲得更充分的共享，提升了各管理環節的效率。

5.安全管理：

　　安全管理將監控系統、告警系統、管理系統、巡更系統、停車系統等有機結合起來，實現一體化集成管理和系統聯動。

6.能耗管理：

　　能耗管理是園區內重要的一項管理應用，能對園區能耗狀態進行在線監測，進行趨勢分析管理和能源成本數據統計。在確保園區內供電設備安全運行的同時，還能對設施的總體能耗進行自動管理，爲設施節能管理和改造提供依據。

7.環保管理：

　　環保管理經過園區綜合生態監控系統，監測園區中的溫度、有害氣體、火情、風雨等天然狀況，同時也能夠監控園區中的環境質量如廢棄物、水質、空氣、噪聲、排污等並進行及時的數據彙總和報警。對園區內的各種突發事件進行全方位的監測、預警、判斷、決策、調度和處置，造成統一的協調指揮體系的感知園區。

8.服務管理：

　　服務管理包括數據中心、信息發佈等服務子系統。經過物聯網等先進信息技術，將園區內的通信網絡等都集合到一個統一的平臺，實現一個交互和共享的生態圈。強化個性化、多樣化的服務能力，爲園區企業提供更便利化的服務。針對園區信息發佈的需求，之前瞻性、拓展性、實用性爲設計思路，採起集中控制、統一管理的方式輸出，爲園區企業提供智能化展現和分析報表。

具體應用例舉

1.能源：

　　對於能耗數據進行動態監控、統計和報表分析，爲後臺決策提供依據，據統計，每一年可爲園區節約 20%~30% 的電費支出。

2.安防：

　　經過監控區域的各種探測器爲感知層，利用通訊技術和網絡技術經過對多元信息的協同分析，實現對異常事件的智能判斷並執行預約義聯動響應，具備較大靈活性和良好的可拓展性，能有效的下降誤報率。

3.停車場：

　　利用傳感器節點的感知能力來監控和管理每一個停車位，提供特殊的引導服務，實現停車場的車位管理和車位發佈等功能，向園區人員提供車位引導，車輛查詢等功能服務，從而完成對停車資源的統一規劃和高效管理。據統計，園區平均車速提高 8.8%~14%。

4.智能消防：

　　採用現代計算機、通訊、控制與信息綜合決策等技術，對分佈各地的建築消防設施進行遠程監控，以實時掌握消防系統的運行狀態。一旦發生火災，系統就會將火災報警信息實時傳送至城市應急聯動中心，達到迅速發現、快速處理各種火災隱患的目的。

5.智能家居：

　　智能家居系統就是經過互聯網和物聯網使工做生活場所實現智能化、自動化，利用先進的互聯網絡、電氣自動化技術、RFID、ZIGBEE、無線電技術，將智能燈光、智能家電、智能監控、智能安全報警等系統有機的結合在一塊兒，經過網絡來管理相關設備和實時監控辦公場所的系統，依次來爲園區企業提供優質溫馨、高效節能、健康環保的工做及生活環境，給人才帶來輕鬆、愉悅、便捷的工做、生活環境。

6.智能應急指揮：

　　經過將防盜報警、視頻監控、門禁、消防等系統鏈接起來，提供數字化預案支持、多系統聯動、警情實施感知及主動通報、基於電子地圖的警情實時標繪與分析、智能應急輔助決策及遠程監控指揮等功能，提升園區應對各種突發事件的快速反應能力。

實現思路

 　　整個圖紙除了中部場景是 3D 外，其餘元素都是以 2D 爲主，首先咱們作一下基礎的設置和交互限制：

// 隱藏選中邊框
gv.getSelectWidth = () => { return 0 } 
// 禁止圖元移動
gv.setMovableFunc(() => { return false }) // 禁止縮放// 禁止移動
gv.setZoomable(false)// 禁止框選
gv.setRectSelectable(false) 
// 隱藏滾動條
gv.setScrollBarVisible(false) 
// 全局設置右鍵菜單禁用
window.document.oncontextmenu = () => { return false }

　　因爲結構是長屏，因此爲了讓使用普通屏幕的用戶更加溫馨，亦或是調試起來更方便，咱們要作一些特殊處理：

// 水平滾動
gv.adjustTranslateY = (ty) => 0
// 限制平移範圍
gv.adjustTranslateX = (tx) => { 
    let viewRect = gv.getViewRect(),
        scrollRect = gv.getScrollRect(),
        minX = (viewRect.width - scrollRect.width) * gv.getZoom()
    tx = Math.max(minX, tx)
    tx = Math.min(tx, 0)
    return tx
}
gv.getScrollRect = () => {
    // 根節點
    return gv.dm().getDataByTag('contentRectNode').getRect() 
}
this.fitContent()
// 窗口變化時調用
window.addEventListener('resize', () => { 
    this.fitContent()
})

// 界面展開
fitContent() {
    const winInfo = ht.Default.getWindowInfo(),
        contentRectNode = this.gv.dm().getDataByTag('contentRectNode'),
        height = contentRectNode.getHeight(),
        zoom = winInfo.height / height
    if (!height) {
        ht.Default.callLater(() => {
            this.fitContent()
        })
        return
    }
    this.gv.adjustZoom = () => zoom
    this.gv.setZoom(zoom)
}

　　中部場景是經過 renderHTML 將一張新的圖紙渲染到 2D 頁面上，HT 的圖紙又是 Canvas 實現，renderHTML 的 DOM 必定在 Canvas 之上，因此咱們將圖紙的中心掏一個洞出來，而後修改兩部分的層級位置來使得效果更佳：

// 對 2D 圖紙的層級設置
gv.getCanvas().style.zIndex = 300
// 對 3D 場景的層級設置
g3d.getView().style.zIndex = 200

　　首先來看一下半圓菜單欄部分，咱們先給圖標中元素綁定好屬性，明確要驅動的部分，即小扇形的橫縱縮放比、顏色透明度，提示框的裁切比等，而後經過改變狀態來區分不一樣的選項：

　　還有個面板中是扇形圖的輪播，也是經過提早綁定好屬性，而後起個定時器來切換它的狀態，風格一致，相同的動畫效果咱們一塊兒來看一下：

　　下面介紹一下表格的動畫效果實現：

　　表格控件基於 HT 矢量封裝，爲方便咱們後期開發，內部暴露了多種屬性能夠調配以達到想要的效果。如此好看的 UI 也是一大亮點，咱們能夠提早設計好圖標，而後配置列定義 columns 屬性將它繪製成表格的行，其中滾動部分經過表格的行高來計算。而後再按時增長它的變化係數 num 的值就能夠實現表格滾動的動畫了。關於動畫函數在我以前的文章中都有提到，這裏就再也不作過多贅述，有興趣的朋友能夠點查看進來學習。

　　得益於 HT 圖標庫的龐大和實用，多種類型的面板以及風格設計層出不窮：

　　這個輪播圖的動效製做方式與表格相仿，首先仍是傳入咱們繪製好的圖標，在 drawItem 函數中，接着咱們算好係數來寫個動畫作偏移。

　　關於這個萌萌的小機器人部分，我給你們拆分講解一下。第一部分是機器人的總體，它的表情是能夠切換的跟上述咱們提到的菜單切換差很少，都是切換狀態，咱們經過不一樣的狀態來切換不一樣的臉皮圖標。再者其後面的動畫也作得很細節，分別是一些光球的背景上升和自己的浮動以及底部光暈的縮放。將背景的光球抽離出來作成一個圖標放在後面作成背板，注意要比原來長一些，我是將內部元素複製成雙份，而後延長一倍尺寸。然後打開圖標的裁剪屬性使超出圖標部分隱藏起來，說到這裏你們可能已經想到了，而後再調整這個圖標的縱偏移就能夠了。

　　本體的浮動和波紋的縮放都是以一種呼吸的感受來改變相應的屬性完成，對調起點和終點的值來製做動畫效果。

　　停車場的建築羣明暗度變化也是經過此方式實現。流動線條是對每一個線條的裁切比例來操做，讓它按照某個方向生長出來：

　　車輛的變化是經過一種隨機的計算方式來修改它們的顯隱，位置都是提早擺放好的，這樣最便捷。

 　　其餘幾個場景都是 3D 場景，也須要對其作出基礎的設置：

// 禁止拖動
gv.setMovableFunc(() => { return false }) 
// 隱藏選中邊框
gv.getWireframe = (d) => { d.s('wf.visible', false) }  
// 設置眼睛
gv.setEye([-38, 729, 1109]) 
// 設置中心點
gv.setCenter([-35, -4, 218]) 
// 設置遠端位置
gv.setFar(500000) 
// 設置近端位置
gv.setNear(50) 
// 設置交互限制
gv.setInteractors([ new ht.graph3d.MapInteractor(gv)])
// 設置天空球
gv.setSkyBox(this.dm.getDataByTag('skyBox'))

　　另外鼠標懸浮高亮的效果用到的方法是：

gv.setHighlightMode('mouseover')

　　初始場景的模型升起咱們經過修改特定座標軸的模型縮放來實現。

　　其中還能夠觀察到一些光條的升起效果，這裏咱們將全部光條分紅一組來驅動，使整個總體縱向偏移。爲了讓效果不突兀，咱們再對其透明度進行修改，使其明暗也隨之漸入漸出。

　　全部科技風的 3D 場景中都離不開 uv 偏移這一效果，設計師們能夠大顯身手，繪製豐富的貼圖來給模型增添光彩，程序員經過代碼來偏移 uv 貼圖使得產生酷炫的效果：

　　值得一提的還有這個波紋擴散的動畫，以前 2D 界面也有用到這個效果：

　　在三維場景中，這個元素的類型爲 billboard，打開 3D 可交互便可開放咱們對這些 billboard 作的動畫，擴散實際上是一個圓的橫縱縮放的過程，同時透明度也逐漸變淺，從而產生水波的效果。還有個經常使用的動畫其實在場景中應用很普遍：

　　其實就是旋轉動畫，根據模型的錨點位置，修改某個方向座標軸的角度變化，飛鳥、小船和聲浪圖都應用了這種方式：

總結

　　園區智慧化管理體系的構建是重點，設施管理及檢測的自動化、協調管理的一體化、各環節的信息化是智慧化管理中的三大要素，圍繞安全、環保、能耗、服務等多維度方面的應用建設，最大化提升資源利用率，體現智慧園區建設的意義。隨着新型的城市戰略定位和打造新城市代言，使得智慧園區成爲了智慧城市的縮影。從而打造出智慧園區，謀求跨越式將來發展，這使得咱們要更好的運用物聯網技術、人工智能等戰略性新興技術。打造綜合性的智慧園區服務系統平臺，使得智慧園區走向規模化、集羣化、智能化升級。使資源性集中化、成本優點，規模化優點獲得全面發展。提升智慧園區競爭能力與品牌能力，充分利用信息化管理加強自身競爭能力，建設產業園區服務管理平臺，佔據價值鏈頂端。

　　經過 HT for Web 豐富完善的圖標庫資源的支持，使得組態設計變得更加的簡單便捷。除了樓宇和園區還普遍應用於電信網絡拓撲和設備管理，以及電力、燃氣等工業自動化  (HMI/SCADA)  領域。同時 HT 的成功與完善更是離不開廣大用戶的支持。各行各業提供的專業需求，使得它愈加的完善。歡迎更多大佬加入，這將使得數據可視化有無限的可能。

2019 咱們也更新了數百個工業互聯網 2D/3D 可視化案例集，在這裏你能發現許多新奇的實例，也能發掘出不同的工業互聯網：《分享數百個 HT 工業互聯網 2D 3D 可視化應用案例之 2019 篇》，更多行業應用實例能夠參考官網案例連接：

https://www.hightopo.com/demos/index.html