1

src/components/pages/learnAnalysis/components/beDataBase.vue

@@ -0,0 +1,382 @@
+<template>
+  <div style="width: 94%; margin: 0 auto 10px">
+    <div class="student_head">
+      <div class="student_search">
+        <!-- <div>数据筛选</div>
+        <el-select v-model="mChoose">
+          <el-option label="全部" value="">全部</el-option>
+          <el-option
+            v-for="(c, cIndex) in messageJuri"
+            :key="cIndex"
+            :value="c.id"
+            :label="c.name"
+          ></el-option>
+        </el-select>
+        <div
+          style="
+            line-height: 35px;
+            font-size: 14px;
+            min-width: 60px;
+            margin-left: 10px;
+          "
+        >
+          分类筛选
+        </div>
+        <el-select v-model="tChoose">
+          <el-option label="全部" value="">全部</el-option>
+          <el-option
+            v-for="(e, eIndex) in typeJuri"
+            :key="eIndex"
+            :value="e.id"
+            :label="e.title"
+          ></el-option>
+        </el-select>
+        <el-input
+          v-model="cn"
+          placeholder="筛选项目名称"
+          @input="search"
+        ></el-input> -->
+      </div>
+      <div class="student_search_right">
+        <el-input v-model="mName" placeholder="请输入名称"></el-input>
+        <el-button size="mini" type="primary">查询</el-button>
+      </div>
+    </div>
+    <div
+      class="pb_content_body"
+      style="width: 100%; height: 100%; position: relative"
+    >
+      <!-- v-loading="isLoading" -->
+      <el-table
+        :data="table"
+        border
+        style="width: 100%; margin-top: 10px"
+        :row-class-name="tableRowClassName"
+      >
+        <el-table-column
+          prop="order"
+          align="center"
+          label="序号"
+          min-width="25%"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="title"
+          align="center"
+          label="数据"
+          min-width="25%"
+        >
+          <template slot-scope="scope">
+            <div class="noOpen">
+              <div>
+                {{ scope.row.title }}
+              </div>
+              <div class="noOpenNav" v-if="scope.row.isOpen == 1">未开放</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="typeName"
+          align="center"
+          label="分类"
+          min-width="25%"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="detail"
+          align="center"
+          label="说明"
+          min-width="25%"
+        >
+        </el-table-column>
+        <el-table-column label="选择" align="center" min-width="25%">
+          <template slot-scope="scope">
+            <input
+              type="checkbox"
+              :id="scope.row.id"
+              :value="scope.row.title"
+              @change="isChooseS(scope.row.id)"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="modelButton" @click="isNoJump">组建模型</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isLoading: false,
+      messageJuri: [],
+      typeJuri: [],
+      isChooseList: [],
+      mChoose: "",
+      tChoose: "",
+      mName: "",
+      cn: "",
+      table: [
+        {
+          id: 1,
+          order: 1,
+          title: "登录时长",
+          typeName: "课堂学习",
+          detail: "一段时间内的平台登录时长",
+          isOpen: 0,
+        },
+        {
+          id: 2,
+          order: 2,
+          title: "学习时长",
+          typeName: "课堂学习",
+          detail:
+            "单个课程的学习时长:单个课程进入[立即学习]后的时长。多个课程的学习时长:多个课程在[立即学习] 后的时长累计。 阶段学习时长: 某个时间段内，在[课程中心]的时长。",
+          isOpen: 0,
+        },
+        {
+          id: 3,
+          order: 3,
+          title: "工具提交率",
+          typeName: "工具使用",
+          detail:
+            "单个课程的工具提交率:单个课程在当前使用工具完成作业并提交的比例( 包括选择题)。多个课程的工具提交率:多个课程在当前使用工具完成作业并提交的比例(包括选择题)。",
+          isOpen: 0,
+        },
+        {
+          id: 4,
+          order: 4,
+          title: "工具使用（类型）",
+          typeName: "工具使用",
+          detail:
+            "单个课程的工具使用类型: 单个课程内的不同类型工具分布。多个课程的工具使用类型:多个课程内的不同类型工具分布。",
+          isOpen: 0,
+        },
+        {
+          id: 5,
+          order: 5,
+          title: "课程平均得分",
+          typeName: "课程得分",
+          detail:
+            "单个课程得分:单个课程内，所有工具的平均得分。多个课程得分: 多个课程内，所有工具的平均得分。",
+          isOpen: 0,
+        },
+        {
+          id: 6,
+          order: 6,
+          title: "资料阅读率",
+          typeName: "课堂学习",
+          detail:
+            "单个课程阅读完成度:单个课程的PDF文件、视频阅读完成率。多个课程阅读完成度:多个课程的PDF文件、视频阅读平均完成率。",
+          isOpen: 1,
+        },
+        {
+          id: 7,
+          order: 7,
+          title: "资料阅读时长",
+          typeName: "课堂学习",
+          detail:
+            "单个课程阅读时长：单个课程的PDF文件、视频阅读完成时长。多个课程阅读时长：多个课程的PDF文件、视频阅读完成平均时长。",
+          isOpen: 1,
+        },
+        {
+          id: 8,
+          order: 8,
+          title: "目标得分",
+          typeName: "课堂学习",
+          detail: "单个/多个课程的目标得分计算（教学评一体化）。",
+          isOpen: 0,
+        },
+        {
+          id: 9,
+          order: 9,
+          title: "学习状态综合分析",
+          typeName: "课堂学习",
+          detail: "一段时间内多个课程综合得分与目标评价结果及表现数据汇总。",
+          isOpen: 1,
+        },
+        {
+          id: 10,
+          order: 10,
+          title: "分组工具使用数量",
+          typeName: "同伴交互",
+          detail: "使用“分组”工具的数量",
+          isOpen: 1,
+        },
+        {
+          id: 11,
+          order: 11,
+          title: "工具提交次数",
+          typeName: "工具使用",
+          detail: "使用工具提交的总次数（不算多次提交的情况）",
+          isOpen: 1,
+        },
+        {
+          id: 12,
+          order: 12,
+          title: "参与评论次数",
+          typeName: "同伴交互",
+          detail: "回复他人的次数",
+          isOpen: 1,
+        },
+        {
+          id: 13,
+          order: 13,
+          title: "回复评论次数",
+          typeName: "同伴交互",
+          detail: "回复他人给自己的评论的次数",
+          isOpen: 1,
+        },
+        {
+          id: 14,
+          order: 14,
+          title: "获得评论次数",
+          typeName: "同伴交互",
+          detail: "获得他人回复评论的次数",
+          isOpen: 1,
+        },
+        {
+          id: 15,
+          order: 15,
+          title: "点赞他人次数",
+          typeName: "同伴交互",
+          detail: "点赞他人联系的次数",
+          isOpen: 1,
+        },
+        {
+          id: 16,
+          order: 16,
+          title: "获得点赞次数",
+          typeName: "同伴交互",
+          detail: "获得他人点赞的次数",
+          isOpen: 1,
+        },
+        {
+          id: 17,
+          order: 17,
+          title: "客观题平均得分",
+          typeName: "同伴交互",
+          detail: "单个/多个课程的客观题得分计算（依据正确率统计）",
+          isOpen: 1,
+        },
+        {
+          id: 18,
+          order: 18,
+          title: "主观题平均得分",
+          typeName: "同伴交互",
+          detail: "单个/多个课程的主观题得分计算（依据教师打分统计）",
+          isOpen: 0,
+        },
+      ],
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    isChooseS(id) {
+      if (this.isChooseList.length > 0) {
+        if (this.isChooseList.indexOf(id) == -1) {
+          this.isChooseList.push(id);
+        } else {
+          this.isChooseList.splice(this.isChooseList.indexOf(id), 1);
+        }
+      } else {
+        this.isChooseList.push(id);
+      }
+      this.$forceUpdate();
+    },
+    isNoJump() {
+      this.$message.warning("暂未开放此功能！");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.student_head {
+  padding: 10px 25px;
+  display: flex;
+  justify-content: space-between;
+  background: #fff;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.student_search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.student_search > div:nth-child(1) {
+  line-height: 35px;
+  font-size: 14px;
+  min-width: 60px;
+}
+.student_search > div:nth-child(4) {
+  cursor: pointer;
+}
+.student_search >>> .el-input__inner {
+  width: 190px;
+  height: 35px;
+  margin-left: 10px;
+}
+.student_search_right {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.student_search_right >>> .el-button {
+  margin-left: 5px;
+  height: 35px;
+  width: 80px;
+  font-size: 14px;
+  background: #2268bd;
+}
+.el-table >>> .even_row {
+  background-color: #f1f1f1;
+}
+.el-table >>> .has-gutter > tr th {
+  background: #f1f1f1;
+}
+.modelButton {
+  position: fixed;
+  right: 5%;
+  bottom: 2%;
+  background: #409efe;
+  color: #fff;
+  width: 95px;
+  height: 40px;
+  text-align: center;
+  line-height: 40px;
+  border-radius: 5px;
+  z-index: 9;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 0 0 10px 0 #b5b5b5;
+}
+.noOpen {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+.noOpenNav {
+  background: #f65854;
+  color: #fff;
+  width: 55px;
+  border-radius: 5px;
+  text-align: center;
+  margin-left: 5px;
+  font-size: 12px;
+}
+</style>

src/components/pages/learnAnalysis/components/lookModel.vue

@@ -0,0 +1,684 @@
+<template>
+  <div :class="{ isWorkCss: reportVisible }">
+    <div class="sr_body">
+      <div class="modelTopBox">
+        <div class="mrTitle">
+          <div class="mrIcon">
+            <img src="../../../../assets/icon/myReport/tIcon.png" alt="" />
+          </div>
+          <div>人工智能教学模型</div>
+        </div>
+        <div class="modelButton">目标：科学思维</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 "../../myReport/components/mrBasicData.vue";
+import MrOverPer from "../../myReport/components/mrOverPer.vue";
+import MyCourseReport from "../../myReport/components/myCourseReport.vue";
+import MrLearnStatus from "../../myReport/components/mrLearnStatus.vue";
+import CourseEvaScore from "../../myReport/components/courseEvaScore.vue";
+import CourseTypeAna from "../../myReport/components/courseTypeAna.vue";
+import ToolTypeAna from "../../myReport/components/toolTypeAna.vue";
+import MrEva from "../../myReport/components/mrEva.vue";
+import myReportLook from "../../myReport/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;
+          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;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 10px 0;
+}
+.mrTitle > div:nth-child(1) {
+  font-size: 22px;
+}
+.mrIcon {
+  width: 30px;
+  height: 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%;
+}
+.modelButton {
+  color: #409efe;
+}
+.modelTopBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+}
+.dialog_diy >>> .el-dialog__header {
+  background: #3c3c3c !important;
+  padding: 15px 20px;
+}
+
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 19px;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #fafafa;
+}
+.modelDiaBox {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.modelDiaItem {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0 0 10px 0;
+}
+.modelDiaItem > div:nth-child(1) {
+  margin: 0 5px 0 0;
+}
+.modelDiaBox > div:nth-child(2) > div:nth-child(2) >>> .el-select {
+  width: 202px;
+}
+</style>

src/components/pages/learnAnalysis/components/modelBase.vue

@@ -0,0 +1,278 @@
+<template>
+  <div style="width: 94%; margin: 0 auto 10px">
+    <div class="student_head">
+      <div class="student_search">
+        <div>数据筛选</div>
+        <el-select v-model="mChoose">
+          <el-option label="全部" value="">全部</el-option>
+          <el-option
+            v-for="(c, cIndex) in messageJuri"
+            :key="cIndex"
+            :value="c.id"
+            :label="c.name"
+          ></el-option>
+        </el-select>
+        <div
+          style="
+            line-height: 35px;
+            font-size: 14px;
+            min-width: 60px;
+            margin-left: 10px;
+          "
+        >
+          分类筛选
+        </div>
+        <el-select v-model="tChoose">
+          <el-option label="全部" value="">全部</el-option>
+          <el-option
+            v-for="(e, eIndex) in typeJuri"
+            :key="eIndex"
+            :value="e.id"
+            :label="e.title"
+          ></el-option>
+        </el-select>
+      </div>
+      <div class="student_search_right">
+        <el-input v-model="mName" placeholder="请输入名称"></el-input>
+        <el-button size="mini" type="primary">查询</el-button>
+      </div>
+    </div>
+    <div class="pb_content_body">
+      <!-- <div class="modelBoxLeft">
+        <div
+          v-for="(item, index) in modelType"
+          :key="index"
+          class="modelChooseList"
+        >
+          <div>{{ item.name }}</div>
+          <div class="modelChildBox">
+            <div
+              v-for="(item1, index1) in item.modelCType"
+              :key="index1"
+              class="modelChild"
+            >
+              {{ item1.cname }}
+            </div>
+          </div>
+        </div>
+      </div> -->
+      <div class="modelBoxRight" v-for="(item, index) in table" :key="index">
+        <div class="modelTop">
+          <div class="modelImg">
+            <img src="../../../../assets/icon/modelImg.png" alt="" />
+          </div>
+          <div>{{ item.name }}</div>
+        </div>
+        <div
+          class="modelBottom"
+          @click="
+            goTo(
+              '/lookModel?userid=a77e9404-efec-11e9-96f9-028edca3b798&oid=45facc0a-1211-11ec-80ad-005056b86db5'
+            )
+          "
+        >
+          查看
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      messageJuri: [],
+      typeJuri: [],
+      //   modelType: [
+      //     {
+      //       id: 1,
+      //       name: "课堂学习",
+      //       modelCType: [
+      //         { cid: 1, cname: "登录时长" },
+      //         { cid: 1, cname: "学习时长" },
+      //         { cid: 1, cname: "资料阅读率" },
+      //         { cid: 1, cname: "资料阅读时长" },
+      //       ],
+      //     },
+      //     {
+      //       id: 2,
+      //       name: "工具使用",
+      //       modelCType: [
+      //         { cid: 1, cname: "工具提交率" },
+      //         { cid: 1, cname: "工具使用（类型）" },
+      //         { cid: 1, cname: "工具提交次数" },
+      //       ],
+      //     },
+      //     {
+      //       id: 3,
+      //       name: "课程得分",
+      //       modelCType: [
+      //         { cid: 1, cname: "主观题平均得分" },
+      //         { cid: 1, cname: "客观题平均得分" },
+      //         { cid: 1, cname: "课程平均得分" },
+      //       ],
+      //     },
+      //     {
+      //       id: 4,
+      //       name: "同伴交互",
+      //       modelCType: [
+      //         { cid: 1, cname: "分组工具使用数量" },
+      //         { cid: 1, cname: "参与评论次数" },
+      //         { cid: 1, cname: "获得评论次数" },
+      //         { cid: 1, cname: "点赞他人次数" },
+      //         { cid: 1, cname: "回复评论次数" },
+      //         { cid: 1, cname: "获得点赞次数" },
+      //       ],
+      //     },
+      //   ],
+      table: [{ id: 1, name: "课堂互动模型" }],
+      mChoose: "",
+      tChoose: "",
+      mName: "",
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.student_head {
+  padding: 10px 25px;
+  display: flex;
+  justify-content: space-between;
+  background: #fff;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.student_search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.student_search > div:nth-child(1) {
+  line-height: 35px;
+  font-size: 14px;
+  min-width: 60px;
+}
+.student_search > div:nth-child(4) {
+  cursor: pointer;
+}
+.student_search >>> .el-input__inner {
+  width: 190px;
+  height: 35px;
+  margin-left: 10px;
+}
+.student_search_right {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.student_search_right >>> .el-button {
+  margin-left: 5px;
+  height: 35px;
+  width: 80px;
+  font-size: 14px;
+  background: #2268bd;
+}
+.pb_content_body {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin: 20px auto;
+  justify-content: flex-start;
+}
+.modelBoxLeft {
+  height: 100%;
+  background: #fff;
+  border-radius: 5px;
+}
+.modelBoxLeft {
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  padding: 20px;
+}
+.modelChooseList {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  margin-bottom: 20px;
+}
+.modelChooseList > div:nth-child(1) {
+  margin-bottom: 15px;
+  color: #6e6e6e;
+}
+.modelChildBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+}
+.modelChild {
+  background: #f7f7f7;
+  border-radius: 15px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  font-size: 14px;
+  cursor: pointer;
+  color: #b7b7b7;
+  min-width: 85px;
+  margin: 0 5px 10px 0;
+  padding: 0 10px;
+}
+.modelChild:hover {
+  background: #eeeeee;
+}
+.modelBoxRight {
+  background: #fff;
+  width: 350px;
+  height: 280px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  border-radius: 5px;
+  margin: 0 20px 20px 0;
+}
+.modelTop {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.modelImg {
+  width: 150px;
+  height: 150px;
+  padding: 25px 0;
+}
+.modelImg > img {
+  width: 100%;
+  height: 100%;
+}
+.modelBottom {
+  margin: 20px 0 0 0;
+  width: 100%;
+  text-align: center;
+  background: #f4f4f4;
+  height: 30px;
+  line-height: 30px;
+  padding: 5px 0;
+  cursor: pointer;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+</style>

src/components/pages/learnAnalysis/components/modelReport.vue

@@ -0,0 +1,752 @@
+<template>
+  <div :class="{ isWorkCss: reportVisible }">
+    <div class="sr_body">
+      <div class="modelTopBox">
+        <div class="mrTitle">
+          <div>学习报告</div>
+          <div class="mrIcon">
+            <img src="../../../../assets/icon/myReport/tIcon.png" alt="" />
+          </div>
+        </div>
+        <div class="modelButton" @click="dialogVisible = true">生成模型</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>
+    <el-dialog
+      title="生成报告"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="30%"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div class="modelDiaBox">
+        <div class="modelDiaItem">
+          <div>模型名称：</div>
+          <div>
+            <el-input v-model="modelName" placeholder="填写名称"></el-input>
+          </div>
+        </div>
+        <div class="modelDiaItem">
+          <div>绑定目标：</div>
+          <div>
+            <el-select v-model="evaChoose" placeholder="请选择">
+              <el-option
+                v-for="(e, eIndex) in evaList"
+                :key="eIndex"
+                :label="e.name"
+                :value="e.id"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="
+            goTo(
+              '/learnAna?userid=a77e9404-efec-11e9-96f9-028edca3b798&oid=45facc0a-1211-11ec-80ad-005056b86db5'
+            )
+          "
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import MrBasicData from "../../myReport/components/mrBasicData.vue";
+import MrOverPer from "../../myReport/components/mrOverPer.vue";
+import MyCourseReport from "../../myReport/components/myCourseReport.vue";
+import MrLearnStatus from "../../myReport/components/mrLearnStatus.vue";
+import CourseEvaScore from "../../myReport/components/courseEvaScore.vue";
+import CourseTypeAna from "../../myReport/components/courseTypeAna.vue";
+import ToolTypeAna from "../../myReport/components/toolTypeAna.vue";
+import MrEva from "../../myReport/components/mrEva.vue";
+import myReportLook from "../../myReport/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,
+      dialogVisible: false,
+      checkStudent: "",
+      checkCourse: [],
+      evaList: [], //目标体系
+      stuMessage: {}, //基础信息
+      cEvaScore: [], //课程评价得分
+      cTypeAnaList: [], //课程类型分析
+      tTypeArray: [], //工具类型分析
+      overPer: {}, //我的综合表现
+      evaList: [
+        { id: 1, name: "目标1" },
+        { id: 2, name: "目标2" },
+        { id: 3, name: "目标3" },
+        { id: 4, name: "目标4" },
+        { id: 5, name: "目标5" },
+      ],
+      modelName: "",
+      evaChoose: "",
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    handleClose(done) {
+      done();
+    },
+    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;
+          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;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 10px 0;
+}
+.mrTitle > div:nth-child(1) {
+  font-size: 22px;
+}
+.mrIcon {
+  width: 30px;
+  height: 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%;
+}
+.modelButton {
+  background: #409efe;
+  color: #fff;
+  width: 95px;
+  height: 40px;
+  text-align: center;
+  line-height: 40px;
+  border-radius: 5px;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 0 0 10px 0 #b5b5b5;
+}
+.modelTopBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+}
+.dialog_diy >>> .el-dialog__header {
+  background: #3c3c3c !important;
+  padding: 15px 20px;
+}
+
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 19px;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #fafafa;
+}
+.modelDiaBox {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.modelDiaItem {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0 0 10px 0;
+}
+.modelDiaItem > div:nth-child(1) {
+  margin: 0 5px 0 0;
+}
+.modelDiaBox > div:nth-child(2) > div:nth-child(2) >>> .el-select {
+  width: 202px;
+}
+</style>

src/components/pages/learnAnalysis/learnAna.vue

@@ -0,0 +1,132 @@
+<template>
+  <div
+    class="pb_content"
+    style="
+      background: unset;
+      overflow: auto;
+      padding: 20px;
+      margin: 0;
+      box-sizing: border-box;
+    "
+  >
+    <div
+      style="
+        position: absolute;
+        width: 95%;
+        top: 0;
+        height: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+      "
+    >
+      <div
+        class="pb_content_body"
+        style="
+          background: #fff;
+          padding: 0px 25px;
+          box-sizing: border-box;
+          border-top-left-radius: 5px;
+          border-top-right-radius: 5px;
+          margin: 10px auto 0;
+        "
+      >
+        <div class="pb_head pb_head_top">
+          <div>
+            <span :class="{ sub_head: type == 0 }" @click="type = 0"
+              >模型库</span
+            >
+            <span :class="{ sub_head: type == 1 }" @click="type = 1"
+              >行为数据库</span
+            >
+          </div>
+          <div class="student_button" v-if="type == 0">
+            <el-button type="primary" class="bgColor" @click="isNoJump"
+              >创建模型</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <div>
+        <ModelBase v-if="type == 0"></ModelBase>
+        <BeDataBase v-else></BeDataBase>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ModelBase from "./components/modelBase";
+import BeDataBase from "./components/beDataBase";
+export default {
+  components: {
+    ModelBase,
+    BeDataBase,
+  },
+  data() {
+    return {
+      type: 0,
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    isNoJump() {
+      this.$message.warning("暂未开放此功能！");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pb_head > div:nth-child(1) > span:nth-child(1),
+.pb_head > div:nth-child(1) > span:nth-child(2) {
+  font-size: 26px;
+  cursor: pointer;
+  color: #999;
+}
+.pb_head > div:nth-child(1) > span:nth-child(2) {
+  margin: 0 10px;
+}
+.pb_head > div:nth-child(1) > span:nth-child(1):hover,
+.pb_head > div:nth-child(1) > span:nth-child(2):hover {
+  color: #000;
+}
+.pb_head {
+  margin: 0 !important;
+  width: 100% !important;
+}
+.student_page {
+  margin-top: 10px;
+}
+.sub_head {
+  position: relative;
+  color: #000 !important;
+}
+.sub_head::after {
+  content: "";
+  width: 100%;
+  background: #5a9cea;
+  height: 2px;
+  position: absolute;
+  left: 0;
+  bottom: -12px;
+}
+.student_button {
+  display: flex;
+  overflow: hidden;
+  height: 40px;
+}
+.pb_head_top {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  padding: 10px 5px 10px 0 !important;
+}
+.bgColor {
+  background: #466b99;
+}
+</style>

src/router/index.js

@@ -85,6 +85,9 @@ import stReport from '@/components/pages/components/stReport'
 import classReport from '@/components/pages/components/classReport'
 import courseReport from '@/components/pages/components/courseReport'
 import evaReport from '@/components/pages/components/evaReport'
+import learnAna from '@/components/pages/learnAnalysis/learnAna'
+import modelReport from '@/components/pages/learnAnalysis/components/modelReport'
+import lookModel from '@/components/pages/learnAnalysis/components/lookModel'
 
 Vue.use(Router).use(ElementUI)
 
@@ -733,5 +736,29 @@ export default new Router({
                 requireAuth: '' // 不需要鉴权
             }
         },
+        {
+            path: '/learnAna',
+            name: 'learnAna',
+            component: learnAna,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
+        },
+        {
+            path: '/modelReport',
+            name: 'modelReport',
+            component: modelReport,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
+        },
+        {
+            path: '/lookModel',
+            name: 'lookModel',
+            component: lookModel,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
+        },
     ]
 })