<!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;
        }

        table td {
            border-top: 0;
            border-right: 0;
            border-bottom: 0;
            border-left: 0;
        }

        table tr:last-child td {
            border-bottom: 0;
        }

        table tr td:last-child {
            border-right: 0;
        }
        th {
            height:50px;
            font-size:0.8rem;
        }

        table tr:nth-of-type(odd) {
            background: #fbfcff;
        }

        table tr:first-child {
            background: #ffffff;
        }

        table tr:nth-of-type(even) {
            background: #ffffff;
        }

        .nick_img {
            border-radius: 1.5rem;
        }

        table tr td {
            border-bottom: 1px solid #e2e2e2;
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
            text-align: center;
        }

    </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 border="0" cellspacing="0" cellpadding="0"
           style="font-size: 0.6rem;margin:5%;height:100%;width:90%;text-align:center" id="flTop10" cellspacing="0"
           border="1">
        <tr>
            <th align="right">头像</th>
            <th align="right">昵称</th>
            <th align="right">数量</th>
            <th align="left">排名</th>
        </tr>
    </table>

</div>
<div style="margin:5% 5%;text-align:center">
    <h4>店铺访问排行榜</h4>
    <table border="0" cellspacing="0" cellpadding="0" style="font-size: 0.6rem;margin:5%;height:100%;width:90%;text-align:center" id="visitTop10" cellspacing="0"
           border="1">
        <tr>
            <th align="right">头像</th>
            <th align="right">店铺号</th>
            <th align="right">店铺名称</th>
            <th align="right">访问人数</th>
            <th align="left">排名</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><img class=\"nick_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 += "<td>" + pm + "</td>";
                    tmp += "</tr>";
                    $("#visitTop10").append(tmp);
                }


                /*获取生成的奖杯图片*/
                var imgurl1 = "http://gsb-zc.oss-cn-beijing.aliyuncs.com/201811101049_cup1.png"
                var imgurl2 = "http://gsb-zc.oss-cn-beijing.aliyuncs.com/201811101049_cup2.png"
                var imgurl3 = "http://gsb-zc.oss-cn-beijing.aliyuncs.com/201811101049_cup3.png"
                var cup01 = "<img width=\"35px\" height=\"35px\" src='" + imgurl1 + "' />";
                var cup02 = "<img width=\"35px\" height=\"35px\" src='" + imgurl2 + "' />";
                var cup03 = "<img width=\"35px\" height=\"35px\" src='" + imgurl3 + "' />";


                /*第一名*/
                $("#visitTop10 tr").eq(1).addClass('visitTop-01');
                $(".visitTop-01 td").eq(4).html(cup01)
                /*第二名*/
                $("#visitTop10 tr").eq(2).addClass('visitTop-02');
                $(".visitTop-02 td").eq(4).html(cup02)
                /*第三名*/
                $("#visitTop10 tr").eq(3).addClass('visitTop-03');
                $(".visitTop-03 td").eq(4).html(cup03)


            }

        })
        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><img class=\"nick_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 += "<td>" + pm + "</td>";
                    tmp += "</tr>";
                    $("#flTop10").append(tmp);
                }
                /*获取生成的奖杯图片*/
                var imgurl1 = "http://gsb-zc.oss-cn-beijing.aliyuncs.com/201811101049_cup1.png"
                var imgurl2 = "http://gsb-zc.oss-cn-beijing.aliyuncs.com/201811101049_cup2.png"
                var imgurl3 = "http://gsb-zc.oss-cn-beijing.aliyuncs.com/201811101049_cup3.png"
                var cup01 = "<img width=\"35px\" height=\"35px\" src='" + imgurl1 + "' />";
                var cup02 = "<img width=\"35px\" height=\"35px\" src='" + imgurl2 + "' />";
                var cup03 = "<img width=\"35px\" height=\"35px\" src='" + imgurl3 + "' />";
                /*第一名*/
                $("#flTop10 tr").eq(1).addClass('flTop-01');
                $(".flTop-01 td").eq(3).html(cup01)
                /*第二名*/
                $("#flTop10 tr").eq(2).addClass('flTop-02');
                $(".flTop-02 td").eq(3).html(cup02)
                /*第三名*/
                $("#flTop10 tr").eq(3).addClass('flTop-03');
                $(".flTop-03 td").eq(3).html(cup03)

            }

        })

    })
</script>
</html>
