pbl-teacher-table/src/components/pages/myReport/myReport.vue

<template>
  <div :class="{ isWorkCss: reportVisible }">
    <div class="sr_body">
      <div class="mrTitle">
        <div>我的学习报告</div>
        <div class="mrIcon">
          <img src="../../../assets/icon/myReport/tIcon.png" alt="" />
        </div>
      </div>
      <div class="sr_box">
        <div class="sr_first">
          <div class="first" style="height: 260px">
            <div class="sub_title">
              <div class="yuan">
                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
              </div>
              <div>基础信息</div>
            </div>
            <MrBasicData class="r_box" :sMes="stuMessage"></MrBasicData>
          </div>
          <div class="second" style="height: 260px">
            <div class="sub_title">
              <div class="yuan">
                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
              </div>
              <div>我的综合表现</div>
            </div>
            <MrOverPer
              class="r_box"
              :overPData="JSON.parse(JSON.stringify(overPer))"
            ></MrOverPer>
          </div>
          <div class="third">
            <div class="sub_title">
              <div class="yuan">
                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
              </div>
              <div>我的学习状态</div>
            </div>
            <MrLearnStatus class="r_box"></MrLearnStatus>
          </div>
        </div>
        <div class="sr_second" style="height: 830px">
          <div class="first" style="margin: 0; justify-content: flex-start">
            <div class="sub_title">
              <div class="yuan">
                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
              </div>
              <div>我的课程报告</div>
            </div>
            <MyCourseReport class="r_box"></MyCourseReport>
          </div>
        </div>
        <div class="sr_third">
          <div class="first">
            <div class="sub_title">
              <div class="yuan">
                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
              </div>
              <div>课程评价得分</div>
            </div>
            <CourseEvaScore
              class="r_box"
              style="
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: center;
                margin: 0;
              "
              :courseArray="cEvaScore"
            ></CourseEvaScore>
          </div>
          <div class="second">
            <div class="sub_title">
              <div class="yuan">
                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
              </div>
              <div>课程类型分析</div>
            </div>
            <CourseTypeAna
              class="r_box"
              :courseTypeArray="cTypeAnaList"
            ></CourseTypeAna>
          </div>
          <div class="third" style="height: 270px">
            <div class="sub_title">
              <div class="yuan">
                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
              </div>
              <div>工具类型分析</div>
            </div>
            <ToolTypeAna
              class="r_box"
              :toolTypeArray="tTypeArray"
            ></ToolTypeAna>
          </div>
        </div>
      </div>
      <div style="height: 100%; overflow-x: hidden">
        <div>
          <MrEva class="r_box" :mrEvaList="evaList" @getEvaCid="getCid"></MrEva>
        </div>
      </div>
    </div>
    <div class="report_box" v-if="reportVisible">
      <myReportLook
        :checkCourse="checkCourse"
        :checkStudent="checkStudent"
        :oid="oid"
      ></myReportLook>
    </div>
    <div class="cancelbox" v-if="reportVisible">
      <el-button @click="cancelR" type="primary" size="small">返回</el-button>
    </div>
  </div>
</template>

