chengwenliang
/
erp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
							{Template header}
<script src="{$theme}js/base64.min.js"></script>
<body>
<div class="warp">
<div class="title default " style="margin-bottom:20px;">天数
    <select name="days" class="select days" value>
        <option value="0">今天</option>
        <option value="1">昨天</option>
        <option value="7" selected>近7天</option>
        <option value="15" >近15天</option>
        <option value="30">近30天</option>
        <option value="60">近60天</option>
    </select>
        店铺名称：<select name="shop" class="select">
        <option value="">请选择</option>
        {loop usershop() as $val}

        <option value="{$val['id']}" {if $val['id']==$shop['id']}selected{/if}>{$val['shopname']}</option>
        {/loop}
    </select>
    <span>确 定</span></div>
<div class='card-list'>
    <div class="card-item">
        <div>销量</div>
        <div>1123</div>
        <div>较上一周</div>
    </div>
    <div class="card-item">
        <div>销量</div>
        <div>1123</div>
        <div>较上一周</div>
    </div>
    <div class="card-item">
        <div>销量</div>
        <div>1123</div>
        <div>较上一周</div>
    </div>
    <div class="card-item">
        <div>销量</div>
        <div>1123</div>
        <div>较上一周</div>
    </div>

</div>
<div id="users" style="width:50%;height:40%;float:left;"></div>
<div class="contiant">
    <div class="paihangtitle">
        <div><span class="selected_days">近7天</span>产品销量排行</div>
    </div>
    <div style="width: 100%;height: 350px; overflow-y: scroll;">
        <table class="sku" style="border-collapse:collapse; width: 100%; font-size: 13px; ">
            <tr style="background-color: rgb(241,243,249); height: 40px; color:rgb(168,168,185) ;">
                <th width="5%"></th>
                <th width="30%">商品sku</th>
                <th width="12.5%"></th>
                <th width="12.5%">销售额</th>
                <th width="12.5%"></th>
                <th width="18%">销售量</th>
            </tr>
            <tbody class="tbody">
                
            </tbody>
        </table>
    </div>

</div>
<div class="contiant" >
    <div class="paihangtitle">
        <div><span class="selected_days">近七天</span>地区销量排行</div>
    </div>
    <div style="width: 100%;height: 350px; overflow-y: scroll;">
        <table class="sell" style="border-collapse:collapse; width: 100%; font-size: 13px; ">
            <tr style="background-color: rgb(241,243,249); height: 40px; color:rgb(168,168,185) ;">
                <th width="5%"></th>
                <th width="20%">地区</th>
                <th width="12.5%"></th>
                <th width="12.5%">订单量</th>
                <th width="12.5%"></th>
                <th width="18%">占比</th>
            </tr>
            <tbody class="tbody">
                
            </tbody>
        </table>
    </div>
</div>
<style>
   th{
        font-weight: 100; 
    }
    tbody tr{
        height: 50px;
    }
    .paiming{
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-weight: 600;
        color: #FFFFFF;
        background-color: rgb(182,180,182);	
    }
    table tr:nth-child(even){
    background: rgb(249,249,251);
    
    }
    .paimingone {
        background-color: rgb(255,197,50);	
    }
    .paimingtwo{
        background-color: rgb(244,144,111);	
    }
    .paimingthree{
        background-color: rgb(37,208,234);	
    }
    .contiant{
        width: 600px;
        height: 400px;
        box-sizing: border-box;
        padding: 20px;
        
        background-color: #fff;
        border-radius: 5px;
        box-shadow:2px 2px 5px #999999;
        display: flex;
        flex-direction: column;
    }
    .paihangtitle{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .paihangtitle div{
        color: rgb(5,55,72);
        font-weight: 600;
    }
    .paihangtitle a{
        text-decoration: none;
        color:rgb(168,168,185);
        font-weight: 100;
    }
    .card-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        margin: auto;
    }
    .card-item {
        margin: 20px;
        box-sizing: border-box;
        padding: 20px;
        width: 150px;
        border-radius: 5px;
        box-shadow: 2px 2px 5px #999999;
        text-align: center;
    }
