<%@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() {
			getProcessData();
			getProcessMonitorTop();
			getSysLoadData();
		});
		function getProcessData(){
			//流程统计
			$.ajax({
				url:"${ctx}/sys/index/statisticsProcessByTime.do",
				type:"GET",
				dataType:"json",
				success:function(data){
					for (var i = 0; i < eval(data).length; i++) {
						getPieDatas(eval(data)[i]);
					}
				},

			});
		}
		function getProcessMonitorTop(){
			//流程监控top
			$.ajax({
				url:"${ctx}/sys/index/getProcessMonitorTop.do",
				type:"GET",
				dataType:"json",
				success:function(data){
					//topProcess(eval(data));
					getReportDataByZxt("topFlow","应用监控","说明：每月各应用流程执行排名",eval(data).row,eval(data).column,'');
				},

			});
		}
		function getSysLoadData(){
			//流程系统负载
			$.ajax({
				url:"${ctx}/sys/index/getSysLoadData.do",
				type:"GET",
				dataType:"json",
				success:function(data){
					loadProcess(eval(data));

				},

			});
		}
		function getPieDatas(item){
			if(item.id =="singleCount"){
				$("#total").text(item.total);
				$("#cancle").text(item.cancle);
				$("#deal").text(item.deal);
				$("#un_deal").text(item.un_deal);
				return;
			}
			$('#'+item.id).highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false,
					//spacing : [20, 0 , 20, 0]
				},
				credits: {
					enabled: false     //不显示LOGO
				},
				exporting: { enabled:false },//导出图表去掉
				title: {
					floating:true,
					text: item.name+item.allCount,
					style:{
						"fontSize": "12px",
						"color":"#000"
					}
				},
				tooltip: {
					pointFormat: '{point.y}'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						size:90,
						innerSize:'20',
						dataLabels: {
							enabled: true,
							//format: '<b>{point.name}</b>: {point.percentage:.1f}%',
							style: {
								"fontSize": "10px",
								"color":"#999",
								//color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
							}
						},
						point: {
							events: {

							}
						},
					}
				},
				series: [{
					type: 'pie',
					innerSize: '90%',
					name: item.name,
					data: item.datas
				}]
			}, function(c) { // 图表初始化完毕后的会掉函数
				// 环形图圆心
				var centerY = c.series[0].center[1],
						titleHeight = parseInt(c.title.styles.fontSize);
				// 动态设置标题位置
				c.setTitle({
					y:centerY + titleHeight/4
				});
			});
		}
		function loadProcess(data){
			$('#loadFlow').highcharts({
				chart: {
					type: 'column'
				},
				credits: {
					enabled: false     //不显示LOGO
				},
				exporting: { enabled:false },//导出图表去掉
				title: {
					text: '系统负载图',
					style:{
						"font-weight": "bold",
						"font-family": "微软雅黑"
					},
				},
				subtitle: {
					text: '说明：最近十天流程执行数量',

				},
				xAxis: {
					type: 'category',
					labels: {
						rotation: 0  // 设置轴标签旋转角度
					}
				},
				yAxis: {
					min: 0,
					title: {
						text: ''
					}
				},
				legend: {
					enabled: false
				},
				tooltip: {
					pointFormat: '执行数量: <b>{point.y}</b>',
					style: {
						"fontSize": "10px",
						"color":"#999",
					}
				},
				plotOptions: {
					column: {
						borderWidth: 0
					}
				},
				series: eval(data.datas)
			});
		}
		function openSysDialog(ctx, title){
			var height1 = window.parent.document.documentElement.clientHeight;
			var height = (parseInt(height1)-45)+"px";
			showDiaLog(ctx,title,'1400px',height);
		}
	</script>
	<style type="text/css">

	</style>

</head>

<body>

