gojs 绘制流程图
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>诉讼流程</title>
<link href="${ctxStatic}/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${ctxStatic}/plugins/jquery-3.2.1.min.js"></script>
<script src="${ctxStatic}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link href="${ctxStatic}/modules/front/liucheng/css/jquery.orgchart.css?s=1" rel="stylesheet">
<link href="${ctxStatic}/modules/front/liucheng/css/liucheng.css?s=1" rel="stylesheet">
<script src="${ctxStatic}/modules/front/liucheng/js/jquery.orgchart.js?s=1"></script>
<script src="${ctxStatic}/modules/front/liucheng/js/objchart.js?s=1"></script>
<style>
body{
background-image: url('${ctxStatic}/modules/front/index/image/bg.jpg');
background-repeat:no-repeat;
background-position-x: center;
background-position-y: center;
background-size: 100% 100%;
background-attachment:fixed;
-moz-background-size: 100% 100%;
}
.page-content{
min-height: 768px;
}
.page-header{
border-bottom:0px !important;
}
.page-header h1{
color:#fff;
}
</style>
</head>
<body>
<div class="main-content">
<div class="page-content">
<a id="fanhui" onclick="javascript :history.go(-1);" class="pull-left btn btn-lg btn-info" >返回</a>
<div class="page-header">
<h1 class="text-center">诉讼流程</h1>
</div>
<div class="row row-from">
<div class="col-xs-12">
<%--<img class="img-responsive center-block" src="${ctxStatic}/modules/front/liucheng/image/liucheng.png" >--%>
<!-- flowchart start -->
<div id="chart-container" class="chart-container" style="width:100%; min-height:768px;"></div>
<!-- flowchart end -->
</div>
</div>
</div>
</div><!-- /.main-content -->
</body>
</html>
<script id="code">
var zIndex=1;
var svgchart = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
svgchart(go.Diagram, "chart-container", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
allowDrop: false,
"animationManager.duration": 800,
"LinkDrawn": showLinkLabel, // this DiagramEvent listener is defined below
"LinkRelinked": showLinkLabel
});
var Select_Port = null;
var nodeData = null;
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
Select_Port = e.subject.part;
console.log(Select_Port);
nodeData = e.subject.part.data;//即获取到的data
console.log(nodeData);
});
// helper definitions for node templates
function nodeStyle() {
return [
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
locationSpot: go.Spot.Center,
//isShadowed: true,
//shadowColor: "#888",
mouseEnter: function (e, obj) { },
mouseLeave: function (e, obj) { }
}
];
}
//自定义样式
function nodeStyleG() {
return [
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
locationSpot: go.Spot.Center,
click: function(e, node) { showConnections(node); },
//isShadowed: true,
//shadowColor: "#888",
mouseEnter: function (e, obj) { },
mouseLeave: function (e, obj) { }
}
];
}
// define the Node templates for regular nodes
var lightText = 'whitesmoke';
//内容节点
myDiagram.nodeTemplateMap.add("", // the default category
svgchart(go.Node, "Spot", nodeStyleG(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
svgchart(go.Panel, "Auto",
svgchart(go.Shape, "Rectangle",
{ fill: "#4B87CB", stroke: null},
// new go.Binding("figure", "figure"),
new go.Binding("fill", "isHighlighted", function(h) { return h ? "#01a9c9" : "#4B87CB"; }).ofObject(),
new go.Binding("stroke", "isHighlighted", function(h) { return h ? "#01a9c9" : "#4B87CB"; }).ofObject()
),
svgchart(go.TextBlock,
{
font: "bold 11pt Helvetica, Arial, sans-serif",
stroke: lightText,
margin: 8,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
},
new go.Binding("text").makeTwoWay())
)
));
//开始节点
myDiagram.nodeTemplateMap.add("Start",
svgchart(go.Node, "Spot", nodeStyle(),
svgchart(go.Panel, "Auto",
svgchart(go.Shape, "Circle",
{ minSize: new go.Size(40, 40), fill: "#79C900", stroke: null }),
svgchart(go.TextBlock, "Start",
{ font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
new go.Binding("text"))
)
));
//结束节点
myDiagram.nodeTemplateMap.add("End",
svgchart(go.Node, "Spot", nodeStyle(),
svgchart(go.Panel, "Auto",
svgchart(go.Shape, "Circle",
{ minSize: new go.Size(40, 40), fill: "#DC3C00", stroke: null }),
svgchart(go.TextBlock, "End",
{ font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
new go.Binding("text"))
)
));
//备注框
myDiagram.nodeTemplateMap.add("Comment",
svgchart(go.Node, "Auto", nodeStyle(),
svgchart(go.Shape, "File",
{ fill: "#EFFAB4", stroke: null }),
svgchart(go.TextBlock,
{
margin: 5,
maxSize: new go.Size(200, NaN),
wrap: go.TextBlock.WrapFit,
textAlign: "center",
font: "bold 12pt Helvetica, Arial, sans-serif",
stroke: '#454545'
},
new go.Binding("text").makeTwoWay())
// no ports, because no links are allowed to connect with a comment
));
var forelayer = myDiagram.findLayer("Foreground");
myDiagram.addLayerBefore(svgchart(go.Layer, { name: "blue" }), forelayer);
myDiagram.addLayerBefore(svgchart(go.Layer, { name: "green" }), forelayer);
myDiagram.addLayerBefore(svgchart(go.Layer, { name: "orange" }), forelayer);
// 线条
myDiagram.linkTemplate =
svgchart(go.Link, // the whole link panel
{
routing: go.Link.AvoidsNodes,
//routing: go.Link.Orthogonal,
curve: go.Link.JumpOver,
//curve: go.Link.JumpGap,
//corner: 5,
zOrder: zIndex,
toShortLength: 4
//relinkableFrom: true,
//relinkableTo: true,
//reshapable: true,
//resegmentable: true,
// mouse-overs subtly highlight links:
//mouseEnter: function(e, link) { link.findObject("HIGHLIGHT").stroke = "red"; },
//mouseLeave: function(e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; }
},
new go.Binding("points").makeTwoWay(),
new go.Binding("layerName", "color"),
new go.Binding("zOrder"),
svgchart(go.Shape, // the highlight shape, normally transparent
{ isPanelMain: true, strokeWidth: 5, stroke: "transparent", name: "HIGHLIGHT" }),
svgchart(go.Shape, // 线
{ isPanelMain: true, stroke: "#fff", strokeWidth: 2},
new go.Binding("stroke", "isHighlighted", function(h) { return h ? "red" : "#fff"; }).ofObject(),
new go.Binding("strokeWidth", "isHighlighted", function(h) { return h ? 5 : 2; }).ofObject()
),
svgchart(go.Shape, // 箭头
{ toArrow: "standard", stroke: "#fff", fill: "#fff"},
new go.Binding("stroke", "isHighlighted", function(h) { return h ? "red" : "#fff"; }).ofObject(),
new go.Binding("fill", "isHighlighted", function(h) { return h ? "red" : "#fff"; }).ofObject()
),
{
selectionChanged: function(p) {
p.layerName = (p.isSelected ? "Foreground" : p.data.color);
},
layerChanged: function(p, oldLayer, newLayer) {
if (newLayer !== null) p.elt(1).text = newLayer.name;
}
},
svgchart(go.Panel, "Auto", // the link label, normally not visible
{ visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5},
new go.Binding("visible", "visible").makeTwoWay(),
svgchart(go.Shape, "RoundedRectangle", // the label shape
{ fill: "#F8F8F8", stroke: null }),
svgchart(go.TextBlock, "Yes", // the label
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#333333"
},
new go.Binding("text").makeTwoWay())
)
);
//
// define this function so that the checkbox event handlers can call it
toggleVisible = function(layername, e) {
myDiagram.startTransaction('toggle ' + layername);
var layer = diagram.findLayer(layername);
if (layer !== null) layer.visible = e.currentTarget.checked;
myDiagram.commitTransaction('toggle ' + layername);
};
//z-index
function changeZOrder(amt, obj) {
var data = obj.part.data;
myDiagram.startTransaction('modified zOrder');
myDiagram.model.setDataProperty(data, "zOrder", data.zOrder + amt);
myDiagram.commitTransaction('modified zOrder');
}
//突出显示
// highlight all Links and Nodes coming out of a given Node
function showConnections(node) {
var diagram = node.diagram;
myDiagram.startTransaction("highlight");
// remove any previous highlighting
myDiagram.clearHighlighteds();
// for each Link coming out of the Node, set Link.isHighlighted
//node.findLinksInto().each(function(l) { l.isHighlighted = true; });
// for each Node destination for the Node, set Node.isHighlighted
//node.findNodesInto().each(function(n) { n.isHighlighted = true; });
// this.Document.Layers.Top.Add（this）;
// base.OnGotSelection（选择）;
// node.findLinksConnected().each(function(l) { l.zOrder=zIndex; });
zIndex=zIndex+1;
node.findTreeParentChain().each(function(n) { n.isHighlighted = true;n.zOrder=zIndex;console.log(n.zOrder);});
//console.log(node);
//console.log(node.findTreeParentNode());
// node.isHighlighted = true;
// node.findLinksInto().each(function(l) { l.isHighlighted = true; });
// var parentNode = node;
// while (true){
// parentNode = parentNode.findTreeParentNode();
// if(parentNode){
// parentNode.isHighlighted = true;
// parentNode.findLinksInto().each(function(l) { l.isHighlighted = true; });
// //parentNode.findLinksOutOf().each(function(l) { l.isHighlighted = true; });
// }else{
// break;
// }
// }
diagram.commitTransaction("highlight");
}
// when the user clicks on the background of the Diagram, remove all highlighting
myDiagram.click = function(e) {
myDiagram.startTransaction("no highlighteds");
myDiagram.clearHighlighteds();
myDiagram.commitTransaction("no highlighteds");
};
// Make link labels visible if coming out of a "conditional" node.
// This listener is called by the "LinkDrawn" and "LinkRelinked" DiagramEvents.
function showLinkLabel(e) {
var label = e.subject.findObject("LABEL");
if (label !== null) label.visible = (e.subject.fromNode.data.figure === "Diamond");
}
// temporary links used by LinkingTool and RelinkingTool are also orthogonal:
myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;
var jsonList = { "class": "go.GraphLinksModel",
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"nodeDataArray": [
{"key":0, "loc":"-233.00000000000006 199.00000000000009", "text":"符合法定条件"},
{"key":1, "loc":"175 27", "text":"当事人提交诉状和材料"},
{"key":2, "loc":"175 110", "text":"接收，出具凭证，快速分流"},
{"key":3, "loc":"175.00000000000006 201", "text":"需补正材料情形"},
{"key":4, "loc":"175 265", "text":"指导或阐明"},
{"key":5, "loc":"509.0000000000002 202", "text":"不符合法律规定"},
{"key":6, "loc":"63.00000000000007 354.0000000000003", "text":"当场补正"},
{"key":7, "loc":"267 352.0000000000001", "text":"不能当场补正"},
{"key":8, "loc":"267.00000000000006 429.9999999999998", "text":"一次性书面告知"},
{"text":"指导或阐明", "key":9, "loc":"509.5 313"},
{"text":"按期补正", "key":10, "loc":"62.49999999999997 516.0000000000001"},
{"text":"未按期补正", "key":-14, "loc":"379.5 505"},
{"text":"退回诉讼或材料，或裁定/决定不予受理、不予立案", "key":-15, "loc":"509.4999999999998 663.9999999999999"},
{"text":"裁定/决定不予受理、不予立案", "key":-16, "loc":"62.5 641"},
{"text":"存疑", "key":-17, "loc":"-115.49999999999994 200"},
{"text":"法定期限决定立案", "key":-18, "loc":"-115.49999999999999 288.00000000000017"},
{"text":"尊重当事人意愿，导入诉前联调", "key":-19, "loc":"-233.49999999999994 384.00000000000006"},
{"text":"调解成功", "key":-20, "loc":"-303.4999999999998 511.0000000000002"},
{"text":"调解不成功", "key":-21, "loc":"-143.5 509.0000000000001"},
{"text":"快速登记立案", "key":-22, "loc":"-303.50000000000006 593.9999999999999"},
{"text":"制作法律文书", "key":-23, "loc":"-143.5 589.0000000000008"},
{"text":"分流到审判庭", "key":-24, "loc":"-303.5000000000001 671.9999999999997"}
],
"linkDataArray": [
{"from":1, "to":2, "fromPort":"B", "toPort":"T", "points":[175,43.43772430419922,175,53.43772430419922,175,64.5311378479004,175,64.5311378479004,175,75.62455139160156,175,85.62455139160156]},
{"from":2, "to":3, "fromPort":"B", "toPort":"T", "points":[175,134.37544860839841,175,144.37544860839841,175,159.4688621520996,175.00000000000006,159.4688621520996,175.00000000000006,174.5622756958008,175.00000000000006,184.5622756958008]},
{"from":3, "to":4, "fromPort":"B", "toPort":"T", "points":[175.00000000000006,217.43772430419924,175.00000000000006,227.43772430419924,175.00000000000006,233,175,233,175,238.5622756958008,175,248.5622756958008]},
{"from":4, "to":6, "fromPort":"B", "toPort":"T", "points":[175,281.4377243041992,175,291.4377243041992,175,309.5,63.00000000000003,309.5,63.00000000000003,327.5622756958008,63.00000000000003,337.5622756958008]},
{"from":7, "to":8, "fromPort":"B", "toPort":"T", "points":[267,368.4377243041993,267,378.4377243041993,267,390.99999999999994,267.00000000000006,390.99999999999994,267.00000000000006,403.56227569580057,267.00000000000006,413.56227569580057]},
{"from":2, "to":5, "fromPort":"B", "toPort":"T", "points":[175,134.37544860839841,175,144.37544860839841,175,159.9688621520996,509.0000000000002,159.9688621520996,509.0000000000002,175.5622756958008,509.0000000000002,185.5622756958008]},
{"from":5, "to":9, "fromPort":"B", "toPort":"T", "points":[509.0000000000002,218.43772430419924,509.0000000000002,228.43772430419924,509.0000000000002,257.5,509.5,257.5,509.5,286.5622756958008,509.5,296.5622756958008]},
{"from":4, "to":7, "fromPort":"B", "toPort":"T", "points":[175,281.4377243041992,175,291.4377243041992,175,308.50000000000006,267,308.50000000000006,267,325.5622756958009,267,335.5622756958009]},
{"from":8, "to":10, "fromPort":"B", "toPort":"T", "points":[267.00000000000006,446.437724304199,267.00000000000006,456.437724304199,267.00000000000006,472.99999999999983,62.5,472.99999999999983,62.5,489.5622756958007,62.5,499.5622756958007]},
{"from":8, "to":-14, "fromPort":"R", "toPort":"T", "points":[326.80995941162115,429.9999999999998,336.80995941162115,429.9999999999998,379.5,429.9999999999998,379.5,454.28113784790025,379.5,478.56227569580074,379.5,488.56227569580074]},
{"from":9, "to":-15, "fromPort":"B", "toPort":"T", "points":[509.5,329.4377243041992,509.5,339.4377243041992,509.5,480.56227569580074,509.5,480.56227569580074,509.5,621.6868270874023,509.5,631.6868270874023]},
{"from":-14, "to":-15, "fromPort":"B", "toPort":"T", "points":[379.5,521.4377243041993,379.5,531.4377243041993,379.5,576.5622756958007,509.5,576.5622756958007,509.5,621.6868270874023,509.5,631.6868270874023]},
{"from":10, "to":-16, "fromPort":"B", "toPort":"T", "points":[62.5,532.4377243041992,62.5,542.4377243041992,62.5,574.5311378479004,62.5,574.5311378479004,62.5,606.6245513916016,62.5,616.6245513916016]},
{"from":2, "to":-17, "fromPort":"L", "toPort":"T", "points":[93.20005798339844,110,83.20005798339844,110,-115.5,110,-115.5,141.7811378479004,-115.5,173.5622756958008,-115.5,183.5622756958008]},
{"from":2, "to":0, "fromPort":"L", "toPort":"T", "points":[93.20005798339844,110,83.20005798339844,110,-233,110,-233,141.28113784790042,-233,172.56227569580082,-233,182.56227569580082]},
{"from":0, "to":-19, "fromPort":"B", "toPort":"T", "points":[-233,215.43772430419926,-233,225.43772430419926,-233,287.5311378479004,-233.5,287.5311378479004,-233.5,349.6245513916016,-233.5,359.6245513916016]},
{"from":-17, "to":-18, "fromPort":"B", "toPort":"T", "points":[-115.5,216.43772430419924,-115.5,226.43772430419924,-115.5,244.0000000000001,-115.5,244.0000000000001,-115.5,261.56227569580096,-115.5,271.56227569580096]},
{"from":-18, "to":-19, "fromPort":"L", "toPort":"T", "points":[-182.63995361328125,288.00000000000017,-192.63995361328125,288.00000000000017,-233.5,288.00000000000017,-233.5,318.81227569580085,-233.5,349.6245513916016,-233.5,359.6245513916016]},
{"from":-19, "to":-20, "fromPort":"B", "toPort":"T", "points":[-233.5,408.3754486083985,-233.5,418.3754486083985,-233.5,451.4688621520997,-303.4999999999999,451.4688621520997,-303.4999999999999,484.5622756958009,-303.4999999999999,494.5622756958009]},
{"from":-19, "to":-21, "fromPort":"B", "toPort":"T", "points":[-233.5,408.3754486083985,-233.5,418.3754486083985,-233.5,450.46886215209963,-143.5,450.46886215209963,-143.5,482.5622756958008,-143.5,492.5622756958008]},
{"from":-21, "to":-23, "fromPort":"B", "toPort":"T", "points":[-143.5,525.4377243041993,-143.5,535.4377243041993,-143.5,549.0000000000002,-143.5,549.0000000000002,-143.5,562.5622756958011,-143.5,572.5622756958011]},
{"from":-20, "to":-22, "fromPort":"B", "toPort":"T", "points":[-303.4999999999999,527.4377243041994,-303.4999999999999,537.4377243041994,-303.4999999999999,552.5000000000002,-303.5000000000001,552.5000000000002,-303.5000000000001,567.562275695801,-303.5000000000001,577.562275695801]},
{"from":-22, "to":-24, "fromPort":"B", "toPort":"T", "points":[-303.5000000000001,610.4377243041994,-303.5000000000001,620.4377243041994,-303.5000000000001,633.0000000000001,-303.5000000000001,633.0000000000001,-303.5000000000001,645.5622756958008,-303.5000000000001,655.5622756958008]},
{"from":10, "to":2, "fromPort":"L", "toPort":"L", "points":[24.680023193359375,515.9999999999999,14.680023193359375,515.9999999999999,14.680023193359375,110,48.940040588378906,110,83.20005798339844,110,93.20005798339844,110]},
{"from":6, "to":2, "fromPort":"L", "toPort":"L", "points":[25.180023193359403,354,15.180023193359403,354,15.180023193359403,110,49.19004058837892,110,83.20005798339844,110,93.20005798339844,110]}
]};
//7.最后就是如何给流程图填充动态数据了，这里我采用了json的方式，流程图赋值就是一句话就够了
myDiagram.model = go.Model.fromJson(jsonList);
</script>
xia
效果图：
