新增我的学习报告数据展示功能

src/components/pages/components/myRportLook.vue

@@ -0,0 +1,191 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <div class="sr_head">学生成长报告</div>
+    <div class="sr_body">
+      <div class="sr_box">
+        <div class="sr_first">
+          <div class="first">
+            <div class="sub_title"><span>学生基本信息</span></div>
+            <StudentInfo class="r_box" :userid="userid" :courseid="courseid"></StudentInfo>
+          </div>
+          <div class="second">
+            <div class="sub_title"><span>项目基本信息</span></div>
+            <CourseInfo class="r_box" :courseid="courseid"></CourseInfo>
+          </div>
+        </div>
+        <div class="sr_second">
+          <div class="first">
+            <div class="sub_title"><span>学生综合能力评估</span></div>
+            <StudentAbility class="r_box"  :userid="userid" :courseid="courseid"></StudentAbility>
+          </div>
+          <!-- <div class="second">
+            <div class="sub_title"><span>项目详细报告</span></div>
+            <CourseDetailReport class="r_box"></CourseDetailReport>
+          </div> -->
+        </div>
+        <div class="sr_third">
+          <div class="first">
+            <div class="sub_title"><span>阶段完成情况</span></div>
+            <CourseRadar class="r_box" :userid="userid" :courseid="courseid"></CourseRadar>
+          </div>
+          <div class="second">
+            <div class="sub_title"><span>阶段评价平均分</span></div>
+            <CoursePie class="r_box" :userid="userid" :courseid="courseid"></CoursePie>
+          </div>
+        </div>
+      </div>
+      <div style="height:100%;min-width: 1100px;">
+        <worksDetail3 class="r_box" :cid="courseid" :uid="userid" :ooid="scoid"></worksDetail3>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import StudentInfo from "./report/studentInfo.vue";
+import CourseInfo from "./report/courseInfo.vue";
+import StudentAbility from "./report/studentAbility.vue";
+import CourseRadar from "./report/courseRadar.vue";
+import CoursePie from "./report/coursePie.vue";
+import CourseDetailReport from "./report/courseDetailReport.vue";
+import worksDetail3 from "./worksDetail3.vue";
+export default {
+  props: ["checkCourse", "checkStudent","oid"],
+  components: {
+    StudentInfo,
+    CourseInfo,
+    StudentAbility,
+    CourseRadar,
+    CoursePie,
+    CourseDetailReport,
+    worksDetail3
+  },
+  data() {
+    return {
+      userid: "",
+      courseid: "",
+      scoid:"",
+    };
+  },
+  watch: {
+    checkStudent(newValue, oldValue) {
+      this.userid = this.checkStudent;
+      this.courseid = this.checkCourse;
+      this.scoid = this.oid;
+    },
+  },
+  created() {
+    this.userid = this.checkStudent;
+    this.courseid = this.checkCourse;
+    this.scoid = this.oid;
+  },
+};
+</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: 100%;
+  height: calc(100% - 55px);
+  overflow: auto;
+}
+
+.sr_box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  min-width: 1100px;
+  min-height: 700px;
+}
+
+.sr_first {
+  width: calc(100% / 3.75);
+  height: 100%;
+}
+
+.sr_second {
+  width: calc(100% / 3.75 * 2);
+  height: 100%;
+}
+.sr_third {
+  width: calc(100% / 3.75 * 0.75);
+  height: 100%;
+}
+.sr_first,
+.sr_second,
+.sr_third {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.sr_first .first,
+.sr_first .second,
+.sr_second .first,
+.sr_second .second,
+.sr_third .first,
+.sr_third .second {
+  background: #fff;
+  border-radius: 10px;
+  width: 98%;
+  overflow: hidden;
+}
+.sr_first .first {
+  height: calc(100% / 3 * 1.1);
+  margin-bottom: 20px;
+}
+.sr_first .second {
+  height: calc(100% / 3 * 1.9);
+}
+
+.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: calc(100% / 2.25 * 1.25);
+  margin-bottom: 20px;
+}
+.sr_third .second {
+  height: calc(100% / 2.25);
+}
+.sub_title {
+  display: flex;
+  color: rgb(0, 107, 180);
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  width: 200px;
+  margin: 0 auto;
+}
+.sub_title span {
+}
+.sub_title::after {
+  content: "";
+  width: 20px;
+  height: 20px;
+  background-image: url(../../../assets/report/left_coin.png);
+  background-size: 100% 100%;
+}
+.sub_title::before {
+  content: "";
+  width: 20px;
+  height: 20px;
+  background-image: url(../../../assets/report/right_coin.png);
+  background-size: 100% 100%;
+}
+
+.r_box {
+  height: calc(100% - 40px);
+  width: 100%;
+}
+</style>

