|
|
@@ -1,25 +1,44 @@
|
|
|
<template>
|
|
|
- <widget-card :bodyStyle="bodyStyle">
|
|
|
+ <widget-card :bodyStyle="bodyStyle" ref="container">
|
|
|
<template #header>
|
|
|
- <div class="header">
|
|
|
+ <div class="header" ref="top">
|
|
|
<span>流水明细</span>
|
|
|
-<!-- <el-select-->
|
|
|
-<!-- style="width: 120px;"-->
|
|
|
-<!-- size="mini"-->
|
|
|
-<!-- v-model="value"-->
|
|
|
-<!-- @change="changeSelect"-->
|
|
|
-<!-- placeholder="请选择"-->
|
|
|
-<!-- >-->
|
|
|
-<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">-->
|
|
|
-<!-- </el-option>-->
|
|
|
-<!-- </el-select>-->
|
|
|
+ <!-- <el-select-->
|
|
|
+ <!-- style="width: 120px;"-->
|
|
|
+ <!-- size="mini"-->
|
|
|
+ <!-- v-model="value"-->
|
|
|
+ <!-- @change="changeSelect"-->
|
|
|
+ <!-- placeholder="请选择"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">-->
|
|
|
+ <!-- </el-option>-->
|
|
|
+ <!-- </el-select>-->
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div class="box-content">
|
|
|
+ <!-- <div class="box-content">
|
|
|
<div class="box">
|
|
|
<div class="text1">手续费/充值/saas/版权/星图/提现/域名</div>
|
|
|
- <div class="text2">{{ order.serviceCharge }}元/{{ order.recharge }}元/{{ order.saas }}元/{{ order.royalties }}元/{{ order.photoAsset }}元/{{ order.withdraw }}元/{{ order.domainOrder }}元</div>
|
|
|
+ <div class="text2">
|
|
|
+ {{ order.serviceCharge }}元/{{ order.recharge }}元/{{ order.saas }}元/{{ order.royalties }}元/{{
|
|
|
+ order.photoAsset
|
|
|
+ }}元/{{ order.withdraw }}元/{{ order.domainOrder }}元
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="chart-box">
|
|
|
+ <div class="table">
|
|
|
+ <el-table :data="order" border style="width: 100%">
|
|
|
+ <el-table-column align="center" prop="domainOrder" label="元域名"> </el-table-column>
|
|
|
+ <el-table-column align="center" prop="photoAsset" label="星图"> </el-table-column>
|
|
|
+ <el-table-column align="center" prop="auction" label="易拍"> </el-table-column>
|
|
|
+ <el-table-column align="center" prop="saas" label="saas"> </el-table-column>
|
|
|
+ <el-table-column align="center" prop="serviceCharge" label="技术服务费"> </el-table-column>
|
|
|
+ <el-table-column align="center" prop="royalties" label="版权费"> </el-table-column>
|
|
|
+ <el-table-column align="center" prop="recharge" label="充值"> </el-table-column>
|
|
|
+ <el-table-column align="center" prop="withdraw" label="提现"> </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <canvas ref="chart" class="chart"></canvas>
|
|
|
</div>
|
|
|
</widget-card>
|
|
|
</template>
|
|
|
@@ -28,24 +47,20 @@ import WidgetCard from './WidgetCard';
|
|
|
import acc from '../mixins/acc';
|
|
|
|
|
|
export default {
|
|
|
- created() {
|
|
|
- this.getPriceInfo();
|
|
|
- // this.value = 'today';
|
|
|
- // this.changeSelect();
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
+ myChart: null,
|
|
|
bodyStyle: {
|
|
|
overflow: 'auto'
|
|
|
},
|
|
|
value: '',
|
|
|
priceInfo: {},
|
|
|
options: [
|
|
|
- {label: 'today', value: 'today'},
|
|
|
- {label: 'last', value: 'last'},
|
|
|
- {label: 'yesterday', value: 'yesterday'},
|
|
|
+ { label: 'today', value: 'today' },
|
|
|
+ { label: 'last', value: 'last' },
|
|
|
+ { label: 'yesterday', value: 'yesterday' }
|
|
|
],
|
|
|
- order: {}
|
|
|
+ order: []
|
|
|
};
|
|
|
},
|
|
|
mixins: [acc],
|
|
|
@@ -53,16 +68,50 @@ export default {
|
|
|
WidgetCard
|
|
|
},
|
|
|
mounted() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.chart.width = this.$refs.container.$el.offsetWidth - 20;
|
|
|
+ this.$refs.chart.height = this.$refs.container.$el.offsetHeight - this.$refs.top.offsetHeight - 420;
|
|
|
+ this.init();
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
// this.changeSelect();
|
|
|
},
|
|
|
methods: {
|
|
|
- getPriceInfo() {
|
|
|
- this.$http
|
|
|
- .get('/statistic/statisticDetail')
|
|
|
- .then(res => {
|
|
|
- this.order = res.today;
|
|
|
+ init() {
|
|
|
+ this.$http.get('/statistic/statisticDetail').then(res => {
|
|
|
+ this.order = [{ ...res.today, auction: 0 }];
|
|
|
+ this.myChart = new Chart(this.$refs.chart.getContext('2d'), {
|
|
|
+ type: 'bar',
|
|
|
+ data: {
|
|
|
+ labels: ['元域名', '星图', '易拍', 'saas', '技术服务费', '版权费', '充值', '提现'],
|
|
|
+ datasets: [
|
|
|
+ {
|
|
|
+ label: '流水(元)',
|
|
|
+ borderColor: '#409EFF',
|
|
|
+ backgroundColor: '#409EFF',
|
|
|
+ data: [
|
|
|
+ this.order[0].domainOrder,
|
|
|
+ this.order[0].photoAsset,
|
|
|
+ 0,
|
|
|
+ this.order[0].saas,
|
|
|
+ this.order[0].serviceCharge,
|
|
|
+ this.order[0].royalties,
|
|
|
+ this.order[0].recharge,
|
|
|
+ this.order[0].withdraw
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ title: { text: '今日流水明细', display: true },
|
|
|
+ legend: { display: false },
|
|
|
+ responsive: true,
|
|
|
+ maintainAspectRatio: false
|
|
|
+ }
|
|
|
});
|
|
|
- },
|
|
|
+ });
|
|
|
+ }
|
|
|
// changeSelect() {
|
|
|
// this.order = this.priceInfo.today;
|
|
|
// }
|
|
|
@@ -129,4 +178,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.table {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
</style>
|