📖 File Reader
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主页</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="__PUBLIC__/admin_layui/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="__PUBLIC__/admin_layui/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<link rel="stylesheet" href="__PUBLIC__/admin_layui/css/public.css" media="all">
</head>
<style>
.layui-top-box {
padding: 40px 20px 20px 20px;
color: #fff
}
.panel {
margin-bottom: 17px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
}
.panel-body {
padding: 15px
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 14px;
color: inherit
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
margin-top: .3em;
}
.layui-red {
color: red
}
.main_btn > p {
height: 40px;
}
</style>
<body style="background-color: #FFFFFF;">
{include file="public/vue"/}
<div class="layuimini-container" id="vue">
<div class="layuimini-main layui-top-box">
<div class="layui-row layui-col-space10">
<div class="layui-col-md3">
<div class="col-xs-6 col-md-3">
<div class="panel layui-bg-cyan">
<div class="panel-body">
<div class="panel-title">
<span class="label pull-right layui-bg-blue">本月</span>
<h5>收入</h5>
</div>
<div class="panel-content">
<h1 class="no-margins">{{order_money}}</h1>
<small>总收入</small>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="col-xs-6 col-md-3">
<div class="panel layui-bg-blue">
<div class="panel-body">
<div class="panel-title">
<span class="label pull-right layui-bg-cyan">今日</span>
<h5>订单</h5>
</div>
<div class="panel-content">
<h1 class="no-margins">{{order_count}}</h1>
<small>新订单</small>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="col-xs-6 col-md-3">
<div class="panel layui-bg-green">
<div class="panel-body">
<div class="panel-title">
<span class="label pull-right layui-bg-orange">今日</span>
<h5>访客</h5>
</div>
<div class="panel-content">
<h1 class="no-margins">{{visitor_count}}</h1>
<small>新访客</small>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="col-xs-6 col-md-3">
<div class="panel layui-bg-orange">
<div class="panel-body">
<div class="panel-title">
<span class="label pull-right layui-bg-green">最近一个月</span>
<h5>活跃用户</h5>
</div>
<div class="panel-content">
<h1 class="no-margins">{{active_count}}</h1>
<small>{{time_month}}月</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--系统公告-->
<div class="layui-timeline" style="margin-top:30px;">
{foreach name="$article" item="item"}
<div class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">{$item.add_time}</h3>
<p>公告：{$item.title}</p>
<p>
{$item.describe}
</p>
</div>
</div>
{/foreach}
<div class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</div>
</div>
<!--上月订单统计-->
<div class="layuimini-container" id="container" style="height: 300px;margin-top:10px;padding-top:50px;"></div>
<script type="text/javascript" src="__PUBLIC__/admin_layui/js/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
title: {
text: '前6月订单统计（总数）',
left: '3%',
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['已付款', '待付款'],
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: {$time}
},
yAxis: {
type: 'value'
},
series: [
{
name: '已付款',
type: 'line',
stack: 'Total',
data: {$all_pay}
},
{
name: '待付款',
type: 'line',
stack: 'Total',
data: {$all_obligation}
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
<script src="__PUBLIC__/admin_layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
var vm = new Vue({
el: '#vue',
data: {
'order_money': 0,
'order_count': 0,
'visitor_count': 0,
'time_month': 0,
'active_count': 0,
},
methods: {
load: function () {
var that = this;
$.ajax({
type: "POST",
url: "{:Url('Index/statistics')}",
data: {},
dataType: "json",
success: function (res) {
that.order_money = res.data.order_money;
that.order_count = res.data.order_count;
that.visitor_count = res.data.visitor_count;
that.time_month = res.data.time_month;
that.active_count = res.data.active_count;
}
});
},
},
created() {
this.load();
}
})
</script>
</body>
</html>