src/components/pages/components/report/studentInfo.vue

@@ -1,14 +1,15 @@
 <template>
   <div v-loading="isloading">
-    <div class="si_head"  v-if="Object.keys(userinfo).length">
+    <div class="si_head" v-if="Object.keys(userinfo).length">
       <img class="si_img" src="@/assets/portal.png" alt="" />
       <div class="si_content">
         <div>
           <span>姓名:</span><span>{{ userinfo.name }}</span>
         </div>
         <div>
-          <span>班级:</span><span>{{
-          userinfo.classname ? userinfo.classname : "暂无班级"
+          <span>班级:</span
+          ><span>{{
+            userinfo.classname ? userinfo.classname : "暂无班级"
           }}</span>
         </div>
         <div>
@@ -16,7 +17,7 @@
         </div>
       </div>
     </div>
-    <div class="si_course"  v-if="Object.keys(userinfo).length">
+    <div class="si_course" v-if="Object.keys(userinfo).length">
       <div class="si_course_head">课程概况</div>
       <div class="si_course_content">
         <div class="si_course_box">
@@ -41,7 +42,6 @@
 </template>
 
 <script>
-
 export default {
   props: ["userid", "courseid"],
   data() {
@@ -51,7 +51,7 @@ export default {
       iscount: 0,
       islearn: 0,
       ccount: 0,
-      isloading:false,
+      isloading: false,
     };
   },
   methods: {
@@ -69,7 +69,7 @@ export default {
       }
     },
     getInfo() {
-      this.isloading = true
+      this.isloading = true;
       let params = {
         uid: this.userid,
         cid: this.courseid,
@@ -81,7 +81,7 @@ export default {
       this.ajax
         .get(this.$store.state.api + "getUserInfo", params)
         .then((res) => {
-          this.isloading = false
+          this.isloading = false;
           let chapters = JSON.parse(res.data[2][0].chapters);
           var tool = 0;
           for (var i = 0; i < chapters.length; i++) {
@@ -91,7 +91,9 @@ export default {
               j++
             ) {
               // 1、电子白板，3、思维导图，6协同文档，7思维网格 16、作业提交,40.项目-学生互评 41.项目-下拉选择题 42.项目-录音功能
-              let _toolsAarry = [1, 3, 6, 7, 16, 15, 4, 40, 41, 42];
+              let _toolsAarry = [
+                1, 3, 6, 7, 16, 15, 4, 40, 41, 42, 49, 50, 52, 32, 57,
+              ];
               for (
                 var k = 0;
                 k < chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
@@ -118,7 +120,7 @@ export default {
           this.vcount = 0;
         })
         .catch((err) => {
-          this.isloading = false
+          this.isloading = false;
           console.error(err);
         });
     },
@@ -152,7 +154,7 @@ export default {
   font-size: 14px;
 }
 
-.si_content div+div {
+.si_content div + div {
   margin-top: 10px;
 }
 
@@ -160,7 +162,7 @@ export default {
   display: flex;
 }
 
-.si_content span+span {
+.si_content span + span {
   margin-left: 10px;
   white-space: nowrap;
   overflow: hidden;

src/components/pages/myReport/components/courseEvaScore.vue

@@ -1,12 +1,62 @@
 <template>
   <div>
-    <div style="width: 95%; height: 250px; margin: 0 auto">
-      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+    <!-- <div style="width: 95%; height: 250px; margin: 0 auto">
+      <img src="../../assets/dataimage/1.png" style="width:90%" />
       <div
         id="charts_canvas"
         class="echart"
         style="width: 100%; height: 100%"
       ></div>
+    </div> -->
+    <div class="scoreBox">
+      <div class="scoreLeft" v-if="isSortArray && isSortArray.length">
+        <div>
+          <el-tooltip
+            effect="light"
+            :content="`${isSortArray[1].name} - ${isSortArray[1].value}`"
+            placement="top"
+          >
+            <span>{{ isSortArray[1].name }}</span>
+          </el-tooltip>
+        </div>
+        <div>
+          <el-tooltip
+            effect="light"
+            :content="`${isSortArray[0].name} - ${isSortArray[0].value}`"
+            placement="top"
+          >
+            <span>{{ isSortArray[0].name }}</span>
+          </el-tooltip>
+        </div>
+        <div>
+          <el-tooltip
+            effect="light"
+            :content="`${isSortArray[2].name} - ${isSortArray[2].value}`"
+            placement="top"
+          >
+            <span>{{ isSortArray[2].name }}</span>
+          </el-tooltip>
+        </div>
+      </div>
+      <div class="scoreRight" v-if="lastArray && lastArray.length">
+        <div
+          v-for="(item, index) in lastArray"
+          :key="index"
+          class="scoreRightItem"
+        >
+          <div>
+            {{ index + 4 }}
+          </div>
+          <el-tooltip
+            effect="light"
+            :content="`${item.name} - ${item.value}`"
+            placement="top"
+          >
+            <div>{{ item.name }}</div>
+          </el-tooltip>
+          <div>{{ item.value }}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -16,84 +66,96 @@ export default {
   props: ["courseArray"],
   data() {
     return {
-      chartObj: null,
-      option: {
-        xAxis: {
-          type: "category",
-          data: [],
-          axisLabel: {
-            interval: 0, //使x轴文字显示全
-            formatter: function (params) {
-              let newParamsName = "";
-              var paramsNameNumber = params.length; // 文字总长度
-              var provideNumber = 4; //一行显示几个字
-              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
-              if (paramsNameNumber > provideNumber) {
-                for (let p = 0; p < rowNumber; p++) {
-                  var start = p * provideNumber;
-                  var end = start + provideNumber;
-                  var tempStr =
-                    p === rowNumber - 1
-                      ? params.substring(start, paramsNameNumber)
-                      : params.substring(start, end) + "\n";
-                  newParamsName += tempStr;
-                }
-              } else {
-                newParamsName = params;
-              }
-              return newParamsName;
-            },
-          },
-        },
-        yAxis: {
-          type: "value",
-        },
-        grid: {
-          top: 10,
-          bottom: 80,
-          left: 50,
-          right: 50
-        },
-        series: [
-          {
-            data: [],
-            type: "line",
-          },
-        ],
-      },
+      // chartObj: null,
+      // option: {
+      //   xAxis: {
+      //     type: "category",
+      //     data: [],
+      //     axisLabel: {
+      //       interval: 0, //使x轴文字显示全
+      //       formatter: function (params) {
+      //         let newParamsName = "";
+      //         var paramsNameNumber = params.length; // 文字总长度
+      //         var provideNumber = 4; //一行显示几个字
+      //         var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+      //         if (paramsNameNumber > provideNumber) {
+      //           for (let p = 0; p < rowNumber; p++) {
+      //             var start = p * provideNumber;
+      //             var end = start + provideNumber;
+      //             var tempStr =
+      //               p === rowNumber - 1
+      //                 ? params.substring(start, paramsNameNumber)
+      //                 : params.substring(start, end) + "\n";
+      //             newParamsName += tempStr;
+      //           }
+      //         } else {
+      //           newParamsName = params;
+      //         }
+      //         return newParamsName;
+      //       },
+      //     },
+      //   },
+      //   yAxis: {
+      //     type: "value",
+      //   },
+      //   grid: {
+      //     top: 10,
+      //     bottom: 80,
+      //     left: 50,
+      //     right: 50
+      //   },
+      //   series: [
+      //     {
+      //       data: [],
+      //       type: "line",
+      //     },
+      //   ],
+      // },
+      isSortArray: [],
+      lastArray: [],
     };
   },
   methods: {
     getInfo() {
       if (this.courseArray && this.courseArray[0]) {
-        this.setChart();
+        this.setJp();
       }
     },
-    setChart() {
-      // 雷达图显示的标签
-      let newPromise = new Promise((resolve) => {
-        resolve();
-      });
-      //然后异步执行echarts的初始化函数
-      newPromise.then(() => {
-        const chartObj = this.$echarts.init(
-          //劳动课程
-          this.$el.querySelector("#charts_canvas")
-          //   document.getElementById("#charts_canvas")
-        );
-        this.option.series[0].data = this.courseArray[0].array;
-        this.option.xAxis.data = this.courseArray[0].xArray;
-        // 初始化雷达图
-        this.chartObj = chartObj;
-        this.chartObj.setOption(this.option);
-      });
-      let _this = this;
-      window.addEventListener("resize", () => {
-        if (_this.chartObj) {
-          _this.chartObj.resize();
-        }
-      });
+    setJp() {
+      var sortedArray = [...this.courseArray];
+      var sortedArray1 = [...this.courseArray];
+      this.isSortArray = sortedArray.slice(0, 3);
+      this.lastArray = sortedArray1.splice(
+        3,
+        Infinity,
+        ...sortedArray1.slice(4, sortedArray1.length)
+      );
     },
+    // setChart() {
+    //   // 雷达图显示的标签
+    //   let newPromise = new Promise((resolve) => {
+    //     resolve();
+    //   });
+    //   //然后异步执行echarts的初始化函数
+    //   newPromise.then(() => {
+    //     const chartObj = this.$echarts.init(
+    //       //劳动课程
+    //       this.$el.querySelector("#charts_canvas")
+    //       //   document.getElementById("#charts_canvas")
+    //     );
+    //     this.option.series[0].data = this.courseArray[0].array;
+    //     this.option.xAxis.data = this.courseArray[0].xArray;
+    //     // 初始化雷达图
+    //     this.chartObj = chartObj;
+    //     this.chartObj.setOption(this.option);
+    //   });
+    //   let _this = this;
+    //   window.addEventListener("resize", () => {
+    //     if (_this.chartObj) {
+    //       _this.chartObj.resize();
+    //     }
+    //   });
+    // },
   },
   watch: {
     courseArray: {
@@ -111,5 +173,74 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.scoreBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+}
+.scoreLeft {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+  margin-right: 15px;
+}
+.scoreLeft > div {
+  width: 40px;
+  margin-right: 10px;
+  padding: 10px 0;
+  background: #4472c4;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  writing-mode: vertical-lr;
+}
+.scoreLeft > div > span {
+  writing-mode: vertical-lr;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 70px;
+}
+.scoreLeft > div:nth-child(2) > span {
+  height: 90px;
+}
+.scoreLeft > div:nth-child(3) > span {
+  height: 50px;
+}
+.scoreRight > .scoreRightItem:not(:last-child) {
+  margin-bottom: 10px;
+}
+.scoreRightItem {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+}
+.scoreRightItem > div:not(:last-child) {
+  margin-right: 10px;
+}
+.scoreRightItem > div:nth-child(1) {
+  background: #4472c4;
+  border: 1px solid #345a9c;
+  color: #fff;
+  border-radius: 50%;
+  min-width: 20px;
+  min-height: 20px;
+  line-height: 20px;
+  text-align: center;
+}
+.scoreRightItem > div:nth-child(2) {
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  cursor: pointer;
+}
 </style>

src/components/pages/myReport/components/courseTypeAna.vue

@@ -51,7 +51,7 @@ export default {
             formatter: function (params) {
               var newParamsName = "";
               var paramsNameNumber = params.length;
-              var provideNumber = 2;
+              var provideNumber = 4;
               var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
               if (paramsNameNumber > provideNumber) {
                 for (var p = 0; p < rowNumber; p++) {
@@ -74,6 +74,7 @@ export default {
         },
         yAxis: {
           type: "value",
+          minInterval: 1 // 设置最小间隔为 1
         },
         series: [
           {
@@ -103,8 +104,21 @@ export default {
           //   document.getElementById("#charts_canvas")
         );
         // 初始化雷达图
-        this.option.series[0].data = this.courseTypeArray[0].array;
-        this.option.xAxis.data = this.courseTypeArray[0].xArray;
+        var sortedArray = [...this.courseTypeArray];
+        var isSortArray = [];
+        if (sortedArray.length > 6) {
+          isSortArray = sortedArray.slice(0, 6);
+        } else {
+          isSortArray = sortedArray;
+        }
+        var a = [];
+        var b = [];
+        for (var i = 0; i < isSortArray.length; i++) {
+          a.push(isSortArray[i].name);
+          b.push(isSortArray[i].value);
+        }
+        this.option.series[0].data = b;
+        this.option.xAxis.data = a;
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });

src/components/pages/myReport/components/mrLearnStatus.vue

@@ -79,7 +79,7 @@ export default {
             },
             data: [
               {
-                value: 80
+                value: 0
               }
             ]
           }
@@ -104,6 +104,7 @@ export default {
           this.$el.querySelector("#gauge_canvas"),
         );
         // 初始化雷达图
+        this.gaugeOption.series[0].data[0].value = this.getRandomNumber();
         this.chartObj = chartObj;
         this.chartObj.setOption(this.gaugeOption);
       });
@@ -114,6 +115,10 @@ export default {
         }
       });
     },
+    getRandomNumber() {
+      // 生成 1-100 之间的随机整数
+      return Math.floor(Math.random() * 100) + 1
+    }
   },
   watch: {
     userid(newValue, oldValue) {

src/components/pages/myReport/components/mrOverPer.vue

@@ -2,33 +2,49 @@
   <div>
     <div class="basicBox">
       <div class="allPer">
-        <div class="perItem">
-          <div></div>
-          <div>
-            我的登录总时长达
-            <span class="cBlue">200</span>
-            小时，总学习总时长<span class="cBlue">150</span>小时。
+        <div class="allPerTop">
+          <div class="perItem">
+            <div>登录时长</div>
+            <div>
+              <el-tooltip
+                effect="light"
+                :content="overPData.loginTime"
+                placement="top"
+              >
+                <div>{{ overPData.loginTime }}</div>
+              </el-tooltip>
+            </div>
           </div>
-        </div>
-        <div class="perItem">
-          <div></div>
-          <div>
-            我的的工具提交率达<span class="cOrange">98%</span
-            >，资料阅读率达<span class="cOrange">89%</span>。
+          <div class="perItem">
+            <div>学习时长</div>
+            <div>
+              <el-tooltip
+                effect="light"
+                :content="overPData.studyTime"
+                placement="top"
+              >
+                <div>{{ overPData.studyTime }}</div>
+              </el-tooltip>
+            </div>
           </div>
-        </div>
-        <div class="perItem">
-          <div></div>
-          <div>
-            课程平均得分为<span class="cBlue">85</span>，超过班级内<span
-              class="cOrange"
-              >70%</span
-            >的同学。
+          <div class="perItem">
+            <div>工具提交率</div>
+            <div>
+              <el-tooltip
+                effect="light"
+                :content="overPData.toolSubRate + '%'"
+                placement="top"
+              >
+                <div>{{ overPData.toolSubRate + "%" }}</div>
+              </el-tooltip>
+            </div>
           </div>
         </div>
-        <div class="perItem">
-          <div></div>
-          <div>我获得的本月称号是:课堂智慧星。</div>
+        <div class="allPerBoottom">
+          <div class="avaImg">
+            <img src="../../../../assets/avatar.png" alt="" />
+          </div>
+          <div>课堂智慧星</div>
         </div>
       </div>
     </div>
@@ -36,48 +52,85 @@
 </template>
 
 <script>
-export default {};
+export default {
+  props: ["overPData"],
+};
 </script>
 
 <style scoped>
 .basicBox {
-  margin: 0 0 0 20px;
   height: 100%;
 }
 .allPer {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex-wrap: nowrap;
-  justify-content: space-evenly;
-  width: 100%;
-  height: 85%;
-}
-.allPer > div {
-  font-size: 14px;
+  width: 95%;
+  margin: 0 auto;
 }
-.perItem {
+.allPerTop {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: center;
+}
+.perItem {
+  display: flex;
+  flex-direction: column;
   flex-wrap: nowrap;
+  align-items: center;
+  margin: 0 5px;
+}
+.perItem > div:nth-child(1) {
+  font-size: 18px;
 }
-.perItem > div:first-child {
-  min-width: 12px;
-  height: 12px;
-  background: #3d74f1;
+.perItem > div:nth-child(2) {
   border-radius: 50%;
-  margin-right: 10px;
+  border: 1px solid #8de3b6;
+  margin: 5px 0 0 0;
 }
-.cBlue,
-.cOrange {
-  font-size: 16px;
-  font-weight: bold;
+.perItem > div:nth-child(2) > div {
+  width: 65px;
+  height: 65px;
+  background: #8de3b6;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 70px;
+  margin: 2px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  padding: 5px;
+}
+.allPerTop > div:nth-child(2) > div:nth-child(2) {
+  border: 1px solid #f9cb7d;
+}
+.allPerTop > div:nth-child(2) > div:nth-child(2) > div {
+  background: #f9cb7d;
+}
+.allPerTop > div:nth-child(3) > div:nth-child(2) {
+  border: 1px solid #d19d9a;
+}
+.allPerTop > div:nth-child(3) > div:nth-child(2) > div {
+  background: #ffefef;
+}
+.avaImg {
+  width: 65px;
+  height: 64px;
+  margin-bottom: 5px;
+}
+
+.avaImg > img {
+  width: 100%;
+  height: 100%;
 }
-.cBlue {
-  color: blue;
+.allPerBoottom {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 10px 0 0 0;
 }
-.cOrange {
-  color: orange;
+.allPerBoottom > div:nth-child(2) {
+  font-size: 20px;
 }
 </style>

src/components/pages/myReport/myReport.vue

@@ -25,7 +25,7 @@
               </div>
               <div>我的综合表现</div>
             </div>
-            <MrOverPer class="r_box"></MrOverPer>
+            <MrOverPer class="r_box" :overPData="overPer"></MrOverPer>
           </div>
           <div class="third">
             <div class="sub_title">
@@ -58,6 +58,14 @@
             </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>
@@ -80,7 +88,10 @@
               </div>
               <div>工具类型分析</div>
             </div>
-            <ToolTypeAna class="r_box" :toolTypeArray="tTypeArray"></ToolTypeAna>
+            <ToolTypeAna
+              class="r_box"
+              :toolTypeArray="tTypeArray"
+            ></ToolTypeAna>
           </div>
         </div>
       </div>
@@ -91,11 +102,11 @@
       </div>
     </div>
     <div class="report_box" v-if="reportVisible">
-      <studentReport
+      <myRportLook
         :checkCourse="checkCourse"
         :checkStudent="checkStudent"
         :oid="oid"
-      ></studentReport>
+      ></myRportLook>
     </div>
     <div class="cancelbox" v-if="reportVisible">
       <el-button @click="cancelR" type="primary" size="small">返回</el-button>
@@ -112,7 +123,7 @@ 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 studentReport from "../components/studentReport";
+import myRportLook from "../components/myRportLook";
 export default {
   components: {
     MrBasicData,
@@ -123,7 +134,7 @@ export default {
     CourseTypeAna,
     ToolTypeAna,
     MrEva,
-    studentReport,
+    myRportLook,
   },
   data() {
     return {
@@ -138,6 +149,7 @@ export default {
       cEvaScore: [], //课程评价得分
       cTypeAnaList: [], //课程类型分析
       tTypeArray: [], //工具类型分析
+      overPer: {}, //我的综合表现
     };
   },
   methods: {
@@ -163,6 +175,8 @@ export default {
           this.evaList = res.data[1];
           var courseList = res.data[2];
           var sWorksList = res.data[3];
+          var studyAllTime = res.data[4];
+          var loginAllTime = parseInt(res.data[5][0].text);
           var sWorksCList = [];
           var cList = [];
           var cTypeList = [];
@@ -199,7 +213,9 @@ export default {
                 k < cList[i][j].chapterInfo[0].taskJson.length;
                 k++
               ) {
-                let _toolsAarry = [1, 3, 6, 7, 16, 15, 4, 40, 41, 42];
+                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;
@@ -275,6 +291,8 @@ export default {
           this.stuMessage.isFinishTaskWorks = isFinish;
           this.stuMessage.noFinishTaskWorks = allToolWorks - isFinish;
 
+          this.overPer.toolSubRate =
+            (this.stuMessage.isFinishTaskWorks / allToolWorks).toFixed(2) * 100;
           var array = [];
           var xArray = [];
           for (var i = 0; i < sWorksCList.length; i++) {
@@ -305,7 +323,15 @@ export default {
               array.push(courseCount);
             }
           }
-          this.cEvaScore.push({ array: array, xArray: xArray });
+          var tuples = xArray.map((label, index) => [label, array[index]]);
+          // 根据数据降序排序二元组
+          tuples.sort((a, b) => b[1] - a[1]);
+          // 提取已排序的标签
+          var xArrayNew = tuples.map((tuple) => tuple[0]);
+          var arrayNew = tuples.map((tuple) => tuple[1]);
+          for (var i = 0; i < xArrayNew.length; i++) {
+            this.cEvaScore.push({ name: xArrayNew[i], value: arrayNew[i] });
+          }
           var ctArray = [];
           var cxtArray = [];
           for (var i = 0; i < cTypeList.length; i++) {
@@ -330,7 +356,53 @@ export default {
           for (var i = 0; i < result.length; i++) {
             tArray.push(result[i].count);
           }
-          this.cTypeAnaList.push({ array: tArray, xArray: ctArray });
+          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]);
+          for (var i = 0; i < txArrayNew.length; i++) {
+            this.cTypeAnaList.push({
+              name: txArrayNew[i],
+              value: tarrayNew[i],
+            });
+          }
+
+          var days = Math.floor(loginAllTime / (3600 * 24));
+          loginAllTime %= 3600 * 24;
+          var hours = Math.floor(loginAllTime / 3600);
+          loginAllTime %= 3600;
+          var minutes = Math.floor(loginAllTime / 60);
+          loginAllTime %= 60;
+          if (days > 0) {
+            this.overPer.loginTime = `${days}天${hours}小时${minutes}分钟${loginAllTime}秒`;
+          } else if (days < 0 && hours > 0) {
+            this.overPer.loginTime = `${hours}小时${minutes}分钟 ${loginAllTime}秒`;
+          } else if (days == 0 && hours == 0 && minutes > 0) {
+            this.overPer.loginTime = `${minutes}分钟${loginAllTime}秒`;
+          } else {
+            this.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) {
+            this.overPer.studyTime = `${days1}天${hours1}小时${minutes1}分钟${sTime}秒`;
+          } else if (days1 < 0 && hours1 > 0) {
+            this.overPer.studyTime = `${hours1}小时${minutes1}分钟 ${sTime}秒`;
+          } else if (days1 == 0 && hours1 == 0 && minutes1 > 0) {
+            this.overPer.studyTime = `${minutes1}分钟${sTime}秒`;
+          } else {
+            this.overPer.studyTime = `${sTime}秒`;
+          }
         })
         .catch((err) => {
           console.error(err);
@@ -442,7 +514,7 @@ export default {
   margin: 0 auto;
   flex-direction: row;
   flex-wrap: nowrap;
-  margin-top: 10px;
+  margin-top: 5px;
 }
 
 .r_box {