刘帅
2026-09-17 b2116edaa629f2d678b2070d4265e2702b65f127
cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/storeIncome.html
@@ -37,6 +37,21 @@
        align-items: center;
        justify-content: center;
    }
    .income-overview { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 16px; width: 100%; max-width: 1280px; margin: 18px 0 14px; text-align: left; }
    .income-card { min-height: 82px; padding: 16px 18px; border: 1px solid #e4e7ed; border-radius: 6px; background: #fff; color: #606266; font-size: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
    .income-card strong { display: block; margin-top: 8px; color: #303133; font-size: 22px; font-weight: 600; }
    .income-card.total-card { border-top: 3px solid #1ab394; }
    .income-card.net-card { border-top: 3px solid #409eff; }
    .income-card.coupon-card { border-top: 3px solid #e6a23c; }
    .income-card.refund-card { border-top: 3px solid #f56c6c; }
    .income-period-grid { display: grid; grid-template-columns: repeat(2, minmax(360px, 1fr)); gap: 10px 16px; width: 100%; max-width: 1280px; margin-bottom: 18px; text-align: left; }
    .income-period-item { min-height: 110px; padding: 9px 12px; border-left: 3px solid #1ab394; background: #f8fafc; color: #606266; line-height: 20px; }
    .income-period-title { margin-bottom: 6px; color: #303133; font-weight: 600; }
    .income-period-records { max-height: 185px; overflow-y: auto; }
    .income-period-record { padding: 4px 0; border-top: 1px solid #edf0f5; font-size: 13px; }
    .income-trend-grid { display: grid; grid-template-columns: repeat(2, minmax(480px, 1fr)); gap: 18px; width: 100%; max-width: 1280px; margin-bottom: 18px; }
    .income-trend-chart { height: 300px; padding: 8px; border: 1px solid #e4e7ed; border-radius: 6px; background: #fff; }
    \@media (max-width: 992px) { .income-overview { grid-template-columns: repeat(2, minmax(180px, 1fr)); } .income-period-grid, .income-trend-grid { grid-template-columns: 1fr; } }
</style>
<div class="ibox float-e-margins">
    <div class="ibox-content">
@@ -81,16 +96,26 @@
                                <div class="col-sm-10">
                                    <h2>营收数据</h2>
                                    </br>
                                    <div id = "money1" style="width: 1500px" >
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="totalIncome">总营收:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span id="yearIncome">本年度营收:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span id="monthIncome">本月度营收:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span id="weekIncome">本周营收:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span id="todayIncome">本日营收:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        </br>
                                        </br>
                                    <div id="money1">
                                        <div class="income-overview">
                                            <div class="income-card total-card">总营收金额<strong id="totalIncome">0</strong></div>
                                            <div class="income-card net-card">净收入金额<strong id="netIncomeAmount">0</strong></div>
                                            <div class="income-card coupon-card">优惠券抵扣金额<strong id="couponDeductionAmount">0</strong></div>
                                            <div class="income-card refund-card">退款金额<strong id="refundAmount">0</strong></div>
                                        </div>
                                        <div class="income-period-grid">
                                            <div id="yearIncomeStatistics" class="income-period-item"></div>
                                            <div id="monthIncomeStatistics" class="income-period-item"></div>
                                            <div id="weekIncomeStatistics" class="income-period-item"></div>
                                            <div id="dayIncomeStatistics" class="income-period-item"></div>
                                        </div>
                                    </div>
                                    <div id="income" style="width: 1280px;height:500px;"></div>
                                    <div class="income-trend-grid">
                                        <div id="incomeYearChart" class="income-trend-chart"></div>
                                        <div id="incomeMonthChart" class="income-trend-chart"></div>
                                        <div id="incomeWeekChart" class="income-trend-chart"></div>
                                        <div id="incomeDayChart" class="income-trend-chart"></div>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <h2>收入类型统计</h2>
@@ -119,20 +144,6 @@
                                    <div id="cookieBooking" style="width: 1500px;height:300px;"></div>
                                </div>
                                <div class="col-sm-10">
                                    <h2>退费数据</h2>
                                </div>
                                <div class="col-sm-10" style="width: 1500px" >
                                    </br>
                                    </br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="yearRefund">本年退费额度:<span id="back1"></span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span id="monthRefund">本月退费额度:<span id="back2"></span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span id="weekRefund">本周退费额度:<span id="back3"></span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span id="todayRefund">本日退费额度:<span id="back4"></span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    </br>
                                    </br>
                                    <div id="refund" style="width: 1280px;height:500px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
@@ -275,7 +286,6 @@
        ptCourse()
        if(cutType==1){
            srtj()
            tuifei()
            income()
        }
@@ -290,130 +300,55 @@
        }
    }
    function renderIncomeStatisticsList(elementId, title, labels, statistics) {
        var records = labels.map(function (label, index) {
            var item = statistics[index];
            return '<div class="income-period-record"><strong>' + label + '</strong>:总营收金额 '
                + item.totalIncomeAmount + ',净收入金额 ' + item.netIncomeAmount
                + ',优惠券抵扣金额 ' + item.couponDeductionAmount + ',退款金额 '
                + item.refundAmount + '</div>';
        }).join('');
        document.getElementById(elementId).innerHTML = '<div class="income-period-title">' + title
            + '</div><div class="income-period-records">' + records + '</div>';
    }
    function renderIncomeTrendChart(elementId, title, labels, statistics) {
        var chart = echarts.init(document.getElementById(elementId));
        chart.setOption({
            title: {text: title, left: 'center', textStyle: {fontSize: 15}},
            tooltip: {trigger: 'axis', formatter: function (params) {
                var detail = statistics[params[0].dataIndex];
                return labels[params[0].dataIndex] + '<br/>总营收:' + detail.totalIncomeAmount
                    + '<br/>净收入:' + detail.netIncomeAmount + '<br/>优惠券抵扣:'
                    + detail.couponDeductionAmount + '<br/>退款:' + detail.refundAmount;
            }},
            grid: {left: '5%', right: '4%', bottom: '18%', containLabel: true},
            xAxis: {type: 'category', boundaryGap: false, data: labels, axisLabel: {rotate: labels.length > 7 ? 35 : 0, interval: 0}},
            yAxis: {type: 'value', name: '金额(元)'},
            series: [{name: '总营收', type: 'line', smooth: true,
                data: statistics.map(function (item) { return item.totalIncomeAmount; }), areaStyle: {opacity: 0.12}}]
        }, true);
    }
    function income(){
        // var id = $("#cCode").val()
        // var beginTime = $("#beginTime").val()
        // console.log(id)
        // if(id==""){
        //     Feng.info("请先选择运营商");
        //     return;
        // }
        var ajax = new $ax(Feng.ctxPath + "/data/getIncomeData", function(resp){
            yearX=resp.year
            var list = resp.yearMount;
            console.log(list);
            var t1 = document.getElementById("totalIncome");
            var t2 = document.getElementById("yearIncome");
            var t3 = document.getElementById("monthIncome");
            var t4 = document.getElementById("weekIncome");
            var t5 = document.getElementById("todayIncome");
            t1.innerText = "总营收:"+list[0]+"         ";
            t2.innerText = "年度营收:"+list[1]+"         ";
            t3.innerText = "月度营收:"+list[2]+"         ";
            t4.innerText = "周度营收:"+list[3]+"         ";
            t5.innerText = "日度营收:"+list[4]+"         ";
            var year =  resp.yearIncome;
            var month =  resp.monthIncome;
            var week =  resp.weekIncome;
            console.log("周度营收")
            console.log(year)
            console.log(week)
            var days = week[0].length;
            var day =  resp.dayIncome;
            option  = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['年度营收', '月度营收','周度营收','日度营收'],
                    icon: 'stack',
                    selectedMode: 'single', // 单选
                    selected: {
                        年度营收: true,
                        月度营收: false,
                        周度营收: false,
                        日度营收: false
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: yearX
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '年度营收',
                        type: 'line',
                        stack: 'Total',
                        data: [year[0],year[1],year[2],year[3],year[4],year[5],year[6],year[7],year[8],year[9],year[10]]
                    },
                    {
                        name: '月度营收',
                        type: 'line',
                        stack: 'Total',
                        data: [month[0][0],month[0][1], month[0][2], month[0][3], month[0][4],
                            month[0][5], month[0][6], month[0][7], month[0][8], month[0][9], month[0][10], month[0][11]]
                    },
                    {
                        name: '周度营收',
                        type: 'line',
                        stack: 'Total',
                        data: [
                            week[0][0], week[0][1], week[0][2], week[0][3], week[0][4]
                        ]
                    },
                    {
                        name: '日度营收',
                        type: 'line',
                        stack: 'Total',
                        data: [
                            day[0][0], day[0][1],day[0][2], day[0][3], day[0][4], day[0][5], day[0][6]
                        ]
                    }
                ]
            };
            yearX = resp.year;
            $("#totalIncome").text(resp.incomeStatistics.totalIncomeAmount || 0);
            $("#netIncomeAmount").text(resp.incomeStatistics.netIncomeAmount || 0);
            $("#couponDeductionAmount").text(resp.incomeStatistics.couponDeductionAmount || 0);
            $("#refundAmount").text(resp.incomeStatistics.refundAmount || 0);
            renderIncomeStatisticsList("yearIncomeStatistics", "历年营收明细", resp.yearLabels, resp.yearIncomeStatistics);
            renderIncomeStatisticsList("monthIncomeStatistics", "本年各月营收明细", resp.monthLabels, resp.monthIncomeStatistics);
            renderIncomeStatisticsList("weekIncomeStatistics", "近四周营收明细", resp.weekLabels, resp.weekIncomeStatistics);
            renderIncomeStatisticsList("dayIncomeStatistics", "近七日营收明细", resp.dayLabels, resp.dayIncomeStatistics);
            renderIncomeTrendChart("incomeYearChart", "多年营收趋势", resp.yearLabels, resp.yearIncomeStatistics);
            renderIncomeTrendChart("incomeMonthChart", "本年各月营收趋势", resp.monthLabels, resp.monthIncomeStatistics);
            renderIncomeTrendChart("incomeWeekChart", "近四周营收趋势", resp.weekLabels, resp.weekIncomeStatistics);
            renderIncomeTrendChart("incomeDayChart", "近七日营收趋势", resp.dayLabels, resp.dayIncomeStatistics);
        });
        ajax.set("type",1);
        if($("#objectType").val()==3){
            ajax.set("id",$("#objectId").val())
        }else {
            ajax.set("storeId", $("#cCode").val())
        }
        ajax.set("type", 1);
        ajax.set("storeId", $("#objectType").val() == 3 ? $("#objectId").val() : $("#cCode").val());
        ajax.start();
        // 营收
        var income  = echarts.init(document.getElementById('income'));
        income.on('legendselectchanged', obj => {
            var options = income.getOption()
            //这里是选择切换什么样的x轴,那么他会进行对Y值的切换
            if (obj.name == '年度营收') {
                options.xAxis[0].data = yearX
            } else if (obj.name == '月度营收') {
                options.xAxis[0].data = monthX
            } else if (obj.name == '周度营收') {
                options.xAxis[0].data = weekX
            } else if (obj.name == '日度营收') {
                options.xAxis[0].data = dataX
            }
            income.setOption(options, true)
        })
        // 使用刚指定的配置项和数据显示图表。
        income.setOption(option);
    }
    let cutType=1;
@@ -816,107 +751,6 @@
        ajax.start();
    }
    function tuifei() {
        var myChart1 = echarts.init(document.getElementById('refund'));
        let id  = $("#cCode").val()
        console.log(id)
        if(id==''){
            Feng.info("请先选择门店");
            return;
        }
        var ajax3 = new $ax(Feng.ctxPath + "/data/backStore", function(data){
            $("#back1").text(data.thisYear);
            $("#back2").text(data.thisMonth);
            $("#back3").text(data.thisWeek);
            $("#back4").text(data.thisDay);
            option1 = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['年度退费', '月度退费','周度退费','日度退费'],
                    icon: 'stack',
                    selectedMode: 'single', // 单选
                    selected: {
                        年度会员数: true,
                        月度会员数: false,
                        周度会员数: false,
                        日度会员数: false
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: yearX
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '年度退费',
                        type: 'line',
                        stack: 'Total',
                        data: data.yearData
                    },
                    {
                        name: '月度退费',
                        type: 'line',
                        stack: 'Total',
                        data: data.monthData
                    },
                    {
                        name: '周度退费',
                        type: 'line',
                        stack: 'Total',
                        data: data.weekData
                    },
                    {
                        name: '日度退费',
                        type: 'line',
                        stack: 'Total',
                        data: data.dayData
                    }
                ]
            };
        });
        if($("#objectType").val()==3){
            ajax3.set("id",$("#objectId").val())
        }else {
            ajax3.set("id", id)
        }
        ajax3.start();
        myChart1.on('legendselectchanged', obj => {
            var options = myChart1.getOption()
            //这里是选择切换什么样的x轴,那么他会进行对Y值的切换
            if (obj.name == '年度退费') {
                options.xAxis[0].data = yearX
            } else if (obj.name == '月度退费') {
                options.xAxis[0].data = monthX
            } else if (obj.name == '周度退费') {
                options.xAxis[0].data =  ["1周","2周","3周","4周"]
            } else if (obj.name == '日度退费') {
                options.xAxis[0].data = dataX
            }
            myChart1.setOption(options, true)
        })
        myChart1.setOption(option1);
    }
    function ptStu() {
        var myChart6 = echarts.init(document.getElementById('teach'));
        myChart6.on('legendselectchanged', obj => {
@@ -1320,7 +1154,7 @@
            return;
        }
        var ajax2 = new $ax(Feng.ctxPath + "/data/actStore", function(data){
            $("#allHours").text(data.allHour)
            $("#allHours").text("运营时长:" + data.allHour + "小时")
            option4 = {
                tooltip: {
                    trigger: 'axis'
@@ -1452,7 +1286,7 @@
        var myChart5 = echarts.init(document.getElementById('prepare'));
        var myChart6 = echarts.init(document.getElementById('teach'));
        var myChart7 = echarts.init(document.getElementById('courseData'));
        tuifei()
        income()
        option2 = {
            tooltip: {
@@ -1781,7 +1615,6 @@
        if(type==1){
            srtj()
            tuifei()
            income()
        }
@@ -1906,7 +1739,7 @@
            ptActivity()
            ptUser()
            ptStu()
            tuifei()
            income()
            yytj()
            srtj()
        }