|
|
@@ -0,0 +1,340 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-card>
|
|
|
+ <headers title="活跃用户统计" />
|
|
|
+ <div class="chioseBox">
|
|
|
+ <el-radio-group v-model="timers" size="mini" @change="changeQuick">
|
|
|
+ <el-radio-button label="month">本月</el-radio-button>
|
|
|
+ <el-radio-button label="year">本年度</el-radio-button>
|
|
|
+ <el-radio-button label="lastYear">去年</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="date"
|
|
|
+ type="daterange"
|
|
|
+ style="width: 300px; padding: 0 10px"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ size="mini"
|
|
|
+ @change="changeValue"
|
|
|
+ :picker-options="bigin()"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ 单位:
|
|
|
+ <el-radio-group v-model="timer" size="mini">
|
|
|
+ <el-radio-button label="day">按天</el-radio-button>
|
|
|
+ <el-radio-button label="month">按月</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <ve-line
|
|
|
+ style="width: 100%"
|
|
|
+ height="350px"
|
|
|
+ :data="timer == 'day' ? chartData : chartDataForMoth"
|
|
|
+ :data-empty="dataEmpty"
|
|
|
+ :extend="chartExtend"
|
|
|
+ :legend="legend"
|
|
|
+ ></ve-line>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import "v-charts/lib/style.css";
|
|
|
+import "echarts/lib/component/dataZoom";
|
|
|
+import headers from "./modals/headers.vue";
|
|
|
+import veLine from "v-charts/lib/line.common";
|
|
|
+import { getNowDateAndSunday, getNowDateAndMonday } from "@/utils/date";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ headers,
|
|
|
+ veLine,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ timer: "", // 按天 按月
|
|
|
+ timers: "", // 本月 本年 去年
|
|
|
+ date: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ legend() {
|
|
|
+ return {
|
|
|
+ left: "10px",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ items() {
|
|
|
+ let obj = {};
|
|
|
+ // let arr = [
|
|
|
+ // "HOMEWORK_CREATE_RATE",
|
|
|
+ // "HOMEWORK_SUBMIT_RATE",
|
|
|
+ // "HOMEWORK_COMMENT_RATE",
|
|
|
+ // ];
|
|
|
+ // arr.forEach((str) => {
|
|
|
+ // if (this.data[str]) {
|
|
|
+ // obj[str] = this.data[str];
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ /**
|
|
|
+ * {
|
|
|
+ HOMEWORK_CREATE_RATE:this.data["HOMEWORK_CREATE_RATE"] || {},
|
|
|
+ HOMEWORK_SUBMIT_RATE: this.data["HOMEWORK_SUBMIT_RATE"] || {},
|
|
|
+ HOMEWORK_COMMENT_RATE: this.data["HOMEWORK_COMMENT_RATE"] || {},
|
|
|
+ };
|
|
|
+ */
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ chartExtend() {
|
|
|
+ return {
|
|
|
+ series: {
|
|
|
+ type: "line",
|
|
|
+ smooth: false,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ //纵轴标尺固定
|
|
|
+ minInterval: 1,
|
|
|
+ type: "value",
|
|
|
+ scale: true,
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}%",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ shadowStyle: {
|
|
|
+ color: "rgba(150,150,150,0.2)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ formatter: (item) => {
|
|
|
+ return [
|
|
|
+ item[0].axisValueLabel,
|
|
|
+ ...item.map(
|
|
|
+ (d) => `<br/>${d.marker}${d.seriesName}: ${d.value[1]} %`
|
|
|
+ ),
|
|
|
+ ].join("");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ dataZoom() {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ grid: {
|
|
|
+ left: "0%",
|
|
|
+ },
|
|
|
+ type: "slider",
|
|
|
+ start: 40,
|
|
|
+ end: 100,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ chartData() {
|
|
|
+ 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");
|
|
|
+ if (!months[key]) {
|
|
|
+ months[key] = {
|
|
|
+ 日期: key + "/" + getNowDateAndSunday(key),
|
|
|
+ };
|
|
|
+ }
|
|
|
+ months[key][item.title] = row.percent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ columns: [
|
|
|
+ "日期",
|
|
|
+ ...values.map((item) => {
|
|
|
+ return item.title;
|
|
|
+ }),
|
|
|
+ ],
|
|
|
+ rows: Object.values(months),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ chartDataForMoth() {
|
|
|
+ const values = Object.values({ ...this.items, ...this.items2 });
|
|
|
+ const months = {};
|
|
|
+ for (const item of values) {
|
|
|
+ for (const row of item.indexMonthData || []) {
|
|
|
+ const key = this.$helpers.dayjs(row.month).format("YYYY-MM");
|
|
|
+
|
|
|
+ if (!months[key]) {
|
|
|
+ months[key] = {
|
|
|
+ 月份: key,
|
|
|
+ };
|
|
|
+ months[key][item.title] = row.percent;
|
|
|
+ } else {
|
|
|
+ if (months[key][item.title]) {
|
|
|
+ months[key][item.title] = (
|
|
|
+ parseFloat(months[key][item.title]) + parseFloat(row.percent)
|
|
|
+ ).toFixed(2);
|
|
|
+ } else {
|
|
|
+ months[key][item.title] = parseFloat(row.percent).toFixed(2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ columns: [
|
|
|
+ "月份",
|
|
|
+ "总收入",
|
|
|
+ "现金收入",
|
|
|
+ "余额收入",
|
|
|
+ "财务支出",
|
|
|
+ "报名缴费收入",
|
|
|
+ "网管课收入",
|
|
|
+ "其他收入",
|
|
|
+ "乐团续费收入",
|
|
|
+ "VIP课收入",
|
|
|
+ ],
|
|
|
+ rows: Object.values(months),
|
|
|
+ loading: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ dataEmpty() {
|
|
|
+ return !this.chartData.rows.length;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ let nowTiem = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
+ let startTime = this.$helpers
|
|
|
+ .dayjs(getNowDateAndMonday(nowTiem))
|
|
|
+ .subtract(49, "day")
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
+ let endTime = getNowDateAndSunday(nowTiem);
|
|
|
+ this.mdate = [startTime, endTime];
|
|
|
+ this.FetchDetail();
|
|
|
+ },
|
|
|
+ changeValue(date) {
|
|
|
+ // 请求更改数据
|
|
|
+ this.mdate = date;
|
|
|
+ // this.isDayOrMoth(date)
|
|
|
+ this.FetchDetail();
|
|
|
+ },
|
|
|
+ async FetchDetail() {
|
|
|
+ this.loading = true;
|
|
|
+ let data = [];
|
|
|
+ try {
|
|
|
+ // const { dates, ...rest } = this.search;
|
|
|
+ // const res = await getIndex({
|
|
|
+ // ...rest,
|
|
|
+ // ...getTimes(this.mdate, ["startDate", "endDate"]),
|
|
|
+ // dataTypes:
|
|
|
+ // "HOMEWORK_CREATE_RATE,HOMEWORK_SUBMIT_RATE,HOMEWORK_COMMENT_RATE",
|
|
|
+ // });
|
|
|
+ // for (const item of res.data) {
|
|
|
+ // // 再循环一遍
|
|
|
+ // for (const key in this.items) {
|
|
|
+ // if (item.dataType == key) {
|
|
|
+ // data[item.dataType] = {
|
|
|
+ // ...item,
|
|
|
+ // desc: descs[item.dataType],
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ // this.dataInfo = data;
|
|
|
+ // this.$emit("resetDate", data);
|
|
|
+ },
|
|
|
+ changeQuick(val) {
|
|
|
+ let startDate;
|
|
|
+ let endDate;
|
|
|
+ if (val == "month") {
|
|
|
+ // 获取本月的第一天 获取本月的今天
|
|
|
+ startDate = this.$helpers
|
|
|
+ .dayjs(new Date())
|
|
|
+ .set("date", 1)
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
+ this.endDate
|
|
|
+ ? (endDate = this.endDate)
|
|
|
+ : (endDate = this.$helpers
|
|
|
+ .dayjs(new Date())
|
|
|
+ .subtract(1, "day")
|
|
|
+ .format("YYYY-MM-DD"));
|
|
|
+ this.date = [startDate, endDate];
|
|
|
+ // this.submitDate(this.date);
|
|
|
+ } else if (val == "year") {
|
|
|
+ startDate = this.$helpers
|
|
|
+ .dayjs(new Date())
|
|
|
+ .set("month", 0)
|
|
|
+ .set("date", 1)
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
+ this.endDate
|
|
|
+ ? (endDate = this.endDate)
|
|
|
+ : (endDate = this.$helpers
|
|
|
+ .dayjs(new Date())
|
|
|
+ .subtract(1, "day")
|
|
|
+ .format("YYYY-MM-DD"));
|
|
|
+ this.date = [startDate, endDate];
|
|
|
+ // this.submitDate(this.date);
|
|
|
+ } else if (val == "lastYear") {
|
|
|
+ startDate = this.$helpers
|
|
|
+ .dayjs(new Date())
|
|
|
+ .subtract(1, "year")
|
|
|
+ .set("month", 0)
|
|
|
+ .set("date", 1)
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
+ endDate = this.$helpers
|
|
|
+ .dayjs()
|
|
|
+ .subtract(1, "year")
|
|
|
+ .endOf("year")
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
+ this.date = [startDate, endDate];
|
|
|
+ // this.submitDate(this.date);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeValue(val) {
|
|
|
+ this.timer = "";
|
|
|
+ this.date = val;
|
|
|
+ // this.submitDate(this.date);
|
|
|
+ },
|
|
|
+ bigin() {
|
|
|
+ let self = this;
|
|
|
+ return {
|
|
|
+ firstDayOfWeek: 1,
|
|
|
+ disabledDate(time) {
|
|
|
+ if (self.endDate) {
|
|
|
+ let endTime = self.$helpers.dayjs(self.endDate).valueOf();
|
|
|
+ return time.getTime() > endTime;
|
|
|
+ } else {
|
|
|
+ return time.getTime() >= Date.now() - 24 * 60 * 60 * 1000;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/deep/.el-card__body {
|
|
|
+ padding-top: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.chioseBox {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ z-index: 1000;
|
|
|
+}
|
|
|
+.wrap {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.chioseBox {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ z-index: 1000;
|
|
|
+}
|
|
|
+</style>
|
mo