From e6ee956618b3c1a6371a6c22dfbb70868dbd3f17 Mon Sep 17 00:00:00 2001
From: 44323 <443237572@qq.com>
Date: 星期六, 07 十月 2023 15:23:06 +0800
Subject: [PATCH] 后台代码
---
cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/platformIncome.html | 489 +++++++++++++++++++++++++++++++++++------------------
1 files changed, 319 insertions(+), 170 deletions(-)
diff --git a/cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/platformIncome.html b/cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/platformIncome.html
index 748749d..69f573c 100644
--- a/cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/platformIncome.html
+++ b/cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/platformIncome.html
@@ -55,15 +55,15 @@
<h2>营收数据</h2>
</br>
<div id = "money1" style="width: 1500px" >
- <span>总营收:</span>
- <span>本年度营收:</span>
- <span>本月度营收:</span>
- <span>本周营收:</span>
- <span>本日营收:</span>
+ <span id="totalIncome">总营收:</span>
+ <span id="yearIncome">本年度营收:</span>
+ <span id="monthIncome">本月度营收:</span>
+ <span id="weekIncome">本周营收:</span>
+ <span id="todayIncome">本日营收:</span>
</br>
</br>
</div>
- <div id="income" style="width: 1280px;height:500px;"></div>
+ <div id="main" style="width: 1280px;height:500px;"></div>
</div>
<div class="col-sm-10">
<h2>收入类型统计</h2>
@@ -102,10 +102,10 @@
<div class="col-sm-10" style="width: 1500px" >
</br>
</br>
- <span>本年退费额度:</span>
- <span>本月退费额度:</span>
- <span>本周退费额度:</span>
- <span>本日退费额度:</span>
+ <span id="yearRefund">本年退费额度:</span>
+ <span id="monthRefund">本月退费额度:</span>
+ <span id="weekRefund">本周退费额度:</span>
+ <span id="todayRefund">本日退费额度:</span>
</br>
</br>
<div id="refund" style="width: 1280px;height:500px;"></div>
@@ -243,6 +243,35 @@
<script src="${ctxPath}/modular/system/dataStatistics/echarts.min.js"></script>
<script src="${ctxPath}/static/js/plugins/switchery/switchery.js"></script>
<script>
+ var ans = [];
+ var weekX = [];
+ var monthX = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
+ var yearX = ["2023年","2024年","2025年","2026年","2027年","2028年"];
+ var timeX = [];
+ var dataX = [];
+ // 创建一个日期对象
+ var currentDate = new Date();
+ // 获取当前日期的号数
+ let currentDay = currentDate.getDate();
+ // 循环添加号数到数组
+ for (let i = 0; i < 7; i++) {
+ dataX.push(currentDay - 6+i);
+ }
+ // 获取当前月份
+ var currentMonth = currentDate.getMonth();
+ // 获取当前年份
+ var currentYear = currentDate.getFullYear();
+ // 计算指定年份和月份的天数
+ function getDaysInMonth(year, month) {
+ // month 参数范围是 0-11，所以需要加 1
+ return new Date(year, month + 1, 0).getDate();
+ }
+ // 获取当前月份的天数
+ var daysInMonth = getDaysInMonth(currentYear, currentMonth);
+ // 将天数按字符串格式添加到 timeX 数组中
+ for (var i = 1; i <= daysInMonth; i++) {
+ timeX.push(String(i));
+ }
laydate.render({
elem: '#beginTime'
, trigger: 'click'
@@ -252,8 +281,240 @@
getContent(1);
getContent1(1);
getContent2(1);
+ var ajax = new $ax(Feng.ctxPath + "/data/getIncomeData", function(resp){
+ 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;
+ var days = week[0].length;
+ for (let i = 1; i <= days; i++) {
+ weekX.push(i);
+ }
+ 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].amount,year[1].amount,year[2].amount,year[3].amount,year[4].amount,year[5].amount]
+ },
+ {
+ 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]
+ , week[0][5], week[0][6], week[0][7], week[0][8], week[0][9]
+ , week[0][10], week[0][11], week[0][12], week[0][13], week[0][14]
+ , week[0][15], week[0][16], week[0][17], week[0][18], week[0][19], week[0][20]
+ , week[0][21], week[0][22], week[0][23], week[0][24], week[0][25], week[0][26]
+ , week[0][27], week[0][28], week[0][29], week[0][30], week[0][31]
+ ]
+ },
+ {
+ 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]
+ ]
+ }
+ ]
+ };
+ });
+ ajax.set("type",1);
+ ajax.start();
+ option2 = {
+ 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: [100,50,60,10,12,13,54,156]
+ },
+ {
+ name: '月度用户数',
+ type: 'line',
+ stack: 'Total',
+ data: [26,44,55,12,6,7,98,541,223]
+ },
+ {
+ name: '周度用户数',
+ type: 'line',
+ stack: 'Total',
+ data: [
+ 33,22,11,12,61,17,23,33,41
+ ]
+ },
+ {
+ name: '日度用户数',
+ type: 'line',
+ stack: 'Total',
+ data: [
+ 12,11,17,26,23,111,23,45,41
+ ]
+ }
+ ]
+ };
+ var ajax2 = new $ax(Feng.ctxPath + "/data/getIncomeData", function(resp){
+ option3 = {
+ 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: [100,50,60,10,12,13,54,156]
+ },
+ {
+ name: '月度会员数',
+ type: 'line',
+ stack: 'Total',
+ data: [26,44,55,12,6,7,98,541,223]
+ },
+ {
+ name: '周度会员数',
+ type: 'line',
+ stack: 'Total',
+ data: [
+ 33,22,11,12,61,17,23,33,41
+ ]
+ },
+ {
+ name: '日度会员数',
+ type: 'line',
+ stack: 'Total',
+ data: [
+ 12,11,17,26,23,111,23,45,41
+ ]
+ }
+ ]
+ };
+ });
+ ajax2.set("type",1);
+ ajax2.start();
// 基于准备好的dom，初始化echarts实例
- var myChart = echarts.init(document.getElementById('income'));
+ var myChart = echarts.init(document.getElementById('main'));
var myChart1 = echarts.init(document.getElementById('refund'));
var myChart2 = echarts.init(document.getElementById('user'));
var myChart3 = echarts.init(document.getElementById('vip'));
@@ -261,59 +522,7 @@
var myChart5 = echarts.init(document.getElementById('prepare'));
var myChart6 = echarts.init(document.getElementById('teach'));
var myChart7 = echarts.init(document.getElementById('courseData'));
- option = {
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['年度营收', '月度营收', '周度营收', '日度营收']
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- toolbox: {
- feature: {
- saveAsImage: {}
- }
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name: '年度营收',
- type: 'line',
- stack: 'Total',
- data: [120, 132, 101, 134, 90, 230, 160, 190, 410, 330, 210, 330]
- },
- {
- name: '月度营收',
- type: 'line',
- stack: 'Total',
- data: [220, 182, 191, 234, 290, 330, 310, 190, 210, 330, 410, 160]
- },
- {
- name: '周度营收',
- type: 'line',
- stack: 'Total',
- data: [150, 232, 201, 154, 190, 330, 410, 160, 210, 195, 210, 188]
- },
- {
- name: '日度营收',
- type: 'line',
- stack: 'Total',
- data: [320, 332, 301, 334, 390, 330, 320, 10, 195, 145, 188, 160]
- }
- ]
- };
+
option1 = {
tooltip: {
trigger: 'axis'
@@ -367,112 +576,8 @@
}
]
};
- option2 = {
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['年度用户数', '月度用户数', '周度用户数', '日度用户数']
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- toolbox: {
- feature: {
- saveAsImage: {}
- }
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name: '年度用户数',
- type: 'line',
- stack: 'Total',
- data: [120, 132, 101, 134, 90, 230, 160, 190, 410, 330, 210, 330]
- },
- {
- name: '月度用户数',
- type: 'line',
- stack: 'Total',
- data: [220, 182, 191, 234, 290, 330, 310, 190, 210, 330, 410, 160]
- },
- {
- name: '周度用户数',
- type: 'line',
- stack: 'Total',
- data: [150, 232, 201, 154, 190, 330, 410, 160, 210, 195, 210, 188]
- },
- {
- name: '日度用户数',
- type: 'line',
- stack: 'Total',
- data: [320, 332, 301, 334, 390, 330, 320, 10, 195, 145, 188, 160]
- }
- ]
- };
- option3 = {
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['年度会员数', '月度会员数', '周度会员数', '日度会员数']
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- toolbox: {
- feature: {
- saveAsImage: {}
- }
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name: '年度会员数',
- type: 'line',
- stack: 'Total',
- data: [1220, 1532, 101, 1394, 980, 2380, 1680, 1190, 1410, 1330, 2110, 1330]
- },
- {
- name: '月度会员数',
- type: 'line',
- stack: 'Total',
- data: [1220, 1182, 2191, 3234, 1290, 1330, 2310, 2190, 2210, 1330, 2410, 1650]
- },
- {
- name: '周度会员数',
- type: 'line',
- stack: 'Total',
- data: [2150, 3232, 2201, 5154, 5190, 1330, 1410, 1660, 2610, 1695, 2410, 1848]
- },
- {
- name: '日度会员数',
- type: 'line',
- stack: 'Total',
- data: [2320, 3332, 1301, 3234, 3290, 1330, 1320, 1220, 1295, 1645, 1888, 1660]
- }
- ]
- };
+
+
option4 = {
tooltip: {
trigger: 'axis'
@@ -662,6 +767,49 @@
}
]
};
+ myChart.on('legendselectchanged', obj => {
+ var options = myChart.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
+ }
+ myChart.setOption(options, true)
+ })
+ myChart2.on('legendselectchanged', obj => {
+ var options = myChart2.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
+ }
+ myChart2.setOption(options, true)
+ });
+
+ myChart3.on('legendselectchanged', obj => {
+ var options = myChart3.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
+ }
+ myChart3.setOption(options, true)
+ });
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart1.setOption(option1);
@@ -724,6 +872,7 @@
$("#nextB").hide();
}
}
+
</script>
<script>
$(function(){
--
Gitblit v1.7.1