基于Web组态软件(HT for Web)实现水泥工厂数据可视化系统
前言
如今的制造行业,基于数据进行生产策略制定与管理已经成为一种趋势,特别是 工业4.0 的浪潮下,数据战略已经成为很多制造企业的优先战略,而数据可视化以更直观的方式,帮助指导决策,成为数据分析传递信息的重要工具。通过数据可视化系统助力实现数据驱动的工业世界,为 工业4.0 提供更加灵活、敏捷、高效、个性化的数据支撑。今天就给大家带来一个采用 Hightopo 的 HT for Web 产品实现了一个水泥工厂可视化系统。
系统预览
系统实现
本案例共有七个子系统:
数据概况 – 展示全厂年月时间单位的各项数据概况
窑系统运行 – 用窑工艺流程动画展示窑系统实时运行状态
系统运行情况 – 用动画流程图展示整个系统运行情况
生料质量控制 – 用图表和流程图展示各种生料的配比情况
熟料质量控制 – 用动画流程图展示各种熟料的配比情况
煤粉质量控制 – 用图表和流程图对煤粉质量进行监控
智能物流 – 通过 3D 场景实时监控进出厂车辆,和各项原料运输情
子系统页面切换
切换不同子系统时,左侧菜单和顶部标题是不需要切换的,所以我们把需要切换的内容部分别放在不同的 Block 中,Block 类型,本身不绘制任何内容,用于作为其它节点的父节点,可以与子节点同步大小,当它隐藏或显示时,所有子节点都会跟着隐藏或显示。所以当我们切换子系统时只需要控制对应的 Block 显示隐藏,而不需要去加载切换多张图纸。
流向地图
在数据概况页面中,流向地图展示年度水泥向各地区的销售情况,这里我们用 Shape 类型绘制线段来连接源地和汇地,用流动效果表示销售关系。流动效果只需引入 HT 的 ht-flow.js 插件,即可通过简单的属性设置实现,代码如下:
// 获取线段的父节点
this.flowParent = dm.getDataByTag('saleFlowParent');
// 遍历得到所有线段
this.flowParent.eachChild(child => {// 开启流动,设置流动样式child.s({// 开启流动'flow': true,// 设置流动组中最大元素的尺寸'flow.element.max': 4,// 设置流动组中的元素的渐变阴影中心颜色'flow.element.shadow.begincolor': '#49e5fe',// 设置流动组中的最大元素的渐变阴影尺寸'flow.element.shadow.max': 16,// 设置流动组中的元素的渐变阴影边缘颜色'flow.element.shadow.endcolor': 'rgba(73, 229, 254, 0)',});
});
窑系统动画
在窑系统运行页面中,窑工艺流程动画很直观的展示了窑系统实时运行状态。画面中火焰、水和熟料在传送带上运输的动画效果,为了在性能较差的设备上也能流畅运行,我通过切换不同矢量图形的方式实现。这里用到了 HT 矢量中状态机制,先绘制多个不同的矢量组件,每个组件都可以定义状态来决定自己在哪个状态下显示,只要通过 data.s(‘state’) 修改节点状态就可以实现如下效果:
使用一个定时器,不断地改变节点的状态值,相关代码如下:
this._stateTimer = setInterval(() => {stateNodes.forEach(node => {this.stateAnimation(node);});
}, 180);
//切换状态
stateAnimation(node) {let stateIndex = (node.a('stateIndex') || 0) % stateEnum.length,state = stateEnum[stateIndex].value;node.s('state', state);node.a('stateIndex', ++stateIndex);
}
流程图动画
流程图中流动线同样是使用 ht-flow.js 插件实现。由于图纸上的线段比较多,我把不同的线段分组放在不同的 Block 下,遍历其子节点设置样式,代码如下:
//设置流动属性setNodeFlow (data, value) {if (data instanceof ht.Block) {data.eachChild(child => {this.setNodeFlow(child, value);});}else if (data.getDisplayName() === 'line'){data.s({'flow': value,'flow.element.max': 4,'flow.element.count': 1,'flow.count': 5,'flow.step': 10});}
}
//设置虚线流动属性
setNodeDashFlow(data, value) {if (data instanceof ht.Block) {data.eachChild(child => {this.setNodeDashFlow(child, value);});}else if (data.getDisplayName() === 'border'){if (value) {data.s({'shape.dash.flow': true,'shape.dash': true});}else {data.s({'shape.dash.flow': false,'shape.dash': false});}}
}
为了使动画看起来更顺畅,我给一些节点加上透明度动画,设置节点透明度的代码如下:
//设置节点透明度
setNodeOpacity (data, value = 0.5) {if (data instanceof ht.Block) {data.eachChild(child => {this.setNodeOpacity(child, value);});}else {data.s('opacity', value);}
}
接下来只需要依次执行动画:
//开始流程图动画
start() {let {eo, eoInput, eoLine1, eoKind, eoCalu} = this;//工况输入透明度动画this.gv.enableFlow(30);this.setNodeOpacity(eo);this.setNodeFlow(eo, false);(new Promise((resolve, reject) => {this.animtion = startAnim({frames: 16,interval: 5,finishFunc: () => {resolve()},action: (v, t) => {this.setNodeOpacity(eoInput, 0.5 + 0.5 * v);}});})).then(() => {//连线连线透明动画,流动return new Promise((resolve, reject) => {this.animtion = startAnim({frames: 12,interval: 10,finishFunc: () => {this.setNodeFlow(eoLine1, true);this.timer = setTimeout(() => {resolve()}, 1500);},action: (v, t) => {this.setNodeOpacity(eoLine1, 0.5 + 0.5 * v);}});})}).then(() => {//软计算透明动画return new Promise(resolve => {this.animtion = startAnim({frames: 16,interval: 5,finishFunc: () => {resolve()},action: (v, t) => {this.setNodeOpacity(eoKind, 0.5 + 0.5 * v);this.setNodeOpacity(eoCalu, 0.5 + 0.5 * v);}});});}).then(() => {//软计算透明虚线流动return new Promise(resolve => {this.setNodeDashFlow(eoKind, true);this.setNodeDashFlow(eoCalu, true);this.timer = setTimeout(() => {this.setNodeDashFlow(eoKind, false);this.setNodeDashFlow(eoCalu, false);resolve();}, 3000);});}).then(() => {......})
}
智能物流
前面六个子系统均为 2D 界面,而智能物流页面则是嵌入了一个 3D 场景。实现方式是通过定义 HT 矢量 JSON 的 renderHTML 函数属性,可实现在 GraphView 拓扑图上,嵌入任意第三方 HTML DOM 元素。不过这里也要注意一点,HT 的图纸是 Canvas 实现的,renderHTML 的 DOM 元素一定在 Canvas 之上,使用 renderHTML 的 DOM 与常规 Canvas 上绘制的图元不可能有层级控制可能性。下面展示一下 renderHTML 函数属性里的代码:
renderHTML : function (data, gv, cache) {// 避免重复创建g3dif (!cache.g3d) {// 创建 3D 视图组件var g3d = cache.g3d = new ht.graph3d.Graph3dView();// 布局函数,根据图元的位置信息摆放HTML元素g3d.layoutHTML = function () {gv.layoutHTML(data, g3d, true);};// 阻止事件冒泡g3d.getView().addEventListener('mousedown', function (event) {event.stopPropagation();});g3d.getView().addEventListener('touchstart', function (event) {event.stopPropagation();});}// 获取图元自定义属性sceneURL的值var sceneURL = data.a('sceneURL');// 获取图元自定义属性onPostDeserialize的值var onPostDeserialize = data.a('onPostDeserialize');// 当图元自定义属性sceneURL改变时,清除旧dataModel,反序列化新的sceneURLif (cache.g3d.sceneURL !== sceneURL) {cache.g3d.dm().clear();cache.g3d.sceneURL = sceneURL;if (sceneURL) {cache.g3d.deserialize(sceneURL, function (json, dm, g3d, datas) {// 在反序列化后的回调函数中,执行onPostDeserialize函数onPostDeserialize && onPostDeserialize(json, dm, g3d, datas);});}}return cache.g3d;
}
3D场景嵌入后,接下来实现水泥厂内的车辆动画。根据后台传来车辆进入工厂的数据,我们创建运载不同原料的车辆模型,让它们沿着不同的路径抵达对应的厂房。同样是用 Shape 类型事先绘制好路径,根据 Shape 的 Points 和 Segments 信息,实现车辆沿着路径行驶动画。相关代码如下:
carAnimation(car, path, duration) {// 车辆行驶动画ht.Default.startAnim({duration: duration,easing: Easing.easeNone,action: function (v, t) {// 设置偏移量let offset = Math.floor(v * 100);// 根据偏移量得到在路径上的点坐标let position = ht.Default.getPercentPositionOnPoints(path.getPoints(), path.getSegments(), offset);// 根据偏移量得到在路径上的点于路径切线角度let angle = ht.Default.getPercentAngle(path.getPoints(), path.getSegments(), offset);// 设置车辆位置坐标及旋转角度car.setX(position.x);car.setY(position.y);car.setRotationY(Math.PI / 2 - angle);},});}
总结
工业互联网是工业发展的必经之路,我们国家是一个工业大国,正处在工业转型升级的关键时刻,面临着人工成本上升、原材料价格波动、贸易竞争日益加剧等问题,迫切需要提高效率、降低生产成本。只有坚定不移地推动工业互联网落地,加快更多企业的数字化转型和智能化改造,才有能让在全球化竞争中立于不败之地。可视化作为智能化数字化的最后一环,让复杂抽象的数据变得真正可知可感,帮助决策者发现规律,洞悉未来,为企业提速增效。
还有更多的可视化案例可以参考:https://www.hightopo.com/demos/index.html
基于Web组态软件(HT for Web)实现水泥工厂数据可视化系统相关推荐
- 工控用Web组态软件比组态软件更高效
从事相关工作的对"组态软件"应该都不陌生,那Web组态软件又是什么呢?本文将对Web组态可视化软件(下称"Web组态软件")做简单介绍,可视化编辑器是Web组态 ...
- 网页版组态软件:Sovit2D Web组态可视化编辑器
随着工业智能制造的发展,工业企业对设备可视化.远程运维的需求日趋强烈,传统的单机版组态软件已经不能满足越来越复杂的控制需求,那么实现Web组态可视化界面成为了主要的技术路径. 行业痛点 对于软件服务商 ...
- 第一节 使用ISM Web组态软件采集Modbus设备数据
系列文章目录 第一节 使用ISM Web组态软件采集Modbus设备数据 文章目录 系列文章目录 前言 一.登录系统,并创建项目 二.创建Modbus设备数据模型 三.添加Modbu设备模型的寄存器组 ...
- 第二节 下载和安装ISM Web组态软件
文章目录 前言 一.下载 二.Windows安装 三.Centos安装 四.linux二进制安装 总结 前言 ISM Web组态软件唯一下载网址 www.ismctl.com,其他转载和提供下载地址不 ...
- ISM Web组态软件采集西门子PLC
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.西门子PLC 二.使用步骤 1.创建西门子 PLC S7模型 2.创建设备 总结 前言 本文详细讲述了ISM We ...
- 基于hadoop和echarts的教育大数据可视化系统 毕设完整的代码+数据集
一.摘 要 在线教育平台现在是教育体系的重要组成部分,在当前大数据时代的背景下,促进教育机构建立统一平台.统一资源管理的数字化教学系统.如何评估系统平台的健康程度.学生的学习体验和在线课程的质量对于课 ...
- python基于Echarts的城科就业数据可视化系统毕业设计源码150915
Python城科就业数据可视化系统 摘 要 对于处理广泛的数据并整合到本地,Python爬虫有着自已强大的功能,面对城科就业数据可视化系统研究,我们考虑借助Python爬虫的功能对其实现相应的处理,本 ...
- 毕业设计:基于SSM框架的新生报到数据可视化系统
前言:本文介绍的是一个基于SSM框架的新生报到数据可视化系统,是一个毕业设计成品,该系统主要采用JAVA语言编写,主要应用到了SpringBoot框架,Mybatis框架.mysql数据库以及redi ...
- 基于python數據分析的疫情数据可视化系统
文章目录 前言 1 课题背景 2 实现效果 2.1 整体界面展示 2.2 收集數據 3 實現過程 3.1 爬取疫情數據: 3.1.1 導包 3.1.2 實例化csv 3.1.3 防反爬 3.1.4 爬 ...
最新文章
- Java学习总结:45(字符编码)
- 职称计算机证是继续教育的内容吗,豆腐网教你一分钟弄懂继续教育学时认定表及上传注意事项~...
- flask 控制台输出到文件
- 如何用javasript对Gridview的项目进行汇总统计?
- 关于维金病毒和几个维金病毒防治的辅助工具
- numpy数据集练习
- Hadoop jobhistory历史服务器
- echo(),print(),print_r(),var_dump()的区别
- 4国语言软件下载网站源码
- L1-018 大笨钟 (10 分)
- 前端每日实战 2018 年 9 月份项目汇总(共 26 个项目)
- VS2013 MFC 直接将 OpenCV2.0/3.0 库中的 Mat 结构的图像传递到 Picture Control(图片控件)
- 在asp.net 中实现只允许数字输入的文本框
- 加密数字货币前传:从大卫·乔姆到中本聪
- html div 怎么排版,请html大神解决一个div排版的问题
- html设计打地鼠游戏,js实现打地鼠小游戏
- 指纹识别的原理和方法
- Efficientnet网络详解及构建
- python程序扩展名 py、pyc、pyo、pyd文件区别
- Mac安装Java反编译工具JD-GUI(解决打不开问题)