首頁 探索 說明
註冊 登入
wangjunyun
/
Dcat-Admin
镜像来自 https://gitee.com/jqhph/dcat-admin.git
1
0
複刻 0
檔案 問題管理 0 Wiki
瀏覽代碼

update

jqh 5 年之前
父節點
7c978cac2c
當前提交
4e88ff8390
共有 9 個文件被更改，包括 215 次插入 和 64 次删除
分割檢視 顯示文件統計
  1. 9 9
      resources/views/widgets/metrics/card.blade.php
  2. 1 0
      src/Console/InstallCommand.php
  3. 5 4
      src/Console/stubs/metrics/NewDevices.stub
  4. 7 12
      src/Console/stubs/metrics/Sessions.stub
  5. 129 0
      src/Console/stubs/metrics/TotalUsers.stub
  6. 53 20
      src/Widgets/Metrics/Card.php
  7. 2 4
      src/Widgets/Metrics/Donut.php
  8. 5 4
      src/Widgets/Metrics/Line.php
  9. 4 11
      src/Widgets/Metrics/RadialBar.php

+ 9 - 9
resources/views/widgets/metrics/card.blade.php
查看文件 

@@ -1,34 +1,34 @@
 
 <div {!! $attributes !!}>
 
     <div class="card-header d-flex justify-content-between align-items-start pb-0">
 
         <div>
 
-            @if($options['icon'])
 
+            @if($icon)
 
             <div class="avatar bg-rgba-{{ $style }} p-50 m-0">
 
                 <div class="avatar-content">
 
-                    <i class="{{ $options['icon'] }} text-{{ $style }} font-medium-5"></i>
 
+                    <i class="{{ $icon }} text-{{ $style }} font-medium-5"></i>
 
                 </div>
 
             </div>
 
             @endif
 
 
-            @if($options['title'])
 
-                <h4 class="card-title mb-1">{!! $options['title'] !!}</h4>
 
+            @if($title)
 
+                <h4 class="card-title mb-1">{!! $title !!}</h4>
 
             @endif
 
 
             <div class="metric-header">{!! $header !!}</div>
 
         </div>
 
 
-        @if (! empty($options['subTitle']))
 
+        @if (! empty($subTitle))
 
             <span class="btn btn-sm bg-light shadow-0 p-0">
 
-                {{ $options['subTitle'] }}
 
+                {{ $subTitle }}
 
             </span>
 
         @endif
 
 
-        @if(! empty($options['dropdown']))
 
+        @if(! empty($dropdown))
 
         <div class="dropdown chart-dropdown">
 
             <button class="btn btn-sm btn-light shadow-0 dropdown-toggle p-0 waves-effect" data-toggle="dropdown">
 
-                {{ current($options['dropdown']) }}
 
+                {{ current($dropdown) }}
 
             </button>
 
             <div class="dropdown-menu dropdown-menu-right">
 
-                @foreach($options['dropdown'] as $key => $value)
 
+                @foreach($dropdown as $key => $value)
 
                 <li class="dropdown-item"><a href="javascript:void(0)" class="select-option" data-option="{{ $key }}">{{ $value }}</a></li>
 
                 @endforeach
 
             </div>

+ 1 - 0
src/Console/InstallCommand.php
查看文件 

@@ -140,6 +140,7 @@ class InstallCommand extends Command
 
             '/Metrics/Examples/ProductOrders.php' => 'metrics/ProductOrders',
 
             '/Metrics/Examples/Sessions.php'      => 'metrics/Sessions',
 
             '/Metrics/Examples/Tickets.php'       => 'metrics/Tickets',
 
+            '/Metrics/Examples/TotalUsers.php'    => 'metrics/TotalUsers',
 
         ];
 
 
         $namespace = $this->namespace('Metrics\\Examples');

+ 5 - 4
src/Console/stubs/metrics/NewDevices.stub
查看文件 

@@ -78,17 +78,18 @@ class NewDevices extends Donut
 
         $blue = Admin::color()->alpha('blue2', 0.5);

 

         $style = 'margin-bottom: 8px';

