|
@@ -1,7 +1,45 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
+ <el-card style="margin-bottom: 20px">
|
|
|
+ <headers title="数据总览" @changeOrgan="changeOrgan" :special="true"/>
|
|
|
+ <div
|
|
|
+ class="wall"
|
|
|
+ style="height: 68px"
|
|
|
+ v-if="JSON.stringify(items) == '{}'"
|
|
|
+ >
|
|
|
+ 暂无数据
|
|
|
+ </div>
|
|
|
+ <!--
|
|
|
+ -->
|
|
|
+ <statistic :col="4" class="statistic" :cols="0">
|
|
|
+ <statistic-item
|
|
|
+ v-for="(item, key) in items"
|
|
|
+ :key="key"
|
|
|
+ @click="active = key"
|
|
|
+ :class="{ active: active === key }"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ {{ 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 || 0" /> </span>
|
|
|
+ </statistic-item>
|
|
|
+ </statistic>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
<el-card>
|
|
|
- <headers title="分部数据" @changeOrgan="changeOrgan" :special="true" />
|
|
|
+ <headers title="分部数据" :hidenOrgan="true"/>
|
|
|
<div class="tableWrap">
|
|
|
<el-table
|
|
|
style="width: 100%"
|
|
@@ -27,7 +65,7 @@
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
prop="totalStudentNum"
|
|
|
- label="分部学员总数"
|
|
|
+ label="学员总数"
|
|
|
>
|
|
|
<!-- <template slot="header" slot-scope="slot">
|
|
|
<div class="titleCell">
|
|
@@ -49,18 +87,19 @@
|
|
|
</div>
|
|
|
</template> -->
|
|
|
</el-table-column>
|
|
|
- <el-table-column align="center" prop="vipStudentNum" label="会员总数" >
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
+ <el-table-column
|
|
|
align="center"
|
|
|
- prop="waitActivateVipStudentNum"
|
|
|
- label="待激活会员人数"
|
|
|
- ></el-table-column>
|
|
|
- <el-table-column
|
|
|
+ prop="effectiveStudentNum"
|
|
|
+ label="有效学员数"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
align="center"
|
|
|
- prop="effectiveVipStudentNum"
|
|
|
- label="生效中会员人数"
|
|
|
- ></el-table-column>
|
|
|
+ prop="vipStudentNum"
|
|
|
+ label="会员总人数"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
prop="activeStudentNum"
|
|
@@ -68,9 +107,11 @@
|
|
|
>
|
|
|
<template slot="header" slot-scope="slot">
|
|
|
<div class="titleCell">
|
|
|
- <span>活跃人数</span>
|
|
|
+ <span>活跃学员人数</span>
|
|
|
<el-tooltip placement="top" popper-class="mTooltip">
|
|
|
- <div slot="content">过去四周内有三周及以上每周训练时长超过60分钟为活跃学员</div>
|
|
|
+ <div slot="content">
|
|
|
+ 过去四周内有三周及以上每周训练时长超过60分钟为活跃学员
|
|
|
+ </div>
|
|
|
<i
|
|
|
class="el-icon-question micon el-tooltip"
|
|
|
style="
|
|
@@ -84,7 +125,33 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="effectiveVipStudentNum"
|
|
|
+ label="生效中会员人数"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="waitActivateVipStudentNum"
|
|
|
+ label="待激活会员人数"
|
|
|
+ ></el-table-column>
|
|
|
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="vipStudentRate"
|
|
|
+ label="会员人数占比"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ {{ numeral(scope.row.vipStudentRate || 0).format("0.00") }}%
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="totalStudentNum"
|
|
|
+ label="今日使用人数"
|
|
|
+ ></el-table-column> -->
|
|
|
</el-table>
|
|
|
<!-- <pagination
|
|
|
:autoScroll="false"
|
|
@@ -99,15 +166,21 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import headers from "./modals/headers.vue";
|
|
|
import pagination from "@/components/Pagination/index";
|
|
|
import { getOrganMemberList } from "../api";
|
|
|
import { Export } from "@/utils/downLoadFile";
|
|
|
+import headers from "./modals/headers.vue";
|
|
|
+import countTo from "vue-count-to";
|
|
|
+import { descs, titles } from "../constant";
|
|
|
+import { getCloudStudyStudentOverView } from "../api";
|
|
|
+import numeral from "numeral";
|
|
|
import qs from "qs";
|
|
|
export default {
|
|
|
+ props: ["data"],
|
|
|
components: {
|
|
|
headers,
|
|
|
pagination,
|
|
|
+ countTo,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -123,31 +196,44 @@ export default {
|
|
|
searchList: {
|
|
|
cloudStudyUseStudentDuty: "DESC",
|
|
|
},
|
|
|
- tenantId:''
|
|
|
+ tenantId: "",
|
|
|
+ dataList: {},
|
|
|
+ active: "",
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.tenantId = this.$helpers.tenantId
|
|
|
+ this.tenantId = this.$helpers.tenantId;
|
|
|
this.getList();
|
|
|
},
|
|
|
methods: {
|
|
|
async getList() {
|
|
|
+ /**
|
|
|
+ * try {
|
|
|
+ const res = await getCloudStudyStudentOverView();
|
|
|
+ this.dataList = res.data;
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ */
|
|
|
try {
|
|
|
- const arr = [36,39,41,42,43,44,45,46,47,48,49,50,52,54,55,56]
|
|
|
- const res = await getOrganMemberList({
|
|
|
+ const arr = [
|
|
|
+ 36, 39, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 52, 54, 56,
|
|
|
+ ];
|
|
|
+ const res = await getCloudStudyStudentOverView({
|
|
|
page: 1,
|
|
|
rows: 10,
|
|
|
...this.searchList,
|
|
|
organIds: this.organId,
|
|
|
});
|
|
|
- this.tableList = []
|
|
|
- res.data.forEach(ele => {
|
|
|
- if(arr.indexOf (ele.organId) == -1){
|
|
|
- this.tableList.push(ele)
|
|
|
- }
|
|
|
- });
|
|
|
- // this.tableList = res.data.rows;
|
|
|
- // this.rules.total = res.data.total;
|
|
|
+ this.tableList = [];
|
|
|
+ // res.data.forEach(ele => {
|
|
|
+ // if(arr.indexOf (ele.organId) == -1){
|
|
|
+ // this.tableList.push(ele)
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ this.tableList = res.data.list;
|
|
|
+ // this.rules.total = res.data.list?.total;
|
|
|
+ this.dataList = res.data?.overView || {};
|
|
|
// console.log(this.tableList)
|
|
|
} catch (e) {
|
|
|
console.log(e);
|
|
@@ -196,6 +282,37 @@ export default {
|
|
|
name: "organRankDetail",
|
|
|
});
|
|
|
},
|
|
|
+ numeral(val) {
|
|
|
+ return numeral(val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ items() {
|
|
|
+ let obj = {};
|
|
|
+ // "eVipStudentNum",
|
|
|
+ let arr = [
|
|
|
+ "totalStudentNum",
|
|
|
+ "effectiveStudentNum",
|
|
|
+ "vipStudentNum",
|
|
|
+ "cloudStudyLivelyStudentNum",
|
|
|
+ "effectiveVipStudentNum",
|
|
|
+ "waitActivateVipStudentNum",
|
|
|
+ // "newCloudStudyStudentNum",
|
|
|
+ // "vipStudentRate",
|
|
|
+ "cloudStudyUseStudentNum",
|
|
|
+ "cloudStudyTodayUseStudentNum",
|
|
|
+ ];
|
|
|
+ arr.forEach((str) => {
|
|
|
+ if (this.dataList[str] + "") {
|
|
|
+ obj[str] = {
|
|
|
+ title: titles[str],
|
|
|
+ percent: this.dataList[str],
|
|
|
+ desc: descs[str],
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|