订单统计扇形图

application/admin/controller/Dashboard.php

@@ -82,7 +82,7 @@ class Dashboard extends Backend
     }
 
     /**
-     * 订单统计
+     * 订单统计笔数
      */
     public function order(){
         $starttime = strtotime(date('Y-m-d',strtotime("-30 day")));  //默认30天前
@@ -106,6 +106,9 @@ class Dashboard extends Backend
         $ec_ordernum = [];
 //        $ec_orderfee = [];
 
+        $whereop = $this->whereop('company_id');
+        $whereop['status'] = 3;
+
         for($i=$starttime;$i<$endtime;$i+=86400){
             $starttime_i = $i;
             $endtime_i = $i + 86399;
@@ -113,7 +116,8 @@ class Dashboard extends Backend
             //日历
             $ec_date[] = date('Y-m-d',$starttime_i);
             //下单人数
-            $ec_ordernum[] = Db::name('order')->where(['finish_time'=>['between',[$starttime_i,$endtime_i]]])->count('id');
+            $whereop['finish_time'] = ['between',[$starttime_i,$endtime_i]];
+            $ec_ordernum[] = Db::name('order')->where($whereop)->count('id');
             //下单金额
 //            $ec_orderfee[] = Db::name('order')->where(['createtime'=>['between',[$starttime_i,$endtime_i]]])->sum('pay_fee');
 
@@ -127,4 +131,36 @@ class Dashboard extends Backend
         return $this->view->fetch();
     }
 
+    /**
+     * 订单统计各类型
+     */
+    public function orderservicetype(){
+        $starttime = strtotime(date('Y-m-d',strtotime("-30 day")));  //默认30天前
+        $endtime   = strtotime(date('Y-m-d')) - 1;
+
+        //接收
+        $choicedatetime = input('choicedatetime','');
+        if(!empty($choicedatetime)){
+            $choicedatetime = explode(' - ',$choicedatetime);
+            $starttime = strtotime($choicedatetime[0]);
+            $endtime   = strtotime($choicedatetime[1]) + 86399;
+        }
+        $this->view->assign('defaultdatetime',date('Y-m-d',$starttime).' - '.date('Y-m-d',$endtime));
+
+        //饼图
+        $whereop = $this->whereop('company_id');
+        $whereop['status'] = 3;
+        $whereop['finish_time'] = ['between',[$starttime,$endtime]];
+        $servicetype = Db::name('servicetype')->field('id,title as name')->select();
+        foreach($servicetype as $key => &$val){
+            $whereop['servicetype_id'] = $val['id'];
+            $val['value'] = Db::name('order')->where($whereop)->count('id');
+            unset($val['id']);
+        }
+
+        $this->assignconfig('servicetype', $servicetype);
+
+        return $this->view->fetch();
+    }
+
 }

application/admin/view/dashboard/orderservicetype.html

