<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/header.jsp"%>
<link rel="stylesheet" type="text/css" href="${ctx}/css/indexNew/jquery.monthpicker.css"> <!--选月份的样式-->
<link type="text/css" rel="stylesheet" href="${ctx}/css/baseFrame.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/css/index.css" />
<title></title>
<style>
	.selected {
		height: 35px;
		line-height: 35px;
		border-bottom: 1px solid #6d5c96;
	}
	.selected span{
		padding: 5px 10px;
		border-right: 1px solid #6d5c96;
		cursor: pointer;
	}
	.active3 {
		border-bottom:3px solid #0097e5;
		color:#fff;
	}
	.monthSelect input {
		border: none;
		height: 20px;
		padding: 3px 8px;
	}
	.confirm-btn {
		padding: 3px 5px;
		background: #00b591;
		border-radius: 3px;
		color: #eee;
		cursor: pointer;
		margin-left: 5px;
	}
	.mySearch span {
		margin-right: 15px;
	}
	.resultCon input {
	    border: none;
	    padding: 5px;
	    border-radius: 3px;
	    vertical-align: middle;
	    width: 140px;
	}
	.monthpicker{
		margin-left: 255px;
		margin-top: 50px;
	}
</style>
</head> 
<body class="bg1">
	<div class="headCon">
		<jsp:include page="/WEB-INF/jsp/top.jsp">
		<jsp:param name="index" value="疑案管理" />
		</jsp:include>
	</div>
	<div class="searchCon">
		<ul>
			<li class="on"><a href="${ctx}/sysPersonal/personalCount.do">个人统计</a></li>
			<li><a href="${ctx}/sysPersonal/taskApply.do">任务申请</a></li>
			<li><a href="${ctx}/sysPersonal/markExport.do">标注管理</a></li>
			<li><a href="${ctx}/sysPersonal/personalSearch.do">个人查询</a></li>						
			<!-- <li><a href="${ctx}/sysPersonal/markImport.do">标注导入</a></li>-->					
		</ul>
	</div>
	<!-- <div id="resultCon1" class="resultCon" style="margin-left: 255px;"> -->
	<div class="resultCon" style="margin-left: 255px;position:relative;">
		<div class="wrap">
			<div class="m_right" >
				<div class="p_bar">您当前的位置：个人统计</div>			
			</div>		
		</div>
		<div class="picCon" style="margin-top:20px;border:1px solid #6d5c96;">
			<!--选项卡-->		
			<div class="selected">
				<span class="active3" data-classed="dealCount" data-id="dealCount">处理统计</span>
				<span data-classed="markCount"  data-id="markCount">标注统计</span>
			</div>
			<!--图-->
			<div>
				<div class="monthSelect" style="color: #666;margin: 10px 0 0 10px;">
					<label style="color: #eee;">可选择月份：</label>
					<input type="text" class="input" id="case_month">
					<span class="confirm-btn" data-id="case_month">确定</span>
				</div> 
				
				<div id="dealCount"  class="picBlock dealCount" style="height:400px;width:100%;"></div>				
				<div id="markCount" class="picBlock markCount" style="height:400px;width:100%;"></div>
			</div>
		</div>
	</div>
	
	<script src="${ctx}/js/lib/jquery-1.11.1.min.js"></script>
	<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
	<!--<script src="${ctx}/component/My97DatePicker/WdatePicker.js" type="text/javascript"></script>-->
	<script src="${ctx}/js/lib/echarts3.1.10.js"></script>
	<script src="${ctx}/js/lib/jquery.monthpicker.js"></script> <!--选月份的插件-->
	<script>
	     $(function () {
			$(".resultCon").perfectScrollbar();
			resize();
            $(window).resize(function(){
				resize();
			});	
			//默认隐藏
			$(".markCount").hide();
			//选项卡
			$(".selected span").click(function(){
				//$("#minY").val("");
				//$("#maxY").val("");
				$(".picBlock").hide();
				$(".selected").children().removeClass("active3");
				$(this).addClass("active3");
				var classed = $(this).data("classed");
				$("."+classed).show();
				$("."+classed).css("display","");
			})

			//月份可选
			var time = new Date();
			var ye = time.getFullYear(),mo=(time.getMonth() + 1)<9?"0"+(time.getMonth() + 1):(time.getMonth() + 1);
			var reTime=ye+"-"+mo;				
			var year=[];
			for(var i=0;i<5;i++){
				year.push(ye);
				ye--;
			}
			$('#case_month').attr("value",reTime);
		   	$('#case_month').monthpicker({ 
		        years: year, 
		        topOffset: 6, 
		        onMonthSelect: function(m, y) { 
		          console.log('Month: ' + m + ', year: ' + y); 
		        } 
		    });
		    $(".monthpicker").css("margin-left","255px");
		    $(".monthpicker").css("margin-top","50px");
			//点击确定切换，
			$(".confirm-btn").click(function(){
				var id = $(".selected .active3").data("id");
				var idVal=$("#"+$(this).data("id")).val();
				//时间判断及处理
				/*var start = $("#minY").val().toString();
				var end = $("#maxY").val().toString();
				var minTime = new Date(Date.parse(start.replace(/-/g,"/")));
				var maxTime = new Date(Date.parse(end.replace(/-/g,"/")));
				if(minTime.getTime()>maxTime.getTime()){
					alert("起始时间不能大于终止时间！");
					return false;					
				}		*/	
				
				if(id=="dealCount"){ //处理时间选择
					//alert("处理");
					caseNumChart.showLoading();//处理
					$.ajax({
						type:"POST",
						url:"${ctx}/sysPersonal/getFinishBySelf.do",
						data:{date:idVal},
						success:function(result){
							setCaseNum(result);				    			
						}
					});
				}else if(id=="markCount"){  //标注时间选择
					//alert("标注");
					markCountChart.showLoading();//标注
					$.ajax({
						type:"POST",
						url:"${ctx}/sysPersonal/getMarkBySelf.do",
						data:{date:idVal},
						success:function(result){
							setMarkCount(result);							
						}
					});
				}				    	
			})
			
	    });
	    function resize(){
			//获取窗口高度
			var windowheight=$(window).height();
			var leftList = windowheight-40;
			$(".searchCon").css({"height":leftList+"px"});
			$(".resultCon").css({"height":leftList-12+"px"});
			$(".picCon").css({"height":leftList-12-70+"px"});
			//$(".tableMain").css({"height":windowheight-40-42-131+"px"});
			//$(".table_list").css({"height":windowheight-40-42-100-85+"px"});
			$(".resultCon").perfectScrollbar("update");
		}
		
		//处理趋势图
		var caseNumChart = echarts.init(document.getElementById("dealCount"));
		function setCaseNum(result){
			/*var result = {
				data:{
					title:{text: '分配任务趋势和已完成任务趋势图'},
					legend:["已处理","未处理"],
					x:['2017-08-01','2017-08-02','2017-08-03','2017-08-04','2017-08-05','2017-08-06'],
					y:{
						"已处理":[1098,980,1308,450,234,880],
						"未处理":[109,90,308,450,234,80]
					},
					data:{data1:[1098,980,1308,450,234,880],data2:[109,90,308,450,234,80]},
					col:["#C23531"]
				}
			};*/
			caseNumChart.setOption(getLineOption(result));
			caseNumChart.hideLoading();
		}
		
		//标注趋势图
		var markCountChart = echarts.init(document.getElementById("markCount"));
		function setMarkCount(result){
			/*var result = {
				data:{
					title:{text: '标注趋势图'},
					legend:["正常","可疑","欺诈","未标注"],
					x:['2017-08-01','2017-08-02','2017-08-03','2017-08-04','2017-08-05','2017-08-06'],
					y:{
						"正常":[1098,980,1308,450,234,880],
						"可疑":[109,90,308,450,234,80],
						"欺诈":[10,80,130,40,34,80],
						"未标注":[9,970,368,410,134,180]
					},
					col:["#C23531"]
				}
			};*/
			markCountChart.setOption(getbarOption(result));
			markCountChart.hideLoading();
		}
		//初始化
		function init(){
			/*setCaseNum();
			setMarkCount();*/
			caseNumChart.showLoading();//处理
			$.ajax({
				type:"POST",
				url:"${ctx}/sysPersonal/getFinishBySelf.do",
				data:{},
				dataType:"json",
				success:function(result){
					setCaseNum(result);
				},
				error:function(){
					
				}
			});
			markCountChart.showLoading();//标注
			$.ajax({
				type:"POST",
				url:"${ctx}/sysPersonal/getMarkBySelf.do",
				data:{},
				dataType:"json",
				success:function(result){
					setMarkCount(result);
				},
				error:function(){
					
				}
			});
		}
		init();
		/*
		 *  画折线图2
		 */
		function getLineOption(data){
			option = {
				title :[{
					text:"data.title.text",
					x:'center',
					textStyle:{
						color:"#fff"
					}
				}],
				tooltip : {
					trigger: 'axis'
				},
				legend: {
					right:6,
					data:data.legend,
					textStyle:{
						color:'#fff'
					}
				},
				/*toolbox: {
					show : true,
					feature : {
						mark : {show: true},
						dataView : {show: true, readOnly: false},
						magicType : {show: true, type: ['line', 'bar']},
						restore : {show: true},
						saveAsImage : {show: true}
					}
				},*/
				calculable : true,
				xAxis : [
					{
						type: 'category',
						data: data.x,
						boundaryGap:false,
						axisTick:{show:true,inside:true},
						splitLine:{show:false},
						axisLine:{
							lineStyle:{
								color:"#1C3042"
							}
						},
						axisLabel:{
							interval:0,
							rotate:45,
							textStyle:{color:"#ffffff",fontSize:8}
						},
						axisPointer:{
							show:true
						}
					}
				],
				yAxis : [
					{
						type : 'value',
						axisLabel : {
							formatter: '{value} ',
							textStyle:{color:"#ffffff",fontSize:8}
						},
						splitLine:{
							show:false
						},
						axisLine:{
							lineStyle:{
								color:"#1C3042"
							}
						}
					}
				],
				series : [
					{
						name:'个人完成情况趋势',
						type:'line',
						data:data.data.data1,
						markPoint : {
							data : [
								{type : 'max', name: '最大值'},
								{type : 'min', name: '最小值'}
							]
						},
						markLine : {
							data : [
								{type : 'average', name: '平均值'}
							]
						},
						lineStyle:{
							normal:{
								color:"rgb(243, 88, 51)"
							}
						},
						itemStyle:{
							normal:{
								color:"rgb(243, 88, 51)"
							}
						},
						smooth:true	
					},
					{
						name:'个人申请案件趋势',
						type:'line',
						data:data.data.data2,
						markPoint : {
							data : [
								{type : 'max', name: '最大值'},
								{type : 'min', name: '最小值'}
							]
						},
						markLine : {
							data : [
								{type : 'average', name: '平均值'}
							]
						},
						lineStyle:{
							normal:{
								color:"rgb(255, 204, 0)"
							}
						},
						itemStyle:{
							normal:{
								color:"rgb(255, 204, 0)"
							}
						},
						smooth:true	
					}
				]
			};
			return option;
		}
		/*
		 *  条形图
		 */
		function getbarOption(data){
			Array.prototype.push.apply(data.legend);
			var option = {
			    title : [{
					text: "data.title.text",
					subtext: '',
					x:'center',
					y:"1%",
					textStyle:{
						color:"#fff",
					},
					textAlign: 'center'
				}],
				legend: [{
					orient: 'horizontal',
					top:"5",
					right:"0",
					data: data.legend,
					textStyle:{
						color:"#fff"
					}
				}],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#fff'
						}
					}
				},
				grid:[{
					top:40,
					width:'97%',
					bottom:80,
					right:8,
					containLabel:true
				}],
				dataZoom:{
					show:true,
					height:20,
					dataBackground:{
						lineStyle:{
							color:"rgb(255, 204, 0)"
						},
						areaStyle:{
							color:"rgba(222, 147, 37,0.5)"
						}
					},
					fillerColor:'rgba(255, 204, 0,0.5)',
					realtime:true,
					textStyle:{
						color:'#fff'
					},
					start:0,
					end:100,
					bottom:0
				},
				xAxis: [
						{
							type: 'category',
							data: data.x,
							axisTick:{show:true,inside:true},
							splitLine:{show:false},
							axisLine:{
								lineStyle:{
									color:"#1C3042"
								}
							},
							axisLabel:{
								interval:0,
								rotate:45,
								textStyle:{color:"#ffffff",fontSize:8}
							},
							axisPointer:{
								show:true
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							name: '个数',
							nameTextStyle: {
								color:"#ffffff"
							},
							axisTick:{show:false},
							splitLine:{
								show:false,
							},
							axisLine:{
								lineStyle:{
									color:"#1C3042"
								}
							},
							axisLabel:{
								textStyle:{
									color:"#ffffff",
									fontSize:12
								}
							}
						}
					],
				series : []
			};
			for(var i=0;i<data.legend.length;i++){
				option.series.push({
					type:"bar",
					name:data.legend[i],
					data:data.y[data.legend[i]]
				})
			}
			return option;
		}
	</script>
	<%@ include file="/include/footer.jsp"%>
</body>
</html>
