項目背景
前幾天有客戶打電話過來，說想了解我們公司的編輯可視化產品，最近在網上看到過我司編輯可視化的相關解決方案，感覺挺不錯也想給自己的工業流程進行一個定製的編輯可視的管理平臺。經過溝通，瞭解到該客戶屬於鋼鐵冶煉工業，想通過一個編輯可視化管理軟件進行自己鋼鐵冶煉工藝業務流程的編輯和管理，提高產品競爭力，節省人力，物力，減少冶煉環節的故障。
其中還提出需要有冶煉設備的實時監控信息；
當設備出現故障或者達到閾值時，有告警和預警提示，可以及時處理設備故障;
當設備新增和換代時，工藝流程圖不需要專業編程技術人員就可以進行更改；
大致需求溝通後，想讓我們根據他們的工藝流程圖進行一個初步的效果實現。
項目介紹
項目溝通
通過溝通整理需求後，我開始和公司的設計小姐姐技術小哥哥們進行技術研發問題和設計圖紙的討論，最終確定了項目的具體實施方案，具體實現方案介紹如下。
項目設計稿
設計小姐姐根據他們的工藝流程圖，設計出幾副圖紙，經過幾次交涉後，最終圖紙大概這個樣子，如下圖：
項目研發
該編輯可視化管理軟件是基於公司自主研發的3D引擎基礎上進行的開發，省去了開發上的很多難題，大大縮短了開發週期。該編輯器不僅支持圖元模型的定製，並且擁有自己的模型庫，可以進行圖元模型的分類和管理；可集成各個圖元組件，對接圖元數據接口。圖元使用上支持圖元的拖拽編輯，鍵盤快捷捷操作，批量生成列隊，快速複製等功能，該編輯器主要分爲一下幾個區域：
1.左側爲場景左樹和組件
2.中上爲工具欄
3.中間爲畫布
4.右側爲組件屬性面板
下面大概講一下鋼鐵冶煉工藝流程編輯器的相關功能代碼實現和編輯使用的操作方法，具體介紹如下：
###LF爐除塵機
LF爐除塵機看上去是由一個正方形，中間是一個立體的圖行組成，編輯器怎麼實現哪？其實也簡單，首先從左側拖拽出一個正方形，在其屬性面板調整大小設置其填充漸變色，然後置底；中間的立體效果時如何實現的哪？拖拽幾個不同大小的正方形設置邊框，用連線連接各個正方形的對角線，然後再設置其右側的一個三角區域的填充色和透明色即可。
電爐屋頂煙氣排集罩
這個是對梯形的簡單操作，從左側拖拽一個梯形到畫布上，設置其填充屬性和填充漸變色即可，這個操作相對簡單。
電爐密閉罩
電爐密閉罩和電爐屋頂煙氣排集罩編輯一樣，就是其填充漸變色不同而已。
Consteel 電爐
Consteel電爐就是對兩個梯形的結合，拖拽一個梯形調整大小，設置其填充漸變色，然後旋轉角度，同樣的方法再複製一個梯形，然後點擊工具欄的“組合”功能即可。
**銅煙囪 **
銅煙囪 其實也是對梯形的操作，首先拖拽一個梯形調整大小，設置填充漸變色；再拖拽一個長方形調整大小，設置其填充色，然後按圖紙組合即可。
原一次二次布袋除塵器
原一次布袋除塵器和原二次布袋除塵器圖元一樣。首先從左側拖拽一個長方形調整大小，設置其漸變色；再拖拽一個三角形調整大小，設置其填充漸變色，然後點擊工具欄的“組合”功能組合即可。
變頻電機
變頻電機的編輯相對來說麻煩一些，首先拖拽一個長方形到畫布調整大小，設置填充漸變色，然後置底；然後再拖拽一個長方形到畫布調整大小，設置其填充色，然後使用ctrl+shift快捷鍵，快速複製兩列同樣大小的長方形，或者使用批量生成功能，也可以快速快速實現長方形的隊列；最後再拖拽一個正方形到畫布調整大小，設置其填充色，然後再複製一個同樣的正方形，最後組合即可。
批量生成功能
除塵風機
除塵風機相對複雜一些，首先拖拽一個圓形調整大小和邊框，圓形默認無填充；按Ctrl+Shift複製這個圓形，調整其大小，設置填充漸變色，放置在第一個圓內；然後再複製一個大圓調整大小和邊框大小、顏色放置第二個圓內；最後再拖拽一個菱形調整大小，設置邊框大小，然後再複製5個同樣的菱形，點擊“組合”功能組合即可。
廢鋼加料通道
這個圖元看上去很複雜，其實現也不難。首先拖拽一個長方形調整大小，設置其填充色；然後再拖拽一個梯形調整大小，設置其填充漸變色；再複製上邊的長方形調整大小，設置填充漸變色；最後再拖拽一個正方形調整大小，設置其填充色，複製同樣的三個正方形，按“組合”功能組合即可。
沉降池
沉降池看上去外形有點複雜，其實編輯起來也不難。首先拖拽一個三角形到畫布上調整大小，設置填充漸變色；再拖拽一個正方形調整大小，設置填充漸變色，再拖拽兩個圓形調整大小，設置邊框大小和顏色；再拖拽一個正方形調整大小，設置邊框顏色，然後複製出七個小正方形，按“組合”功能組合即可。
蒸發冷卻塔
蒸發冷卻塔從外形上看不復雜，實際編輯時比其它圖元花費的時間多。首先託拽一個圓形調整大小，設置其屬性面板的起始角度未180度，設置其填充色；再拖拽一個長方形調整大小，設置填充色置底；再拖拽一個長方形調整大小，設置填充漸變色，，再拖拽一個長方形調整大小，設置填充色置底，複製一個長方形調整大小，設置填充色，然後按“組合”功能組合即可，注意對齊問題。
連接體部分
連接體部分可以直接拖拽一個長方形調整大小，設置填充色和透明色置底；再拖拽一個圓形設置其邊大小和顏色，再按Ctrl+Shist複製一個同樣的圓形；然後再拖拽一個長方形調整大小，設置填充色，再複製一個同樣的長方形，組合圖元即可。
連接體
連接體看着圖元數量很多很複雜，其實我們通過批量生成的功能，實現也很容易。首先我們拖拽兩個長方形到畫布上調整各自大小，設置其填充色，將棕色長方形置底 組合好一個基礎圖元，然後再使用批量生成功能設置隊列形狀即可，該方法方便快捷。
箭頭直接拖拽一個三角形調整大小，設置其填充色即可。
最終編輯實現效果如下：
