usertotal.jsp 7.85 KB
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="<%=request.getContextPath()%>/js/admin/My97DatePicker/WdatePicker.js"></script>
		<%@ include file="/WEB-INF/views/jsp/admin/public/publicjs.jsp"%>
		<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/js/highcharts/highcharts.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/js/highcharts/modules/funnel.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/js/highcharts/highcharts-more.js"></script>
	 
	<script type="text/javascript">
	$(function () {
		
		$("#s_searchBtn").click(function() {
			query("s");
		});
		
	});

	function query(statics){
		var startTime = $("#s_startTime").val();
		var endTime = $("#s_endTime").val();
		var types = $("#types").val();
		var redios = $("input[name='optionsRadios']:checked").val();
		redios=1;
		if(statics=="s"){
			if(startTime==""){
				alert("请选择起日期");
				 $("#s_startTime").focus();
				return;
			}
			if(endTime==""){
				alert("请选择止日期");
				$("#s_endTime").focus();
				return;
			}
			if(types==0){
				alert("请选择统计类型");
				$("#types").focus();
				return;
			}
		}
		$("#dataDiv").empty();
		loading("dataDiv");
		$.post('<%=request.getContextPath()%>/statistics/getRegistUserTotalByMap.html', {
				"startTime" : startTime,
				"endTime" : endTime,
				"types" : types},
				function(data) {  
				loadingEnd("dataDiv");
				if(redios==0){
					$('#container').highcharts({
				        chart: {
				            type: 'column'
				        },
				        title: {
				            text: '注册用户统计分析'
				        },
				        subtitle: {
				            text: '注册用户总数:'+eval("(" + data + ")").dataCounts+'人'
				        },
				        xAxis: {
				            type: 'category',
				            labels: {
				                rotation: -60,
				                style: {
				                    fontSize: '13px',
				                    fontFamily: 'Verdana, sans-serif'
				                }
				            }
				        },
				        yAxis: {
				            min: 0,
				            title: {
				                text: '注册用户(人)'
				            }
				        },
				        legend: {
				            enabled: false
				        },
				        tooltip: {
				            pointFormat: '注册用户: <b>{point.y} 人</b>'
				        },
				        series: [{
				            name: 'Population',
				            data: eval("(" + eval("(" + data + ")").data + ")"),
				            dataLabels: {
				                enabled: true,
				                rotation: -60,
				                color: '#FFFFFF',
				                align: 'right',
				                format: '{point.y}', // one decimal
				                y: 10, // 10 pixels down from the top
				                style: {
				                    fontSize: '13px',
				                    fontFamily: 'Verdana, sans-serif'
				                }
				            }
				        }]
				    });	
				}else{
					$('#container').highcharts({
				        title: {
				            text: '注册用户总量趋势',
				            x: -20 //center
				        },
				        subtitle: {
				            text: '注册用户总数:'+eval("(" + data + ")").dataCounts+'人',
				            x: -20
				        },
				        xAxis: {
				        	labels: {
				                rotation: -80,
				                style: {
				                    fontSize: '13px',
				                    fontFamily: 'Verdana, sans-serif'
				                }
				            },
				            categories: eval("(" + eval("(" + data + ")").datax + ")")
				        },
				        yAxis: {
				            title: {
				                text: '注册用户(人)'
				            },
				            plotLines: [{
				                value: 0,
				                width: 1,
				                color: '#808080'
				            }]
				        },
				        tooltip: {
				            valueSuffix: '人'
				        },
				        legend: {
				            layout: 'vertical',
				            align: 'right',
				            verticalAlign: 'middle',
				            borderWidth: 0
				        },
				        series: [{
				            name: '注册用户',
				            data: eval("(" + eval("(" + data + ")").datay + ")")
				        }]
				    });
				}	
			
		});  
	}

	function loading(dataDiv) {
		$("#" + dataDiv)
				.append(
						"<div style='text-align:center'><span style='vertical-align:text-bottom'><img src='<%=request.getContextPath()%>/images/admin/bigloading.gif' /></span></div>");
	}
	function loadingEnd(dataDiv) {
		$("#" + dataDiv).empty();
	}
	</script>
	</head>
	<body>
	 <div id="dialog-confirm" style=" height: 150px;display: none" title="确实要删除数据吗?">
	<p style="height:35px;">若删除请点击[删除]按钮</p>
	</div>
			<div class="center-main-ss" style="margin-bottom: 5px;">
				<div class="main-title">
					<span style="float: left; display: inline;"><img
							src="<%=request.getContextPath()%>/images/admin/t_mt01.jpg"
							border="0" />
					</span><span
						style="float: left; color: #353C44; font-weight: 600; font-size: 14px;">统计条件</span><span
						style="float: right; display: inline;"><img
							src="<%=request.getContextPath()%>/images/admin/t_mt03.jpg" />
					</span>
				</div>
				<div style="padding-top: 20px;">
					<table width="80%" align="center" border="0" cellpadding="0"
						cellspacing="1" bgcolor="#CCCCCC" class="productTable">
						<tr>
							<td align="right" nowrap="nowrap" class="productTable_title">
								开始日期:
							</td>
							<td bgcolor="#ffffff">
                            	<input type="text" class="input-small"	onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" placeholder="起日期"
								id="s_startTime" />
							</td>
							<td align="right" nowrap="nowrap" class="productTable_title">
								止日期:
							</td>
							<td bgcolor="#ffffff">
								<input type="text" class="input-small"	onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" placeholder="止日期"
								id="s_endTime" />
							</td>
							<td align="right" nowrap="nowrap" class="productTable_title">
								统计类型:
							</td>
							<td bgcolor="#ffffff">
								<select name="types" id="types">
									<option value="0">-请选择统计类型-</option>
									<option value="1"></option>
									<option value="2"></option>
									<option value="3"></option>
									<option value="4"></option>
								</select>
							</td>
						</tr>
						<tr>
							<td align="center" height="40" colspan="6" bgcolor="#ffffff">
								<button class="admin_again" type="button" id="s_searchBtn">搜索</button>
								&nbsp;
								<input type="button" value="返 回" class="admin_again"
									onClick="javascript:history.go(-1);">
							</td>
						</tr>
					</table>

				</div>
			</div>
				<div class="main-title">
					<span style="float: left"><img
							src="<%=request.getContextPath()%>/images/admin/t_mt01.jpg"
							border="0" />
					</span>
					<span style="float: left; color: #353C44; font-weight: 600; font-size: 14px;">注册用户统计</span>
					<span style="float: right"><img src="<%=request.getContextPath()%>/images/admin/t_mt03.jpg" /></span>
				</div>
				<div style="padding: 5px;">

					<table id="dataDiv" class="tablestyle">
					</table>
					<div id="container" style="min-width: 300px; height: auto; margin: 0 auto">数据尚未返回</div>          
				</div>
		
	</body>
</html>