<%@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 getAnalysisData(){
	    	 //流程统计
	 		$.ajax({
	 			url:"${ctx}/flow/monitor/staffTopDetail.do?appId="+$("#appId").val(),
	 			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"){
    	 		$("#processTotal").text(item.processTotal);
    	 		$("#staffTotal").text(item.staffTotal);
    	 		$("#staffTop").text(item.staffTop);
    	 		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 
	                  ]
	              };
	          });
	    	 $('#'+item.id).highcharts({
	    		 chart: {
	    				type: 'column'
	    			},
	    			credits: {  
	    	            enabled: false     //不显示LOGO 
	    	        },  
	    	        exporting: { enabled:false },//导出图表去掉
	    			title: {
	    				text: ''
	    			},
	    			subtitle: {
	    				text: ''
	    			},
	    			xAxis: {
	    				type: 'category',
	    				labels: {
	    					rotation: -30 // 设置轴标签旋转角度
	    				}
	    			},
	    			yAxis: {
	    				min: 0,
	    				title: {
	    					text: ''
	    				}
	    			},
	    			legend: {
	    				enabled: false
	    			},
	    			tooltip: {
	    				pointFormat: '<b>待处理流程最多的员工：{point.y}(个)</b>',
	    				style: {
								"fontSize": "10px",
	        					"color":"#999",							
						}
	    			},
	    			series: eval(item.datas)
	    	 });
	     }
     </script>
     <style type="text/css">
    	
     </style>
     
</head>

<body>

<div class="page-content">				                  						
	<input id="appId" name="appId"  value="${appId}" type="hidden"/>
						<div class="row process_monitor">
							<div class="col-sm-12">
								<div class="process_tabs">
									<a class="tabs_link" href="flow/monitor/processAnalysis.do">流程分析</a>
									<a class="tabs_link" href="flow/monitor/actAnalysis.do">节点分析</a>
									<a class="tabs_link active" href="flow/monitor/staffAnalysis.do">人员分析</a>
									<a class="btn-back" href="flow/monitor/staffAnalysis.do"><i class="ace-icon fa fa-reply"></i>返回上级</a>
								</div><!--process_tabs 顶部页签-->
								
							<!-- 	<div class="process_screen">
									<div class="cell-clum">创建时间</div>
									<div class="cell-text">
										<a class="link active">不限</a>
										<a class="link">近一周</a>
										<a class="link">近一月</a>
										<a class="link">近一季</a>
										<a class="link">近一年</a>
										<a class="link">近一周</a>
										<a class="link">近一月</a>
										<a class="link">近一季</a>
										<a class="link">近一年</a>
										<a class="link">近一周</a>
										<a class="link">近一月</a>
										<a class="link">近一季</a>
										<a class="link">近一年</a>
										<a class="link">近一周</a>
										<a class="link">近一月</a>
										<a class="link">近一季</a>
										<a class="link">近一年</a>
										<a class="link">近一周</a>
										<a class="link">近一月</a>
										<a class="link">近一季</a>
										<a class="link">近一年</a>
										<a class="link">近一周</a>
										<a class="link">近一月</a>
										<a class="link">近一季</a>
										<a class="link">近一年</a>
										<a class="link">近一周</a>
										<a class="link">近一月</a>
										<a class="link">近一季</a>
										<a class="link">近一年</a>
										<a class="link">近一周</a>
										<a class="link">近一月</a>
										<a class="link">近一季</a>
										<a class="link">近一年</a>
										<input class="link-input" type="text" placeholder="2020-02-01" />
										<span class="text">至</span>
										<input class="link-input" type="text" placeholder="2020-02-01" />
									</div>
									<div class="cell-btn"><a class="btn-more">更多<i class="arrow fa fa-angle-down"></i></a></div>
								</div> --><!--process_screen 筛选查询-->
								
								<div class="process_list">
									<div class="list">
										<div class="list-table">
											<div class="cell-img"><img src="${ctx }/resource/css/images/lcjk-icon-12.png" /></div>
											<div class="cell-text"><p class="title">统计人数</p><p class="text" id="staffTotal"></p></div>
										</div>
									</div><!--list-->
									<div class="list">
										<div class="list-table">
											<div class="cell-img"><img src="${ctx }/resource/css/images/lcjk-icon-13.png" /></div>
											<div class="cell-text"><p class="title">流程总数</p><p class="text" id="processTotal"></p></div>
										</div>
									</div><!--list-->
									<div class="list">
										<div class="list-table">
											<div class="cell-img"><img src="${ctx }/resource/css/images/lcjk-icon-14.png" /></div>
											<div class="cell-text"><p class="title">待处理流程最多的员工</p><p class="text" id="staffTop"></p></div>
										</div>
									</div><!--list-->					
								</div><!--process_list 图标列表-->
								
								<div class="row">								
									<div class="col-sm-12">
										<div class="widget-box ace-box-1">
										  <div class="widget-header widget-header-flat widget-header-small">
											  <h5 class="widget-title">${appName}待处理流程最多的员工</h5>								
										  </div>
										  <div class="widget-body">
											  <div class="widget-main algin-center">
												<div id="staffTopTotal" style="min-width:500px;min-height:550px"></div>
											  </div><!--widget-main -->
										  </div><!--widget-body -->
									  </div>
									</div><!--col-sm-12-->
								</div><!--row-->
																
							</div><!--col-sm-12-->
						</div><!--row process_monitor 流程监控-->
						
					</div><!-- /.page-content -->
				</div><!--main-content-inner-->
			</div><!-- /.main-content -->
   
			

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->


</body>
</html>