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