chengwenliang
/
erp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584
							{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>
<div class="box">
    <div id="users" class="contiant" style="height:400px;"></div>
    <div class="contiant">
        <div class="paihangtitle">
            <div>热门网页</div>
        </div>
        <div style="width: 100%;height: 350px; overflow-y: scroll;">
            <table class="page" 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%">网页</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">近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>
    <div class="contiant" > 
        <div class="paihangtitle">
            <div>流量渠道</div>
        </div>
        <div id="channel" style="height: 400px;"> 
        </div>
    </div>
    <div class="contiant" >
        <div class="paihangtitle">
            <div><span class="selected_days">近七天</span>Google Ads 广告系列效果</div>
        </div>
        <div style="width: 100%;height: 350px; overflow-y: scroll;">
            <table class="ads" 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>
                    <th width="12.5%"></th>
                    <th width="12.5%">收入</th>
                </tr>
                <tbody class="tbody">
                    
                </tbody>
            </table>
        </div>
    </div>
    <div class="contiant" style="width:60%;"> 
        <div class="paihangtitle">
            <div><span class="selected_days">近七天</span>店铺销量数据</div>
        </div>
        <ul>
            <li class="time_btn hour" data-type="hour">分时</li>
            <li class="time_btn day active" data-type="day">日</li>
            <li class="time_btn week" data-type="week">周</li>
            <li class="time_btn month" data-type="month">月</li>
        </ul>
        <div id="sell" style="height: 800px;"> 
            
        </div>
    </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);	
    }
    .box{
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        margin: 25px;
    }
    table tr:nth-child(even){
    background: rgb(249,249,251);
    
    }
    .paimingone,.paiming1 {
        background-color: rgb(255,197,50);	
    }
    .paimingtwo,.paiming2{
        background-color: rgb(244,144,111);	
    }
    .paimingthree,.paiming3{
        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;
        margin: 20px;
    }
    .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;
        background-color: #fff;
    }
    .time_btn{
        display: block;
        float: left;
        background-color: #f3f3f3;
        padding: 8px 7px;
        font: bold 11px 'Roboto',sans-serif;
        color: #444;
        border: 1px solid #ccc;
        background-image: -webkit-linear-gradient(top,#fefefe,#f3f3f3);
        background-image: -moz-linear-gradient(top,#fefefe,#f3f3f3);
        cursor: pointer;
        min-width: 18px;
        text-align: center;
    }
    .time_btn.active{
        background-color: #dfdfdf;
        background-image: -webkit-linear-gradient(top,#f0f0f0,#dfdfdf);
        background-image: -moz-linear-gradient(top,#f0f0f0,#dfdfdf);
        border-color: #ccc;
        box-shadow: inset 0px 1px 5px rgba(0,0,0,.3);
        color: #222;
    }
</style>

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

<script type="text/javascript">
    var sellChart = echarts.init(document.getElementById('sell'));
    var sell
    var cur_date
    var cur_data
    var last_sell
    var last_data
$(".default span").click(function() {
	 defaultgo();
});
 $(document).ready(function() {
	 defaultgo();
 })
 $('.time_btn').click(function(){
     $(this).addClass("active").siblings().removeClass("active");
     $type=$(this).data('type')
     var data=[];
     cur_date=$type;
     cur_data=sell.data[$type];
     date=sell.date[$type];
     for(var key in cur_data){
        data.push(cur_data[key].itemQuantity)
    }
    last_data=last_sell[$type]

     option = {
        xAxis: {
            data: date
        },
        series: [{
            name:"销量",
            data: data,
            type: 'line',
            // smooth:true,
        },
        {
            name:"上期对比",
            data: last_data,
            type: 'line',
            itemStyle:{
                normal:{
                    lineStyle:{
                        width:2,
                        type:'dotted'  //'dotted'虚线 'solid'实线
                    }
                }
            },   
            // smooth:true,
        }
        ],
        dataZoom:[
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 
                show:false,
                start: 0,      // 左边在 10% 的位置。
                end: 100         // 右边在 60% 的位置。
            },
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'inside', // 
                show:false,
                start: 0,      // 左边在 10% 的位置。
                end: 100         // 右边在 60% 的位置。
            }
        ],
    };
    if($type=="hour"){
        option.dataZoom=[
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 
                show:true,
                start: 60,      // 左边在 10% 的位置。
                end: 100         // 右边在 60% 的位置。
            },
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'inside', // 
                show:true,
                start: 60,      // 左边在 10% 的位置。
                end: 100         // 右边在 60% 的位置。
            }
        ];
        option.series=[
            {
                name:"销量",
                data: data,
                type: 'line',
                // smooth:true,
            },
            {
                name:"上期对比",
                data: [],
            }
        ];
    }
     sellChart.setOption(option);
    //  sellChart.pagere
 })
 function getSellChart(sell){
    cur_date="day";
    cur_data=sell.data.day
    var data = [];
    // day_data.forEach(function(data,item){
    //     console.log(data);
    //     console.log(item);
    // },[]);
    for(var key in cur_data){
        data.push(cur_data[key].itemQuantity)
    }
    last_data=last_sell[cur_date];
    option = {
        xAxis: {
            type: 'category',
            data: sell.date.day
        },
        yAxis: {
            type: 'value'
        },
        legend: {
                data: ['销量', '上期对比']
        },
        tooltip: {
                    trigger: 'axis',
                    formatter:function(params){
                        name=params[0].name;
                        // console.log(cur_data[name]);
                        str="";
                        str+="<span>销量: "+cur_data[name].itemQuantity+"</span><br/>";
                        str+="<span>交易次数: "+cur_data[name].transactions+"</span><br/>";
                        str+="<span>总金额: $"+cur_data[name].transactionRevenue+"</span>";
                        return str;
                    }
                },
        series: [
            {
            name:"销量",
            data: data,
            type: 'line',
            // smooth:true,
        },
        {
            name:"上期对比",
            data: last_data,
            type: 'line',
            itemStyle:{
                normal:{
                    lineStyle:{
                        width:2,
                        type:'dotted'  //'dotted'虚线 'solid'实线
                    }
                }
            },   
            // smooth:true,
        }
        ],
        dataZoom:[
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 
                show:false,
                start: 0,      // 左边在 10% 的位置。
                end: 100         // 右边在 60% 的位置。
            },
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'inside', // 
                show:false,
                start: 0,      // 左边在 10% 的位置。
                end: 100         // 右边在 60% 的位置。
            }
        ],
  
    };
    // 使用刚指定的配置项和数据显示图表。
    sellChart.setOption(option);
 }
 function getChannelChart(channel){
    var channelChart = echarts.init(document.getElementById('channel'));
    var y = [];
    var x=[];
    // day_data.forEach(function(data,item){
    //     console.log(data);
    //     console.log(item);
    // },[]);
    for(var key in channel){
        x.push(channel[key].channelGrouping)
        y.push({value:channel[key].users,name:channel[key].channelGrouping})
    }
    

    option = {
        title: {
            text: '流量渠道',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: x
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: y,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    channelChart.setOption(option);
 }
 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("");
    $(".card-list").html("");
    $(".ads .tbody").html("");
    $(".page .tbody").html("");

    $.ajax({
        url: "/ga/index/",
        data: {"days":days,"shop":shop},
        type: "POST",
        dataType: "json",
        success: function(a) {
            if (a && a.success) {
                //sell
                var geo = a.data.geo
                var product = a.data.product
                var ads= a.data.ads
                var store=a.data.store
                var page=a.data.page
                var channel=a.data.channel

                var store_html=""
                
                sell =a.data.sell
                last_sell=a.data.last_sell
                geo.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)+'"';
                        var Tdom ='<tr ><th><div class="paiming  paiming'+parseInt(index+1)+'">'+parseInt(index+1)+'</div></th><th width="20%"><div><a style="color: #0268c2;" href='+h+' target="_blank">'+item.productName+'</a></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)
                })
                ads.map((item,index)=>{
                    // var h='"/ga/productinfo/'+shop+'/'+days+'/'+Base64.encode(item.productName)+'"'
                        var Tdom ='<tr ><th><div class="paiming paiming'+parseInt(index+1)+'">'+parseInt(index+1)+'</div></th><th width="20%"><div>'+item.campaign+'</div></th><th width="12.5%"></th><th width="12.5%"><div>'+item.adClicks+'</div></th><th width="12.5%"></th><th width="18%"><div><div>'+item.adCost+'</div></div></div></th><th width="12.5%"></th><th width="18%"><div><div>'+item.transactionRevenue+'</div></div></th></tr>'
                        $('.ads .tbody').append(Tdom)     
                })
                page.map((item,index)=>{
                    var Tdom ='<tr ><th><div class="paiming paiming'+parseInt(index+1)+'">'+parseInt(index+1)+'</div></th><th width="20%"><div>'+item.pagePath+'</div></th><th width="12.5%"></th><th width="12.5%"><div>'+item.pageviews+'</div></th><th width="12.5%"></th><th width="18%"><div><div>'+item.pageValue+'</div></div></div></th></tr>'
                    $('.page .tbody').append(Tdom)
                })

            
                for(var index in store){
                    store_html+='<div class="card-item"><div>'+index+'</div><div>'+store[index]+'</div></div>'
                }
                $(".card-list").html(store_html)


            // 基于准备好的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);
            getSellChart(sell);
            getChannelChart(channel)
            } 
        }
    });
 };
       </script>
<script type="text/javascript" src="{$theme}js/laydate.js"></script>
{Template footer}