| | |
| | | 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; |
| | | 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; } |
| | | \@media (max-width: 992px) { |
| | | .income-overview { grid-template-columns: repeat(2, minmax(180px, 1fr)); } |
| | | } |
| | | </style> |
| | | <div class="ibox float-e-margins"> |
| | | <div class="ibox-content"> |
| | |
| | | </div> |
| | | <select class="form-control" id="cCode" > |
| | | <option value="">请选择</option> |
| | | <option value="0">平台</option> |
| | | @for(obj in list){ |
| | | <option value="${obj.id}">${obj.name}</option> |
| | | @} |
| | |
| | | <div class="form-group"> |
| | | <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> |
| | | <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> |
| | | <div class="col-sm-10"> |
| | |
| | | </br> |
| | | </br> |
| | | |
| | | <span>会员费收入:<label id="fee1">0.0</label></span> |
| | | <span>玩湃币充值收入:<label id="fee2">0.0</label></span> |
| | | <span>课程收入:<label id="fee3">0.0</label></span> |
| | | <span>活动/赛事收入:<label id="fee4">0.0</label></span> |
| | | <span>订场收入:<label id="fee5">0.0</label></span> |
| | | <span>门票收入:<label id="fee7">0.0</label></span> |
| | | <span>商品/其他收入:<label id="fee7">0.0</label></span> |
| | | </br> |
| | | </br> |
| | | </br> |
| | |
| | | </br> |
| | | <div style="height: 25px;box-sizing: border-box;background:#f3f3f4;line-height: 25px;border:1px solid;margin-bottom: 20px;width: 500px"> |
| | | <div id="e1" class='table3' onclick="getContent2(1)" style="border-right: 1px solid #333;background-color: rgb(26, 179, 148);color: white;">活动次数</div> |
| | | <div id="e2" class='table3' onclick="getContent2(2)" style="border-right: 1px solid #333;">预定次数</div> |
| | | <div id="e2" class='table3' onclick="getContent2(2)" style="border-right: 1px solid #333;">活动报名人数</div> |
| | | </div> |
| | | </div> |
| | | <div class="col-sm-10"> |
| | |
| | | <script src="${ctxPath}/modular/system/dataStatistics/tSite.js"></script> |
| | | <script src="${ctxPath}/static/js/plugins/switchery/switchery.js"></script> |
| | | <script> |
| | | // 仅格式化前端展示,接口返回的原始数值不作改动。 |
| | | function formatStatisticNumber(value) { |
| | | var number = Number(value); |
| | | return isFinite(number) ? number.toFixed(2) : '0.00'; |
| | | } |
| | | |
| | | var weekX = ["1周","2周","3周","4周"]; |
| | | var monthX = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]; |
| | | |
| | | function currentOperatorId() { |
| | | if ($("#objectType").val() == 2) { |
| | | return $("#objectId").val(); |
| | | } |
| | | return $("#cCode").val(); |
| | | } |
| | | |
| | | function oneChangeNext(e){ |
| | | var oneId=$(e).val(); |
| | | var ajax = new $ax(Feng.ctxPath + "/tCity/onChange", function(data){ |
| | |
| | | } |
| | | } |
| | | function income(){ |
| | | var id = $("#cCode").val() |
| | | var id = currentOperatorId() |
| | | var beginTime = $("#beginTime").val() |
| | | console.log(id) |
| | | if(id==""){ |
| | |
| | | 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 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 incomeTypeNet = resp.incomeTypeNet || {}; |
| | | $("#fee1").text(formatStatisticNumber(incomeTypeNet[1])); |
| | | $("#fee2").text(formatStatisticNumber(incomeTypeNet[2])); |
| | | $("#fee3").text(formatStatisticNumber(incomeTypeNet[3])); |
| | | $("#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; |
| | |
| | | }); |
| | | ajax.set("type",1); |
| | | ajax.set("operatorId",id); |
| | | ajax.set("time",beginTime); |
| | | ajax.start(); |
| | | // 营收 |
| | | var income = echarts.init(document.getElementById('income')); |
| | |
| | | |
| | | } |
| | | function srtj() { |
| | | var id = $("#cCode").val() |
| | | var id = currentOperatorId() |
| | | var beginTime = $("#beginTime").val() |
| | | console.log(id) |
| | | if(id==""){ |
| | |
| | | } |
| | | var ajax = new $ax(Feng.ctxPath + "/data/selectYys", function (data) { |
| | | |
| | | $("#fee3").text(data.fee3) |
| | | $("#fee4").text(data.fee4) |
| | | $("#fee5").text(data.fee5) |
| | | $("#fee7").text(data.fee7) |
| | | $("#day").val(data.dayone) |
| | | $("#month").val(data.monthone) |
| | | $("#quarter").val(data.quarterone) |
| | |
| | | }, function (data) { |
| | | |
| | | }); |
| | | if($("#objectType").val()==2){ |
| | | ajax.set("id",$("#objectId").val()) |
| | | }else { |
| | | ajax.set("id", id) |
| | | } |
| | | ajax.set("id", id) |
| | | ajax.set("time",beginTime); |
| | | ajax.start(); |
| | | |
| | | } |
| | | |
| | | function jxtj() { |
| | | var id = $("#cCode").val() |
| | | var id = currentOperatorId() |
| | | console.log(id,333) |
| | | if(id==""){ |
| | | Feng.info("请先选择运营商"); |
| | |
| | | myChart7.setOption(option7); |
| | | } |
| | | function yytj() { |
| | | let id = $("#cCode").val() |
| | | let id = currentOperatorId() |
| | | console.log(id) |
| | | if(id==''){ |
| | | Feng.info("请先选择运营商"); |
| | |
| | | var option; |
| | | |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | } |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | containLabel: true |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: data.cityData |
| | |
| | | } |
| | | function tuifei() { |
| | | var myChart1 = echarts.init(document.getElementById('refund')); |
| | | let id = $("#cCode").val() |
| | | let id = currentOperatorId() |
| | | console.log(id) |
| | | if(id==''){ |
| | | Feng.info("请先选择运营商"); |
| | | return; |
| | | } |
| | | var ajax3 = new $ax(Feng.ctxPath + "/data/backYys", function(data){ |
| | | $("#back1").text(data.thisYear); |
| | | $("#back2").text(data.thisMonth); |
| | | $("#back3").text(data.thisWeek); |
| | | $("#back4").text(data.thisDay); |
| | | $("#back1").text(formatStatisticNumber(data.thisYear)); |
| | | $("#back2").text(formatStatisticNumber(data.thisMonth)); |
| | | $("#back3").text(formatStatisticNumber(data.thisWeek)); |
| | | $("#back4").text(formatStatisticNumber(data.thisDay)); |
| | | option1 = { |
| | | tooltip: { |
| | | trigger: 'axis' |
| | |
| | | } |
| | | myChart2.setOption(options, true) |
| | | }); |
| | | let id = $("#cCode").val() |
| | | let id = currentOperatorId() |
| | | console.log(id) |
| | | if(id==''){ |
| | | Feng.info("请先选择运营商"); |
| | |
| | | } |
| | | myChart5.setOption(options, true) |
| | | }); |
| | | let id = $("#cCode").val() |
| | | let id = currentOperatorId() |
| | | console.log(id) |
| | | if(id==''){ |
| | | Feng.info("请先选择运营商"); |
| | |
| | | var yearX = []; |
| | | var timeX = []; |
| | | var dataX = []; |
| | | // 仅允许接口真实数据渲染,禁止历史遗留的演示图表覆盖统计结果。 |
| | | var renderDemoStatistics = false; |
| | | // 创建一个日期对象 |
| | | var currentDate = new Date(); |
| | | // 获取当前日期的号数 |
| | |
| | | jxtj() |
| | | srtj() |
| | | income() |
| | | } |
| | | if (!renderDemoStatistics) { |
| | | return; |
| | | } |
| | | var chartDom = document.getElementById('cookieTicket'); |
| | | var myChart = echarts.init(chartDom); |
| | |
| | | myChart.setOption(option); |
| | | }); |
| | | $(function(){ |
| | | if (!renderDemoStatistics) { |
| | | return; |
| | | } |
| | | var chartDom = document.getElementById('cookieCourse'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | |
| | | myChart.setOption(option); |
| | | }); |
| | | $(function(){ |
| | | if (!renderDemoStatistics) { |
| | | return; |
| | | } |
| | | var chartDom = document.getElementById('cookieBooking'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | |
| | | myChart.setOption(option); |
| | | }); |
| | | $(function(){ |
| | | if (!renderDemoStatistics) { |
| | | return; |
| | | } |
| | | var chartDom = document.getElementById('cookieAge'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | |
| | | myChart.setOption(option); |
| | | }); |
| | | $(function(){ |
| | | if (!renderDemoStatistics) { |
| | | return; |
| | | } |
| | | var chartDom = document.getElementById('cookieGender'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | |
| | | myChart.setOption(option); |
| | | }); |
| | | $(function(){ |
| | | if (!renderDemoStatistics) { |
| | | return; |
| | | } |
| | | var chartDom = document.getElementById('cookieTeachCourse'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |