{include file="common/head"/}
<link rel="stylesheet" href="https://www.layui.com/admin/std/dist/layuiadmin/style/admin.css" media="all">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1iGjZaNqCgMp0vtQ8xB2ilbAcX9zTugj&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>  
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            用户量
            <span class="layui-badge layui-bg-blue layuiadmin-badge">至今</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font" id="user_total"></p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            订单量
            <span class="layui-badge layui-bg-cyan layuiadmin-badge">至今</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font" id="res_total"></p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            短信收入
            <span class="layui-badge layui-bg-green layuiadmin-badge">至今</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font" id="sms_price_total"></p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            商家使用过设备
            <span class="layui-badge layui-bg-orange layuiadmin-badge">至今</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font" id="seller_dv_total"></p>
          </div>
        </div>
      </div>
      </div>
    </div>

<div class="layui-col-sm12">
    <div class="layui-card">
      <div class="layui-card-header">商家全国分布（合作与推广的商家,且在商家管理中进行地理位置转换的）</div>
      <div class="layui-card-body">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-sm8">
            <table class="layui-table layuiadmin-page-table" lay-skin="line">
              <thead>
                <tr>
                  <th>排名</th>
                  <th>地区</th>
                  <th>人数</th>
                </tr> 
              </thead>
              <tbody id="seller_total">
                
              </tbody>
            </table>
          </div>
          <div class="layui-col-sm4">

            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-pagethree" lay-anim="fade" style="width: 100%; height: 280px;" id="seller_main">
            </div>

          </div>
        </div>
      </div>
    </div>
</div> 
<br>
<div class="layui-col-sm12">
    <div class="layui-card">
    <div class="layui-card-header">数据概览</div>
    <div class="layui-col-sm8">
        <div class="layui-carousel layadmin-carousel layadmin-dataview" id="container"></div>
    </div>
    <div class="layui-col-sm4">
        <div class="layui-carousel layadmin-carousel layadmin-dataview" id="container1"></div>
    </div>
    </div>
</div>
<div class="layui-col-sm12">
        <div class="layui-card-body layui-text">
            <table class="layui-table">
              <colgroup>
                <col width="100">
                <col>
              </colgroup>
              <tbody>
                <tr>
                    <td width="100">服务器操作系统</td>
                    <td>{$config.server_os}</td>
                </tr>
                <tr>
                  <td>PHP版本</td>
                  <td>
                        {$config.php_version}
                  </td>
                </tr>
                <tr>
                  <td>基于框架</td>
                  <td>
                        ThinkPHP5.1 + LayUi
                 </td>
                </tr>
                <tr>
                  <td>MySQL版本</td>
                  <td>{$config.mysql_version}</td>
                </tr>
                <tr>
                  <td width="100">最大上传限制</td>
                  <td style="padding-bottom: 0;">
                    {$config.max_upload_size}
                  </td>
                </tr>
                <tr>
                  <td width="120" >首页数据缓存说明</td>
                  <td style="padding-bottom: 0;color:red;">
                        首页数据缓存时间均为 1小时。
                  </td>
                </tr>
              </tbody>
            </table>
        </div>
</div>
{include file="common/foot"/}
<script type="text/javascript">
function randomData() {  
     return Math.round(Math.random()*500);  
}

