第四个统计

application/admin/controller/Dashboard.php

@@ -197,7 +197,8 @@ class Dashboard extends Backend
     public function datacenterthree(){
 
         $servicetype = Db::name('servicetype')->field('id,title as name')->select();
-        $this->assignconfig('servicetype',array_column($servicetype,'name'));
+        $servicename = array_column($servicetype,'name');
+        $this->assignconfig('servicename',$servicename);
         //七日
         $starttime = strtotime(date('Y-m-d')) - 518400;
         $endtime   = strtotime(date('Y-m-d')) + 86399;
@@ -228,7 +229,6 @@ class Dashboard extends Backend
                 $val['barGap'] = 0;
             }
 
-            $val['label'] = 'labelOption';
             $val['emphasis'] = ['focus'=>'series'];
             $val['data'] = [];
 
@@ -250,9 +250,11 @@ class Dashboard extends Backend
     /**
      * 半年销售金额数据统计
      */
-    public function datacenter_three2(){
+    public function datacenterthree2(){
 
         $servicetype = Db::name('servicetype')->field('id,title as name')->select();
+        $servicename = array_column($servicetype,'name');
+        $this->assignconfig('servicename',$servicename);
 
         $thismonth = strtotime(date('Y-m-01'));
 
@@ -262,28 +264,36 @@ class Dashboard extends Backend
             'company_id'  => $this->auth->company_id,
             'status'      => 3,
         ];
-        if($this->auth->type == 2){
+        /*if($this->auth->type == 2){
             $map['staff_id'] = $this->auth->id;
-        }
+        }*/
 
 
         for($i=5;$i>=0;$i--){
             $starttime_i = strtotime("-".$i." month",$thismonth);
-            $endtime_i = strtotime("-".($i+1) ." month",$thismonth) - 1;
+            $endtime_i = strtotime("-".($i-1) ." month",$thismonth) - 1;
             //日历
             $ec_date[] = date('m',$starttime_i).'月';
             //dump(date('Y-m-d H:i:s',$starttime_i));
             //dump(date('Y-m-d H:i:s',$endtime_i));
         }
+        $this->assignconfig('ec_date',$ec_date);
 
 
         foreach($servicetype as $key => &$val){
-            $map['servicetype_id'] = $val['id'];
+            $val['type'] = 'bar';
+
+            if($key == 0){
+                $val['barGap'] = 0;
+            }
+
+            $val['emphasis'] = ['focus'=>'series'];
             $val['data'] = [];
-            $val['textColor'] = '#FFFFFF';
+
+            $map['servicetype_id'] = $val['id'];
             for($i=5;$i>=0;$i-=1){
                 $starttime_i = strtotime("-".$i." month",$thismonth);
-                $endtime_i = strtotime("-".($i+1) ." month",$thismonth) - 1;
+                $endtime_i = strtotime("-".($i-1) ." month",$thismonth) - 1;
                 //销售金额
                 $map['finish_time'] = ['between',[$starttime_i,$endtime_i]];
                 $val['data'][] = Db::name('order')->where($map)->sum('total_fee');
@@ -291,12 +301,8 @@ class Dashboard extends Backend
             unset($val['id']);
         }
 
-        $result = [
-            'ec_data'     => $ec_date,
-            'ec_totalfee' => $servicetype,
-        ];
-        $this->success(1,$result);
-
+        $this->assignconfig('servicetype',$servicetype);
+        return $this->view->fetch();
     }
 
     /**

application/admin/view/dashboard/datacenterthree2.html

@@ -0,0 +1,201 @@
+<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>
+
+                <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>

application/api/controller/company/Index.php

@@ -222,7 +222,7 @@ class Index extends Apic
 
             for($i=5;$i>=0;$i--){
                 $starttime_i = strtotime("-".$i." month",$thismonth);
-                $endtime_i = strtotime("-".($i+1) ." month",$thismonth) - 1;
+                $endtime_i = strtotime("-".($i-1) ." month",$thismonth) - 1;
                 //日历
                 $ec_date[] = date('m',$starttime_i).'月';
                 //dump(date('Y-m-d H:i:s',$starttime_i));
@@ -236,7 +236,7 @@ class Index extends Apic
                 $val['textColor'] = '#FFFFFF';
                 for($i=5;$i>=0;$i-=1){
                     $starttime_i = strtotime("-".$i." month",$thismonth);
-                    $endtime_i = strtotime("-".($i+1) ." month",$thismonth) - 1;
+                    $endtime_i = strtotime("-".($i-1) ." month",$thismonth) - 1;
                     //销售金额
                     $map['finish_time'] = ['between',[$starttime_i,$endtime_i]];
                     $val['data'][] = Db::name('order')->where($map)->sum('total_fee');

public/assets/js/backend/dashboard.js

@@ -326,6 +326,13 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
                     name: {}
                 }
             };
+
+            var series = Config.servicetype;
+            for(var i = 0 ; i<series.length  ;i++){
+                series[i].label = labelOption;
+            }
+            console.log(series);
+
             // 指定图表的配置项和数据
             var option = {
                 tooltip: {
@@ -335,7 +342,7 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
                     }
                 },
                 legend: {
-                    data: ['Forest', 'Steppe', 'Desert', 'Wetland']
+                    data: Config.servicename
                 },
                 toolbox: {
                     show: true,
@@ -354,7 +361,7 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
                     {
                         type: 'category',
                         axisTick: { show: false },
-                        data: ['2012', '2013', '2014', '2015', '2016']
+                        data: Config.ec_date
                     }
                 ],
                 yAxis: [
@@ -362,7 +369,8 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
                         type: 'value'
                     }
                 ],
-                series: [
+
+               /* series: [
                     {
                         name: 'Forest',
                         type: 'bar',
@@ -400,7 +408,203 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
                         },
                         data: [98, 77, 101, 99, 40]
                     }
-                ]
+                ],*/
+                series: series,
+            };
+
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+
+            $(window).resize(function () {
+                myChart.resize();
+            });
+
+            $(document).on("click", ".btn-refresh", function () {
+                setTimeout(function () {
+                    myChart.resize();
+                }, 0);
+            });
+
+        },
+        datacenterthree2: function () {
+            // 基于准备好的dom，初始化echarts实例
+            var myChart = Echarts.init(document.getElementById('echart'), 'walden');
+
+            var app = {};
+            const posList = [
+                'left',
+                'right',
+                'top',
+                'bottom',
+                'inside',
+                'insideTop',
+                'insideLeft',
+                'insideRight',
+                'insideBottom',
+                'insideTopLeft',
+                'insideTopRight',
+                'insideBottomLeft',
+                'insideBottomRight'
+            ];
+            app.configParameters = {
+                rotate: {
+                    min: -90,
+                    max: 90
+                },
+                align: {
+                    options: {
+                        left: 'left',
+                        center: 'center',
+                        right: 'right'
+                    }
+                },
+                verticalAlign: {
+                    options: {
+                        top: 'top',
+                        middle: 'middle',
+                        bottom: 'bottom'
+                    }
+                },
+                position: {
+                    options: posList.reduce(function (map, pos) {
+                        map[pos] = pos;
+                        return map;
+                    }, {})
+                },
+                distance: {
+                    min: 0,
+                    max: 100
+                }
+            };
+            app.config = {
+                rotate: 90,
+                align: 'left',
+                verticalAlign: 'middle',
+                position: 'inside',
+                distance: 18,
+                onChange: function () {
+                    const labelOption = {
+                        rotate: app.config.rotate,
+                        align: app.config.align,
+                        verticalAlign: app.config.verticalAlign,
+                        position: app.config.position,
+                        distance: app.config.distance
+                    };
+                    myChart.setOption({
+                        series: [
+                            {
+                                label: labelOption
+                            },
+                            {
+                                label: labelOption
+                            },
+                            {
+                                label: labelOption
+                            },
+                            {
+                                label: labelOption
+                            }
+                        ]
+                    });
+                }
+            };
+            const labelOption = {
+                show: true,
+                position: app.config.position,
+                distance: app.config.distance,
+                align: app.config.align,
+                verticalAlign: app.config.verticalAlign,
+                rotate: app.config.rotate,
+                formatter: '{c}  {name|{a}}',
+                fontSize: 16,
+                rich: {
+                    name: {}
+                }
+            };
+
+            var series = Config.servicetype;
+            for(var i = 0 ; i<series.length  ;i++){
+                series[i].label = labelOption;
+            }
+            console.log(series);
+
+            // 指定图表的配置项和数据
+            var option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                legend: {
+                    data: Config.servicename
+                },
+                toolbox: {
+                    show: true,
+                    orient: 'vertical',
+                    left: 'right',
+                    top: 'center',
+                    feature: {
+                        mark: { show: true },
+                        dataView: { show: true, readOnly: false },
+                        magicType: { show: true, type: ['line', 'bar', 'stack'] },
+                        restore: { show: true },
+                        saveAsImage: { show: true }
+                    }
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        axisTick: { show: false },
+                        data: Config.ec_date
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value'
+                    }
+                ],
+
+               /* series: [
+                    {
+                        name: 'Forest',
+                        type: 'bar',
+                        barGap: 0,
+                        label: labelOption,
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: [320, 332, 301, 334, 390]
+                    },
+                    {
+                        name: 'Steppe',
+                        type: 'bar',
+                        label: labelOption,
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: [220, 182, 191, 234, 290]
+                    },
+                    {
+                        name: 'Desert',
+                        type: 'bar',
+                        label: labelOption,
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: [150, 232, 201, 154, 190]
+                    },
+                    {
+                        name: 'Wetland',
+                        type: 'bar',
+                        label: labelOption,
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: [98, 77, 101, 99, 40]
+                    }
+                ],*/
+                series: series,
             };
 
             // 使用刚指定的配置项和数据显示图表。