html游戏转wxw,wf.html · wxw婉/flowChart - Gitee.com



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+="

"+data[i].nodeid+"、"+data[i].title+"("+data[i].actionname+")

";

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="

"+$("input[name='title']").val()+"

";

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="

"+$("input[name='title']").val()+"

";

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

原始数据

按行查看

历史