|  | @@ -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>
 | 
	
		
			
				|  |  | +
 |