<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>

	<script type="text/javascript" th:src="@{/static/js/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/static/sys/js/meun/jquery/jquery-1.9.1.min.js}"></script>

<!-- bootstrap-css -->
<link rel="stylesheet" th:href="@{/static/sys/css/counter/bootstrap.min.css}" >	
<link th:href="@{/static/sys/css/counter/style.css}" rel='stylesheet' type='text/css' />
<link th:href="@{/static/sys/css/counter/styletop.css}" rel='stylesheet' type='text/css' />

<link rel="stylesheet" th:href="@{/static/sys/css/counter/font-awesome.min.css}">
<link rel="stylesheet" th:href="@{/static/sys/css/counter/bootstrapDatepickr-1.0.0.css}">
<script th:src="@{/static/sys/js/counter/bootstrapDatepickr-1.0.0.min.js}"></script>
      
<style>
	.btn-export{
		margin-right: 10px;
		margin-top:3px;
		float: right;
	}
	.my-s-index-side{
		width:41%;
		margin-top:10px;
	}
	.margin-s-index-side{
		margin-top:10px;
	}
	.float-s-index-side{
		float: right;
		margin-right:20px;
	}
	.current{
		color: #2a91d8;
	}
</style>
</head>
<body>	
<form id="exportFrom" method="post" action="">
	<input type="hidden" id="e_type" name="type" value="">
	<input type="hidden" id="e_startDate" name="startDate" value="">
	<input type="hidden" id="e_endDate" name="endDate" value="">
</form>

<section class="wrapper">
		<!-- //market-->
		<div class="market-updates">
			<div class="col-md-3 market-update-gd" style="width: 20%">
				<div class="market-update-block clr-block-4">
					 <div class="col-md-8 market-update-left">
					 <h4></h4>
					<h3>[[${activeCount}]]</h3>
					<p>昨日活跃总人数</p>
				  </div>
				  <div class="clearfix"> </div>
				</div>
			</div>
			<div class="col-md-3 market-update-gd" style="width: 20%">
				<div class="market-update-block clr-block-2">
					 <div class="col-md-8 market-update-left">
					 <h4></h4>
					<h3>[[${totolCount}]]</h3>
					<p>昨日上传作业总数</p>
				  </div>
				  <div class="clearfix"> </div>
				</div>
			</div>
			<div class="col-md-3 market-update-gd" style="width: 20%">
				<div class="market-update-block clr-block-1">
					<div class="col-md-8 market-update-left">
					<h4></h4>
						<h3>[[${chineseCount}]]</h3>
						<p>昨日语文上传作业总数</p>
					</div>
				  <div class="clearfix"> </div>
				</div>
			</div>
			<div class="col-md-3 market-update-gd" style="width: 20%">
				<div class="market-update-block clr-block-3">
					<div class="col-md-8 market-update-left">
						<h4></h4>
						<h3>[[${shuxueCount}]]</h3>
						<p>昨日数学上传作业总数</p>
					</div>
				  <div class="clearfix"> </div>
				</div>
			</div>
			<div class="col-md-3 market-update-gd" style="width: 20%">
				<div class="market-update-block clr-block-4">
					<div class="col-md-8 market-update-left">
						<h4></h4>
						<h3>[[${englishCount}]]</h3>
						<p>昨日英语上传作业总数</p>
					</div>
				  <div class="clearfix"> </div>
				</div>
			</div>
		   <div class="clearfix"> </div>
		</div>	
</section>

<br/>
<div style="margin-left: 20%" class="wrapper">
	<div class="col-md-2">
		<div class="input-group">
			<span class="input-group-addon" id="basic-addon1"><i class="fa fa-calendar"></i></span>
			<input type="text" id="calendar" placeholder="test" class="form-control">
		</div>
	</div>
	<div  style="float: left;width: 40px;">
		<p>
			<a href="#" class="btn btn-large disabled">TO</a>
		</p>
	</div>
	<div class="col-md-2">
		<div class="input-group">
			<span class="input-group-addon" id="basic-addon2"><i class="fa fa-calendar"></i></span>
			<input type="text" id="calendar1" placeholder="test" class="form-control">
		</div>
	</div>
	<div class="col-md-1.5">
			<button class="btn btn-large btn-primary" type="button" id="userAddBtu">确定</button>
	</div>
</div>
<br/>
<div style="width: 100%;height: 434px; padding-left: 20px;">
	<div class="s-index-side my-s-index-side">
		<div class="title">
			<h3 style="color: #FF4E00">上传作业总数排行 <button class="btn btn-large btn-primary btn-export" type="button" id="userAddBtuReport">导出</button></h3>
		</div>
		<ul class="weekly-list cls" id="top">
			
		</ul>
	</div>

	<div class="s-index-side my-s-index-side float-s-index-side">
		<div class="title">
			<h3 style="color: #FF4E00">活跃度排行(活跃人数/总人数) <button class="btn btn-large btn-primary btn-export" type="button" id="userAddBtuReport0">导出</button></h3>
		</div>
		<ul class="weekly-list cls" id="top2">

		</ul>
	</div>
	<br/>
</div>

