pbl-teacher-table/src/components/pages/dataBoardNew/school/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="cType" 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>{{ allUser }}</span>
            </div>
            <div class="info blueBG">
              <span>本月新增登录用户</span>
              <span v-if="loginCountMonthArray.length">{{ (loginCountMonthArray[loginCountMonthArray.length - 1].user -
                loginCountMonthArray[loginCountMonthArray.length - 2].user) < 0 ? 0 :
                loginCountMonthArray[loginCountMonthArray.length - 1].user -
                loginCountMonthArray[loginCountMonthArray.length - 2].user }}</span>
            </div>
            <div class="info blueBG">
              <span>本月登录用户总数</span>
              <span v-if="loginCountMonthArray.length">{{ loginCountMonthArray[loginCountMonthArray.length - 1].user
              }}</span>
            </div>
            <div class="info blueBG">
              <span>月登录环比</span>
              <span v-if="loginCountMonthArray.length">{{ (loginCountMonthArray[loginCountMonthArray.length - 1].user) > 0
                ? (((loginCountMonthArray[loginCountMonthArray.length - 1].user) / allUser) * 100).toFixed(0) + '%' : 0
              }}</span>
              <!-- <span v-if="loginCountMonthArray.length">{{ (loginCountMonthArray[loginCountMonthArray.length - 1].user -
                loginCountMonthArray[loginCountMonthArray.length - 2].user) < 0 ? 0 :
                (((loginCountMonthArray[loginCountMonthArray.length - 1].user -
                  loginCountMonthArray[loginCountMonthArray.length - 2].user) /
                  loginCountMonthArray[loginCountMonthArray.length - 2].user) * 100).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" :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="cType1" class="selectBox" style="width: 110px;margin-left:auto;">
            <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">
            <span>登录频次</span>
            <span>{{ countLogin }}</span>
          </div>
          <div class="info blueBG">
            <span>人均登录频次</span>
            <span>{{ countLogin > 0 ? (countLogin / allUser).toFixed(0) : 0 }}</span>
          </div>
        </div>
        <div class="info_box" v-if="skType == 0">
          <div class="info blueBG">
            <span>累计时长</span>
            <span>{{ userOnlineTime }}</span>
          </div>
          <div class="info blueBG">
            <span>人均使用时长</span>
            <span>{{ userOnlineTime > 0 ? (userOnlineTime / allUser).toFixed(0) : 0 }}</span>
          </div>
        </div>
        <div class="dataBox" style="height: calc(100% - 135px);">
          <!-- 登录频次热力图 -->
          <toolUser style="height: calc(100%)" v-if="skType == 1 && !oType1" :yearArray="loginCountYearArray"></toolUser>
          <!-- 登录频次柱状图 -->
          <toolUserBar style="height: calc(100%)" v-if="skType == 1 && oType1"
            :loginArray="[teacherLoginCount, studentLoginCount]"></toolUserBar>
          <!-- 在线时长柱状图 -->
          <!-- <bar style="height: calc(100%)" v-if="skType == 0 && !oType" :loginArray="[teacherOnlineTime, studentOnlineTime]"></bar> -->
          <loginTime style="height: calc(100%)" v-if="skType == 0 && !oType" :yearArray="userOnlineTime"></loginTime>
          <!-- 在线时长热力图 -->
          <barToolUser style="height: calc(100%)" v-if="skType == 0 && oType" :yearArray="allTimeYearArray"></barToolUser>
          <div class="otherCss" v-if="skType == 0">
            <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 class="otherCss" v-if="skType == 1">
            <div v-if="!oType1">切换为柱状图</div>
            <div v-if="oType1">切换为热力图</div>
            <div class="otherImg" @click="otherEchart1">
              <img src="../../../../assets/icon/other.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="top">
        <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: 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 class="title" :class="{ isClick: courseType == 2 }" @click="courseType = 2"
              style="cursor: pointer; padding: 0 0 5px 0">
              实施情况
            </div>
          </div>
          <!-- <div style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            ">
            <el-select v-model="cType3" class="selectBox" style="width: 110px" v-if="courseType == 1">
              <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>
          </div> -->
        </div>
        <div class="dataBox">
          <teacherInfo v-if="courseType == 0" style="height: calc(100%)" :courseArray="courseArray"></teacherInfo>
          <courseNum v-if="courseType == 1" style="height: calc(100%)" :weekCourse2="weekCourse2"></courseNum>
          <div style="height: calc(100%)" v-if="courseType == 2">
            <div class="info_box" style="width: 96%;">
              <div class="info blueBG" style="width:calc(100% / 4 - 10px)">
                <span>平台实施课程总数</span>
                <span>{{ isCourseCount }}</span>
              </div>
              <div class="info blueBG" style="width:calc(100% / 4 - 10px)">
                <span>平台实施课程占比</span>
                <span>{{ isCourseCount ? (isCourseCount / allCourseCount * 100).toFixed(0) + '%' : '0%' }}</span>
              </div>
              <div class="info blueBG" style="width:calc(100% / 4 - 10px)">
                <span>课程平均任务数量</span>
                <span>{{ isCourseCount ? (taskCount / isCourseCount).toFixed(0) : 0 }}</span>
              </div>
              <div class="info blueBG" style="width:calc(100% / 4 - 10px)">
                <span>课程平均作业数量</span>
                <span>{{ isCourseCount ? (workCount / isCourseCount).toFixed(0) : 0 }}</span>
              </div>
            </div>
            <workNum style="height:calc(100% - 70px)" :workNumList="workNumList" @openCourse="openCourse"></workNum>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox" style="justify-content: space-between">
          <div class="title">平台使用概况</div>
          <div class="tCircleC">
            <div class="tCircleBox">
              <span class="tCircle ts"></span>
              <span class="tname">老师</span>
            </div>
            <div class="tCircleBox">
              <span class="tCircle tt"></span>
              <span class="tname">学生</span>
            </div>
          </div>
          <!-- <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="dataBox">
          <div class="depth_box" style="height: calc(100%)">
            <div class="depth">
              <span>上传课程</span>
              <div>
                <el-progress :width="80" type="circle"
                  :percentage="lightJson.upCourseTeachers ? parseInt((lightJson.upCourseTeachers / lightJson.teachers * 100).toFixed(0)) : 0"
                  :stroke-width="5" :format="format" color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>上传项目</span>
              <div>
                <el-progress :width="80" type="circle"
                  :percentage="lightJson.upSCourseTeachers ? parseInt((lightJson.upSCourseTeachers / lightJson.teachers * 100).toFixed(0)) : 0"
                  :stroke-width="5" :format="format" color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>使用工具</span>
              <div>
                <el-progress :width="80" type="circle"
                  :percentage="lightJson.toolTeachers ? parseInt((lightJson.toolTeachers / lightJson.teachers * 100).toFixed(0)) : 0"
                  :stroke-width="5" :format="format" color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>协同合作</span>
              <div>
                <el-progress :width="80" type="circle"
                  :percentage="lightJson.gCourseTeachers ? parseInt((lightJson.gCourseTeachers / lightJson.teachers * 100).toFixed(0)) : 0"
                  :stroke-width="5" :format="format" color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>互动交流</span>
              <div>
                <el-progress :width="80" type="circle"
                  :percentage="lightJson.commentTeachers ? parseInt((lightJson.commentTeachers / lightJson.teachers * 100).toFixed(0)) : 0"
                  :stroke-width="5" :format="format" color="#106BFF"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>参与课程</span>
              <div>
                <el-progress :width="80" type="circle"
                  :percentage="lightJson.courseStudents ? parseInt((lightJson.courseStudents / lightJson.students * 100).toFixed(0)) : 0"
                  :stroke-width="5" :format="format" color="#53c95f"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>参与项目</span>
              <div>
                <el-progress :width="80" type="circle"
                  :percentage="lightJson.scourseStudents ? parseInt((lightJson.scourseStudents / lightJson.students * 100).toFixed(0)) : 0"
                  :stroke-width="5" :format="format" color="#53c95f"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>使用工具</span>
              <div>
                <el-progress :width="80" type="circle"
                  :percentage="lightJson.toolStudents ? parseInt((lightJson.toolStudents / lightJson.students * 100).toFixed(0)) : 0"
                  :stroke-width="5" :format="format" color="#53c95f"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>协同合作</span>
              <div>
                <el-progress :width="80" type="circle"
                  :percentage="lightJson.gsCourseStudents ? parseInt((lightJson.gsCourseStudents / lightJson.students * 100).toFixed(0)) : 0"
                  :stroke-width="5" :format="format" color="#53c95f"></el-progress>
              </div>
            </div>
            <div class="depth">
              <span>互动交流</span>
              <div>
                <el-progress :width="80" type="circle"
                  :percentage="lightJson.commentStudents ? parseInt((lightJson.commentStudents / lightJson.students * 100).toFixed(0)) : 0"
                  :stroke-width="5" :format="format" color="#53c95f"></el-progress>
              </div>
            </div>
          </div>
          <!-- <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 class="title">整体分布</div>
          <div style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            ">
            <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>
            <!-- <el-select v-model="cType4" class="selectBox" style="width: 110px">
              <el-option label="全部" value="全部"></el-option>
            </el-select>
            <el-select v-model="cType5" class="selectBox" style="width: 110px">
              <el-option label="总量占比" value="总量占比"></el-option>
            </el-select> -->
          </div>
        </div>
        <div class="dataBox">
          <courseInfo style="height: calc(100% - 40px)" :courseNumberArray="courseNumberArray"></courseInfo>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox" style="justify-content: space-between">
          <div class="title">跨学科教学情况</div>
          <!-- <el-select v-model="cType6" class="selectBox" style="width: 110px">
            <el-option label="全部" value="全部"></el-option>
          </el-select> -->
        </div>
        <div class="dataBox">
          <cateRank style="height: calc(100%)" :resultSubject="resultSubject"></cateRank>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loginCount from "./loginCount";
import teacherInfo from "./teacherInfo";
import courseInfo from "./courseInfo";
import cateRank from "./cateRank";
import toolUser from "./toolUser";
import bar from "./bar";
import courseNum from "./courseNum";
import workNum from "./workNum";
import barToolUser from "./barToolUser";
import toolUserBar from "./toolUserBar";
import loginTime from "./loginTime";



export default {
  components: {
    loginCount,
    teacherInfo,
    courseInfo,
    cateRank,
    toolUser,
    bar,
    courseNum,
    workNum,
    barToolUser,
    toolUserBar,
    loginTime
  },
  props: {
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
  },
  data() {
    return {
      isLoading: false,
      cType: "grade",
      cType1: "全部年级",
      cType2: "全部活动",
      cType3: "按年级",
      cType4: "全部",
      cType5: "总量占比",
      cType6: "全部",
      skType: 0,
      tType: 0,
      courseType: 0,
      oType: false,
      oType1: false,
      shType: false,
      allUser: 0,
      loginCountMonthArray: [],
      countLogin: 0,
      loginCountYearArray: [],
      userOnlineTime: '',
      teacherOnlineTime: [],
      studentOnlineTime: [],
      courseArray: [],
      workNumList: [],
      taskCount: 0,
      workCount: 0,
      isCourseCount: 0,
      allCourseCount: 0,
      allArray: [],
      gradeArray: [],
      themeArray: [],
      subjectArray: [],
      courseNumberArray: [],
      lightJson: {
        teachers: 0,
        students: 0,
        upCourseTeachers: 0,//上传课程
        upSCourseTeachers: 0,//上传项目
        gCourseTeachers: 0,//协同课程
        toolTeachers: 0,//使用工具
        commentTeachers: 0,//交流
        courseStudents: 0,//参与课程
        scourseStudents: 0,//参与项目
        toolStudents: 0,//使用工具
        gsCourseStudents: 0,//协同课程
        commentStudents: 0,//协同交流
      },
      weekCourse2: [],
      allTimeYearArray: [],
      teacherLoginCount: 0,
      studentLoginCount: 0,
      resultSubject: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    openCourse(cid) {
      window.parent.postMessage({ cid: cid, screenType: "3" }, "*");
    },
    otherEchart() {
      this.oType = !this.oType;
    },
    otherEchart1() {
      this.oType1 = !this.oType1;
    },
    shEchart() {
      this.shType = !this.shType;
    },
    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 + "selectDataBoardSchoolNew", params)
        .then((res) => {
          this.isLoading = false;
          let _grade = res.data[0]; //年级
          let _subject = JSON.parse(JSON.stringify(res.data[1])); //学科
          let _theme = res.data[2]; //主题

          this.allUser = res.data[3][0].count; //总人数
          let _loginCount = res.data[4]; //统计半年的登录用户

          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,
                user: 0,
              })
            } else {
              loginCountMonthArray.push({
                Month: i,
                Year: Year,
                user: 0,
              })
            }
          }
          loginCountMonthArray = loginCountMonthArray.reverse()
          for (var i = 0; i < _loginCount.length; i++) {
            let _date = new Date(_loginCount[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].user++
                break;
              }
            }
          }
          this.loginCountMonthArray = loginCountMonthArray

          let countLogin = res.data[5][0].count; //总的登录频次
          this.countLogin = countLogin

          let loginCountYear = res.data[6];//一年的登录频次
          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;
              }
            }
          }
          this.loginCountYearArray = loginCountYearArray

          let _userOnlineTime = res.data[7][0].time;//在线时长 所有用户
          let _teacherOnlineTime = res.data[8][0].time;//在线时长 老师
          let _studentOnlineTime = res.data[9][0].time;//在线时长 学生
          _userOnlineTime = (_userOnlineTime / 60 / 60).toFixed(0)
          _teacherOnlineTime = (_teacherOnlineTime / 60 / 60).toFixed(0)
          _studentOnlineTime = (_studentOnlineTime / 60 / 60).toFixed(0)
          this.userOnlineTime = _userOnlineTime
          this.teacherOnlineTime = _teacherOnlineTime
          this.studentOnlineTime = _studentOnlineTime


          let _course = res.data[10] //课程
          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++
              }
            }
          }
          // this.gradeCourse = _gradeCourse / _grade.length
          // this.subjectCourse = _subjectCourse / _subject.length
          this.courseArray = _courseArray


          let _workCourse = res.data[11]; //带作业的课程
          let _taskCount = 0 //任务数量

          var wList = [];
          for (var i = 0; i < _workCourse.length; i++) {
            if (!wList[_workCourse[i].courseId]) {
              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;
              }
            }
          }
          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.workCount = _workCourse.length
          this.isCourseCount = res.data[12][0].count; //课程开展总数
          this.allCourseCount = res.data[13][0].count; //课程总数

          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();

          this.lightJson.teachers = res.data[14][0].count; //教师总数
          this.lightJson.students = res.data[15][0].count; //学生总数
          this.lightJson.upCourseTeachers = res.data[16][0].count; //上传课程老师数量
          this.lightJson.upSCourseTeachers = res.data[17][0].count; //上传项目老师数量
          this.lightJson.toolTeachers = res.data[18][0].count; //使用工具老师数量
          this.lightJson.gCourseTeachers = res.data[19][0].count; //协同课程老师数量
          this.lightJson.commentTeachers = res.data[20][0].count; //协同交流老师数量
          this.lightJson.courseStudents = res.data[21][0].count; //参与课程学生数量
          this.lightJson.scourseStudents = res.data[22][0].count; //参与项目学生数量
          this.lightJson.toolStudents = res.data[23][0].count; //使用工具数量
          this.lightJson.gsCourseStudents = res.data[24][0].count; //获取协同项目数量
          this.lightJson.commentStudents = res.data[25][0].count; //互动交流学生数量

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

          let weekArray = {
            lastWeek: [],//上周
            toWeek: [] //本周
          }
          // 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()
          let weekCourse = [];
          let weekCourse2 = [];
          let lastWeekCouseCount = 0
          let toWeekCouseCount = 0
          for (var z = 0; z < _course.length; z++) {
            let _date = new Date(weekArray.lastWeek[0])
            console.log(_date);
            if (new Date(_course[z].create_at) > _date && _course[z].pid == '34628934-d02f-11ec-8c78-005056b86db5') {
              weekCourse.push(_course[z])
              var a = new Date(_course[z].create_at)
              var string = a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate()
              if (weekArray.lastWeek.indexOf(string) != -1) {
                lastWeekCouseCount++
              } else {
                toWeekCouseCount++
              }
              // if (weekArray.toWeek.indexOf(string) == -1) {
              //   lastWeekCouseCount++
              // }
            }
          }

          let lastCourseidWeek = []
          let toCourseidWeek = []
          for (var i = 0; i < _grade.length; i++) {
            weekCourse2.push({
              name: _grade[i].name,
              id: _grade[i].id,
              lastCourse: 0,
              toCourse: 0,
            })
            for (var z = 0; z < weekCourse.length; z++) {
              if (weekCourse[z].typeid == _grade[i].id) {
                var a = new Date(weekCourse[z].create_at)
                var string = a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate()
                if (weekArray.lastWeek.indexOf(string) != -1) {
                  weekCourse2[i].lastCourse++
                  if (lastCourseidWeek.indexOf(weekCourse[z].courseid) === -1) {
                    lastCourseidWeek.push(weekCourse[z].courseid)
                  }
                } else {
                  weekCourse2[i].toCourse++
                  if (toCourseidWeek.indexOf(weekCourse[z].courseid) === -1) {
                    toCourseidWeek.push(weekCourse[z].courseid)
                  }
                }
                // if (weekArray.toWeek.indexOf(string) == -1) {
                //   weekCourse2[i].lastCourse++
                //   if (lastCourseidWeek.indexOf(weekCourse[z].courseid) === -1) {
                //     lastCourseidWeek.push(weekCourse[z].courseid)
                //   }
                // } 

                //   weekCourse2[i].toCourse++
                //   if (toCourseidWeek.indexOf(weekCourse[z].courseid) === -1) {
                //     toCourseidWeek.push(weekCourse[z].courseid)
                //   }
              }
            }
          }
          // weekCourse2.push({
          //   name: '其他',
          //   id: '',
          //   lastCourse: (lastWeekCouseCount - lastCourseidWeek.length) > 0 ? (lastWeekCouseCount - lastCourseidWeek.length) : 0,
          //   toCourse: (toWeekCouseCount - toCourseidWeek.length) > 0 ? (toWeekCouseCount - toCourseidWeek.length) : 0,
          // })

          this.weekCourse2 = weekCourse2

          let allTimeYear = res.data[26]; //累计时长热力图
          this.teacherLoginCount = res.data[27].length; //教师登录频次柱状图
          this.studentLoginCount = res.data[28].length; //学生登录频次柱状图

          let allTimeYearArray = []
          for (var i = Month; i > Month - 12; i--) {
            if (i <= 0) {
              allTimeYearArray.push({
                Year: Year - 1,
                Month: 12 + i,
                mon: 0,
                tue: 0,
                wed: 0,
                thur: 0,
                fri: 0,
                sat: 0,
                sun: 0,
              })
            } else {
              allTimeYearArray.push({
                Month: i,
                Year: Year,
                mon: 0,
                tue: 0,
                wed: 0,
                thur: 0,
                fri: 0,
                sat: 0,
                sun: 0,
              })
            }
          }
          allTimeYearArray = allTimeYearArray.reverse()
          for (var i = 0; i < allTimeYear.length; i++) {
            let _date = new Date(allTimeYear[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 < allTimeYearArray.length; j++) {
              if (_month == allTimeYearArray[j].Month && _year == allTimeYearArray[j].Year) {
                allTimeYearArray[j][dayArray[_day]] += parseInt((parseInt(allTimeYear[i].text) / 3600).toFixed(0));
                break;
              }
            }
          }
          this.allTimeYearArray = allTimeYearArray


          let CourseLabel = res.data[29]; //带分类的课程
          let _subject2 = JSON.parse(JSON.stringify(res.data[1]))
          const resultSubject = [];
          for (let i = 0; i < _subject2.length - 1; i++) {
            for (let j = i + 1; j < _subject2.length; j++) {
              resultSubject.push({
                id: [_subject2[i].id, _subject2[j].id],
                name: [_subject2[i].name, _subject2[j].name],
                count: 0,
              });
            }
          }

          for(var i = 0; i < CourseLabel.length; i++){
            let array = CourseLabel[i].type.split(',');
            for(var j = 0; j < resultSubject.length; j++){
              if(this.checkArrayInclusion(resultSubject[j].id, array)){
                resultSubject[j].count++
              }
            }
          }

          let resultSubject2 = []

          for(var i = 0; i < resultSubject.length; i++){
            let el = resultSubject[i]
            if(el.count > 0){
              resultSubject2.push([el.name[0], el.name[1], el.count])
            }
          }

          this.resultSubject = resultSubject2
          console.log(resultSubject);
          this.$forceUpdate();
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    checkArrayInclusion(arr1, arr2) {
      return arr1.every(item => arr2.includes(item));
    },
    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
      }
      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% / 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;
  box-sizing: border-box;
  width: 100%;
}

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

.dataBox {
  height: calc(100% - 40px);
  width: 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;
}

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

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

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

.tCircleC {
  display: flex;
  align-items: center;
}

.tCircleBox {
  display: flex;
  align-items: center;
}

.tCircleBox>span+span {
  margin-left: 5px;
}

.tCircleBox+.tCircleBox {
  margin-left: 10px;
}

.tCircleBox .tCircle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.tCircleBox .tt {
  background: #53c95f;
}

.tCircleBox .ts {
  background: #106BFF;
}
</style>