pbl-teacher-table/src/components/pages/dataBoardNew/project/index.vue

<template>
  <div class="body1" v-loading="isLoading">
    <!-- 课程数据 -->
    <div class="left">
      <div class="top">
        <div class="titleBox" style="justify-content: space-between">
          <div class="title">基础概况</div>
          <!-- <el-select v-model="cType7" class="selectBox" style="width: 110px">
            <el-option label="全部课程" value="全部课程"></el-option>
          </el-select> -->
        </div>
        <div class="dataBox">
          <div class="info_box">
            <div class="info blueBG">
              <span>项目总数</span>
              <span>{{ allCourse }}</span>
            </div>
            <div class="info blueBG">
              <span>本月新增项目环比</span>
              <span v-if="loginCountMonthArray.length">{{ (loginCountMonthArray[loginCountMonthArray.length - 1].course) >
                0 ? (((loginCountMonthArray[loginCountMonthArray.length - 1].course) / allCourse) * 100).toFixed(0) + '%'
                : 0 }}</span>
              <!-- <span v-if="loginCountMonthArray.length">{{
                loginCountMonthArray[loginCountMonthArray.length - 1].course -
                loginCountMonthArray[loginCountMonthArray.length - 2].course < 0 ? 0 : (
                  (loginCountMonthArray[loginCountMonthArray.length - 1].course -
                    loginCountMonthArray[loginCountMonthArray.length - 2].course) / (allCourse -
                      loginCountMonthArray[loginCountMonthArray.length - 1].course) * 100).toFixed(0) + "%" }}</span> -->
              <span v-else>0</span>
            </div>
            <div class="info blueBG">
              <span>模板项目总数</span>
              <!-- <span>{{ courseTemplate }}</span> -->
              <span>{{ 0 }}</span>
            </div>
            <div class="info blueBG">
              <span>本月新增项目总数</span>
              <span v-if="loginCountMonthArray.length">{{
                loginCountMonthArray[loginCountMonthArray.length - 1].course
              }}</span>
              <span v-else>0</span>
            </div>
          </div>
          <TeaFre style="height: calc(100% - 140px)" :monthArray="loginCountMonthArray"></TeaFre>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <!-- <div class="title" :class="{ isClick: skType == 0 }" @click="skType = 0"
            style="cursor: pointer; padding: 0 0 5px 0">
            项目时长
          </div> -->
          <div class="title" :class="{ isClick: skType == 1 }" @click="skType = 1"
            style="cursor: pointer; padding: 0 0 5px 0">
            作业数量
          </div>
          <!-- <el-select v-model="cType" class="selectBox" style="width: 110px">
            <el-option label="全部年级" value="全部年级"></el-option>
            <el-option label="一年级" value="一年级"></el-option>
            <el-option label="二年级" value="二年级"></el-option>
            <el-option label="三年级" value="三年级"></el-option>
          </el-select>
          <div class="timeDiv">
            <div @click="tType = 0" :class="{ isClick: tType == 0 }">周</div>
            <div @click="tType = 1" :class="{ isClick: tType == 1 }">月</div>
            <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
          </div> -->
        </div>
        <div class="info_box" v-if="skType == 1">
          <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
            <span>作业数量</span>
            <span>{{ worksCount }}</span>
          </div>
          <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
            <span>项目开展总数</span>
            <span>{{ haveWorksCourse }}</span>
          </div>
          <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
            <span>项目平均作业数量</span>
            <span>{{
              !worksCount ? 0 : (worksCount / haveWorksCourse).toFixed(0)
            }}</span>
          </div>
        </div>
        <div class="info_box" v-if="skType == 0">
          <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
            <span>累计时长</span>
            <span>{{ 132 }}</span>
          </div>
          <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
            <span>项目开展总数</span>
            <span>{{ haveWorksCourse }}</span>
          </div>
          <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
            <span>项目平均时长</span>
            <span>{{ 18 }}</span>
          </div>
        </div>
        <div class="dataBox" style="height: calc(100% - 110px);">
          <ToolUse style="height: calc(100%)" v-if="skType == 1" :worksYearArray="worksYearArray"></ToolUse>
          <Bar style="height: calc(100%)" v-if="skType == 0"></Bar>
          <!-- <div class="otherCss">
            <div v-if="!oType">切换为柱状图</div>
            <div v-if="oType">切换为热力图</div>
            <div class="otherImg" @click="otherEchart">
              <img src="../../../../assets/icon/other.png" alt="" />
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="center">
      <div class="top">
        <div class="titleBox">
          <div class="title" :class="{ isClick: courseType == 0 }" @click="courseType = 0"
            style="cursor: pointer; padding: 0 0 5px 0">
            项目分布
          </div>
          <div class="title" :class="{ isClick: courseType == 1 }" @click="courseType = 1"
            style="cursor: pointer; padding: 0 0 5px 0">
            项目总数增幅
          </div>
        </div>
        <div class="dataBox">
          <CateRank v-if="courseType == 0" style="height: calc(100%)" :courseArray="courseArray"></CateRank>
          <CourseNum v-if="courseType == 1" style="height: calc(100%)" :weekCourse2="weekCourse"></CourseNum>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox" style="justify-content: space-between">
          <div class="title">项目开展情况</div>
          <!-- <div v-if="!shType" style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            ">
            <el-select v-model="cType8" class="selectBox" style="width: 110px">
              <el-option label="全部年级" value="全部年级"></el-option>
            </el-select>
            <el-select v-model="cType9" class="selectBox" style="width: 110px">
              <el-option label="全部学科" value="全部学科"></el-option>
            </el-select>
          </div> -->
          <!-- <div v-if="shType" style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            ">
            <el-select v-model="cType1" class="selectBox" style="width: 110px">
              <el-option label="全部年级" value="全部年级"></el-option>
            </el-select>
            <el-select v-model="cType2" class="selectBox" style="width: 110px">
              <el-option label="全部学科" value="全部学科"></el-option>
            </el-select>
            <el-select v-model="cType3" class="selectBox" style="width: 110px">
              <el-option label="全部主题" value="全部主题"></el-option>
            </el-select>
          </div> -->
        </div>
        <div class="dataBox">
          <div v-if="!shType" style="height: calc(100% - 35px);overflow: auto;">
            <!-- <barFinish style="height: calc(100% / 3 - 10px);"></barFinish> -->
            <!-- <barCCourse style="height: calc(100% / 3 - 10px);"></barCCourse> -->
            <barTeacherStudent style="height: calc(100%);" :tsArray="tsArray"></barTeacherStudent>
            <!-- <barTime style="height: calc(100% / 4 - 10px);"></barTime> -->
          </div>
          <!-- <CourseTime v-if="!shType" style="height: calc(100% - 30px)"></CourseTime> -->
          <div class="info_box" v-if="shType">
            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
              <span>项目实施总数</span>
              <span>{{ haveWorksCourse }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
              <span>平台实施项目占比</span>
              <span>{{ haveWorksCourse && allCourse ? (haveWorksCourse / allCourse * 100).toFixed(0) + '%' : 0 + '%'
              }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
              <span>项目平均任务数量</span>
              <span>{{ taskCount && allCourse ? (taskCount / allCourse).toFixed(0) : 0 }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
              <span>项目平均作业数量</span>
              <span>{{ worksCount && allCourse ? (worksCount / allCourse).toFixed(0) : 0 }}</span>
            </div>
          </div>
          <WorkNum v-if="shType" style="height: calc(100% - 105px)" :workNumList="workNumList"></WorkNum>
          <div class="otherCss">
            <div v-if="!shType">转换为散点图</div>
            <div v-if="shType">转换为堆积柱状图</div>
            <div class="otherImg" @click="shEchart">
              <img src="../../../../assets/icon/other.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top" style="border-radius: 5px">
        <div class="titleBox" style="justify-content: space-between">
          <div style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            ">
            <div class="title" :class="{ isClick: toolType == 0 }" @click="toolType = 0"
              style="cursor: pointer; padding: 0 0 5px 0">
              项目占比
            </div>
            <div class="title" :class="{ isClick: toolType == 1 }" @click="toolType = 1"
              style="cursor: pointer; padding: 0 0 5px 0">
              工具使用
            </div>
          </div>
          <el-select v-model="cType4" class="selectBox" style="width: 110px" v-if="toolType == 0 && courseNumberArray.length"  @change="typeChange">
            <el-option label="赛道" value="box"></el-option>
            <el-option label="主题" value="theme"></el-option>
          </el-select>
          <!-- <div v-if="toolType == 1" style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            ">
            <el-select v-model="cType5" class="selectBox" style="width: 110px">
              <el-option label="全部学科" value="全部学科"></el-option>
              <el-option label="语文" value="语文"></el-option>
              <el-option label="数学" value="数学"></el-option>
            </el-select>
            <el-select v-model="cType6" class="selectBox" style="width: 110px">
              <el-option label="全部年级" value="全部年级"></el-option>
              <el-option label="一年级" value="一年级"></el-option>
              <el-option label="二年级" value="二年级"></el-option>
            </el-select>
          </div> -->
        </div>
        <div class="dataBox">
          <CourseAna style="height: calc(100% - 40px)" v-if="toolType == 0 && courseNumberArray.length" :courseNumberArray="courseNumberArray"></CourseAna>
          <ToolChart style="height: calc(100% - 40px)" v-if="toolType == 1" :toolArray="toolList"></ToolChart>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">项目学科分布</div>
        </div>
        <div class="dataBox">
          <subjuect style="height: calc(100% - 30px)" v-if="!xtType"></subjuect>
          <WorkTime style="height: calc(100% - 30px)" v-if="xtType" :personArray="personList"></WorkTime>
          <div class="otherCss">
            <div v-if="!xtType">转换为人员协同</div>
            <div v-if="xtType">转换为学科协同</div>
            <div class="otherImg" @click="xtEchart">
              <img src="../../../../assets/icon/other.png" alt="" />
            </div>
          </div>
        </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";
import Bar from "./chartList/bar.vue";
import CourseNum from "./chartList/courseNum.vue";
import ToolChart from "./chartList/toolChart.vue";
import subjuect from "./chartList/subjuect.vue";
import barFinish from "./chartList/bar/finish.vue";
import barCCourse from "./chartList/bar/cCourse.vue";
import barTeacherStudent from "./chartList/bar/teacherStudent.vue";
import barTime from "./chartList/bar/time.vue";
export default {
  components: {
    TeaFre,
    ToolUse,
    CateRank,
    WorkNum,
    CourseTime,
    CourseAna,
    WorkTime,
    Bar,
    CourseNum,
    ToolChart,
    subjuect,
    barFinish,
    barCCourse,
    barTeacherStudent,
    barTime,
  },
  props: {
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
  },
  data() {
    return {
      isLoading: false,
      cType: "全部年级",
      cType1: "全部年级",
      cType2: "全部学科",
      cType3: "全部主题",
      cType4: "box",
      cType5: "全部学科",
      cType6: "全部年级",
      cType7: "全部课程",
      cType8: "全部年级",
      cType9: "全部学科",
      toolType: 0,
      tType: 0,
      skType:  1,
      courseType: 0,
      sType: 0,
      oType: false,
      shType: true,
      xtType: false,
      allCourse: 0,
      courseTemplate: 0,
      loginCountMonthArray: [],
      haveWorksCourse: 0,
      worksCount: 0,
      workNumList: [],
      taskCount: 0,
      toolList: [],
      personList: [],
      weekCourse: [],
      tsArray: {},
      gradeCourseList:[],
      subjectCourseList:[],
      courseNumberArray:[],
      courseArray: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    otherEchart() {
      this.oType = !this.oType;
    },
    shEchart() {
      this.shType = !this.shType;
    },
    xtEchart() {
      this.xtType = !this.xtType;
    },
    format(percentage) {
      return percentage + '%';
    },
    getMonth() {
      // 获取当前时间
      var currentDate = new Date();

      // 获取本月的年份和月份
      var currentYear = currentDate.getFullYear();
      var currentMonth = currentDate.getMonth() + 1; // 月份从0开始，需要加1

      // 获取上个月的年份和月份
      var lastMonthYear, lastMonth;
      if (currentMonth === 1) {
        lastMonthYear = currentYear - 1;
        lastMonth = 12;
      } else {
        lastMonthYear = currentYear;
        lastMonth = currentMonth - 1;
      }
      // 获取本月的第一天和最后一天的日期
      var firstDayOfMonth = new Date(currentYear, currentMonth - 1, 1);
      var lastDayOfMonth = new Date(currentYear, currentMonth, 0);

      // 获取上个月的第一天和最后一天的日期
      var firstDayOfLastMonth = new Date(lastMonthYear, lastMonth - 1, 1);
      var lastDayOfLastMonth = new Date(lastMonthYear, lastMonth, 0);

      // 构建本月日期的数组
      var currentMonthDates = [];
      for (var i = 1; i <= lastDayOfMonth.getDate(); i++) {
        let a = new Date(currentYear, currentMonth - 1, i)
        currentMonthDates.push(a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate());
      }

      // 构建上个月日期的数组
      var lastMonthDates = [];
      for (var j = firstDayOfLastMonth.getDate(); j <= lastDayOfLastMonth.getDate(); j++) {
        let a = new Date(lastMonthYear, lastMonth - 1, j)
        lastMonthDates.push(a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate());
      }

      return {
        lastWeek: lastMonthDates,//上月
        toWeek: currentMonthDates //本月
      }
    },
    getData() {
      this.isLoading = true;
      let params = [
        {
          oid: this.oid,
          org: this.org,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "selectDataBoardStudentCourseNew", params)
        .then((res) => {
          this.isLoading = false;
          let _grade = JSON.parse(JSON.stringify(res.data[0])); //赛道
          let _subject = JSON.parse(JSON.stringify(res.data[1])); //主题
          this.allCourse = res.data[2][0].count; //课程总数
          let _timeCourse = res.data[3]; //查询半年内全部课程
          this.courseTemplate = res.data[4][0].count; //查询模板课程总数

          //将数据根据time里面的月份分成多个数组
          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,
                course: 0,
              });
            } else {
              loginCountMonthArray.push({
                Month: i,
                Year: Year,
                course: 0,
              });
            }
          }
          loginCountMonthArray = loginCountMonthArray.reverse();
          for (var i = 0; i < _timeCourse.length; i++) {
            let _date = new Date(_timeCourse[i].time);
            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].course++;
                break;
              }
            }
          }
          this.loginCountMonthArray = loginCountMonthArray;

          this.haveWorksCourse = res.data[5][0].count; //项目开展总数
          this.worksCount = res.data[6][0].count; //作业数量

          let worksArray = res.data[7];//一年内提交的作业
          let worksYearArray = []
          for (var i = Month; i > Month - 12; i--) {
            if (i <= 0) {
              worksYearArray.push({
                Year: Year - 1,
                Month: 12 + i,
                mon: 0,
                tue: 0,
                wed: 0,
                thur: 0,
                fri: 0,
                sat: 0,
                sun: 0,
              })
            } else {
              worksYearArray.push({
                Month: i,
                Year: Year,
                mon: 0,
                tue: 0,
                wed: 0,
                thur: 0,
                fri: 0,
                sat: 0,
                sun: 0,
              })
            }
          }
          worksYearArray = worksYearArray.reverse()
          for (var i = 0; i < worksArray.length; i++) {
            let _date = new Date(worksArray[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 < worksYearArray.length; j++) {
              if (_month == worksYearArray[j].Month && _year == worksYearArray[j].Year) {
                worksYearArray[j][dayArray[_day]]++
                break;
              }
            }
          }
          console.log(worksYearArray);
          this.worksYearArray = worksYearArray


          let _workCourse = res.data[8]; //带作业的课程
          let _taskCount = 0 //任务数量
          var toolAllArray = [
            { name: "电子白板", value: 0 },
            { name: "思维导图", value: 0 },
            { name: "表格", value: 0 },
            { name: "文档", value: 0 },
            { name: "资源库", value: 0 },
            { name: "拍照", value: 0 },
            { name: "投票", value: 0 },
            { name: "CocoPi", value: 0 },
            { name: "其他", value: 0 },
          ];
          var twoPerson = 0, threePerson = 0, fivePerson = 0, sevenPerson = 0;
          let personList = []
          var wList = [];

          var today = new Date();
          var lastDayOfWeek = new Date(today.setDate(today.getDate() - today.getDay() + 7));;//本周周日

          let weekArray = {
            lastWeek: [],//上周
            toWeek: [] //本周
          }
          let weekCourse = [{
            name: '项目数量',
            lastWeekCouseCount: 0,
            toWeekCouseCount: 0
          }]
          // for (var i = 0; i < 14; i++) {
          //   let time = JSON.parse(JSON.stringify(lastDayOfWeek))
          //   let time2 = new Date(time)
          //   var a = new Date(time2.setDate(time2.getDate() - i));
          //   if (i > 6) {
          //     weekArray.lastWeek.push(a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate());
          //   } else {
          //     weekArray.toWeek.push(a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate());
          //   }
          // }
          weekArray = this.getMonth()
          var _tsArray = {
            tt: 0,
            ts: 0,
            ss: 0,
          } //记录项目的师生分工

          for (var i = 0; i < _workCourse.length; i++) {
            if (!wList[_workCourse[i].courseId]) {
              let _date = new Date(weekArray.lastWeek[0])
              if (new Date(_workCourse[i].create_at) > _date) {
                var a = new Date(_workCourse[i].create_at)
                var string = a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate()
                if (weekArray.lastWeek.indexOf(string) != -1) {
                  weekCourse[0].lastWeekCouseCount++
                } else {
                  weekCourse[0].toWeekCouseCount++
                }
              }
              if ((_workCourse[i].type == _workCourse[i].type2 == 1) || (!_workCourse[i].type2 && _workCourse[i].type == 1)) {
                _tsArray.tt++
              } else if ((_workCourse[i].type == 2 && _workCourse[i].type2 == 1) || (_workCourse[i].type == 1 && _workCourse[i].type2 == 2)) {
                _tsArray.ts++
              } else if ((_workCourse[i].type == _workCourse[i].type2 == 2) || (!_workCourse[i].type2 && _workCourse[i].type == 2)) {
                _tsArray.ss++
              } else {
                _tsArray.ts++
              }
              wList[_workCourse[i].courseId] = {
                cid: _workCourse[i].courseId,
                title: _workCourse[i].title,
                task: 0,
                work: 0,
              };
              let chapters = JSON.parse(_workCourse[i].chapters);
              for (var j = 0; j < chapters.length; j++) {
                if (wList[_workCourse[i].courseId].task == 0) {
                  wList[_workCourse[i].courseId].task =
                    chapters[j].chapterInfo[0].taskJson.length;
                } else {
                  wList[_workCourse[i].courseId].task +=
                    chapters[j].chapterInfo[0].taskJson.length;
                }
                _taskCount += chapters[j].chapterInfo[0].taskJson.length;
                let _taskJson = chapters[j].chapterInfo[0].taskJson
                for (
                  var k = 0;
                  k < _taskJson.length;
                  k++
                ) {
                  console.log(_taskJson[k].toolArray);
                  for (
                    var q = 0;
                    q <
                      _taskJson[k].toolArray ? _taskJson[k].toolArray.length : 0;
                    q++
                  ) {
                    if (_taskJson[k].toolArray[q].tool == 1) {
                      toolAllArray[0].value++;
                    } else if (_taskJson[k].toolArray[q].tool == 3) {
                      toolAllArray[1].value++;
                    } else if (_taskJson[k].toolArray[q].tool == 48) {
                      toolAllArray[2].value++;
                    } else if (_taskJson[k].toolArray[q].tool == 52) {
                      toolAllArray[3].value++;
                    } else if (_taskJson[k].toolArray[q].tool == 51) {
                      toolAllArray[4].value++;
                    } else if (_taskJson[k].toolArray[q].tool == 54) {
                      toolAllArray[5].value++;
                    } else if (_taskJson[k].toolArray[q].tool == 56) {
                      toolAllArray[6].value++;
                    } else if (_taskJson[k].toolArray[q].tool == 57) {
                      toolAllArray[7].value++;
                    } else {
                      toolAllArray[8].value++;
                    }
                  }
                }
              }
              if (_workCourse[i].course_teacher) {
                if (_workCourse[i].course_teacher.split(',').length <= 2) {
                  twoPerson++
                } else if (4 >= _workCourse[i].course_teacher.split(',').length && _workCourse[i].course_teacher.split(',').length > 2) {
                  threePerson++;
                } else if (6 >= _workCourse[i].course_teacher.split(',').length && _workCourse[i].course_teacher.split(',').length > 4) {
                  fivePerson++;
                } else if (_workCourse[i].course_teacher.split(',').length >= 7) {
                  sevenPerson++;
                }
              }
            }
          }
          for (var i = 0; i < _workCourse.length; i++) {
            let a = Object.keys(wList);
            for (var j = 0; j < Object.keys(wList).length; j++) {
              if (_workCourse[i].courseId == wList[a[j]].cid && _workCourse[i].id) {
                wList[a[j]].work++;
              }
            }
          }
          var workNumList = Object.values(wList).map((item) => [
            item.task,
            item.work,
            item.title,
            item.cid,
          ]);
          this.workNumList = workNumList;
          this.taskCount = _taskCount
          this.toolList = toolAllArray;
          personList.push({ name: "2人以下", value: twoPerson }, { name: "3-4人", value: threePerson }, { name: "5-6人", value: fivePerson }, { name: "7人以上", value: sevenPerson });
          this.personList = personList;
          this.weekCourse = weekCourse;
          this.tsArray = _tsArray

          let _course = res.data[9]
          let _gradeCourseList = []
          let _subjectCourseList = []

          for (var i = 0; i < _grade.length; i++) {
            _gradeCourseList.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) {
                _gradeCourseList[i].course++
                _gradeCourseList[i].array.push(_course[z].courseid)
              }
            }
          }

          for (var i = 0; i < _subject.length; i++) {
            _subjectCourseList.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) {
                _subjectCourseList[i].course++
                _subjectCourseList[i].array.push(_course[z].courseid)
              }
            }
          }
          this.gradeCourseList = _gradeCourseList
          this.subjectCourseList = _subjectCourseList
          this.typeChange()


          let _courseArray = []
          let _gradeCourse = 0 //各年级上传课程
          let _subjectCourse = 0 //各学科上传课程
          _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++
              }
            }
          }

          this.courseArray = _courseArray
          this.$forceUpdate();
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    typeChange() { 
      if (this.cType4 === 'box') {
        this.courseNumberArray = this.gradeCourseList
      } else if (this.cType4 === 'theme') {
        this.courseNumberArray = this.subjectCourseList
      }
      this.$forceUpdate();
    },
  },
};
</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;
  box-sizing: border-box;
  width: 100%;
}

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

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

.title {
  color: #060e17;
  margin-right: 10px;
}

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

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

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

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

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

.timeDiv {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 0 0 15px;
}

.timeDiv>div {
  margin-right: 10px;
  cursor: pointer;
}

.isClick {
  color: #1684fc;
  border-bottom: 2px solid #1684fc;
  box-sizing: border-box;
}

.otherCss {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.otherImg {
  width: 20px;
  height: 20px;
  margin: 0 10px;
  cursor: pointer;
}

.otherImg>img {
  width: 100%;
  height: 100%;
}

.allBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.allBox_left {
  width: 30%;
  height: 100%;
}

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

.depth {
  width: calc(100% / 4 - 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) {}

.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: row;
  flex-wrap: nowrap;
  height: 60px;
  justify-content: space-between;
  align-items: 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 0 20px; */
  color: #565e6a;
  width: 60px;
  white-space: pre-wrap;
  word-break: break-all;
}

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

.blueBG {
  background: rgb(243, 248, 253);
  border: 2px solid rgb(234, 246, 255);
}
</style>