<%@ 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 XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<%@ include file="/commons/meta.jsp"%>
		<base href="<%=basePath%>">
		<title>流程效率统计</title>
		<script language="javascript" type="text/javascript" src="${ctx}/resource/js/plugins/My97DatePicker/WdatePicker.js"></script>
		<link href="${ctx}/resource/js/plugins/loadmask/jquery.loadmask.css" rel="stylesheet" type="text/css" />
		<script type='text/javascript' src='${ctx}/resource/js/plugins/loadmask/jquery.loadmask.js'></script>
		<link href="${ctx_js_plugins}/simpletable/simpletable.css" type="text/css" rel="stylesheet">
		<script type="text/javascript" src="${ctx_js_plugins}/simpletable/simpletable.js"></script>
		<script src="${ctx}/resource/js/plugins/highcharts/highcharts.js"></script>
		<script src="${ctx}/resource/js/plugins/highcharts/modules/no-data-to-display.js"></script>
		
		<script type="text/javascript">
			$(function(){
				initChart("${categoriesData}","${seriesDataMax}","${seriesDataAvg}","${params.searchYear}");
			})
			function initChart(categoriesData, seriesDataMax, seriesDataAvg, year){
				$('#bpmRunTime').highcharts({
					title : {
						text : year+'业务流程执行效率'
					},
					xAxis : {
// 						categories : ['主数据管理系统','多元化采购系统','标准化管理平台','大数据分析平台','IT运维管理系统','流程平台','联动管控框架','行业采购','四平办公自动化','资金支付系统','AICS管理系统','统一权限管理平台','集中审批系统','售后服务管理','集成保障平台','综合统计报表平台','安全生产信息管理','营销CRM系统','战略管理','和+创新服务平台','公务车辆统一管理平台','用户中台','和+综合服务平台']
						categories : eval(""+categoriesData+"")
						//labels: {
						// rotation: 45
						// }
					},
					plotOptions: { 
				        series: { 
				            cursor: 'pointer', 
				            events: { 
				                click: function(e) { 
				                	iframeChange(e.point.category);
				                } 
				            } 
				        } 
				    }, 
					yAxis : {
						title : {
							text : ''
						},
						plotLines : [{
							value : 0,
							width : 1,
							color : '#808080'
						}]
					},
					lang: {
						noData: year+"年暂时没有流程数据"
					},
					noData: {
						style: {
							fontWeight: 'bold',
							fontSize: '15px',
							color: '#EE4000'
						}
					},
					tooltip : {
						valueSuffix : '天'
					},
					legend : {
						layout : 'vertical',
						align : 'center',
						verticalAlign : 'bottom',
						borderWidth : 0
					},
					credits : {
						enabled : false
						// 禁用版权信息
					},
					series : [{
						name : '最长耗时（天）',
// 						data : [573,1,134,108,167,15,74,60,24,1,17,19,356,199,273,14,27,74,368,2,30,20,3]
						data : eval(""+seriesDataMax+"")
					},{
						name : '平均耗时（天）',
// 						data : [12,1,6,13,55,2,10,1,1,1,3,1,10,2,28,1,2,2,10,1,9,1,1]
						data : eval(""+seriesDataAvg+"")
					} ]
				});
			} 
			function iframeChange(appName){
				$("#proFrmright").attr("src","${ctx}/workflow/proDefDetail.do?searchYear=${params.searchYear}&appName="+appName);
			}
			function query(){
				setMask("main-container");				
				document.getElementById("queryForm").submit();
			}
		</script>
	</head>
	<body>
		<div class="main-container" id="main-container" style="height:100px">
			<form id="queryForm" name="queryForm" method="post" style="display: inline;" action="${ctx}/workflow/proDefEfficiency.do">
				<div class="panel-body" id="panel-body" style="padding:3px;">
					<div class="well well-sm" style="margin-bottom: 2px;">
						<table border="0" cellspacing="0" cellpadding="0" class="table-search">
							<tr>
								<td>应用：</td>
								<td>
									<select name="appId">
										<option value="">--请选择--</option>
										<c:forEach items="${applicationList}" var="item">
											<option ${params.appId==item.appId?"selected":""} value="${item.appId }">${item.appName}</option>
										</c:forEach>
									</select>
								</td>
								<td>年份：</td>
								<td><input value="${params.searchYear}" id="searchYear" name="searchYear" onClick="WdatePicker({dateFmt:'yyyy'})" autocomplete="off"/></td>
								<td>
									<button type="submit" onclick="query()" class="btn btn-xs btn-primary">
										查询<i class="ace-icon fa fa-search bigger-110"></i>
									</button>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</form>
			<div class="row no-margin">	
				<div class="col-sm-12 infobox-container">
					<div class="page-content" id="bpmRunTime" style="width: 100%; height: 330px"></div>
				</div>
			</div>
			<div class="row no-margin">	
				<div class="col-sm-12 infobox-container">
					<IFRAME height="600px" width="100%" frameBorder=0 id="proFrmright" name="proFrmright" src="${ctx}/workflow/proDefDetail.do?searchYear=${params.searchYear}&appName=${params.appName}" onload="iframeHeight('proFrmright')" allowTransparency="true"></IFRAME>
				</div>
			</div>
		</div>
	</body>
</html>

