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

<template>
  <div class="body1" v-loading="isLoading">
    <!-- 综合数据 -->
    <div class="left">
      <div class="top">
        <div class="titleBox">
          <div class="title">基础概况</div>
        </div>
        <div class="dataBox">
          <div class="info_box">
            <div class="info blueBG">
              <span>用户总数</span>
              <span>{{count}}</span>
            </div>
            <div class="info greenBG">
              <span>周使用频次</span>
              <span>{{weekCount}}</span>
            </div>
            <div class="info blueBG">
              <span>登录频次</span>
              <span>{{loginCount}}</span>
            </div>
            <div class="info greenBG">
              <span>人均使用频次</span>
              <span>{{(loginCount / count).toFixed(0)}}</span>
            </div>
          </div>
          <loginCount style="height: calc(100% - 140px)" :monthArray="loginCountMonthArray"></loginCount>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">在线时长</div>
        </div>
        <div class="dataBox">
          <div class="info_box">
            <div class="info blueBG">
              <span>累计时长</span>
              <span>{{loginTime.toFixed(0)}}小时</span>
            </div>
            <div class="info greenBG">
              <span>人均时长</span>
              <span>{{(loginTime / count).toFixed(0)}}小时</span>
            </div>
          </div>
          <loginTime style="height: calc(100% - 70px)"></loginTime>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="top">
        <div class="titleBox">
          <div class="title">教师综合评价</div>
        </div>
        <div class="dataBox">
          <div class="info_box" style="width: 95%">
            <div class="info2 blueBG">
              <span>上传课程总数</span>
              <span>{{courseCount}}</span>
            </div>
            <div class="info2 greenBG">
              <span>各年级平均课程数</span>
              <span>15620</span>
            </div>
            <div class="info2 blueBG">
              <span>各学科平均课程</span>
              <span>15620</span>
            </div>
            <div class="info2 greenBG">
              <span>教师人均课程数</span>
              <span>{{(courseCount / teacherCount).toFixed(0)}}</span>
            </div>
          </div>
          <teacherInfo style="height: calc(100% - 70px)"></teacherInfo>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">平台使用深度</div>
        </div>
        <div class="dataBox">
          <div class="depth_box">
            <div class="depth">
              <span>上传课程</span>
              <div>
                <el-progress
                  :width="80"
                  type="circle"
                  :percentage="36"
                  :stroke-width="15"
                  :format="format"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>指导项目</span>
              <div>
                <el-progress
                  :width="80"
                  type="circle"
                  :percentage="76"
                  :stroke-width="15"
                  :format="format"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>使用工具</span>
              <div>
                <el-progress
                  :width="80"
                  type="circle"
                  :percentage="76"
                  :stroke-width="15"
                  :format="format"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>课程评价</span>
              <div>
                <el-progress
                  :width="80"
                  type="circle"
                  :percentage="76"
                  :stroke-width="15"
                  :format="format"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>互动交流</span>
              <div>
                <el-progress
                  :width="80"
                  type="circle"
                  :percentage="76"
                  :stroke-width="15"
                  :format="format"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>参与课程</span>
              <div>
                <el-progress
                  :width="80"
                  type="circle"
                  :percentage="36"
                  :stroke-width="15"
                  :format="format"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>参与项目</span>
              <div>
                <el-progress
                  :width="80"
                  type="circle"
                  :percentage="76"
                  :stroke-width="15"
                  :format="format"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>使用工具</span>
              <div>
                <el-progress
                  :width="80"
                  type="circle"
                  :percentage="25"
                  :stroke-width="15"
                  :format="format"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>协同合作</span>
              <div>
                <el-progress
                  :width="80"
                  type="circle"
                  :percentage="76"
                  :stroke-width="15"
                  :format="format"
                ></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>合作交流</span>
              <div>
                <el-progress
                  :width="80"
                  type="circle"
                  :percentage="76"
                  :stroke-width="15"
                  :format="format"
                ></el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="titleBox">
          <div class="title">课程数量</div>
        </div>
        <div class="dataBox">
          <div class="course_box">
            <div class="info_box">
                <div class="info3 blueBG">
                  <span>课程总数</span>
                  <span>{{courseCount}}</span>
                </div>
                <div class="info3 greenBG">
                  <span>类别总数</span>
                  <span>546</span>
                </div>
                <div class="info3 blueBG">
                  <span>类别平均</span>
                  <span>12</span>
                </div>
            </div>
            <div class="course_box_p">
              <courseInfo></courseInfo>
            </div>
          </div>
          <cateRank
            style="height: calc(100% - 200px); overflow: auto"
          ></cateRank>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">学生综合评价</div>
        </div>
        <div class="dataBox">
          <studentInfo></studentInfo>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loginCount from "./loginCount";