<script>
import MrBasicData from "./components/mrBasicData.vue";
import MrOverPer from "./components/mrOverPer.vue";
import MyCourseReport from "./components/myCourseReport.vue";
import MrLearnStatus from "./components/mrLearnStatus.vue";
import CourseEvaScore from "./components/courseEvaScore.vue";
import CourseTypeAna from "./components/courseTypeAna.vue";
import ToolTypeAna from "./components/toolTypeAna.vue";
import MrEva from "./components/mrEva.vue";
import myReportLook from "./components/MyLookComponent/myReportLook";
export default {
  components: {
    MrBasicData,
    MrOverPer,
    MyCourseReport,
    MrLearnStatus,
    CourseEvaScore,
    CourseTypeAna,
    ToolTypeAna,
    MrEva,
    myReportLook,
  },
  data() {
    return {
      userid: this.$route.query.userid,
      org: this.$route.query.org,
      oid: this.$route.query.oid,
      reportVisible: false,
      checkStudent: "",
      checkCourse: [],
      evaList: [], //目标体系
      stuMessage: {}, //基础信息
      cEvaScore: [], //课程评价得分
      cTypeAnaList: [], //课程类型分析
      tTypeArray: [], //工具类型分析
      overPer: {}, //我的综合表现
    };
  },
  methods: {
    getCid(item) {
      // var b = [
      //   { isChoose: "4cf01620-08d9-11ed-8c78-005056b86db5" },
      //   { isChoose: "02ea6cdc-e7e3-11ec-8c78-005056b86db5" },
      // ];
      var a = [];
      for (var i = 0; i < item.isChoose.length; i++) {
        a.push(item.isChoose[i]);
      }
      // for (var i = 0; i < b.length; i++) {
      //   a.push(b[i].isChoose);
      // }
      this.checkCourse = a.join(",");
      this.checkStudent = this.userid;
      this.reportVisible = true;
    },
    cancelR() {
      this.checkCourse = "";
      this.checkStudent = "";
      this.reportVisible = false;
    },
    getMrEva() {
      let params = {
        uid: this.userid,
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectMrEva", params)
        .then((res) => {
          this.stuMessage = res.data[0][0];
          this.evaList = res.data[1];
          var courseList = res.data[2];
          var sWorksList = res.data[3];
          var studyAllTime = res.data[4];
          var loginAllTime = res.data[5];
          var courseRateList = res.data[6];
          var sWorksCList = [];
          var cList = [];
          var cTypeList = [];
          var tool = 0;
          var isFinish = 0;
          var scoreXarray = [];
          for (var i = 0; i < this.evaList.length; i++) {
            this.evaList[i].course = [];
            this.evaList[i].isChoose = [];
            for (var j = 0; j < courseList.length; j++) {
              if (this.evaList[i].id == courseList[j].evaId) {
                this.evaList[i].course.push(courseList[j]);
              }
            }
          }
          for (var i = 0; i < courseList.length; i++) {
            cList.push(JSON.parse(courseList[i].chapters));
            scoreXarray.push(courseList[i].title);
            if (courseList[i].typename != null) {
              cTypeList.push(courseList[i].typename.split("/"));
            }
          }
          for (var i = 0; i < courseRateList.length; i++) {
            sWorksCList.push({
              courseid: courseRateList[i].courseId,
              title: courseRateList[i].title,
              rate: courseRateList[i].rate,
            });
          }
          var count = 0;
          for (var i = 0; i < this.evaList.length; i++) {
            count += this.evaList[i].course.length;
          }
          this.stuMessage.allCourseNum = count;
          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++
              ) {
                let _toolsAarry = [
                  1, 3, 6, 7, 16, 15, 4, 40, 41, 42, 49, 50, 52, 32, 57,
                ];
                for (
                  var q = 0;
                  q < cList[i][j].chapterInfo[0].taskJson[k].toolChoose.length;
                  q++
                ) {
                  if (
                    _toolsAarry.indexOf(
                      cList[i][j].chapterInfo[0].taskJson[k].toolChoose[q]
                        .tool[0]
                    ) != -1
                  ) {
                    tool++;
                  }
                }
              }
            }
          }
          var toolList = [
            [10, 49], //互动类
            [7, 1, 52, 3], //思维类
            [4, 45, 15, 16, 50, 40, 41, 47, 48], //评价类
            [18, 21, 22, 23, 24, 32, 57], //编程类
            [28, 37, 38, 31, 39, 58, 59, 60], //学科类
            [26, 25], //其他
          ];
          var toolAllArray = [];
          for (var p = 0; p < toolList.length; p++) {
            toolAllArray[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].push(
                        cList[i][j].chapterInfo[0].taskJson[k].toolChoose[q]
                          .tool[0]
                      );
                    }
                  }
                }
              }
            }
          }
          var tTypeAnaArray = [];
          for (var i = 0; i < toolAllArray.length; i++) {
            tTypeAnaArray.push(toolAllArray[i].length);
          }
          this.tTypeArray.push(tTypeAnaArray);

          for (var i = 0; i < sWorksList.length; i++) {
            for (var j = 0; j < courseList.length; j++) {
              if (sWorksList[i].courseid == courseList[j].courseId) {
                isFinish++;
              }
            }
          }

          var allToolWorks = tool;
          this.stuMessage.isFinishTaskWorks = isFinish;
          this.stuMessage.noFinishTaskWorks = allToolWorks - isFinish;
          let overPer = {};
          overPer.toolSubRate =
            (this.stuMessage.isFinishTaskWorks / allToolWorks).toFixed(2) * 100;
          var xArray = [];
          for (var i = 0; i < sWorksCList.length; i++) {
            if (xArray.length == 0) {
              xArray.push({ name: sWorksCList[i].title, value: 0 });
            } else {
              if (xArray.indexOf(sWorksCList[i].title) == -1) {
                xArray.push({ name: sWorksCList[i].title, value: 0 });
              }
            }
          }
          for (var i = 0; i < xArray.length; i++) {
            for (var j = 0; j < sWorksCList.length; j++) {
              if (xArray[i].name == sWorksCList[j].title) {
                var rateList = JSON.parse(sWorksCList[j].rate);
                var a = Object.keys(rateList);
                var courseCount = 0;
                for (var k = 0; k < a.length; k++) {
                  if (a[k] == "content") {
                    continue;
                  } else {
                    courseCount += rateList[a[k]];
                  }
                }
                xArray[j].value = Math.round(courseCount / (a.length - 1));
              }
            }
          }
          var yzArray = [];
          for (var i = 0; i < scoreXarray.length; i++) {
            var yCount = 0;
            for (var j = 0; j < xArray.length; j++) {
              if (scoreXarray[i] == xArray[j].name) {
                yCount += xArray[j].value;
              }
            }
            yzArray.push({ name: scoreXarray[i], value: yCount });
          }
          yzArray.sort(function (a, b) {
            return b.value - a.value;
          });
          this.cEvaScore = yzArray;
          
          var ctArray = [];
          var cxtArray = [];
          for (var i = 0; i < cTypeList.length; i++) {
            for (var j = 0; j < cTypeList[i].length; j++) {
              if (ctArray.length == 0) {
                ctArray.push(cTypeList[i][j]);
              } else {
                if (ctArray.indexOf(cTypeList[i][j]) == -1) {
                  ctArray.push(cTypeList[i][j]);
                }
              }
              cxtArray.push(cTypeList[i][j]);
            }
          }
          const result = ctArray
            .filter((item) => cxtArray.includes(item))
            .map((item) => ({
              count: cxtArray.filter((i) => i === item).length,
            }));
          var tArray = [];
          for (var i = 0; i < result.length; i++) {
            tArray.push(result[i].count);
          }
          var tuples1 = ctArray.map((label, index) => [label, tArray[index]]);
          // 根据数据降序排序二元组
          tuples1.sort((a, b) => b[1] - a[1]);
          // 提取已排序的标签
          var txArrayNew = tuples1.map((tuple) => tuple[0]);
          var tarrayNew = tuples1.map((tuple) => tuple[1]);
          var subjectList = [
            "语文",
            "数学",
            "英语",
            "科学",
            "信息技术",
            "物理",
            "化学",
            "生物",
            "历史",
            "地理",
            "通用技术",
            "政治",
            "STEM",
            "美术",
            "其他",
          ];
          for (var i = 0; i < txArrayNew.length; i++) {
            if (subjectList.indexOf(txArrayNew[i]) != -1) {
              this.cTypeAnaList.push({
                name: txArrayNew[i],
                value: tarrayNew[i],
              });
            }
          }
          var lTime = 0;
          for (var i = 0; i < loginAllTime.length; i++) {
            lTime += parseInt(loginAllTime[i].text);
          }
          var days = Math.floor(lTime / (3600 * 24));
          lTime %= 3600 * 24;
          var hours = Math.floor(lTime / 3600);
          lTime %= 3600;
          var minutes = Math.floor(lTime / 60);
          lTime %= 60;
          if (days > 0) {
            overPer.loginTime = `${days}天${hours}小时`;
          } else if (days < 0 && hours > 0) {
            overPer.loginTime = `${hours}小时${minutes}分钟`;
          } else if (days == 0 && hours == 0 && minutes > 0) {
            overPer.loginTime = `${minutes}分钟${loginAllTime}秒`;
          } else {
            overPer.loginTime = `${loginAllTime}秒`;
          }
          var sTime = 0;
          for (var i = 0; i < studyAllTime.length; i++) {
            sTime += parseInt(studyAllTime[i].text);
          }
          var days1 = Math.floor(sTime / (3600 * 24));
          sTime %= 3600 * 24;
          var hours1 = Math.floor(sTime / 3600);
          sTime %= 3600;
          var minutes1 = Math.floor(sTime / 60);
          sTime %= 60;
          if (days1 > 0) {
            overPer.studyTime = `${days1}天${hours1}小时`;
          } else if (days1 < 0 && hours1 > 0) {
            overPer.studyTime = `${hours1}小时${minutes1}分钟`;
          } else if (days1 == 0 && hours1 == 0 && minutes1 > 0) {
            overPer.studyTime = `${minutes1}分钟${sTime}秒`;
          } else {
            overPer.studyTime = `${sTime}秒`;
          }
          overPer.sName = this.stuMessage.name;
          var courseNum = 0;
          for (var i = 0; i < yzArray.length; i++) {
            courseNum += yzArray[i].value;
          }
          overPer.courseaScore = Math.floor(courseNum / yzArray.length);
          this.overPer = overPer;
          this.$forceUpdate();
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.getMrEva();
  },
};
</script>

