首页管理

xuhy

2023-04-07 c9bcbceb7112358c780688ffbd0ebb3ef528e65e

 management/guns-admin/src/main/webapp/WEB-INF/view/system/tHomePage/tHomePageStatistics.html

@@ -14,19 +14,482 @@
                                <span class="control-label" style="font-size: 30px">今天</span>
                            </div>
                        </div>
                        <div class="initialLevel col-sm-12 control-label form-group" style="cursor: pointer;text-align: left;">
                            <div class="initialLevel col-sm-3 control-label form-group"  >
                        <div class="initialLevel col-sm-12 control-label form-group" >
                            <div class="initialLevel col-sm-8 control-label form-group" style="cursor: pointer;text-align: left;" >
                                <label>${txt}</label>
                            </div>
                            <div class="initialLevel col-sm-4  form-group" style="cursor: pointer;text-align: right;" >
                                <label class="col-sm-2">代理商</label>
                                <select class="col-sm-2 " id="agentName" style="width: 200px;height: 33px" name="agentName">
                                    <option value="">请选择</option>
                                    @for(i in agentList){
                                    <option value="${i.id}">${i.principal}</option>
                                    @}
                                </select>
                            </div>
                        </div>

                        <div class="initialLevel col-sm-12 control-label form-group" >
                            <div class="initialLevel col-sm-3 control-label form-group"  style="border: 1px solid;border-color: #c2ccd1;height: 130px">
                                <br/>
                                <div class="ibox float-e-margins">
                                    <div class="col-sm-3" ><br/>
                                        <label style="font-size: 16px">代理商</label><br/>
                                        <img src="https://newok.oss-cn-shenzhen.aliyuncs.com/img/0e257d6fe5af4275919d039b40e30e19.png">
                                    </div>
                                    <div class="initialLevel col-sm-9 control-label form-group" >
                                        <div>
                                            <div class="col-sm-8" style="font-size: 16px">总数</div>
                                            <div class="col-sm-1" id="agentTotal">${agentTotal}</div>
                                        </div><br/>
                                        <div id="pro1" style="height: 20px"></div><br/>
                                        <div>
                                            <div class="col-sm-8" style="font-size: 16px">近一月新增</div>
                                            <div class="col-sm-1" id="agentMonthTotal">${agentMonthTotal}</div>
                                        </div><br/>
                                        <div id="pro2" style="height: 20px"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-1"></div>
                            <div class="initialLevel col-sm-3 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;height: 130px">
                                <br/>
                                <div class="ibox float-e-margins">
                                    <div class="col-sm-3" ><br/>
                                        <label style="font-size: 16px">司机</label><br/>
                                        <img src="https://newok.oss-cn-shenzhen.aliyuncs.com/img/0e257d6fe5af4275919d039b40e30e19.png" >
                                    </div>
                                    <div class="initialLevel col-sm-9 control-label form-group" >
                                        <div>
                                            <div class="col-sm-8" style="font-size: 16px">总数</div>
                                            <div class="col-sm-1" id="driverTotal">${driverTotal}</div>
                                        </div><br/>
                                        <div id="pro3" style="height: 20px"></div><br/>
                                        <div>
                                            <div class="col-sm-8" style="font-size: 16px">近一月新增</div>
                                            <div class="col-sm-1" id="driverMonthTotal">${driverMonthTotal}</div>
                                        </div><br/>
                                        <div id="pro4" style="height: 20px"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-1"></div>
                            <div class="initialLevel col-sm-4 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;height: 600px"><br/>
                                <div>
                                    <div class="initialLevel col-sm-4 control-label form-group" >
                                        <label style="font-size: 20px">业绩排名</label>
                                    </div>
                                    <div class="col-sm-2"></div>
                                    <div class="initialLevel col-sm-6 control-label form-group" >
                                        <div style="font-size: 0px;width: 100%">
                                            <button  id="btn1" onclick="queryOrderCount()">单量</button>
                                            <button  id="btn2" onclick="queryIncome()">收入</button>
                                            <button  id="btn3" onclick="queryCommission()">佣金</button>
                                        </div>
                                        <div>
                                            <select class="col-lg-8" style="height: 25px">
                                                <option value="">请选择</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div id="performanceResp">
                                </div>
                            </div>
                        </div>

                        <div class="initialLevel col-sm-12 control-label form-group" ><br/><br/>
                            <div class="initialLevel col-sm-3 control-label form-group"  style="border: 1px solid;border-color: #c2ccd1;margin-top: -400px;height: 300px">
                                <br/>
                                <div class="col-sm-5" >
                                    <label style="font-size: 16px">订单统计(本月)</label>
                                </div>
                                <div class="col-sm-3"></div>
                                <div class="initialLevel col-sm-4 control-label form-group" style="text-align: right" >
                                </div>
                                <div id="chart2" style="height: 90%;width: 100%"></div>
                            </div>
                            <div class="col-sm-1"></div>
                            <div class="initialLevel col-sm-3 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;margin-top: -400px;margin-left: 25%;height: 300px">
                                <br/>
                                <div>
                                    <div class="col-sm-5" >
                                        <label style="font-size: 16px">订单统计(年份)</label>
                                    </div>
                                    <div class="col-sm-3"></div>
                                    <div class="initialLevel col-sm-4 control-label form-group" style="text-align: right">
                                        <select class="col-lg-12" id="year" style="height: 25px;border-radius: 5px">
                                            <option value="">请选择</option>
                                        </select>
                                    </div>
                                </div><br/>
                                <div id="chart1" style="height: 90%;width: 100%"></div>
                            </div>

                            <div class="initialLevel col-sm-4 control-label form-group" >
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/modular/system/tCoupon/tCoupon_info.js"></script>
<script src="${ctxPath}/static/modular/system/tCoupon/tCoupon.js"></script>
<script src="${ctxPath}/static/modular/system/tCoupon/tAgent_info.js"></script>
<script src="${ctxPath}/static/modular/system/tCoupon/tAgent.js"></script>