+        $labelWidth = 120;

 

         return $this->content(

             <<<HTML

-<div class="d-flex justify-content-between pl-1 pr-1 pt-1" style="{$style}">

-    <div>

+<div class="d-flex pl-1 pr-1 pt-1" style="{$style}">

+    <div style="width: {$labelWidth}px">

         <i class="fa fa-circle text-primary"></i> {$this->labels[0]}

     </div>

     <div>{$desktop}</div>

 </div>

-<div class="d-flex justify-content-between pl-1 pr-1" style="{$style}">

-    <div>

+<div class="d-flex pl-1 pr-1" style="{$style}">

+    <div style="width: {$labelWidth}px">

         <i class="fa fa-circle" style="color: $blue"></i> {$this->labels[1]}

     </div>

     <div>{$mobile}</div>

+ 7 - 12
src/Console/stubs/metrics/Sessions.stub
查看文件 

@@ -8,16 +8,6 @@ use Illuminate\Http\Request;
 
 

 class Sessions extends Bar

 {

-    /**

-     * @var array

-     */

-    protected $dropdownItems = [

-        '7' => 'Last 7 Days',

-        '28' => 'Last 28 Days',

-        '30' => 'Last Month',

-        '365' => 'Last Year',

-    ];

-

     /**

      * 初始化卡片内容

      */

@@ -34,7 +24,12 @@ class Sessions extends Bar
 
         // 标题

         $this->title('Avg Sessions');

         // 设置下拉选项

-        $this->dropdown($this->dropdownItems);

+        $this->dropdown([

+            '7' => 'Last 7 Days',

+            '28' => 'Last 28 Days',

+            '30' => 'Last Month',

+            '365' => 'Last Year',

+        ]);

         // 设置图表颜色

         $this->chartColors([

             $dark35,

@@ -98,7 +93,7 @@ class Sessions extends Bar
 
     {

         // 根据选项显示

         $label = strtolower(

-            $this->dropdownItems[request()->option] ?? 'last 7 days'

+            $this->dropdown[request()->option] ?? 'last 7 days'

         );

 

         $minHeight = '183px';

+ 129 - 0
src/Console/stubs/metrics/TotalUsers.stub
查看文件 

@@ -0,0 +1,129 @@
 
+<?php
 
+
 
+namespace DummyNamespace;
 
+
 
+use Dcat\Admin\Widgets\Metrics\Card;
 
+use Illuminate\Contracts\Support\Renderable;
 
+use Illuminate\Http\Request;
 
+
 
+class TotalUsers extends Card
 
+{
 
+    /**
 
+     * 卡片底部内容.
 
+     *
 
+     * @var string|Renderable|\Closure
 
+     */
 
+    protected $footer;
 
+
 
+    /**
 
+     * 初始化卡片.
 
+     */
 
+    protected function init()
 
+    {
 
+        parent::init();
 
+
 
+        $this->title('Total Users');
 
+        $this->dropdown([
 
+            '7' => 'Last 7 Days',
 
+            '28' => 'Last 28 Days',
 
+            '30' => 'Last Month',
 
+            '365' => 'Last Year',
 
+        ]);
 
+    }
 
+
 
+    /**
 
+     * 处理请求.
 
+     *
 
+     * @param Request $request
 
+     *
 
+     * @return void
 
+     */
 
+    public function handle(Request $request)
 
+    {
 
+        switch ($request->get('option')) {
 
+            case '365':
 
+                $this->content(mt_rand(600, 1500));
 
+                $this->down(mt_rand(1, 30));
 
+                break;
 
+            case '30':
 
+                $this->content(mt_rand(170, 250));
 
+                $this->up(mt_rand(12, 50));
 
+                break;
 
+            case '28':
 
+                $this->content(mt_rand(155, 200));
 
+                $this->up(mt_rand(5, 50));
 
+                break;
 
+            case '7':
 
+            default:
 
+                $this->content(143);
 
+                $this->up(15);
 
+        }
 
+    }
 
+
 
+    /**
 
+     * @param int $percent
 
+     *
 
+     * @return $this
 
+     */
 
+    public function up($percent)
 
+    {
 
+        return $this->footer(
 
+            "<i class=\"feather icon-trending-up text-success\"></i> {$percent}% Increase"
 
+        );
 
+    }
 
+
 
+    /**
 
+     * @param int $percent
 
+     *
 
+     * @return $this
 
+     */
 
+    public function down($percent)
 
+    {
 
+        return $this->footer(
 
+            "<i class=\"feather icon-trending-down text-danger\"></i> {$percent}% Decrease"
 
+        );
 
+    }
 
+
 
+    /**
 
+     * 设置卡片底部内容.
 
+     *
 
+     * @param string|Renderable|\Closure $footer
 
+     *
 
+     * @return $this
 
+     */
 
+    public function footer($footer)
 
+    {
 
+        $this->footer = $footer;
 
+
 
+        return $this;
 
+    }
 
+
 
+    /**
 
+     * 渲染卡片内容.
 
+     *
 
+     * @return string
 
+     */
 
+    public function renderContent()
 
+    {
 
+        $content = parent::renderContent();
 
+
 
+        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">{$content}</h2>
 
+</div>
 
+<div class="ml-1 mt-1 font-weight-bold text-80">
 
+    {$this->renderFooter()}
 
+</div>
 
+HTML;
 
+    }
 
+
 
+    /**
 
+     * 渲染卡片底部内容.
 
+     *
 
+     * @return string
 
+     */
 
+    public function renderFooter()
 
+    {
 
+        return $this->toString($this->footer);
 
+    }
 
+}

+ 53 - 20
src/Widgets/Metrics/Card.php
查看文件 

@@ -7,6 +7,7 @@ use Dcat\Admin\Support\Helper;
 
 use Dcat\Admin\Traits\InteractsWithApi;
 
 use Dcat\Admin\Widgets\ApexCharts\Chart;
 
 use Dcat\Admin\Widgets\Widget;
 
+use Illuminate\Contracts\Support\Renderable;
 
 use Illuminate\Support\Arr;
 
 use Illuminate\Support\Str;
 
 
@@ -20,16 +21,46 @@ class Card extends Widget
 
     protected $view = 'admin::widgets.metrics.card';
 
 
     /**
 
+     * 图标.
 
+     *
 
+     * @var string
 
+     */
 
+    protected $icon;
 
+
 
+    /**
 
+     * 卡片标题
 
+     *
 
+     * @var string
 
+     */
 
+    protected $title;
 
+
 
+    /**
 
+     * 卡片子标题
 
+     *
 
+     * @var string
 
+     */
 
+    protected $subTitle;
 
+
 
+    /**
 
+     * 卡片头部内容
 
+     *
 
+     * @var string|Renderable|\Closure
 
+     */
 
+    protected $header;
 
+
 
+    /**
 
+     * 卡片内容.
 
+     *
 
+     * @var string|Renderable|\Closure
 
+     */
 
+    protected $content;
 
+
 
+    /**
 
+     * 下拉菜单.
 
+     *
 
      * @var array
 
      */
 
-    protected $options = [
 
-        'icon'     => null,
 
-        'title'    => null,
 
-        'subTitle' => null,
 
-        'header'   => null,
 
-        'content'  => null,
 
-        'dropdown' => [],
 
-    ];
 
+    protected $dropdown = [];
 
 
     /**
 
      * 图标主题色.
 
@@ -43,14 +74,14 @@ class Card extends Widget
 
      *
 
      * @var int|string
 
      */
 
-    protected $height = null;
 
+    protected $height = 165;
 
 
     /**
 
      * 图表高度.
 
      *
 
      * @var int
 
      */
 
-    protected $chartHeight = 70;
 
+    protected $chartHeight;
 
 
     /**
 
      * 图表上间距.
 
@@ -133,7 +164,7 @@ class Card extends Widget
 
      */
 
     public function icon(?string $icon)
 
     {
 
-        $this->options['icon'] = $icon;
 
+        $this->icon = $icon;
 
 
         return $this;
 
     }
 
@@ -147,7 +178,7 @@ class Card extends Widget
 
      */
 
     public function title(?string $title)
 
     {
 
-        $this->options['title'] = $title;
 
+        $this->title = $title;
 
 
         return $this;
 
     }
 
@@ -161,7 +192,7 @@ class Card extends Widget
 
      */
 
     public function subTitle(?string $title)
 
     {
 
-        $this->options['subTitle'] = $title;
 
+        $this->subTitle = $title;
 
 
         return $this;
 
     }
 
@@ -175,7 +206,7 @@ class Card extends Widget
 
      */
 
     public function header($contents)
 
     {
 
-        $this->options['header'] = $contents;
 
+        $this->header = $contents;
 
 
         return $this;
 
     }
 
@@ -189,7 +220,7 @@ class Card extends Widget
 
      */
 
     public function content($contents)
 
     {
 
-        $this->options['content'] = $contents;
 
+        $this->content = $contents;
 
 
         return $this;
 
     }
 
@@ -217,7 +248,7 @@ class Card extends Widget
 
      */
 
     public function dropdown(array $items)
 
     {
 
-        $this->options['dropdown'] = $items;
 
+        $this->dropdown = $items;
 
 
         return $this;
 
     }
 
@@ -455,7 +486,7 @@ JS;
 
      */
 
     public function renderHeader()
 
     {
 
-        return Helper::render($this->options['header']);
 
+        return Helper::render($this->header);
 
     }
 
 
     /**
 
@@ -465,7 +496,7 @@ JS;
 
      */
 
     public function renderContent()
 
     {
 
-        return Helper::render($this->options['content']);
 
+        return Helper::render($this->content);
 
     }
 
 
     /**
 
@@ -504,11 +535,13 @@ JS;
 
 
         $this->script = $this->script();
 
 
+        $this->variables['icon'] = $this->icon;
 
+        $this->variables['title'] = $this->title;
 
+        $this->variables['subTitle'] = $this->subTitle;
 
         $this->variables['style'] = $this->style;
 
         $this->variables['header'] = $this->renderHeader();
 
         $this->variables['content'] = $this->renderContent();
 
-
 
-
 
+        $this->variables['dropdown'] = $this->dropdown;
 
 
         return parent::render();
 
     }

+ 2 - 4
src/Widgets/Metrics/Donut.php
查看文件 

@@ -72,13 +72,11 @@ class Donut extends Card
 
     {
 
         parent::init();
 
 
-        // 卡片默认高度
 
-        $this->height(165);
 
-
 
         // 使用图表
 
         $this->useChart();
 
 
-        $this->chart->style('margin-top: 10px;');
 
+        // 默认样式
 
+        $this->chart->style('margin: 10px 5px 0 0;width: 150px;float:right;');
 
     }
 
 
     /**

+ 5 - 4
src/Widgets/Metrics/Line.php
查看文件 

@@ -78,10 +78,11 @@ class Line extends Card
 
     {
 
         parent::init();
 
 
-        $this->height(165);
 
-
 
-        // 使用图表s
 
+        // 使用图表
 
         $this->useChart();
 
+
 
+        // 兼容图表显示不全问题
 
+        $this->chart->style('margin-right:-6px;');
 
     }
 
 
     /**
 
@@ -115,7 +116,7 @@ class Line extends Card
 
 
         return <<<HTML
 
 {$content}
 
-<div class="card-content">
 
+<div class="card-content" style="overflow-x:hidden;overflow-y:hidden">
 
     {$this->renderChart()}
 
 </div>
 
 HTML;

+ 4 - 11
src/Widgets/Metrics/RadialBar.php
查看文件 

@@ -15,16 +15,9 @@ use Illuminate\Contracts\Support\Renderable;
 
 class RadialBar extends Card
 
 {
 
     /**
 
-     * @var array
 
+     * @var string|Renderable|\Closure
 
      */
 
-    protected $options = [
 
-        'icon'     => null,
 
-        'title'    => null,
 
-        'header'   => null,
 
-        'content'  => null,
 
-        'footer'   => null,
 
-        'dropdown' => [],
 
-    ];
 
+    protected $footer;
 
 
     /**
 
      * 卡片高度.
 
@@ -128,7 +121,7 @@ class RadialBar extends Card
 
      */
 
     public function footer($value)
 
     {
 
-        $this->options['footer'] = $value;
 
+        $this->footer = $value;
 
 
         return $this;
 
     }
 
@@ -167,7 +160,7 @@ class RadialBar extends Card
 
      */
 
     public function renderFooter()
 
     {
 
-        return Helper::render($this->options['footer']);
 
+        return Helper::render($this->footer);
 
     }
 
 
     /**