170 lines
8.3 KiB
Plaintext
170 lines
8.3 KiB
Plaintext
<%@page import="com.amarsoft.app.flow.FlowAction"%>
|
||
<%@ page contentType="text/html; charset=GBK"%>
|
||
<%@page import="com.amarsoft.awe.res.JspfText"%>
|
||
<%@include file="/Frame/page/jspf/include/jsp_runtime_context.jspf"
|
||
%><%@include file="/Frame/page/jspf/include/jsp_sqlca_head.jspf"
|
||
%>
|
||
<style type="text/css" media="screen">
|
||
#holder {
|
||
border:5px; border-color:#992222;
|
||
top: 10px; left: 10px;
|
||
height: 800px; width: 1000px;
|
||
}
|
||
</style>
|
||
<script src="<%=sWebRootPath%>/Frame/resources/js/jquery/jquery.min.js" type="text/javascript" ></script>
|
||
<script src="<%=sWebRootPath%>/Frame/resources/js/chart/raphael-min.js" type="text/javascript" ></script>
|
||
<script type="text/javascript">
|
||
/* ͨ¹ý¾ØÐÎÉú³ÉÁ¬½ÓÏß */
|
||
Raphael.fn.connection = function (obj1, obj2, attr) {
|
||
var line;
|
||
if (obj1.line && obj1.from && obj1.to) { line = obj1; obj1 = line.from; obj2 = line.to; }
|
||
var bb1 = obj1.getBBox(), bb2 = obj2.getBBox(),
|
||
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}],
|
||
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 x1 = p[res[0]].x, y1 = p[res[0]].y, x4 = p[res[1]].x, y4 = p[res[1]].y;
|
||
dx = Math.max(Math.abs(x1 - x4) / 2, 10);
|
||
dy = Math.max(Math.abs(y1 - y4) / 2, 10);
|
||
var x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3), y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),
|
||
x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),
|
||
y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3);
|
||
var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
|
||
if (line && line.line) {
|
||
line.line.attr({path: path});
|
||
} else {
|
||
return {line: this.path(path).attr(attr), from: obj1, to: obj2};
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<%
|
||
String sFlowNo = CurPage.getParameter("flowNo");
|
||
String sObjectType = CurPage.getParameter("objectType");
|
||
String sObjectNo = CurPage.getParameter("objectNo");
|
||
//System.out.println(sFlowNo+" "+sObjectType+" "+sObjectNo);
|
||
|
||
FlowAction fa = new FlowAction();
|
||
fa.setObjectNo(sObjectNo); fa.setObjectType(sObjectType); fa.setFlowNo(sFlowNo);
|
||
List<StringBuffer> bufList = fa.getFlowImgBufs();
|
||
String currentPhase = fa.getPhaseNo();//×îеĴýÌá½»ÈÎÎñËùÔÚµÄÁ÷³Ì½×¶Î
|
||
StringBuffer nodesBuf = bufList.get(0), nodeTextBuf=bufList.get(1), connBuf=bufList.get(2), realPathBuf=bufList.get(3);
|
||
//System.out.println("realPathBuf***************\n"+realPathBuf);
|
||
%>
|
||
<body>
|
||
<div id="clickDiv" ><button id="btn">ʵ¼Ê·¾¶µÄ¶¯»</button></div>
|
||
<div id="holder"></div>
|
||
<div id="message" style="z-index:90; display:block; position: absolute; opacity:0.7;background-color: #bbbbbb;"></div>
|
||
</body>
|
||
|
||
<script type="text/javascript">
|
||
/*
|
||
***************ÊôÐÔ˵Ã÷*************
|
||
fill Ìî³äÉ«; fill-opacity Ìî³ä͸Ã÷¶È; stroke ÏßÌõµÄÑÕÉ«; stroke-dasharray ÏßÌõÀàÐÍ; stroke-opacity ÏßÌõ͸Ã÷¶È ; stroke-width ÏßÌõ¿í¶È
|
||
arrow-end ÏßÌõ¼ýÍ·----¼ýÍ·ÀàÐÍ classic, block, open, oval, diamond ¼ýÍ·¿í¶È: wide, narrow, medium ¼ýÍ·³¤¶È: long, short, midium
|
||
*/
|
||
var nodeAttr = {fill: "url(<%=sWebRootPath%>/Frame/page/resources/images/flow/TASK.png)", stroke:"#666", "fill-opacity": 0.8, "stroke-width": 0, cursor: "move"},/* nodeAttr Á÷³Ì½ÚµãµÄÊôÐÔ; */
|
||
connAttr = {stroke: "#aaa","stroke-width":5, fill: "none", "arrow-end":"classic-medium-midium"},/* connAttr Á÷³Ì½×¶ÎµÄÁ¬½ÓÏßµÄÊôÐÔ;*/
|
||
/*realPathAttr ʵ¼Ê·¾¶µÄÊôÐÔ;*/
|
||
realPathAttr = {stroke: "#a22","stroke-width":2,fill: "none","arrow-end":"open-medium-short","stroke-dasharray": "--","stroke-opacity":0.4},
|
||
/* curNodeAttr ×îÐÂÒ»ÌõδÌá½»µÄÈÎÎñ½ÚµãµÄÊôÐÔ; moveLineAttr ¶¯»ÖеÄÏßµÄÊôÐÔ; moveLineLen ¶¯»ÖеÄÏߵij¤¶È */
|
||
curNodeAttr = {stroke: "#a22"}, moveLineLen = 13,
|
||
moveLineAttr ={stroke: "#22a", "stroke-width": 5 },
|
||
/* speed ¶¯»µÄËÙ¶È,ĬÈÏ400px/Ãë; _easing ¶¯»µÄÌØÊâЧ¹û easeIn easeOutµÈ */
|
||
speed = 400 , _easing = "" ;
|
||
|
||
$(document).ready(function () {
|
||
var r = Raphael("holder", 1200, 800) , nodes = { <%=nodesBuf.toString()%> },
|
||
texts=[ <%=nodeTextBuf.toString()%> ], connections = {}, realPaths={};
|
||
var _dragger = function () {/* Á÷³Ì½Úµã°´ÏÂʱµÄ´¦Àí */
|
||
this.ox = this.attr("x"); this.oy = this.attr("y");
|
||
},
|
||
_move = function (dx, dy) {/* Á÷³Ì½ÚµãÍÏÒ·¹ý³ÌÖеĴ¦Àí */
|
||
var att = {x: this.ox + dx, y: this.oy + dy}; this.attr(att);
|
||
if(texts[this.id]) texts[this.id].attr({x:this.ox+dx+16,y:this.oy+dy+42});
|
||
for (var i in connections) {
|
||
if(i.indexOf(this.data("nodeID"))>-1){
|
||
connections[i].line.attr({"arrow-end":"none"});
|
||
r.connection(connections[i]);
|
||
connections[i].line.attr({"arrow-end":"classic-medium-midium"});
|
||
}
|
||
}
|
||
for(var j in realPaths){
|
||
if(j.indexOf(this.data("nodeID"))>-1) {
|
||
realPaths[j].line.attr({"arrow-end":"none"});
|
||
r.connection(realPaths[j]);
|
||
realPaths[j].line.attr({"arrow-end":"classic-medium-midium"});
|
||
for(var _i in lineArr){
|
||
if(lineArr[_i].data("myID")==j) {lineArr[_i].removeData("realPathLen");lineArr[_i].removeData("myLen");}
|
||
}
|
||
}
|
||
}
|
||
if(r.safari) r.safari();
|
||
},
|
||
_up = function () { /* Á÷³Ì½ÚµãÍÏÒ·Íê³Éºó̧ÆðÊó±êʱµÄ´¦Àí */
|
||
//this.animate({"fill-opacity": 0.6}, 500);
|
||
};
|
||
|
||
<%=connBuf%> /* Á¬½ÓÏß connections["0010-0020"]=r.connection(nodes["0010"], nodes["0020"], connAttr);*/
|
||
<%=realPathBuf%> /* ʵ¼Ê·¾¶ realPaths["0010-0020-i"]=r.connection(nodes["0010"], nodes["0020"], realPathAttr);*/
|
||
|
||
/** Á÷³ÌÄ£Ðͽڵ㴦Àí£º1 ¸ù¾Ý¶ÔÓ¦µÄ½ÚµãÀàÐÍչʾ¶ÔÓ¦µÄͼƬ 2 °ÑtitleÖеÄ<br>Ì滻Ϊ\n */
|
||
for (var i in nodes) {
|
||
nodes[i].attr(nodeAttr).attr({"fill":"url(<%=sWebRootPath%>/Frame/page/resources/images/flow/"+nodes[i].data("nodeType")+".png)",
|
||
"title":nodes[i].attr()['title'].replace(/<br>/g,"\n")}).data("nodeID",i).drag(_move, _dragger, _up);
|
||
}
|
||
/** Á¬½ÓÏßµÄÎÄ×Ö½øÐд¦Àí: °ÑtitleÖеÄ<br>Ì滻Ϊ\n */
|
||
for(var i in texts){
|
||
texts[i].attr({"text":texts[i].attr("text").replace(/<br>/g, "\n")});
|
||
}
|
||
|
||
//µ±Ç°½×¶ÎÓÃÌØÊâÑÕÉ«±ê¼Ç
|
||
if(<%=!StringX.isEmpty(currentPhase)%>) nodes['<%=currentPhase%>'].attr(curNodeAttr);
|
||
//ÑØ×ÅÁ¬½ÓÏßÒƶ¯
|
||
r.customAttributes.along = function (a) {
|
||
if(!this.data("realPathLen")) this.data("realPathLen",realPaths[this.data("myID")].line.getTotalLength());
|
||
if(!this.data("myLen")) this.data("myLen",this.data("realPathLen")-moveLineLen);
|
||
return { path: realPaths[this.data("myID")].line.getSubpath(a * this.data("myLen"), a * this.data("myLen") + moveLineLen) };
|
||
};
|
||
|
||
var clicked=false,lineArr=[];
|
||
//µã»÷°´Å¥ ¶¯»Õ¹Ê¾Êµ¼Ê·¾¶
|
||
$("#btn").click(function(){
|
||
if($.isEmptyObject(realPaths)){/*ÈôÎÞʵ¼Ê·¾¶£¬²»Ö´ÐкóÐø²Ù×÷*/
|
||
alert("Á÷³Ì´¦ÓÚµÚÒ»½×¶Î£¬Ã»ÓÐʵ¼Ê·¾¶£¬ÎÞ·¨Õ¹Ê¾!");
|
||
return;
|
||
}
|
||
$(this).attr("disabled", true);
|
||
if(!clicked){
|
||
clicked=true;
|
||
for(var i in realPaths){
|
||
lineArr.push(r.path().data("myID",i).attr(moveLineAttr));
|
||
}
|
||
}
|
||
/* ¶¯»º¯ÊýµÄ×Ö·û´®£¬ÓÃÓÚevalµÄ²ÎÊý */
|
||
function getFuncStr(i, len){
|
||
if(i==len) return "function(){lineArr["+(i-1)+"].hide();$('#btn').removeAttr('disabled');}";
|
||
return "function(){if("+(i-1)+">=0) lineArr["+(i-1)+"].hide();lineArr["+i+"].show().attr({along:0}).animate({ along:1 }, lineArr["+i+"].data('realPathLen')*1000/"+speed+", '"+_easing+"',"+getFuncStr(i+1,len)+" );}";
|
||
}
|
||
//¶¯»Õ¹Ê¾
|
||
var len=lineArr.length;
|
||
if(len>0) eval("("+getFuncStr(0, len)+")();");
|
||
});
|
||
});
|
||
</script>
|
||
<%@include file="/Frame/resources/include/includetail.jspf"%><%@
|
||
include file="/Frame/page/jspf/include/jsp_debug.jspf"%> |