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

<template>
  <div class="body1" v-loading="isLoading">
    <!-- 学生数据 -->
    <div class="left">
      <div class="top">
        <div class="titleBox">
          <div class="title">基础概况</div>
        </div>
        <div class="dataBox">
          <div class="info_box">
            <div class="info blueBG">
              <span>学生总数</span>
              <span>{{ studentCount }}</span>
            </div>
            <div class="info blueBG">
              <span>本月登录学生环比</span>
              <span v-if="loginCountMonthArray.length">{{ (loginCountMonthArray[loginCountMonthArray.length - 1].user) > 0 ? (((loginCountMonthArray[loginCountMonthArray.length - 1].user) / studentCount) * 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 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 -
                  loginCountMonthArray[loginCountMonthArray.length - 2].user <
                0
                  ? 0
                  : loginCountMonthArray[loginCountMonthArray.length - 1].user -
                    loginCountMonthArray[loginCountMonthArray.length - 2].user
              }}</span>
            </div>
          </div>
          <loginCount
            style="height: calc(100% - 140px)"
            :monthArray="loginCountMonthArray"
          ></loginCount>
        </div>
      </div>
      <div class="bottom">
        <div class="titleBox">
          <div
            class="title"
            :class="{ isClick: skType == 0 }"
            @click="skType = 0"
            style="cursor: pointer; padding: 0 0 5px 0"
          >
            在线时长
          </div>
          <div
            class="title"
            :class="{ isClick: skType == 1 }"
            @click="skType = 1"
            style="cursor: pointer; padding: 0 0 5px 0"
          >
            登录频次
          </div>
          <!-- <el-select v-model="cType" class="selectBox" style="width: 110px">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="一年级" value="一年级"></el-option>
            <el-option label="二年级" value="二年级"></el-option>
            <el-option label="三年级" value="三年级"></el-option>
          </el-select>
          <div class="timeDiv">
            <div @click="tType = 0" :class="{ isClick: tType == 0 }">周</div>
            <div @click="tType = 1" :class="{ isClick: tType == 1 }">月</div>
            <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
          </div> -->
        </div>
        <div class="info_box" v-if="skType == 1">
          <div class="info blueBG">
            <span>登录频次</span>
            <!-- <span>{{ count }}</span> -->
            <span>{{ countLogin }}</span>
          </div>
          <div class="info blueBG">
            <span>人均频次</span>
            <!-- <span>{{ weekCount }}</span> -->
            <span>{{
              countLogin && studentCount
                ? (countLogin / studentCount).toFixed(0)
                : 0
            }}</span>
          </div>
        </div>
        <div class="info_box" v-if="skType == 0">
          <div class="info blueBG">
            <span>累计时长</span>
            <span>{{ loginTime.toFixed(0) }}</span>
          </div>
          <div class="info blueBG">
            <span>人均在线时长</span>
            <span>{{
              loginTime && studentCount
                ? (loginTime / studentCount).toFixed(0)
                : 0
            }}</span>
          </div>
        </div>
        <div class="dataBox" style="height: calc(100% - 110px)">
          <toolUser
            style="height: calc(100% - 30px)"
            v-if="skType == 1 && !oType"
            :yearArray="loginCountYearArray"
          ></toolUser>
          <bar2
            style="height: calc(100% - 30px)"
            v-if="skType == 1 && oType"
            :EloginTimeArray="EloginTimeArray2"
          ></bar2>


          <bar
            style="height: calc(100% - 30px)"
            v-if="skType == 0 && !oType2"
            :EloginTimeArray="EloginTimeArray"
          ></bar>
          <toolUser2
            style="height: calc(100% - 30px)"
            v-if="skType == 0 && oType2"
            :yearArray="loginCountYearArray2"
          ></toolUser2>

          <div class="otherCss" v-if="skType == 1">
            <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 == 0">
            <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" style="justify-content: space-between">
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            "
          >
            <div
              class="title"
              :class="{ isClick: courseType == 0 }"
              @click="courseType = 0;rankLoading = false"
              style="cursor: pointer; padding: 0 0 5px 0"
            >
              学生行为分布
            </div>
            <!-- <div
              class="title"
              :class="{ isClick: courseType == 1 }"
              @click="courseType = 1"
              style="cursor: pointer; padding: 0 0 5px 0"
            >
              学生协同情况
            </div> -->
            <div
              class="title"
              :class="{ isClick: courseType == 2 }"
              @click="checkRank()"
              style="cursor: pointer; padding: 0 0 5px 0"
            >
              学生排行榜
            </div> 
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            "
            v-if="courseType == 0"
          >
            <el-select v-model="cType2" class="selectBox" style="width: 110px">
              <el-option label="在线时长" value="onlineTime"></el-option>
              <el-option label="作业数量" value="worksNum"></el-option>
            </el-select>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
            "
            v-if="courseType == 2"
          >
            <el-select v-model="cTypeRank" class="selectBox" style="width: 130px" @change="checkRank">
              <el-option :label="item.name" :value="item.id" v-for="(item,index) in classList" :key="index"></el-option>
            </el-select>
          </div>
        </div>
        <div class="dataBox" v-loading="rankLoading">
          <studentInfo
            v-if="courseType == 0 && cType2 == 'onlineTime'"
            style="height: calc(100%)"
            :EloginTimeArray="EloginTimeArray"
          ></studentInfo>
          <studentInfo3
            v-if="courseType == 0 && cType2 == 'worksNum'"
            style="height: calc(100%)"
            :EworksNumArray="EworksNumArray"
          ></studentInfo3>
          <courseNum
            v-if="courseType == 1"
            style="height: calc(100%)"
          ></courseNum>
          <cateRank v-if="courseType == 2" :rankData="rankData"></cateRank>
        </div>
      </div>
      <div class="bottom">
        <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: bType == 0 }"
              @click="bType = 0"
              style="cursor: pointer; padding: 0 0 5px 0"
            >
              课程参与情况
            </div>
            <div
              class="title"
              :class="{ isClick: bType == 1 }"
              @click="bType = 1"
              style="cursor: pointer; padding: 0 0 5px 0"
            >
              项目参与情况
            </div>
          </div>
        </div>
        <div class="dataBox">
          <div
            class="allBox"
            style="height: calc(100% - 30px)"
            v-if="bType == 0"
          >
            <div class="allBox_left">
              <stuAct :pusaDep="courseArray"></stuAct>
            </div>
            <div class="allBox_right">
              <div class="depth">
                <span>参与课程</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="
                      courseJson.courseNum && studentCount
                        ? parseInt(
                            (
                              (courseJson.courseNum / studentCount) *
                              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="
                      courseJson.toolNum && studentCount
                        ? parseInt(
                            ((courseJson.toolNum / studentCount) * 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="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="
                      courseJson.exchangeNum && studentCount
                        ? parseInt(
                            (
                              (courseJson.exchangeNum / studentCount) *
                              100
                            ).toFixed(0)
                          )
                        : 0
                    "
                    :stroke-width="5"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
            </div>
          </div>
          <div
            class="allBox"
            style="height: calc(100% - 30px)"
            v-if="bType == 1"
          >
            <div class="allBox_left">
              <stuAct2 :pusaDep="scourseArray"></stuAct2>
            </div>
            <div class="allBox_right">
              <div class="depth">
                <span>参与项目</span>
                <div>
                  <el-progress
                    :width="80"
                    type="circle"
                    :percentage="
                      scourseJson.courseNum && studentCount
                        ? parseInt(
                            (
                              (scourseJson.courseNum / studentCount) *
                              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="
                      scourseJson.toolNum && studentCount
                        ? parseInt(
                            (
                              (scourseJson.toolNum / studentCount) *
                              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="
                      scourseJson.gcourseNum && studentCount
                        ? parseInt(
                            (
                              (scourseJson.gcourseNum / studentCount) *
                              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="0"
                    :stroke-width="5"
                    :format="format"
                    color="#106BFF"
                  ></el-progress>
                </div>
              </div>
            </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="cType7" class="selectBox" style="width: 110px">
              <el-option label="在线时长" value="onlineTime"></el-option>
              <el-option label="作业数量" value="worksNum"></el-option>
            </el-select>
          </div>
        </div>
        <div class="dataBox">
          <studentInfo2
            style="height: calc(100% - 40px)"
            v-if="cType7 == 'onlineTime'"
            :EloginTimeArray="EloginTimeArray"
          ></studentInfo2>
          <studentInfo4
            style="height: calc(100% - 40px)"
            v-if="cType7 == 'worksNum'"
            :EworksNumArray="EworksNumArray"
          ></studentInfo4>
        </div>
      </div>
      <div class="bottom">
        <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="cType8" class="selectBox" style="width: 110px">
              <el-option label="全部年级" value="全部年级"></el-option>
            </el-select> -->
            <el-select
              v-model="cType9"
              class="selectBox"
              style="width: 110px"
              @change="classChange"
            >
              <el-option label="全部班级" value=""></el-option>
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in classList"
                :key="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="dataBox">
          <div class="info_box">
            <div class="info blueBG">
              <span>人均参与课程数</span>
              <span>{{
                courseNum && uArray.length
                  ? (courseNum / uArray.length).toFixed(0)
                  : 0
              }}</span>
            </div>
            <div class="info blueBG">
              <span>人均参与项目数</span>
              <span>{{
                scourseNum && uArray.length
                  ? (scourseNum / uArray.length).toFixed(0)
                  : 0
              }}</span>
            </div>
          </div>
          <loginTime
            style="height: calc(100% - 72px)"
            :uArray="uArray"
          ></loginTime>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loginCount from "./loginCount";
import studentInfo from "./studentInfo";
import studentInfo2 from "./studentInfo2";
import studentInfo3 from "./studentInfo3";
import studentInfo4 from "./studentInfo4";
import loginTime from "./loginTime";
import stuAct from "./stuAct";
import stuAct2 from "./stuAct2";
import toolUser from "./toolUser";
import toolUser2 from "./toolUser2";
import bar from "./bar";
import bar2 from "./bar2";
import courseNum from "./courseNum";
import cateRank from "./cateRank";
export default {
  props: {
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
  },
  components: {
    loginCount,
    studentInfo,
    studentInfo2,
    studentInfo3,
    studentInfo4,
    loginTime,
    stuAct,
    stuAct2,
    toolUser,
    toolUser2,
    bar,
    bar2,
    courseNum,
    cateRank
  },
  data() {
    return {
      isLoading: false,
      skType: 0,
      tType: 0,
      courseType: 0,
      tType1: 0,
      sType: 0,
      bType: 0,
      cType: "全部",
      cType1: "全部",
      cType2: "onlineTime",
      cType3: "全部",
      cType4: "师生",
      cType5: "全部年级",
      cType7: "onlineTime",
      cType8: "全部年级",
      cType9: "",
      oType: false,
      oType2: false,
      studentCount: 0,
      loginCountMonthArray: [],
      countLogin: 0,
      loginCountYearArray: [],
      loginCountYearArray2: [],
      loginTime: 0,
      EloginTimeArray: [],
      EloginTimeArray2: [],
      classList: [],
      courseNum: 0,
      scourseNum: 0,
      uArray: [],
      courseNumArray: [],
      scourseNumArray: [],
      userArray: [],
      courseJson: {
        courseNum: 0,
        toolNum: 0,
        exchangeNum: 0,
      },
      scourseJson: {
        courseNum: 0,
        toolNum: 0,
        gcourseNum: 0,
      },
      courseArray: [],
      scourseArray: [],
      EworksNumArray: [],
      rankLoading: false,
      cTypeRank: '',
      rankData:[],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    format(percentage) {
      return percentage + "%";
    },
    otherEchart() {
      this.oType = !this.oType;
    },
    otherEchart2() {
      this.oType2 = !this.oType2;
    },
    getData() {
      this.isLoading = true;
      let params = [
        {
          oid: this.oid,
          org: this.org,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "selectDataBoardStudentNew", params)
        .then((res) => {
          this.isLoading = false;
          let _grade = res.data[0]; //年级
          let _subject = res.data[1]; //学科
          let _course = res.data[2]; //课程
          this.studentCount = res.data[3][0].count; //学生总数

          let _loginCount = res.data[4]; //统计半年的登录学生

          let loginCountMonthArray = [];
          const date = new Date();
          var Month = date.getMonth() + 1;
          var Year = date.getFullYear();
          for (var i = Month; i > Month - 6; i--) {
            if (i <= 0) {
              loginCountMonthArray.push({
                Year: Year - 1,
                Month: 12 + i,
                user: 0,
              });
            } else {
              loginCountMonthArray.push({
                Month: i,
                Year: Year,
                user: 0,
              });
            }
          }
          loginCountMonthArray = loginCountMonthArray.reverse();
          for (var i = 0; i < _loginCount.length; i++) {
            let _date = new Date(_loginCount[i].create_at);
            var _month = _date.getMonth() + 1;
            var _year = _date.getFullYear();
            for (var j = 0; j < loginCountMonthArray.length; j++) {
              if (
                _month == loginCountMonthArray[j].Month &&
                _year == loginCountMonthArray[j].Year
              ) {
                loginCountMonthArray[j].user++;
                break;
              }
            }
          }
          this.loginCountMonthArray = loginCountMonthArray;

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

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

          this.loginTime = parseInt(res.data[7][0].time) / 60 / 60;
          let _loginTimeArray = res.data[9]; //在线时间
          let _classList = res.data[8]; //班级
          this.classList = _classList.filter(el => {return el.studentCount > 0});
          this.cTypeRank = _classList[0].id
          let _EloginTimeArray = [];
          for (let i = 0; i < _classList.length; i++) {
            _EloginTimeArray.push({
              id: _classList[i].id,
              name: _classList[i].name,
              loginTime: 0,
            });
            for (let j = 0; j < _loginTimeArray.length; j++) {
              const _user = _loginTimeArray[j];
              if (_user.classid.indexOf(_classList[i].id) != -1) {
                _EloginTimeArray[i].loginTime += Number(_user.time);
              }
            }
            _EloginTimeArray[i].loginTime = (
              _EloginTimeArray[i].loginTime /
              60 /
              60
            ).toFixed(0); //换算成小时
          }
          this.EloginTimeArray = _EloginTimeArray.filter((el)=>{
            return el.loginTime > 0;
          });

          this.courseNumArray = res.data[10]; //参与课程数
          this.scourseNumArray = res.data[11]; //参与项目数
          this.userArray = res.data[12]; //参与项目数
          this.classChange();
          this.courseJson.courseNum = res.data[13][0].count; //参与课程
          this.courseJson.toolNum = res.data[14][0].count; //使用工具
          this.courseJson.exchangeNum = res.data[15][0].count; //互动交流

          this.scourseJson.courseNum = res.data[16][0].count; //参与项目
          this.scourseJson.toolNum = res.data[17][0].count; //使用工具
          this.scourseJson.gcourseNum = res.data[18][0].count; //协同

          let loginUser = res.data[20].length; //登录
          let worksEva = res.data[21][0].count; //评价

          this.courseArray = [
            {
              value: loginUser ? ((loginUser / this.studentCount) * 100).toFixed(0) : 0,
              name: "登录",//登录
            },
            {
              value: this.courseJson.courseNum
                ? (
                    (this.courseJson.courseNum / this.studentCount) *
                    100
                  ).toFixed(0)
                : 0,
              name: "参与课程",
            },
            {
              value: this.courseJson.toolNum
                ? ((this.courseJson.toolNum / this.studentCount) * 100).toFixed(
                    0
                  )
                : 0,
              name: "提交作业",//使用工具
            },
            {
              value: worksEva
                ? (
                    (worksEva / this.studentCount) *
                    100
                  ).toFixed(0)
                : 0,
              name: "评价",//互动交流
            },
          ];
          this.scourseArray = [
            {
              value: loginUser ? ((loginUser / this.studentCount) * 100).toFixed(0) : 0,
              name: "学生总数",
            },
            {
              value: this.scourseJson.courseNum
                ? (
                    (this.scourseJson.courseNum / this.studentCount) *
                    100
                  ).toFixed(0)
                : 0,
              name: "参与项目",
            },
            {
              value: this.scourseJson.toolNum
                ? (
                    (this.scourseJson.toolNum / this.studentCount) *
                    100
                  ).toFixed(0)
                : 0,
              name: "提交作业",//使用工具
            },
            {
              value: this.scourseJson.gcourseNum
                ? (
                    (this.scourseJson.gcourseNum / this.studentCount) *
                    100
                  ).toFixed(0)
                : 0,
              name: "协同",
            },
          ];

          let _studentWorksArray = res.data[19]; //学生班级作业数量
          let _EworksNumArray = [];
          let _courseIdArray = [];

          for (let i = 0; i < _classList.length; i++) {
            _EworksNumArray.push({
              id: _classList[i].id,
              name: _classList[i].name,
              works: 0,
            });
            for (let j = 0; j < _studentWorksArray.length; j++) {
              const _user = _studentWorksArray[j];
              if (_courseIdArray.length == 0) {
                if (_user.classid.indexOf(_classList[i].id) != -1) {
                  _EworksNumArray[i].works++;
                  _courseIdArray.push(_user.courseid);
                }
              } else {
                if (
                  _user.classid.indexOf(_classList[i].id) != -1 &&
                  _courseIdArray.indexOf(_user.courseid) == -1
                ) {
                  _EworksNumArray[i].works++;
                }
              }
            }
          }

          this.EworksNumArray = _EworksNumArray.filter((el)=>{
            return el.works > 0;
          });;


          let loginCountYear2 = res.data[22]; //一年的在线时长
          let loginCountYearArray2 = [];
          for (var i = Month; i > Month - 12; i--) {
            if (i <= 0) {
              loginCountYearArray2.push({
                Year: Year - 1,
                Month: 12 + i,
                mon: 0,
                tue: 0,
                wed: 0,
                thur: 0,
                fri: 0,
                sat: 0,
                sun: 0,
              });
            } else {
              loginCountYearArray2.push({
                Month: i,
                Year: Year,
                mon: 0,
                tue: 0,
                wed: 0,
                thur: 0,
                fri: 0,
                sat: 0,
                sun: 0,
              });
            }
          }
          loginCountYearArray2 = loginCountYearArray2.reverse();
          for (var i = 0; i < loginCountYear2.length; i++) {
            let _date = new Date(loginCountYear2[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 < loginCountYearArray2.length; j++) {
              let time = (loginCountYear2[i].text / 3600).toFixed(0)
              time = parseInt(time) ? parseInt(time) : 0
              if (
                _month == loginCountYearArray2[j].Month &&
                _year == loginCountYearArray2[j].Year
              ) {
                loginCountYearArray2[j][dayArray[_day]]+=time;
                break;
              }
            }
          }
          console.log(loginCountYearArray2);
          this.loginCountYearArray2 = loginCountYearArray2;

          let _loginTimeArray2 = res.data[23]; //一年的在线时长
          let _EloginTimeArray2 = [];
          for (let i = 0; i < _classList.length; i++) {
            _EloginTimeArray2.push({
              id: _classList[i].id,
              name: _classList[i].name,
              loginTime: 0,
            });
            for (let j = 0; j < _loginTimeArray2.length; j++) {
              const _user = _loginTimeArray2[j];
              if (_user.classid.indexOf(_classList[i].id) != -1) {
                _EloginTimeArray2[i].loginTime++;
              }
            }
          }
          this.EloginTimeArray2 = _EloginTimeArray2.filter((el)=>{
            return el.loginTime > 0;
          });

          this.$forceUpdate();
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    checkRank(){
      this.rankLoading = true;
      let params = [
        {
          oid: this.oid,
          org: this.org,
          cid: this.cTypeRank
        },
      ];
      this.ajax
        .post(this.$store.state.api + "selectDataboardStudentRank", params)
        .then((res) => {
          this.rankLoading = false;
          this.courseType = 2
          let rankData = []
          let students = res.data[0]
          let courses = res.data[1]
          let scourses = res.data[2]
          let works = res.data[3]
          let exchanges = res.data[4]

          for (let i = 0; i < students.length; i++) {
            rankData.push({
              name: students[i].name,
              userid: students[i].userid,
              classid: students[i].classid,
              courseCount:0,
              scourseCount: 0,
              worksCount: 0,
              exchangeCount: 0,
              rateCount: 0,
              rate: 0,
              score:0,
            })
          }

          for(var j = 0; j < rankData.length; j++){
            for(var i = 0; i < courses.length; i++){
              if(courses[i].userid == rankData[j].userid){
                rankData[j].courseCount++;
              }
            }

            for(var i = 0; i < scourses.length; i++){
              if(scourses[i].userid == rankData[j].userid){
                rankData[j].scourseCount++;
              }
            }

            for(var i = 0; i < works.length; i++){
              if(works[i].userid == rankData[j].userid){
                rankData[j].worksCount++;
                if(works[i].score){
                  try {
                    let rate = JSON.parse(works[i].score)
                    rankData[j].rateCount += rate.wScore
                    rankData[j].rate++
                  } catch (error) {
                    
                  }
                }
              }
            }

            rankData[j].rateCount = rankData[j].rateCount > 0 ? (rankData[j].rateCount / rankData[j].rate).toFixed(0) : 0

            for(var i = 0; i < exchanges.length; i++){
              if(exchanges[i].likesId == rankData[j].userid){
                rankData[j].exchangeCount++;
              }
            }

            rankData[j].score = ((rankData[j].rateCount * 0.5) + (rankData[j].exchangeCount * 0.1) + (rankData[j].worksCount * 0.2) + (rankData[j].scourseCount * 0.1) + (rankData[j].courseCount * 0.1)).toFixed(0);
          }


          this.rankData = rankData;
          this.$forceUpdate();
        })
        .catch((err) => {
          this.rankLoading = false;
          console.error(err);
        });
    },
    classChange() {
      let _courseNumArray = this.courseNumArray; //参与课程数
      let _scourseNumArray = this.scourseNumArray; //参与项目数
      let _userArray = this.userArray; //参与项目数
      let _courseNum = 0;
      let _scourseNum = 0;
      let uArray = [];
      for (var i = 0; i < _userArray.length; i++) {
        if (_userArray[i].classid.indexOf(this.cType9) != -1 || !this.cType9) {
          uArray.push({
            userid: _userArray[i].userid,
            name: _userArray[i].name,
            courseNum: 0,
            scourseNum: 0,
          });
        }
      }

      for (let i = 0; i < _courseNumArray.length; i++) {
        for (let j = 0; j < uArray.length; j++) {
          if (_courseNumArray[i].userid == uArray[j].userid) {
            uArray[j].courseNum++;
            _courseNum++;
            break;
          }
        }
      }

      for (let i = 0; i < _scourseNumArray.length; i++) {
        for (let j = 0; j < uArray.length; j++) {
          if (_scourseNumArray[i].userid == uArray[j].userid) {
            uArray[j].scourseNum++;
            _scourseNum++;
            break;
          }
        }
      }
      this.courseNum = _courseNum;
      this.scourseNum = _scourseNum;
      this.uArray = uArray;
    },
  },
};
</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% / 6 * 4 - 10px);
  background: #fff;
  border-radius: 5px;
  margin: 0 0 20px 0;
}

.center > .bottom {
  width: 100%;
  height: calc(100% / 6 * 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: 5px;
  margin: 0 0 20px 0;
}

.right > .bottom {
  width: 100%;
  height: calc(100% / 2 - 10px);
  background: #fff;
  border-radius: 5px;
}

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

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

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

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

.greenBG {
  background: linear-gradient(
    180deg,
    rgb(211, 246, 228, 0.2) 0%,
    rgb(23, 196, 105, 0.3) 100%
  );
}

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

.depth {
  width: calc(100% / 5 - 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.depth > span:nth-child(1) {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
}

.depth > div:nth-child(1) {
}

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

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

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

.teaMiddle {
  width: calc(100% / 2 - 10px);
  height: 60px;
  border-radius: 8px;
  /* border: 1px solid #e0eafb; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 10px;
  margin: 0 10px;
}

.teaMiddle {
  width: calc(100% / 3 - 10px);
}

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

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

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

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

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

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

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