4 changed files with 395 additions and 0 deletions
-
139app/Admin/Controllers/OrderStatisticsController.php
-
140app/Admin/Metrics/Examples/OrderStatistics.php
-
111app/Admin/Tools/DataReportDate.php
-
5app/Admin/routes.php
@ -0,0 +1,139 @@ |
|||
<?php |
|||
|
|||
namespace App\Admin\Controllers; |
|||
|
|||
use App\Admin\Metrics\Examples\OrderStatistics; |
|||
use App\Common\OrderStatus; |
|||
use App\Models\Order; |
|||
use App\Models\OrderProductItem; |
|||
use Dcat\Admin\Admin; |
|||
use Dcat\Admin\Layout\Column; |
|||
use Dcat\Admin\Layout\Content; |
|||
use Dcat\Admin\Layout\Row; |
|||
use Dcat\Admin\Http\Controllers\AdminController; |
|||
use Dcat\Admin\Widgets\Box; |
|||
use Dcat\Admin\Widgets\Card; |
|||
use Dcat\Admin\Widgets\Dropdown; |
|||
use Illuminate\Support\Arr; |
|||
use Illuminate\Support\Str; |
|||
|
|||
class OrderStatisticsController extends AdminController |
|||
{ |
|||
public function index(Content $content) |
|||
{ |
|||
Admin::style( |
|||
<<<CSS |
|||
.col-sm-12.d-flex{ |
|||
display: inline-block !important; |
|||
} |
|||
CSS |
|||
); |
|||
|
|||
//数据
|
|||
|
|||
//订单
|
|||
|
|||
|
|||
return $content |
|||
->body( |
|||
<<<HTML |
|||
<div class="content-header"> |
|||
<section class="content-header breadcrumbs-top"> |
|||
<h1 class=" float-left"> |
|||
<span class="text-capitalize">订单统计</span> |
|||
|
|||
</h1> |
|||
<div class="clearfix"></div> |
|||
|
|||
</section> |
|||
</div> |
|||
HTML |
|||
|
|||
) |
|||
->body(function (Row $row){ |
|||
$row->column(6,function (Column $column){ |
|||
$column->row(new \App\Admin\Tools\DataReportDate('data_report')); |
|||
}); |
|||
|
|||
}) |
|||
->body(function (Row $row) { |
|||
$count = Order::query(); |
|||
$dateTime = request('created_at', 0); |
|||
if ($dateTime) { |
|||
$count->whereBetween('created_at',$dateTime); |
|||
} |
|||
$count = $count->count(); |
|||
$row->column(3, function (Column $column) use ($count) { |
|||
$column->row(Card::make('总数', function () use ($count) { |
|||
return <<<HTML |
|||
<div class="d-flex justify-content-between align-items-center mt-1" style="margin-bottom: 2px"> |
|||
<h2 class="ml-1 font-large-1 text-primary">$count</h2> |
|||
</div> |
|||
HTML; |
|||
})); |
|||
}); |
|||
$arr = OrderStatus::array(); |
|||
[$keys, $values] = Arr::divide($arr); |
|||
foreach ($keys as $v){ |
|||
$orders = Order::query()->where('status',$v); |
|||
|
|||
if ($dateTime) { |
|||
$orders->whereBetween('created_at',$dateTime); |
|||
} |
|||
$orders = $orders->count(); |
|||
|
|||
$row->column(3, function (Column $column) use ($arr,$orders,$v) { |
|||
$column->row(Card::make($arr[$v], function () use ($orders) { |
|||
return <<<HTML |
|||
<div class="d-flex justify-content-between align-items-center mt-1" style="margin-bottom: 2px"> |
|||
<h2 class="ml-1 font-large-1 text-primary">$orders</h2> |
|||
</div> |
|||
HTML; |
|||
})); |
|||
}); |
|||
} |
|||
|
|||
//
|
|||
|
|||
}) |
|||
->body(function (Row $row){ |
|||
// 构建下拉菜单,当点击菜单时发起请求获取数据重新渲染图表
|
|||
$menu = [ |
|||
'1' => '日', |
|||
'30' => '月', |
|||
'365' => '年', |
|||
]; |
|||
$buttonName = '日'; |
|||
if (Arr::exists($menu, \request()->input('time_key', ''))) { |
|||
$buttonName = $menu[\request()->input('time_key')]; |
|||
} |
|||
|
|||
$dropdown = Dropdown::make($menu) |
|||
->button(current($menu)) |
|||
->button($buttonName) |
|||
->click() |
|||
->map(function ($v, $k) { |
|||
$querys = \request()->all(); |
|||
$querys['time_key'] = $k; |
|||
$queryString = http_build_query($querys); |
|||
$str = Str::replaceFirst('admin/','',request()->path()); |
|||
$url = admin_url($str.'?'.$queryString); |
|||
// 此处设置的 data-xxx 属性会作为post数据发送到后端api
|
|||
return "<a class='switch-bar' data-option='{$k}' href='$url'>{$v}</a>"; |
|||
}); |
|||
|
|||
// 传递自定义参数
|
|||
|
|||
$bar = OrderStatistics::make() |
|||
->fetching('$("#my-box").loading()') // 设置loading效果
|
|||
->fetched('$("#my-box").loading(false)') // 移除loading效果
|
|||
->click('.switch-bar'); // 设置图表点击菜单则重新发起请求,且被点击的目标元素上的 data-xxx 属性会被作为post数据发送到后端API
|
|||
|
|||
$box = Box::make('成本总额图表', $bar) |
|||
->id('my-box') // 设置盒子的ID
|
|||
->tool($dropdown); // 设置下拉菜单按钮
|
|||
|
|||
$row->column(12, $box); |
|||
}); |
|||
} |
|||
} |
|||
@ -0,0 +1,140 @@ |
|||
<?php |
|||
|
|||
namespace App\Admin\Metrics\Examples; |
|||
|
|||
use App\Common\OrderStatus; |
|||
use App\Models\Order; |
|||
use Dcat\Admin\Admin; |
|||
use Dcat\Admin\Widgets\ApexCharts\Chart; |
|||
use Dcat\Admin\Widgets\Metrics\Bar; |
|||
use Illuminate\Http\Request; |
|||
use Illuminate\Support\Arr; |
|||
use Illuminate\Support\Facades\DB; |
|||
|
|||
class OrderStatistics extends Chart |
|||
{ |
|||
public function __construct() |
|||
{ |
|||
parent::__construct(); |
|||
$this->setUpOptions(); |
|||
} |
|||
|
|||
/** |
|||
* 初始化图表配置 |
|||
*/ |
|||
protected function setUpOptions() |
|||
{ |
|||
$this->options([ |
|||
'chart' => [ |
|||
//'width' => '180%',
|
|||
'type' => 'bar', |
|||
'events' => [ |
|||
], |
|||
'toolbar' => ['show' => false], |
|||
], |
|||
'plotOptions' => [ |
|||
'bar' => [ |
|||
//'columnWidth' => '45%',
|
|||
'distributed' => true, |
|||
] |
|||
], |
|||
'dataLabels' => [ |
|||
'enabled' => false |
|||
], |
|||
'legend' => [ |
|||
'show' => false |
|||
], |
|||
'xaxis' => [ |
|||
//'categories' =>
|
|||
// [75, 125, 225, 175, 125, 75, 25]
|
|||
//,
|
|||
'labels' => [ |
|||
'show' => true, |
|||
'style' => [ |
|||
'fontSize' => '12px' |
|||
] |
|||
], |
|||
], |
|||
'yaxis' => [ |
|||
'show' => true |
|||
], |
|||
'tooltip' => [ |
|||
'x' => ['show' => true], |
|||
], |
|||
]); |
|||
} |
|||
|
|||
/** |
|||
* 处理图表数据 |
|||
*/ |
|||
protected function buildData() |
|||
{ |
|||
$query = Order::query() |
|||
->select('*'); |
|||
|
|||
$dateTime = request('created_at', 0); |
|||
if ($dateTime) { |
|||
$query->whereBetween('created_at',$dateTime); |
|||
} |
|||
|
|||
switch (request('time_key', 0)) { |
|||
case '1': |
|||
$query->addSelect(DB::raw("count(id) as sum_price,CONCAT(YEAR(created_at),'-',MONTH(created_at),'-',DAY(created_at)) AS statistics_time")); |
|||
break; |
|||
case '30': |
|||
$query->addSelect(DB::raw("count(id) as sum_price,CONCAT(YEAR(created_at),'-',MONTH(created_at)) AS statistics_time")); |
|||
break; |
|||
case '365': |
|||
$query->addSelect(DB::raw("count(id) as sum_price,CONCAT(YEAR(created_at)) AS statistics_time")); |
|||
break; |
|||
default: |
|||
$query->addSelect(DB::raw("count(id) as sum_price,CONCAT(YEAR(created_at),'-',MONTH(created_at),'-',DAY(created_at)) AS statistics_time")); |
|||
} |
|||
$order = $query->groupBy('statistics_time') |
|||
->orderBy('created_at') |
|||
->get() |
|||
->toArray(); |
|||
|
|||
|
|||
$this->withData([ |
|||
[ |
|||
'name' => '订单数', |
|||
'data' => Arr::pluck($order,'sum_price') |
|||
], |
|||
] |
|||
); |
|||
$this->withCategories( |
|||
Arr::pluck($order,'statistics_time') |
|||
); |
|||
|
|||
} |
|||
|
|||
public function withData(array $data) |
|||
{ |
|||
return $this->option('series', $data); |
|||
} |
|||
|
|||
/** |
|||
* 设置图表类别. |
|||
* |
|||
* @param array $data |
|||
* |
|||
* @return $this |
|||
*/ |
|||
public function withCategories(array $data) |
|||
{ |
|||
return $this->option('xaxis.categories', $data); |
|||
} |
|||
|
|||
/** |
|||
* 渲染图表 |
|||
* |
|||
* @return string |
|||
*/ |
|||
public function render() |
|||
{ |
|||
$this->buildData(); |
|||
|
|||
return parent::render(); |
|||
} |
|||
} |
|||
@ -0,0 +1,111 @@ |
|||
<?php |
|||
|
|||
|
|||
namespace App\Admin\Tools; |
|||
|
|||
|
|||
use App\Common\LinkUrl; |
|||
use Dcat\Admin\Admin; |
|||
use Dcat\Admin\Grid\Tools\AbstractTool; |
|||
|
|||
class DataReportDate extends AbstractTool |
|||
{ |
|||
|
|||
protected $route; |
|||
|
|||
public function __construct($route) |
|||
{ |
|||
$this->route = $route; |
|||
parent::__construct(); |
|||
} |
|||
|
|||
protected function script() |
|||
{ |
|||
$url = $path = request()->url(); |
|||
$fullUrl = request()->fullUrl(); |
|||
$date = request()->input('created_at'); |
|||
$start = $date?$date['start']:''; |
|||
$end = $date?$date['end']:''; |
|||
return <<<JS |
|||
var app= new Vue({ |
|||
el:"#date_time", |
|||
data:{ |
|||
start: "$start", |
|||
end: "$end", |
|||
url:"$url", |
|||
full_url:"$fullUrl", |
|||
path:"$path", |
|||
pickerOptions: { |
|||
disabledDate(time) { |
|||
return time.getTime() > Date.now(); |
|||
}, |
|||
shortcuts: [{ |
|||
text: '今天', |
|||
onClick(picker) { |
|||
picker.\$emit('pick', new Date()); |
|||
} |
|||
}, { |
|||
text: '昨天', |
|||
onClick(picker) { |
|||
const date = new Date(); |
|||
date.setTime(date.getTime() - 3600 * 1000 * 24); |
|||
picker.\$emit('pick', date); |
|||
} |
|||
}, { |
|||
text: '一周前', |
|||
onClick(picker) { |
|||
const date = new Date(); |
|||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); |
|||
picker.\$emit('pick', date); |
|||
} |
|||
}] |
|||
}, |
|||
}, |
|||
methods:{ |
|||
doSearch(){ |
|||
|
|||
var url = this.url; |
|||
if (this.start){ |
|||
url = url+"?type=date&option=0&created_at[start]="+this.start; |
|||
} |
|||
if (this.end){ |
|||
if (!this.start){ |
|||
this.\$message({message:'请选择起始时间',type:"error"}) |
|||
return false; |
|||
} |
|||
url = url+"&created_at[end]="+this.end; |
|||
}else { |
|||
if (this.start){ |
|||
this.\$message({message:'请选择截止时间',type:"error"}) |
|||
return false; |
|||
} |
|||
} |
|||
|
|||
if (this.start&&this.end&&(this.start>this.end)){ |
|||
this.\$message({message:'截止时间不能小于起始时间',type:"error"}) |
|||
return false; |
|||
} |
|||
|
|||
window.location.href=url; |
|||
}, |
|||
reset(){ |
|||
window.location.href=this.path; |
|||
} |
|||
} |
|||
|
|||
}); |
|||
|
|||
JS; |
|||
|
|||
} |
|||
|
|||
public function render() |
|||
{ |
|||
Admin::js(LinkUrl::VUE_JS); |
|||
Admin::js(LinkUrl::ELEMENT_UI_JS); |
|||
Admin::css(LinkUrl::ELEMENT_UI_CSS); |
|||
Admin::css('css/data_report.css'); |
|||
Admin::script($this->script()); |
|||
return view('admin.tools.data_report_date'); |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue