<!DOCTYPE html>
<html style="height: 100%">
<head>
  <title>运营数据</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
  <style type="text/css">
    table{
    border-collapse: collapse;
    border: 1px solid #e3e3e3;
    }

    </style>
  <script src="/js/vue/jquery.min.js"></script>
  <script src="/js/bootstrap/js/popper.min.js"></script>
  <script src="/js/bootstrap/js/bootstrap.min.js"></script>
	<script src="/js/vue/axios.min.js"></script>
	<script src="/js/echarts/echarts.min.js"></script>
	<script src="/js/echarts/china.js"></script>

</head>
<body style="height:100%;margin:0">
	<div style="height:60%;width:90%;margin:10% 5%;text-align:center">
    <h4>注册用户</h4>
		<div id="container2" style="height: 100%"></div>
	</div>
  <div style="width:90%;margin:15% 5%;text-align:center">
    <h4 >运营统计</h4>
    <div style="height: 100%">
      <table style="font-size: 0.6rem;margin:5%;height:60%;width:90%;text-align:center" id="statistic" cellspacing="0" border="1">
       <tr>
        <th align="left">统计类型</th>
        <th align="right">分子项(值)</th>
        <th align="right">分母项(值)</th>
        <th align="right">统计结果</th>
       </tr>
      </table>
    </div>
	</div>
  <div style="margin:5% 5%;text-align:center">
    <h4 >店铺访问排行榜</h4>
    <table style="font-size: 0.6rem;margin:5%;height:100%;width:90%;text-align:center" id="visitTop10" cellspacing="0" border="1">
     <tr>
      <th align="left">排名</th>
      <th align="right">头像</th>
      <th align="right">店铺号</th>
      <th align="right">店铺名称</th>
      <th align="right">访问人数</th>
     </tr>
    </table>

  </div>
  <div style="margin:5% 5%;text-align:center">
    <h4 >合伙人分裂排行榜</h4>
    <table style="font-size: 0.6rem;margin:5%;height:100%;width:90%;text-align:center" id="flTop10" cellspacing="0" border="1">
     <tr>
      <th align="left">排名</th>
      <th align="right">头像</th>
      <th align="right">昵称</th>
      <th align="right">分裂数量</th>
     </tr>
    </table>

  </div>
</body>
<script type="text/javascript">
	 $(function(){
		 axios.get("applet/wxApplet/getUserStatisticGroupByApp").then(function(d){
			 if(d && d.status==200){
					 var data = d.data;
					 var legend=[];
					 var series=[];
					 for(var i=0;i<data.length;i++){
						 legend.push(data[i].name);
						 series.push(data[i].value);
					 }
					 var bardom = document.getElementById("container2");
					 var barChart = echarts.init(bardom);
					 var barapp = {};
					 var baroption = null;
					 baroption = {
				 		xAxis: {
				 				type: 'category',
				 				data: legend,
                axisLabel: {
                   interval:0,
                   rotate:30
                }
				 		},
				 		yAxis: {
				 				type: 'value'
				 		},
				 		series: [{
								type : 'bar',
								barWidth : '50%',
								itemStyle : {
									normal : {
										color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);},
										label: {
														show: true,
														position: 'top',
														textStyle: {
															color: 'black'
												}
										 }
									},
								},
				 				data: series
				 		}]
				 	};
				 	if (baroption && typeof baroption === "object") {
				 		barChart.setOption(baroption, true);
				 	}
			 }

 		});
    axios.get("applet/wxApplet/getStatisticData").then(function(d){
      if(d && d.status==200){
        var data = d.data;
        for(var i=0;i<data.length;i++){
           var tmp="<tr>";
           var fz="";
           var fm="";
           if(data[i].totalType=="zxbxl"){
             fz="已付款订单数量";
             fm="电话咨询数量"
           }else if(data[i].totalType=="kdl"){
             fz="店铺数量";
             fm="合伙人数量"
           }else{
             fz="推荐用户数";
             fm="合伙人数量"
           }
           tmp+="<td>"+data[i].totalTypeName+"</td>";
           tmp+="<td>"+fz+"("+data[i].addUpMolecule+")</td>";
           tmp+="<td>"+fm+"("+data[i].addUpDenominator+")</td>";
           tmp+="<td>"+data[i].addUpValue+"</td>";
           tmp+="</tr>";
           $("#statistic").append(tmp);
        }
      }
    });
    axios.get("applet/shopApplet/getRankList?tj_code=yddpfk&top_num=10").then(function(d){
      console.log(d);
      if(d && d.status==200 && d.data && d.data.code==1){
        for(var i=0;i<d.data.data.length;i++){
           var tmp="<tr>";
           var data = d.data.data[i];
           var pm = i+1;
           tmp+="<td>"+pm+"</td>";
           tmp+="<td><img width=\"40px\" height=\"40px\" src='"+data.rank.head_url+"' /></td>";
           tmp+="<td>"+data.rank.shop_num+"</td>";
           tmp+="<td>"+data.rank.name+"</td>";
           tmp+="<td>"+data.rank.pv_count+"</td>";
           tmp+="</tr>";
           $("#visitTop10").append(tmp);
        }
      }

    })
    axios.get("applet/shopApplet/getReferrerRankList?top_num=10&t="+new Date().getTime()).then(function(d){
      console.log(d);
      if(d && d.status==200 && d.data && d.data.code==1){
        for(var i=0;i<d.data.data.length;i++){
           var tmp="<tr>";
           var data = d.data.data[i];
           var pm = i+1;
           tmp+="<td>"+pm+"</td>";
           tmp+="<td><img width=\"40px\" height=\"40px\" src='"+data.rank.head_url+"' /></td>";
           tmp+="<td>"+data.rank.nick_name+"</td>";
           tmp+="<td>"+data.rank.pv_count+"</td>";
           tmp+="</tr>";
           $("#flTop10").append(tmp);
        }
      }

    })

	 })
</script>
</html>
