JingTieXueTang.Web/src/views/Home.vue

<template>
  <div class="app-container">
    <a-spin :spinning="loading1 || loading2">
      <!-- 基础数据展示 -->
      <div class="count-basic-data">
        <div
          class="count-basic-data-item"
          v-for="(item, index) in basicList"
          :key="index"
        >
          <div class="count-basic-data-item-main">
            <div class="count-basic-data-item-title">{{ item.title }}</div>
            <div class="count-basic-data-item-count">
              {{ item.count | formatNumberToDollar }}
            </div>
          </div>
          <div class="count-basic-data-item-up">
            <div class="count-basic-data-item-title">{{ item.upTitle }}</div>
            <div class="count-basic-data-item-up-count">
              {{ item.monthUp | formatNumberToDollar }}
            </div>
          </div>
        </div>
      </div>
      <!-- 柱状图 -->
      <div class="common-card a-card-margin-top">
        <div class="count-echarts-bar-title">
          <div class="count-echarts-bar-title-left">考试平均成绩</div>
          <div class="count-echarts-bar-title-right">
            <div
              :class="{
                'count-echarts-bar-title-right-btn': true,
                'count-echarts-bar-title-right-btn-checked':
                  barTabChecked === item.id,
              }"
              v-for="(item, index) in barDataTab"
              :key="index"
              @click="handleEchartsTab(item)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <EchartsBar ref="echartsBarRef" width="100%" height="400px" />
      </div>
      <!-- 扇形图 -->
      <div class="a-card-margin-top count-echarts-pie">
        <div class="count-echarts-pie-item">
          <div class="count-echarts-pie-item-title">文章类别占比</div>
          <EchartsDoughnut ref="echartsPieOneRef" width="100%" height="360px" />
        </div>
        <div class="count-echarts-pie-item">
          <div class="count-echarts-pie-item-title">试题类型占比</div>
          <EchartsDoughnut ref="echartsPieTwoRef" width="100%" height="360px" />
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import EchartsBar from '@/components/echarts/EchartsBar';
import EchartsDoughnut from '@/components/echarts/EchartsDoughnut';
export default {
  props: {},
  components: {
    EchartsBar,
    EchartsDoughnut,
  },
  data() {
    return {
      loading1: false, // 是否显示加载动画
      loading2: false, // 是否显示加载动画
      loading3: false, // 是否显示加载动画
      basicList: [], // 基础数据列表
      // 统计图
      barDataTab: [
        { id: 1, title: '本周' },
        { id: 2, title: '本月' },
        { id: 3, title: '本年' },
      ], // 统计图的tab栏
      barTabChecked: 1, // 当前选中的tab栏ID
      barData: {}, // 统计图数据
      // 扇形-文章类型占比
      articlesProportion: {},
      // 扇形-试题类型占比
      examsProportion: {},
    };
  },
  created() {},
  mounted() {
    this.initDataFun(); // 初始化数据
  },
  beforeDestroy() {},
  watch: {},
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    // 初始化数据
    async initDataFun() {
      this.basicList = [
        {
          title: '文章总数',
          count: 0,
          upTitle: '本月新增',
          monthUp: 0,
        },
        {
          title: '题目总数',
          count: 0,
          upTitle: '本月新增',
          monthUp: 0,
        },
        {
          title: '考试总数',
          count: 0,
          upTitle: '本月新增',
          monthUp: 0,
        },
      ];
      this.getArticleCount(this.basicList); // 查询：文章总数
      this.getAverageTestScore(); // 查询：统计图-考试平均成绩：本周、本月、全年
    },
    // 查询：文章总数
    getArticleCount(basicList) {
      this.loading1 = true;
      this.$_http
        .get(this.$_API.INTERFACE_GET_COUNT_ARTICLE)
        .then((res) => {
          basicList[0].count = res.data;
          this.getArticleCountUp(basicList); // 查询：本月新增文章数量
          this.getArticlesProportion(); // 查询：文章类别占比
        })
        .catch(() => {
          this.loading1 = false;
        });
    },
    // 查询：本月新增文章数量
    getArticleCountUp(basicList) {
      this.$_http
        .get(this.$_API.INTERFACE_GET_COUNT_ARTICLE_UP)
        .then((res) => {
          basicList[0].monthUp = res.data;
          this.getQuestionsCount(basicList); // 查询：试题总数
        })
        .catch(() => {
          this.loading1 = false;
        });
    },
    // 查询：试题总数
    getQuestionsCount(basicList) {
      this.$_http
        .get(this.$_API.INTERFACE_GET_COUNT_QUESTIONS)
        .then((res) => {
          basicList[1].count = res.data;
          this.getQuestionsCountUp(basicList); // 查询：本月新增试题数量
        })
        .catch(() => {
          this.loading1 = false;
        });
    },
    // 查询：本月新增试题数量
    getQuestionsCountUp(basicList) {
      this.$_http
        .get(this.$_API.INTERFACE_GET_COUNT_QUESTIONS_UP)
        .then((res) => {
          basicList[1].monthUp = res.data;
          this.getExamsCount(basicList); // 查询：考试总数
        })
        .catch(() => {
          this.loading1 = false;
        });
    },
    // 查询：考试总数
    getExamsCount(basicList) {
      this.$_http
        .get(this.$_API.INTERFACE_GET_COUNT_EXAMS)
        .then((res) => {
          basicList[2].count = res.data;
          this.getExamsCountUp(basicList);
        })
        .catch(() => {
          this.loading1 = false;
        });
    },
    // 查询：本月新增考试数量
    getExamsCountUp(basicList) {
      this.$_http
        .get(this.$_API.INTERFACE_GET_COUNT_EXAMS_UP)
        .then((res) => {
          basicList[2].monthUp = res.data;
          this.$refs.echartsBarRef.initDataFun(this.barData);
          this.loading1 = false;
        })
        .catch(() => {
          this.loading1 = false;
        });
    },
    // 查询：统计图-考试平均成绩：本周、本月、全年
    getAverageTestScore() {
      this.loading2 = true;
      this.barData = {
        xAxis: {
          data: [
            '期终考试',
            '期中考试',
            '期末考试',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
        }, // x轴数据
        series: {
          data: [
            1113,
            823,
            1140,
            1110,
            405,
            813,
            823,
            389,
            678,
            407,
            1178,
            789,
          ],
        }, // 移入提示数据
      };
      this.loading2 = false;
      // this.$_http
      //   .get(this.$_API.INTERFACE_GET_COUNT_BAR)
      //   .then((res) => {
      //     this.loading2 = false;
      //   })
    },
    // 查询：文章类别占比
    getArticlesProportion() {
      this.loading3 = true;
      this.$_http
        .get(this.$_API.INTERFACE_GET_COUNT_ARTICLE_PROPORTION)
        .then((res) => {
          let dataArr = [];
          for (let key in res.data) {
            dataArr.push({
              name: key,
              value: formate(res.data[key]),
            });
          }
          function formate(value) {
            if (value.includes('%')) {
              return Math.round(Number(value.replace('%', '')));
            } else {
              return value;
            }
          }
          this.articlesProportion = {
            title: '文章总计',
            seriesLabel: '文章类别占比',
            count: this.basicList[0].count,
            data: dataArr,
          };
          this.$refs.echartsPieOneRef.initDataFun(this.articlesProportion);
          this.getExamssProportion(); // 查询：试题类别占比
        })
        .catch(() => {
          this.loading3 = false;
        });
    },
    // 查询：试题类别占比
    getExamssProportion(count) {
      this.$_http
        .get(this.$_API.INTERFACE_GET_COUNT_QUESTIONS_PROPORTION)
        .then((res) => {
          let dataArr = [];
          for (let key in res.data) {
            dataArr.push({
              name: key,
              value: formate(res.data[key]),
            });
          }
          function formate(value) {
            if (value.includes('%')) {
              return Math.round(Number(value.replace('%', '')));
            } else {
              return value;
            }
          }
          this.articlesProportion = {
            title: '试题总计',
            seriesLabel: '试题类别占比',
            count: count,
            data: dataArr,
          };
          console.log(this.articlesProportion);
          this.$refs.echartsPieTwoRef.initDataFun(this.articlesProportion);
          this.loading3 = false;
        })
        .catch(() => {
          this.loading3 = false;
        });
    },
    // 操作：切换统计图的tab
    handleEchartsTab(item) {
      if (this.barTabChecked === item.id) {
        return;
      }
      this.barTabChecked = item.id;
    },
  },
};
</script>

