|
|
<!DOCTYPE html>
|
|
|
<html class="x-admin-sm">
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<title>单个流程数据分析</title>
|
|
|
<meta name="renderer" content="webkit" />
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
|
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
|
|
|
|
|
|
<link href="../Portal2020/css/font.css" rel="stylesheet" />
|
|
|
<link href="../Portal2020/css/xadmin.css" rel="stylesheet" />
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="../../Scripts/bootstrap/js/jquery.min.js"></script>
|
|
|
<script src="../../Scripts/QueryString.js" type="text/javascript"></script>
|
|
|
<script type="text/javascript" src="../../Scripts/config.js"></script>
|
|
|
<script type="text/javascript" src="../../Comm/Gener.js"></script>
|
|
|
|
|
|
<script src="../../Portal2020/lib/layui/layui.js" charset="utf-8"></script>
|
|
|
<script src="../../Scripts/echartsjs/echarts.min.js"></script>
|
|
|
<script>
|
|
|
$(function () {
|
|
|
var FlowName = null;
|
|
|
var FK_flowNo = GetQueryString("FK_Flow");
|
|
|
var ens = new Entities("BP.WF.GenerWorkFlows", "FK_Flow", FK_flowNo);
|
|
|
for (var i = 0; i < ens.length; i++) {
|
|
|
//通过json访问属性.
|
|
|
var jsonEn = ens[i];
|
|
|
|
|
|
var en = new Entity("BP.WF.GenerWorkFlow", jsonEn);
|
|
|
FlowName = en.FlowName;
|
|
|
break;
|
|
|
}
|
|
|
$("#flowName").html("<h2 style='margin-left:15px;'>流程名称："+FlowName+"</h2>");
|
|
|
|
|
|
});
|
|
|
</script>
|
|
|
<style>
|
|
|
h2{
|
|
|
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="Msg"></div>
|
|
|
<h3 id="flowName"></h3>
|
|
|
<div class="layui-fluid">
|
|
|
|
|
|
<div class="layui-col-md12">
|
|
|
<div class="layui-card">
|
|
|
|
|
|
<div class="layui-card-body ">
|
|
|
<ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
|
|
|
|
|
|
<li class="layui-col-md2 layui-col-xs2">
|
|
|
<a href="javascript:;" class="x-admin-backlog-body">
|
|
|
<h3>实例总数</h3>
|
|
|
<p>
|
|
|
<cite id="FlowInstaceNum">0</cite>
|
|
|
</p>
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="layui-col-md2 layui-col-xs2">
|
|
|
<a href="javascript:;" class="x-admin-backlog-body">
|
|
|
<h3>运行中</h3>
|
|
|
<p>
|
|
|
<cite id="RunNum">0</cite>
|
|
|
</p>
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="layui-col-md2 layui-col-xs2">
|
|
|
<a href="javascript:;" class="x-admin-backlog-body">
|
|
|
<h3>待办数</h3>
|
|
|
<p>
|
|
|
<cite id="TodolistNum">0</cite>
|
|
|
</p>
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="layui-col-md2 layui-col-xs2">
|
|
|
<a href="javascript:;" class="x-admin-backlog-body">
|
|
|
<h3>逾期数</h3>
|
|
|
<p>
|
|
|
<cite id="OverTimeNum">0</cite>
|
|
|
</p>
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="layui-col-md2 layui-col-xs2">
|
|
|
<a href="javascript:;" class="x-admin-backlog-body">
|
|
|
<h3>退回数</h3>
|
|
|
<p>
|
|
|
<cite id="ReturnNum">0</cite>
|
|
|
</p>
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="layui-row layui-col-space15">
|
|
|
|
|
|
<div class="layui-col-sm12 layui-col-md6">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header">流程发起数-月份</div>
|
|
|
<div class="layui-card-body" style="min-height: 280px;">
|
|
|
<div id="FlowsByNY" class="layui-col-sm12" style="height: 300px;"></div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-sm12 layui-col-md6">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header">流程发起数-部门</div>
|
|
|
<div class="layui-card-body" style="min-height: 280px;">
|
|
|
<div id="FlowsByDept" class="layui-col-sm12" style="height: 300px;"></div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-sm12 layui-col-md6">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header">待办数-部门</div>
|
|
|
<div class="layui-card-body" style="min-height: 280px;">
|
|
|
<div id="TodolistByDept" class="layui-col-sm12" style="height: 300px;"></div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-col-sm12 layui-col-md6">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header">逾期数-人员</div>
|
|
|
<div class="layui-card-body" style="min-height: 280px;">
|
|
|
<div id="OverTimeByEmp" class="layui-col-sm12" style="height: 300px;"></div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-sm12 layui-col-md6">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header">逾期数-部门</div>
|
|
|
<div class="layui-card-body" style="min-height: 280px;">
|
|
|
<div id="OverTimeByDept" class="layui-col-sm12" style="height: 300px;"></div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-sm12 layui-col-md6">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-header">逾期数-节点</div>
|
|
|
<div class="layui-card-body" style="min-height: 280px;">
|
|
|
<div id="OverTimeByNode" class="layui-col-sm12" style="height: 300px;"></div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
//页面启动函数.
|
|
|
$(function () {
|
|
|
var FK_Flow = GetQueryString("FK_FLOW");
|
|
|
var FlowsByNY_X = new Array();
|
|
|
var FlowsByNY_Y = new Array();
|
|
|
var FlowsByDept_X = new Array();
|
|
|
var FlowsByDept_Y = new Array();
|
|
|
var TodolistByDept_X = new Array();
|
|
|
var TodolistByDept_Y = new Array();
|
|
|
var OverTimeByEmp_X = new Array();
|
|
|
var OverTimeByEmp_Y = new Array();
|
|
|
var OverTimeByDept_X = new Array();
|
|
|
var OverTimeByDept_Y = new Array();
|
|
|
var OverTimeByNode_X = new Array();
|
|
|
var OverTimeByNode_Y = new Array();
|
|
|
|
|
|
$("#Msg").html("<img src=../../Img/loading.gif /> 正在加载,请稍后......");
|
|
|
|
|
|
//获得数数量，并把数量绑定.
|
|
|
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_AttrFlow");
|
|
|
handler.AddPara('FK_Flow', FK_Flow);
|
|
|
var data = handler.DoMethodReturnJSON("GraphicalAnalysis_Init");
|
|
|
GenerFullAllDivVal(data);
|
|
|
|
|
|
//绑定- 流程发起数
|
|
|
data = handler.DoMethodReturnJSON("GraphicalAnalysis_DataSet");
|
|
|
|
|
|
//流程发起-按月份.
|
|
|
var FlowsByNYs = data.FlowsByNY;
|
|
|
$.each(FlowsByNYs, function (i, FlowsByNY) {
|
|
|
FlowsByNY_X[i] = FlowsByNY.FK_NY;
|
|
|
FlowsByNY_Y[i] = FlowsByNY.Num;
|
|
|
})
|
|
|
queryChart_FlowsByNY(FlowsByNY_X, FlowsByNY_Y);
|
|
|
|
|
|
//流程发起-按部门.
|
|
|
var FlowsByDepts = data.FlowsByDept;
|
|
|
$.each(FlowsByDepts, function (i, FlowsByDept) {
|
|
|
FlowsByDept_X[i] = FlowsByDept.DeptName;
|
|
|
FlowsByDept_Y[i] = FlowsByDept.Num;
|
|
|
})
|
|
|
queryChart_FlowsByDept(FlowsByDept_X, FlowsByDept_Y);
|
|
|
|
|
|
//待办-按部门.
|
|
|
var TodolistByDepts = data.TodolistByDept;
|
|
|
$.each(TodolistByDepts, function (i, TodolistByDept) {
|
|
|
TodolistByDept_X[i] = TodolistByDept.DeptName;
|
|
|
TodolistByDept_Y[i] = TodolistByDept.Num;
|
|
|
})
|
|
|
queryChart_TodolistByDept(TodolistByDept_X, TodolistByDept_Y);
|
|
|
|
|
|
//逾期-按人员.
|
|
|
var OverTimeByEmps = data.OverTimeByEmp;
|
|
|
$.each(OverTimeByEmps, function (i, OverTimeByEmp) {
|
|
|
OverTimeByEmp_X[i] = OverTimeByEmp.name;
|
|
|
OverTimeByEmp_Y[i] = OverTimeByEmp.Num;
|
|
|
})
|
|
|
queryChart_OverTimeByEmp(OverTimeByEmp_X, OverTimeByEmp_Y);
|
|
|
//逾期-按部门.
|
|
|
var OverTimeByDepts = data.OverTimeByDept;
|
|
|
$.each(OverTimeByDepts, function (i, OverTimeByDept) {
|
|
|
OverTimeByDept_X[i] = OverTimeByDept.DeptName;
|
|
|
OverTimeByDept_Y[i] = OverTimeByDept.Num;
|
|
|
})
|
|
|
queryChart_OverTimeByDept(OverTimeByDept_X, OverTimeByDept_Y);
|
|
|
//逾期-按节点.
|
|
|
var OverTimeByDepts = data.OverTimeByNode;
|
|
|
$.each(OverTimeByDepts, function (i, OverTimeByNode) {
|
|
|
OverTimeByNode_X[i] = OverTimeByNode.NodeName;
|
|
|
OverTimeByNode_Y[i] = OverTimeByNode.Num;
|
|
|
})
|
|
|
queryChart_OverTimeByNode(OverTimeByNode_X, OverTimeByNode_Y);
|
|
|
|
|
|
$("#Msg").html("");
|
|
|
});
|
|
|
|
|
|
|
|
|
//流程发起-按月份.
|
|
|
function queryChart_FlowsByNY(FlowsByNY_X, FlowsByNY_Y) {
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('FlowsByNY'));
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
grid: {
|
|
|
top: '5%',
|
|
|
right: '1%',
|
|
|
left: '1%',
|
|
|
bottom: '10%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: FlowsByNY_X
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: [{
|
|
|
name: '流程数',
|
|
|
data: FlowsByNY_Y,
|
|
|
type: 'line',
|
|
|
smooth: true
|
|
|
}]
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
//流程发起-按部门.
|
|
|
function queryChart_FlowsByDept(FlowsByDept_X, FlowsByDept_Y) {
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('FlowsByDept'));
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
grid: {
|
|
|
top: '5%',
|
|
|
right: '1%',
|
|
|
left: '1%',
|
|
|
bottom: '10%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: FlowsByDept_X
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: [{
|
|
|
name: '流程数',
|
|
|
data: FlowsByDept_Y,
|
|
|
type: 'bar',
|
|
|
smooth: true
|
|
|
}]
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
//待办-按部门.
|
|
|
function queryChart_TodolistByDept(TodolistByDept_X, TodolistByDept_Y) {
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('TodolistByDept'));
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
grid: {
|
|
|
top: '5%',
|
|
|
right: '1%',
|
|
|
left: '1%',
|
|
|
bottom: '10%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: TodolistByDept_X
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: [{
|
|
|
name: '待办数',
|
|
|
data: TodolistByDept_Y,
|
|
|
type: 'bar',
|
|
|
smooth: true
|
|
|
}]
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
//逾期-按人员.
|
|
|
function queryChart_OverTimeByEmp(OverTimeByEmp_X, OverTimeByEmp_Y) {
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('OverTimeByEmp'));
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
grid: {
|
|
|
top: '5%',
|
|
|
right: '1%',
|
|
|
left: '1%',
|
|
|
bottom: '10%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: OverTimeByEmp_X
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: [{
|
|
|
name: '流程数',
|
|
|
data: OverTimeByEmp_Y,
|
|
|
type: 'bar',
|
|
|
smooth: true
|
|
|
}]
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
//逾期-按部门.
|
|
|
function queryChart_OverTimeByDept(OverTimeByDept_X, OverTimeByDept_Y) {
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('OverTimeByDept'));
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
grid: {
|
|
|
top: '5%',
|
|
|
right: '1%',
|
|
|
left: '1%',
|
|
|
bottom: '10%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: OverTimeByDept_X
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: [{
|
|
|
name: '流程数',
|
|
|
data: OverTimeByDept_Y,
|
|
|
type: 'bar',
|
|
|
smooth: true
|
|
|
}]
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
//逾期-按节点.
|
|
|
function queryChart_OverTimeByNode(OverTimeByNode_X, OverTimeByNode_Y) {
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('OverTimeByNode'));
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
grid: {
|
|
|
top: '5%',
|
|
|
right: '1%',
|
|
|
left: '1%',
|
|
|
bottom: '10%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: OverTimeByNode_X
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: [{
|
|
|
name: '流程数',
|
|
|
data: OverTimeByNode_Y,
|
|
|
type: 'bar',
|
|
|
smooth: true
|
|
|
}]
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |