jbpm4的流程监控程序[3] 流程图监控展示,基于mootools
在<<jbpm4的流程监控程序[2]>>中,我们已经可以获得流程图和流程图相关节点信息,现在我们就可以将其展示出来.
对于节点的tip显示,这里是采用mootools的tip实现的.
// 用来处理流程图请求的,这里是采用SpringMVC的
// 用来处理流程图请求的,这里是采用SpringMVC的
public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response)
throws Exception {
String pdId = getProcessDefinitionId(request);
InputStream image = null;
if (pdId != null && pdId.length() != 0) {
image = jbpmTemplate.getResourceFromProcessDefinition(pdId, JbpmTemplate.PROCESS_IMAGE);
}
if (image == null) {
String piId = getProcessInstanceId(request);
if (piId != null && piId.length() != 0) {
image = jbpmTemplate.getResourceFromProcessInstance(piId, JbpmTemplate.PROCESS_IMAGE);
}
}
if (image != null) {
response.setContentType("image/png");
OutputStream os = response.getOutputStream();
byte[] b = new byte[BUFFER_SIZE];
int len = 0;
while ((len = image.read(b, 0, BUFFER_SIZE)) != -1) {
os.write(b, 0, len);
}
os.flush();
}
return null;
}
流程监控action
public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response)
throws Exception {
String piId = request.getParameter("piId");
ProcessInstaticeActivityInfo processInstaticeActivityInfo = jbpmTemplate.getActivityCoordinatesInfo(piId);
request.setAttribute("activeActivityInfos", processInstaticeActivityInfo.getActiveActivityInfos());
request.setAttribute("processedActivityInfos", processInstaticeActivityInfo.getProcessedActivityInfos());
request.setAttribute("jbpmTemplate", jbpmTemplate);
return new ModelAndView(page);
}
流程监控的jsp页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>查看流程实例</title>
<style>
.tip-top {
color: #000;
width: 130px;
z-index: 13000;
}
.tip{
}
.tip .tip-title {
font-weight: bold;
font-size: 14px;
font-family: 宋体 ;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}
.tip .tip-text {
font-size: 12px;
font-family: 宋体 ;
padding: 4px 8px 8px;
background: #CFDFA7;
}
.tip-bottom{
}
.processed{
position:absolute;
border:3px yellow solid;
}
.processed:hover{
border-color:blue;
}
.active{
position:absolute;
border:3px red solid;
}
.active:hover{
border-color: green;
}
/* ie下需加个透明的背景 s.gif见附件 */
.processed,.active{
background-image:url(<%=request.getContextPath()%>/resources/img/s.gif);
}
</style>
<script
src="<%=request.getContextPath()%>/resources/script/mootools-1.2.js"></script>
</head>
<body>
<div class="processContainer">
<img style="position: absolute; left: 0px; top: 0px;"
src="./jpdlImage.bpm?piId=<%=request.getParameter("piId")%>"/>
<%
JbpmTemplate jbpmTemplate = (JbpmTemplate)request.getAttribute("jbpmTemplate");
int id = 0;
List<ActivityInfo> processedActivityInfos = (List<ActivityInfo>)request.getAttribute("processedActivityInfos"); ;
List<ActivityInfo> activeActivityInfos = (List<ActivityInfo>)request.getAttribute("activeActivityInfos");
ActivityCoordinates coordinates;
HistoryActivityInstance activityInstance;
for(ActivityInfo info : processedActivityInfos){
coordinates = info.getCoordinates();
activityInstance = info.getActivityInstance();
String elId = "_pai_" + (++id);
String title = activityInstance==null?"":activityInstance.getActivityName();
StringBuffer position = new StringBuffer();
position.append("left:").append(coordinates.getX()+2).append("px;");
position.append("top:").append(coordinates.getY()+2).append("px;");
position.append("height:").append(coordinates.getHeight()-10).append("px;");
position.append("width:").append(coordinates.getWidth()-10).append("px;");
StringBuffer text = new StringBuffer();
if (activityInstance instanceof HistoryDecisionInstanceImpl) {
text.append("<b>完成时间:</b> ").append(DateTimeUtil.formatToNice(activityInstance.getEndTime(),"yyyy-MM-dd HH:mm:dd"));
String transitionName = ((HistoryActivityInstanceImpl) activityInstance).getTransitionName();
if("completed".equals(transitionName)){
ProcessDefinition pd = jbpmTemplate.getProcessDefinitionByProcessInstanceId(request.getParameter("piId"));
if(pd!=null){
Activity activity = ((ProcessDefinitionImpl)pd).getActivitiesMap().get(activityInstance.getActivityName());
if(activity!=null){
text.append("<br/><b>流转路径:</b> ").append(StringUtil.transToHtmlStr(activity.getDefaultOutgoingTransition().getName()));
}
}
} else {
text.append("<br/><b>流转路径:</b> ").append(StringUtil.transToHtmlStr(transitionName));
}
} else if (activityInstance instanceof HistoryTaskInstanceImpl) {
HistoryTaskInstanceImpl taskInstanceImpl = (HistoryTaskInstanceImpl) activityInstance;
text.append("<b>执 行 人</b>: ").append(taskInstanceImpl.getHistoryTask().getAssignee());
text.append("<br/><b>完成时间:</b> ").append(DateTimeUtil.formatToNice(activityInstance.getEndTime(),"yyyy-MM-dd HH:mm:dd"));
String transitionName = ((HistoryActivityInstanceImpl) activityInstance).getTransitionName();
if("completed".equals(transitionName)){
ProcessDefinition pd = jbpmTemplate.getProcessDefinitionByProcessInstanceId(request.getParameter("piId"));
if(pd!=null){
Activity activity = ((ProcessDefinitionImpl)pd).getActivitiesMap().get(activityInstance.getActivityName());
if(activity!=null){
text.append("<br/><b>流转路径:</b> ").append(StringUtil.transToHtmlStr(activity.getDefaultOutgoingTransition().getName()));
}
}
} else {
text.append("<br/><b>流转路径:</b> ").append(StringUtil.transToHtmlStr(transitionName));
}
List<HistoryComment> comments = jbpmTemplate.getTaskComments(taskInstanceImpl.getHistoryTask().getId());
if(comments.size()>0){ // 显示最新的comment
text.append("<br/><br/><b>备注信息:</b> ").append(StringUtil.transToHtmlStr(comments.get(comments.size()-1).getMessage()));
}
}
%>
<div class="tip processed" id="<%=elId%>" style="<%=position%>">
</div>
<script>$('<%=elId%>').store('tip:title',"<%=title%>").store('tip:text',"<%=text.toString()%>");</script>
<%}%>
<%
id = 0;
for(ActivityInfo info : activeActivityInfos){
coordinates = info.getCoordinates();
String elId = "_aai_" + (++id);
StringBuffer position = new StringBuffer();
position.append("left:").append(coordinates.getX()+2).append("px;");
position.append("top:").append(coordinates.getY()+2).append("px;");
position.append("height:").append(coordinates.getHeight()-10).append("px;");
position.append("width:").append(coordinates.getWidth()-10).append("px;");
%>
<div class="tip active" id="<%=elId%>" style="<%=position%>">
</div>
<%} %>
</div>
<script>new Tips('.tip');</script>
</body>
</html>