From f7e51fc7c91e474e5c0bcc79c47f074c0a59b5c3 Mon Sep 17 00:00:00 2001 From: 44323 <443237572@qq.com> Date: 星期三, 11 十月 2023 20:03:35 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/operatorIncome.html | 525 +++++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 460 insertions(+), 65 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 d7c2800..eb13609 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 @@ -49,7 +49,7 @@ <div class="input-group"> <div class="input-group-btn open"> <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button" aria-expanded="true"> - 选择运营商 + 选择运营商1 </button> </div> <select class="form-control" id="cCode" > @@ -79,11 +79,11 @@ <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> @@ -267,7 +267,8 @@ <script src="${ctxPath}/static/js/plugins/switchery/switchery.js"></script> <script> - + var weekX = ["1周","2周","3周","4周"]; + var monthX = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]; function oneChangeNext(e){ var oneId=$(e).val(); var ajax = new $ax(Feng.ctxPath + "/tCity/onChange", function(data){ @@ -292,7 +293,7 @@ function search(){ - + income(); if(cutType==1){ srtj() tuifei() @@ -300,10 +301,134 @@ if(cutType==2){ yytj() + ptUser() + ptActivity() + } if(cutType==3){ jxtj() } + } + 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] + ] + } + ] + }; + + }); + ajax.set("type",1); + ajax.set("operatorId",id); + 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); } @@ -316,9 +441,17 @@ , range: true }); $(function(){ + + var ajax2 = new $ax(Feng.ctxPath + "/data/getYears", function(data){ + yearX=data + }); + ajax2.start() + getContent(1); getContent1(1); getContent2(1); + + // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('income')); @@ -330,59 +463,9 @@ var myChart6 = echarts.init(document.getElementById('teach')); var myChart7 = echarts.init(document.getElementById('courseData')); tuifei() - 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] - } - ] - }; + income() + + option2 = { tooltip: { trigger: 'axis' @@ -679,7 +762,6 @@ ] }; // 使用刚指定的配置项和数据显示图表。 - myChart.setOption(option); myChart2.setOption(option2); myChart3.setOption(option3); myChart4.setOption(option4); @@ -718,6 +800,8 @@ if(type==2){ yytj() + ptUser() + ptActivity() } if(type==3){ @@ -1101,9 +1185,8 @@ ajax.set("id",id); ajax.start(); } - - - + + function tuifei() { var myChart1 = echarts.init(document.getElementById('refund')); let id = $("#cCode").val() @@ -1200,6 +1283,318 @@ }) myChart1.setOption(option1); } + + + function ptUser() { + var myChart2 = echarts.init(document.getElementById('user')); + var myChart3 = echarts.init(document.getElementById('vip')); + 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 = ["1周","2周","3周","4周"] + } else if (obj.name == '日度用户数') { + options.xAxis[0].data = dataX + } + myChart2.setOption(options, true) + }); + let id = $("#cCode").val() + console.log(id) + if(id==''){ + Feng.info("请先选择运营商"); + return; + } + 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 = ["1周","2周","3周","4周"] + } else if (obj.name == '日度会员数') { + options.xAxis[0].data = dataX + } + myChart3.setOption(options, true) + }); + var ajax2 = new $ax(Feng.ctxPath + "/data/userAndVipYys", function(data){ + $("#userAll").text(data.allUser) + $("#userVipAll").text(data.allVip) + console.log(data) + 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: data.yearData + }, + { + name: '月度用户数', + type: 'line', + stack: 'Total', + data: data.monthData + }, + { + name: '周度用户数', + type: 'line', + stack: 'Total', + data: [data.count,data.count1,data.count2,data.count3] + }, + { + name: '日度用户数', + type: 'line', + stack: 'Total', + data: data.dayData + } + ] + }; + 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: data.yearsVip + }, + { + name: '月度会员数', + type: 'line', + stack: 'Total', + data: data.monthsVip + }, + { + name: '周度会员数', + type: 'line', + stack: 'Total', + data:[data.countVip,data.countVip1,data.countVip2,data.countVip3] + }, + { + name: '日度会员数', + type: 'line', + stack: 'Total', + data: data.daysVip + } + ] + }; + }); + ajax2.set("id",id) + ajax2.start() + myChart2.setOption(option2); + myChart3.setOption(option3); + } + + function ptActivity() { + var myChart4 = echarts.init(document.getElementById('activity')); + var myChart5 = echarts.init(document.getElementById('prepare')); + myChart4.on('legendselectchanged', obj => { + var options = myChart4.getOption() + //这里是选择切换什么样的x轴,那么他会进行对Y值的切换 + if (obj.name == '年度次数') { + options.xAxis[0].data = yearX + } else if (obj.name == '月度次数') { + options.xAxis[0].data = monthX + } + myChart4.setOption(options, true) + }); + + myChart5.on('legendselectchanged', obj => { + var options = myChart5.getOption() + //这里是选择切换什么样的x轴,那么他会进行对Y值的切换 + if (obj.name == '年度次数') { + options.xAxis[0].data = yearX + } else if (obj.name == '月度次数') { + options.xAxis[0].data = monthX + } + myChart5.setOption(options, true) + }); + let id = $("#cCode").val() + console.log(id) + if(id==''){ + Feng.info("请先选择运营商"); + return; + } + var ajax2 = new $ax(Feng.ctxPath + "/data/actYys", function(data){ + + $("#allHour").text(data.allHour) + + option4 = { + tooltip: { + trigger: 'axis' + }, + legend: { + data: ['年度次数', '月度次数'], + icon: 'stack', + selectedMode: 'single', // 单选 + selected: { + 年度次数: true, + 月度次数: 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 + } + + ] + }; + option5 = { + tooltip: { + trigger: 'axis' + }, + legend: { + data: ['年度次数', '月度次数'], + icon: 'stack', + selectedMode: 'single', // 单选 + selected: { + 年度次数: true, + 月度次数: 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.yearsUser + }, + { + name: '月度次数', + type: 'line', + stack: 'Total', + data: data.monthsUser + } + ] + }; + }); + ajax2.set("id",id) + ajax2.start() + myChart4.setOption(option4); + myChart5.setOption(option5); + } function getContent1(type){ //设置点击字体颜色效果 -- Gitblit v1.7.1