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 :yearArray="loginCountYearArray" 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>{{ gradeCourse.toFixed(0) }}</span>
            </div>
            <div class="info2 blueBG">
              <span>各学科平均课程数</span>
              <span>{{ subjectCourse.toFixed(0) }}</span>
            </div>
            <div class="info2 greenBG">
              <span>教师人均课程数</span>
              <span>{{ (courseCount / teacherCount).toFixed(0) }}</span>
            </div>
          </div>
          <teacherInfo style="height: calc(100% - 70px)" :courseArray="courseArray" @openCourse="openCourse"></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="lightJson.upCourseTeachers ? ((lightJson.upCourseTeachers / lightJson.teachers) * 100).toFixed(0) : 0"
                  :stroke-width="15" :format="format" color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>上传项目</span>
              <div>
                <el-progress :width="80" type="circle" :percentage="lightJson.upCourseUsers ? ((lightJson.upCourseUsers / lightJson.users) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
                  color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>使用工具</span>
              <div>
                <el-progress :width="80" type="circle" :percentage="lightJson.toolUsers ? ((lightJson.toolUsers / lightJson.users) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
                  color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>课程评价</span>
              <div>
                <el-progress :width="80" type="circle" :percentage="lightJson.rateUser ? ((lightJson.rateUser / lightJson.users) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
                  color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>互动交流</span>
              <div>
                <el-progress :width="80" type="circle" :percentage="lightJson.commentUsers ? ((lightJson.commentUsers / lightJson.users) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
                  color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>参与课程</span>
              <div>
                <el-progress :width="80" type="circle" :percentage="lightJson.gCourseTeachers ? ((lightJson.gCourseTeachers / lightJson.teachers) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
                  color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>参与项目</span>
              <div>
                <el-progress :width="80" type="circle" :percentage="lightJson.gCourseUsers ? ((lightJson.gCourseUsers / lightJson.users) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
                  color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>使用工具</span>
              <div>
                <el-progress :width="80" type="circle" :percentage="25" :stroke-width="15" :format="format"
                  color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>协同合作</span>
              <div>
                <el-progress :width="80" type="circle" :percentage="lightJson.upgCourseTeachers ? ((lightJson.upgCourseTeachers / lightJson.teachers) * 100).toFixed(0) > 100 ? 100 : ((lightJson.upgCourseTeachers / lightJson.teachers) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
                  color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>合作交流</span>
              <div>
                <el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"
                  color="#106BFF"></el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="titleBox">
          <div class="title">课程数量</div>
          <el-select v-model="cType" @change="typeChange" class="selectBox">
            <el-option label="全部" value=""></el-option>
            <el-option label="年级" value="grade"></el-option>
            <el-option label="主题" value="theme"></el-option>
            <el-option label="学科" value="subject"></el-option>
          </el-select>

        </div>
        <div class="dataBox">
          <div class="course_box">
            <div class="info_box">
              <div class="info3 blueBG">
                <span>课程总数</span>
                <span>{{ typeCourseCount }}</span>
              </div>
              <div class="info3 greenBG">
                <span>类别总数</span>
                <span>{{ typeCount }}</span>
              </div>
              <div class="info3 blueBG">
                <span>类别平均</span>
                <span>{{ (typeCourseCount / typeCount).toFixed(0) }}</span>
              </div>
            </div>
            <div class="course_box_p">
              <courseInfo :courseNumberArray="courseNumberArray" @openCourse="openCourse2"></courseInfo>
            </div>
          </div>
          <cateRank style="height: calc(100% - 50% - 10px); overflow: auto" :courseNumberArray="courseNumberArray">
          </cateRank>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">学生综合评价</div>
          <el-select v-model="eva" @change="typeChange2" @focus="setMinWidth" class="selectBox" style="width: 150px;">
            <el-option v-for="item in evArray" :key="item.id" :label="item.title" :value="item.id" :style="{'width': minWidth + 2 + 'px'}"></el-option>
          </el-select>
        </div>
        <div class="dataBox">
          <studentInfo :evCourseArray="evCourseArray" :eva="eva"></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,
    },
    org: {
      type: String,
    },
  },
  data() {
    return {
      isLoading: false,
      count: 0,
      loginCount: 0,
      loginTime: 0,
      courseCount: 0,
      teacherCount: 0,
      loginCountMonthArray: [],
      weekCount: 0,
      loginCountYearArray: [],
      gradeCourse: 0,
      subjectCourse: 0,
      courseArray: [],
      cType: '',
      gradeArray: [],
      subjectArray: [],
      themeArray: [],
      allArray: [],
      courseNumberArray: [],
      typeCount: 0,
      typeCourseCount: 0,
      lightJson: {
        users: 0,
        teachers: 0,
        students: 0,
        upCourseTeachers: 0,
        gCourseTeachers: 0,
        upCourseUsers: 0,
        gCourseUsers: 0,
        toolUsers: 0,
        rateUser: 0,
        upgCourseTeachers: 0,
        commentUsers: 0,
      },
      evArray:[],
      eva:'',
      evCourseArray:[],
      minWidth:0
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    setMinWidth (val) {
      this.minWidth = val.srcElement.clientWidth
    },
    openCourse(classIndex,subIndex){
      // console.log(classIndex,subIndex);
      // console.log(this.courseArray);
      // console.log(this.courseArray[classIndex].id,this.courseArray[classIndex].subject[subIndex].id || '');
       window.topU.postMessage(
        { 
          tools: "openCourse",
          typea: this.courseArray[classIndex].id,
          typed: this.courseArray[classIndex].subject[subIndex].id || '',
        }, 
        "*"
      );
    },
    openCourse2(index){
      console.log(index);
      // console.log(this.courseNumberArray);
      let id = this.courseNumberArray[index].typeid
      let typea = ""
      let typeb = ""
      let typed = ""
      // console.log(this.gradeArray);
      // console.log(this.subjectArray);
      // console.log(this.themeArray);
      let key = 0
      for (key in this.gradeArray) {
        if (this.gradeArray.hasOwnProperty.call(this.gradeArray, key)) {
          const element = this.gradeArray[key];
          if(element.typeid == id){
            typea = id
          }
        }
      }
      for (key in this.subjectArray) {
        if (this.subjectArray.hasOwnProperty.call(this.subjectArray, key)) {
          const element = this.subjectArray[key];
          if(element.typeid == id){
            typed = id
          }
        }
      }
      for (key in this.themeArray) {
        if (this.themeArray.hasOwnProperty.call(this.themeArray, key)) {
          const element = this.themeArray[key];
          if(element.typeid == id){
            typeb = id
          }
        }
      }
       window.topU.postMessage(
        { 
          tools: "openCourse",
          typea: typea || "",
          typeb: typeb || "",
          typed: typed || "",
        }, 
        "*"
      );
    },
    getData() {
      this.isLoading = true;
      let params = [
        {
          oid: this.oid,
          org: this.org,
        },
      ];
      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

          let loginCountYear = res.data[10]
          let loginCountYearArray = []
          for (var i = Month; i > Month - 12; i--) {
            if (i <= 0) {
              loginCountYearArray.push({
                Year: Year - 1,
                Month: 12 + i,
                mon: 0,
                tue: 0,
                wed: 0,
                thur: 0,
                fri: 0,
                sat: 0,
                sun: 0,
              })
            } else {
              loginCountYearArray.push({
                Month: i,
                Year: Year,
                mon: 0,
                tue: 0,
                wed: 0,
                thur: 0,
                fri: 0,
                sat: 0,
                sun: 0,
              })
            }
          }
          loginCountYearArray = loginCountYearArray.reverse()
          for (var i = 0; i < loginCountYear.length; i++) {
            let _date = new Date(loginCountYear[i].create_at)
            var _month = _date.getMonth() + 1
            var _year = _date.getFullYear()
            var _day = _date.getDay()
            let dayArray = ['sun', 'mon', 'tue', 'wed', 'thur', 'fri', 'sat']
            for (var j = 0; j < loginCountYearArray.length; j++) {
              if (_month == loginCountYearArray[j].Month && _year == loginCountYearArray[j].Year) {
                loginCountYearArray[j][dayArray[_day]]++
                break;
              }
            }
          }
          console.log(loginCountYearArray);
          this.loginCountYearArray = loginCountYearArray

          let _grade = res.data[11] //年级
          let _subject = res.data[12]  //学科
          let _course = res.data[13] //课程
          let _gradeCourse = 0 //各年级上传课程
          let _subjectCourse = 0 //各学科上传课程
          let _courseArray = []
          _subject.push({ name: '其他' })

          for (var i = 0; i < _grade.length; i++) {
            _courseArray.push({
              name: _grade[i].name,
              id: _grade[i].id,
              courseid: [],
              subject: [],
            })
            for (var z = 0; z < _course.length; z++) {
              if (_course[z].typeid == _grade[i].id) {
                _gradeCourse++
                if (_courseArray[i].courseid.indexOf(_course[z].courseid) === -1) {
                  _courseArray[i].courseid.push(_course[z].courseid)
                }
              }

            }
            for (var j = 0; j < _subject.length; j++) {
              _courseArray[i].subject.push({
                name: _subject[j].name,
                id: _subject[j].id,
                course: 0
              })
              for (var z = 0; z < _course.length; z++) {
                if (_course[z].typeid == _subject[j].id && _courseArray[i].courseid.indexOf(_course[z].courseid) !== -1) {
                  _courseArray[i].subject[j].course++
                }
              }
            }
            let sum = 0
            for (var j = 0; j < _courseArray[i].subject.length - 1; j++) {
              sum += _courseArray[i].subject[j].course
            }
            _courseArray[i].subject[_courseArray[i].subject.length - 1].course = (_courseArray[i].courseid.length - sum) < 0 ? 0 : _courseArray[i].courseid.length - sum
          }
          for (var j = 0; j < _subject.length; j++) {
            for (var z = 0; z < _course.length; z++) {
              if (_course[z].typeid == _subject[j].id) {
                _subjectCourse++
              }
            }
          }
          console.log(_courseArray);
          this.gradeCourse = _gradeCourse / _grade.length
          this.subjectCourse = _subjectCourse / _subject.length
          this.courseArray = _courseArray

          let _theme = res.data[14] //主题

          this.typeCount = _grade.length + _subject.length + _theme.length
          let _gradeArray = []
          let _subjectArray = []
          let _themeArray = []

          for (var i = 0; i < _grade.length; i++) {
            _gradeArray.push({
              name: _grade[i].name,
              typeid: _grade[i].id,
              course: 0,
              array:[]
            })
            for (var z = 0; z < _course.length; z++) {
              if (_course[z].typeid == _grade[i].id) {
                _gradeArray[i].course++
                _gradeArray[i].array.push(_course[z].courseid)
              }
            }
          }

          for (var i = 0; i < _subject.length; i++) {
            _subjectArray.push({
              name: _subject[i].name,
              typeid: _subject[i].id,
              course: 0,
              array: []
            })
            for (var z = 0; z < _course.length; z++) {
              if (_course[z].typeid == _subject[i].id) {
                _subjectArray[i].course++
                _subjectArray[i].array.push(_course[z].courseid)
              }
            }
          }


          for (var i = 0; i < _theme.length; i++) {
            _themeArray.push({
              name: _theme[i].name,
              typeid: _theme[i].id,
              course: 0,
              array: []
            })
            for (var z = 0; z < _course.length; z++) {
              if (_course[z].typeid == _theme[i].id) {
                _themeArray[i].course++
                _themeArray[i].array.push(_course[z].courseid)
              }
            }
          }



          this.gradeArray = _gradeArray
          this.subjectArray = _subjectArray
          this.themeArray = _themeArray
          this.allArray = [..._gradeArray, ..._subjectArray, ..._themeArray]
          this.typeChange();

          let _teachers = res.data[15][0].count //老师数量
          let _students = res.data[16][0].count //学生数量
          let _upCourseTeachers = res.data[17][0].count //上传课程老师的数量
          let _gCourseTeachers = res.data[18][0].count //参与课程的老师
          let _upCourseUsers = res.data[19][0].count //上传项目的用户
          let _gCourseUsers = res.data[20][0].count //参与项目的用户
          let _toolUsers = res.data[21][0].count //使用工具的用户
          let _rateUser = res.data[22][0].count //被评价的用户
          let _upgCourseTeachers = res.data[23][0].count //参与协同课程的老师
          let _commentUsers = res.data[24][0].count //参与互动交流的用户

          this.lightJson = {
            users: this.count,
            teachers: _teachers,
            students: _students,
            upCourseTeachers: _upCourseTeachers,
            gCourseTeachers: _gCourseTeachers,
            upCourseUsers: _upCourseUsers,
            gCourseUsers: _gCourseUsers,
            toolUsers: _toolUsers,
            rateUser: _rateUser,
            upgCourseTeachers: _upgCourseTeachers,
            commentUsers: _commentUsers,
          }


          let _evArray = res.data[25] //目标数组
          let _evWorkArray = res.data[26] //目标课程的作业
          let _evCourseArray = [] //计算总分 
          let _evCourse = [] //筛选有目标的数组 
          for(var i = 0;i<_evWorkArray.length;i++){
              let courseJson = JSON.parse(_evWorkArray[i].chapters)
              let _rate = JSON.parse(_evWorkArray[i].rate)
              delete _rate.content
              if(courseJson[_evWorkArray[i].stage] && 
                courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task] && 
                courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task].eList &&
                courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task].eList.length){
                let _elist = courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task].eList
                let _rateC = Object.keys(_rate)
                let json = {}
                for(var j = 0;j<_rateC.length;j++){
                  for(var k = 0;k<_elist.length;k++){
                    if(_elist[k].value == _rateC[j] && _elist[k].target){
                      json[_elist[k].target[0]] = _rate[_rateC[j]]
                      break;
                    }
                  }
                }
                if(Object.keys(json).length){
                  _evCourse.push({
                    evid:_evWorkArray[i].evaId,
                    rateJson:json
                  })
                }
              }
          }
          for(var i = 0;i<_evArray.length;i++){
            _evCourseArray.push({
              title:_evArray[i].title,
              evid:_evArray[i].id,
              evJson:{}
            })
            for(var j = 0;j<_evCourse.length;j++){
              if(_evArray[i].id == _evCourse[j].evid){
                let _rate = Object.keys(_evCourse[j].rateJson)
                for(var k = 0;k<_rate.length;k++){
                  if(_evCourseArray[i].evJson[_rate[k]]){
                    _evCourseArray[i].evJson[_rate[k]].push(_evCourse[j].rateJson[_rate[k]])
                  }else{
                    _evCourseArray[i].evJson[_rate[k]] = [_evCourse[j].rateJson[_rate[k]]]
                  }
                }
              }
            }
          }
          for(var i = 0;i < _evCourseArray.length; i++){
            _evCourseArray[i].indicator = []
            _evCourseArray[i].value = []
            let evJson = Object.keys(_evCourseArray[i].evJson)
            for(var j = 0;j < evJson.length;j++){
              _evCourseArray[i].indicator.push({
                name:evJson[j],
                max: 5 
              })
              let sum = 0
              _evCourseArray[i].evJson[evJson[j]].forEach((value)=>{
                sum+=value
              })
              _evCourseArray[i].value.push((sum / _evCourseArray[i].evJson[evJson[j]].length).toFixed(1))
            }
          }
          this.evArray = _evArray
          this.eva = _evArray[0].id
          this.evCourseArray = _evCourseArray
          this.$forceUpdate();
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    typeChange() {
      if (this.cType === '') {
        this.courseNumberArray = this.allArray
      } else if (this.cType === 'grade') {
        this.courseNumberArray = this.gradeArray
      } else if (this.cType === 'theme') {
        this.courseNumberArray = this.themeArray
      } else if (this.cType === 'subject') {
        this.courseNumberArray = this.subjectArray
      }
      let course = []
      for(var i = 0;i<this.courseNumberArray.length;i++){
        let _array = this.courseNumberArray[i].array
        for(var j = 0; j <_array.length;j++){
          console.log(_array[j]);
          if(course.indexOf(_array[j]) == -1){
            course.push(_array[j])
          }
        }
      }
      this.typeCount = this.courseNumberArray.length
      this.typeCourseCount = course.length
      this.$forceUpdate();
    },
    typeChange2(){

    },
    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; */
  color: #565e6a;
}

.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: 95%;
  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);
}

.selectBox {
  width: 80px;
  margin-left: 10px;
}

.selectBox>>>.el-input__inner {
  height: 30px;
  line-height: 30px;
}

.selectBox>>>.el-input__icon {
  line-height: 30px;
}
</style>