2024-08-14 15:17:51 +08:00

318 lines
11 KiB
Plaintext

<%@page import="org.activiti.engine.repository.ProcessDefinition" %>
<%@page import="org.activiti.engine.impl.persistence.entity.*" %>
<%@page import="org.activiti.engine.repository.Deployment" %>
<%@page import="com.blueland.bpm.engine.config.model.*" %>
<%@page import="com.blueland.bpm.common.page.*" %>
<%@page import="com.blueland.bpm.common.util.*"%>
<%@page import="java.util.*" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags/simpletable" prefix="simpletable"%>
<%@ include file="/commons/taglibs.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/commons/meta.jsp" %>
<base href="<%=basePath%>">
<title>流程分析</title>
<script type="text/javascript" src="${ctx }/resource/js/jquery-1.8.3.min.js"></script>
<script src="${ctx}/resource/js/plugins/highcharts/highcharts.js"></script>
<script src="${ctx}/resource/js/plugins/highcharts/modules/exporting.js"></script>
<script src="${ctx}/resource/js/common/processReport.js"></script>
<script type="text/javascript">
$(document).ready(function() {
getAnalysisData();
});
function openSysDialog(ctx, title){
var height1 = window.parent.document.documentElement.clientHeight;
var height = (parseInt(height1)-45)+"px";
showDiaLog(ctx,title,'1400px',height);
}
function getAnalysisData(){
//流程统计
$.ajax({
url:"${ctx}/flow/monitor/analysisDetail.do",
type:"GET",
dataType:"json",
success:function(data){
for (var i = 0; i < eval(data).length; i++) {
getDatas(eval(data)[i]);
}
},
});
}
function getDatas(item){
if(item.id =="params"){
$("#mostDaiBanProcess").text(item.daiBan);
$("#avgUserTimeprocess").text(item.avgUserTimeprocess);
$("#overTimeprocess").text(item.overTimeprocess);
$("#createMostprocess").text(item.createMostprocess);
return;
}else if (item.id =="overTimeTotal" || item.id == "createProcessTotal"){
this.getbarDatas(item);
return;
}
var colors = ['#2194ff'];
//['#2194ff', '#face1d', '#37c461'];
Highcharts.getOptions().colors = Highcharts.map(colors, function (color) {
return {
radialGradient: { cx: 0, cy: -0.8, r: 2.3 },
stops: [[0, color], [2, Highcharts.Color(color).get('rgb')] // darken
]
};
});
Highcharts.setOptions({
lang: {
numericSymbols: null // 不换算单位
}
});
$('#'+item.id).highcharts({
chart: {
type: 'bar'
},
credits: {
enabled: false //不显示LOGO
},
exporting: { enabled:false },//导出图表去掉
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'category',
labels: {
rotation: 0 // 设置轴标签旋转角度
}
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
formatter:function(){
return item.id=="avgUserTimeTotal"?this.value+"h":this.value;
},
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: item.id=="daiBanTotal"?'待办最多的流程数量:{point.y}(个)':'平均审批耗时时长:{point.y}(小时)',
style: {
"fontSize": "10px",
"color":"#999",
}
},
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function(event) {
if(item.id=="daiBanTotal"){
window.location.href="${ctx}/flow/monitor/analysisDetailByAppId.do?appId="+event.point.id;
}else{
window.location.href="${ctx}/flow/monitor/avgUserTimePage.do?appId="+event.point.id;
}
}
}
}
},
series: eval(item.datas)
});
}
function getbarDatas(item){
var colors = item.id=="overTimeTotal"?['#2194ff','#37c461']:['#face1d','#2194ff','#37c461'];
//['#face1d', '#2194ff', '#37c461','#88e9ec'];
Highcharts.getOptions().colors = Highcharts.map(colors, function (color) {
return {
radialGradient: { cx: 0, cy: -0.8, r: 2.3 },
stops: [[0, color], [2, Highcharts.Color(color).get('rgb')] // darken
]
};
});
$('#'+item.id).highcharts({
chart: {
type: 'bar'
},
credits: {
enabled: false //不显示LOGO
},
exporting: { enabled:false },//导出图表去掉
title: {
text: ''
},
xAxis: {
categories: eval(item.list)
},
yAxis: {
min: 0,
labels: {
formatter:function(){
return item.id=="overTimeTotal"?this.value+"h":this.value;
},
rotation: item.id=="overTimeTotal"?-30:0 // 设置轴标签旋转角度
},
title: {
text: ''
}
},
legend: {
/* 图例显示顺序反转
* 这是因为堆叠的顺序默认是反转的,可以设置
* yAxis.reversedStacks = false 来达到类似的效果
*/
reversed: true
},
tooltip: {
pointFormat:'{point.title}',
style: {
"fontSize": "10px",
"color":"#999",
}
},
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer',
events: {
click: function(event) {
if(item.id=="overTimeTotal"){
window.location.href="${ctx}/flow/monitor/overTimePage.do?appId="+event.point.id;
}else{
window.location.href="${ctx}/flow/monitor/createMaxPorcessPage.do?appId="+event.point.id;
//openSysDialog("${ctx}/taskMgr/list.do?tenantId="+event.point.appId+"&processDefName="+event.point.id,"流程创建数量排名");
}
}
}
}
},
series: eval(item.datas)
});
}
</script>
<style type="text/css">
</style>
</head>
<body>
<div class="page-content">
<div class="row process_monitor">
<div class="col-sm-12">
<div class="process_tabs">
<a class="tabs_link active" href="flow/monitor/processAnalysis.do">流程分析</a>
<a class="tabs_link" href="flow/monitor/actAnalysis.do">节点分析</a>
<a class="tabs_link" href="flow/monitor/staffAnalysis.do">人员分析</a>
</div><!--process_tabs 顶部页签-->
<div class="process_list">
<div class="list">
<div class="list-table">
<div class="cell-img"><img src="${ctx }/resource/css/images/lcjk-icon-1.png" /></div>
<div class="cell-text"><p class="title">待办最多的流程</p><p class="text" id="mostDaiBanProcess"></p></div>
</div>
</div><!--list-->
<div class="list">
<div class="list-table">
<div class="cell-img"><img src="${ctx }/resource/css/images/lcjk-icon-2.png" /></div>
<div class="cell-text"><p class="title">超时处理最多的流程</p><p class="text" id="overTimeprocess"></p></div>
</div>
</div><!--list-->
<div class="list">
<div class="list-table" >
<div class="cell-img"><img src="${ctx }/resource/css/images/lcjk-icon-3.png" /></div>
<div class="cell-text"><p class="title">创建量最高的流程</p><p class="text" id="createMostprocess"></div>
</div>
</div><!--list-->
<div class="list">
<div class="list-table">
<div class="cell-img"><img src="${ctx }/resource/css/images/lcjk-icon-4.png" /></div>
<div class="cell-text"><p class="title">平均审批耗时最长的流程</p><p class="text" id="avgUserTimeprocess"></div>
</div>
</div><!--list-->
</div><!--process_list 图标列表-->
<div class="row">
<div class="col-sm-6">
<div class="widget-box ace-box-1">
<div class="widget-header widget-header-flat widget-header-small">
<h5 class="widget-title">待办最多的流程</h5>
</div>
<div class="widget-body">
<div class="widget-main algin-center">
<div id="daiBanTotal" style="min-width:500px;height:300px"></div>
</div><!--widget-main -->
</div><!--widget-body -->
</div>
</div><!--col-sm-6-->
<div class="col-sm-6">
<div class="widget-box ace-box-1">
<div class="widget-header widget-header-flat widget-header-small">
<h5 class="widget-title">超时处理最多的流程</h5>
</div>
<div class="widget-body">
<div class="widget-main algin-center">
<div id="overTimeTotal" style="min-width:500px;height:300px"></div>
</div><!--widget-main -->
</div><!--widget-body -->
</div>
</div><!--col-sm-6-->
</div><!--row-->
<div class="row">
<div class="col-sm-6">
<div class="widget-box ace-box-1">
<div class="widget-header widget-header-flat widget-header-small">
<h5 class="widget-title">流程创建数量排名</h5>
</div>
<div class="widget-body">
<div class="widget-main algin-center">
<div id="createProcessTotal" style="min-width:500px;height:300px"></div>
</div><!--widget-main -->
</div><!--widget-body -->
</div>
</div><!--col-sm-6-->
<div class="col-sm-6">
<div class="widget-box ace-box-1">
<div class="widget-header widget-header-flat widget-header-small">
<h5 class="widget-title">平均审批耗时最长的流程</h5>
</div>
<div class="widget-body">
<div class="widget-main algin-center">
<div id="avgUserTimeTotal" style="min-width:500px;height:300px"></div>
</div><!--widget-main -->
</div><!--widget-body -->
</div>
</div><!--col-sm-6-->
</div><!--row-->
</div><!--col-sm-12-->
</div><!--row process_monitor 流程监控-->
</div><!-- /.page-content -->
</div><!--main-content-inner-->
</div><!-- /.main-content -->
</body>
</html>