ITman彪叔的博客,微信公众号:ITman彪叔。欢迎对canvas、webgl、图形学感兴趣的读者订阅专栏。 点击下面链接可以订阅: [canvas高级进阶] https://xiaozhuanlan.com/canvas [webgl入门到高级进阶]https://xiaozhuanlan.com/webgl

钢铁冶炼工艺流程编辑可视化

项目背景

前几天有客户打电话过来,说想了解我们公司的编辑可视化产品,最近在网上看到过我司编辑可视化的相关解决方案,感觉挺不错也想给自己的工业流程进行一个定制的编辑可视的管理平台。经过沟通,了解到该客户属于钢铁冶炼工业,想通过一个编辑可视化管理软件进行自己钢铁冶炼工艺业务流程的编辑和管理,提高产品竞争力,节省人力,物力,减少冶炼环节的故障。

其中还提出需要有冶炼设备的实时监控信息;
当设备出现故障或者达到阈值时,有告警和预警提示,可以及时处理设备故障;
当设备新增和换代时,工艺流程图不需要专业编程技术人员就可以进行更改;
大致需求沟通后,想让我们根据他们的工艺流程图进行一个初步的效果实现。

项目介绍

项目沟通

通过沟通整理需求后,我开始和公司的设计小姐姐技术小哥哥们进行技术研发问题和设计图纸的讨论,最终确定了项目的具体实施方案,具体实现方案介绍如下。

项目设计稿

设计小姐姐根据他们的工艺流程图,设计出几副图纸,经过几次交涉后,最终图纸大概这个样子,如下图:
image.png

项目研发

该编辑可视化管理软件是基于公司自主研发的3D引擎基础上进行的开发,省去了开发上的很多难题,大大缩短了开发周期。该编辑器不仅支持图元模型的定制,并且拥有自己的模型库,可以进行图元模型的分类和管理;可集成各个图元组件,对接图元数据接口。图元使用上支持图元的拖拽编辑,键盘快捷捷操作,批量生成列队,快速复制等功能,该编辑器主要分为一下几个区域:

1.左侧为场景左树和组件

2.中上为工具栏

3.中间为画布

4.右侧为组件属性面板

image.png

下面大概讲一下钢铁冶炼工艺流程编辑器的相关功能代码实现和编辑使用的操作方法,具体介绍如下:

LF炉除尘机

LF炉除尘机看上去是由一个正方形,中间是一个立体的图行组成,编辑器怎么实现哪?其实也简单,首先从左侧拖拽出一个正方形,在其属性面板调整大小设置其填充渐变色,然后置底;中间的立体效果时如何实现的哪?拖拽几个不同大小的正方形设置边框,用连线连接各个正方形的对角线,然后再设置其右侧的一个三角区域的填充色和透明色即可。

image.png

电炉屋顶烟气排集罩

这个是对梯形的简单操作,从左侧拖拽一个梯形到画布上,设置其填充属性和填充渐变色即可,这个操作相对简单。

image.png

电炉密闭罩

电炉密闭罩和电炉屋顶烟气排集罩编辑一样,就是其填充渐变色不同而已。

image.png

Consteel 电炉

Consteel电炉就是对两个梯形的结合,拖拽一个梯形调整大小,设置其填充渐变色,然后旋转角度,同样的方法再复制一个梯形,然后点击工具栏的“组合”功能即可。

image.png

**铜烟囱 **

铜烟囱 其实也是对梯形的操作,首先拖拽一个梯形调整大小,设置填充渐变色;再拖拽一个长方形调整大小,设置其填充色,然后按图纸组合即可。

image.png

原一次二次布袋除尘器

原一次布袋除尘器和原二次布袋除尘器图元一样。首先从左侧拖拽一个长方形调整大小,设置其渐变色;再拖拽一个三角形调整大小,设置其填充渐变色,然后点击工具栏的“组合”功能组合即可。

image.png

变频电机

变频电机的编辑相对来说麻烦一些,首先拖拽一个长方形到画布调整大小,设置填充渐变色,然后置底;然后再拖拽一个长方形到画布调整大小,设置其填充色,然后使用ctrl+shift快捷键,快速复制两列同样大小的长方形,或者使用批量生成功能,也可以快速快速实现长方形的队列;最后再拖拽一个正方形到画布调整大小,设置其填充色,然后再复制一个同样的正方形,最后组合即可。

image.png

批量生成功能
批量生成

除尘风机

除尘风机相对复杂一些,首先拖拽一个圆形调整大小和边框,圆形默认无填充;按Ctrl+Shift复制这个圆形,调整其大小,设置填充渐变色,放置在第一个圆内;然后再复制一个大圆调整大小和边框大小、颜色放置第二个圆内;最后再拖拽一个菱形调整大小,设置边框大小,然后再复制5个同样的菱形,点击“组合”功能组合即可。

image.png

废钢加料通道

这个图元看上去很复杂,其实现也不难。首先拖拽一个长方形调整大小,设置其填充色;然后再拖拽一个梯形调整大小,设置其填充渐变色;再复制上边的长方形调整大小,设置填充渐变色;最后再拖拽一个正方形调整大小,设置其填充色,复制同样的三个正方形,按“组合”功能组合即可。

image.png

沉降池

沉降池看上去外形有点复杂,其实编辑起来也不难。首先拖拽一个三角形到画布上调整大小,设置填充渐变色;再拖拽一个正方形调整大小,设置填充渐变色,再拖拽两个圆形调整大小,设置边框大小和颜色;再拖拽一个正方形调整大小,设置边框颜色,然后复制出七个小正方形,按“组合”功能组合即可。

image.png

蒸发冷却塔

蒸发冷却塔从外形上看不复杂,实际编辑时比其它图元花费的时间多。首先托拽一个圆形调整大小,设置其属性面板的起始角度未180度,设置其填充色;再拖拽一个长方形调整大小,设置填充色置底;再拖拽一个长方形调整大小,设置填充渐变色,,再拖拽一个长方形调整大小,设置填充色置底,复制一个长方形调整大小,设置填充色,然后按“组合”功能组合即可,注意对齐问题。

image.png

连接体部分

连接体部分可以直接拖拽一个长方形调整大小,设置填充色和透明色置底;再拖拽一个圆形设置其边大小和颜色,再按Ctrl+Shist复制一个同样的圆形;然后再拖拽一个长方形调整大小,设置填充色,再复制一个同样的长方形,组合图元即可。

image.png

连接体

连接体看着图元数量很多很复杂,其实我们通过批量生成的功能,实现也很容易。首先我们拖拽两个长方形到画布上调整各自大小,设置其填充色,将棕色长方形置底 组合好一个基础图元,然后再使用批量生成功能设置队列形状即可,该方法方便快捷。
箭头直接拖拽一个三角形调整大小,设置其填充色即可。

image.png
最终编辑实现效果如下:
image.png

有兴趣获取demo的,请发邮件到:
terry.tan@servasoft.com

另欢迎关注个人公众号 “ITman彪叔”

posted on 2020-03-03 13:35  ITman彪叔  阅读(367)  评论(0编辑  收藏  举报

导航

ITman彪叔的博客,微信公众号:ITman彪叔。欢迎对canvas、webgl、图形学感兴趣的读者订阅专栏。 点击下面链接可以订阅: [canvas高级进阶] https://xiaozhuanlan.com/canvas [webgl入门到高级进阶]https://xiaozhuanlan.com/webgl