活动商品--表头统计图表

app/Admin/Controllers/v3/GoodsActivityReportController.php

@@ -5,16 +5,18 @@ namespace App\Admin\Controllers\v3;
 use App\Admin\Actions\Grid\v3\DataReportOption;
 
 use App\Admin\Repositories\v3\GoodsActivityReport;
-use App\Admin\Widgets\Charts\OrderGoodsActivityColumnChart;
+use App\Admin\Widgets\Charts\OrderGoodsActivityCountChart;
 use App\Admin\Widgets\Charts\OrderGoodsActivityMarketChart;
 use App\Admin\Widgets\Charts\OrderGoodsActivityTotalChart;
 use Dcat\Admin\Grid;
 use Dcat\Admin\Controllers\AdminController;
 use App\Models\v3\Market as MarketModel;
 use App\Models\v3\Store as StoreModel;
+use Dcat\Admin\Layout\Column;
 use Dcat\Admin\Grid\Filter;
 use Dcat\Admin\Layout\Content;
 use Dcat\Admin\Layout\Row;
+use Dcat\Admin\Widgets\Card;
 
 class GoodsActivityReportController extends AdminController
 {
@@ -36,8 +38,6 @@ class GoodsActivityReportController extends AdminController
             $marketList = MarketModel::getMarketArray();
             $storeList = StoreModel::getStoreArray();
 
-            // $grid->combine('默认统计今天的数据', ['name', 'value'])->responsive()->help('如果未选择时间，则默认只统计当天的所有市场的数据，特殊：现存用户默认统计所有的数据');
-
             $grid->column('goods_id')->sortable();
             $grid->column('cover_img')->image('',50);
             $grid->column('name','商品名称');
@@ -53,7 +53,7 @@ class GoodsActivityReportController extends AdminController
             $grid->column('price');
             $grid->column('original_price');
             $grid->column('total','销量');
-            $grid->column('subsidy_total','补贴');
+            $grid->column('subsidy_total','补贴')->help('（原价-售价）* 销量');
 
             $grid->filter(function (Filter $filter) use($marketList,$storeList) {
                 // 更改为 panel 布局
@@ -99,12 +99,27 @@ class GoodsActivityReportController extends AdminController
     {
         return $content->title('活动商品统计')
             ->body(function(Row $row){
-                $row->column(6,new OrderGoodsActivityTotalChart());
-                $row->column(3,new OrderGoodsActivityMarketChart());
-                // $row->column(6,new OrderGoodsActivityColumnChart());
+                // $row->column(2,function (Column $column){
+                //     $title = "销售总数量（单）";
+                //     $value = 123;
+                //     $card = Card::make("<span style='color: #ffffff'>{$title}</span>","<span style='color: #ffffff'>{$value}</span>");
+                //     $card->style('background-color:#4e9876');
+                //     $column->row($card);
+                // });
+                // $row->column(2,function (Column $column){
+                //     $title = "总补贴金额（元）";
+                //     $value = 56.23;
+                //     $card = Card::make("<span style='color: #ffffff'>{$title}</span>","<span style='color: #ffffff'>{$value}</span>");
+                //     $card->style('background-color:#4e9876');
+                //     $column->row($card);
+                // });
+                $row->column(4,new OrderGoodsActivityTotalChart());
+                $row->column(4,new OrderGoodsActivityCountChart());
+                $row->column(4,new OrderGoodsActivityMarketChart());
+               
             })
             ->body(function(Row $row){
-                // $row->column(12,$this->grid());
+                $row->column(12,$this->grid());
             });
     }
 }

app/Admin/Widgets/Charts/OrderGoodsActivityCountChart.php

@@ -0,0 +1,152 @@
+<?php
+
+namespace App\Admin\Widgets\Charts;
+
+use App\Admin\Repositories\v3\GoodsActivityReport;
+use Dcat\Admin\Admin;
+use Dcat\Admin\Support\JavaScript;
+use Dcat\Admin\Widgets\Metrics\Line;
+use Illuminate\Http\Request;
+
+class OrderGoodsActivityCountChart extends Line
+{ 
+    /**
+     * 活动商品总数
+     */
+    protected $categories = [];
+    protected $data = [];
+    protected $total = [];
+    protected $id;
+    protected $option;
+    protected $valueData = [];
+    protected $GoodsActivityReport = null;
+    protected $showNumber = 7;
+
+    public function __construct($data = [])
+    {
+        $this->GoodsActivityReport = new GoodsActivityReport();
+        $this->option = $this->id = 7;
+
+        // 分页的时候不重复查询数据
+        $currentPage = request()->input('page', 1);
+        if($currentPage == 1){
+            $data = $this->GoodsActivityReport->getCountData();
+            if(!empty($data) && is_array($data)){
+                $total = 0;
+                $subsidyTotal = 0;
+                foreach($data as $key => $value){
+                    if($key < $this->showNumber){
+                        $this->data[] = $value['subsidy_total'];
+                        $this->categories[] = $value['dtime'];
+                    }
+                    $subsidyTotal += $value['subsidy_total'];
+                }
+                $this->total['subsidy_total'] = $subsidyTotal;
+            }
+        }
+
+        parent::__construct();
+    }
+
+    protected function init()
+    {
+        parent::init();
+        $color = Admin::color();
+        // 设置标题
+        $this->title('总补贴金额（元）');
+        $this->subTitle('近'.$this->showNumber.'天每天总补贴金额');
+        $this->chartHeight(140);
+
+        // 设置图表颜色
+        $this->chartColors([$color->primary()]);
+
+        $this->chartOption(
+            'tooltip.x',
+            ['show' => true]
+        );
+        
+        $this->chartOption(
+            'tooltip.y.formatter',
+            JavaScript::make("function (params,index) {
+                return params ;
+            }")
+        );
+
+        $this->chartOption(
+            'xaxis.type',
+            'category'
+        );
+        $this->chartOption(
+            'xaxis.categories',
+            $this->categories
+        );
+    }
+    
+    /**
+     * 处理请求
+     * 如果你的图表类中包含此方法，则可以通过此方法处理前端通过ajax提交的获取图表数据的请求
+     *
+     * @param Request $request
+     * @return mixed|void
+     */
+    public function handle(Request $request)
+    {
+        // 数据查询逻辑
+        $data = $this->data;
+        $categories = $this->categories;
+        $chartData = [
+            [
+                'name' => '金额',
+                'data' => $data,
+            ]
+        ];
+        $this->withContent($this->total);
+        $this->withChart($chartData);
+        $this->withCategories($categories);
+    }
+
+    /**
+     * 这里返回需要异步传递到 handler 方法的参数 
+     * 
+     * @return array
+     */
+    public function parameters(): array
+    {
+        return [
+            'id'     => $this->id,
+            'option' => $this->option,
+        ];
+    }
+    /**
+     * 设置图表数据.
+     *
+     * @param array $data
+     *
+     * @return $this
+     */
+    public function withChart(array $data)
+    {
+        return $this->chart([
+            'series' => $data,
+        ]);
+    }
+
+    /**
+     * 渲染卡片内容.
+     *
+     * @return string
+     */
+    public function withContent($total = [])
+    {
+        $content =  $total['subsidy_total'] ??0;
+        return $this->content(
+            <<<HTML
+<div class="d-flex justify-content-between align-items-center mt-1" style="margin-bottom: 2px">
+    <h2 class="ml-1 font-lg-1">{$content}</h2>
+    <!-- <span class="mb-0 mr-1 text-80">{$this->title}</span> -->
+</div>
+HTML
+        );
+    }
+
+}

app/Admin/Widgets/Charts/OrderGoodsActivityMarketChart.php

@@ -18,7 +18,7 @@ class OrderGoodsActivityMarketChart extends Donut
     protected $id;
     protected $option;
     protected $GoodsActivityReport = null;
-    protected $color = [ '#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4', '#90ee7e', '#f48024', '#69d2e7'];
+    protected $color = ['#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4', '#90ee7e', '#f48024', '#69d2e7'];
     protected $colors = [];
 
     public function __construct($data = [])
@@ -50,8 +50,9 @@ class OrderGoodsActivityMarketChart extends Donut
     {
         parent::init();
         // 设置标题
-        $this->title('');
-        $this->chartHeight(160);
+        $this->title('各市场销售量（单）');
+        $this->subTitle('各市场销售量的占比图');
+        $this->chartHeight(170);
         // 设置下拉菜单
         // $this->dropdown([]);
         

app/Admin/Widgets/Charts/OrderGoodsActivityTotalChart.php

@@ -20,6 +20,7 @@ class OrderGoodsActivityTotalChart extends Bar
     protected $option;
     protected $valueData = [];
     protected $GoodsActivityReport = null;
+    protected $showNumber = 7;
 
     public function __construct($data = [])
     {
@@ -34,17 +35,13 @@ class OrderGoodsActivityTotalChart extends Bar
                 $total = 0;
                 $subsidyTotal = 0;
                 foreach($data as $key => $value){
-                    if($key < 10){
+                    if($key < $this->showNumber){
                         $this->data[] = $value['total'];
                         $this->categories[] = $value['dtime'];
-
-                        $this->valueData[] = $value['subsidy_total'];
                     }
                     $total += $value['total'];
-                    $subsidyTotal += $value['subsidy_total'];
                 }
                 $this->total['number_total'] = $total;
-                $this->total['subsidy_total'] = $subsidyTotal;
             }
         }
 
@@ -56,13 +53,8 @@ class OrderGoodsActivityTotalChart extends Bar
         parent::init();
         $color = Admin::color();
         // 设置标题
-        $this->title('');
-        // 设置下拉菜单
-        // $this->dropdown([]);
-
-        // $this->chartBarColumnWidth('50%');
-        // $this->style('display:block');
-
+        $this->title('销售总数量（单）');
+        $this->subTitle('近'.$this->showNumber.'天每天的销量');
         // 设置图表颜色
         $this->chartColors([$color->primary()]);
 
@@ -144,22 +136,13 @@ class OrderGoodsActivityTotalChart extends Bar
      */
     public function withContent($total = [])
     {
-        $numberTotal =  $this->total['number_total'] ?? 0;
-        $subsidyTotal = $this->total['subsidy_total'] ?? 0;//d-flex
+        $value =  $total['number_total'] ?? 0;
+        $minHeight = '113px';
         return $this->content(
             <<<HTML
-<div class="justify-content-between align-items-center mt-1">
-    <div class="ml-2">
-        <div class="card" style="background-color:#4e9876; color:#ffffff;">
-            <div class="card-header"><span>销售总数量（单）</span></div>
-            <div class="card-body ml-1"><span>{$numberTotal}</span></div>
-        </div>
-    </div>
-    <div class="ml-2">
-        <div class="card" style="background-color:#4e9876; color:#ffffff">
-            <div class="card-header"><span>总补贴金额（元）</span></div>
-            <div class="card-body ml-1"><span>{$subsidyTotal}</span></div>
-        </div>
+<div class="d-flex p-1 flex-column justify-content-between" style="padding-top: 0;width: 100%;height: 100%;min-height: {$minHeight}">
+    <div class="text-left">
+        <h2 class="ml-1 font-lg-1">{$value}</h2>
     </div>
 </div>
 HTML