layui.use(['table', 'layer'], function(){

    var table = layui.table;
    var layer = layui.layer;
    var $ = layui.jquery;
    var endworkdate = null;

    //页面一加载就发送ajax
    $(function(){
        loading = layer.load(1, {shade: [0.1, '#fff']});
        $.ajax({
            url: "/admin/Index/main",
            type: "POST",
            datType: "json",
            success: function(data){
                layer.close(loading);
                //赋值：
                $('#user_total').html(data.data.user_total+' 位');
                $('#res_total').html(data.data.res_total+' 单');
                $('#sms_price_total').html(data.data.sms_price_total+' 元');
                $('#seller_dv_total').html(data.data.seller_dv_total+' 家');

                var myChart2 = echarts.init(document.getElementById('seller_main'));
                var myChart = echarts.init(document.getElementById("container"),'light');
                var myChart1 = echarts.init(document.getElementById("container1"),'light');
                var app = {};

                var html='';
                var index = 1;
                //表格替换
                $.each(data.data.seller_total.slice(0, 7),function(index,item){
                    html+='<tr><td>'+(index+1)+'</td><td>'+item.name+'</td><td>'+item.value+'</td></tr>';
                })
                $('#seller_total').html(html);
                //商家分布数据
                var mydata = data.data.seller_total;

                var optionMap = {
                    backgroundColor: '#FFFFFF',  
                    title: {  
                        text: '一键订商家全国分布图',  
                        subtext: '',  
                        x:'center'  
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },  
                    tooltip : {  
                        trigger: 'item'  
                    },  
                    
                    //左侧小导航图标
                    visualMap: {  
                        show : true,  
                        x: 'left',  
                        y: 'center',  
                        splitList: [   
                            {start: 800, end:10000},{start: 400, end: 800},  
                            {start: 300, end: 400},{start: 200, end: 300},  
                            {start: 100, end: 200},{start: 0, end: 100},  
                        ],  
                        color: ['#f70202', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#bef8f8']  
                    },  
                    
                    //配置属性
                    series: [{  
                        name: '数据',  
                        type: 'map',  
                        mapType: 'china',   
                        roam: true,  
                        label: {  
                            normal: {  
                                show: true  //省份名称  
                            },  
                            emphasis: {  
                                show: false  
                            }  
                        },  
                        data:mydata  //数据
                    }]  
                };
                option = null;
                option = {
                    title: {
                        text: '一键订近一周预订来源',
                        subtext: '数据来源仅合作店铺',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['在线订单', '内部订单','取消订单','拒绝订单'],
                        left: 'left',
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: data.data.time
                        }
                    ],
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 单'
                        },
                        axisPointer: {
                            snap: true
                        }
                    },
                    series: [
                        {
                            name: '在线订单',
                            type: 'line',
                            smooth: true,
                            areaStyle: {}, 
                            
                            data: data.data.online
                        },
                        {
                            name: '内部订单',
                            type: 'line',
                            smooth: true,
                            areaStyle: {}, 
                            
                            data: data.data.unline
                        },
                        {
                            name: '取消订单',
                            type: 'line',
                            smooth: true,
                            areaStyle: {}, 
                            
                            data: data.data.cancel
                        },
                        {
                            name: '拒绝订单',
                            type: 'line',
                            smooth: true,
                            areaStyle: {}, 
                            
                            data: data.data.refuse
                        }
                    ]
                };
                option1 = null;
                option1 = {
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    title: {
                        text: '一键订近一周预订来源',
                        subtext: '数据来源仅合作店铺',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['在线订单', '内部订单','取消订单','拒绝订单']
                    },
                    series: [
                        {
                            name: '数据概览',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '55%'],
                            data: [
                                    {
                                        value:data.data.online_sum,
                                        name:'在线订单'
                                    },
                                    {
                                        value:data.data.unline_sum,
                                        name:'内部订单'
                                    },
                                    {
                                        value:data.data.cancel_sum,
                                        name:'取消订单'
                                    },
                                    {
                                        value:data.data.refuse_sum,
                                        name:'拒绝订单'
                                    }
                            ],
                            clockwise: true,
                            label: {
                                normal: {
                                    textStyle: {
                                        fontSize: 18,
                                        color: '#333333'
                                    }
                                }
                            }
                        }
                    ]
                };
                if (optionMap && typeof optionMap === "object") {
                    myChart2.setOption(optionMap, true);
                }
                if (option1 && typeof option1 === "object") {
                    myChart1.setOption(option1, true);
                }
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        });

    })
});
</script>
</body>
</html>