You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
5.4 KiB
175 lines
5.4 KiB
<%@ page language="java" pageEncoding="UTF-8" %>
|
|
<%@ taglib uri="/struts-tags" prefix="s" %>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
|
<%
|
|
String path = request.getContextPath();
|
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
|
|
|
|
String usertype = session.getAttribute("userType") + "";
|
|
%>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<c:import url="../head.jsp"/>
|
|
|
|
<link href="<%=basePath %>static/toastr-master/toastr.min.css" rel="stylesheet" type="text/css"/>
|
|
<script src="<%=basePath %>static/toastr-master/toastr.min.js"></script>
|
|
<script src="<%=basePath %>static/echarts.min.js"></script>
|
|
<script src="<%=basePath %>static/jquery.datetimepicker.full.min.js"></script>
|
|
<link href="<%=basePath %>static/jquery.datetimepicker.min.css" rel="stylesheet" type="text/css"/>
|
|
<link>
|
|
<style>
|
|
#count, #count_group {
|
|
width: 1000px;
|
|
height: 500px;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
|
|
$(function () {
|
|
$("form").removeAttr("style")
|
|
|
|
$.datetimepicker.setLocale('zh');
|
|
const format = {
|
|
format: 'Y-m-d H:i:s'
|
|
}
|
|
|
|
let start = $('input[name=startTime]')
|
|
let end = $('input[name=endTime]')
|
|
$(start, end).datetimepicker(format);
|
|
start.val('${startTime}')
|
|
end.val('${endTime}')
|
|
|
|
<c:if test="${!empty state }">
|
|
toastr.${state}('${message}', '提示');
|
|
</c:if>
|
|
|
|
$(".bz").click(function () {
|
|
var txt = $(this).attr("txt");
|
|
toastr.success(txt, '提示');
|
|
});
|
|
|
|
|
|
let chart = echarts.init(count)
|
|
let publicOption = {
|
|
title: {
|
|
text: '数据统计',
|
|
subtext: '统计时间从' + start.val() + '到' + end.val(),
|
|
left: 'center'
|
|
},
|
|
yAxis: {
|
|
name: '个数'
|
|
}
|
|
}
|
|
let group = ['用户', '房源', '申请', '举报']
|
|
// 指定图表的配置项和数据
|
|
let option = {
|
|
...publicOption, ...{
|
|
xAxis: {
|
|
data: group
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: [${userCount}, ${houseCount}, ${applyCount}, ${reportCount}],
|
|
label:{
|
|
show:true
|
|
}
|
|
}],
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
}
|
|
}
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
chart.setOption(option);
|
|
|
|
let groupChart = echarts.init(count_group)
|
|
|
|
|
|
let groupOption = {
|
|
...publicOption, ...{
|
|
xAxis: {
|
|
type: 'category',
|
|
data: [<c:forEach items="${userList.dateList}" var="item">
|
|
'${item}',
|
|
</c:forEach>]
|
|
},
|
|
dataZoom: [
|
|
{
|
|
show: true,
|
|
realtime: true,
|
|
start: 65,
|
|
end: 85
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: group,
|
|
left: 0
|
|
},
|
|
series: [{
|
|
name: group[0],
|
|
type: 'line',
|
|
data:${userList.countList}
|
|
}, {
|
|
name: group[1],
|
|
type: 'line',
|
|
data:${houseList.countList}
|
|
}, {
|
|
name: group[2],
|
|
type: 'line',
|
|
data:${applyList.countList}
|
|
}, {
|
|
name: group[3],
|
|
type: 'line',
|
|
data:${reportList.countList}
|
|
}]
|
|
}
|
|
}
|
|
|
|
groupChart.setOption(groupOption)
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
|
|
<body class="container_12">
|
|
<div class="box round first" style="margin:15px;">
|
|
|
|
|
|
<div class="block">
|
|
|
|
<form action="${pageContext.request.contextPath}/admin/apply/report.do" method="post">
|
|
<div class="input-group col-5 ml-auto mr-auto">
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">开始时间</span>
|
|
</div>
|
|
<input class="form-control" name="startTime">
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">结束时间</span>
|
|
</div>
|
|
<input class="form-control" name="endTime">
|
|
</div>
|
|
<button type="submit" class="mt-3 btn-block btn-info ml-auto mr-auto col-3">统计</button>
|
|
</form>
|
|
|
|
<div id="count" class="ml-auto mr-auto mt-3"></div>
|
|
|
|
<div id="count_group" class="ml-auto mr-auto mt-3"></div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|