<style lang="less" scoped>
@import '~@/styles/common/variable.less';
.app-container {
  overflow-y: auto;
  overflow-x: hidden;
  .count-basic-data {
    display: flex;
    .count-basic-data-item {
      width: 264px;
      height: 188px;
      margin-right: @paddingMarginVal;
      padding: @paddingMarginVal;
      background-color: @mainColorWhite;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .count-basic-data-item-title {
        font-size: 14px;
        color: @mainColorBlack45;
        flex-wrap: nowrap;
        white-space: nowrap;
      }
      .count-basic-data-item-main {
        width: 100%;
        .count-basic-data-item-title {
          width: 100%;
        }
        .count-basic-data-item-count {
          width: 100%;
          font-size: 30px;
          color: @mainColorBlack85;
          word-break: break-all;
          word-wrap: break-word;
        }
      }
      .count-basic-data-item-up {
        padding-top: 10px;
        border-top: 1px solid @mainColorBorder;
        display: flex;
        align-items: center;
        .count-basic-data-item-title {
          margin-right: @paddingMarginVal;
        }
        .count-basic-data-item-up-count {
          font-size: 20px;
          color: @mainColorBlack85;
        }
      }
    }
  }
  .count-echarts-bar-title {
    width: 100%;
    min-width: 400px;
    height: 40px;
    border-bottom: 1px solid @mainColorBorder;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    .count-echarts-bar-title-left {
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: @mainColorBlack65;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .count-echarts-bar-title-right {
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
      .count-echarts-bar-title-right-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 66px;
        height: 100%;
        color: @mainColorBlack65;
        font-size: 14px;
        border-bottom: 2px solid transparent;
        flex-wrap: nowrap;
        white-space: nowrap;
        cursor: pointer;
        &:hover {
          color: @mainColorBlueNormal;
          border-bottom: 2px solid @mainColorBlueNormal;
        }
      }
      .count-echarts-bar-title-right-btn-checked {
        color: @mainColorBlueNormal;
        border-bottom: 2px solid @mainColorBlueNormal;
      }
    }
  }
  .count-echarts-pie {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .count-echarts-pie-item {
      width: calc(50% - 8px);
      // overflow-x: hidden;
      background-color: @mainColorWhite;
      .count-echarts-pie-item-title {
        padding: @paddingMarginVal;
        width: 100%;
        border-bottom: 1px solid @mainColorBorder;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: @mainColorBlack65;
        flex-wrap: nowrap;
        white-space: nowrap;
      }
    }
  }
}
</style>