nongchang
/
kknongchang_2506


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
							<?php

namespace UCore\DcatAdmin\Metrics\Examples;

use Dcat\Admin\Admin;
use Dcat\Admin\Support\JavaScript;
use Dcat\Admin\Widgets\Metrics\RadialBar;

/**
 * 横向 条形卡片
 *
 */
class DataBar extends \Dcat\Admin\Widgets\Metrics\RadialBar
{

    /**
     * @var array
     */
    protected $options = [
        'icon'     => null,
        'title'    => null,
        'header'   => null,
        'content'  => null,
        'footer'   => null,
        'dropdown' => [],
    ];

    /**
     * 卡片高度.
     *
     * @var int
     */
    protected $height = 190;

    /**
     * 图表高度.
     *
     * @var int
     */
    protected $chartHeight = 140;

    /**
     * 内容宽度.
     *
     * @var array
     */
    protected $contentWidth = [ 5, 7 ];

    /**
     * 图表上间距.
     *
     * @var int
     */
    protected $chartMarginTop = 0;

    /**
     * 图表下间距.
     *
     * @var int
     */
    protected $chartMarginBottom = -20;

    /**
     * 图表默认配置.
     *
     * @return array
     */
    protected function defaultChartOptions()
    {

        return [
            'chart' => [
                'height' => 150,
                'type'   => 'bar',

            ],

            'series' => [

            ],

            'xaxis'       => [
            ],
            'plotOptions' => [
                'bar' => [
                    'horizontal' => true
                ]
            ]
        ];
    }


    /**
     * 设置图表数据.
     *
     * @param array $data 键值对
     *
     * @return $this
     */
    public function withChart(array $data)
    {

        $cData = [
            'series' => [
                [
                    'data' => array_values($data)
                ]
            ],
            'xaxis'  => [
                'categories' => array_keys($data)
            ],
        ];

        return $this->chart($cData);
    }


    /**
     * 卡片内容.
     *
     * @param int $finished
     * @param int $pending
     * @param int $rejected
     *
     * @return $this
     */
    public function withContent($count, $in, $out)
    {
        return $this->content(
            <<<HTML
<div class="col-12 d-flex flex-column flex-wrap text-center" style="max-width: 220px">
    <div class="chart-info d-flex justify-content-between mb-1 mt-2" >
          <div class="series-info d-flex align-items-center">
              <i class="fa fa-circle-o text-bold-700 text-primary"></i>
              <span class="text-bold-600 ml-50">总</span>
          </div>
          <div class="product-result">
              <span>{$count}</span>
          </div>
    </div>

    <div class="chart-info d-flex justify-content-between mb-1">
          <div class="series-info d-flex align-items-center">
              <i class="fa fa-circle-o text-bold-700 text-warning"></i>
              <span class="text-bold-600 ml-50">总转入</span>
          </div>
          <div class="product-result">
              <span>{$in}</span>
          </div>
    </div>
      <div class="chart-info d-flex justify-content-between mb-1">
          <div class="series-info d-flex align-items-center">
              <i class="fa fa-circle-o text-bold-700 text-danger"></i>
              <span class="text-bold-600 ml-50">总转出</span>
          </div>
          <div class="product-result">
              <span>{$out}</span>
          </div>
    </div>


</div>
HTML
        );
    }

}