chengwenliang
/
erp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
							{Template header}
<script src="{$theme}js/base64.min.js"></script>
<body>
<div class="warp">
<div class="title default " style="margin-bottom:20px;">{$productName}</div>
<div class='card-list'>
   
</div>
<div class="box">
    <div class="contiant">
        <div class="paihangtitle">
            <div><span class="selected_days">近{$days}天</span>sku销量</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="10%"></th>
					<th width="10%">收入</th>
					<th width="10%"></th>
                    <th width="10%">订单数</th>
                    <th width="10%"></th>
                    <th width="10%">购买数量</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><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">近{$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
	sell='{$sell}'
	sell=JSON.parse(sell)
	var sku='{$sku}';
	var sku=JSON.parse(sku)
	console.log(sku);
$(".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)
    }

     option = {
        xAxis: {
            data: date
        },
        series: [{
            name:"销量",
            data: data,
            type: 'line',
            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% 的位置。
            }
        ];
    }
     sellChart.setOption(option);
    //  sellChart.pagere
 })
 function getSellChart(sell){
	 console.log(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)
    }
    option = {
        xAxis: {
            type: 'category',
            data: sell.date.day
        },
        yAxis: {
            type: 'value'
        },
        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,
        }],
        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 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("")

    // $.ajax({
    //     url: "/ga/productioninfo/",
    //     data: {"days":days,"shop":shop},
    //     type: "POST",
    //     dataType: "json",
    //     success: function(a) {
    //         if (a && a.success) {
                //sell
              
                sku.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.productSku+'</div></th><th width="10%"></th><th width="10%"><div>'+item.itemRevenue+'</div></th><th width="10%"></th><th width="10%"><div><div>'+item.uniquePurchases+'</div></div></div></th><th width="10%"></th><th width="10%"><div><div>'+item.itemQuantity+'</div></div></th></tr>'
                        $('.sku .tbody').append(Tdom)     
                })
               

            // 基于准备好的dom，初始化echarts实例
           		getSellChart(sell);
            } 
//         }
//     });
//  };
       </script>
<script type="text/javascript" src="{$theme}js/laydate.js"></script>
{Template footer}