diff --git a/src/api/system/dashboard.js b/src/api/system/dashboard.js
index f28a5f0..ebab240 100644
--- a/src/api/system/dashboard.js
+++ b/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
+ })
+}
diff --git a/src/utils/constants.js b/src/utils/constants.js
index ea989ba..d6eb5af 100644
--- a/src/utils/constants.js
+++ b/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", // 提现
+}
diff --git a/src/views/dashboard/DailyBillAmountChart.vue b/src/views/dashboard/DailyBillAmountChart.vue
new file mode 100644
index 0000000..d550c16
--- /dev/null
+++ b/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>
diff --git a/src/views/dashboard/DailyBillAmountReport.vue b/src/views/dashboard/DailyBillAmountReport.vue
new file mode 100644
index 0000000..b639539
--- /dev/null
+++ b/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>
diff --git a/src/views/ss/index/index.vue b/src/views/ss/index/index.vue
index e6381b5..1d52eeb 100644
--- a/src/views/ss/index/index.vue
+++ b/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>