<!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>
	
	<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/sys/js/My97DatePicker/WdatePicker.js}"></script>

<style type="text/css">
	.input-group{
		width: 200px;
   	 	float: left;
   	 	margin-bottom:0px;
   	 	margin-left: 10px;
   	 	margin-right: 10px
	}
	
	.s-index-side .title h3{
		padding-left: 10px;
	    font-weight: 800;
	    border-bottom: 0px solid #d8d8d8;
	    line-height: 50px;
	}
	
	.s-index-side .title {
		height: 50px;
		line-height: 50px;
	}

</style>

</head>
<body>
<section class="wrapper">
    <div style="text-align: center"><h1>系统数据汇总分析</h1></div>
</section>

<div style="width: 98%; padding-left: 20px;">
	<div class="s-index-side" style="width: 100%;margin-bottom: 10px">
		<div class="title">
			<h3 style="color: #FF4E00;float: left;">月度使用率汇总 </h3>
			<div style="height: 40px;padding-top: 11px;float: left;">
				<div >
					<div class="input-group">
						<span class="input-group-addon addonclick_id-calendar" id="basic-addon1"><i class="fa fa-calendar"></i></span>
						<input type="text" id="calendar" placeholder="test" class="form-control"  autocomplete="off"   onclick="WdatePicker({dateFmt: 'yyyy-MM',maxDate:'%y-%M'})">
					</div>
				</div>
			</div>
			<div style="height: 40px;padding-top: 3px;float: left;">
				<button class="btn btn-large btn-primary" type="button" id="calendarBtu">刷新</button>
			</div>
		</div>
		<div>
			<div id="pieCar" style="width: 100%;margin:0px auto; height:300px;margin-bottom: 30px"></div>
		</div>
	</div>
</div>


<div style="width: 98%; padding-left: 20px;">
	<div class="s-index-side" style="width: 100%;margin-bottom: 10px">
		<div class="title">
			<h3 style="color: #FF4E00;float: left;">月度使用率排行TOP10 </h3>
			<div style="height: 40px;padding-top: 11px;float: left;">
				<div >
					<div class="input-group">
						<span class="input-group-addon addonclick_id-calendar" id="basic-addon1"><i class="fa fa-calendar"></i></span>
						<input type="text" id="calendar1" placeholder="test" class="form-control"  autocomplete="off"   onclick="WdatePicker({dateFmt: 'yyyy-MM',maxDate:'%y-%M'})">
					</div>
				</div>
			</div>
			<div style="height: 40px;padding-top: 3px;float: left;">
				<button class="btn btn-large btn-primary" type="button" id="calendar1Btu">刷新</button>
			</div>
		</div>
		<div>
			<div id="categoryCar" style="width: 100%;margin:0px auto; height:300px;margin-bottom: 30px"></div>
		</div>
	</div>
</div>


<!-- <div style="width: 98%;height: 434px; padding-left: 20px;"> -->

<!-- 	<div class="s-index-side" style="width: 100%;margin-bottom: 10px"> -->
<!-- 		<div class="title"> -->
<!-- 			<h3 style="color: #FF4E00;float: left;"> </h3> -->
<!-- 			<div style="height: 40px;padding-top: 3px;float: left;"> -->
<!-- 				<div > -->
<!-- 					<div class="input-group"> -->
<!-- 						<span class="input-group-addon addonclick_id-calendar" id="basic-addon1"><i class="fa fa-calendar"></i></span> -->
<!-- 						<input type="text" id="calendar2" placeholder="test" class="form-control"> -->
<!-- 					</div> -->
<!-- 				</div> -->
<!-- 			</div> -->
<!-- 			<div style="height: 40px;padding-top: 3px;float: left;"> -->
<!-- 				<button class="btn btn-large btn-primary" type="button" id="userAddBtu">刷新</button> -->
<!-- 			</div> -->
<!-- 		</div> -->
<!-- 			<ul class="weekly-list cls" id="top"> -->
<!-- 				<li><div class="app-show-title"> -->
<!-- 						<span class="num s-index-org">1.</span>越南寻宝记<span -->
<!-- 							class="num s-index-org" style="float: right;">55次</span> -->
<!-- 					</div></li> -->
<!-- 				<li><div class="app-show-title"> -->
<!-- 						<span class="num s-index-org">2.</span>我的第一本科学漫画书·寻宝系列7 希腊寻宝记<span -->
<!-- 							class="num s-index-org" style="float: right;">53次</span> -->
<!-- 					</div></li> -->
<!-- 				<li><div class="app-show-title"> -->
<!-- 						<span class="num s-index-org">3.</span>思乡的皇帝<span -->
<!-- 							class="num s-index-org" style="float: right;">50次</span> -->
<!-- 					</div></li> -->
<!-- 				<li><div class="app-show-title"> -->
<!-- 						<span class="num s-index-org">4.</span>加拿大寻宝记<span -->
<!-- 							class="num s-index-org" style="float: right;">49次</span> -->
<!-- 					</div></li> -->
<!-- 				<li><div class="app-show-title"> -->
<!-- 						<span class="num s-index-org">5.</span>我的第一本科学漫画书·寻宝系列4 埃及寻宝记<span -->
<!-- 							class="num s-index-org" style="float: right;">46次</span> -->
<!-- 					</div></li> -->
<!-- 				<li><div class="app-show-title"> -->
<!-- 						<span class="num s-index-org">6.</span>病毒世界历险记<span -->
<!-- 							class="num s-index-org" style="float: right;">44次</span> -->
<!-- 					</div></li> -->
<!-- 				<li><div class="app-show-title"> -->
<!-- 						<span class="num s-index-org">7.</span>墨西哥寻宝记/我的第一本科学漫画书<span -->
<!-- 							class="num s-index-org" style="float: right;">43次</span> -->
<!-- 					</div></li> -->
<!-- 				<li><div class="app-show-title"> -->
<!-- 						<span class="num s-index-org">8.</span>我的第一本科学漫画书·寻宝系列30 芬兰寻宝记<span -->
<!-- 							class="num s-index-org" style="float: right;">41次</span> -->
<!-- 					</div></li> -->
<!-- 				<li><div class="app-show-title"> -->
<!-- 						<span class="num s-index-org">9.</span>我的第一本科学漫画书·寻宝系列5 美国寻宝记<span -->
<!-- 							class="num s-index-org" style="float: right;">40次</span> -->
<!-- 					</div></li> -->
<!-- 				<li><div class="app-show-title"> -->
<!-- 						<span class="num s-index-org">10.</span>我的第一本科学漫画书·寻宝系列15 泰国寻宝记<span -->
<!-- 							class="num s-index-org" style="float: right;">39次</span> -->
<!-- 					</div></li> -->
<!-- 			</ul> -->
<!-- 		</div> -->
	
