From 474724c0e016be419fe84967fdcb085722e6b444 Mon Sep 17 00:00:00 2001
From: 刘帅 <rr.iii@qq.com>
Date: 星期二, 22 九月 2026 11:20:12 +0800
Subject: [PATCH] bug：营收统计数据修改
---
cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/operatorIncome.html | 240 +++++++++++++++++++++++++++++-------------------------------
1 files changed, 116 insertions(+), 124 deletions(-)
diff --git a/cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/operatorIncome.html b/cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/operatorIncome.html
index dc6262e..95b8116 100644
--- a/cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/operatorIncome.html
+++ b/cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/operatorIncome.html
@@ -43,7 +43,7 @@
gap: 16px;
width: 100%;
max-width: 1280px;
- margin: 18px 0;
+ margin: 18px 0 14px;
text-align: left;
}
.income-card {
@@ -67,8 +67,56 @@
.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 { grid-template-columns: 1fr; }
+ .income-trend-grid { grid-template-columns: 1fr; }
}
</style>
<div class="ibox float-e-margins">
@@ -119,12 +167,23 @@
<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>
<span id="yearIncome" style="display:none"></span>
<span id="monthIncome" style="display:none"></span>
<span id="weekIncome" style="display:none"></span>
<span id="todayIncome" style="display:none"></span>
</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>
@@ -367,30 +426,18 @@
}
}
function income(){
- var id = currentOperatorId()
- var beginTime = $("#beginTime").val()
- console.log(id)
- if(id==""){
+ var id = currentOperatorId();
+ var beginTime = $("#beginTime").val();
+ 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");
- var netIncomeAmount = document.getElementById("netIncomeAmount");
- var couponDeductionAmount = document.getElementById("couponDeductionAmount");
- var refundAmount = document.getElementById("refundAmount");
- t1.innerText = formatStatisticNumber(list[0]);
- t2.innerText = "年度应收:" + formatStatisticNumber(list[1]) + " ";
- netIncomeAmount.innerText = formatStatisticNumber(resp.netIncomeAmount);
- couponDeductionAmount.innerText = formatStatisticNumber(resp.couponDeductionAmount);
- refundAmount.innerText = formatStatisticNumber(resp.refundAmount);
+ var statistics = resp.incomeStatistics || {};
+ $("#totalIncome").text(formatStatisticNumber(statistics.totalIncomeAmount));
+ $("#netIncomeAmount").text(formatStatisticNumber(statistics.netIncomeAmount));
+ $("#couponDeductionAmount").text(formatStatisticNumber(statistics.couponDeductionAmount));
+ $("#refundAmount").text(formatStatisticNumber(statistics.refundAmount));
var incomeTypeNet = resp.incomeTypeNet || {};
$("#fee1").text(formatStatisticNumber(incomeTypeNet[1]));
$("#fee2").text(formatStatisticNumber(incomeTypeNet[2]));
@@ -398,108 +445,58 @@
$("#fee4").text(formatStatisticNumber(incomeTypeNet[4]));
$("#fee5").text(formatStatisticNumber(incomeTypeNet[5]));
$("#fee7").text(formatStatisticNumber(incomeTypeNet[6]));
- t3.innerText = "月度营收:" + formatStatisticNumber(list[2]) + " ";
- t4.innerText = "周度营收:" + formatStatisticNumber(list[3]) + " ";
- t5.innerText = "日度营收:" + formatStatisticNumber(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]
- ]
- }
- ]
- };
-
+ 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);
ajax.set("operatorId",id);
ajax.set("time",beginTime);
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);
+ }
+
+ 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>：总营收金额 '
+ + formatStatisticNumber(item.totalIncomeAmount) + '，净收入金额 ' + formatStatisticNumber(item.netIncomeAmount)
+ + '，优惠券抵扣金额 ' + formatStatisticNumber(item.couponDeductionAmount)
+ + '，退款金额 ' + formatStatisticNumber(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 chartDom = document.getElementById(elementId);
+ var chart = echarts.getInstanceByDom(chartDom) || echarts.init(chartDom);
+ chart.setOption({
+ title: {text: title, left: 'center', textStyle: {fontSize: 15}},
+ tooltip: {
+ trigger: 'axis',
+ formatter: function (params) {
+ var index = params[0].dataIndex;
+ var item = statistics[index] || {};
+ return labels[index] + '<br/>总营收：' + formatStatisticNumber(item.totalIncomeAmount)
+ + '<br/>净收入：' + formatStatisticNumber(item.netIncomeAmount)
+ + '<br/>优惠券抵扣：' + formatStatisticNumber(item.couponDeductionAmount)
+ + '<br/>退款：' + formatStatisticNumber(item.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 || 0; }),
+ areaStyle: {opacity: 0.12}
+ }]
+ }, true);
}
@@ -521,11 +518,6 @@
getContent(1);
getContent1(1);
getContent2(1);
-
-
-
- // 基于准备好的dom，初始化echarts实例
- var myChart = echarts.init(document.getElementById('income'));
var myChart2 = echarts.init(document.getElementById('user'));
var myChart3 = echarts.init(document.getElementById('vip'));
--
Gitblit v1.7.1