</style>

</div>
<script src="{$theme}js/echarts.min.js?v=201911220005"></script>

<script type="text/javascript">
$(".default span").click(function() {
	 defaultgo();
});
 $(document).ready(function() {
	 defaultgo();
 })
 function defaultgo() {
    days=$("[name='days']").val();
    shop=$("[name='shop']").val();
    selday_str=$(".select.days option:selected").text();
    $('.selected_days').text(selday_str);
    $('.sell .tbody').html("");
    $('.sku .tbody').html("");

    $.ajax({
        url: "/ga/trafficsource/",
        data: {"days":days,"shop":shop},
        type: "POST",
        dataType: "json",
        success: function(a) {
            if (a && a.success) {
                //sell
                var tablelist = a.data.sell
                var product = a.data.product
                tablelist.map((item,index)=>{
                    var h='"/ga/regionproduct/'+shop+'/'+days+'/'+Base64.encode(item.region)+'"'
                    if(index==0){
                        var Tdom ='<tr ><th><div class="paiming paimingone">'+parseInt(index+1)+'</div></th><th width="20%"><h9 class="window" data-h='+h+' data-t="订单详情">'+item.region+'</h9></th><th width="12.5%"></th><th width="12.5%"><div>'+item.transactions+'</div></th><th width="12.5%"></th><th width="18%"><div><div>'+item.percent+'</div><div style="width: 90%;margin-top: 5px; height: 4px; background-color: rgb(238,238,238); border-radius: 5px;"><div style="width: '+item.percent+'; height: 100%; background-color: rgb(40,208,234);border-top-left-radius: 10px;border-bottom-left-radius: 10px;"></div></div></div></th></tr>'
                        $('.sell .tbody').append(Tdom)
                        
                    }else if(index==1){
                        var Tdom ='<tr ><th><div class="paiming paimingtwo">'+parseInt(index+1)+'</div></th><th width="20%"><h9 class="window" data-h='+h+' data-t="订单详情">'+item.region+'</h9></th><th width="12.5%"></th><th width="12.5%"><div>'+item.transactions+'</div></th><th width="12.5%"></th><th width="18%"><div><div>'+item.percent+'</div><div style="width: 90%;margin-top: 5px; height: 4px; background-color: rgb(238,238,238); border-radius: 5px;"><div style="width: '+item.percent+'; height: 100%; background-color: rgb(40,208,234);border-top-left-radius: 10px;border-bottom-left-radius: 10px;"></div></div></div></th></tr>'
                        $('.sell .tbody').append(Tdom)
                        
                    }else if(index==2){
                        var Tdom ='<tr ><th><div class="paiming paimingthree">'+parseInt(index+1)+'</div></th><th width="20%"><h9 class="window" data-h='+h+' data-t="订单详情">'+item.region+'</h9></th><th width="12.5%"></th><th width="12.5%"><div>'+item.transactions+'</div></th><th width="12.5%"></th><th width="18%"><div><div>'+item.percent+'</div><div style="width: 90%;margin-top: 5px; height: 4px; background-color: rgb(238,238,238); border-radius: 5px;"><div style="width: '+item.percent+'; height: 100%; background-color: rgb(40,208,234);border-top-left-radius: 10px;border-bottom-left-radius: 10px;"></div></div></div></th></tr>'
                        $('.sell .tbody').append(Tdom)
                        
                    }else{
                        var Tdom ='<tr ><th><div class="paiming">'+parseInt(index+1)+'</div></th><th width="20%"><h9 class="window" data-h='+h+' data-t="订单详情">'+item.region+'</h9></th><th width="12.5%"></th><th width="12.5%"><div>'+item.transactions+'</div></th><th width="12.5%"></th><th width="18%"><div><div>'+item.percent+'</div><div style="width: 90%;margin-top: 5px; height: 4px; background-color: rgb(238,238,238); border-radius: 5px;"><div style="width:'+item.percent+'; height: 100%; background-color: rgb(40,208,234);border-top-left-radius: 10px;border-bottom-left-radius: 10px;"></div></div></div></th></tr>'
                        $('.sell .tbody').append(Tdom)
                        
                    }	
                })
                product.map((item,index)=>{
                    var h='"/ga/productinfo/'+shop+'/'+days+'/'+Base64.encode(item.productName)+'"'
                    if(index==0){
                        var Tdom ='<tr ><th><div class="paiming paimingone">'+parseInt(index+1)+'</div></th><th width="20%"><div><h9 class="window" data-h='+h+' data-t="订单详情">'+item.productName+'</h9></div></th><th width="12.5%"></th><th width="12.5%"><div>'+item.itemRevenue+'</div></th><th width="12.5%"></th><th width="18%"><div><div>'+item.itemQuantity+'</div></div></div></th></tr>'
                        $('.sku .tbody').append(Tdom)
                        
                    }else if(index==1){
                        var Tdom ='<tr ><th><div class="paiming paimingtwo">'+parseInt(index+1)+'</div></th><th width="20%"><div><h9 class="window" data-h='+h+' data-t="订单详情">'+item.productName+'</h9></div></th><th width="12.5%"></th><th width="12.5%"><div>'+item.itemRevenue+'</div></th><th width="12.5%"></th><th width="18%"><div><div>'+item.itemQuantity+'</div></div></div></th></tr>'
                        $('.sku .tbody').append(Tdom)
                        
                    }else if(index==2){
                        var Tdom ='<tr ><th><div class="paiming paimingthree">'+parseInt(index+1)+'</div></th><th width="20%"><div><h9 class="window" data-h='+h+' data-t="订单详情">'+item.productName+'</h9></div></th><th width="12.5%"></th><th width="12.5%"><div>'+item.itemRevenue+'</div></th><th width="12.5%"></th><th width="18%"><div><div>'+item.itemQuantity+'</div></div></div></th></tr>'
                        $('.sku .tbody').append(Tdom)
                        
                    }else{
                        var Tdom ='<tr ><th><div class="paiming">'+parseInt(index+1)+'</div></th><th width="20%"><div><h9 class="window" data-h='+h+' data-t="订单详情">'+item.productName+'</h9></div></th><th width="12.5%"></th><th width="12.5%"><div>'+item.itemRevenue+'</div></th><th width="12.5%"></th><th width="18%"><div><div>'+item.itemQuantity+'</div></div></div></th></tr>'
                        $('.sku .tbody').append(Tdom)
                        
                    }	
                })

    // 基于准备好的dom，初始化echarts实例
        var data=a.data
        var myChart = echarts.init(document.getElementById('users'));

        // 指定图表的配置项和数据
        var option = {
            legend: {
                data: ['新用户', '老用户']
            },
            tooltip: {
                trigger: 'axis',
                formatter:function(params){
                    total=parseInt(params[0].value)+parseInt(params[1].value);

                    percent1=((params[0].value/total)*100).toFixed(2)+"%";
                    percent2=((params[1].value/total)*100).toFixed(2)+"%";
                    str=  '<span>'+params[0].seriesName+':'+params[0].value+' 占比:'+percent1+'</span><br/>';
                    str+=  '<span>'+params[1].seriesName+':'+params[1].value+' 占比:'+percent2+'</span><br/>';
                    return str;
                    
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.users.date
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:"新用户",
                    data: data.users.new,
                    type: 'line',
                    areaStyle: {}
                },
                {
                    name:"老用户",
                    data: data.users.return,
                    type: 'line',
                    areaStyle: {}
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['预计可得金额','实际可得金额']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: a.time
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} 元 '
        }
    },
    series: [
        {
            name:'预计可得金额',
            type:'line',
            data: a.ymoney,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'实际可得金额',
            type:'line',
            data: a.money,
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
} 
        }
    });
 };
       </script>
<script type="text/javascript" src="{$theme}js/laydate.js"></script>
{Template footer}