基於 HTML5 WebGL 的污水處理廠泵站自控系統

前言

一道殘陽鋪水中，半江瑟瑟半江紅。隨着城市建設的迅速發展，每一年都有大量新建管網水管通水運行。城市中有大量的排水設備，造成相應的城市排水系統，排水系統由檢查井、排水泵站、污水處理廠、雨水口、排放口等等組成，排水設備中的檢查井、雨水口、排放口等經過排水管網進行鏈接，平常的雨污水進入排水管網進行運輸排放。目前，城市排水管網具備結構龐大，結構錯綜複雜等特色，現有技術中，對城市排水管網的監測、監控仍停留在大量依靠人工的模式，智能化水平，準確率都不能符合現有技術的需求。

（http://www.hightopo.com/demo/drainage-pump-station/）

傳統城市水務行業發展示狀及需求

近年來，物聯網、雲計算技術不斷創新完善，爲建立智慧城市提供了有利條件。同時，爲了確保水安全，節約有限的資源，傳統的水務行業正不斷地探索智慧水務建設。以實現智慧生產、智慧經營、智慧服務和智慧管控，智慧水務應運而生。
一、在城市供水、排水體系中，基本依靠人工管理和巡檢，確保各環節供水、排水正常，效率較低，反饋週期較長;
二、人工抄表存在擾民、「抄不許」、「估值」等多種狀況，客戶服務體驗較差;
三、水質、水壓、及關聯環境數據等不能清晰掌握，不利於水務的精細化管理;
四、對於水泵、水閘、取水栓、污水處理器等水務設備狀態不能實現統一管理，設備管理難度較大;
五、排水管網、污水處理設施、再生水回用等排水體系不健全。

針對水務行業市場需求，咱們用 HT for Web  來打造一個污水處理廠泵站自控系統。

該系統基於物聯網理念，採用信息化手段，實現對管網運行指標的實時監測，包括管網液位、流量、水質、氣體、泵站運行狀態等信息，保證管網安全高效地發揮做用，經過構建安全預警平臺，提升應急指揮及快速處置能力，保障城市排水管線的安全運行，使得整個城市排水管線的安全運行可把握、可控制、可預測，提供科學、先進的城市級水力分析能力，更全面評估城市排水管網能力。以城市排水設施數據爲基礎，結合管網監控數據，氣象雨情情況，實現爲城市匯水區智能劃分、排水規劃、防澇預測提供決策依據。經過智能水錶、壓力傳感器、開關控制閥、水質傳感器、流量傳感器採集數據，而後對供、排水系統中全部管線、設備 (水泵、閥門、取水栓、消防栓等) 與構築物 (水廠、水池、水塔等) 的智能控制管理，全面掌握水務系統的運行狀況如管網水位、流量、水質、水壓、泵站運行狀態等，保證水務系統安全高效運行。

代碼實現

首先，是對一些基礎參數進行設置來得到更好的體驗效果：

// 禁止拖動
gv.setMovableFunc(() => { return false }) 
// 隱藏選中邊框
gv.getWireframe = (d) => { d.s('wf.visible', false) }  
// 設置眼睛
gv.setEye([583, -212, -789]) 
// 設置中心點
gv.setCenter([-76, -654, -133]) 
// 設置遠端位置
gv.setFar(100000) 
// 設置近端位置
gv.setNear(10) 
// 設置交互限制
gv.setInteractors([ new ht.graph3d.MapInteractor(gv) ]) 
// 設置天空球
gv.setSkyBox(dm.getDataByTag('skyBox')) 
// 全局設置右鍵菜單禁用
window.document.oncontextmenu = () => { return false }
// 複製初始位置 
gv.scene = { 
    eye: ht.Default.clone(gv.getEye()),
    center: ht.Default.clone(gv.getCenter()),
    far: ht.Default.clone(gv.getFar()),
    near: ht.Default.clone(gv.getNear()),
}

複製一下整個場景的初始視角狀況方便作稍後的處理。經過監聽部分鼠標事件來造成本身的操做風格（好比雙擊背景還原視角以及雙擊模型拉近視角）：

