520 lines
30 KiB
HTML
Executable File
520 lines
30 KiB
HTML
Executable File
{include file="Public:header2"/}
|
||
<style>
|
||
.s-row {
|
||
margin-top: 5px;
|
||
margin-bottom: 5px;
|
||
}
|
||
</style>
|
||
|
||
<body>
|
||
<div class="layui-fluid">
|
||
<div class="layui-card">
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header" style="background-color: yellow;">
|
||
总注册人数：
|
||
<span style="color: red;" id="totalUserCount">
|
||
<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i> 加载中...
|
||
</span>
|
||
<button type="button" class="layui-btn layui-btn-xs layui-btn-warm" id="refreshUserRegister" style="float: right;margin-top: 5px;">
|
||
<i class="layui-icon layui-icon-refresh"></i> 刷新
|
||
</button>
|
||
</div>
|
||
<div class="layui-card-body" style="padding: 0px;">
|
||
<div id="userRegisterLoading" style="text-align: center; padding: 20px;">
|
||
<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px;"></i>
|
||
<p>正在加载数据...</p>
|
||
</div>
|
||
<div class="layui-row" id="userRegisterData" style="display: none;">
|
||
<div class="layui-col-xs6" style="padding: 0px 5px;background-color: #393D49;">
|
||
<div class="layui-card" style="background-color: #393D49;color: #fff;">
|
||
<div class="layui-card-header" style="color: #fff;">用户注册数据</div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-row s-row ">
|
||
<div class="layui-col-xs6">
|
||
今日新增用户： <span class="layui-badge layui-bg-gray" id="user_today">-</span>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
昨日新增用户： <span class="layui-badge layui-bg-gray" id="user_yesterday">-</span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row s-row ">
|
||
<div class="layui-col-xs6">
|
||
本周新增用户： <span class="layui-badge layui-bg-gray" id="user_this_week">-</span>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
上周新增用户： <span class="layui-badge layui-bg-gray" id="user_last_week">-</span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row s-row ">
|
||
<div class="layui-col-xs6">
|
||
本月新增用户： <span class="layui-badge layui-bg-gray" id="user_this_month">-</span>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
上月新增用户： <span class="layui-badge layui-bg-gray" id="user_last_month">-</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs6" style="padding: 0px 5px;background-color: #009688;">
|
||
<div class="layui-card" style="background-color: #009688;color: #fff;">
|
||
<div class="layui-card-header" style="color: #fff;">用户充值数据</div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-row s-row ">
|
||
<div class="layui-col-xs6">
|
||
今日充值金额： <span class="layui-badge layui-bg-gray" id="order_today_value">-</span>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
昨日充值金额： <span class="layui-badge layui-bg-gray" id="order_yesterday_value">-</span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row s-row ">
|
||
<div class="layui-col-xs6">
|
||
本周充值金额： <span class="layui-badge layui-bg-gray" id="order_this_week_value">-</span>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
上周充值金额： <span class="layui-badge layui-bg-gray" id="order_last_week_value">-</span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row s-row ">
|
||
<div class="layui-col-xs6">
|
||
本月充值金额： <span class="layui-badge layui-bg-gray" id="order_this_month_value">-</span>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
上月充值金额： <span class="layui-badge layui-bg-gray" id="order_last_month_value">-</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header" style="background-color: #2F3F56;color: #fff;">
|
||
消费与虚拟货币
|
||
<span style="color: red;">
|
||
|
||
</span>
|
||
</div>
|
||
<div class="layui-card-body" style="padding: 0px;">
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs6" style="padding: 0px 5px;background-color: #21A0BF;">
|
||
<div class="layui-card" style="background-color: #21A0BF;color: #fff;">
|
||
<div class="layui-card-header" style="color: #fff;">消费数据（RMB/全部）</div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-row s-row ">
|
||
<div class="layui-col-xs6">
|
||
今日消费人数： <span
|
||
class="layui-badge layui-bg-gray">{$rmb_consume_today}/{$consume_today}</span>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
昨日消费人数： <span
|
||
class="layui-badge layui-bg-gray">{$rmb_consume_yesterday}/{$consume_yesterday}</span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row s-row ">
|
||
<div class="layui-col-xs6">
|
||
本周消费人数： <span
|
||
class="layui-badge layui-bg-gray">{$rmb_consume_this_week}/{$consume_this_week}</span>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
上周消费人数： <span
|
||
class="layui-badge layui-bg-gray">{$rmb_consume_last_week}/{$consume_last_week}</span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row s-row ">
|
||
<div class="layui-col-xs6">
|
||
本月消费人数： <span
|
||
class="layui-badge layui-bg-gray">{$rmb_consume_this_month}/{$consume_this_month}</span>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
上月消费人数： <span
|
||
class="layui-badge layui-bg-gray">{$rmb_consume_last_month}/{$consume_last_month}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs6" style="padding: 0px 5px;background-color: #FF5722;">
|
||
<div class="layui-card" style="background-color: #FF5722;color: #fff;">
|
||
<div class="layui-card-header" style="color: #fff;">虚拟货币统计</div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-row s-row ">
|
||
<div class="layui-col-xs6">
|
||
今日余额消费： <span
|
||
class="layui-badge layui-bg-gray">{$money_today}</span>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
今日余额发放： <span
|
||
class="layui-badge layui-bg-gray">{$money_recovery_today}</span>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="layui-row s-row ">
|
||
<div class="layui-col-xs6">
|
||
今日积分消费： <span
|
||
class="layui-badge layui-bg-gray">{$score_today}</span>
|
||
</div>
|
||
<div class="layui-col-xs6">
|
||
今日消费卷抵扣： <span
|
||
class="layui-badge layui-bg-gray">{$coupon_today}</span>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="layui-row s-row ">
|
||
<div class="layui-col-xs6">
|
||
昨日积分消费： <span
|
||
class="layui-badge layui-bg-gray">{$score_yesterday}</span>
|
||
</div>
|
||
<!-- <div class="layui-col-xs6">
|
||
昨日余额消费： <span
|
||
class="layui-badge layui-bg-gray">{$money_yesterday}</span>
|
||
</div> -->
|
||
<div class="layui-col-xs6">
|
||
昨日余额发放： <span
|
||
class="layui-badge layui-bg-gray">{$money_recovery_yesterday}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header" style="text-align:center;background-color: #7C98CB;">
|
||
今日收入汇总
|
||
<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="refreshProfit" style="float: right;margin-top: 5px;">
|
||
<i class="layui-icon layui-icon-refresh"></i> 刷新
|
||
</button>
|
||
</div>
|
||
<div class="layui-card-body" style="padding: 0px;">
|
||
<table class="layui-table">
|
||
<colgroup>
|
||
<col width="150">
|
||
<col>
|
||
</colgroup>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td>订单收入：</td>
|
||
<td>{$order_zhe_total}（收入不包含折扣，不包含优惠卷）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>RMB收入：</td>
|
||
<td>{$order_today}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>其他收入：</td>
|
||
<td>{$profit_rvenue}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>订单出货：</td>
|
||
<td>{$order_goodslist_money}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>支出</td>
|
||
<td>{$profit_expenses}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>订单笔数：</td>
|
||
<td>{$order_count}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>发数：</td>
|
||
<td>{$order_goodslist_count}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>利润：</td>
|
||
<td id="profit_value">
|
||
<div class="layui-progress" lay-filter="profit-loading" style="margin-top: 10px;">
|
||
<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
|
||
<tr>
|
||
<td>利润计算方式：</td>
|
||
<td id="profit_formula">加载中...</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs6" style="display: none;">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header" style="text-align:center;background-color:darkorange;">
|
||
今日毛利统计
|
||
</div>
|
||
<div class="layui-card-body" style="padding: 0px;">
|
||
<table class="layui-table">
|
||
<colgroup>
|
||
<col width="50%">
|
||
<col>
|
||
</colgroup>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td>今日毛利：{$order_lirun}</td>
|
||
<td>昨日毛利：{$order_lirun_yester}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>本周毛利：{$order_lirun_week}</td>
|
||
<td>上周毛利：{$order_lirun_last_week}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>本月毛利：{$order_zhe_total_month}</td>
|
||
<td>上月毛利：{$order_lirun_last_month}</td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增用户数据统计卡片 -->
|
||
<div class="layui-row" style="margin-top: 15px;">
|
||
<div class="layui-col-xs6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header" style="text-align:center;background-color: #1E9FFF;color:#fff;">
|
||
用户数据统计
|
||
<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="refreshUserStats" style="float: right;margin-top: 5px;">
|
||
<i class="layui-icon layui-icon-refresh"></i> 刷新
|
||
</button>
|
||
</div>
|
||
<div class="layui-card-body" style="padding: 0px;">
|
||
<div id="userStatsLoading" style="text-align: center; padding: 20px;">
|
||
<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px;"></i>
|
||
<p>正在加载数据...</p>
|
||
</div>
|
||
<table class="layui-table" id="userStatsTable" style="display: none;">
|
||
<colgroup>
|
||
<col width="25%">
|
||
<col width="25%">
|
||
<col width="25%">
|
||
<col width="25%">
|
||
</colgroup>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td>绑定手机号人数：</td>
|
||
<td id="user_register_count">-</td>
|
||
<td>抽奖人数：</td>
|
||
<td id="consuming_user_count">-</td>
|
||
</tr>
|
||
<tr>
|
||
<td>用户剩余钻石：</td>
|
||
<td id="user_money">-</td>
|
||
<td>用户剩余UU币：</td>
|
||
<td id="user_integral">-</td>
|
||
</tr>
|
||
<tr>
|
||
<td>用户剩余达达券：</td>
|
||
<td id="user_money2">-</td>
|
||
<td>微信支付金额：</td>
|
||
<td id="order_price_total">-</td>
|
||
</tr>
|
||
<tr>
|
||
<td>订单支付数量：</td>
|
||
<td id="order_total_count">-</td>
|
||
<td>用户出货总金额：</td>
|
||
<td id="total_goods_amount">-</td>
|
||
</tr>
|
||
<tr>
|
||
<td>用户盒柜剩余价值：</td>
|
||
<td id="box_remaining_value">-</td>
|
||
<td>用户已兑换的达达券：</td>
|
||
<td id="exchanged_coupon">-</td>
|
||
</tr>
|
||
<tr>
|
||
<td>用户已发货金额：</td>
|
||
<td id="shipped_amount">-</td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{include file="Public:footer"/}
|
||
<script type="text/javascript">
|
||
layui.use(['layer', 'laydate', 'table', 'element'], function () {
|
||
var $ = layui.$;
|
||
var layer = layui.layer;
|
||
var element = layui.element;
|
||
//执行一个laydate实例
|
||
var laydate = layui.laydate;
|
||
laydate.render({
|
||
elem: '#addtime'
|
||
, type: 'datetime'
|
||
, range: true
|
||
});
|
||
// laydate.render({
|
||
// elem: '#endtime'
|
||
// // , type: 'datetime'
|
||
// // , range: true
|
||
// });
|
||
|
||
// 加载用户数据统计
|
||
function loadUserStatistics() {
|
||
$('#userStatsTable').hide();
|
||
$('#userStatsLoading').show();
|
||
|
||
$.ajax({
|
||
url: '{:url("admin/Statistics/getUserStatisticsData")}',
|
||
type: 'GET',
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
if (res.code === 0) {
|
||
// 填充数据
|
||
$('#user_register_count').text(res.data.user_register_count);
|
||
$('#consuming_user_count').text(res.data.consuming_user_count);
|
||
$('#user_money').text(res.data.user_money);
|
||
$('#user_money2').text(res.data.user_money2);
|
||
$('#user_integral').text(res.data.user_integral);
|
||
$('#order_price_total').text(res.data.order_price_total);
|
||
$('#order_total_count').text(res.data.order_total_count);
|
||
$('#box_remaining_value').text(res.data.box_remaining_value);
|
||
$('#exchanged_coupon').text(res.data.exchanged_coupon);
|
||
$('#shipped_amount').text(res.data.shipped_amount);
|
||
$('#total_goods_amount').text(res.data.total_goods_amount);
|
||
|
||
// 显示表格
|
||
$('#userStatsLoading').hide();
|
||
$('#userStatsTable').show();
|
||
} else {
|
||
layer.msg('加载数据失败：' + res.msg, {icon: 2});
|
||
$('#userStatsLoading').html('<p>加载失败，请点击刷新按钮重试</p>');
|
||
}
|
||
},
|
||
error: function() {
|
||
layer.msg('服务器连接失败，请稍后再试', {icon: 2});
|
||
$('#userStatsLoading').html('<p>加载失败，请点击刷新按钮重试</p>');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 加载利润数据
|
||
function loadProfitData() {
|
||
// 更新进度条
|
||
element.progress('profit-loading', '30%');
|
||
|
||
$.ajax({
|
||
url: '{:url("admin/Statistics/getProfitData")}',
|
||
type: 'GET',
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
if (res.code === 0) {
|
||
// 填充利润数据
|
||
element.progress('profit-loading', '100%');
|
||
setTimeout(function() {
|
||
$('#profit_value').html('<span style="color:' + (res.data.profit >= 0 ? 'green' : 'red') + ';font-weight:bold;">' + res.data.profit + '</span>');
|
||
$('#profit_formula').html(res.data.formula);
|
||
}, 300);
|
||
} else {
|
||
layer.msg('加载利润数据失败：' + res.msg, {icon: 2});
|
||
$('#profit_value').html('<span style="color:red;">加载失败</span>');
|
||
$('#profit_formula').html('加载失败，请刷新页面重试');
|
||
}
|
||
},
|
||
error: function() {
|
||
layer.msg('服务器连接失败，请稍后再试', {icon: 2});
|
||
$('#profit_value').html('<span style="color:red;">加载失败</span>');
|
||
$('#profit_formula').html('加载失败，请刷新页面重试');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 加载用户注册数据
|
||
function loadUserRegisterData() {
|
||
$('#userRegisterData').hide();
|
||
$('#userRegisterLoading').show();
|
||
|
||
$.ajax({
|
||
url: '{:url("admin/Statistics/getUserRegisterData")}',
|
||
type: 'GET',
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
if (res.code === 0) {
|
||
// 填充总注册人数
|
||
$('#totalUserCount').html('<span style="font-weight:bold;">' + res.data.userCount + '</span>');
|
||
|
||
// 填充用户注册数据
|
||
$('#user_today').text(res.data.user_today);
|
||
$('#user_yesterday').text(res.data.user_yesterday);
|
||
$('#user_this_week').text(res.data.user_this_week);
|
||
$('#user_last_week').text(res.data.user_last_week);
|
||
$('#user_this_month').text(res.data.user_this_month);
|
||
$('#user_last_month').text(res.data.user_last_month);
|
||
|
||
// 填充充值数据
|
||
$('#order_today_value').text(res.data.order_today);
|
||
$('#order_yesterday_value').text(res.data.order_yesterday);
|
||
$('#order_this_week_value').text(res.data.order_this_week);
|
||
$('#order_last_week_value').text(res.data.order_last_week);
|
||
$('#order_this_month_value').text(res.data.order_this_month);
|
||
$('#order_last_month_value').text(res.data.order_last_month);
|
||
|
||
// 显示数据区域
|
||
$('#userRegisterLoading').hide();
|
||
$('#userRegisterData').show();
|
||
} else {
|
||
layer.msg('加载用户数据失败：' + res.msg, {icon: 2});
|
||
$('#userRegisterLoading').html('<p>加载失败，请点击刷新按钮重试</p>');
|
||
$('#totalUserCount').html('<span style="color:red;">加载失败</span>');
|
||
}
|
||
},
|
||
error: function() {
|
||
layer.msg('服务器连接失败，请稍后再试', {icon: 2});
|
||
$('#userRegisterLoading').html('<p>加载失败，请点击刷新按钮重试</p>');
|
||
$('#totalUserCount').html('<span style="color:red;">加载失败</span>');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 页面加载完成后加载数据
|
||
loadUserStatistics();
|
||
loadProfitData();
|
||
loadUserRegisterData();
|
||
|
||
// 刷新按钮点击事件
|
||
$('#refreshUserStats').on('click', function() {
|
||
loadUserStatistics();
|
||
});
|
||
|
||
// 刷新利润按钮点击事件
|
||
$('#refreshProfit').on('click', function() {
|
||
$('#profit_value').html('<div class="layui-progress" lay-filter="profit-loading" style="margin-top: 10px;"><div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div></div>');
|
||
$('#profit_formula').html('加载中...');
|
||
element.render('progress');
|
||
loadProfitData();
|
||
});
|
||
|
||
// 刷新用户注册数据按钮点击事件
|
||
$('#refreshUserRegister').on('click', function() {
|
||
$('#totalUserCount').html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i> 加载中...');
|
||
loadUserRegisterData();
|
||
});
|
||
})
|
||
</script>
|
||
</body>
|
||
|
||
</html> |