|
@@ -1,27 +1,56 @@
|
|
|
<template>
|
|
|
- <el-card >
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <div class="box">
|
|
|
- <span class='shape'></span>
|
|
|
- <span>运营数据</span>
|
|
|
- </div>
|
|
|
-
|
|
|
+ <el-card>
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <div class="box">
|
|
|
+ <span class="shape"></span>
|
|
|
+ <span>运营数据</span>
|
|
|
</div>
|
|
|
- <div class="wall" style="height:68px;" v-if="JSON.stringify(items) == '{}'">
|
|
|
- 暂无数据
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="wall" style="height: 68px" v-if="JSON.stringify(items) == '{}'">
|
|
|
+ 暂无数据
|
|
|
+ </div>
|
|
|
<statistic class="statistic" :cols="0">
|
|
|
- <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
|
|
|
+ <statistic-item
|
|
|
+ v-for="(item, key) in items"
|
|
|
+ :key="key"
|
|
|
+ :class="{ active: active === key }"
|
|
|
+ @click="active = key"
|
|
|
+ >
|
|
|
<span>
|
|
|
- {{item.title+"(个)"}}
|
|
|
- <el-tooltip v-if="item.desc" :content="item.desc" :open-delay=".3" placement="top">
|
|
|
- <i style="margin-left: 5px;cursor: pointer;" class="el-icon-warning-outline"/>
|
|
|
+ {{ item.title + "(个)" }}
|
|
|
+ <el-tooltip
|
|
|
+ v-if="item.desc"
|
|
|
+ :content="item.desc"
|
|
|
+ :open-delay="0.3"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ style="margin-left: 5px; cursor: pointer"
|
|
|
+ class="el-icon-warning-outline"
|
|
|
+ />
|
|
|
</el-tooltip>
|
|
|
</span>
|
|
|
<span>
|
|
|
- <count-to :endVal="item.percent"/>
|
|
|
+ <count-to :endVal="item.percent" />
|
|
|
</span>
|
|
|
</statistic-item>
|
|
|
+ <statistic-item v-if="data['TRANSACTION_TEACHER_NUM']">
|
|
|
+ <span>
|
|
|
+ {{ data["TRANSACTION_TEACHER_NUM"].title + "(人)" }}
|
|
|
+ <el-tooltip
|
|
|
+ v-if="data['TRANSACTION_TEACHER_NUM'].desc"
|
|
|
+ :content="data['TRANSACTION_TEACHER_NUM'].desc"
|
|
|
+ :open-delay="0.3"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ style="margin-left: 5px; cursor: pointer"
|
|
|
+ class="el-icon-warning-outline"
|
|
|
+ />
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ <span> <count-to :endVal="data['TRANSACTION_TEACHER_NUM'].percent" /></span>
|
|
|
+ </statistic-item>
|
|
|
</statistic>
|
|
|
<!-- <ve-histogram
|
|
|
style="width: 100%;"
|
|
@@ -34,90 +63,93 @@
|
|
|
</el-card>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import 'echarts/lib/component/dataZoom'
|
|
|
-import countTo from 'vue-count-to'
|
|
|
-import veHistogram from 'v-charts/lib/histogram.common'
|
|
|
+import "echarts/lib/component/dataZoom";
|
|
|
+import countTo from "vue-count-to";
|
|
|
+import veHistogram from "v-charts/lib/histogram.common";
|
|
|
export default {
|
|
|
- props: ['data'],
|
|
|
+ props: ["data"],
|
|
|
components: {
|
|
|
- 've-histogram': veHistogram,
|
|
|
- 'count-to': countTo
|
|
|
+ "ve-histogram": veHistogram,
|
|
|
+ "count-to": countTo,
|
|
|
},
|
|
|
computed: {
|
|
|
items() {
|
|
|
- let obj = {}
|
|
|
- let arr = ["SCHOOL","PROGRESS_MUSIC_GROUP_NUM"]
|
|
|
- arr.forEach(str=>{
|
|
|
- if(this.data[str]){
|
|
|
- obj[str]=this.data[str]
|
|
|
+ let obj = {};
|
|
|
+ let arr = [
|
|
|
+ "SCHOOL",
|
|
|
+ "PROGRESS_MUSIC_GROUP_NUM",
|
|
|
+ ];
|
|
|
+ arr.forEach((str) => {
|
|
|
+ if (this.data[str]) {
|
|
|
+ obj[str] = this.data[str];
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
/**
|
|
|
* {
|
|
|
SCHOOL: this.data['SCHOOL'] || {},
|
|
|
PROGRESS_MUSIC_GROUP_NUM: this.data['PROGRESS_MUSIC_GROUP_NUM'] || {},
|
|
|
}
|
|
|
*/
|
|
|
- return obj
|
|
|
+ return obj;
|
|
|
},
|
|
|
chartExtend() {
|
|
|
return {
|
|
|
tooltip: {
|
|
|
axisPointer: {
|
|
|
- type: 'shadow',
|
|
|
+ type: "shadow",
|
|
|
shadowStyle: {
|
|
|
- color: 'rgba(150,150,150,0.2)'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ color: "rgba(150,150,150,0.2)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
dataZoom() {
|
|
|
return [
|
|
|
{
|
|
|
- type: 'slider',
|
|
|
+ type: "slider",
|
|
|
start: 60,
|
|
|
- end: 100
|
|
|
- }
|
|
|
- ]
|
|
|
+ end: 100,
|
|
|
+ },
|
|
|
+ ];
|
|
|
},
|
|
|
chartData() {
|
|
|
- const values = Object.values(this.items)
|
|
|
- const months = {}
|
|
|
+ const values = Object.values(this.items);
|
|
|
+ const months = {};
|
|
|
for (const item of values) {
|
|
|
- for (const row of (item.indexMonthData || [])) {
|
|
|
- const key = this.$helpers.dayjs(row.month).format('YYYY-MM-DD')
|
|
|
+ for (const row of item.indexMonthData || []) {
|
|
|
+ const key = this.$helpers.dayjs(row.month).format("YYYY-MM-DD");
|
|
|
if (!months[key]) {
|
|
|
months[key] = {
|
|
|
- '日期': key,
|
|
|
- }
|
|
|
+ 日期: key,
|
|
|
+ };
|
|
|
}
|
|
|
- months[key][item.title] = row.percent
|
|
|
+ months[key][item.title] = row.percent;
|
|
|
}
|
|
|
}
|
|
|
return {
|
|
|
- columns: ['日期', ...values.map(item => item.title)],
|
|
|
- rows: Object.values(months)
|
|
|
- }
|
|
|
+ columns: ["日期", ...values.map((item) => item.title)],
|
|
|
+ rows: Object.values(months),
|
|
|
+ };
|
|
|
},
|
|
|
dataEmpty() {
|
|
|
- return !this.chartData.rows.length
|
|
|
+ return !this.chartData.rows.length;
|
|
|
},
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
- active: 'SCHOOL',
|
|
|
- }
|
|
|
+ active: "SCHOOL",
|
|
|
+ };
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- // .statistic{
|
|
|
- // /deep/ .statistic-content{
|
|
|
- // cursor: pointer;
|
|
|
- // &.active > span{
|
|
|
- // color: #14928a !important;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
+// .statistic{
|
|
|
+// /deep/ .statistic-content{
|
|
|
+// cursor: pointer;
|
|
|
+// &.active > span{
|
|
|
+// color: #14928a !important;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
</style>
|