新增

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

@@ -13,21 +13,51 @@
 
 <script>
 export default {
+  props: ["courseArray"],
   data() {
     return {
       chartObj: null,
       option: {
         xAxis: {
           type: "category",
-          data: ["课程1", "课程2", "课程3", "课程4", "课程5"],
+          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: [90, 90, 70, 80, 100],
-            type: "line"
+            data: [],
+            type: "line",
           },
         ],
       },
@@ -35,7 +65,9 @@ export default {
   },
   methods: {
     getInfo() {
-      this.setChart();
+      if (this.courseArray && this.courseArray[0]) {
+        this.setChart();
+      }
     },
     setChart() {
       // 雷达图显示的标签
@@ -49,6 +81,8 @@ export default {
           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);
@@ -62,8 +96,11 @@ export default {
     },
   },
   watch: {
-    userid(newValue, oldValue) {
-      this.getInfo();
+    courseArray: {
+      handler: function (newVal, oldVal) {
+        this.getInfo();
+      },
+      deep: true,
     },
   },
   mounted() {

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

@@ -13,24 +13,63 @@
 
 <script>
 export default {
+  props: ["courseTypeArray"],
   data() {
     return {
       chartObj: null,
       option: {
         xAxis: {
           type: "category",
-          data: [
-            "语文",
-            "数学",
-            "英语",
-            "信息科技",
-            "劳动",
-            "科学",
-            "STEM",
-            "美术",
-          ],
+          data: [],
           axisLabel: {
-            interval: 0, //全部显示x轴
+            interval: 0, //使x轴文字显示全
+            formatter: function (params) {
+              let newParamsName = "";
+              const paramsNameNumber = params.length; // 文字总长度
+              const provideNumber = 4; //一行显示几个字
+              const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+              if (paramsNameNumber > provideNumber) {
+                for (let p = 0; p < rowNumber; p++) {
+                  const start = p * provideNumber;
+                  const end = start + provideNumber;
+                  const tempStr =
+                    p === rowNumber - 1
+                      ? params.substring(start, paramsNameNumber)
+                      : params.substring(start, end) + "\n";
+                  newParamsName += tempStr;
+                }
+              } else {
+                newParamsName = params;
+              }
+              return newParamsName;
+            },
+          },
+          axisLabel: {
+            show: true,
+            interval: 0, //使x轴上的文字显示完全,
+            //设置一行显示几个字,自己设置
+            formatter: function (params) {
+              var newParamsName = "";
+              var paramsNameNumber = params.length;
+              var provideNumber = 2;
+              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+              if (paramsNameNumber > provideNumber) {
+                for (var p = 0; p < rowNumber; p++) {
+                  var tempStr = "";
+                  var start = p * provideNumber;
+                  var end = start + provideNumber;
+                  if (p == rowNumber - 1) {
+                    tempStr = params.substring(start, paramsNameNumber);
+                  } else {
+                    tempStr = params.substring(start, end) + "\n";
+                  }
+                  newParamsName += tempStr;
+                }
+              } else {
+                newParamsName = params;
+              }
+              return newParamsName;
+            },
           },
         },
         yAxis: {
@@ -38,7 +77,7 @@ export default {
         },
         series: [
           {
-            data: [45, 23, 35, 55, 30, 20, 25, 10],
+            data: [],
             type: "bar",
           },
         ],
@@ -47,7 +86,9 @@ export default {
   },
   methods: {
     getInfo() {
-      this.setChart();
+      if (this.courseTypeArray && this.courseTypeArray[0]) {
+        this.setChart();
+      }
     },
     setChart() {
       // 雷达图显示的标签
@@ -62,6 +103,8 @@ export default {
           //   document.getElementById("#charts_canvas")
         );
         // 初始化雷达图
+        this.option.series[0].data = this.courseTypeArray[0].array;
+        this.option.xAxis.data = this.courseTypeArray[0].xArray;
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
@@ -74,8 +117,11 @@ export default {
     },
   },
   watch: {
-    userid(newValue, oldValue) {
-      this.getInfo();
+    courseTypeArray: {
+      handler: function (newVal, oldVal) {
+        this.getInfo();
+      },
+      deep: true,
     },
   },
   mounted() {

src/components/pages/myReport/components/mrBasicData.vue

@@ -6,8 +6,8 @@
           <img src="../../../../assets/avatar.png" alt="" />
         </div>
         <div class="sName">
-          <div>林嘉兴</div>
-          <div>三年一班</div>
+          <div>{{ sMes.name }}</div>
+          <div>{{ sMes.classname }}</div>
         </div>
       </div>
 
@@ -15,15 +15,15 @@
         <div>参与课程详情：</div>
         <div class="courseDetail">
           <div class="courseChild">
-            <div>24</div>
-            <div>全部任务</div>
+            <div>{{ sMes.allCourseNum }}</div>
+            <div>课程总数</div>
           </div>
           <div class="courseChild">
-            <div>18</div>
+            <div>{{ sMes.isFinishTaskWorks }}</div>
             <div>已完成</div>
           </div>
           <div class="courseChild">
-            <div>5</div>
+            <div>{{ sMes.noFinishTaskWorks }}</div>
             <div>待学习</div>
           </div>
         </div>
@@ -33,7 +33,12 @@
 </template>
 
 <script>
-export default {};
+export default {
+  props: ["sMes"],
+  data() {
+    return {};
+  },
+};
 </script>
 
 <style scoped>

src/components/pages/myReport/components/mrEva.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="evaBox" v-for="(item, index) in evaList" :key="index">
+    <div class="evaBox" v-for="(item, index) in mrEvaList" :key="index">
       <div class="sub_title">
         <div class="yuan">
           <img src="../../../../assets/icon/myReport/gang.png" alt="" />
@@ -41,44 +41,16 @@
 </template>
 
 <script>
-
 export default {
-  props: ["ooid", "uuid"],
+  props: ["mrEvaList"],
   data() {
-    return {
-      evaList: [],
-    };
+    return {};
   },
   methods: {
-    getMrEva() {
-      let params = {
-        oid: this.ooid,
-      };
-      this.ajax
-        .get(this.$store.state.api + "selectMrEva", params)
-        .then((res) => {
-          this.evaList = res.data[0];
-          var courseList = res.data[1];
-          for (var i = 0; i < this.evaList.length; i++) {
-            this.evaList[i].course = [];
-            for (var j = 0; j < courseList.length; j++) {
-              if (this.evaList[i].id == courseList[j].evaId) {
-                this.evaList[i].course.push(courseList[j]);
-              }
-            }
-          }
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    },
-    getReport(cid){
+    getReport(cid) {
       this.$emit("getEvaCid", cid);
     },
   },
-  created() {
-    this.getMrEva();
-  },
 };
 </script>
 

src/components/pages/myReport/myReport.vue

@@ -16,7 +16,7 @@
               </div>
               <div>基础信息</div>
             </div>
-            <MrBasicData class="r_box"></MrBasicData>
+            <MrBasicData class="r_box" :sMes="stuMessage"></MrBasicData>
           </div>
           <div class="second" style="height: 260px">
             <div class="sub_title">
@@ -56,7 +56,10 @@
               </div>
               <div>课程评价得分</div>
             </div>
-            <CourseEvaScore class="r_box"></CourseEvaScore>
+            <CourseEvaScore
+              class="r_box"
+              :courseArray="cEvaScore"
+            ></CourseEvaScore>
           </div>
           <div class="second">
             <div class="sub_title">
@@ -65,7 +68,10 @@
               </div>
               <div>课程类型分析</div>
             </div>
-            <CourseTypeAna class="r_box"></CourseTypeAna>
+            <CourseTypeAna
+              class="r_box"
+              :courseTypeArray="cTypeAnaList"
+            ></CourseTypeAna>
           </div>
           <div class="third" style="height: 270px">
             <div class="sub_title">
@@ -80,12 +86,7 @@
       </div>
       <div style="height: 100%; overflow-x: hidden">
         <div>
-          <MrEva
-            class="r_box"
-            :ooid="oid"
-            :uuid="userid"
-            @getEvaCid="getCid"
-          ></MrEva>
+          <MrEva class="r_box" :mrEvaList="evaList" @getEvaCid="getCid"></MrEva>
         </div>
       </div>
     </div>
@@ -132,6 +133,10 @@ export default {
       reportVisible: false,
       checkStudent: "",
       checkCourse: "",
+      evaList: [], //目标体系
+      stuMessage: {}, //基础信息
+      cEvaScore: [], //课程评价得分
+      cTypeAnaList: [], //课程类型分析
     };
   },
   methods: {
@@ -145,6 +150,149 @@ export default {
       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 sWorksCList = [];
+          var cList = [];
+          var cTypeList = [];
+          var tool = 0;
+          var isFinish = 0;
+          for (var i = 0; i < this.evaList.length; i++) {
+            this.evaList[i].course = [];
+            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));
+            sWorksCList.push({
+              courseid: courseList[i].courseid,
+              title: courseList[i].title,
+              rate: courseList[i].rate,
+            });
+            if (courseList[i].typename != null) {
+              cTypeList.push(courseList[i].typename.split("/"));
+            }
+          }
+          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];
+                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++;
+                  }
+                }
+              }
+            }
+          }
+
+          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;
+
+          var array = [];
+          var xArray = [];
+          for (var i = 0; i < sWorksCList.length; i++) {
+            if (xArray.length == 0) {
+              xArray.push(sWorksCList[i].title);
+            } else {
+              if (xArray.indexOf(sWorksCList[i].title) == -1) {
+                xArray.push(sWorksCList[i].title);
+              }
+            }
+            var courseCount = 0;
+            if (
+              sWorksCList[i].rate &&
+              sWorksCList[i].rate != null &&
+              Object.keys(JSON.parse(sWorksCList[i].rate)).length > 0
+            ) {
+              var rateList = JSON.parse(sWorksCList[i].rate);
+              var a = Object.keys(rateList);
+              for (var k = 0; k < a.length; k++) {
+                if (a[k] == "content") {
+                  continue;
+                } else {
+                  courseCount += rateList[a[k]];
+                }
+              }
+              array.push(courseCount);
+            } else {
+              array.push(courseCount);
+            }
+          }
+          this.cEvaScore.push({ array: array, xArray: xArray });
+          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);
+          }
+          this.cTypeAnaList.push({ array: tArray, xArray: ctArray });
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+  },
+  created() {
+    this.getMrEva();
   },
 };
 </script>