dy-admin-manager/src/views/main/cloudDate/organMemberList.vue

<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 v-if="key=='againBuyRate' || key=='buyRate'">
            {{ 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 v-else>
            {{ 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 v-if="key=='againBuyRate' || key=='buyRate'"> <count-to :endVal="item.percent || 0"    :decimals="2" /> </span>
          <span v-else> <count-to :endVal="item.percent || 0" /> </span>


        </statistic-item>
      </statistic>
    </el-card>

    <el-card>
      <headers title="分部数据"  :hidenOrgan="true"/>
      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableList"
          @sort-change="sortChang"
          :default-sort="{
            prop: 'cloudStudyUseStudentDuty',
            order: 'descending',
          }"
          sortable="custom"
        >
          <el-table-column
            align="center"
            prop="organId"
            label="分部编号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="organName"
            label="分部名称"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="totalStudentNum"
            label="在读学员总数"
          >
            <!-- <template slot="header" slot-scope="slot">
              <div class="titleCell">
                <span>学员总数</span>
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">
                    乐团在读学员+有剩余VIP课或网管课学员去重之和
                  </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="effectiveStudentNum"
            label="有效学员数"
          >
          </el-table-column> -->
          <el-table-column
            align="center"
            prop="vipStudentNum"
            label="会员总人数"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="activeStudentNum"
            label="活跃会员"
          >
            <template slot="header" slot-scope="slot">
              <div class="titleCell">
                <span>活跃学员人数</span>
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">
                    过去四周内有三周及以上每周训练时长超过60分钟为活跃学员
                  </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="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="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>
            <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"
          :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 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 {
      tableList: [],
      organId: "",
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      searchList: {
        cloudStudyUseStudentDuty: "DESC",
      },
      tenantId: "",
      dataList: {},
      active: "",
    };
  },
  mounted() {
    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, 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.list;
        // this.rules.total = res.data.list?.total;
        this.dataList = res.data?.overView || {};
        // console.log(this.tableList)
      } catch (e) {
        console.log(e);
      }
    },
    sortChang(val) {
      const dates = {
        ascending: "ASC",
        descending: "DESC",
      };
      this.searchList = {};
      if (val.prop && val.order) {
        this.searchList[val.prop] = dates[val.order];
      }
      this.rules.page = 1;
      this.getList();
    },
    gotoDetail(row) {
      // 跳转到分部数据详情 row.organId
      this.$router.push({
        name: "organDateDetail",
        params: { organId: row.organId },
      });
    },
    changeOrgan(val) {
      this.organId = val;
      this.rules.page = 1;
      this.getList();
    },
    organDateExport() {
      let params = { ...this.searchList, organIds: this.organId };
      Export(
        this,
        {
          url: "/api-web/export/organStudentOverView",
          fileName: "分部云教练数据.xls",
          method: "post",
          params: qs.stringify(params),
        },
        "您确定导出分部云教练数据列表?"
      );
    },

    gotoAll() {
      this.$router.push({
        name: "organRankDetail",
      });
    },
    numeral(val) {
      return numeral(val);
    },
  },
  computed: {
    items() {
      let obj = {};
      //        "eVipStudentNum",
      let arr = [
        "totalStudentNum",
        "buyRate",
        "againBuyRate",
        // "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>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding-top: 0 !important;
}
.titleCell {
  display: inline-block;
}
.tableWrap {
  margin-top: 20px;
}
.btnList {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>