| | |
| | | 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"> |
| | |
| | | <div class="col-sm-10"> |
| | | <h2>营收数据</h2> |
| | | </br> |
| | | <div id = "money1" style="width: 1500px" > |
| | | <span id="totalIncome">总营收:</span> |
| | | <span id="yearIncome">本年度营收:</span> |
| | | <span id="monthIncome">本月度营收:</span> |
| | | <span id="weekIncome">本周营收:</span> |
| | | <span id="todayIncome">本日营收:</span> |
| | | </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> |
| | |
| | | <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> |
| | | <span id="yearRefund">本年退费额度:<span id="back1"></span></span> |
| | | <span id="monthRefund">本月退费额度:<span id="back2"></span></span> |
| | | <span id="weekRefund">本周退费额度:<span id="back3"></span></span> |
| | | <span id="todayRefund">本日退费额度:<span id="back4"></span></span> |
| | | </br> |
| | | </br> |
| | | <div id="refund" style="width: 1280px;height:500px;"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | ptCourse() |
| | | if(cutType==1){ |
| | | srtj() |
| | | tuifei() |
| | | income() |
| | | } |
| | | |
| | |
| | | |
| | | } |
| | | } |
| | | 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; |
| | |
| | | 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 => { |
| | |
| | | return; |
| | | } |
| | | var ajax2 = new $ax(Feng.ctxPath + "/data/actStore", function(data){ |
| | | $("#allHours").text(data.allHour) |
| | | $("#allHours").text("运营时长:" + data.allHour + "小时") |
| | | option4 = { |
| | | tooltip: { |
| | | trigger: 'axis' |
| | |
| | | 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: { |
| | |
| | | |
| | | if(type==1){ |
| | | srtj() |
| | | tuifei() |
| | | income() |
| | | } |
| | | |
| | |
| | | ptActivity() |
| | | ptUser() |
| | | ptStu() |
| | | tuifei() |
| | | income() |
| | | yytj() |
| | | srtj() |
| | | } |