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

项目背景

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

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

项目介绍

项目沟通

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

项目设计稿

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

项目研发

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

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

2.中上为工具栏

3.中间为画布

4.右侧为组件属性面板

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

LF炉除尘机

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

电炉屋顶烟气排集罩

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

电炉密闭罩

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

Consteel 电炉

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

铜烟囱

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

原一次二次布袋除尘器

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

变频电机

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

批量生成功能

除尘风机

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

废钢加料通道

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

沉降池

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

蒸发冷却塔

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

连接体部分

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

连接体

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

最终编辑实现效果如下：

有兴趣获取demo的，请发邮件到：
[e-mail]

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