最近項(xiàng)目中有一個需求宜雀，實(shí)現(xiàn)可配置的流程圖切平。做之前也是調(diào)研了很多現(xiàn)成的插件，比如：go.js辐董，G6悴品，JSPlumb等，但是都不是太符合業(yè)務(wù)場景简烘，都需要看文檔苔严，進(jìn)行二次開發(fā)。最后決定還是自行開發(fā)吧孤澎，現(xiàn)在還沒有開發(fā)完届氢，這篇文章也當(dāng)做是一個記錄吧
先上圖，看一下現(xiàn)在的效果覆旭。
因?yàn)閭饕曨l要沖會員退子，所以沒有上傳視頻（太窮了。型将。寂祥。。）
根據(jù)后端返回的數(shù)據(jù)展示流程圖七兜，并且點(diǎn)擊加號可以新增串行或并行的構(gòu)建節(jié)點(diǎn)丸凭，同樣，可以刪除對應(yīng)的節(jié)點(diǎn)及子任務(wù)
接下來惊搏，我會說一下我實(shí)現(xiàn)這個效果的思路
1.我們的數(shù)據(jù)格式是JenkinsFile贮乳，可以自行百度一下
2.接下來就是數(shù)據(jù)的循環(huán)，div+css寫出對應(yīng)的樣式
以上圖為例：紅色區(qū)域內(nèi)為前端寫死的恬惯，中間的數(shù)據(jù)是由后端返回的數(shù)據(jù)渲染出來的向拆。所以我們要找出同樣的內(nèi)容作為一個div，并將它進(jìn)行循環(huán)酪耳，上圖中我把藍(lán)色區(qū)域作為一個div浓恳，其中的
1.箭頭和橢圓形的節(jié)點(diǎn)分別是icon和一個div組成的
2.利用偽類元素:before,:after寫出前后面的兩根線
3.通過判斷下標(biāo)刹缝，決定是否兩個元素中間需要連線，途中黑色區(qū)域的線是通過svg來實(shí)現(xiàn)
以上就是當(dāng)前效果的一個實(shí)現(xiàn)思路颈将，后續(xù)會不斷更新梢夯。
