HTML5
发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了基于HTML5换热站可视化应用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
换热站是整个热网系统中最核心的环节，它将一侧蒸汽或高温水通过热交换器换成可以直接进入用户末端的采暖热水。换热站控制系统是集中供热监控系统的核心部分，换热站控制系统既可独立工作，也可以接受调度中心的监督指导。
换热站的完全自动化无人职守控制包括如下控制内容：供水温度自动调节、循环泵自动调节、补水泵自动定压、报警管理。
以下通过对页面动画效果的实现，以及页面主要功能点进行阐述，帮助我们了解如何使用 HT 实现换热站的可视化监控。
@H_502_12@
先说一下耗能排名动画
进度条是通过 HT 提供的样式 clip.percentage 控制进度条长度，通过循环动画的方式使动画一直执行。
@H_
489_16@function animConsume()
{
ht.Default.startAnim(
{
duration: 5000,//动画周期毫秒数
easing: function (t)
{ return t * t },//动画缓动
函数
action: function (v,t)
{
var progress = d
m.getDataByTag(‘
***‘)
var text = d
m.getDataByTag(‘
***‘
);
progres
s.s(‘cli
p.percentage‘,0 + (1 - 0) * v
);
text.s(‘text‘,(num + (260 - num) * v).toFixed
(1));
},finishFunc: function ()
{ 动画执行后的回调
函数
animConsume(
);
}
}
);
}
animConsume(
);
下面我们看一下数据报表的动画，通过绑定自定义属性，利用定时器不断地改变属性值，以下是代码实现
@H_
489_16@function dataReport()
{
var report = d
m.getDataByTag(‘
***‘
);
var x =
***;
var step =
**;
var tn = se
Tinterval(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图元做相应的属性修改以达到动画效果，这样大大提高了性能。
大佬总结
以上是大佬教程为你收集整理的基于HTML5换热站可视化应用全部内容，希望文章能够帮你解决基于HTML5换热站可视化应用所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