@@ -0,0 +1,213 @@
+<style type="text/css">
+    .sm-st {
+        background: #fff;
+        padding: 20px;
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        margin-bottom: 20px;
+    }
+
+    .sm-st-icon {
+        width: 60px;
+        height: 60px;
+        display: inline-block;
+        line-height: 60px;
+        text-align: center;
+        font-size: 30px;
+        background: #eee;
+        -webkit-border-radius: 5px;
+        -moz-border-radius: 5px;
+        border-radius: 5px;
+        float: left;
+        margin-right: 10px;
+        color: #fff;
+    }
+
+    .sm-st-info {
+        padding-top: 2px;
+    }
+
+    .sm-st-info span {
+        display: block;
+        font-size: 24px;
+        font-weight: 600;
+    }
+
+    .orange {
+        background: #fa8564 !important;
+    }
+
+    .tar {
+        background: #45cf95 !important;
+    }
+
+    .sm-st .green {
+        background: #86ba41 !important;
+    }
+
+    .pink {
+        background: #AC75F0 !important;
+    }
+
+    .yellow-b {
+        background: #fdd752 !important;
+    }
+
+    .stat-elem {
+
+        background-color: #fff;
+        padding: 18px;
+        border-radius: 40px;
+
+    }
+
+    .stat-info {
+        text-align: center;
+        background-color: #fff;
+        border-radius: 5px;
+        margin-top: -5px;
+        padding: 8px;
+        -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
+        box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
+        font-style: italic;
+    }
+
+    .stat-icon {
+        text-align: center;
+        margin-bottom: 5px;
+    }
+
+    .st-red {
+        background-color: #F05050;
+    }
+
+    .st-green {
+        background-color: #27C24C;
+    }
+
+    .st-violet {
+        background-color: #7266ba;
+    }
+
+    .st-blue {
+        background-color: #23b7e5;
+    }
+
+    .stats .stat-icon {
+        color: #28bb9c;
+        display: inline-block;
+        font-size: 26px;
+        text-align: center;
+        vertical-align: middle;
+        width: 50px;
+        float: left;
+    }
+
+    .stat {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+    }
+
+    .stat .value {
+        font-size: 20px;
+        line-height: 24px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-weight: 500;
+    }
+
+    .stat .name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin: 5px 0;
+    }
+
+    .stat.lg .value {
+        font-size: 26px;
+        line-height: 28px;
+    }
+
+    .stat-col {
+        margin:0 0 10px 0;
+    }
+    .stat.lg .name {
+        font-size: 16px;
+    }
+
+    .stat-col .progress {
+        height: 2px;
+    }
+
+    .stat-col .progress-bar {
+        line-height: 2px;
+        height: 2px;
+    }
+
+    .item {
+        padding: 30px 0;
+    }
+
+
+    #statistics .panel {
+        min-height: 150px;
+    }
+
+    #statistics .panel h5 {
+        font-size: 14px;
+    }
+</style>
+<div class="panel panel-default panel-intro">
+    <form  method="POST"  class="form-horizontal" action="">
+        <div class="form-group">
+            <div class="col-xs-12 col-sm-2">
+                <input type="text" class="form-control" name="choicedatetime" value="{$defaultdatetime}" placeholder="选择时间" id="choicedatetime" data-index="4" autocomplete="off">
+            </div>
+        </div>
+        <div class="form-group layer-footer">
+            <label class="control-label col-xs-12 col-sm-2"></label>
+            <div class="col-xs-12 col-sm-8">
+                <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
+            </div>
+        </div>
+    </form>
+    <div class="panel-body">
+        <div id="myTabContent" class="tab-content">
+            <div class="tab-pane fade active in" id="one">
+
+                <div class="row">
+
+
+
+                </div>
+
+                <div class="row">
+                    <div class="col-lg-12">
+                        <div id="echart" class="btn-refresh" style="height:650px;width:100%;"></div>
+                    </div>
+
+                </div>
+
+
+            </div>
+            <div class="tab-pane fade" id="two">
+                <div class="row">
+                    <div class="col-xs-12">
+                        {:__('Custom zone')}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="/assets/laydate/laydate.js"></script>
+<script>
+    laydate.render({
+        elem: '#choicedatetime'
+        //设置开始日期、日期日期的 input 选择器
+        //数组格式为 5.3.0 开始新增，之前版本直接配置 true 或任意分割字符即可
+        ,range: ['#test-startDate-1', '#test-endDate-1']
+    });
+</script>

public/assets/js/backend/dashboard.js

@@ -133,6 +133,55 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
             });
 
         },
+        orderservicetype: function () {
+            // 基于准备好的dom，初始化echarts实例
+            var myChart = Echarts.init(document.getElementById('echart'), 'walden');
+
+            // 指定图表的配置项和数据
+            var option = {
+                title: {
+                    text: '订单统计',
+                    subtext: '',
+                    left: 'center'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'left'
+                },
+                series: [
+                    {
+                        name: 'Access From',
+                        type: 'pie',
+                        radius: '50%',
+                        data: Config.servicetype,
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ]
+            };
+
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+
+            $(window).resize(function () {
+                myChart.resize();
+            });
+
+            $(document).on("click", ".btn-refresh", function () {
+                setTimeout(function () {
+                    myChart.resize();
+                }, 0);
+            });
+
+        },
         api: {
             bindevent: function () {
                 Form.api.bindevent($("form[role=form]"));