基于 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);
到这里,换热站整个流程就说完了~~
基于 HTML5 换热站可视化应用的更多相关文章
- 工业4.0:换热站最酷设计—— Web SCADA 工业组态软件界面
前言 随着工业4.0的不断普及与发展,以及国民经济的飞速前进,我国的城市集中供热规模也不断扩大,科学的管理热力管网具有非常重大的经济和社会效益.目前热力系统,如换热站大都采用人工监控,人工监控不仅浪费 ...
- 基于 HTML5 + WebGL 实现 3D 可视化地铁系统
前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...
- 基于 HTML5 + WebGL 的 3D 可视化挖掘机
前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...
- 基于 HTML5 WebGL 的虚拟现实可视化培训系统
前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...
- 初识 visJs (基于html5 canvas开发的可视化框架)
本文参考 https://github.com/almende/vis 编写并且自己总结各种快捷方式,意在帮助开发可视化图表的前端朋友快速了解visJs. vis.js Vis.js是一个基于浏览器的 ...
- 基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用
得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应! 如 ...
- 基于HTML5实现3D热图Heatmap应用
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. http://www.hightopo.c ...
- 基于HTML5实现的Heatmap热图3D应用
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. 已有众多文章分享了生成Heatmap热图原 ...
- 基于 HTML5 WebGL 的地铁站 3D 可视化系统
前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...
随机推荐
- php中函数 isset(), empty(), is_null() 的区别,boolean类型和string类型的false判断
php中函数 isset(), empty(), is_null() 的区别,boolean类型和string类型的false判断 实际需求:把sphinx返回的结果放到ssdb缓存里,要考虑到sph ...
- Linux查看系统当前登录用户的命令,top命令看到users有多个用户登录
Linux查看系统当前登录用户的命令,top命令看到users有多个用户登录 作为系统管理员,top命令看到users有多个用户登录,会需要查看下是否被黑客进入了. 实战例子:top命令:top - ...
- echarts折线图上下颜色渐变样式
// 折线图let lineChart = echarts.init(document.getElementById('lineChart'));let lineOption = { title: { ...
- JDK1.8 —— 接口定义增强
使用default和static定义接口方法 JDK1.8(jre8)以后,接口中不在仅仅只允许定义抽象方法,开始允许定义普通方法了:而普通方法需要用default声明. interface IMes ...
- vue-cli3.0创建项目之完成登录页面
借鉴博客:https://www.cnblogs.com/KenFine/p/10850386.html 接着上一个创建的新项目vue-mydemo01来: 1.创建一个login.vue组件页面:如 ...
- Linux Tools 之 iostat 工具总结
iostat是Linux中被用来监控系统的I/O设备活动情况的工具,是input/output statistics的缩写.它可以生成三种类型的报告: CPU利用率报告 设备利用率报告 网络文件系统报 ...
- ping脚本--无网不利
一.本文主要涉及的内容 二.预备知识 1.打印网络接口列表 2.提取IP地址的小套路 3.更改网卡的MAC地址 4.高速的ping工具:fping 三.套路连招 1.通过一个for循环和ping列出所 ...
- 使用java2Word生成Word文档打不开报错 存在非法字符xml
今天也不知道是该吐槽Java2word还是我的eclipse,总之就是使用Java2Word生成文档的时候文档生成没问题,但是生成的Word文档打不开还报错,存在非法字符xml,好扎心.终于找到了解决 ...
- 学习-JVM命令
jstat jstat (JVM statistics Monitoring)是用于监视虚拟机运行时状态信息的命令,它可以显示出虚拟机进程中的类装载.内存.垃圾收集.JIT编译等运行数据. 格式:js ...
- A1048 Find Coins (25 分)
一.技术总结 首先初看题目有点没读懂,题目大致意思是小明有很多个硬币不同面值的,但是现在他要到商家这里换新的面值, 且商家有一个规定,一个新的硬币必须要你两个硬币面值相加等于的来换,这一有第一个问题产 ...