pbl-teacher-table/src/components/pages/dataBoard/course/index.vue

<template>
  <div class="body1">
    <!-- 课程数据 -->
    <div class="left">
      <div class="top">
        <div class="titleBox">
          <div class="title">授课频次</div>
        </div>
        <div class="dataBox">
          <div class="teafre">
            <div class="teaLeft">
              <div>累计授课次数</div>
              <div>{{ wCount }}</div>
            </div>
            <div class="teaLeft teaRigth">
              <div>相对增幅百分比</div>
              <div>{{ reInc }}%</div>
            </div>
          </div>
          <TeaFre
            style="height: calc(100% - 62px)"
            :monthArray="groupedArrayByMonth"
          ></TeaFre>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">工具使用</div>
        </div>
        <div class="dataBox">
          <ToolUse style="height: calc(100% - 40px)"></ToolUse>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="top">
        <div class="titleBox">
          <div class="title">课程数量</div>
        </div>
        <div class="dataBox middleBox">
          <div class="halfBox">
            <div class="teafre">
              <div class="teaMiddle cNum">
                <div>课程总数</div>
                <div>{{ cCount }}</div>
              </div>
              <div class="teaMiddle tNum">
                <div>类别总数</div>
                <div>8412</div>
              </div>
              <div class="teaMiddle tSum">
                <div>类别平均</div>
                <div>3021</div>
              </div>
            </div>
            <CateRank
              style="height: calc(100% - 72px); margin-top: 10px"
            ></CateRank>
          </div>
          <div class="halfBox middleBox" style="align-items: flex-start">
            <WorkNum style="height: calc(100% - 40px)"></WorkNum>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">课程时间分布</div>
        </div>
        <div class="dataBox">
          <CourseTime style="height: calc(100% - 40px)"></CourseTime>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="titleBox">
          <div class="title">课程分析</div>
        </div>
        <div class="dataBox">
          <CourseAna style="height: calc(100% - 40px)"></CourseAna>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">授课时长</div>
        </div>
        <div class="dataBox">
          <div class="teafre">
            <div class="teaLeft">
              <div>累计时长</div>
              <div>15624小时</div>
            </div>
            <div class="teaLeft teaRigth">
              <div>学生在线平均时长</div>
              <div>268小时</div>
            </div>
          </div>
          <WorkTime style="height: calc(100% - 62px)"></WorkTime>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TeaFre from "./chartList/teaFre.vue";
