基於 HTML5 WebGL 的污水處理廠泵站自控系統
- 2020 年 4 月 29 日
- 筆記
前言
一道殘陽鋪水中，半江瑟瑟半江紅。隨著城市建設的迅速發展，每年都有大量新建管網水管通水運行。城市中有大量的排水設備，形成相應的城市排水系統，排水系統由檢查井、排水泵站、污水處理廠、雨水口、排放口等等組成，排水設備中的檢查井、雨水口、排放口等通過排水管網進行連接，日常的雨污水進入排水管網進行運輸排放。目前，城市排水管網具有結構龐大，結構錯綜複雜等特點，現有技術中，對城市排水管網的監測、監控仍停留在大量依靠人工的模式，智慧化水平，準確率都不能符合現有技術的需求。
（//www.hightopo.com/demo/drainage-pump-station/）
傳統城市水務行業發展現狀及需求
近年來，物聯網、雲計算技術不斷創新完善，為創建智慧城市提供了有利條件。同時，為了確保水安全，節約有限的資源，傳統的水務行業正不斷地探索智慧水務建設。以實現智慧生產、智慧經營、智慧服務和智慧管控，智慧水務應運而生。
1、在城市供水、排水體系中，基本依靠人工管理和巡檢，確保各環節供水、排水正常，效率較低，回饋周期較長;
2、人工抄表存在擾民、「抄不準」、「估值」等多種情況，客戶服務體驗較差;
3、水質、水壓、及關聯環境數據等不能清晰掌握，不利於水務的精細化管理;
4、對於水泵、水閘、取水栓、污水處理器等水務設備狀態不能實現統一管理，設備管理難度較大;
5、排水管網、污水處理設施、再生水回用等排水體系不健全。
針對水務行業市場需求，我們用 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('應該隱藏房頂')
}
}
})
方案價值
1、無線自動抄表
大大提高抄表準確率和抄表效率，人力成本明顯降低;
2、快速定位管網漏損
通過水表的網格化、實時監控、快速定位管網問題等實現漏損分析，從而降低漏損。
3、水環境數據精細化管理
通過水質、水壓、溫度等數據的實時回傳，實現精細化、可視化管理，提升管理能力。
4、無人值守，遠程統一管控
通過物聯網感測設備，對於水泵、水閘、取水栓、污水處理器等水務設備狀態實現統一遠程管理。可實現無人現場值守，管理員和技術員可隨時隨地遠程監控水務系統的實時狀態;
5、故障主動上報，降低意外故障帶來的損失
設備異常提前知曉、故障主動上報，及時發現和儘快維護，避免該設備故障導致上下游設備和工況環境的連鎖故障，最大化降低設備非計劃性停機頻率和故障損失。
總結
污水處理廠泵站自控系統，以 3D 畫面人機交互的形式展現數據，實時數據以控制面板的形式體現。同時可設定各監測數據的預警值，當數據達到預警值時具有提醒的功能。其核心模組包括：數據處理服務、管網監測點管理、監測實時數據、監測歷史管理、監測數據對比、管網數據分析、監測數據接入等設計和開發。通過 HT for Web 平台，使得交互介面的設計變得更加的簡單與便捷。本文為針對水務處理一塊做出的一些場景分析及數據可視化的設計，若有見解及填充還望指出，為水務事業及國家的發展略盡綿薄之力。歡迎大家評論區下留言互相探討，共勉進步！
2019 我們也更新了數百個工業互聯網 2D/3D 可視化案例集，在這裡你能發現許多新奇的實例，也能發掘出不一樣的工業互聯網：《分享數百個 HT 工業互聯網 2D 3D 可視化應用案例之 2019 篇》。
更多好玩有趣的 demo 盡在其中，歡迎來訪~~
