<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = path + "/common/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="/favicon.ico" >
<LINK rel="Shortcut Icon" href="/favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" src="<%=basePath %>adminlib/html5.js"></script>
<script type="text/javascript" src="<%=basePath %>adminlib/respond.min.js"></script>
<script type="text/javascript" src="<%=basePath %>adminlib/PIE_IE678.js"></script>
<![endif]-->
<link href="<%=basePath %>admin/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath %>admin/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath %>admin/css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath %>admin/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>搜索日志</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 统计 <span class="c-gray en">&gt;</span> 统计 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="pd-20">
	<div class="text-c">
		<input type="text" readonly="readonly" onfocus="WdatePicker({minDate:'2016-12-06', maxDate:'%y-%M-{%d}',dateFmt:'yyyy.MM.dd'})" id="search-date" name="endDate" class="input-text Wdate" style="width: 120px;">
		<button name="" id="search-btn" class="btn btn-success" type="button">
			<i class="Hui-iconfont">&#xe665;</i> 统计PV/UV
		</button>
		<span></span>
		<button name="" id="search-driver-btn" class="btn btn-success" type="button">
			<i class="Hui-iconfont">&#xe665;</i> 统计手机型号
		</button>	
  </div>
</div>
<div class="pd-20">
	<div id="container" style="min-width:700px;height:400px"></div>
</div>
<script type="text/javascript" src="<%=basePath %>admin/lib/jquery/1.9.1/jquery.min.js"></script>  
<script type="text/javascript" src="<%=basePath %>admin/lib/layer/1.9.3/layer.js"></script> 
<script type="text/javascript" src="<%=basePath %>admin/lib/laypage/1.2/laypage.js"></script> 
<script type="text/javascript" src="<%=basePath %>admin/lib/My97DatePicker/WdatePicker.js"></script> 
<script type="text/javascript" src="<%=basePath %>admin/js/H-ui.js"></script> 
<script type="text/javascript" src="<%=basePath %>admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="<%=basePath %>admin/lib/Highcharts/4.1.7/js/highcharts.js"></script>
<script type="text/javascript" src="<%=basePath %>admin/lib/Highcharts/4.1.7/js/modules/exporting.js"></script>
<script type="text/javascript">
	$(function() {
		$("#search-btn").click(function() {
			
			// 搜索的时间
			var searchDate = $("#search-date").val();
			if (searchDate == null || searchDate == "") {
				layer.msg("请选择要搜索的时间!",{icon:5,time:2000});
			}
			
			var args = {"date":searchDate};
			var url = "${pageContext.request.contextPath}/admin/logs/search";
			var titles = new Array();
			var pvs = new Array();
			var uvs = new Array();
			// 开始搜索
			$.ajax({
				   type: "POST",
				   url: url,
				   data: args,
				   dataType: "json",
				   success: function(data){
					   for (var i = 0; i < data.aggregations.data.buckets.length; i++) {
						   var bu = data.aggregations.data.buckets[i];
						   var date = new Date(bu.key);
						   titles[i] = (date.getDate() + "日" + (date.getHours() + 1) + "点");
						   pvs[i] = bu.doc_count;
						   uvs[i] = bu.data.value;
					   }
					   // 重新渲染视图
					   $('#container').highcharts({
					        title: {
					            text: 'PV、UV统计',
					            x: -20 //center
					        },
					        subtitle: {
					            text: '来源: www.iamberry.com',
					            x: -20
					        },
					        xAxis: {
					            categories: titles
					        },
					        yAxis: {
					            title: {
					                text: '统计'
					            },
					            plotLines: [{
					                value: 0,
					                width: 1,
					                color: '#808080'
					            }]
					        },
					        tooltip: {
					            valueSuffix: '个'
					        },
					        legend: {
					            layout: 'vertical',
					            align: 'right',
					            verticalAlign: 'middle',
					            borderWidth: 0
					        },
					        series: [{
					            name: 'PV',
					            data: pvs
					        }, {
					            name: 'UV',
					            data: uvs
					        }]
					    });
					   
					   // 隐藏 Highcharts.com
					   $("text").each(function(){
				 	 	if($(this).text()=="Highcharts.com"){
				 	 		$(this).hide();
				 	 	}
				 	 });
				   }
			});
		});
		
		// 检索driver
		$("#search-driver-btn").click(function() {
			// 搜索的时间
			var searchDate = $("#search-date").val();
			if (searchDate == null || searchDate == "") {
				layer.msg("请选择要搜索的时间!",{icon:5,time:2000});
			}
			
			// 开始搜索
			var args = {"date":searchDate};
			var url = "${pageContext.request.contextPath}/admin/logs/driver";
			$.ajax({
				   type: "POST",
				   url: url,
				   data: args,
				   dataType: "json",
				   success: function(data){
					   
					   var as = new Array();
					   for (var i = 0; i < data.aggregations["userDevice.os_name"].buckets.length; i++) {
						   var bu = data.aggregations["userDevice.os_name"].buckets[i];
						   as[i] = new Array();
						   as[i][0] = bu.key;
						   as[i][1] = bu.doc_count;
					   }
					   
					   var i = data.aggregations["userDevice.os_name"].buckets.length;
					   as[i] = new Array();
					   as[i][0] = "其他";
					   as[i][1] = data.aggregations["userDevice.os_name"].sum_other_doc_count;
					   
					   // 重新绘制视图
					   $('#container').highcharts({
					        chart: {
					            plotBackgroundColor: null,
					            plotBorderWidth: null,
					            plotShadow: false
					        },
					        title: {
					            text: '来源：www.iamberry.com  统计访问终端'
					        },
					        tooltip: {
					    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
					        },
					        plotOptions: {
					            pie: {
					                allowPointSelect: true,
					                cursor: 'pointer',
					                dataLabels: {
					                    enabled: true,
					                    color: '#000000',
					                    connectorColor: '#000000',
					                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
					                }
					            }
					        },
					        series: [{
					            type: 'pie',
					            name: '访问终端统计',
					            data: as
					        }]
					    });
					   
						// 隐藏 Highcharts.com
					   	$("text").each(function(){
					 	 	if($(this).text()=="Highcharts.com"){
					 	 		$(this).hide();
					 	 	}
					   	});
				   }
			});
		});
	});
</script>
</body>
</html>