import ToolUse from "./chartList/toolUse.vue";
import CateRank from "./chartList/cateRank.vue";
import WorkNum from "./chartList/workNum.vue";
import CourseTime from "./chartList/courseTime.vue";
import CourseAna from "./chartList/courseAna.vue";
import WorkTime from "./chartList/workTime.vue";
export default {
  components: {
    TeaFre,
    ToolUse,
    CateRank,
    WorkNum,
    CourseTime,
    CourseAna,
    WorkTime,
  },
  props: {
    oid: {
      type: String,
    },
  },
  data() {
    return {
      isLoading: false,
      wCount: 0,
      cCount: 0,
      groupedArrayByMonth: [],
      reInc: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.isLoading = true;
      let params = [
        {
          oid: this.oid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "selectDataBoardCourse", params)
        .then((res) => {
          this.isLoading = false;
          this.wCount = res.data[0].length;
          this.cCount = res.data[1].length;
          var workArray = res.data[0];
          let workList = [];
          //将数据根据time里面的月份分成多个数组
          var groupedArrayByMonth = [];
          const date = new Date();
          var Month = date.getMonth() + 1;
          var Year = date.getFullYear();
          for (var i = Month; i > Month - 6; i--) {
            if (i <= 0) {
              groupedArrayByMonth.push({
                Year: Year - 1,
                Month: 12 + i,
                course: 0,
              });
            } else {
              groupedArrayByMonth.push({
                Month: i,
                Year: Year,
                course: 0,
              });
            }
          }
          groupedArrayByMonth = groupedArrayByMonth.reverse();

          for (var i = 0; i < workArray.length; i++) {
            let _date = new Date(workArray[i].time);
            var _month = _date.getMonth() + 1;
            var _year = _date.getFullYear();
            for (var j = 0; j < groupedArrayByMonth.length; j++) {
              if (
                _month == groupedArrayByMonth[j].Month &&
                _year == groupedArrayByMonth[j].Year
              ) {
                groupedArrayByMonth[j].course++;
                break;
              }
            }
          }
          this.reInc = (
            (groupedArrayByMonth[groupedArrayByMonth.length - 1].course /
              groupedArrayByMonth[groupedArrayByMonth.length - 2].course) *
            100
          ).toFixed(1);
          this.groupedArrayByMonth = groupedArrayByMonth;
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    format(percentage) {
      return percentage;
    },
  },
};
</script>

<style scoped>
.body1 {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.left {
  width: calc(100% / 4 * 1);
  height: 100%;
}

.left > .top {
  width: 100%;
  height: calc(100% / 2 - 10px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

.left > .bottom {
  width: 100%;
  height: calc(100% / 2 - 10px);
  background: #fff;
  border-radius: 5px;
}

.center {
  width: calc(100% / 4 * 2 - 40px);
  height: 100%;
  margin: 0 20px;
}

.center > .top {
  width: 100%;
  height: calc(100% / 5 * 3 - 10px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

.center > .bottom {
  width: 100%;
  height: calc(100% / 5 * 2 - 10px);
  background: #fff;
  border-radius: 5px;
}

.right {
  width: calc(100% / 4 * 1);
  height: 100%;
}

.right > .top {
  width: 100%;
  height: calc(100% / 2 - 10px);
  background: #fff;
  border-radius: 16px;
  margin: 0 0 20px 0;
}

.right > .bottom {
  width: 100%;
  height: calc(100% / 2 - 10px);
  background: #fff;
  border-radius: 5px;
}

.titleBox {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  width: 100%;
}

.dataBox {
  height: calc(100% - 40px);
  width: 100%;
}

.middleBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.title {
  font-weight: bold;
  color: #060e17;
  font-size: 18px;
}

.teafre {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  justify-content: space-evenly;
}

.teaLeft,
.teaMiddle {
  width: calc(100% / 2 - 10px);
  height: 60px;
  border-radius: 8px;
  /* border: 1px solid #e0eafb; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 10px;
  margin: 0 10px;
}
.teaMiddle {
  width: calc(100% / 3 - 10px);
}
.teaLeft {
  width: 95%;
  background: linear-gradient(
    180deg,
    rgba(224, 234, 251, 0.2) 0%,
    rgba(54, 130, 252, 0.3) 100%
  );
}
.teaRigth {
  background: linear-gradient(
    180deg,
    rgb(211, 246, 228, 0.2) 0%,
    rgb(23, 196, 105, 0.3) 100%
  ) !important;
}

.cNum {
  background: linear-gradient(
    180deg,
    rgb(125, 227, 174, 0.2) 0%,
    rgb(23, 196, 105, 0.3) 100%
  ) !important;
}

.tNum {
  background: linear-gradient(
    180deg,
    rgb(174, 204, 254, 0.2) 0%,
    rgb(54, 129, 252, 0.3) 100%
  ) !important;
}

.tSum {
  background: linear-gradient(
    180deg,
    rgb(125, 227, 174, 0.2) 0%,
    rgb(23, 196, 105, 0.3) 100%
  ) !important;
}

.teaLeft > div:first-child,
.teaMiddle > div:first-child {
  font-size: 12px;
  font-weight: 400;
  color: #565e6a;
}

.teaLeft > div:last-child,
.teaMiddle > div:last-child {
  font-size: 22px;
  font-weight: bold;
  color: #060e17;
}

.halfBox {
  width: 50%;
  height: 100%;
}
</style>