pbl-teacher-table/src/components/pages/dataBoardNew/course/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>{{ count }}</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>{{ weekCount }}</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> -->
            </div>
            <div class="info blueBG">
              <span>模板课程总数</span>
              <span>{{ 0 }}</span>
              <!-- <span>{{ courseTemplate }}</span> -->
            </div>
            <div class="info blueBG">
              <span>本月新增课程总数</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span v-if="loginCountMonthArray.length">{{
                loginCountMonthArray[loginCountMonthArray.length - 1].course
              }}</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-if="skType == 0" v-model="lType" @change="typeChange1" class="selectBox" style="margin-left: auto">
            <!-- <el-option label="全部" value="all"></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-if="skType == 1" v-model="lType1" @change="typeChange2" class="selectBox"
            style="margin-left: auto">
            <!-- <el-option label="全部" value="all"></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="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="dataBox">
          <div class="info_box" style="width: 96%" v-if="skType == 0">
            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
              <span>累计时长</span>
              <!-- <span>{{ count }}</span> -->
              <span>{{ allTime }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
              <span>课程实施总数</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{ courseLength }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
              <span>课均时长</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{
                allTime == 0 ? 0 : (allTime / courseLength).toFixed(0)
              }}</span>
            </div>
          </div>
          <div class="info_box" style="width: 96%" v-if="skType == 1">
            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
              <span>作业数量</span>
              <!-- <span>{{ count }}</span> -->
              <span>{{ worksCount }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
              <span>课程开展总数</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{ haveWorksCourse }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
              <span>课程平均作业数量</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{
                worksCount == 0 ? 0 : (worksCount / haveWorksCourse).toFixed(0)
              }}</span>
            </div>
          </div>
          <Bar style="height: calc(100% - 70px)" v-if="skType == 0 && !oType" :workList="tedurArray"></Bar>
          <!-- <ToolUse2 style="height: calc(100% - 100px)" v-if="skType == 0 && oType" :yearArray="courseWorksCountYearArray"></ToolUse2> -->

          <ToolUse style="height: calc(100% - 100px)" v-if="skType == 1 && !oType2"
            :yearArray="courseWorksCountYearArray"></ToolUse>
          <Bar2 style="height: calc(100% - 100px)" v-if="skType == 1 && oType2" :workList="tedurArray2"></Bar2>
          <!-- <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="!oType2">切换为热力图</div>
            <div v-if="oType2">切换为柱状图</div>
            <div class="otherImg" @click="otherEchart2">
              <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="weekCourse2"></CourseNum>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox" style="justify-content: space-between">
          <div class="title">课程实施程度</div>
        </div>
        <div class="dataBox">
          <div class="allBox" v-if="!shType" style="height: calc(100% - 30px)">
            <div class="allBox_left">
              <CourseTime v-if="!shType" :pusaDep="pusaDep"></CourseTime>
            </div>
            <div class="allBox_right">
              <div class="depth">
                <span>已提交作业</span>
                <div>
                  <el-progress :width="80" type="circle" :percentage="allCourse
                    ? parseInt(
                      ((haveWorksCourse / allCourse) * 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="allCourse
                    ? parseInt(((evaCount / allCourse) * 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="allCourse
                    ? parseInt(
                      ((evaWorksCount / allCourse) * 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="allCourse
                    ? parseInt(
                      ((evaWorksCount / allCourse) * 100).toFixed(0)
                    )
                    : 0
                    " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
                </div>
              </div>
            </div>
          </div>
          <div class="info_box" v-if="shType">
            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
              <span>平台实施课程总数</span>
              <!-- <span>{{ count }}</span> -->
              <span>{{ isCourseCount }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
              <span>平台实施课程占比</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{
                isCourseCount
                ? ((isCourseCount / allCourseCount) * 100).toFixed(0) + "%"
                : "0%"
              }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
              <span>课程平均任务数量</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{
                isCourseCount ? (taskCount / isCourseCount).toFixed(0) : 0
              }}</span>
            </div>
            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
              <span>课程平均作业数量</span>
              <!-- <span>{{ weekCount }}</span> -->
              <span>{{
                isCourseCount ? (workCount / isCourseCount).toFixed(0) : 0
              }}</span>
            </div>
          </div>
          <WorkNum style="height: calc(100% - 95px)" :workNumList="workNumList" @openCourse="openCourse" v-if="shType">
          </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" @change="typeChange" class="selectBox" v-if="toolType == 0">
            <!-- <el-option label="全部" value=""></el-option> -->
            <el-option label="年级" value="grade"></el-option>
            <el-option label="主题" value="theme"></el-option>
            <el-option label="学科" value="subject"></el-option>
          </el-select>
        </div>
        <div class="dataBox">
          <CourseAna style="height: calc(100%)" :courseNumberArray="courseNumberArray" v-if="toolType == 0"></CourseAna>
          <ToolChart style="height: calc(100%)" :toolArray="toolList" v-if="toolType == 1"></ToolChart>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div class="title">课程协同情况</div>
        </div>
        <div class="dataBox">
          <WorkTime style="height: calc(100% - 25px)" :personArray="personList" v-if="xtType"></WorkTime>
          <Subjuect style="height: calc(100% - 25px)" v-if="!xtType"></Subjuect>
          <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 ToolUse2 from "./chartList/toolUse2.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 Bar2 from "./chartList/bar2.vue";
import CourseNum from "./chartList/courseNum.vue";
import ToolChart from "./chartList/toolChart.vue";
import Subjuect from "./chartList/subjuect.vue";
export default {
  components: {
    TeaFre,
    ToolUse,
    ToolUse2,
    CateRank,
    WorkNum,
    CourseTime,
    CourseAna,
    WorkTime,
    Bar,
    Bar2,
    CourseNum,
    ToolChart,
    Subjuect,
  },
  props: {
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
  },
  data() {
    return {
      isLoading: false,
      cType: "全部年级",
      cType4: "grade",
      cType7: "全部课程",
      toolType: 0,
      tType: 0,
      skType: 0,
      courseType: 0,
      sType: 0,
      oType: false,
      oType2: false,
      shType: true,
      xtType: false,
      allCourse: 0,
      courseTemplate: 0,
      loginCountMonthArray: [],
      lType: "grade",
      lType1: "grade",
      allTimeList: [],
      tedurArray: [],
      tedurArray2: [],
      classList: [],
      subjectList: [],
      themeList: [],
      allTime: 0,
      allTimeLength: 0,
      gradeLength: 0,
      subjectLength: 0,
      themeLength: 0,
      courseTList: [],
      courseLength: 0,
      courseWorksCountYearArray: [],
      allCourseWorks: [],
      gradeList: [],
      subjectList2: [],
      thList: [],
      worksCount: 0,
      haveWorksCourse: 0,
      courseNumberArray: [],
      gradeArray: [],
      subjectArray: [],
      themeArray: [],
      allArray: [],
      toolList: [],
      personList: [],
      workNumList: [],
      taskCount: 0,
      workCount: 0,
      isCourseCount: 0,
      allCourseCount: 0,
      courseArray: [],
      evaCount: 0,
      evaWorksCount: 0,
      pusaDep: [
        { value: 0, name: "课程总数" },
        { value: 0, name: "设置评价课程" },
        { value: 0, name: "已提交作业课程" },
        { value: 0, name: "已评价课程" },
        { value: 0, name: "教学评一体化课程" },
      ],
      weekCourse2: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    openCourse(cid) {
      window.parent.postMessage({ cid: cid, screenType: "3" }, "*");
    },
    otherEchart() {
      this.oType = !this.oType;
    },
    otherEchart2() {
      this.oType2 = !this.oType2;
    },
    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 //本月
      }
    },
    typeChange1() {
      var a = [];
      if (this.lType == "all") {
        // a = this.classList.concat(this.subjectList, this.themeList);
        a = this.allTimeList;
        this.courseLength = this.allTimeLength;
      } else if (this.lType == "grade") {
        a = this.classList;
        this.courseLength = this.gradeLength;
      } else if (this.lType == "subject") {
        a = this.subjectList;
        this.courseLength = this.subjectLength;
      } else {
        a = this.themeList;
        this.courseLength = this.themeLength;
      }
      this.tedurArray = a;
      var time = 0;
      for (var i = 0; i < a.length; i++) {
        if (a[i].time) {
          time += a[i].time;
        }
      }
      this.allTime = time;

      this.$forceUpdate();
    },
    typeChange2() {
      const date = new Date();
      var Month = date.getMonth() + 1;
      var Year = date.getFullYear();
      let courseWorksCountYearArray = [];
      for (var i = Month; i > Month - 12; i--) {
        if (i <= 0) {
          courseWorksCountYearArray.push({
            Year: Year - 1,
            Month: 12 + i,
            mon: 0,
            tue: 0,
            wed: 0,
            thur: 0,
            fri: 0,
            sat: 0,
            sun: 0,
          });
        } else {
          courseWorksCountYearArray.push({
            Month: i,
            Year: Year,
            mon: 0,
            tue: 0,
            wed: 0,
            thur: 0,
            fri: 0,
            sat: 0,
            sun: 0,
          });
        }
      }
      courseWorksCountYearArray = courseWorksCountYearArray.reverse();

      for (var i = 0; i < this.allCourseWorks.length; i++) {
        let _date = new Date(this.allCourseWorks[i].create_at);
        let _type = this.allCourseWorks[i].typeid;
        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 < courseWorksCountYearArray.length; j++) {
          if (this.lType1 == "all") {
            if (
              _month == courseWorksCountYearArray[j].Month &&
              _year == courseWorksCountYearArray[j].Year
            ) {
              courseWorksCountYearArray[j][dayArray[_day]]++;
              break;
            }
          } else if (this.lType1 == "grade") {
            if (
              _month == courseWorksCountYearArray[j].Month &&
              _year == courseWorksCountYearArray[j].Year &&
              this.gradeList.indexOf(_type) != -1
            ) {
              courseWorksCountYearArray[j][dayArray[_day]]++;
              break;
            }
          } else if (this.lType1 == "subject") {
            if (
              _month == courseWorksCountYearArray[j].Month &&
              _year == courseWorksCountYearArray[j].Year &&
              this.subjectList2.indexOf(_type) != -1
            ) {
              courseWorksCountYearArray[j][dayArray[_day]]++;
              break;
            }
          } else {
            if (
              _month == courseWorksCountYearArray[j].Month &&
              _year == courseWorksCountYearArray[j].Year &&
              this.thList.indexOf(_type) != -1
            ) {
              courseWorksCountYearArray[j][dayArray[_day]]++;
              break;
            }
          }
        }
      }

      var worksCount = 0,
        haveWorksCourse = [];
      for (var i = 0; i < this.allCourseWorks.length; i++) {
        if (this.lType1 == "all") {
          if (this.allCourseWorks[i].id) {
            worksCount++;
          }
          if (haveWorksCourse.length == 0) {
            haveWorksCourse.push(this.allCourseWorks[i].courseid);
          } else {
            if (
              haveWorksCourse.indexOf(this.allCourseWorks[i].courseid) == -1
            ) {
              haveWorksCourse.push(this.allCourseWorks[i].courseid);
            }
          }
        } else if (this.lType1 == "grade") {
          if (this.gradeList.indexOf(this.allCourseWorks[i].typeid) != -1) {
            if (this.allCourseWorks[i].id) {
              worksCount++;
            }
            if (haveWorksCourse.length == 0) {
              haveWorksCourse.push(this.allCourseWorks[i].courseid);
            } else {
              if (
                haveWorksCourse.indexOf(this.allCourseWorks[i].courseid) == -1
              ) {
                haveWorksCourse.push(this.allCourseWorks[i].courseid);
              }
            }
          }
        } else if (this.lType1 == "subject") {
          if (this.subjectList2.indexOf(this.allCourseWorks[i].typeid) != -1) {
            if (this.allCourseWorks[i].id) {
              worksCount++;
            }
            if (haveWorksCourse.length == 0) {
              haveWorksCourse.push(this.allCourseWorks[i].courseid);
            } else {
              if (
                haveWorksCourse.indexOf(this.allCourseWorks[i].courseid) == -1
              ) {
                haveWorksCourse.push(this.allCourseWorks[i].courseid);
              }
            }
          }
        } else {
          if (this.thList.indexOf(this.allCourseWorks[i].typeid) != -1) {
            if (this.allCourseWorks[i].id) {
              worksCount++;
            }
            if (haveWorksCourse.length == 0) {
              haveWorksCourse.push(this.allCourseWorks[i].courseid);
            } else {
              if (
                haveWorksCourse.indexOf(this.allCourseWorks[i].courseid) == -1
              ) {
                haveWorksCourse.push(this.allCourseWorks[i].courseid);
              }
            }
          }
        }
      }



      var courseJson = this.allCourseWorks
      let _allTime = JSON.parse(JSON.stringify(this.allTimeList)).filter(el => {
        el.time = 0
        return el
      })
      let _grade = JSON.parse(JSON.stringify(this.classList)).filter(el => {
        el.time = 0
        return el
      })
      let _subject = JSON.parse(JSON.stringify(this.subjectList)).filter(el => {
        el.time = 0
        return el
      })
      let _themeList = JSON.parse(JSON.stringify(this.themeList)).filter(el => {
        el.time = 0
        return el
      })

      for (var i = 0; i < courseJson.length; i++) {
        for (var j = 0; j < _allTime.length; j++) {
          if (courseJson[i].typeid.indexOf(_allTime[j].id) != -1) {
            if (_allTime[j].time) {
              _allTime[j].time += 1;
            } else {
              _allTime[j].time = 1;
            }
          }
        }
        for (var j = 0; j < _grade.length; j++) {
          if (courseJson[i].typeid.indexOf(_grade[j].id) != -1) {
            if (_grade[j].time) {
              _grade[j].time += 1;
            } else {
              _grade[j].time = 1;
            }
          }
        }
        for (var k = 0; k < _subject.length; k++) {
          if (courseJson[i].typeid.indexOf(_subject[k].id) != -1) {
            if (_subject[k].time ) {
              _subject[k].time += 1;
            } else {
              _subject[k].time = 1;
            }
          }
        }
        for (var l = 0; l < _themeList.length; l++) {
          if (courseJson[i].typeid.indexOf(_themeList[l].id) != -1) {
            if (_themeList[l].time) {
              _themeList[l].time += 1;
            } else{
              _themeList[l].time = 1;
            }
          }
        }
      }

      if (this.lType1 == "all") {
        this.tedurArray2 = _allTime;
      } else if (this.lType1 == "grade") {
        this.tedurArray2 = _grade;
      } else if (this.lType1 == "subject") {
        this.tedurArray2 = _subject;
      } else {
        this.tedurArray2 = _themeList;
      }
      this.courseWorksCountYearArray = courseWorksCountYearArray;
      this.worksCount = worksCount;
      this.haveWorksCourse = haveWorksCourse.length;

      this.$forceUpdate();
    },
    typeChange() {
      if (this.cType4 === "") {
        this.courseNumberArray = this.allArray;
      } else if (this.cType4 === "grade") {
        this.courseNumberArray = this.gradeArray;
      } else if (this.cType4 === "theme") {
        this.courseNumberArray = this.themeArray;
      } else if (this.cType4 === "subject") {
        this.courseNumberArray = this.subjectArray;
      }
      this.$forceUpdate();
    },
    getData() {
      this.isLoading = true;
      let params = [
        {
          oid: this.oid,
          org: this.org,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "selectDataBoardCourseNew", params)
        .then((res) => {
          this.isLoading = false;
          let _grade = res.data[0]; //年级
          let _subject = res.data[1]; //学科
          let _themeList = res.data[2]; //主题
          let _allTime = [..._grade, ..._subject, ..._themeList]; //年级 + 学科 + 主题
          this.allCourse = res.data[3][0].count; //课程总数
          let _timeCourse = res.data[4]; //查询半年内全部课程
          this.courseTemplate = res.data[5][0].count; //查询模板课程总数
          let tList = res.data[6]; //授课时长
          // let countCourseWorks = res.data[8][0].count; //获取有作业的课程
          this.courseTList = tList;

          //将数据根据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;

          var courseJson = Object.values(
            tList.reduce(function (acc, obj) {
              if (!acc[obj.courseid]) {
                acc[obj.courseid] = { ...obj };
                acc[obj.courseid].typeid = [acc[obj.courseid].typeid];
              } else {
                if (!acc[obj.courseid].typeid.includes(obj.typeid)) {
                  acc[obj.courseid].typeid.push(obj.typeid);
                }
                acc[obj.courseid].text =
                  parseInt(acc[obj.courseid].text) + parseInt(obj.text);
              }
              return acc;
            }, {})
          ).map(function (obj) {
            var totalTime = parseInt(obj.text);
            obj.text = (totalTime / (60 * 60)).toFixed(0);
            return obj;
          });

          for (var i = 0; i < courseJson.length; i++) {
            for (var j = 0; j < _allTime.length; j++) {
              if (courseJson[i].typeid.indexOf(_allTime[j].id) != -1) {
                if (_allTime[j].time && courseJson[i].text) {
                  _allTime[j].time += parseInt(courseJson[i].text);
                } else if (courseJson[i].text) {
                  _allTime[j].time = parseInt(courseJson[i].text);
                }
              }
            }
            for (var j = 0; j < _grade.length; j++) {
              if (courseJson[i].typeid.indexOf(_grade[j].id) != -1) {
                if (_grade[j].time && courseJson[i].text) {
                  _grade[j].time += parseInt(courseJson[i].text);
                } else if (courseJson[i].text) {
                  _grade[j].time = parseInt(courseJson[i].text);
                }
              }
            }
            for (var k = 0; k < _subject.length; k++) {
              if (courseJson[i].typeid.indexOf(_subject[k].id) != -1) {
                if (_subject[k].time && courseJson[i].text) {
                  _subject[k].time += parseInt(courseJson[i].text);
                } else if (courseJson[i].text) {
                  _subject[k].time = parseInt(courseJson[i].text);
                }
              }
            }
            for (var l = 0; l < _themeList.length; l++) {
              if (courseJson[i].typeid.indexOf(_themeList[l].id) != -1) {
                if (_themeList[l].time && courseJson[i].text) {
                  _themeList[l].time += parseInt(courseJson[i].text);
                } else if (courseJson[i].text) {
                  _themeList[l].time = parseInt(courseJson[i].text);
                }
              }
            }
          }

          this.allTimeList = _allTime;
          this.classList = _grade;
          this.subjectList = _subject;
          this.themeList = _themeList;

          var _gradeList = [],
            _subjectList = [],
            _thList = [];
          for (var i = 0; i < _grade.length; i++) {
            _gradeList.push(_grade[i].id);
          }
          for (var i = 0; i < _subject.length; i++) {
            _subjectList.push(_subject[i].id);
          }
          for (var i = 0; i < _themeList.length; i++) {
            _thList.push(_themeList[i].id);
          }

          var _courseTypeList = this.courseTList;
          var _gList = [],
            _sList = [],
            _tList = [],
            _timeList = [];
          for (var i = 0; i < _courseTypeList.length; i++) {

            if (_timeList.length == 0) {
              _timeList.push(_courseTypeList[i].courseid);
            } else {
              if (_timeList.indexOf(_courseTypeList[i].courseid) == -1) {
                _timeList.push(_courseTypeList[i].courseid);
              }
            }
            if (_gradeList.indexOf(_courseTypeList[i].typeid) != -1) {
              if (_gList.length == 0) {
                _gList.push(_courseTypeList[i].courseid);
              } else {
                if (_gList.indexOf(_courseTypeList[i].courseid) == -1) {
                  _gList.push(_courseTypeList[i].courseid);
                }
              }
            }
            if (_subjectList.indexOf(_courseTypeList[i].typeid) != -1) {
              if (_sList.length == 0) {
                _sList.push(_courseTypeList[i].courseid);
              } else {
                if (_sList.indexOf(_courseTypeList[i].courseid) == -1) {
                  _sList.push(_courseTypeList[i].courseid);
                }
              }
            }
            if (_thList.indexOf(_courseTypeList[i].typeid) != -1) {
              if (_tList.length == 0) {
                _tList.push(_courseTypeList[i].courseid);
              } else {
                if (_tList.indexOf(_courseTypeList[i].courseid) == -1) {
                  _tList.push(_courseTypeList[i].courseid);
                }
              }
            }
          }

          this.allTimeLength = _timeList.length
          this.gradeLength = _gList.length;
          this.subjectLength = _sList.length;
          this.themeLength = _tList.length;

          var a = [];
          if (this.lType == "all") {
            this.tedurArray = _allTime;
            this.courseLength = _timeList.length;
          } else if (this.lType == "grade") {
            this.tedurArray = _grade;
            this.courseLength = _gList.length;
          } else if (this.lType == "subject") {
            this.tedurArray = _subject;
            this.courseLength = _sList.length;
          } else {
            this.tedurArray = _themeList;
            this.courseLength = _tList.length;
          }

          var time = 0;
          a = this.tedurArray;
          for (var i = 0; i < a.length; i++) {
            if (a[i].time) {
              time += a[i].time;
            }
          }
          this.allTime = time;

          let allCourseWorks = res.data[7]; //作业总数量
          this.allCourseWorks = allCourseWorks;
          this.gradeList = _gradeList;
          this.subjectList2 = _subjectList;
          this.thList = _thList;
          this.typeChange2();

          let _course = res.data[8]; //课程
          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 < _themeList.length; i++) {
            _themeArray.push({
              name: _themeList[i].name,
              typeid: _themeList[i].id,
              course: 0,
              array: [],
            });
            for (var z = 0; z < _course.length; z++) {
              if (_course[z].typeid == _themeList[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();

          var courseList = res.data[9];
          var cList = [];
          for (var i = 0; i < courseList.length; i++) {
            cList.push(JSON.parse(courseList[i].chapters));
          }

          var toolList = [
            [10, 65], //互动类
            [7, 1, 52, 3, 48], //思维类
            [49], //协作类
            [4, 45, 15, 16, 50, 41, 47], //测评类
            [40], //评价类
            [18, 21, 22, 23, 24, 32, 57, 63], //编程类
            [28, 31, 39, 66, 67, 68], //学科类
          ];
          var toolAllArray = [
            { name: "互动类", value: 0 },
            { name: "思维类", value: 0 },
            { name: "协作类", value: 0 },
            { name: "测评类", value: 0 },
            { name: "评价类", value: 0 },
            { name: "编程类", value: 0 },
            { name: "学科类", value: 0 },
          ];
          for (var p = 0; p < toolList.length; p++) {
            for (var i = 0; i < cList.length; i++) {
              for (var j = 0; j < cList[i].length; j++) {
                for (
                  var k = 0;
                  k < cList[i][j].chapterInfo[0].taskJson.length;
                  k++
                ) {
                  for (
                    var q = 0;
                    q <
                    cList[i][j].chapterInfo[0].taskJson[k].toolChoose.length;
                    q++
                  ) {
                    if (
                      toolList[p].indexOf(
                        cList[i][j].chapterInfo[0].taskJson[k].toolChoose[q]
                          .tool[0]
                      ) != -1
                    ) {
                      toolAllArray[p].value++;
                    }
                  }
                }
              }
            }
          }
          this.toolList = toolAllArray;

          var twoPerson = 0,
            threePerson = 0,
            fivePerson = 0,
            sevenPerson = 0;
          var personList = [];
          for (var i = 0; i < courseList.length; i++) {
            if (courseList[i].course_teacher) {
              if (courseList[i].course_teacher.split(",").length <= 2) {
                twoPerson++;
              } else if (
                4 >= courseList[i].course_teacher.split(",").length &&
                courseList[i].course_teacher.split(",").length > 2
              ) {
                threePerson++;
              } else if (
                6 >= courseList[i].course_teacher.split(",").length &&
                courseList[i].course_teacher.split(",").length > 4
              ) {
                fivePerson++;
              } else if (courseList[i].course_teacher.split(",").length > 7) {
                sevenPerson++;
              }
            }
          }

          personList.push(
            { name: "2人以下", value: twoPerson },
            { name: "3-4人", value: threePerson },
            { name: "5-6人", value: fivePerson },
            { name: "7人以上", value: sevenPerson }
          );
          this.personList = personList;

          let _workCourse = res.data[10]; //带作业的课程
          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[11][0].count; //课程开展总数
          this.allCourseCount = res.data[9].length; //课程总数

          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.courseArray = _courseArray;

          this.evaCount = res.data[12][0].count; //设置评价

          this.evaWorksCount = res.data[13][0].count; //查询有目标并且有评价的作业

          for (var i = 0; i < this.pusaDep.length; i++) {
            if (this.pusaDep[i].name == "课程总数") {
              this.pusaDep[i].value = (
                (this.allCourse / this.allCourse) *
                100
              ).toFixed(0);
            } else if (this.pusaDep[i].name == "设置评价课程") {
              this.pusaDep[i].value = (
                (this.evaCount / this.allCourse) *
                100
              ).toFixed(0);
            } else if (this.pusaDep[i].name == "已提交作业课程") {
              this.pusaDep[i].value = (
                (this.haveWorksCourse / this.allCourse) *
                100
              ).toFixed(0);
            } else if (this.pusaDep[i].name == "已评价课程") {
              this.pusaDep[i].value = (
                (this.evaWorksCount / this.allCourse) *
                100
              ).toFixed(0);
            } else if (this.pusaDep[i].name == "教学评一体化课程") {
              this.pusaDep[i].value = (
                (this.evaWorksCount / this.allCourse) *
                100
              ).toFixed(0);
            }
          }

          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]
            );
            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++;
              }
            }
          }

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

          this.$forceUpdate();
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
  },
};
</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>