|
@@ -1,34 +1,10 @@
|
|
|
<template>
|
|
|
<el-card header="经营数据">
|
|
|
- <statistic class="statistic" :cols="0" :col="5">
|
|
|
- <statistic-item>
|
|
|
- <span>应收金额</span>
|
|
|
+ <statistic class="statistic" :cols="0">
|
|
|
+ <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
|
|
|
+ <span>{{item.title}}</span>
|
|
|
<span>
|
|
|
- <count-to :endVal="5604"/>
|
|
|
- </span>
|
|
|
- </statistic-item>
|
|
|
- <statistic-item>
|
|
|
- <span>预收金额</span>
|
|
|
- <span>
|
|
|
- <count-to :endVal="6256"/>
|
|
|
- </span>
|
|
|
- </statistic-item>
|
|
|
- <statistic-item>
|
|
|
- <span>预付金额</span>
|
|
|
- <span>
|
|
|
- <count-to :endVal="6203"/>
|
|
|
- </span>
|
|
|
- </statistic-item>
|
|
|
- <statistic-item>
|
|
|
- <span>应付金额</span>
|
|
|
- <span>
|
|
|
- <count-to :endVal="21642"/>
|
|
|
- </span>
|
|
|
- </statistic-item>
|
|
|
- <statistic-item>
|
|
|
- <span>营收金额</span>
|
|
|
- <span>
|
|
|
- <count-to :endVal="41642"/>
|
|
|
+ <count-to :endVal="item.percent"/>
|
|
|
</span>
|
|
|
</statistic-item>
|
|
|
</statistic>
|
|
@@ -39,24 +15,33 @@
|
|
|
import countTo from 'vue-count-to'
|
|
|
import veLine from 'v-charts/lib/line.common'
|
|
|
export default {
|
|
|
+ props: ['data'],
|
|
|
components: {
|
|
|
've-line': veLine,
|
|
|
'count-to': countTo
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ items() {
|
|
|
+ return {
|
|
|
+ SHOULD_INCOME_MONEY: this.data['SHOULD_INCOME_MONEY'] || {},
|
|
|
+ MUSIC_GROUP_NUM: this.data['MUSIC_GROUP_NUM'] || {},
|
|
|
+ MUSIC_GROUP_STUDENT: this.data['MUSIC_GROUP_STUDENT'] || {},
|
|
|
+ OTHER_STUDENT: this.data['OTHER_STUDENT'] || {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ chartData() {
|
|
|
+ const data = this.data[this.active] || {}
|
|
|
+ return {
|
|
|
+ columns: ['月份', data.title],
|
|
|
+ rows: (data.indexMonthData || []).map(item => ({
|
|
|
+ '月份': this.$helpers.dayjs(item.month).month() + 1 + '月', [data.title]: item.activateNum,
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
data () {
|
|
|
- let data = []
|
|
|
return {
|
|
|
- chartData: {
|
|
|
- columns: ['日期', '访问用户', '下单用户', '下单率'],
|
|
|
- rows: [
|
|
|
- { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
|
|
- { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
|
|
- { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
|
|
- { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
|
|
- { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
|
|
- { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
|
|
- ]
|
|
|
- }
|
|
|
+ active: 'SHOULD_INCOME_MONEY',
|
|
|
}
|
|
|
},
|
|
|
}
|
|
@@ -65,6 +50,9 @@ export default {
|
|
|
.statistic{
|
|
|
/deep/ .statistic-content{
|
|
|
cursor: pointer;
|
|
|
+ &.active > span{
|
|
|
+ color: #14928a !important;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|