<!-- </div> -->

<script>
	$(document).ready(function() {
		 document.getElementById("calendar").value = today();
		 document.getElementById("calendar1").value = today();
		
		$("#calendarBtu").on('click',function(){
			getDataCount();
		});
		
		$("#calendar1Btu").on('click',function(){
			getDataTop();
		});
	});
	
 
function today(){
    var today=new Date();
    var h=today.getFullYear();
    var m=today.getMonth()+1;
    var d=today.getDate();
    var hh=today.getHours();
    var mm=today.getMinutes();
    var ss=today.getSeconds();
    m= m<10?"0"+m:m;     
    d= d<10?"0"+d:d;
    hh = hh < 10 ? "0" + hh:hh;
    mm = mm < 10 ? "0" +  mm:mm;
    ss = ss < 10 ? "0" + ss:ss;
    return h+"-"+m;
}
	
	
</script>

<script type="text/javascript">
	var pieCar = echarts.init(document.getElementById('pieCar'));
	getDataCount();
	
	function getDataCount(){
		$.ajax({
	        url:"[[${sysUrl}]]/sys/analysis/index/data/count",
	        dataType:'json',
	        cache:false,
	        type:'get',
	        data:{
	        	date:$("#calendar").val()
	        },
	        error:function(){return false;},
	        success:function(data){
					var tmpdata=[];
					tmpdata.push({value:data.data.serviceCount, name:'已使用'+(data.data.serviceCount)+'个'});
					tmpdata.push({value:data.data.portNumCount, name:'总端口'+(data.data.portNumCount)+'个'});
					
					pieCar.setOption({
				  	    title : {
				  	        subtext: '',
				  	        x:'center'
				  	    },
				  	    tooltip : {
				  	        trigger: 'item',
				  	        formatter: "{a} <br/>{b} : {c} ({d}%)"
				  	    },
				  	    series : [
				  	        {
				  	            name: '',
				  	            type: 'pie',
				  	            radius : '80%',
				  	            data:tmpdata
				  	            ,
				  	            itemStyle: {
				  	                emphasis: {
				  	                    shadowBlur: 10,
				  	                    shadowOffsetX: 0,
				  	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				  	                }
				  	            }
				  	        }
				  	    ]
				  	});
	        }
		});
	}
</script>

<script type="text/javascript">
	var categoryCar = echarts.init(document.getElementById('categoryCar'));
	getDataTop();
	
	function getDataTop(){
		$.ajax({
	        url:"[[${sysUrl}]]/sys/analysis/index/data/top",
	        dataType:'json',
	        cache:false,
	        type:'get',
	        data:{
	        	date:$("#calendar1").val()
	        },
	        error:function(){return false;},
	        success:function(data){
	        	var tmpname=[],tmpdata=[];
	        	for (var i = 0; i < data.data.list.length; i++) {
	        		tmpname.push(data.data.list[i].unit_name);
	        		tmpdata.push(data.data.list[i].lcount*100);
				}
	        	
	        	
				categoryCar.setOption( {
				    color: ['#3398DB'],
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
				            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: tmpname,
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value'
				        }
				    ],
				    series: [
				        {
				            name: '比例',
				            type: 'bar',
				            barWidth: '60%',
				            data: tmpdata
				        }
				    ]
				});
	
	        }
		
	     });
	}
</script>

</body>
</html>
