dcat-admin表格新增数据统计卡片

最新推荐文章于 2023-09-21 17:50:33 发布

MillionGao

最新推荐文章于 2023-09-21 17:50:33 发布

阅读量879

点赞数

分类专栏： # Laravel 文章标签： PHP laravel

本文链接：https://blog.csdn.net/g960214/article/details/128373004

版权

Laravel 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现效果

在这里插入图片描述

控制器部分

Controller内新增index方法

use App\Admin\Metrics\Examples\ShareCount;
use Dcat\Admin\Layout\Content;
use Dcat\Admin\Layout\Row as DcatRow;

public function index(Content $content)
{
	return $content->body(function (DcatRow $row) {
		// 第一个参数是所占行内大小，第二个参数是卡片数据处理类
		$row->column(4, new ShareCount());
	})
	->body($this->grid());
}

统计数据处理部分

在Admin\Metrics\Examples中新建数据处理文件

<?php
namespace App\Admin\Metrics\Examples;

use Dcat\Admin\Widgets\Metrics\Line;
use Illuminate\Http\Request;

class ShareCount extends Line {


    protected function init()
    {
        parent::init();

        $this->title('转发数据');
        $this->dropdown([
            '7' => '过去7天',
            '30' => '过去30天',
        ]);
    }

    public function handle(Request $request)
    {
        $option = $request->get('option');
        switch ($option) {
            case '30':
            	//你的逻辑处理逻辑
                break;
            case '7':
            default:
            	//你的逻辑处理逻辑
                break;
        }
        $data = 1000; //总计数量
        $chart = [];//数组
        // 卡片内容
        $this->withContent(count($data).'次');
        // 图表数据
        $this->withChart($chart);
    }

    /**
     * 设置图表数据.
     *
     * @param array $data
     *
     * @return $this
     */
    public function withChart(array $data)
    {
    	// $data 数据格式为[12,231,24,45,46,54,7,65,3]纯数字的一维数组
        return $this->chart([
            'series' => [
                [
                    'name' => $this->title,
                    'data' => $data,
                ],
            ],
        ]);
    }

    /**
     * 设置卡片内容.
     *
     * @param string $content
     *
     * @return $this
     */
    public function withContent($content)
    {
    	//自定义卡片样式
        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
        );
    }
}