前言
隨着
工業4.0的不斷普及與發展，以及國民經濟的飛速前進，我國的城市集中供熱規模也不斷擴大，科學的管理熱力管網具有非常重大的經濟和社會效益。目前
熱力系統，如換熱站大都采用人工監控，人工監控不僅浪費人力；而且在出現事故隱患時操作人員難以發現，易造成設備事故。同時各換熱站比較分散的獨立運行，難以達到供熱系統整體的最佳運行狀態，造成了整個熱網的熱力失衡，影響供熱效果而造成能源的極大浪費，非常不利於節能減排，甚至影響供熱服務質量。
而在
新基建如火如荼的實施上，智能化的時代已經悄悄來臨，工業互聯網也位列新基建的七大領域當中，對於換熱站的智能監控上，今天我們將使用
Hightopo（以下簡稱 HT ）的
HT for Web 產品上的
web 組態跟大家介紹一下通過 2D 組態上運用——流程可視化動畫效果以及圖表數據載入融合搭建的一個完整的
換熱站遠程監控系統的解決方案。
界面簡介及效果預覽
換熱站遠程監控系統的圖紙實現是通過 HT 特有的機制矢量圖標繪制的，效果上的呈現可以適應不同分辨率的屏幕而不模糊失真，在大屏上展示的效果適配度十分的友好；其次，效果實現上通過流程可視化動畫效果的控制和子菜單的一些數據可視化圖表的載入，來展示整個可視化系統數據監控和維護的實現。
系統設計
換熱站是整個熱網系統中最核心的環節，它將一側蒸汽或高溫水通過熱交換器換成可以直接進入用戶末端的采暖熱水。換熱站控制系統是集中供熱監控系統的核心部分，換熱站控制系統既可獨立工作，也可以接受調度中心的監督指導。
換熱站的完全自動化無人職守控制包括如下控制內容：
供水溫度自動調節、
循環泵自動調節、
補水泵自動定壓、
報警管理。
換熱站的工作原理為：
由鍋爐產生的蒸汽經管網輸送到換熱站，送入到換熱器與冷介質水進行充分的熱交換，蒸汽形成的凝結水，經疏水器聚集到凝結水箱中，由循環泵來的水在換熱器中與蒸汽進行熱交換以后，進入到采暖管網中進行，從管網中回來的水，由回水缸進行收集，然后經除污器進入到循環泵進行下一輪的循環，補水泵及時補充因管網跑冒滴漏等所遺失的水量，以保持一定的壓力，形成經濟穩定的運行狀態，控制台通過各種感應器對設備的運行情況監控，隨時掌握，了解換熱站的進行情況，並作出相應處理。
1、一次熱源通過管道送到換熱站，並進入換熱器內，通過換熱器的換熱，將一次熱源交換到二次供熱管道內，二次供熱管道引出至熱用戶；
2、二次水經過過濾除污，經由循環進入換熱器，被蒸汽或高溫水加熱后進行供熱，蒸汽或高溫水進入板式換熱器后，變成凝結水或高溫回水返回熱源，進行一二次給供熱系統的回熱循環，補水泵將軟水打入系統中保持系統壓力恆定；
3、一次水是指鍋爐房到換熱器的水系統；
4、二次水是指換熱器到采暖末端的水系統；
5、當熱水冷水系統補水能力有限，需要控制管道充水流量，管道閥門應裝設口徑較小的旁通閥作為控制閥門；
效果實現
一、整體系統流程圖
換熱站的實現上的主體部分體現在了可視化流程的控制，用戶可以根據系統搭建的換熱站運行流程來控制閥門的開關和運行時的流動，其流程上實現的動畫全是由 HT 封裝的動畫函數
ht.Default.startAnim() 來實現的，實現上的優勢是，動畫可以支持
Frame-Based 和
Time-Based 兩種方式的動畫，Frame-Based 的方式是用戶通過指定 frames 動畫幀數，以及 interval 動畫幀間隔參數來控制動畫效果，而 Time-Based 的方式是用戶只需要指定 duration 的動畫周期的毫秒數即可，HT 將在指定的時間周期內完成動畫；還設定了 delay 動畫延遲執行的時間來搭配動畫實現的效果；easing 參數則是用於讓用戶自定義函數，通過數學公式控制動畫，如勻速變化、先慢后快等效果；其中最重要的就是 action 動畫執行函數和 finishFunc 動畫結束回調函數，通過一些效果的搭配使用，可以使用戶達到平滑的動畫效果。
而以上流程可視化動畫的具體實現，用戶只需要在搭建好的矢量圖紙上，對圖元節點進行唯一標識標簽
tag 的命名，並通過在數據模型
dataModel 里去獲取這個標識節點，進行動畫函數的控制，對其需要實現的屬性進行數據上的改變，從而達到動畫實現上的效果。而在整個流程中，最重要的兩個動畫上的實現，一個是閥門旋轉的實現，實現的方式是通過動畫函數來改變閥門旋轉的角度值，並通過
setRotation() 設置圖元的旋轉角度，圍繞中心點順時針旋轉，角度值上則采用弧度值的方式；第二個管道流動的動畫效果是采用 HT 的虛線偏移，只需要修改圖元節點的
shape.dash.offset 屬性值即可實現完美的流動效果。
二、子菜單
子菜單的實現上是通過 HT 自身擁有的一套矢量圖表的圖形組件來搭建而成的，實現不僅可以使用 HT 現有的矢量圖表圖形組件庫
ht-vector 進行系統上的搭建，還可以使用第三方的圖形組件進行嵌入，例如
EChart、
Chart等開源的圖表組件都可以輕松的嵌入。使用圖表組件再通過數據采集后，進行數據接口上的對接，可以即使地反饋出一些換熱站實時監控的數據走向，起到監管和維護的作用的同時，還能預防一些問題的發生。
現有的矢量圖表圖形組件庫 ht-vector 內置了許多的圖表，包括柱狀圖、折線圖、條形圖、雷達圖等一系列場景的圖表的運用，在效果呈現上不僅只局限於一種展現形式，用戶可以通過自定義繪制出一套符合自己系統風格的矢量圖表，極其自由的繪制可以實現出更多酷炫的效果，更好玩的嘗試可以通過官網了解一些功能上的實現以及運用。
總結
換熱站的遠程監控系統儼然是工業互聯網的一角，工業4.0的大門已經開啟，搭載5G時代的引領，全面的信息化時代已經到來，在智能化監控上，可以充分地釋放掉人力上的使用成本，也能減輕系統監控和維護的工作量。
HT 在眾多領域上積累許多行業上系統實施的解決方案，並通過自身產品上的不斷研究和進步，打造出一套豐富的
2D組態和
3D組態，方便用戶快速上手使用，實現出更多精美的工業監控可視化系統。
在 2D組態上動畫數據的體現上，有興趣的小伙伴可以了解一下，關於圖表動畫實現上酷炫效果的實現：
Inteligent Lighting Alliance
2019 我們也更新了數百個工業互聯網 2D/3D 可視化案例集，在這里你能發現許多新奇的實例，也能發掘出不一樣的工業互聯網：
https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA
同時，你也可以查看更多案例及效果：
https://www.hightopo.com/demos/index.html