raphael流程图html, fieldet, legend, div, span, a, form, body{ margin: 0;padding: 0; }
body{ font-size:12px;}
#content{
position:relative;
height:100%;
font-family: "Microsoft YaHei" ! important;
}
#holder{top: 0px;left: 0px;right: 0px;bottom: 0px; position: absolute;z-index: 12;height:100%;border:#CCC 1px solid;}
.item{
position: absolute; top: 0px; z-index: 99; padding: 0px; height: 80px; width: 180px;
}
.startend{
text-align:left;
}
.startEndTitle{
text-align:center;
}
.itemb{
position: absolute; top: 0px; z-index: 9; padding: 0px; height: 20px; width: 160px;
font-weight:bold;
}
.titletxt{
}
节点名称:
上一节点:
操作任务:审批知会
下一节点:
添加节点
清空节点
加载节点
var mainNode="";
var currMaxIndex=3;
var data=JSON.parse("["+
"{\"nodeid\":1,\"title\":\"流程发起\",\"nextnode\":\"2\",\"x\":20,\"y\":100,\"action\":1,\"actionname\":\"发起\",\"type\":1,\"group\":2},"+
"{\"nodeid\":2,\"title\":\"审批\",\"nextnode\":\"3\",\"x\":320,\"y\":100,\"action\":2,\"actionname\":\"审批\",\"type\":2,\"group\":1},"+
"{\"nodeid\":3,\"title\":\"归档\",\"nextnode\":\"\",\"x\":620,\"y\":100,\"action\":3,\"actionname\":\"归档\",\"type\":2,\"group\":3}]");
initData();
//初始化选项
function initData(){
$("#sel_upNode").empty();
$("#sel_nextNode").empty();
for(var i=0;i
//if(data[i].nodeid!=3)
$("#sel_upNode").append(""+data[i].nodeid+":"+data[i].title+"");
if(data[i].nodeid!=1)
$("#sel_nextNode").append(""+data[i].nodeid+":"+data[i].title+"");
}
}
//清空
function clertNode(){
$("#content").html("
}
//刷新节点
function refNode(){
var holder="
var html="";
var classStr="";
for(var i=0;i
classStr="";
if(data[i].nodeid==1||data[i].nodeid==3){
classStr="startEndTitle";
}
html+="
html+="
html+="方式:";
for(var j=1;j<4;j++){
html+=""+j+"按角色";//按角色按职能指定人员
}
html+="
";
html+="分组:";
for(var j=1;j<4;j++){
html+=""+j+"销售经理";//销售经理销售总监
}
html+="";
"";
html+="
}
initData();
$("#content").html(holder+html);
start();
}
//选项改变事件
function selChangeGroup(nodeid,obj){
for(var i=0;i
if(data[i].nodeid==nodeid){
data[i].group=$(obj).val();
}
}
}
function selChangeType(nodeid,obj){
for(var i=0;i
if(data[i].nodeid==nodeid){
data[i].type=$(obj).val();
}
}
}
function addNode(){
currMaxIndex++;
var nextNodeId="";
if($("#sel_action").val()==1){
nextNodeId=$("#sel_nextNode").val();
}
data.push(JSON.parse("{\"nodeid\":"+currMaxIndex+",\"title\":\""+$("#txt_nodeName").val()+"\",\"nextnode\":\""+nextNodeId+"\",\"x\":320,\"y\":220,\"action\":"+$("#sel_action").val()+",\"actionname\":\""+$("#sel_action").find("option:selected").text()+"\",\"type\":1,\"group\":1}"));
//修改上级节点的nextNode值
var upNodeId=$("#sel_upNode").val();
for(var i=0;i
if(data[i].nodeid==upNodeId){
data[i].nextnode+=","+currMaxIndex;
}
}
refNode();
}
refNode();
//修改原始坐标值
function setXY(p_id,p_x,p_y){
for(var i=0;i
if(data[i].nodeid==p_id){
data[i].x=p_x;
data[i].y=p_y;
}
}
}
var inDiv_x=10;//节点div的位置调整
var inDiv_y=0;//节点div的位置调整
var con_h=25;//标题div与内容div的y差值
var body_y=60;//整体上边距
function start(){
$(function () {
//$("#holder").html("");
//用来存储节点的顺序
var connections = [];
//用来存放节点数据
var arr = [];
//拖动节点开始时的事件
var dragger = function () {
this.ox = this.attr("x");
this.oy = this.attr("y");
this.animate({ "fill-opacity": 0.2 }, 500);
};
//拖动事件
var move = function (dx, dy) {
var att = { x: this.ox + dx, y: this.oy + dy };
this.attr(att);
setXY(this.id,att.x, att.y);
$("#item" + this.id).offset({ top: this.oy + dy +body_y+inDiv_y+con_h, left: this.ox + dx+inDiv_x });
$("#item" + this.id+"t").offset({ top: this.oy + dy +body_y+inDiv_y, left: this.ox + dx +inDiv_x });
for (var i = connections.length; i--;) { r.drawArr(connections[i]); }
};
//拖动结束后的事件
var up = function () { this.animate({ "fill-opacity": 0 }, 500); };
//创建绘图对象
var r = Raphael("holder", $(window).width(), $(window).height());
//定义元素坐标高宽
var $nodeList = $(".item"); //节点集合jquery对象
//console.log($nodeList)
//var $nodeList1 = $(".itemb");
var _x, _y, _w, _h, shapeLen;
shapeLen = $nodeList.length; //节点数量
_x = 190; _y = 100; _h = 60; _w = 40;
var shapes = new Object(); //节点集合
$nodeList.each(function (index, item) {
_w = $(item).width()+20; //元素的宽
_h = $(item).height()+20; //元素的高
//var r_y = (_h + 100) * index + 20;
var r_x= (_w + 50) * index + 20;
//节点json数据
var data_item = $.parseJSON($(item).attr("data-item"));
//控制节点的形状nextNode\
if((data_item.nodeId=="1")||data_item.nodeId=="3"){
shapes[data_item.nodeId] = r.rect(data_item.x, data_item.y, _w, _h, 100);
}else if((data_item.nodeId!="1")&&(data_item.nodeId!="3")&&(data_item.nextNode=="")){
shapes[data_item.nodeId] = r.rect(data_item.x, data_item.y, _w, _h, 30);
}else{
shapes[data_item.nodeId] = r.rect(data_item.x, data_item.y, _w, _h, 4);
}
//div 坐标
//$(item).offset({ top: _y + 30+com_y, left: r_x + 10 });
$(item).offset({ top: data_item.y+body_y+inDiv_y+con_h, left: data_item.x+inDiv_x});
$("#item" + data_item.nodeId+"t").offset({ top: data_item.y+body_y+inDiv_y, left: data_item.x+inDiv_x });
//$(item).offset({ top: r_y + 6, left: _x + 10 });
//为节点添加样式和事件,并且绘制节点之间的箭头
var color = Raphael.getColor();
shapes[data_item.nodeId].attr({ fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 3, cursor: "move" });
shapes[data_item.nodeId].id = data_item.nodeId;
shapes[data_item.nodeId].drag(move, dragger, up); //拖动节点事件
shapes[data_item.nodeId].attr("title", item.title);
shapes[data_item.nodeId].dblclick(function(){
if(data_item.nodeId==1||data_item.nodeId==3||data.length==3){
return;
}
//删除节点
for(var i=0;i
if(data[i].nodeid==data_item.nodeId){
data.splice(i,1);
//删除上级节点关联的nextNode
for(var k=0;k
var arr=data[k].nextnode.split(',');
var newArr="";
//历遍nextNode,过滤删除的节点id
for(var j=0;j
if(arr[j]!=data_item.nodeId){
if(newArr!=""){
newArr+=",";
}
newArr+=arr[j];
}
}
data[k].nextnode=newArr;
}
}
}
refNode();
//alert(data_item.nodeId);
/*
layer.open({
type: 1,
title: ['增加节点'],
shadeClose: true,
shade: 0.01,
maxmin: true, //开启最大化最小化按钮
area: ['300px', '200px'],
content: "
节点标题 | |
下一个节点 | |
是否要输入框 | 是否 |
是否要选择框 | 是否 |
btn: ['确定', '取消'],
yes: function(index, layero){
var itemb = "itemb"+(parseInt($("option:last").val().replace(/[^0-9]/ig, ""))+1);
var item = 'item'+(parseInt($("option:last").val().replace(/[^0-9]/ig, ""))+1);
var id = parseInt($("option:last").val().replace(/[^0-9]/ig, ""))+1;
var html="
";
if($("input[name='inp']:checked").val()=="1"){
html = html+"
";
};
if($("input[name='select']:checked").val()=="1"){
html = html+"";
};
html =html+"
$(".content").append(html);
layer.close(index);
my(itemb,item,id,arr,_y,shapes,r,connections);
}
});
var html=""
for(var i=0;i
html += ""+arr[i].text()+""
};
$(".sel").html(html);
*/
})
});
//存储节点间的顺序
$nodeList.each(function (i, item) {
//节点json数据
var data_item = $.parseJSON($(item).attr("data-item"));
if (data_item.nextNode) {
var nodeidlist=data_item.nextNode.split(",");
for(var i=0;i
connections.push(r.drawArr({ obj1: shapes[data_item.nodeId], obj2: shapes[nodeidlist[i]]}));
}
}
});
});
}
//随着节点位置的改变动态改变箭头
Raphael.fn.drawArr = function (obj) {
var point = getStartEnd(obj.obj1, obj.obj2);
var path1 = getArr(point.start.x, point.start.y, point.end.x, point.end.y, 6);
if (obj.arrPath) {
obj.arrPath.attr({ path: path1 });
} else {
obj.arrPath = this.path(path1);
}
return obj;
};
function getStartEnd(obj1, obj2) {
var bb1 = obj1.getBBox(),
bb2 = obj2.getBBox();
var p = [
{ x: bb1.x + bb1.width / 2, y: bb1.y - 1 },
{ x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1 },
{ x: bb1.x - 1, y: bb1.y + bb1.height / 2 },
{ x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2 },
{ x: bb2.x + bb2.width / 2, y: bb2.y - 1 },
{ x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1 },
{ x: bb2.x - 1, y: bb2.y + bb2.height / 2 },
{ x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2 }
];
var d = {}, dis = [];
for (var i = 0; i < 4; i++) {
for (var j = 4; j < 8; j++) {
var dx = Math.abs(p[i].x - p[j].x),
dy = Math.abs(p[i].y - p[j].y);
if (
(i == j - 4) ||
(((i != 3 && j != 6) || p[i].x < p[j].x) &&
((i != 2 && j != 7) || p[i].x > p[j].x) &&
((i != 0 && j != 5) || p[i].y > p[j].y) &&
((i != 1 && j != 4) || p[i].y < p[j].y))
) {
dis.push(dx + dy);
d[dis[dis.length - 1]] = [i, j];
}
}
}
if (dis.length == 0) {
var res = [0, 4];
} else {
res = d[Math.min.apply(Math, dis)];
}
var result = {};
result.start = {};
result.end = {};
result.start.x = p[res[0]].x;
result.start.y = p[res[0]].y;
result.end.x = p[res[1]].x;
result.end.y = p[res[1]].y;
return result;
}
//获取组成箭头的三条线段的路径
function getArr(x1, y1, x2, y2, size) {
var angle = Raphael.angle(x1, y1, x2, y2); //得到两点之间的角度
var a45 = Raphael.rad(angle - 45); //角度转换成弧度
var a45m = Raphael.rad(angle + 45);
var x2a = x2 + Math.cos(a45) * size;
var y2a = y2 + Math.sin(a45) * size;
var x2b = x2 + Math.cos(a45m) * size;
var y2b = y2 + Math.sin(a45m) * size;
//var result = ["M", x1, y1, "L", x2, y2, "L", x2a, y2a, "M", x2, y2, "L", x2b, y2b];
var result = ["M", x1, y1, "C", x1, y1, x1+40, y1+40, x2, y2, "L", x2a, y2a, "M", x2, y2, "L", x2b, y2b];
//var result = [x2a.toFixed(3),y2a.toFixed(3),x2b.toFixed(3),y2b.toFixed(3)];;
return result;
}
function my(itemb,item,id,arr,_y,shapes,r,connections){
var dragger1 = function () {
this.ox = this.attr("x");
this.oy = this.attr("y");
this.animate({ "fill-opacity": 0.2 }, 500);
};
//拖动事件
var move1 = function (dx, dy) {
var att = { x: this.ox + dx, y: this.oy + dy };
this.attr(att);
$("#item"+id ).offset({ top: this.oy + dy + 20, left: this.ox + dx+30 });
$("#itemb"+id ).offset({ top: this.oy + dy +10, left: this.ox + dx +50 });
for (var i = connections.length; i--;) { r.drawArr(connections[i]); }
};
//拖动结束后的事件
var up1 = function () { this.animate({ "fill-opacity": 0 }, 500); };
//加节点上面的div
_w1 = $("#"+itemb).width()+50; //元素的宽
_h1 = $("#"+itemb).height()+50; //元素的高
var r_x1= (_w1 ) *(id-1) + 20;
arr.push($("#"+itemb));
$("#"+itemb).offset({ top: _y + 6, left: r_x1 +60 });
//加节点后下面的div进行的处理
_w2 = $("#"+item).width()+20; //元素的宽
_h2 = $("#"+item).height()+20; //元素的高
//var r_y = (_h + 100) * index + 20;
var r_x2= (_w2 + 50) * (id-1) + 20;
var data_item1 = $.parseJSON($("#"+item).attr("data-item"));
//console.log(data_item1)
shapes[data_item1.nodeId] = r.rect(r_x2, _y, _w2, _h2, 100);
//shapes[data_item1.nodeId] = r.rect(r_x, _y, _w, _h, 4);
$("#"+item).offset({ top: _y + 30, left: r_x2 + 20 });
var color = Raphael.getColor();
shapes[data_item1.nodeId].attr({ fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 3, cursor: "move" });
//shapes[data_item1.nodeId].id = index + 1;
shapes[data_item1.nodeId].drag(move1, dragger1, up1); //拖动节点事件
shapes[data_item1.nodeId].attr("title", item.title);
shapes[data_item1.nodeId].dblclick(function(){
layer.open({
type: 1,
title: ['增加节点'],
shadeClose: true,
shade: 0.01,
maxmin: true, //开启最大化最小化按钮
area: ['300px', '200px'],
content: "
节点标题 | |
下一个节点 | |
是否要输入框 | 是否 |
是否要选择框 | 是否 |
btn: ['确定', '取消'],
yes: function(index, layero){
var itemb = "itemb"+(parseInt($("option:last").val().replace(/[^0-9]/ig, ""))+1);
var item = 'item'+(parseInt($("option:last").val().replace(/[^0-9]/ig, ""))+1);
var id = parseInt($("option:last").val().replace(/[^0-9]/ig, ""))+1;
var html="
";
if($("input[name='inp']:checked").val()=="1"){
html = html+"
";
};
if($("input[name='select']:checked").val()=="1"){
html = html+"";
};
html =html+"
$(".content").append(html);
layer.close(index);
my(itemb,item,id,arr,_y,shapes,r,connections);
}
});
var html=""
for(var i=0;i
html += ""+arr[i].text()+""
};
$(".sel").html(html);
});
connections.push(r.drawArr({ obj1: shapes[data_item1.nextNode], obj2: shapes[id] }));
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史