基于 HTML5 WebGL 的 水泥工厂可视化系统
基于 HTML5 WebGL 的 水泥工厂可视化系统
前言
如今的制造行业，基于数据进行生产策略制定与管理已经成为一种趋势，特别是工业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 {