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

<template>
  <div class="body1">
    <loading :isLoading="isLoading"></loading>
    <!-- 综合数据 -->
    <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, noClick: skType != 0 }" @click="skType = 0"
            style="cursor: pointer; padding: 0 0 5px 0">
            在线时长
          </div>
          <div class="title" :class="{ isClick: skType == 1, noClick: 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% - 155px)">
          <!-- 登录频次热力图 -->
          <toolUser style="height: calc(100%)" v-if="skType == 1 && !oType1" :Josn="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" :Josn="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 class="dataBoard_check_box" v-if="skType == 0">
          <div class="icon yb_icon" :class="{ active: !oType }" @click="oType = false"><span>仪表盘</span></div>
          <div class="icon rl_icon" :class="{ active: oType }" @click="oType = true"><span>热力图</span></div>
        </div>
        <div class="dataBoard_check_box" v-if="skType == 1">
          <div class="icon zz_icon" :class="{ active: oType1 }" @click="oType1 = true"><span>柱状图</span></div>
          <div class="icon rl_icon" :class="{ active: !oType1 }" @click="oType1 = false"><span>热力图</span></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, noClick: courseType != 0 }" @click="courseType = 0"
              style="cursor: pointer; padding: 0 0 5px 0">
              整体分布
            </div>
            <div class="title" :class="{ isClick: courseType == 1, noClick: courseType != 1 }" @click="courseType = 1"
              style="cursor: pointer; padding: 0 0 5px 0">
              总量增幅
            </div>
            <div class="title" :class="{ isClick: courseType == 2, noClick: 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% - 10px)" :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";
import loading from "../../components/loading.vue";

export default {
  components: {
    loginCount,
    teacherInfo,
    courseInfo,
    cateRank,
    toolUser,
    bar,
    courseNum,
    workNum,
    barToolUser,
    toolUserBar,
    loginTime,
    loading,
  },
  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.topU.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,
          type: '1'
        },
      ];//selectDataBoardSchoolNew
      this.ajax
        .post(this.$store.state.api + "getDataBoardSchoolNew", 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].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].user++
                loginCountMonthArray[j].user += _loginCount[i].usernum;
                break;
              }
            }
          }
          this.loginCountMonthArray = loginCountMonthArray;

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

          let loginCountYear = res.data[6]; //一年的登录频次
          let loginCountYearArray = {};
          let timeArray = [];
          for (var i = 0; i < loginCountYear.length; i++) {
            timeArray.push({ time: loginCountYear[i].time, num: loginCountYear[i].usernum });
          }
          timeArray.forEach((item) => {
            loginCountYearArray[item.time] = loginCountYearArray[item.time] + item.num || item.num;
          });
          // 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].time)
          //   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]]+=loginCountYear[i].usernum
          //       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: _workCourse[i].pcount,
              };
              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,
              totalCourse: 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][0].count; //教师登录频次柱状图
          this.studentLoginCount = res.data[28][0].count; //学生登录频次柱状图
          let allTimeYearArray = {};
          let timeArray1 = [];
          for (var i = 0; i < allTimeYear.length; i++) {
            timeArray1.push({
              vtime: allTimeYear[i].vtime,
              time: allTimeYear[i].time,
            });
          }
          timeArray1.forEach((item) => {
            allTimeYearArray[item.vtime] = parseInt((item.time / 60 / 60).toFixed(0))
          });
          // 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].time) / 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;
          this.$message.error(
            "因加载数据量过大，服务器统计异常，请联系管理员。"
          );
          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;
  position: relative;
}

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

.left>.top {
  width: 100%;
  height: calc(100% / 5 * 2.7 - 5px);
  /* background: #fff; */
  border-radius: 5px;
  margin: 0 0 10px 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
  border: 2px solid #fff;
  box-sizing: border-box;
}

.left>.bottom {
  width: 100%;
  height: calc(100% / 5 * 2.3 - 5px);
  /* background: #fff; */
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
  border: 2px solid #fff;
  box-sizing: border-box;
}

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

.center>.top {
  width: 100%;
  height: calc(100% / 5 * 2.7 - 5px);
  /* background: #fff; */
  border-radius: 5px;
  margin: 0 0 10px 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
  border: 2px solid #fff;
  box-sizing: border-box;
}

.center>.bottom {
  width: 100%;
  height: calc(100% / 5 * 2.3 - 5px);
  /* background: #fff; */
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
  border: 2px solid #fff;
  box-sizing: border-box;
}

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

.right>.top {
  width: 100%;
  height: calc(100% / 5 * 2.7 - 5px);
  /* background: #fff; */
  border-radius: 5px;
  margin: 0 0 10px 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
  border: 2px solid #fff;
  box-sizing: border-box;
}

.right>.bottom {
  width: 100%;
  height: calc(100% / 5 * 2.3 - 5px);
  /* background: #fff; */
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 251, 0.8) 100%);
  border: 2px solid #fff;
  box-sizing: border-box;
}

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

.titleBox::after {
  content: '';
  position: absolute;
  height: 2px;
  width: calc(100% - 30px);
  bottom: 0;
  background: linear-gradient(90deg, rgba(54, 129, 252, 0.6) 0%, rgba(54, 129, 252, 0.1) 100%);
}

.title {
  color: #060e17;
  margin-right: 25px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.title::before {
  content: '';
  background-image: url('../../../../assets/icon/test/data_title_icon.png');
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.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;
  border: 1px solid #3681FC;
}

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

.noClick {
  font-weight: 500;
  opacity: .6;
}

.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: column-reverse;
  flex-wrap: nowrap;
  height: 60px;
  justify-content: center;
  /* 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>