基于 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);

 到这里，换热站整个流程就说完了~~