专栏首页hightopo基于 HTML5 WebGL 的 水泥工厂可视化系统

基于 HTML5 WebGL 的 水泥工厂可视化系统

​前言

如今的制造行业,基于数据进行生产策略制定与管理已经成为一种趋势,特别是工业4.0的浪潮下,数据战略已经成为很多制造企业的优先战略,而数据可视化以更直观的方式,帮助指导决策,成为数据分析传递信息的重要工具。通过数据可视化系统助力实现数据驱动的工业世界,为工业4.0提供更加灵活、敏捷、高效、个性化的数据支撑。今天就给大家带来一个采用HightopoHT 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 {

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于 HTML5 WebGL 的 水泥工厂可视化系统

    如今的制造行业,基于数据进行生产策略制定与管理已经成为一种趋势,特别是 工业4.0 的浪潮下,数据战略已经成为很多制造企业的优先战略,而数据可视化以更直...

    HT for Web
  • 基于 HTML5 WebGL 的高炉炼铁厂可视化系统

    在当今 工业4.0 新时代的推动下,不仅迎来了 工业互联网 的发展,还开启了 5G 时代的新次元。而伴随着带宽的提升,网络信息飞速发展,能源管控上与...

    HT for Web
  • 基于 HTML5 + WebGL 的无人机 3D 可视化系统

    近年来,无人机的发展越发迅速,既可民用于航拍,又可军用于侦察,涉及行业广泛,也被称为“会飞的照相机”。但作为军事使用,无人机的各项性能要求更加严格、重要。本系统...

    HT for Web
  • 基于 HTML5 WebGL 的发动机 3D 可视化系统

    工业机械产品大多体积庞大、运输成本高,在参加行业展会或向海外客户销售时,如果没有实物展示,仅凭静态、简单的图片说明书介绍,无法让客户全面了解产品,不仅工...

    HT for Web
  • 基于 HTML5 WebGL 的发动机 3D 可视化系统

    工业机械产品大多体积庞大、运输成本高,在参加行业展会或向海外客户销售时,如果没有实物展示,仅凭静态、简单的图片说明书介绍,无法让客户全面了解产品,不仅工作人员制...

    Hightopo图扑软件
  • 基于 HTML5 WebGL 的地铁站 3D 可视化系统

    工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领...

    HT for Web
  • 基于 HTML5 WebGL 的地铁站 3D 可视化系统 顶

    工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领...

    HT_hightopo
  • 基于 HTML5 的 WebGL 3D 档案馆可视化管理系统

    档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能。为企事业单位的档案...

    HT_hightopo
  • 分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇

    过去的 2018 年,我们认为是国内工业互联网可视化的元年,图扑软件作为在工业可视化领域的重度参与者,一线见证了众多 HTML5/Web 化、2D/3D 化的项...

    万物皆可联i

扫码关注云+社区

领取腾讯云代金券