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

<template>
  <div>
    <el-card>
      <headers title="数据总览" :hidenOrgan="true" />
      <div
        class="wall"
        style="height: 68px"
        v-if="JSON.stringify(items) == '{}'"
      >
        暂无数据
      </div>
      <!--
          -->
      <statistic :col="6" 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>
  </div>
</template>
<script>
import headers from "./modals/headers.vue";
import countTo from "vue-count-to";
import { descs, titles } from "../constant";
import { getCloudStudyStudentOverView } from "../api";
export default {
  props: ["data"],
  components: {
    headers,
    countTo
  },
  data() {
    return {
      dataList:{},
      active:''
    };
  },
  async mounted() {
    try {
      const res = await getCloudStudyStudentOverView();
      this.dataList = res.data;
    } catch (e) {
      console.log(e);
    }
    // 获取数据
  },
  computed: {
    items() {
      let obj = {};
      //        "eVipStudentNum",
      let arr = [
        "totalStudentNum",
        "waitActivateVipStudentNum",
        "effectiveVipStudentNum",
        "vipStudentNum",
        "cloudStudyLivelyStudentNum",
        // "newCloudStudyStudentNum",
        // "cloudStudyTodayUseStudentNum",
        "cloudStudyUseStudentNum",
      ];
      arr.forEach((str) => {
        if (this.dataList[str]+'') {
          obj[str] ={title:titles[str],percent:this.dataList[str],desc:descs[str]};
        }
      });
      return obj;
    },
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
/deep/.el-card__body {
  padding-top: 0 !important;
}
</style>