231 lines
9.2 KiB
HTML
Executable File
231 lines
9.2 KiB
HTML
Executable File
<body>
|
|
{include file="Public:header3"/}
|
|
<div class="layui-fluid">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">用户登录统计</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-form layui-form-pane">
|
|
<div class="layui-form-item">
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">统计类型</label>
|
|
<div class="layui-input-inline">
|
|
<select name="type" id="stat_type" lay-filter="stat_type">
|
|
<option value="day">日统计</option>
|
|
<option value="week">周统计</option>
|
|
<option value="month">月统计</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-inline date-range" id="date_range">
|
|
<label class="layui-form-label">日期范围</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" class="layui-input" id="start_date" name="start_date" placeholder="开始日期" value="{$start_date}">
|
|
</div>
|
|
<div class="layui-form-mid">-</div>
|
|
<div class="layui-input-inline">
|
|
<input type="text" class="layui-input" id="end_date" name="end_date" placeholder="结束日期" value="{$end_date}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-inline year-select" id="year_select" style="display:none;">
|
|
<label class="layui-form-label">年份</label>
|
|
<div class="layui-input-inline">
|
|
<select name="year" id="year" lay-filter="year">
|
|
{for start="2022" end="2031"}
|
|
<option value="{$i}" {if $i==$year}selected{/if}>{$i}年</option>
|
|
{/for}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-inline">
|
|
<button class="layui-btn" id="search_btn">查询</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-row">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">统计摘要</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<h3>总登录次数</h3>
|
|
<h1 id="total_logins">0</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6" id="active_users_card">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<h3>活跃用户数</h3>
|
|
<h1 id="active_users">0</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">登录统计图表</div>
|
|
<div class="layui-card-body">
|
|
<div id="login_chart" style="width: 100%; height: 400px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{include file="Public/footer3" /}
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
|
|
<script>
|
|
layui.use(['layer', 'form', 'laydate'], function(){
|
|
var $ = layui.jquery,
|
|
form = layui.form,
|
|
layer = layui.layer,
|
|
laydate = layui.laydate;
|
|
|
|
// 初始化日期选择器
|
|
laydate.render({
|
|
elem: '#start_date'
|
|
});
|
|
laydate.render({
|
|
elem: '#end_date'
|
|
});
|
|
|
|
// 初始化图表
|
|
var loginChart = echarts.init(document.getElementById('login_chart'));
|
|
|
|
function loadData() {
|
|
var type = $('#stat_type').val();
|
|
var params = {
|
|
type: type
|
|
};
|
|
|
|
if (type === 'day') {
|
|
params.start_date = $('#start_date').val();
|
|
params.end_date = $('#end_date').val();
|
|
$('#date_range').show();
|
|
$('#year_select').hide();
|
|
$('#active_users_card').show();
|
|
} else {
|
|
params.year = $('#year').val();
|
|
$('#date_range').hide();
|
|
$('#year_select').show();
|
|
$('#active_users_card').hide();
|
|
}
|
|
|
|
layer.load();
|
|
$.ajax({
|
|
url: '{:url("user/loginStat")}',
|
|
type: 'post',
|
|
data: params,
|
|
dataType: 'json',
|
|
success: function(res) {
|
|
layer.closeAll('loading');
|
|
if (res.code === 0) {
|
|
renderChart(res.data.chart);
|
|
$('#total_logins').text(res.data.total_logins);
|
|
if (type === 'day') {
|
|
$('#active_users').text(res.data.active_users);
|
|
}
|
|
} else {
|
|
layer.msg(res.msg, {icon: 2});
|
|
}
|
|
},
|
|
error: function() {
|
|
layer.closeAll('loading');
|
|
layer.msg('网络错误', {icon: 2});
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderChart(data) {
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: data.labels,
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 45
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '登录用户数'
|
|
},
|
|
series: [{
|
|
name: '登录用户数',
|
|
type: 'bar',
|
|
data: data.values,
|
|
itemStyle: {
|
|
color: '#1E9FFF'
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
color: '#5FB878'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
|
|
loginChart.setOption(option);
|
|
}
|
|
|
|
// 监听查询按钮
|
|
$('#search_btn').click(function() {
|
|
loadData();
|
|
});
|
|
|
|
// 监听统计类型切换
|
|
form.on('select(stat_type)', function(data) {
|
|
var type = data.value;
|
|
if (type === 'day') {
|
|
$('#date_range').show();
|
|
$('#year_select').hide();
|
|
$('#active_users_card').show();
|
|
} else {
|
|
$('#date_range').hide();
|
|
$('#year_select').show();
|
|
$('#active_users_card').hide();
|
|
}
|
|
});
|
|
|
|
// 监听年份变化
|
|
form.on('select(year)', function() {
|
|
loadData();
|
|
});
|
|
|
|
// 初始化加载数据
|
|
loadData();
|
|
|
|
// 窗口调整时重新渲染图表
|
|
window.addEventListener('resize', function() {
|
|
loginChart.resize();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|