新增后台管理首页仪表盘

feat/task1-c-wallet
gongfuxiang 2019-02-23 08:41:27 +08:00
parent 521b74825d
commit 5a82819a1e
5 changed files with 413 additions and 136 deletions

View File

@ -74,6 +74,30 @@ class Index extends Common
$user = StatisticalService::UserYesterdayTodayTotal();
$this->assign('user', $user['data']);
// 订单总数
$order_number = StatisticalService::OrderNumberYesterdayTodayTotal();
$this->assign('order_number', $order_number['data']);
// 订单成交总量
$order_complete_number = StatisticalService::OrderCompleteYesterdayTodayTotal();
$this->assign('order_complete_number', $order_complete_number['data']);
// 订单收入总计
$order_complete_money = StatisticalService::OrderCompleteMoneyYesterdayTodayTotal();
$this->assign('order_complete_money', $order_complete_money['data']);
// 近7日订单交易走势
$order_trading_trend = StatisticalService::OrderTradingTrendSevenTodayTotal();
$this->assign('order_trading_trend', $order_trading_trend['data']);
// 近7日订单支付方式
$order_type_number = StatisticalService::OrderPayTypeSevenTodayTotal();
$this->assign('order_type_number', $order_type_number['data']);
// 近7日热销商品
$goods_hot_sale = StatisticalService::GoodsHotSaleSevenTodayTotal();
$this->assign('goods_hot_sale', $goods_hot_sale['data']);
return $this->fetch();
}
}

View File

@ -4,7 +4,7 @@
<div class="content-right">
<div class="content">
<!-- 基础统计 -->
<div class="echarts-container shopxo-base" style="display: none;">
<div class="echarts-container shopxo-base">
<div class="echarts-title">
<span class="icon"></span>
<span class="title">商城统计</span>
@ -27,42 +27,42 @@
<li>
<div class="li-content">
<p class="name">订单总量</p>
<p class="total">234234</p>
<p class="total">{{$order_number.total_count}}</p>
<div class="yesterday">
<span>昨日</span>
<span>34324</span>
<span>{{$order_number.yesterday_count}}</span>
</div>
<div class="today">
<span>今日</span>
<span>65645</span>
<span>{{$order_number.today_count}}</span>
</div>
</div>
</li>
<li>
<div class="li-content">
<p class="name">成交总量</p>
<p class="total">234234</p>
<p class="total">{{$order_complete_number.total_count}}</p>
<div class="yesterday">
<span>昨日</span>
<span>34324</span>
<span>{{$order_complete_number.yesterday_count}}</span>
</div>
<div class="today">
<span>今日</span>
<span>65645</span>
<span>{{$order_complete_number.today_count}}</span>
</div>
</div>
</li>
<li>
<div class="li-content">
<p class="name">收入总计</p>
<p class="total">234234</p>
<p class="total">{{$order_complete_money.total_count}}</p>
<div class="yesterday">
<span>昨日</span>
<span>34324</span>
<span>{{$order_complete_money.yesterday_count}}</span>
</div>
<div class="today">
<span>今日</span>
<span>65645</span>
<span>{{$order_complete_money.today_count}}</span>
</div>
</div>
</li>
@ -70,17 +70,17 @@
</div>
<!-- 支付方式 -->
<div class="echarts-container" style="display: none;">
<!-- 近7日订单交易走势 -->
<div class="echarts-container">
<div class="echarts-title">
<span class="icon"></span>
<span class="title">支付方式</span>
<span class="title">近7日订单交易走势</span>
</div>
<div id="echarts-order-pay-type"></div>
<div id="echarts-order-trading"></div>
</div>
<!-- 组合 -->
<ul class="am-avg-sm-1 am-avg-sm-2 am-avg-lg-2 echarts-combination-container-2" style="display: none;">
<ul class="am-avg-sm-1 am-avg-sm-2 am-avg-lg-2 echarts-combination-container-2">
<li>
<!-- 近7日热销商品 -->
<div class="echarts-title">
@ -91,12 +91,12 @@
</li>
<li>
<!-- 近7日订单交易走势 -->
<!-- 近7日订单支付方式 -->
<div class="echarts-title">
<span class="icon"></span>
<span class="title">近7日订单交易走势</span>
<span class="title">近7日订单支付方式</span>
</div>
<div id="echarts-order-trading"></div>
<div id="echarts-order-pay-type"></div>
</li>
</ul>
@ -155,14 +155,20 @@
<script type="text/javascript">
$(function()
{
// 订单支付方式
var order_pay_type_chart = echarts.init(document.getElementById('echarts-order-pay-type'));
// 近7日订单交易走势
var order_trading_chart = echarts.init(document.getElementById('echarts-order-trading'));
var option = {
tooltip : {
trigger: 'axis'
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data:['支付宝','微信','现金支付','货到付款']
data: {{:json_encode($order_trading_trend.title_arr)}}
},
toolbox: {
show : true,
@ -171,15 +177,20 @@ $(function()
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
saveAsImage : {name:'近7日订单交易走势', show: true}
}
},
calculable : true,
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
data : {{:json_encode($order_trading_trend.name_arr)}}
}
],
yAxis : [
@ -187,37 +198,12 @@ $(function()
type : 'value'
}
],
series : [
{
name:'支付宝',
type:'line',
tiled: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'微信',
type:'line',
tiled: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'现金支付',
type:'line',
tiled: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'货到付款',
type:'line',
tiled: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
]
series : {{:json_encode($order_trading_trend.data)}}
};
order_pay_type_chart.setOption(option);
order_trading_chart.setOption(option);
// 热销商品
// 近7日热销商品
var goods_hot_chart = echarts.init(document.getElementById('echarts-goods-hot'));
var option = {
title : {
@ -226,12 +212,7 @@ $(function()
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
formatter: "{b} : {c} ({d}%)"
},
toolbox: {
show : true,
@ -250,60 +231,47 @@ $(function()
}
}
},
restore : {show: true},
saveAsImage : {show: true}
restore : {show: false},
saveAsImage : {name:'近7日热销商品', show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
data: {{:json_encode($goods_hot_sale.data)}}
}
]
};
goods_hot_chart.setOption(option);
// 订单交易走势
var order_trading_chart = echarts.init(document.getElementById('echarts-order-trading'));
// 近7日订单支付方式
var order_pay_type_chart = echarts.init(document.getElementById('echarts-order-pay-type'));
var option = {
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
data: {{:json_encode($order_type_number.title_arr)}}
},
toolbox: {
feature: {
saveAsImage: {}
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: false},
saveAsImage : {name:'近7日订单支付方式', show: true}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
data : {{:json_encode($order_type_number.name_arr)}}
}
],
yAxis : [
@ -311,46 +279,9 @@ $(function()
type : 'value'
}
],
series : [
{
name:'邮件营销',
type:'line',
stack: '总量',
areaStyle: {},
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
areaStyle: {},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
areaStyle: {},
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
areaStyle: {normal: {}},
data:[320, 332, 301, 334, 390, 330, 320]
},