|
@@ -1,155 +1,155 @@
|
|
-<template>
|
|
|
|
- <div>
|
|
|
|
- <el-card>
|
|
|
|
- <div slot="header" class="clearfix">
|
|
|
|
- <searchHeader
|
|
|
|
- :dates="mdate"
|
|
|
|
- :title="'经营数据'"
|
|
|
|
- @changeValue="changeValue"
|
|
|
|
- :isShowQuert="false"
|
|
|
|
- :endDate="endDate"
|
|
|
|
- ref="searchHeader"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- <!-- <div
|
|
|
|
- class="wall"
|
|
|
|
- style="height: 68px"
|
|
|
|
- v-if="JSON.stringify(items) == '{}'&&!data['CHARGE_STUDENT_CHANGE_RATE']&&!data['ACTIVATION_RATE']"
|
|
|
|
- >
|
|
|
|
- 暂无数据
|
|
|
|
- </div> -->
|
|
|
|
- <statistic :col="5" class="statistic" :cols="0">
|
|
|
|
- <statistic-item
|
|
|
|
- v-for="(item, key) in items"
|
|
|
|
- :key="key"
|
|
|
|
- :class="{ active: active === key }"
|
|
|
|
- @click="active = key"
|
|
|
|
- >
|
|
|
|
- <span>
|
|
|
|
- {{ item.text }}
|
|
|
|
- </span>
|
|
|
|
- <span> <count-to :endVal="item.value" /> </span>
|
|
|
|
- </statistic-item>
|
|
|
|
- </statistic>
|
|
|
|
- </el-card>
|
|
|
|
- </div>
|
|
|
|
-</template>
|
|
|
|
-<script>
|
|
|
|
-import countTo from "vue-count-to";
|
|
|
|
-import searchHeader from "@/views/main/baseinfo/modals/searchHeader";
|
|
|
|
-import { studentSmallClassStatisticsSumForDate } from '../api';
|
|
|
|
-import { getTimes } from "@/utils";
|
|
|
|
-export default {
|
|
|
|
- props: ["groupType"],
|
|
|
|
- components: {
|
|
|
|
- "count-to": countTo,
|
|
|
|
- searchHeader
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- active: "",
|
|
|
|
- loading: false,
|
|
|
|
- mdate: [],
|
|
|
|
- endDate: '',
|
|
|
|
- data: {},
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- dataEmpty() {
|
|
|
|
- return !this.chartData.rows.length;
|
|
|
|
- },
|
|
|
|
- items() {
|
|
|
|
- let tempArr = [{
|
|
|
|
- text: '流失人数',
|
|
|
|
- value: 0,
|
|
|
|
- id: 'lostNum'
|
|
|
|
- }, {
|
|
|
|
- text: '新增人数',
|
|
|
|
- value: 0,
|
|
|
|
- id: 'addNum'
|
|
|
|
- }, {
|
|
|
|
- text: '续费人数',
|
|
|
|
- value: 0,
|
|
|
|
- id: 'renewNum'
|
|
|
|
- }, {
|
|
|
|
- text: '回访人数',
|
|
|
|
- value: 0,
|
|
|
|
- id: 'visitNum'
|
|
|
|
- }]
|
|
|
|
- tempArr.forEach(item => {
|
|
|
|
- if(this.data[item.id]) {
|
|
|
|
- item.value = this.data[item.id]
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- return tempArr
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- this.init()
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- init() {
|
|
|
|
- let startTime = this.$helpers
|
|
|
|
- .dayjs(new Date())
|
|
|
|
- .set("date", 1)
|
|
|
|
- .format("YYYY-MM-DD");
|
|
|
|
- let endTime = this.$helpers
|
|
|
|
- .dayjs(new Date())
|
|
|
|
- .subtract(1, "day")
|
|
|
|
- .format("YYYY-MM-DD");
|
|
|
|
- this.mdate = [startTime, endTime];
|
|
|
|
- this.FetchDetail();
|
|
|
|
- },
|
|
|
|
- getInitDate() {
|
|
|
|
- const end = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
|
- const start = this.$helpers
|
|
|
|
- .dayjs(new Date())
|
|
|
|
- .set("date", 1)
|
|
|
|
- .format("YYYY-MM-DD");
|
|
|
|
- return [start, end];
|
|
|
|
- },
|
|
|
|
- changeValue(date) {
|
|
|
|
- // 请求更改数据
|
|
|
|
- this.mdate = date;
|
|
|
|
- this.FetchDetail();
|
|
|
|
- },
|
|
|
|
- async FetchDetail() {
|
|
|
|
- this.loading = true;
|
|
|
|
- try {
|
|
|
|
- const res = await studentSmallClassStatisticsSumForDate({
|
|
|
|
- groupType: this.groupType,
|
|
|
|
- ...getTimes(this.mdate, ["startDate", "endDate"]),
|
|
|
|
- });
|
|
|
|
- this.data = res.data || {};
|
|
|
|
- } catch (error) {
|
|
|
|
- console.log(error);
|
|
|
|
- }
|
|
|
|
- this.loading = false;
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-};
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
-/deep/ .el-card__body .statistic {
|
|
|
|
- margin-bottom: 15px;
|
|
|
|
- padding: 0;
|
|
|
|
- }
|
|
|
|
-/deep/.el-card__header {
|
|
|
|
- padding: 0 20px!important;
|
|
|
|
-}
|
|
|
|
-.box {
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: row;
|
|
|
|
- align-items: center;
|
|
|
|
- height: 55px;
|
|
|
|
- line-height: 55px;
|
|
|
|
- .shape {
|
|
|
|
- margin-right: 10px;
|
|
|
|
- height: 18px;
|
|
|
|
- width: 4px;
|
|
|
|
- background-color: var(--color-primary);
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|
|
-
|
|
|
|
|
|
+<template>
|
|
|
|
+ <div>
|
|
|
|
+ <el-card>
|
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
|
+ <searchHeader
|
|
|
|
+ :dates="mdate"
|
|
|
|
+ :title="'经营数据'"
|
|
|
|
+ @changeValue="changeValue"
|
|
|
|
+ :isShowQuert="false"
|
|
|
|
+ :endDate="endDate"
|
|
|
|
+ ref="searchHeader"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <div
|
|
|
|
+ class="wall"
|
|
|
|
+ style="height: 68px"
|
|
|
|
+ v-if="JSON.stringify(items) == '{}'&&!data['CHARGE_STUDENT_CHANGE_RATE']&&!data['ACTIVATION_RATE']"
|
|
|
|
+ >
|
|
|
|
+ 暂无数据
|
|
|
|
+ </div> -->
|
|
|
|
+ <statistic :col="5" class="statistic" :cols="0">
|
|
|
|
+ <statistic-item
|
|
|
|
+ v-for="(item, key) in items"
|
|
|
|
+ :key="key"
|
|
|
|
+ :class="{ active: active === key }"
|
|
|
|
+ @click="active = key"
|
|
|
|
+ >
|
|
|
|
+ <span>
|
|
|
|
+ {{ item.text }}
|
|
|
|
+ </span>
|
|
|
|
+ <span> <count-to :endVal="item.value" /> </span>
|
|
|
|
+ </statistic-item>
|
|
|
|
+ </statistic>
|
|
|
|
+ </el-card>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+import countTo from "vue-count-to";
|
|
|
|
+import searchHeader from "@/views/main/baseinfo/modals/searchHeader";
|
|
|
|
+import { studentSmallClassStatisticsSumForDate } from '../api';
|
|
|
|
+import { getTimes } from "@/utils";
|
|
|
|
+export default {
|
|
|
|
+ props: ["groupType"],
|
|
|
|
+ components: {
|
|
|
|
+ "count-to": countTo,
|
|
|
|
+ searchHeader
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ active: "",
|
|
|
|
+ loading: false,
|
|
|
|
+ mdate: [],
|
|
|
|
+ endDate: '',
|
|
|
|
+ data: {},
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ dataEmpty() {
|
|
|
|
+ return !this.chartData.rows.length;
|
|
|
|
+ },
|
|
|
|
+ items() {
|
|
|
|
+ let tempArr = [{
|
|
|
|
+ text: '回访流失人数',
|
|
|
|
+ value: 0,
|
|
|
|
+ id: 'lostNum'
|
|
|
|
+ }, {
|
|
|
|
+ text: '新增人数',
|
|
|
|
+ value: 0,
|
|
|
|
+ id: 'addNum'
|
|
|
|
+ }, {
|
|
|
|
+ text: '续费人数',
|
|
|
|
+ value: 0,
|
|
|
|
+ id: 'renewNum'
|
|
|
|
+ }, {
|
|
|
|
+ text: '回访人数',
|
|
|
|
+ value: 0,
|
|
|
|
+ id: 'visitNum'
|
|
|
|
+ }]
|
|
|
|
+ tempArr.forEach(item => {
|
|
|
|
+ if(this.data[item.id]) {
|
|
|
|
+ item.value = this.data[item.id]
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ return tempArr
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.init()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ init() {
|
|
|
|
+ let startTime = this.$helpers
|
|
|
|
+ .dayjs(new Date())
|
|
|
|
+ .set("date", 1)
|
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
|
+ let endTime = this.$helpers
|
|
|
|
+ .dayjs(new Date())
|
|
|
|
+ .subtract(1, "day")
|
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
|
+ this.mdate = [startTime, endTime];
|
|
|
|
+ this.FetchDetail();
|
|
|
|
+ },
|
|
|
|
+ getInitDate() {
|
|
|
|
+ const end = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
|
+ const start = this.$helpers
|
|
|
|
+ .dayjs(new Date())
|
|
|
|
+ .set("date", 1)
|
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
|
+ return [start, end];
|
|
|
|
+ },
|
|
|
|
+ changeValue(date) {
|
|
|
|
+ // 请求更改数据
|
|
|
|
+ this.mdate = date;
|
|
|
|
+ this.FetchDetail();
|
|
|
|
+ },
|
|
|
|
+ async FetchDetail() {
|
|
|
|
+ this.loading = true;
|
|
|
|
+ try {
|
|
|
|
+ const res = await studentSmallClassStatisticsSumForDate({
|
|
|
|
+ groupType: this.groupType,
|
|
|
|
+ ...getTimes(this.mdate, ["startDate", "endDate"]),
|
|
|
|
+ });
|
|
|
|
+ this.data = res.data || {};
|
|
|
|
+ } catch (error) {
|
|
|
|
+ console.log(error);
|
|
|
|
+ }
|
|
|
|
+ this.loading = false;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+/deep/ .el-card__body .statistic {
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+ padding: 0;
|
|
|
|
+ }
|
|
|
|
+/deep/.el-card__header {
|
|
|
|
+ padding: 0 20px!important;
|
|
|
|
+}
|
|
|
|
+.box {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ align-items: center;
|
|
|
|
+ height: 55px;
|
|
|
|
+ line-height: 55px;
|
|
|
|
+ .shape {
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ height: 18px;
|
|
|
|
+ width: 4px;
|
|
|
|
+ background-color: var(--color-primary);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+
|