@layout("/common/_container.html"){
<style type="text/css">

    ztree li span. {
        margin-left: 4px;
        margin-right: -1px;
        background-position: -144px 0;
        vertical-align: top;
        *vertical-align: middle
    }

    .titleDiv {
        overflow: hidden;
    }

    .titleItem {
        float: left;
        text-align: center;
        width: 180px;
        line-height: 40px;
        border-top: 1px solid #E7EBEE;
        border-bottom: 1px solid #E7EBEE;
        border-left: 1px solid #E7EBEE;
        font-size: 16px;
    }

    .titleItem1 {
        float: left;
        text-align: center;
        width: 180px;
        line-height: 40px;
        border-bottom: 1px solid #E7EBEE;
        border-left: 1px solid #E7EBEE;
        font-size: 16px;
    }

    .titleItemCk {
        color: #fff !important;
        background: #1AB395 !important;
    }

    .titleItem:last-child {
        border-right: 1px solid #E7EBEE;
    }

    /* 订单分析 */
    ul {
        list-style-type: none;
    }

    .orderFenxiBox {
        width: 100%;
        display: flex;
        align-items: center;
        background-color: white;
    }

    .orderFenxiItem {
        flex: 1;
        padding: 20px 0;
    }

    .orderFenxiItem:last-child .orderFenxiItem_number {
        border-right: 0 none;
    }

    .orderFenxiItem_number {
        width: 80%;
        height: 80%;
        line-height: 90px;
        padding: 20px 0;
        font-size: 32px;
        color: #1AB394;
        text-align: center;
        border-right: 1px solid #eaeaea;
    }

    .orderFenxiItem_title, .orderFenxiItem_last {
        line-height: 40px;
        font-size: 14px;
    }
</style>
<div style="height: 50px;line-height:50px;width: 100%;background-color: #eeeeee;font-size: 25px;font-weight: bold;padding-left: 8px">
    汇总数据
</div>
<div class="row">
    <div class="col-sm-3">
        <#NameCon id="time" name="选择时间"/>
    </div>
    <div class="col-sm-3">
        <#button name="搜索" icon="fa-search" clickFun="HomePage.search()"/>
        <#button name="重置" icon="fa-search" clickFun="HomePage.reset()"/>
    </div>
</div>


<div class="row col-space15">
    <div class="col-md-3">
        <div class="panel">
            <div style="padding: 30px; font-size: 20px">注册用户数：<br><span id="userNum"></span></div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="panel">
            <div style="padding: 30px; font-size: 20px">群聊个数：<br><span id="groupNum"></span></div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="panel">
            <div style="padding: 30px; font-size: 20px">充值金额：<br><span id="topUp"></span></div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="panel">
            <div style="padding: 30px; font-size: 20px">提现金额：<br><span id="withdraw"> </span> <br>
            </div>
        </div>
    </div>
</div>
<div class="row col-space15">
    <div class="col-md-3">
        <div class="panel">
            <div style="padding: 30px; font-size: 20px">平台结余：<br><span id="balance"> </span> <br>
            </div>
        </div>
    </div>
</div>


<div style="height: 50px;line-height:50px;width: 100%;background-color: #eeeeee;font-size: 25px;font-weight: bold;padding-left: 8px">
    近30天走势
</div>
<div class="search_box" style="margin-left: 2%;">
    <div class="titleDiv">
        <div id="titleDiv1" class="titleItem titleItemCk" onclick="regisUser(this)" style="font-size: 20px">登录/注册</div>
        <div id="titleDiv2" class="titleItem" onclick="chongzhi(this)"  style="font-size: 20px">充值/提现金额</div>
        <div id="titleDiv3" class="titleItem" onclick="groupNum(this)"  style="font-size: 20px">群聊个数</div>
    </div>
    <div id="main" style="min-width: 400px; height: 400px"></div>
</div>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
    $(function () {
        regisUser();
    });

    function chongzhi() {
        document.getElementById("titleDiv1").setAttribute("class", "titleItem");
        document.getElementById("titleDiv2").setAttribute("class", "titleItem titleItemCk");
        document.getElementById("titleDiv3").setAttribute("class", "titleItem");
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        $.post(Feng.ctxPath + "/homePage/chongzhi", {type: 2}, function (data) {
            let topUp = data.topUp
            let withdraw = data.withdraw
            // option = {
            //     title: {
            //         text: '充值/提现'
            //     },
            //     tooltip: {
            //         trigger: 'axis'
            //     },
            //     legend: {
            //         data: ['充值', '提现']
            //     },
            //     grid: {
            //         left: '3%',
            //         right: '4%',
            //         bottom: '3%',
            //         containLabel: true
            //     },
            //     toolbox: {
            //         feature: {
            //         }
            //     },
            //     xAxis: {
            //         type: 'category',
            //         boundaryGap: false,
            //         data: [topUp[29].time,topUp[28].time, topUp[27].time, topUp[26].time, topUp[25].time, topUp[24].time, topUp[23].time, topUp[22].time, topUp[21].time, topUp[20].time, topUp[19].time, topUp[18].time, topUp[17].time, topUp[16].time, topUp[15].time, topUp[14].time,topUp[13].time, topUp[12].time, topUp[11].time, topUp[10].time, topUp[9].time, topUp[8].time, topUp[7].time, topUp[6].time, topUp[5].time, topUp[4].time, topUp[3].time, topUp[2].time, topUp[1].time, topUp[0].time]
            //     },
            //     yAxis: {
            //         type: 'value'
            //     },
            //     series: [
            //         {
            //             name: '充值',
            //             type: 'line',
            //             stack: 'Total',
            //             data: [topUp[29].topUp,topUp[28].topUp, topUp[27].topUp, topUp[26].topUp, topUp[25].topUp, topUp[24].topUp, topUp[23].topUp, topUp[22].topUp, topUp[21].topUp, topUp[20].topUp, topUp[19].topUp, topUp[18].topUp, topUp[17].topUp, topUp[16].topUp, topUp[15].topUp, topUp[14].topUp,topUp[13].topUp, topUp[12].topUp, topUp[11].topUp, topUp[10].topUp, topUp[9].topUp, topUp[8].topUp, topUp[7].topUp, topUp[6].topUp, topUp[5].topUp, topUp[4].topUp, topUp[3].topUp, topUp[2].topUp, topUp[1].topUp, topUp[0].topUp]
            //         },
            //         {
            //             name: '提现',
            //             type: 'line',
            //             stack: 'Total',
            //             data: [withdraw[29].withdraw,withdraw[28].withdraw, withdraw[27].withdraw, withdraw[26].withdraw, withdraw[25].withdraw, withdraw[24].withdraw, withdraw[23].withdraw, withdraw[22].withdraw, withdraw[21].withdraw, withdraw[20].withdraw, withdraw[19].withdraw, withdraw[18].withdraw, withdraw[17].withdraw, withdraw[16].withdraw, withdraw[15].withdraw, withdraw[14].withdraw,withdraw[13].withdraw, withdraw[12].withdraw, withdraw[11].withdraw, withdraw[10].withdraw, withdraw[9].withdraw, withdraw[8].withdraw, withdraw[7].withdraw, withdraw[6].withdraw, withdraw[5].withdraw, withdraw[4].withdraw, withdraw[3].withdraw, withdraw[2].withdraw, withdraw[1].withdraw, withdraw[0].withdraw]
            //         }
            //
            //     ]
            // };
            option = {
                title: {
                    text: '充值/提现'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: false,
                    feature: {
                        restore: {},
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [topUp[29].time,topUp[28].time, topUp[27].time, topUp[26].time, topUp[25].time, topUp[24].time, topUp[23].time, topUp[22].time, topUp[21].time, topUp[20].time, topUp[19].time, topUp[18].time, topUp[17].time, topUp[16].time, topUp[15].time, topUp[14].time,topUp[13].time, topUp[12].time, topUp[11].time, topUp[10].time, topUp[9].time, topUp[8].time, topUp[7].time, topUp[6].time, topUp[5].time, topUp[4].time, topUp[3].time, topUp[2].time, topUp[1].time, topUp[0].time]
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    }
                },
                series: [
                    {
                        name: '充值',
                        type: 'line',
                        data: [topUp[29].topUp,topUp[28].topUp, topUp[27].topUp, topUp[26].topUp, topUp[25].topUp, topUp[24].topUp, topUp[23].topUp, topUp[22].topUp, topUp[21].topUp, topUp[20].topUp, topUp[19].topUp, topUp[18].topUp, topUp[17].topUp, topUp[16].topUp, topUp[15].topUp, topUp[14].topUp,topUp[13].topUp, topUp[12].topUp, topUp[11].topUp, topUp[10].topUp, topUp[9].topUp, topUp[8].topUp, topUp[7].topUp, topUp[6].topUp, topUp[5].topUp, topUp[4].topUp, topUp[3].topUp, topUp[2].topUp, topUp[1].topUp, topUp[0].topUp]
                    },
                    {
                        name: '提现',
                        type: 'line',
                        data: [withdraw[29].withdraw,withdraw[28].withdraw, withdraw[27].withdraw, withdraw[26].withdraw, withdraw[25].withdraw, withdraw[24].withdraw, withdraw[23].withdraw, withdraw[22].withdraw, withdraw[21].withdraw, withdraw[20].withdraw, withdraw[19].withdraw, withdraw[18].withdraw, withdraw[17].withdraw, withdraw[16].withdraw, withdraw[15].withdraw, withdraw[14].withdraw,withdraw[13].withdraw, withdraw[12].withdraw, withdraw[11].withdraw, withdraw[10].withdraw, withdraw[9].withdraw, withdraw[8].withdraw, withdraw[7].withdraw, withdraw[6].withdraw, withdraw[5].withdraw, withdraw[4].withdraw, withdraw[3].withdraw, withdraw[2].withdraw, withdraw[1].withdraw, withdraw[0].withdraw]
                    }
                ]
            };
            option && myChart.setOption(option);
        });
    }


    function regisUser() {
        document.getElementById("titleDiv1").setAttribute("class", "titleItem titleItemCk");
        document.getElementById("titleDiv2").setAttribute("class", "titleItem");
        document.getElementById("titleDiv3").setAttribute("class", "titleItem");
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        $.post(Feng.ctxPath + "/homePage/regisUser", {type: 1}, function (data) {
            let login = data.login
            let register = data.register
            // option = {
            //     title: {
            //         text: '登录/注册'
            //     },
            //     tooltip: {
            //         trigger: 'axis'
            //     },
            //     legend: {
            //         data: ['登录', '注册']
            //     },
            //     grid: {
            //         left: '3%',
            //         right: '4%',
            //         bottom: '3%',
            //         containLabel: true
            //     },
            //     toolbox: {
            //         feature: {
            //         }
            //     },
            //     xAxis: {
            //         type: 'category',
            //         boundaryGap: false,
            //         data: [login[29].time,login[28].time, login[27].time, login[26].time, login[25].time, login[24].time, login[23].time, login[22].time, login[21].time, login[20].time, login[19].time, login[18].time, login[17].time, login[16].time, login[15].time, login[14].time,login[13].time, login[12].time, login[11].time, login[10].time, login[9].time, login[8].time, login[7].time, login[6].time, login[5].time, login[4].time, login[3].time, login[2].time, login[1].time, login[0].time]
            //     },
            //     yAxis: {
            //         type: 'value'
            //     },
            //     series: [
            //         {
            //             name: '登录',
            //             type: 'line',
            //             stack: 'Total',
            //             data: [login[29].loginNum,login[28].loginNum, login[27].loginNum, login[26].loginNum, login[25].loginNum, login[24].loginNum, login[23].loginNum, login[22].loginNum, login[21].loginNum, login[20].loginNum, login[19].loginNum, login[18].loginNum, login[17].loginNum, login[16].loginNum, login[15].loginNum, login[14].loginNum,login[13].loginNum, login[12].loginNum, login[11].loginNum, login[10].loginNum, login[9].loginNum, login[8].loginNum, login[7].loginNum, login[6].loginNum, login[5].loginNum, login[4].loginNum, login[3].loginNum, login[2].loginNum, login[1].loginNum, login[0].loginNum]
            //         },
            //         {
            //             name: '注册',
            //             type: 'line',
            //             stack: 'Total',
            //             data: [register[29].registerNum,register[28].registerNum, register[27].registerNum, register[26].registerNum, register[25].registerNum, register[24].registerNum, register[23].registerNum, register[22].registerNum, register[21].registerNum, register[20].registerNum, register[19].registerNum, register[18].registerNum, register[17].registerNum, register[16].registerNum, register[15].registerNum, register[14].registerNum,register[13].registerNum, register[12].registerNum, register[11].registerNum, register[10].registerNum, register[9].registerNum, register[8].registerNum, register[7].registerNum, register[6].registerNum, register[5].registerNum, register[4].registerNum, register[3].registerNum, register[2].registerNum, register[1].registerNum, register[0].registerNum]
            //         }
            //
            //     ]
            // };
            option = {
                title: {
                    text: '登录/注册'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: false,
                    feature: {
                        restore: {},
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [login[29].time,login[28].time, login[27].time, login[26].time, login[25].time, login[24].time, login[23].time, login[22].time, login[21].time, login[20].time, login[19].time, login[18].time, login[17].time, login[16].time, login[15].time, login[14].time,login[13].time, login[12].time, login[11].time, login[10].time, login[9].time, login[8].time, login[7].time, login[6].time, login[5].time, login[4].time, login[3].time, login[2].time, login[1].time, login[0].time]
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    }
                },
                series: [
                    {
                        name: '登录',
                        type: 'line',
                        data: [login[29].loginNum,login[28].loginNum, login[27].loginNum, login[26].loginNum, login[25].loginNum, login[24].loginNum, login[23].loginNum, login[22].loginNum, login[21].loginNum, login[20].loginNum, login[19].loginNum, login[18].loginNum, login[17].loginNum, login[16].loginNum, login[15].loginNum, login[14].loginNum,login[13].loginNum, login[12].loginNum, login[11].loginNum, login[10].loginNum, login[9].loginNum, login[8].loginNum, login[7].loginNum, login[6].loginNum, login[5].loginNum, login[4].loginNum, login[3].loginNum, login[2].loginNum, login[1].loginNum, login[0].loginNum]
                    },
                    {
                        name: '注册',
                        type: 'line',
                        data: [register[29].registerNum,register[28].registerNum, register[27].registerNum, register[26].registerNum, register[25].registerNum, register[24].registerNum, register[23].registerNum, register[22].registerNum, register[21].registerNum, register[20].registerNum, register[19].registerNum, register[18].registerNum, register[17].registerNum, register[16].registerNum, register[15].registerNum, register[14].registerNum,register[13].registerNum, register[12].registerNum, register[11].registerNum, register[10].registerNum, register[9].registerNum, register[8].registerNum, register[7].registerNum, register[6].registerNum, register[5].registerNum, register[4].registerNum, register[3].registerNum, register[2].registerNum, register[1].registerNum, register[0].registerNum]
                    }
                ]
            };
            option && myChart.setOption(option);

        });

    }
    function groupNum() {
        document.getElementById("titleDiv1").setAttribute("class", "titleItem");
        document.getElementById("titleDiv2").setAttribute("class", "titleItem");
        document.getElementById("titleDiv3").setAttribute("class", "titleItem titleItemCk");
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        $.post(Feng.ctxPath + "/homePage/groupNum", {type: 3}, function (data) {
            console.log(data)
            // option = {
            //     title: {
            //         text: '群聊个数'
            //     },
            //     tooltip: {
            //         trigger: 'axis'
            //     },
            //     legend: {
            //         data: ['群聊个数', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            //     },
            //     grid: {
            //         left: '3%',
            //         right: '4%',
            //         bottom: '3%',
            //         containLabel: true
            //     },
            //     toolbox: {
            //         feature: {
            //             saveAsImage: {}
            //         }
            //     },
            //     xAxis: {
            //         type: 'category',
            //         boundaryGap: false,
            //         data: [data[29].time,data[28].time, data[27].time, data[26].time, data[25].time, data[24].time, data[23].time, data[22].time, data[21].time, data[20].time, data[19].time, data[18].time, data[17].time, data[16].time, data[15].time, data[14].time,data[13].time, data[12].time, data[11].time, data[10].time, data[9].time, data[8].time, data[7].time, data[6].time, data[5].time, data[4].time, data[3].time, data[2].time, data[1].time, data[0].time]
            //     },
            //     yAxis: {
            //         type: 'value'
            //     },
            //     series: [
            //
            //         {
            //             name: '群聊个数',
            //             type: 'line',
            //             stack: 'Total',
            //             data: [data[29].groupNum,data[28].groupNum, data[27].groupNum, data[26].groupNum, data[25].groupNum, data[24].groupNum, data[23].groupNum, data[22].groupNum, data[21].groupNum, data[20].groupNum, data[19].groupNum, data[18].groupNum, data[17].groupNum, data[16].groupNum, data[15].groupNum, data[14].groupNum,data[13].groupNum, data[12].groupNum, data[11].groupNum, data[10].groupNum, data[9].groupNum, data[8].groupNum, data[7].groupNum, data[6].groupNum, data[5].groupNum, data[4].groupNum, data[3].groupNum, data[2].groupNum, data[1].groupNum, data[0].groupNum]
            //         }
            //     ]
            // };
            option = {
                title: {
                    text: '群聊个数'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: false,
                    feature: {
                        restore: {},
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [data[29].time,data[28].time, data[27].time, data[26].time, data[25].time, data[24].time, data[23].time, data[22].time, data[21].time, data[20].time, data[19].time, data[18].time, data[17].time, data[16].time, data[15].time, data[14].time,data[13].time, data[12].time, data[11].time, data[10].time, data[9].time, data[8].time, data[7].time, data[6].time, data[5].time, data[4].time, data[3].time, data[2].time, data[1].time, data[0].time]
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    }
                },
                series: [
                    {
                        name: '群聊个数',
                        type: 'line',
                        data: [data[29].groupNum,data[28].groupNum, data[27].groupNum, data[26].groupNum, data[25].groupNum, data[24].groupNum, data[23].groupNum, data[22].groupNum, data[21].groupNum, data[20].groupNum, data[19].groupNum, data[18].groupNum, data[17].groupNum, data[16].groupNum, data[15].groupNum, data[14].groupNum,data[13].groupNum, data[12].groupNum, data[11].groupNum, data[10].groupNum, data[9].groupNum, data[8].groupNum, data[7].groupNum, data[6].groupNum, data[5].groupNum, data[4].groupNum, data[3].groupNum, data[2].groupNum, data[1].groupNum, data[0].groupNum]
                    },
                    {
                        name: '',
                        data: []}
                ]
            };
            option && myChart.setOption(option);

        });
    }

</script>
<script src="${ctxPath}/static/modular/system/homePage/homePage.js"></script>
<script>
    laydate.render({
        elem: '#time'
        , trigger: 'click'
        , range: true
    });
</script>
@}