<div class="page-content">

	<div class="process-page">

		<div class="row" style="height: 200px;">
			<div class="col-sm-12">
				<div class="process-boxs">
					<div class="list">
						<img class="list-img" src="${ctx }/resource/css/images/lc-icon-8.png" />
						<div class="title">接入应用</div>
						<div class="sz">
							<a href="javascript:void(0);" onclick="openSysDialog('/ebpm-process-manage/applicationMgr/list.do', '接入应用');">
								${allApp}
							</a>
						</div>
					</div><!--list-->
					<div class="list">
						<img class="list-img" src="${ctx }/resource/css/images/lc-icon-6.png" />
						<div class="title">流程定义</div>
						<div class="sz">
							<a href="javascript:void(0);" onclick="openSysDialog('/ebpm-process-manage/procDefMgr/list.do?flag=true', '流程定义');">
								${procDefKeyCount}
							</a>
						</div>
					</div><!--list-->
					<div class="list">
						<img class="list-img" src="${ctx }/resource/css/images/lc-icon-3.png" />
						<div class="title">所有流程</div>
						<div class="sz">
							<a href="javascript:void(0);" id="total" onclick="openSysDialog('/ebpm-process-manage/sysMgr/sysProcessInstList.do?flag=true', '所有流程');">

							</a>
						</div>
					</div><!--list-->
					<div class="list">
						<img class="list-img" src="${ctx }/resource/css/images/lc-icon-4.png" />
						<div class="title">流程执行</div>
						<div class="sz">
							<a href="javascript:void(0);" onclick="openSysDialog('/ebpm-process-manage/processErrorLog/infoList.do?flag=true', '流程执行');">
								${info}
							</a>
						</div>
					</div><!--list-->
					<div class="list">
						<img class="list-img" src="${ctx }/resource/css/images/lc-icon-5.png" />
						<div class="title">运行时流程</div>
						<div class="sz">
							<a href="javascript:void(0);" id="un_deal" onclick="openSysDialog('/ebpm-process-manage/sysMgr/sysProcessInstList.do?procState=1&flag=true', '运行时流程');">

						</div>
					</div><!--list-->
					<div class="list">
						<img class="list-img" src="${ctx }/resource/css/images/lc-icon-7.png" />
						<div class="title">已结束流程</div>
						<div class="sz">
							<a href="javascript:void(0);" id="deal" onclick="openSysDialog('/ebpm-process-manage/sysMgr/sysProcessInstList.do?procState=5&flag=true', '已结束流程');">

							</a>
						</div>
					</div><!--list-->
					<div class="list">
						<img class="list-img" src="${ctx }/resource/css/images/lc-icon-1.png" />
						<div class="title">作废流程</div>
						<div class="sz">
							<a href="javascript:void(0);" id="cancle" onclick="openSysDialog('/ebpm-process-manage/sysMgr/sysProcessInstList.do?procState=3&flag=true', '作废流程');">

							</a>
						</div>
					</div><!--list-->
					<div class="list">
						<img class="list-img" src="${ctx }/resource/css/images/lc-icon-2.png" />
						<div class="title">异常流程</div>
						<div class="sz">
							<a href="javascript:void(0);" onclick="openSysDialog('/ebpm-process-manage/processErrorLog/errorList.do?flag=true', '异常流程');">
								${error}
							</a>
						</div>
					</div><!--list-->
				</div><!--process-boxs-->
			</div><!--col-sm-12-->
		</div><!--row-->

		<div class="row">
			<div class="col-sm-3">
				<div class="align-center">
					<div id="allFlow" style="min-width:200px;height:200px"></div>
				</div>
			</div><!--col-sm-3-->
			<div class="col-sm-3">
				<div class="align-center">
					<div id="yearFlow" style="min-width:200px;height:200px"></div>
				</div>
			</div><!--col-sm-3-->
			<div class="col-sm-3">
				<div class="align-center">
					<div id="monthFlow" style="min-width:200px;height:200px"></div>
				</div>
			</div><!--col-sm-3-->
			<div class="col-sm-3">
				<div class="align-center">
					<div id="weekFlow" style="min-width:200px;height:200px"></div>
				</div>
			</div><!--col-sm-3-->
		</div><!--row-->

		<div class="row">
			<div class="col-sm-6">
				<div class="align-center">
					<div id="topFlow" style="min-width:400px;height:300px"></div>
				</div>
			</div><!--col-sm-6-->
			<div class="col-sm-6">
				<div class="align-center">
					<div id="loadFlow" style="min-width:400px;height:300px"></div>
				</div>
			</div><!--col-sm-6-->
		</div><!--row-->

	</div><!--process-page-->

</div><!-- /.page-content -->


</body>
</html>