<!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>
      

</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="">
	<input type="hidden" id="e_selectLibId" name="selectLibId" value="">
</form>

	  <div class='countdiv' id="adminSelect" style="display: none;">
		<div class="container" style="margin-left: 15px;padding-left:0px;">
		<h4 style="float: left;line-height: 34px;">选择馆:</h4>
			<div class="col-md-4">
					<select class="form-control" name="libId" id="libIdSelect" >
						<option value=""  >全部</option>
						<option th:each="item:${libList}"  th:value="${item.id}"  th:selected="${ param.selectLibId eq item.id }"  >[[${item.leagueName}]]</option>
					</select>
			</div>
      	</div>
      </div>

<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-2">
					 <div class="col-md-8 market-update-left">
					 <h4></h4>
					<h3 id="userAddNum">0</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 id="signNum">0</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 id="borrowNum">0</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 id="orderDay">0</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-5">
					<div class="col-md-8 market-update-left">
						<h4></h4>
						<h3 id="orderCount">0</h3>
						<p>月累计收益</p>
					</div>
				  <div class="clearfix"> </div>
				</div>
			</div>
		   <div class="clearfix"> </div>
		</div>	
</section>

<br/>
<div style="width: 100%;height: 434px; padding-left: 20px;">

<div class="s-index-side">
		<div class="title">
			<h3 style="color: #FF4E00">借阅图书排行TOP10 </h3>
		</div>
		<ul class="weekly-list cls" id="top">
			
		</ul>
	</div>
		
		
	<div class="s-index-side">
		<div class="title">
			<h3 style="color: #FF4E00" id="counttitle">会员借阅总排行 
			</h3>
		</div>
		<ul class="weekly-list cls" id="topByUser">
		
		</ul>
	
	</div>
	
	<div class="s-index-side">
		<div class="title">
			<h3 style="color: #FF4E00" id="daytitle">会员借阅月排行 </h3>
		</div>
		<ul class="weekly-list cls" id="topByDayUser">
			
		</ul>
	
	</div>
</div>




<br/>
<hr style=" height:1px;border:none;border-top:1px  solid #185598;margin-bottom: 0px;" />

	<div>
	     <div class='countdiv'>
		<div class="container">
			<div class="col-md-6">
				<h3 style="color: #49afcd">会员增长曲线</h3>	
			</div>
				<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-addon1"><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">
					<p>
					  <button class="btn btn-large btn-primary" type="button" id="userAddBtu">確定</button>
					    &nbsp;
					  <button class="btn btn-large btn-primary" type="button" id="userAddBtuReport">导出</button>
					</p>
				</div>
			
      </div>
      		<script>
			$(document).ready(function() {
				$("#calendar").bootstrapDatepickr({date_format: "Y-m-d"});
				$("#calendar1").bootstrapDatepickr({date_format: "Y-m-d"});
				
				$("#userAddBtuReport").on('click',function(){
					$('#e_type').val("USERADD");
					$('#e_startDate').val($("#calendar").val());
					$('#e_endDate').val($("#calendar1").val());
					$('#e_selectLibId').val($("#libIdSelect").val());
					document.getElementById("exportfrom").action = "[[${sysUrl}]]/sys/report/exportUserAndOrder";
					$("#exportfrom").submit();
				});
				
			});
		</script>
      </div>
	
	
	    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	     <div id="addUserNum" style="width: 100%;height:400px;margin-bottom: 30px"></div>
	</div>  
<br/>
<hr style=" height:1px;border:none;border-top:1px  solid #185598;margin-bottom: 0px;" />

     <div>
     <div class='countdiv'>
    	
     	<div class="container">
			<div class="col-md-6">
				<h3 style="color: #49afcd">营业额增长曲线</h3>	
			</div>
				<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="calendar2" 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-addon1"><i class="fa fa-calendar"></i></span>
						<input type="text" id="calendar3" placeholder="test" class="form-control">
					</div>
				</div>
				<div class="col-md-1.5">
					<p>
					  <button class="btn btn-large btn-primary" type="button" id="orderBtu">確定</button>
					  &nbsp;
					  <button class="btn btn-large btn-primary" type="button" id="orderBtuReport">导出</button>
					</p>
				</div>
      	</div>
      		<script>
			$(document).ready(function() {
				$("#calendar2").bootstrapDatepickr({date_format: "Y-m-d"});
				$("#calendar3").bootstrapDatepickr({date_format: "Y-m-d"});
				
				$("#orderBtuReport").on('click',function(){
					$('#e_type').val("ORDERDAY");
					$('#e_startDate').val($("#calendar2").val());
					$('#e_endDate').val($("#calendar3").val());
					$('#e_selectLibId').val($("#libIdSelect").val());
					document.getElementById("exportfrom").action = "[[${sysUrl}]]/sys/report/exportUserAndOrder";
					$("#exportfrom").submit();
				});
				
			});
		</script>
		     
     </div>
     	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->	
     	<div id="signNumCar" style="width: 100%;height:400px;margin-bottom: 30px"></div>
     </div>
    



<br/>
<hr style=" height:1px;border:none;border-top:1px  solid #185598;margin-bottom: 0px;" />
     <div class='countdiv' >
    	
     	<div class="container">
			<div class="col-md-9">
				<h3 style="color: #49afcd">到馆活跃度比例</h3>	
			</div>
				<div class="col-md-2" >
					
				</div>
				<div  style="float: left;width: 40px;" >
					
				</div>
			
				<div class="col-md-1.5" th:if="${ #httpSession.getAttribute('admin') !=null   &&  ( #lists.contains(#httpSession.getAttribute('admin').orgcodeList, 'SSJ-SSJ-CW') || #httpSession.getAttribute('admin').loginName eq 'admin' )  }">
					<p>
					  <button class="btn btn-large btn-primary" type="button" id="userABtuReport">导出</button>
					</p>
				</div>
      	</div>
		     <script>
			$(document).ready(function() {
				$("#calendar4").bootstrapDatepickr({date_format: "Y-m-d"});
				$("#calendar5").bootstrapDatepickr({date_format: "Y-m-d"});
				

				$("#userABtuReport").on('click',function(){
					$('#e_selectLibId').val($("#libIdSelect").val());
					document.getElementById("exportfrom").action = "[[${sysUrl}]]/sys/report/exportActivity";
					$("#exportfrom").submit();
				});
				
			});
			</script>
     </div>
	<br/>

<div>
	  <div style="width: 100%;height: 70px;position: absolute;z-index: 10000;margin-left: 11%;margin-top: 300px">
	  	<p style=""><span style="color:#d53a35">活跃状态：</span>近30天处于有书籍借阅状态，有到馆离馆记录</p>
	  	<p style=""><span style="color:#334b5c">即将沉默：</span>近30天无到馆记录，但以往有签到记录   </p>
	  	<p style=""><span style="color:#6ab0b8">已沉默：</span>近60天无任何使用记录</p>
	  		
	  </div>
	  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	  <div id="pieCar" style="width: 80%;margin:0px auto; height:400px;margin-bottom: 30px"></div>


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



    
     <script type="text/javascript">
    	var path="[[${sysUrl}]]";
    	var curLibId="[[${curLibId}]]";
    	var selectLibId="[[${param.selectLibId}]]";
        // 基于准备好的dom，初始化echarts实例
        var addUserNum = echarts.init(document.getElementById('addUserNum'));
        var signNumCar = echarts.init(document.getElementById('signNumCar'));
        var pieCar = echarts.init(document.getElementById('pieCar'));
        
    </script>
    <script type="text/javascript" th:src="@{/static/sys/js/counter.js}"></script>
    
</body>
</html>