gv.mi(e => {
    let data = e.data
    let kind = e.kind
    // 雙擊背景
    if (kind === 'doubleClickBackground') { 
        // 恢復視角
        gv.moveCamera(this.gv.scene.eye, this.gv.scene.center, {duration : 1000}) 
    }
    // 雙擊模型
    else if (kind === 'doubleClickData') { 
        // 拉近視角
        gv.flyTo(data, {animation : {duration : 500}, distance : 800}) 
    }
})

場景中有一些面板，它們是以前封裝好的 2D 圖標，在 3D 場景中是一個 billboard 類型，咱們經過對 data.s('shape3d.autorotate') 這個屬性進行設置便可實現面板是否能夠隨視角自動旋轉，值類型爲布爾值。

同時，這些面板中數值等參數咱們均可以綁定好自定義的屬性方便咱們後期來實現數據的驅動：

data.a('name', value)
data.a('state', value)
data.a('num', value)
...

細心的小夥伴還發現牆上還有部分 billboard，能夠經過點擊拉近來瀏覽，這個小交互也加強了用戶體驗感：

gv.mi(e => {
    let data = e.data,
        kind = e.kind
    // 單擊模型
    if (kind === 'clickData') { 
        // 拉近視角
        gv.flyTo(data, {animation : {duration : 1000}, distance : 5000}) 
    }
})

flyTo 方法即相機看向具體的節點或者節點列表，其 options 參數咱們能夠設置動畫效果，direction 爲眼睛處於目標的方向，是相對於目標的，受目標自身旋轉的影響，distance 表示眼睛跟中心的固定距離。

最後一部分也是這個 demo 中最特別的交互效果，不難發現咱們在經過滾輪縮放整個場景時，會有層次的顯隱部分建築，如房蓋地板等，以此來使咱們能觀看到建築內部的細節構造及設備。

咱們經過判斷鏡頭垂直視角距離來進行模型的顯示或隱藏，改變 data.s('3d.visible') 屬性的布爾值來實現。

this.gv.mp(e => {
    const { property } = e
    if (property === 'eye') {
        // 當 Y 軸視角小於等於必定數值，進行隱藏邏輯
        const [cameraX, cameraY, cameraZ] = e.newValue
        if (cameraY <= 500) {
            // hide（）
            console.log('應該隱藏房頂')
        }
    }
})

方案價值

一、無線自動抄表
大大提升抄表準確率和抄表效率，人力成本明顯下降;
二、快速定位管網漏損
經過水錶的網格化、實時監控、快速定位管網問題等實現漏損分析，從而下降漏損。
三、水環境數據精細化管理
經過水質、水壓、溫度等數據的實時回傳，實現精細化、可視化管理，提高管理能力。
四、無人值守，遠程統一管控
經過物聯網傳感設備，對於水泵、水閘、取水栓、污水處理器等水務設備狀態實現統一遠程管理。可實現無人現場值守，管理員和技術員可隨時隨地遠程監控水務系統的實時狀態;
五、故障主動上報，下降意外故障帶來的損失
設備異常提早知曉、故障主動上報，及時發現和儘快維護，避免該設備故障致使上下游設備和工況環境的連鎖故障，最大化下降設備非計劃性停機頻率和故障損失。

總結

污水處理廠泵站自控系統，以 3D 畫面人機交互的形式展示數據，實時數據以控制面板的形式體現。同時可設定各監測數據的預警值，當數據達到預警值時具備提醒的功能。其核心模塊包括：數據處理服務、管網監測點管理、監測實時數據、監測歷史管理、監測數據對比、管網數據分析、監測數據接入等設計和開發。經過 HT for Web 平臺，使得交互界面的設計變得更加的簡單與便捷。本文爲針對水務處理一塊作出的一些場景分析及數據可視化的設計，如有看法及填充還望指出，爲水務事業及國家的發展略盡綿薄之力。歡迎你們評論區下留言互相探討，共勉進步！

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

更多好玩有趣的 demo 盡在其中，歡迎來訪~~