前言
随着 工业 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