首页页面大概

1

src/views/main/cloudDate/activeUserNum.vue

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

src/views/main/cloudDate/index.vue

@@ -1,16 +1,22 @@
 <template>
   <div>
-    <allDate class="allDate" />
-    <organDate />
+    <allDate class="marginBottom20" />
+    <organDate class="marginBottom20"/>
+    <activeUserNum  class="marginBottom20" />
+    <organRanking />
   </div>
 </template>
 <script>
 import allDate from './allDate.vue'
 import organDate from './organDate.vue'
+import activeUserNum from './activeUserNum.vue'
+import organRanking from './organRanking.vue'
 export default {
   components:{
     allDate,
-    organDate
+    organDate,
+    activeUserNum,
+    organRanking
   },
   data(){
     return{
@@ -20,7 +26,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.allDate {
+.marginBottom20 {
   margin-bottom: 20px;
 }
 

src/views/main/cloudDate/organDate.vue

@@ -2,25 +2,162 @@
   <div>
     <el-card>
       <headers title="分部数据" :hidenOrgan="true" />
+      <div class="tableWrap">
+        <el-table
+          style="width: 100%"
+          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+          :data="tableList"
+        >
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="分部"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="学员总数"
+            sortable
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>学员总数</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">该分部需服务的学员总数</div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            sortable
+            align="center"
+            prop="studentId"
+            label="付费会员数"
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>付费会员数</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">该分部生效中、待生效付费会员总数</div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            sortable
+            align="center"
+            prop="studentId"
+            label="试用会员"
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>试用会员</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">该分部生效中试用会员总数</div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            sortable
+            align="center"
+            prop="studentId"
+            label="付费会员占比"
+          >
+                    <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>付费会员占比</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">该分部生效中、待生效付费会员占服务学员比例</div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="操作"
+          ></el-table-column>
+        </el-table>
+        <pagination
+          sync
+          :total.sync="rules.total"
+          :page.sync="rules.page"
+          :limit.sync="rules.limit"
+          :page-sizes="rules.page_size"
+          @pagination="getList"
+        />
+      </div>
     </el-card>
   </div>
 </template>
 <script>
 import headers from "./modals/headers.vue";
+import pagination from "@/components/Pagination/index";
 export default {
-  components:{
-    headers
+  components: {
+    headers,
+    pagination,
   },
   data() {
-
     return {
-
+      tableList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
     };
   },
+  mounted() {},
+  methods: {
+    getList() {},
+  },
 };
 </script>
 <style lang="scss" scoped>
 /deep/.el-card__body {
   padding-top: 0 !important;
 }
+.titleCell {
+  display: inline-block;
+}
 </style>

src/views/main/cloudDate/organRanking.vue

@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <el-card>
+      <headers title="分部排行" :hidenOrgan="true" />
+      <div class="wrap">
+        <div class="chioseBox">
+          <el-date-picker
+            v-model="date"
+            type="date"
+            value-format="yyyy-MM-dd"
+            format="yyyy-MM-dd"
+            @change="changeValue"
+            :picker-options="bigin()"
+          >
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="tableWrap">
+        <el-table
+          style="width: 100%"
+          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+          :data="tableList"
+        >
+          <el-table-column align="center" prop="studentId" label="排名">
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="分部"
+          ></el-table-column>
+
+          <template slot="header" slot-scope="slot">
+            <div class="titleCell">
+              <span>活跃用户</span>
+              <el-tooltip placement="top" popper-class="mTooltip">
+                <div slot="content">当日使用过云教练的用户数量(含试用)</div>
+                <i
+                  class="el-icon-question micon el-tooltip"
+                  style="
+                    font-size: 18px;
+                    color: #f56c6c;
+                    top: 2px;
+                    position: relative;
+                  "
+                ></i>
+              </el-tooltip>
+            </div>
+          </template>
+
+          <el-table-column
+            sortable
+            align="center"
+            prop="studentId"
+            label="付费会员数"
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>付费会员数</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">当日付费会员总数</div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            sortable
+            align="center"
+            prop="studentId"
+            label="试用会员"
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>试用会员数</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">当日试用会员总数</div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            sortable
+            align="center"
+            prop="studentId"
+            label="新增付费会员"
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>新增付费会员</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">当日新增付费会员数量</div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            sortable
+            align="center"
+            prop="studentId"
+            label="活跃度"
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>活跃度</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">
+                    当日使用过云教练的会员占比（生效中会员，含试用）
+                  </div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          sync
+          :total.sync="rules.total"
+          :page.sync="rules.page"
+          :limit.sync="rules.limit"
+          :page-sizes="rules.page_size"
+          @pagination="getList"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+import headers from "./modals/headers.vue";
+import pagination from "@/components/Pagination/index";
+export default {
+  components: {
+    headers,
+    pagination,
+  },
+  data() {
+    return {
+      tableList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+      date: "",
+    };
+  },
+  mounted() {},
+  methods: {
+    getList() {},
+    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;
+          }
+        },
+      };
+    },
+    changeValue(val) {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/.el-card__body {
+  padding-top: 0 !important;
+}
+.titleCell {
+  display: inline-block;
+}
+.chioseBox {
+display: flex;
+flex-direction: row;
+align-items: center;
+justify-content: flex-end;
+margin-bottom: 20px;
+}
+.wrap {
+  position: relative;
+}
+</style>
+