import loginTime from "./loginTime";
import teacherInfo from "./teacherInfo";
import courseInfo from "./courseInfo";
import studentInfo from "./studentInfo";
import cateRank from "./cateRank";
export default {
  components: {
    loginCount,
    loginTime,
    teacherInfo,
    courseInfo,
    studentInfo,
    cateRank,
  },
  props: {
    oid: {
      type: String,
    },
  },
  data() {
    return {
      isLoading: false,
      count:0,
      loginCount:0,
      loginTime:0,
      courseCount:0,
      teacherCount:0,
      loginCountMonthArray:[],
      weekCount:0,
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.isLoading = true;
      let params = [
        {
          oid: this.oid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "selectDataBoardSchool", params)
        .then((res) => {
          this.isLoading = false;
          this.count = res.data[0][0].count
          this.loginCount = res.data[1][0].loginCount
          this.loginTime = parseInt(res.data[3][0].time) / 60  / 60
          this.courseCount = res.data[5][0].courseCount
          this.teacherCount = res.data[6][0].count

          let loginCountMonthArray = []
          const date = new Date()
          var Month = date.getMonth() + 1
          var Year = date.getFullYear()
          for(var i = Month;i>Month-6;i--){
            if(i <= 0){
              loginCountMonthArray.push({
                Year:Year-1,
                Month:12+i,
                student:0,
                teacher:0
              })
            }else{
              loginCountMonthArray.push({
                Month:i,
                Year:Year,
                student:0,
                teacher:0
              })
            }
          }
          loginCountMonthArray = loginCountMonthArray.reverse()
          let teacherLoginCountYear = res.data[7] // 老师半年登录次数统计
          let studentLoginCountYear = res.data[8] // 学生半年登录次数统计

          for(var i = 0;i<teacherLoginCountYear.length;i++){
            let _date = new Date(teacherLoginCountYear[i].create_at)
            var _month = _date.getMonth() + 1
            var _year = _date.getFullYear() 
            for(var j = 0;j<loginCountMonthArray.length;j++){
              if(_month == loginCountMonthArray[j].Month && _year == loginCountMonthArray[j].Year){
                loginCountMonthArray[j].teacher++
                break;
              }
            }
          }
          for(var i = 0;i<studentLoginCountYear.length;i++){
            let _date = new Date(studentLoginCountYear[i].create_at)
            var _month = _date.getMonth() + 1
            var _year = _date.getFullYear() 
            for(var j = 0;j<loginCountMonthArray.length;j++){
              if(_month == loginCountMonthArray[j].Month && _year == loginCountMonthArray[j].Year){
                loginCountMonthArray[j].student++
                break;
              }
            }
          }
          console.log(loginCountMonthArray);
          this.loginCountMonthArray = loginCountMonthArray

          this.weekCount = res.data[9][0].count
        })
        .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% / 5 * 2.8 - 20px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

.left > .bottom {
  width: 100%;
  height: calc(100% / 5 * 2.2);
  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 * 2.8 - 20px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

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

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

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

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

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

.titleBox > .title {
  font-weight: 700;
}

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

.info_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.info_box > .info2,
.info_box > .info3,
.info_box > .info {
  width: calc(50% - 10px);
  display: flex;
  flex-direction: column;
  height: 60px;
  justify-content: center;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 5px;
}

.info_box > .info2 {
  width: calc(100% / 4 - 10px);
  align-items: flex-end;
}

.info_box > .info3 {
  width: 100%;
  margin-bottom: 5px;
}

.info_box > .info2 > span:nth-child(1),
.info_box > .info3 > span:nth-child(1),
.info_box > .info > span:nth-child(1) {
  font-size: 12px;
  /* margin: 0 0 5px 0; */
}

.info_box > .info2 > span:nth-child(2),
.info_box > .info3 > span:nth-child(2),
.info_box > .info > span:nth-child(2) {
  font-size: 22px;
  font-weight: 700;
}

.blueBG {
  background: linear-gradient(
    180deg,
    rgba(224, 234, 251, 0.2) 0%,
    rgba(54, 130, 252, 0.3) 100%
  );
}

.greenBG {
  background: linear-gradient(
    180deg,
    rgb(211, 246, 228, 0.2) 0%,
    rgb(23, 196, 105, 0.3) 100%
  );
}

.depth_box {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
  justify-content: space-between;
}

.depth {
  width: calc(100% / 5 - 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.depth > span:nth-child(1) {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
}
.depth > div:nth-child(1) {
}

.course_box {
  display: flex;
  height: 50%;
  width: 90%;
  margin: 0 auto;
}
.course_box .info_box {
  height: 100%;
  width: 100px;
  flex-direction: column;
  margin: 0;
  flex-wrap: nowrap;
}
.course_box_p {
  width: calc(100% - 100px);
}
</style>