var style_ul = "padding:0px;margin:0px;border: 1px solid #ccc;background-color: #fff;position: absolute;left: 0px;top: 0px;z-index: 2;display: none;";
var style_li = "list-style:none;padding: 5px; cursor: pointer; padding: 5px 20px;margin:0px;";
var style_li_hover = style_li + "background-color: #00A0E9; color: #fff;";
var refreshGirdData;
//右键菜单容器
var menubox = $("<div class='echartboxMenu' style='" + style_ul + "'><div style='text-align:center;background:#ccc'></div><ul style='margin:0px;padding:0px;'></ul></div>").appendTo($(document.body));
// 指定图表的配置项和数据
var option = {
title: {
text: '流程示例'
},
//tooltip: {},
series: [{
type: 'graph',
layout: 'none',
label: {
show: true
},
edgeSymbol: ['circle', 'arrow'],
symbolSize: (value, params) => {
if (params.data.check) {
return 80;
} else {
return 50;
}
},
edgeLabel: {
fontSize: 20
},
data: [{
id: "start",
name: '工艺开始',
value: 30,
check: false,
x: 50,
y: 100
}],
links: [],
lineStyle: {
opacity: 0.9,
width: 3,
curveness: 0
}
}]
};
var myChart = echarts.init(document.getElementById('main'));
var bootstrap = function ($, learun) {
"use strict";
var page = {
bind: function () {
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.on("mousedown", function (e) {
if (e.event.event.button === 0) { //左键单击事件
if (e.dataType == "node") { //点击节点 显示人员角色信息
var id = e.data.id;
var nodesOption = option.series[0].data; //获得所有节点数组
var linksOption = option.series[0].links; //获得所有连接的数组
for (let index in nodesOption) {
if (nodesOption[index].id == id) {
if (nodesOption[index].check) {
nodesOption[index].check = false;
} else {
nodesOption[index].check = true;
}
}
};
myChart.setOption({
series: [{
data: nodesOption,
links: linksOption
}]
});
}
}
if (e.event.event.button === 2 && e.dataType == "node") { //右键node点击事件
if (e.data.check) {
var state = 0;
var id = e.data.id;
var tag_id;
var nodesOption = option.series[0].data; //获得所有节点数组
for (let index in nodesOption) {
if (nodesOption[index].id != id && nodesOption[index].check) {
state++;
tag_id = nodesOption[index].id;
}
};
if (state == 1) {
page.showMenu(e, [{
"name": "删除节点",
"fn": function () {
var id = e.data.id;
page.deleteNode(id);
}
}, {
"name": "添加节点",
"fn": function () {
page.addNodenew(e);
}
}, {
"name": "合并节点",
"fn": function () {
var linkobj = {
source: tag_id,
target: id,
symbolSize: [5, 20]
}
var nodesOption = option.series[0].data; //获得所有节点数组
var linksOption = option.series[0].links; //获得所有连接的数组
for (let index in nodesOption) {
if (nodesOption[index].check) {
nodesOption[index].check = false;
}
};
linksOption.push(linkobj);
refreshGirdData(nodesOption, linksOption);
//myChart.setOption({
// series: [{
// data: nodesOption,
// links: linksOption
// }]
//});
}
}, {
"name": "编辑节点",
"fn": function () {
var id = e.data.id;
page.editNode(id);
}
}]);
} else {
if (e.dataIndex === 0) {
//e中有当前节点信息
page.showMenu(e, [{
"name": "添加节点",
"fn": function () {
page.addNodenew(e);
}
}, {
"name": "编辑节点",
"fn": function () {
var id = e.data.id;
page.editNode(id);
}
}
]);
} else {
//e中有当前节点信息
page.showMenu(e, [{
"name": "删除节点",
"fn": function () {
var id = e.data.id;
page.deleteNode(id);
}
}, {
"name": "添加节点",
"fn": function () {
page.addNodenew(e);
}
}, {
"name": "编辑节点",
"fn": function () {
var id = e.data.id;
page.editNode(id);
}
}]);
}
}
} else {
if (e.dataIndex === 0) {
//e中有当前节点信息
page.showMenu(e, [{
"name": "添加节点",
"fn": function () {
page.addNodenew(e);
}
}, {
"name": "编辑节点",
"fn": function () {
var id = e.data.id;
page.editNode(id);
}
}]);
} else {
//e中有当前节点信息
page.showMenu(e, [{
"name": "删除节点",
"fn": function () {
var id = e.data.id;
page.deleteNode(id);
}
}, {
"name": "添加节点",
"fn": function () {
page.addNodenew(e);
}
}, {
"name": "编辑节点",
"fn": function () {
var id = e.data.id;
page.editNode(id);
}
}]);
}
}
}
})
//移除浏览器右键菜单
myChart.getDom().oncontextmenu = menubox[0].oncontextmenu = function () {
return false;
}
//点击其他位置隐藏菜单
$(document).click(function () {
menubox.hide()
});
},
addNodenew: function (e) {
//console.log(e)
var X = e.data.x;
var Y = e.data.y;
var start_id = e.data.id;
var end_id = page.newGuid();
var nodesOption = option.series[0].data; //获得所有节点数组
var linksOption = option.series[0].links; //获得所有连接的数组
while (true) {
var ishave = false;
for (var i = 0; i < nodesOption.length; i++) {
if (nodesOption[i].value.x == (X + 50) && Y == nodesOption[i].value.y) {
ishave = true;
}
}
if (ishave) {
Y = Y + 25;
} else {
break;
}
}
//var Max_Y=null;
//for (var i = 0; i < nodesOption.length; i++) {
// if (nodesOption[i].value.x == (X + 50) ) {
// Max_Y = nodesOption[i].value.y;
// }
//}
//if (Max_Y != null) {
// Y = Max_Y+25 ;
//}
var nodeobj = {
id: end_id,
name: '工艺',
value: { name: "工艺", x: X + 50, y: Y },
check: false,
x: X + 50,
y: Y
}
//var state = false; //判断是否并行
//for (var i = 0; i < linksOption.length; i++) {
// if (linksOption[i].source == start_id) {
// for (var j = 0; j < nodesOption.length; j++) {
// if (nodesOption[j].id == linksOption[i].target) {
// if (Y < nodesOption[j].y) {
// Y = nodesOption[j].y;
// }
// }
// }
// state = true;
// }
//}
//if (!state) {
// var ishave = false;
// for (var i = 0; i < nodesOption.length; i++) {
// if (nodesOption[i].value.x == (X + 50) && nodesOption[i].value.y == Y) {
// ishave = true;
// }
// }
// if (ishave) {
// var nodeobj = {
// id: end_id,
// name: '工艺',
// value: { name: "工艺", x: X + 50, y: Y+12 },
// check: false,
// x: X + 50,
// y: Y+12
// }
// } else {
// var nodeobj = {
// id: end_id,
// name: '工艺',
// value: { name: "工艺", x: X + 50, y: Y },
// check: false,
// x: X + 50,
// y: Y
// }
// }
//} else {
// debugger;
// var ishave = false;
// console.log("Node");
// console.log(nodesOption);
// for (var i = 0; i < nodesOption.length; i++) {
// console.log(nodesOption[i].value.x)
// console.log(X + 50)
// if (nodesOption[i].value.x == (X + 50) && nodesOption[i].value.y == (Y + 25)) {
// ishave = true;
// }
// }
// if (ishave) {
// var nodeobj = {
// id: end_id,
// name: '工艺',
// value: { name: "工艺", x: X + 50, y: Y + 12 },
// check: false,
// x: X + 50,
// y: Y + 12
// }
// } else {
// var nodeobj = {
// id: end_id,
// name: '工艺',
// value: { name: "工艺", x: X + 50, y: Y + 25 },
// check: false,
// x: X + 50,
// y: Y+25
// }
// }
//}
var linkobj = {
source: start_id,
target: end_id,
symbolSize: [5, 20],
}
nodesOption.push(nodeobj);
linksOption.push(linkobj);
refreshGirdData(nodesOption, linksOption);
//myChart.setOption({
// series: [{
// data: nodesOption,
// links: linksOption
// }]
//});
},
deleteNode: function (id) {
var nodesOption = option.series[0].data; //获得所有节点数组
var linksOption = option.series[0].links; //获得所有连接的数组
var curNode = nodesOption.find(t => t.id == id);
var curLines = linksOption.filter(t => t.source == id);
for (let index in linksOption) {
if (linksOption[index].target == id) {
linksOption.splice(index, 1);
}
};
for (let index in nodesOption) {
if (nodesOption[index].id == id) {
nodesOption.splice(index, 1);
}
};
for (let line of curLines) {
page.deleteNode(line.target)
};
refreshGirdData(nodesOption, linksOption);
//myChart.setOption({
// series: [{
// data: nodesOption,
// links: linksOption
// }]
//});
},
showMenu: function (e, menus) {
$("div", menubox).text(e.name);
var menulistbox = $("ul", menubox).empty();
$(menus).each(function (i, item) {
var li = $("<li style='" + style_li + "'>" + item.name + "</li>")
.mouseenter(function () {
$(this).attr("style", style_li_hover);
})
.mouseleave(function () {
$(this).attr("style", style_li);
})
.click(function () {
item["fn"].call(this);
menubox.hide();
});
menulistbox.append(li);
});
menubox.css({
"left": event.x,
"top": event.y
}).show();
},
newGuid: function () {
var guid = "";
for (var i = 1; i <= 32; i++) {
var n = Math.floor(Math.random() * 16.0).toString(16);
guid += n;
if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
guid += "-";
}
return guid;
},
editNode: function (id) {
learun.layerForm({
id: 'form',
title: '编辑',
url: top.$.rootUrl + '/LR_CodeDemo/FlowShow/Edit?id='+id,
width: 700,
height: 400,
callBack: function (id) {
return top[id].acceptClick(refreshGirdData);
}
});
}
};
}