前言 隨著工業4.0的不斷普及與發展，以及國民經濟的飛速前進，我國的城市集中供熱規模也不斷擴大，科學的管理熱力管網具有非常重大的經濟和社會效益。目前熱力系統，如換熱站大都採用人工監控，人工監控不僅浪費人力；而且在出現事故隱患時操作人員難以發現，易造成裝置事故。同時各換熱站比較分散的獨立執行，難以達到供熱系統整體的最佳執行狀態，造成了整個熱網的熱力失衡，影響供熱效果而造成能源的極大浪費，非常不利於節能減排，甚至影響供熱服務質量。 而在新基建如火如荼的實施上，智慧化的時代已經悄悄來臨，工業網際網路也位列新基建的七大領域當中，對於換熱站的智慧監控上，今天我們將使用Hightopo（以下簡稱 HT ）的HT for Web產品上的web組態跟大家介紹一下通過 2D 組態上運用——流程視覺化動畫效果以及圖表資料載入融合搭建的一個完整的換熱站遠端監控系統的解決方案。 介面簡介及效果預覽 換熱站遠端監控系統的圖紙實現是通過 HT 特有的機制向量圖示繪製的，效果上的呈現可以適應不同解析度的螢幕而不模糊失真，在大屏上展示的效果適配度十分的友好；其次，效果實現上通過流程視覺化動畫效果的控制和子選單的一些資料視覺化圖表的載入，來展示整個視覺化系統資料監控和維護的實現。 白色模式預覽地址：http://www.hightopo.com/demo/heat-station/white/ 藍色模式預覽地址：https://www.hightopo.com/demo/heat-station/blue/ 系統設計 換熱站是整個熱網系統中最核心的環節，它將一側蒸汽或高溫水通過熱交換器換成可以直接進入使用者末端的採暖熱水。換熱站控制系統是集中供熱監控系統的核心部分，換熱站控制系統既可獨立工作，也可以接受排程中心的監督指導。 換熱站的完全自動化無人職守控制包括如下控制內容：供水溫度自動調節、迴圈泵自動調節、補水泵自動定壓、報警管理。 換熱站的工作原理為： 由鍋爐產生的蒸汽經管網輸送到換熱站，送入到換熱器與冷介質水進行充分的熱交換，蒸汽形成的凝結水，經疏水器聚集到凝結水箱中，由迴圈泵來的水在換熱器中與蒸汽進行熱交換以後，進入到採暖管網中進行，從管網中回來的水，由回水缸進行收集，然後經除汙器進入到迴圈泵進行下一輪的迴圈，補水泵及時補充因管網跑冒滴漏等所遺失的水量，以保持一定的壓力，形成經濟穩定的執行狀態，控制檯通過各種感應器對裝置的執行情況監控，隨時掌握，瞭解換熱站的進行情況，並作出相應處理。 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