客户统计

application/admin/controller/Dashboard.php

@@ -152,9 +152,13 @@ class Dashboard extends Backend
         $whereop['status'] = 3;
         $whereop['finish_time'] = ['between',[$starttime,$endtime]];
         $servicetype = Db::name('servicetype')->field('id,title as name')->select();
+
+        $all_count = Db::name('order')->where($whereop)->count('id');
+
         foreach($servicetype as $key => &$val){
             $whereop['servicetype_id'] = $val['id'];
             $val['value'] = Db::name('order')->where($whereop)->count('id');
+            $val['name'] = $val['name'] . bcdiv($val['value'],$all_count,4)*100 . '%';
             unset($val['id']);
         }
 
@@ -163,4 +167,25 @@ class Dashboard extends Backend
         return $this->view->fetch();
     }
 
+    public function datacentertwo(){
+        $whereop = $this->whereop('company_id');
+        $usernumber = Db::name('user_wallet')->where($whereop)->count();//充卡客户数量
+        $summoney = Db::name('user_wallet')->where($whereop)->sum('money');//充卡余额
+        //客户类别
+        $comefrom_config = ['线下新客','老带新','平台引流','自然进店'];
+        $comefrom_array = [];
+        foreach($comefrom_config as $key => $val){
+            $number = Db::name('user_wallet')->where($whereop)->where('comefrom',$val)->count();
+
+            $comefrom_array[] = ['name'=>$val . bcdiv($number,$usernumber,4)*100 . '%','value'=>$number];
+        }
+
+        //
+
+        $this->assign('usernumber', $usernumber);
+        $this->assign('summoney', $summoney);
+        $this->assignconfig('comefrom_array', $comefrom_array);
+        return $this->view->fetch();
+    }
+
 }

application/admin/view/dashboard/datacentertwo.html

@@ -0,0 +1,218 @@
+<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">
+
+    <div class="panel-body">
+        <div id="myTabContent" class="tab-content">
+            <div class="tab-pane fade active in" id="one">
+
+                <div class="row">
+                    <div class="col-sm-3 col-xs-6">
+                        <div class="sm-st clearfix">
+                            <span class="sm-st-icon st-red"><i class="fa fa-users"></i></span>
+                            <div class="sm-st-info">
+                                <span>{$usernumber}</span>
+                                充卡客户数量
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-3 col-xs-6">
+                        <div class="sm-st clearfix">
+                            <span class="sm-st-icon st-violet"><i class="fa fa-magic"></i></span>
+                            <div class="sm-st-info">
+                                <span>{$summoney}</span>
+                                充卡余额
+                            </div>
+                        </div>
+                    </div>
+
+
+                </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

@@ -182,6 +182,55 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
             });
 
         },
+        datacentertwo: 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.comefrom_array,
+                        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]"));