后台订单统计

application/admin/controller/Dashboard.php

@@ -81,4 +81,50 @@ class Dashboard extends Backend
         return $this->view->fetch();
     }
 
+    /**
+     * 订单统计
+     */
+    public function order(){
+        $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));
+
+        //dump($starttime);
+        //dump($endtime);
+
+
+        //过去30天
+        $ec_date = [];
+        $ec_ordernum = [];
+//        $ec_orderfee = [];
+
+        for($i=$starttime;$i<$endtime;$i+=86400){
+            $starttime_i = $i;
+            $endtime_i = $i + 86399;
+            //dump($starttime);
+            //日历
+            $ec_date[] = date('Y-m-d',$starttime_i);
+            //下单人数
+            $ec_ordernum[] = Db::name('order')->where(['finish_time'=>['between',[$starttime_i,$endtime_i]]])->count('id');
+            //下单金额
+//            $ec_orderfee[] = Db::name('order')->where(['createtime'=>['between',[$starttime_i,$endtime_i]]])->sum('pay_fee');
+
+        }
+
+        $this->assignconfig('ec_date', $ec_date);
+        $this->assignconfig('ec_ordernum', $ec_ordernum);
+//        $this->assignconfig('ec_orderfee', $ec_orderfee);
+
+
+        return $this->view->fetch();
+    }
+
 }

application/admin/view/dashboard/order.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

@@ -1,4 +1,4 @@
-define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {
+define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme','form', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined,Form, Template) {
 
     var Controller = {
         index: function () {
@@ -73,6 +73,70 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
                 }, 0);
             });
 
+        },
+        order: function () {
+            // 基于准备好的dom，初始化echarts实例
+            var myChart = Echarts.init(document.getElementById('echart'), 'walden');
+
+            // 指定图表的配置项和数据
+            var option = {
+                title: {
+                    text: '订单统计'
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['笔数']
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {}
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: Config.ec_date
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        name: '笔数',
+                        type: 'line',
+//                        stack: 'Total',
+                        data: Config.ec_ordernum
+                    },
+
+                ]
+            };
+
+            // 使用刚指定的配置项和数据显示图表。
+            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]"));
+            }
         }
     };
 

public/assets/laydate/theme/default/font/iconfont.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="laydate-icon" horiz-adv-x="1024" >
+  <font-face
+    font-family="laydate-icon"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+    
+
+    
+    <glyph glyph-name="youyou" unicode="&#58882;" d="M283.648 721.918976 340.873216 780.926976 740.352 383.997952 340.876288-12.925952 283.648 46.077952 619.52 383.997952Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zuozuo" unicode="&#58883;" d="M740.352 721.918976 683.126784 780.926976 283.648 383.997952 683.123712-12.925952 740.352 46.077952 404.48 383.997952Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xiayiye" unicode="&#58970;" d="M62.573 384.103l423.401 423.662c18.985 18.985 49.757 18.985 68.727 0 18.982-18.972 18.985-49.746 0-68.729l-355.058-355.067 356.796-356.796c18.977-18.971 18.976-49.746 0-68.727-18.982-18.976-49.751-18.976-68.727 0l-39.753 39.753 0.269 0.246-385.655 385.661zM451.365 384.103l423.407 423.662c18.985 18.985 49.757 18.985 68.727 0 18.982-18.972 18.985-49.746 0-68.729l-355.058-355.067 356.796-356.796c18.977-18.971 18.976-49.746 0-68.727-18.982-18.976-49.757-18.977-68.727 0l-39.762 39.754 0.273 0.249-385.662 385.661zM451.365 384.103z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xiayiye1" unicode="&#58971;" d="M948.066926 382.958838l-411.990051-412.24426c-18.47333-18.47333-48.417689-18.47333-66.875207 0-18.47333 18.461167-18.47333 48.405526 0 66.875207L814.691135 383.088983 467.512212 730.269123c-18.466032 18.458735-18.466032 48.405526 0 66.873991 18.468465 18.464816 48.410391 18.464816 66.872774 0l38.682336-38.682336-0.261507-0.239614 375.259894-375.265975v0.003649m-378.312834 0L157.756743-29.285422c-18.47333-18.47333-48.415256-18.47333-66.872775 0-18.47333 18.461167-18.47333 48.405526 0 66.875207L436.369787 383.088983 89.19208 730.269123c-18.4636 18.458735-18.4636 48.405526 0 66.873991 18.470898 18.464816 48.415256 18.464816 66.872774 0l38.692067-38.682336-0.266372-0.239614 375.267191-375.265975-0.004865 0.003649m0 0z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>