<link rel="stylesheet" href="${ctxPath}/static/css/plugins/lineProgressbar/jquery.lineProgressbar.css">
<script src="${ctxPath}/static/js/plugins/lineProgressbar/jquery.lineProgressbar.js"></script>

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<style>
    img{
        height: 30px;
        width: 30px;
    }
    #chart1 {
        position: relative;
        height: 100vh;
        overflow: hidden;
    }
    button{
        width: 70px;
        height: 25px;
        margin-bottom: 5px;
    }
    #btn1{
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        font-size: 1px;
    }
    #btn2{
        font-size: 1px;
    }
    #btn3{
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        font-size: 1px;
    }
    table{
        table-layout:fixed;
        word-break:break-all;
    }
    th{
        text-align: center;
    }
    td{
        width:100px;
        height:40px
    }
    .pro {
        width: 200px;
        margin: 100px auto;

    }
    .result {
        width: 200px;
        margin: 100px auto;

    }
    .result{
        text-align: center;
        text-shadow: 0 0 5px #333333;
        color:#FFFFFF;
    }
</style>
<script type="text/javascript">

    $(function (){
        loading()
        orderByMonth()
        orderByYear()
        queryOrderCount()

    })

    // 进度条加载
    function loading(){
        var options = $.extend({
            percentage : $('#agentTotal').text(),
            ShowProgressCount: false,
            duration: 10,

            // Styling Options
            fillBackgroundColor: '#3498db',
            backgroundColor: '#EEEEEE',
            radius: '10px',
            height: '20px',
            width: '80%'
        });
        $('#pro1').LineProgressbar(options);
        var options = $.extend({
            percentage : $('#agentMonthTotal').text(),
            ShowProgressCount: false,
            duration: 10,

            // Styling Options
            fillBackgroundColor: '#3498db',
            backgroundColor: '#EEEEEE',
            radius: '10px',
            height: '20px',
            width: '80%'
        });
        $('#pro2').LineProgressbar(options);
        var options = $.extend({
            percentage : $('#driverTotal').text(),
            ShowProgressCount: false,
            duration: 10,

            // Styling Options
            fillBackgroundColor: '#3498db',
            backgroundColor: '#EEEEEE',
            radius: '10px',
            height: '20px',
            width: '80%'
        });
        $('#pro3').LineProgressbar(options);
        var options = $.extend({
            percentage : $('#driverMonthTotal').text(),
            ShowProgressCount: false,
            duration: 10,

            // Styling Options
            fillBackgroundColor: '#3498db',
            backgroundColor: '#EEEEEE',
            radius: '10px',
            height: '20px',
            width: '80%'
        });
        $('#pro4').LineProgressbar(options);
    }

    // 单量
    function queryOrderCount(){
        $('#btn1').css("backgroundColor","dodgerblue")
        $('#btn1').css("borderColor","dodgerblue")
        $('#btn1').css("color","#FFFFFF")
        $('#btn2').css("backgroundColor","#FFFFFF")
        $('#btn2').css("borderColor","dodgerblue")
        $('#btn2').css("color","black")
        $('#btn3').css("backgroundColor","#FFFFFF")
        $('#btn3').css("borderColor","dodgerblue")
        $('#btn3').css("color","black")
        $('#btn1').val(1)
        $('#btn2').val('')
        $('#btn3').val('')
        getOrder($('#btn1').val())
    }
    // 收入
    function queryIncome(){
        $('#btn1').css("backgroundColor","#FFFFFF")
        $('#btn1').css("borderColor","dodgerblue")
        $('#btn1').css("color","black")
        $('#btn2').css("backgroundColor","dodgerblue")
        $('#btn2').css("borderColor","dodgerblue")
        $('#btn2').css("color","#FFFFFF")
        $('#btn3').css("backgroundColor","#FFFFFF")
        $('#btn3').css("borderColor","dodgerblue")
        $('#btn3').css("color","black")
        $('#btn1').val('')
        $('#btn2').val(2)
        $('#btn3').val('')
        getOrder($('#btn2').val())
    }
    // 佣金
    function queryCommission(){
        $('#btn1').css("backgroundColor","#FFFFFF")
        $('#btn1').css("borderColor","dodgerblue")
        $('#btn1').css("color","black")
        $('#btn2').css("backgroundColor","#FFFFFF")
        $('#btn2').css("borderColor","dodgerblue")
        $('#btn2').css("color","black")
        $('#btn3').css("backgroundColor","dodgerblue")
        $('#btn3').css("borderColor","dodgerblue")
        $('#btn3').css("color","#FFFFFF")
        $('#btn1').val('')
        $('#btn2').val('')
        $('#btn3').val(3)
        getOrder($('#btn3').val())
    }

    // 通过年查询订单数量（查询每月）
    function orderByYear(){
        var dom = document.getElementById('chart1');
        var ajax = new $ax(Feng.ctxPath+"/tHomePage/statisticsYearByAgentId",function(data){
                data = data.yearResp
                var myChart = echarts.init(dom, null, {
                    renderer: 'canvas',
                    useDirtyRect: false
                });
                var option;
                option = {
                    tooltip: {
                        trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                        axisPointer: {// 坐标轴指示器，坐标轴触发有效
                            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: '日期: {b} <br/>订单数量 : {c}'
                    },
                    xAxis: {
                        type: 'category',
                        data: [data[0].month+'月',data[1].month+'月', data[2].month+'月', data[3].month+'月',data[4].month+'月',data[5].month+'月',data[6].month+'月',data[7].month+'月',data[8].month+'月',data[9].month+'月',data[10].month+'月',data[11].month+'月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [data[0].orderCount,data[1].orderCount, data[2].orderCount, data[3].orderCount,data[4].orderCount,data[5].orderCount,data[6].orderCount,data[7].orderCount,data[8].orderCount,data[9].orderCount,data[10].orderCount,data[11].orderCount],
                            type: 'line',
                            color: '#00b7ee'
                        }
                    ]
                };
                option && myChart.setOption(option);
            }, function (data) {
            });
        ajax.set("agentId",$("#agentName").val());
        ajax.set("yearDate",$("#year").val());
        ajax.start();
    }

    // 通过本月查询订单数量（查询本月每天）
    function orderByMonth(){
        var dom = document.getElementById('chart2');
        var ajax = new $ax(Feng.ctxPath+"/tHomePage/statisticsMonthByAgentId",function(data){
            data = data.monthResp
            var mon = new Date().getMonth()+1;
            if(mon < 10){
                mon = '0'+mon;
            }
            var yResp = [];
            var xResp = [];
            for (var i =0;i<data.length;i++){
                yResp.push({
                    value:data[i].orderCount,
                })
                xResp.push({
                    value:mon+'-'+data[i].month,
                })
            }
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var option;
            option = {
                tooltip: {
                    trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                    axisPointer: {// 坐标轴指示器，坐标轴触发有效
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: '日期: {b} <br/>订单数量 : {c}'
                },

                xAxis: {
                    type: 'category',
                    data: xResp
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: yResp,
                        type: 'line',
                        color: '#00b7ee'
                    }
                ]
            };
            option && myChart.setOption(option);
        }, function (data) {
        });
        ajax.set("agentId",$("#agentName").val());
        ajax.start();
    }

    function getOrder(type){
        $.ajax({
            url: Feng.ctxPath + '/tHomePage/statisticsOrderByAgentId',
            type: 'POST',
            data: {
                agentId: $("#agentName").val(),
                monthDate: $("#monthDate").val(),
                type: type
            },
            success: function (res) {
                var str = '<table border="1" style="border: #c2ccd1;border-radius: 1px;height: 90%;width: 100%;text-align:center;">\n' +
                    '                                        <tr>\n' +
                    '                                            <th>排名</th>\n' +
                    '                                            <th>时间</th>\n' +
                    '                                            <th>姓名</th>\n';
                if(type == 1){
                    str +=  '                                            <th>单量</th>\n' +
                        '                                        </tr>';
                }
                if(type == 2){
                    str +=  '                                            <th>收入</th>\n' +
                        '                                        </tr>';
                }
                if(type == 3){
                    str +=  '                                            <th>佣金</th>\n' +
                        '                                        </tr>';
                }
                if(!$.isEmptyObject(res)){
                    var order = res.performanceResp
                    if(order.length > 0){
                        for(var i in order){
                            var a=parseInt(i)+1
                            str +=
                                '<tr><td>' + a + '</td><td>' + order[i].monthTime + '</td><td>' + order[i].userName + '</td><td>' + order[i].amount + '</td></tr>';
                        }
                    }
                }
                str += '</table>';
                $('#performanceResp').html('');
                $('#performanceResp').html(str);
            }
        });
    }

    // 动态查询代理商司机数量
    function getInfo(){
        var ajax = new $ax(Feng.ctxPath+"/tHomePage/statisticsDriverByAgentId",function(data){
            $("#agentTotal").text(data.agentTotal)
            $("#agentMonthTotal").text(data.agentMonthTotal)
            $("#driverTotal").text(data.driverTotal)
            $("#driverMonthTotal").text(data.driverMonthTotal)
            loading()
        }, function (data) {
        });
        ajax.set("agentId",$("#agentName").val());
        ajax.start();
    }

    // 代理商选择事件
    $('#agentName').change(function(){
        // 查询代理商 查询司机
        getInfo()
        // 查询月度报表
        orderByMonth()
        // 通过年查询订单报表
        orderByYear()
        // 查询排行榜
        if($('#btn1').val() != null && $('#btn1').val() != ''){
            console.log(111)
            getOrder($('#btn1').val())
        }
        if($('#btn2').val() != null && $('#btn2').val() != ''){
            console.log(222)
            getOrder($('#btn2').val())
        }
        if($('#btn3').val() != null && $('#btn3').val() != ''){
            console.log(333)
            getOrder($('#btn3').val())
        }
    })

</script>
@}