新增对账报表

src/api/system/dashboard.js

@@ -63,4 +63,13 @@ export function getBonusDailyAmount(params) {
   })
 }
 
-
+/**
+ * 获取按日统计订单金额
+ */
+export function getBillDailyAmount(params) {
+  return request({
+    url: '/system/dashboard/billDailyAmount',
+    method: 'get',
+    params
+  })
+}

src/utils/constants.js

@@ -143,6 +143,11 @@ export const RechargeStatus = {
   REFUNDING: "7", // 退款中
   DEPOSIT_WAIT_PAY: "8",  // 押金待支付
   DEPOSIT_SUCCESS: "9", // 押金已支付
+
+  // 支付过的状态列表
+  payedOrder() {
+    return [this.PAY_SUCCESS, this.REFUNDED, this.REFUNDING];
+  }
 }
 
 // 时长/电量变化类型
@@ -268,3 +273,8 @@ export const RiskInfoStatus = {
     return [this.WAIT_VERIFY, this.PASS, this.REJECT]
   }
 }
+
+export const TransactionBillType = {
+  RECHARGE: "1",  // 充值
+  WITHDRAW: "2",  // 提现
+}

src/views/dashboard/DailyBillAmountChart.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <el-row style="margin-bottom: 16px">
+      <date-range-picker
+        :start-date.sync="queryParams.startDate"
+        :end-date.sync="queryParams.endDate"
+        @change="getList"
+      />
+    </el-row>
+    <daily-bill-amount-report :bill-data="billData" width="100%" height="250px"/>
+  </div>
+</template>
+
+<script>
+import { getLastDateStr } from '@/utils'
+import { getBillDailyAmount } from '@/api/system/dashboard'
+import DateRangePicker from '@/components/DateRangePicker/index.vue'
+import DailyBillAmountReport from '@/views/dashboard/DailyBillAmountReport.vue'
+import { RechargeStatus, TransactionBillType } from '@/utils/constants'
+
+export default {
+  name: 'DailyBillAmountChart',
+  components: { DailyBillAmountReport, DateRangePicker },
+  data() {
+    return {
+      // 查询条件
+      queryParams: {
+        startDate: getLastDateStr(6),
+        endDate: getLastDateStr(0),
+        type: TransactionBillType.RECHARGE,
+        statusList: RechargeStatus.payedOrder()
+      },
+      billData: []
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      getBillDailyAmount(this.queryParams).then(res => {
+        this.billData = res.data;
+      }).finally(() => {
+        this.loading = false;
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/dashboard/DailyBillAmountReport.vue

@@ -0,0 +1,138 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" v-loading="loading"/>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+import { getTimeArray } from '@/utils'
+
+export default {
+  name: 'dailyBillAmountReport',
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    billData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      chart: null,
+      // x轴配置
+      x: {
+        start: 0,
+        end: 22,
+        step: 2
+      },
+    }
+  },
+  watch: {
+    billData:{
+      deep: true,
+      handler(nv, ov) {
+        this.$nextTick(() => {
+          this.setOption();
+        })
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    // 初始化图表
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOption();
+    },
+    // 设置数据
+    setOption() {
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        legend: {
+          show: true
+        },
+        grid: {
+          top: 30,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: this.billData.map(item => item.date),
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          name: '订单金额',
+          type: 'line',
+          data: this.billData.map(item => item.total),
+          itemStyle: {
+            normal: {
+              color: '#246EFF',
+            }
+          },
+        }, {
+          name: '退款金额',
+          type: 'line',
+          data: this.billData.map(item => item.refund),
+          itemStyle: {
+            normal: {
+              color: '#31d697',
+            }
+          },
+        }, {
+          name: '实收金额',
+          type: 'line',
+          data: this.billData.map(item => item.received),
+          itemStyle: {
+            normal: {
+              color: '#6831d6',
+            }
+          },
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/ss/index/index.vue

@@ -15,8 +15,8 @@
 
     <el-row :gutter="8">
       <el-col :lg="12" :xs="24">
-        <el-card header="每日充值提现" class="card-box">
-          <daily-hour-bill-chart/>
+        <el-card header="订单对账" class="card-box">
+          <daily-bill-amount-chart/>
         </el-card>
       </el-col>
       <el-col :lg="12" :xs="24">
@@ -26,8 +26,8 @@
       </el-col>
     </el-row>
 
-    <el-card header="余额时段分析" class="card-box">
-      <balance-period-report/>
+    <el-card header="每日充值提现" class="card-box">
+      <daily-hour-bill-chart/>
     </el-card>
   </div>
 </template>
@@ -40,10 +40,11 @@ import BalancePeriodReport from '@/views/dashboard/BalancePeriodReport.vue'
 import Brief from '@/views/dashboard/Brief.vue'
 import DailyHourBillChart from '@/views/dashboard/DailyHourBillChart.vue'
 import ServiceIncomeChart from '@/views/dashboard/ServiceIncomeChart.vue'
+import DailyBillAmountChart from '@/views/dashboard/DailyBillAmountChart.vue'
 
 export default {
   name: 'AdminIndex',
-  components: { ServiceIncomeChart, DailyHourBillChart, Brief, BalancePeriodReport, DailyProfitReport, TodoList, DailyBillReport }
+  components: { DailyBillAmountChart, ServiceIncomeChart, DailyHourBillChart, Brief, BalancePeriodReport, DailyProfitReport, TodoList, DailyBillReport }
 }
 </script>