<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
|
<%
|
String path = request.getContextPath();
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
|
+ path + "/";
|
%>
|
|
<!DOCTYPE HTML>
|
<html>
|
<head>
|
<base href="<%=basePath%>">
|
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>流程示意图</title>
|
<link href="static/plugins/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css"/>
|
<!--[if !IE]><!-->
|
<link href="static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
|
<!--<![endif]-->
|
<!--[if gt IE 8]>
|
<link href="static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
|
<![endif]-->
|
|
<script src='static/plugins/jquery/jquery.min.js'></script>
|
<script src='static/plugins/jquery-easyui/jquery.easyui.min.js'></script>
|
<script src='static/plugins/jquery-easyui/locale/easyui-lang-zh_CN.js'></script>
|
<script src='static/plugins/raphael.js'></script>
|
|
<style>
|
html, body, h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, form, input,
|
textarea, select, table, th, td, pre {
|
margin: 0px;
|
padding: 0px;
|
}
|
|
body {
|
font-size: 12px;
|
font-family: "SimSun";
|
}
|
|
i, em {
|
font-style: normal;
|
}
|
|
li {
|
list-style: none;
|
}
|
|
a {
|
text-decoration: none;
|
color: #333;
|
}
|
|
img {
|
border: none;
|
vertical-align: top;
|
}
|
|
table {
|
border-collapse: collapse;
|
}
|
|
textarea {
|
resize: none;
|
overflow: auto;
|
}
|
|
.hide {
|
display: none;
|
}
|
|
*:focus {
|
outline: none;
|
}
|
|
.clear {
|
*zoom: 1;
|
}
|
|
.clear:after {
|
content: "";
|
display: block;
|
clear: both;
|
}
|
|
input[type=radio], input[type=checkbox] {
|
vertical-align: middle;
|
}
|
|
html, body {
|
height: 100%;
|
}
|
|
.designtop {
|
/* background: #3c8dbd url(images/topbg.jpg) center top no-repeat; */
|
background: #fff;
|
height: 46px;
|
line-height: 46px;
|
/* box-shadow: 0px 3px 6px #bfbfbf; */
|
padding: 0 10px;
|
}
|
|
.designtop .designname {
|
float: left;
|
color: #fff;
|
font-size: 14px;
|
font-weight: bold;
|
background: url(images/icon.png) left center no-repeat;
|
padding-left: 20px;
|
}
|
|
.tool {
|
position: fixed;
|
width: 124px;
|
left: 10px;
|
top: 20px;
|
background: #222c32;
|
z-index: 10;
|
color: #fff;
|
padding: 4px 12px 8px 12px;
|
}
|
|
.tool h5 {
|
font-size: 14px;
|
text-align: center;
|
line-height: 40px;
|
height: 40px;
|
border-bottom: 1px solid #464e53;
|
margin-bottom: 12px;
|
}
|
|
.list {
|
position: relative;
|
}
|
|
.green {
|
background: #017501;
|
display: inline-block;
|
width: 16px;
|
height: 16px;
|
border: 2px solid #fff;
|
}
|
|
.blue {
|
background: #2632aa;
|
display: inline-block;
|
width: 16px;
|
height: 16px;
|
border: 2px solid #fff;
|
}
|
|
.gray {
|
background: #acacac;
|
display: inline-block;
|
width: 16px;
|
height: 16px;
|
border: 2px solid #fff;
|
}
|
|
.item {
|
height: 36px;
|
line-height: 36px;
|
font-size: 14px;
|
cursor: pointer;
|
width: 94px;
|
padding-left: 6px;
|
background: #222c32;
|
}
|
|
.item i {
|
display: inline-block;
|
width: 14px;
|
height: 14px;
|
margin-right: 6px;
|
vertical-align: -2px;
|
}
|
|
.show {
|
position: absolute;
|
z-index: 9999;
|
border: 1px solid #c5c5c5;
|
border-radius: 6px;
|
background: #fafafa;
|
width: 400px;
|
overflow: auto;
|
}
|
|
.show .title {
|
background: #222c32;
|
color: #fff;
|
font-size: 12px;
|
font-weight: bold;
|
border-top-left-radius: 6px;
|
border-top-right-radius: 6px;
|
height: 30px;
|
line-height: 30px;
|
font-size: 12px;
|
text-align: center;
|
}
|
|
.show .con {
|
padding: 6px 14px;
|
overflow: auto;
|
}
|
|
.show h4 {
|
font-size: 12px;
|
font-weight: bold;
|
line-height: 30px;
|
}
|
|
.show .zhengzai {
|
color: #017501;
|
}
|
|
.show .yi {
|
color: #2632aa;
|
}
|
|
.show p {
|
line-height: 26px;
|
}
|
|
.show p strong {
|
color: #666;
|
}
|
|
.show p span {
|
margin: 0 8px 0px 4px;
|
color: #4ea4d7;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="designbox" style="position: relative; height:100%;">
|
<div class="designtop">
|
<h4 class="designname">${flowDefinition.flowName }-显示区</h4>
|
</div>
|
<div class="tool">
|
<h5>流程说明</h5>
|
<ul class="list">
|
<li class="item" id="start">
|
<i class="blue"></i>
|
已办理
|
</li>
|
<li class="item" id="userTask">
|
<i class="green"></i>
|
正在办理
|
</li>
|
<li class="item" id="exclusiveGateway">
|
<i class="gray"></i>
|
未办理
|
</li>
|
</ul>
|
</div>
|
<div id="containerWrap">
|
<div id="container" style="background:#fff;"></div>
|
</div>
|
|
</div>
|
<input type="hidden" id="hide_node" value=""/>
|
<script src="static/scripts/workflow/config.js"></script>
|
<script src='static/scripts/workflow/flowDesigner.js'></script>
|
</body>
|
<script>
|
var flowDesigner = null;
|
|
|
$(function () {
|
var pheight = $(window).height() - 46;
|
var pwidth = $(window).width();
|
|
//当第一次加载时，没有画布大小的时候
|
if (pheight >= 549) { //549
|
pheight = 500; //549
|
}
|
if (pwidth >= 1366) { //1366
|
pwidth = 1200;//1366
|
}
|
|
flowDesigner = new FlowDesigner({"id": "container", "height": pheight - 3, "width": pwidth});
|
flowDesigner._DEFALUTS_.mode = "view";
|
|
flowLoad();
|
})
|
|
|
//加载已有的flow
|
function flowLoad() {
|
//实际走的流程的json 注意输出的意见中不能带有回车换行的字符，这个地方需要在输出的时候就已经格式化过了。
|
var activityList = ${activityList};
|
|
//流程定义JSON
|
var flow = ${flowDefinition.definitionJson};
|
|
|
//0. 删除界面上的所有元素，画布大小设置，画布名称设置
|
flowDesigner.clear2();
|
var width = flow.width;
|
var height = flow.height;
|
flowDesigner.paper.setSize(width, height);
|
$("#" + flowDesigner._DEFALUTS_.id).css({
|
"height": height,
|
"width": width
|
});
|
|
//0.1 匹配节点
|
var isPipei = false;
|
$.each(flow.shapes, function (index, elem) {
|
isPipei = false;
|
$.each(activityList, function (i, el) {
|
|
if (el.nodeId == elem.id) {
|
//添加属性
|
elem.completeState = el.completeState;
|
elem.content["activityUsers"] = el.activityUsers;
|
elem.content["waitActivityUsers"] = el.waitActivityUsers || [];
|
isPipei = true;
|
}
|
})
|
|
if (isPipei == false) {
|
elem.completeState = 3;
|
}
|
|
})
|
|
//1.循环建立节点和线段
|
$.each(flow.shapes, function (index, elem) {
|
switch (elem.type) {
|
case "start":
|
var start = flowDesigner.addElement({
|
"type": "start",
|
"cx": elem.cx,
|
"cy": elem.cy,
|
"r": 15,
|
"id": elem.id,
|
"isLoad": true,
|
"text": elem.text,
|
"parentElem": elem.parentElem,
|
"completeState": elem.completeState
|
});
|
start.content = elem.content || {};
|
|
break;
|
case "userTask":
|
var userTask = flowDesigner.addElement({
|
"type": "userTask",
|
"x": elem.x,
|
"y": elem.y,
|
"w": elem.w,
|
"h": elem.h,
|
"id": elem.id,
|
"isLoad": true,
|
"text": elem.text,
|
"parentElem": elem.parentElem,
|
"completeState": elem.completeState
|
});
|
userTask.content = elem.content || {};
|
break;
|
case "gateway":
|
var gateway = flowDesigner.addElement({
|
"type": "gateway",
|
"detail": elem.detail,
|
"cx": elem.cx,
|
"cy": elem.cy,
|
"r": 21,
|
"id": elem.id,
|
"isLoad": true,
|
"text": elem.text,
|
"parentElem": elem.parentElem,
|
"completeState": elem.completeState
|
});
|
gateway.content = elem.content || {};
|
break;
|
case "subProcess":
|
var subProcess = flowDesigner.addElement({
|
"type": "subProcess",
|
"x": elem.x,
|
"y": elem.y,
|
"w": elem.w,
|
"h": elem.h,
|
"id": elem.id,
|
"isLoad": true,
|
"text": elem.text,
|
"completeState": elem.completeState
|
});
|
subProcess.content = elem.content || {};
|
break;
|
case "end":
|
var end = flowDesigner.addElement({
|
"type": "end",
|
"cx": elem.cx,
|
"cy": elem.cy,
|
"r": 15,
|
"id": elem.id,
|
"isLoad": true,
|
"text": elem.text,
|
"parentElem": elem.parentElem,
|
"completeState": elem.completeState
|
});
|
end.content = elem.content || {};
|
break;
|
case "line": //前提是节点必须先完成,并且能把节点上的线也添加好
|
var startNode = flowDesigner.FindElementById(elem.nodestart);
|
var endNode = flowDesigner.FindElementById(elem.nodeend);
|
var linetype = 0;
|
if (elem.content && elem.content.nodeType) {
|
linetype = elem.content.nodeType;
|
}
|
var line = flowDesigner.addElement({
|
"type": "line",
|
"nodestart": startNode,
|
"nodeend": endNode,
|
"x1": elem.x1,
|
"y1": elem.y1,
|
"x2": elem.x2,
|
"y2": elem.y2,
|
"id": elem.id,
|
"isLoad": true,
|
"text": elem.text,
|
"linestr": elem.linestr,
|
"self": elem.self,
|
"linetype": linetype
|
});
|
line.content = elem.content || {};
|
break;
|
}
|
})
|
|
//2.循环节点添加父节点的实例,父节点添加子节点
|
$.each(flowDesigner.allnodes, function (index, elem) {
|
switch (elem.type) {
|
case "start":
|
case "userTask":
|
case "end":
|
if (elem.parentElemStr) {
|
var parentNode = flowDesigner.FindElementById(elem.parentElemStr);
|
elem.parentElem = parentNode;
|
parentNode.subElement.push(elem);
|
}
|
break;
|
}
|
})
|
|
//去掉加载后所有元素的选中状态
|
flowDesigner.allUnSelect();
|
|
}
|
</script>
|
</html>
|
