| | |
| | | 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: 38px; |
| | | padding: 9px 12px; |
| | | border-left: 3px solid #1ab394; |
| | | background: #f8fafc; |
| | | color: #606266; |
| | | line-height: 20px; |
| | | } |
| | | \@media (max-width: 992px) { |
| | | .income-overview { grid-template-columns: repeat(2, minmax(180px, 1fr)); } |
| | | .income-period-grid { grid-template-columns: 1fr; } |
| | | } |
| | | </style> |
| | | <div class="ibox float-e-margins"> |
| | | <div class="ibox-content"> |
| | |
| | | <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> |
| | | <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="main" style="width: 1280px;height:500px;"></div> |
| | | </div> |
| | |
| | | }); |
| | | ajax2.start() |
| | | } |
| | | |
| | | function renderIncomeStatistics(elementId, periodName, statistics) { |
| | | document.getElementById(elementId).innerText = periodName + "统计:总营收金额 " |
| | | + statistics.totalIncomeAmount + ",净收入金额 " + statistics.netIncomeAmount |
| | | + ",优惠券抵扣金额 " + statistics.couponDeductionAmount + ",退款金额 " |
| | | + statistics.refundAmount; |
| | | } |
| | | |
| | | $(function(){ |
| | | getContent(1); |
| | | getContent1(1); |
| | |
| | | var t3 = document.getElementById("monthIncome"); |
| | | var t4 = document.getElementById("weekIncome"); |
| | | var t5 = document.getElementById("todayIncome"); |
| | | t1.innerText = "总营收:"+list[0]+" "; |
| | | var netIncomeAmount = document.getElementById("netIncomeAmount"); |
| | | var couponDeductionAmount = document.getElementById("couponDeductionAmount"); |
| | | var refundAmount = document.getElementById("refundAmount"); |
| | | t1.innerText = list[0] || 0; |
| | | t2.innerText = "年度营收:"+list[1]+" "; |
| | | t3.innerText = "月度营收:"+list[2]+" "; |
| | | t4.innerText = "周度营收:"+list[3]+" "; |
| | | t5.innerText = "日度营收:"+list[4]+" "; |
| | | netIncomeAmount.innerText = resp.incomeStatistics.netIncomeAmount || 0; |
| | | couponDeductionAmount.innerText = resp.incomeStatistics.couponDeductionAmount || 0; |
| | | refundAmount.innerText = resp.incomeStatistics.refundAmount || 0; |
| | | renderIncomeStatistics("yearIncomeStatistics", "年度", resp.yearIncomeStatistics[resp.yearIncomeStatistics.length - 1]); |
| | | renderIncomeStatistics("monthIncomeStatistics", "月度", resp.monthIncomeStatistics[new Date().getMonth()]); |
| | | renderIncomeStatistics("weekIncomeStatistics", "周度", resp.weekIncomeStatistics[resp.weekIncomeStatistics.length - 1]); |
| | | renderIncomeStatistics("dayIncomeStatistics", "日度", resp.dayIncomeStatistics[resp.dayIncomeStatistics.length - 1]); |
| | | var year = resp.yearIncome; |
| | | var month = resp.monthIncome; |
| | | var week = resp.weekIncome; |
| | |
| | | type: 'line', |
| | | stack: 'Total', |
| | | data: [ |
| | | week[0][0], week[0][1], week[0][2], week[0][3], week[0][4] |
| | | week[0][0], week[0][1], week[0][2], week[0][3] |
| | | ] |
| | | }, |
| | | { |