<script>
	$(document).ready(function() {
		$("#calendar").bootstrapDatepickr({date_format: "Y-m-d"});
		$("#calendar1").bootstrapDatepickr({date_format: "Y-m-d"});
		$('#calendar').val(getCurrentMonthFirst());
		$('#calendar1').val(getNowFormatDate());
		$('#e_startDate').val($("#calendar").val());
		$('#e_endDate').val($("#calendar1").val());
		$("#userAddBtuReport").on('click',function(){
			$('#e_type').val("");
			exportInfo();
		});
		$("#userAddBtuReport0").on('click',function(){
			exportActiveInfo();
		});
		$("#userAddBtu").on('click',function(){
			showTopByUser(1);
			showTopByActive(1);
		});
	});
	function exportInfo(){
		$('#e_startDate').val($("#calendar").val());
		$('#e_endDate').val($("#calendar1").val());
		document.getElementById("exportFrom").action = "[[${sysUrl}]]/sys/admin/curator/exportInfo";
		$("#exportFrom").submit();
	}

	function exportActiveInfo(){
		$('#e_startDate').val($("#calendar").val());
		$('#e_endDate').val($("#calendar1").val());
		document.getElementById("exportFrom").action = "[[${sysUrl}]]/sys/admin/curator/exportActiveInfo";
		$("#exportFrom").submit();
	}
	$(function(){
		showTopByUser(1);
		showTopByActive(1);
	});
	var path="[[${sysUrl}]]";
	function showTopByUser(pageNo){
		var startDate = $("#calendar").val();
		var endDate = $("#calendar1").val();
		var pageSize = $("#pageSize").val();
		$.ajax({
			url:path+"/sys/admin/curator/searchTop",
			dataType:'json',
			cache:false,
			type:'get',
			data:{
				'subject':"",
				'startDate':startDate,
				'endDate':endDate,
				'pageNo':pageNo,
				'pageSize':pageSize
			},
			error:function(){return false;},
			success:function(data){
				var tmphtml=[],obj=data.data.list;
				for(var i=0,len=obj.length;i<len;i++){
					tmphtml.push('<li><div class="app-show-title"><span class="num s-index-org">'+(i+1)+'.</span>'+obj[i].league_name+'<span class="num s-index-org" style="float: right;">'+obj[i].totolCount+'份</span></div></li>');
				}
				tmphtml.push("<div style='float:right;margin-right: 20px'>");
				tmphtml.push("<div>"+data.data.listNavigatHtml+"</div></div>")
				$("#top").html(tmphtml.join(''));
			}
		});
	}
	function showTopByActive(pageNo){
		var startDate = $("#calendar").val();
		var endDate = $("#calendar1").val();
		var pageSize = $("#pageSize").val();
		$.ajax({
			url:path+"/sys/admin/curator/searchActiveTop",
			dataType:'json',
			cache:false,
			type:'get',
			data:{
				'startDate':startDate,
				'endDate':endDate,
				'pageNo':pageNo,
				'pageSize':pageSize
			},
			error:function(){return false;},
			success:function(data){
				var tmphtml=[],obj=data.data.list;
				for(var i=0,len=obj.length;i<len;i++){
					tmphtml.push('<li><div class="app-show-title"><span class="num s-index-org">'+(i+1)+'.</span>'+obj[i].league_name+'('+obj[i].sign_type+')'+'<span class="num s-index-org" style="float: right;">'+Math.round(obj[i].percent)+'%</span>'+'<span class="num s-index-org" style="float:right;margin-right:20%">'+obj[i].active_count+'/'+obj[i].all_vips+'</span></div></li>');
				}
				tmphtml.push("<div style='float:right;margin-right: 20px'>");
				tmphtml.push("<div>"+data.data.listNavigatHtml+"</div></div>")
				$("#top2").html(tmphtml.join(''));

			}
		});
	}

	//获取当前月份
	function getNowFormatDate() {
		var date = new Date();
		var seperator1 = "-";
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var strDate = date.getDate();
		if (month >= 1 && month <= 9) {
			month = "0" + month;
		}
		if (strDate >= 0 && strDate <= 9) {
			strDate = "0" + strDate;
		}
		var currentdate = year + seperator1 + month + seperator1 + strDate ;
		return currentdate;
	};



	//获取所选月份的第一天
	 function getCurrentMonthFirst(){
		 var date = new Date();
		 var seperator1 = "-";
		 var year = date.getFullYear();
		 var month = date.getMonth() + 1;
		 var strDate = date.getDate();
		 if(strDate==1){
		 	return getLastMonthLastday();
		 }
		 strDate = '01';
		 if (month >= 1 && month <= 9) {
			 month = "0" + month;
		 }
		 var currentdate = year + seperator1 + month + seperator1 + strDate ;
		 return currentdate;
	};

	 function getLastMonthLastday() {
		 var nowdays = new Date();
		 var year = nowdays.getFullYear();
		 var month = nowdays.getMonth();
		 if(month==0) {
			 month=12;
			 year=year-1;
		 }
		 if (month < 10) {
			 month = "0" + month;
		 }
		 var myDate = new Date(year, month, 0);

		 var lastDay = year + "-" + month + "-" + myDate.getDate();//上个月的最后一天
		 return lastDay;
	 }




</script>
    
</body>
</html>