<style scoped>
.sr_head {
  color: rgb(21, 80, 183);
  font-size: 30px;
  font-weight: bolder;
  text-align: center;
  margin-bottom: 15px;
}
.sr_body {
  width: 95%;
  margin: 0 auto;
  height: calc(100% - 55px);
}

.sr_box {
  width: 100%;
  height: 100%;
  display: flex;
  min-width: 1100px;
  min-height: 700px;
}

.sr_first {
  width: calc(100% / 4);
  height: 100%;
}

.sr_second {
  width: calc(100% / 3.75 * 2);
  height: 100%;
}
.sr_third {
  width: calc(100% / 3.75);
  height: 100%;
}
.sr_first,
.sr_second,
.sr_third {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sr_first .first,
.sr_first .second,
.sr_first .third,
.sr_second .first,
.sr_second .second,
.sr_third .first,
.sr_third .second,
.sr_third .third {
  background: #fff;
  border-radius: 10px;
  width: 98%;
  overflow: hidden;
  box-shadow: 0 0 10px 3px #cad1d9;
}
.sr_first .first {
  height: calc(100% / 3);
  margin-bottom: 20px;
}
.sr_first .second {
  height: calc(100% / 3);
  margin-bottom: 20px;
}

.sr_first .third {
  height: calc(100% / 3);
}

.sr_second .first {
  /* height: calc(100% / 3.5 * 2); */
  height: calc(100%);
  /* margin-bottom: 20px; */
}
.sr_second .second {
  /* height: calc(100% / 3.5 * 1.5); */
}
.sr_third .first {
  height: 260px;
  margin-bottom: 20px;
}
.sr_third .second {
  height: 260px;
  margin-bottom: 20px;
}
.sr_third .third {
  height: 260px;
}
.sub_title {
  display: flex;
  color: #3050c2;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 200px;
  margin: 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 5px;
}

.r_box {
  height: calc(100% - 40px);
  width: 100%;
}
.mrTitle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  margin: 10px 0;
}
.mrTitle > div:nth-child(1) {
  font-size: 22px;
}
.mrIcon {
  width: 30px;
  margin-left: 5px;
}
.yuan {
  width: 30px;
  height: 30px;
}
.mrIcon > img,
.yuan > img {
  width: 100%;
  height: 100%;
}
.cancelbox {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 20px;
  width: 95%;
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-end;
  padding: 0 90px 0px 0px;
  box-sizing: border-box;
}

.report_box {
  height: 100%;
  position: absolute;
  top: 0;
  /* background: #fff; */
  background: rgb(231, 242, 252);
  overflow: auto;
  z-index: 1;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  box-sizing: border-box;
}
.isWorkCss {
  width: 100%;
  height: 100%;
}
</style>