基於 HTML5 換熱站可視化應用

　　換熱站是整個熱網系統中最核心的環節，它將一側蒸汽或高溫水經過熱交換器換成能夠直接進入用戶末端的採暖熱水。換熱站控制系統是集中供熱監控系統的核心部分，換熱站控制系統既可獨立工做，也能夠接受調度中心的監督指導。
換熱站的徹底自動化無人職守控制包括以下控制內容：供水溫度自動調節、循環泵自動調節、補水泵自動定壓、報警管理。

　　換熱站的工做原理爲：

　　由鍋爐產生的蒸汽經管網輸送到換熱站，送入到換熱器與冷介質水進行充分的熱交換，蒸汽造成的凝結水，經疏水器彙集到凝結水箱中，由循環泵來的水在換熱器中與蒸汽進行熱交換之後，進入到採暖管網中進行，從管網中回來的水，由回水缸進行收集，而後經除污器進入到循環泵進行下一輪的循環，補水泵及時補充因管網跑冒滴漏等所遺失的水量，以保持必定的壓力，造成經濟穩定的運行狀態，控制檯經過各類感應器對設備的運行狀況監控，隨時掌握，瞭解換熱站的進行狀況，並做出相應處理

　　1. 一次熱源經過管道送到換熱站，並進入換熱器內，經過換熱器的換熱，將一次熱源交換到二次供熱管道內，二次供熱管道引出至熱用戶；

　　2. 二次水通過過濾除污，經由循環進入換熱器，被蒸汽或高溫水加熱後進行供熱，蒸汽或高溫水進入板式換熱器後，變成凝結水或高溫回水返回熱源，進行一二次給供熱系統的回熱循環，補水泵將軟水打入系統中保持系統壓力恆定；

　　3. 一次水是指鍋爐房到換熱器的水系統；

　　4. 二次水是指換熱器到採暖末端的水系統；

　　5. 當熱水冷水系統補水能力有限，須要控制管道充水流量，管道閥門應裝設口徑較小的旁通閥做爲控制閥門；

　　如下經過對頁面動畫效果的實現，以及頁面主要功能點進行闡述，幫助咱們瞭解如何使用 HT 實現換熱站的可視化監控。

　　預覽地址：換熱站遠程監控系統：http://www.hightopo.com/demo/heat-station/white/

　　先說一下耗能排名動畫
　　進度條是經過 HT 提供的樣式 clip.percentage 控制進度條長度，經過循環動畫的方式使動畫一直執行。動畫說明詳見 http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html#ref_animation

function animConsume() {
	ht.Default.startAnim({
		duration: 5000,    //動畫週期毫秒數
		easing: function (t) { return t * t },    //動畫緩動函數
		action: function (v, t) {       
			var progress =  dm.getDataByTag('***') 	
			var text = dm.getDataByTag('***');       
			progress.s('clip.percentage', 0 + (1 - 0) * v);    
			text.s('text', (num + (260 - num) * v).toFixed(1));  		
		},
		finishFunc: function () {    動畫執行後的回調函數
			animConsume();
		}
	});
}
animConsume();

　　下面咱們看一下數據報表的動畫，經過綁定自定義屬性，利用定時器不斷地改變屬性值，如下是代碼實現，屬性綁定參考http://www.hightopo.com/guide/guide/core/databinding/ht-databinding-guide.html

function dataReport() {
 	var report = dm.getDataByTag('***');
 	var x = ***;	
 	var step = **;
 	var tn = setInterval(function () {
 		report.a('pos', [x, ***, ***, ***]);	
 		if (x >= ***) {
 			x = ***;
 		}
 		x += step;
 		var randomNum = Math.floor(Math.random() * (max - min + 1) + min);    // 隨機數
 		report.a('valueH', randomNum);
 		report.a('valueL', randomNum - 100);
 	}, 500);
 }
 dataReport();

　管道流動效果使整個畫面更逼真，流動效果是採用 HT 的虛線偏移，只須要修改 shape.dash.offset 屬性值便可實現完美的流動效果　

var flow = dm.getDataByTag('***');
 flow.s('shape.dash.offset', ***)

　　換熱站上的實時數據，採用了 HT 的調度，HT中調度進行的流程是，先經過 DataModel 添加調度任務，DataModel 會在調度任務指定的時間間隔到達時， 遍歷 DataModel 全部圖元回調調度任務的 action 函數，可在該函數中對傳入的 Data 圖元作相應的屬性修改以達到動畫效果，這樣大大提升了性能。如下爲代碼，調度詳情請參考http://www.hightopo.com/guide/guide/core/schedule/ht-schedule-guide.html

numTask = {
    interval: 500,
    action: function(data){
        var tag = data.getTag();
        if (tag) {
            if (tag.startsWith('sInstantFlow')) {
                data.a('value', this.num.toFixed(1))
            } 
        }                
    　　this.num += 5;  
    　　if(this.num >= ***) {
            this.num = **;
    　　}
    }        
};
dm.addScheduleTask(numTask);

 換熱站的控制模式分爲手動模式和自動模式，當換熱站處於自動模式時，按鈕不可點擊，整個系統保持以前的狀態一直運行。當控制模式切換爲手動模式時，能夠經過手動點擊按鈕來控制補水泵和循環泵的啓閉狀態。

fanTask = {
     interval: 100,
     addPumpc: dataModel.getDataByTag('***'),
     num: 0,
     action: function (data) {  
　　　　　this.num += Math.PI / 180;                          
         if (this.addPumpc.a('running')) {
             this.addPumpc.setRotation(this.num);
         }
         if (this.num >= Math.PI * 20000) {
             this.num = 0;
         }
     }        
 }; 
 dm.addScheduleTask(fanTask);

 到這裏，換熱站整個流程就說完了~~