電力項目配置須要一個能夠配置的萬能流程圖,選型技術爲go.js。node
拿到需求,老大說看一下go.js, so 如今官網上找了個demo,跑通。git
而後須要的效果圖以下:.net
而後改改demo成這樣:get
接着改顏色,思路:遍歷出全部國網綠顏色的節點 依次找到節點間的連線 改變連線的屬性(顏色寬度箭頭顏色大小)。上代碼:源碼
/**
* 查找全部須要的節點
* @returns {}
*/
function findAllNodes() {
var arrStep = [];
var everyStep = null;
myDiagram.nodes.each(function(node) {
if (node.data.hasOwnProperty('category') && node.data.category === 'blueStep') {
everyStep = node;
arrStep.push(everyStep);
} else {
return false;
}
});
return arrStep;
};
/**
* 查找步驟之間的連線
* @param nodes
* @returns {Array}
*/
function findFinishedLinks(steps) {it
var arrLinks = [];io
if (!steps || steps.length < 1) return arrLinks;function
var currStep = steps[0];// 【開始】步驟配置
for (var i = 0; i < steps.length; i++) {model
var step = steps[i];
// 連線
var link = currStep.findLinksBetween(step).first();
if (!link) continue;
arrLinks.push(link);
currStep = step;
}
return arrLinks;
};
/**
* 改變全部「已完成」步驟的連線顏色
* @param links
*/
function showFinishedLinks(links) {
if (!links) return;
for (var i = 0; i < links.length; i++) {
// 連線
var link = links[i];
/* link.findObject("HIGHLIGHT").stroke = "#2DACA5";
link.findObject("myArrow").fill = "#2DACA5";
link.findObject("HIGHLIGHT").strokeWidth = 2; */
myDiagram.startTransaction("vacate");
myDiagram.model.setDataProperty(link.data, "stroke", (link.data.color ="#2DACA5"));
myDiagram.model.setDataProperty(link.data, "stroke", (link.data.stroke = "#2DACA5"));
myDiagram.model.setDataProperty(link.data, "fill", "#2DACA5");
myDiagram.model.setDataProperty(link.data, "strokeWidth", 2);
myDiagram.commitTransaction("vacate");
/* // 置於最上層,防止被遮擋
myDiagram.startTransaction('modified zOrder');
myDiagram.model.setDataProperty(link.data, "fill", "#2DACA5");
myDiagram.model.setDataProperty(link.data, "zOrder", 2);
myDiagram.commitTransaction('modified zOrder'); */
}
};
後期整理會把相關源碼上傳到git主頁,,,,