1

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

@@ -1,7 +1,12 @@
 <template>
   <div>
     <div class="evaBox">
-      <el-table :data="tableData" border style="width: 100%">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+        :row-class-name="tableRowClassName"
+      >
         <el-table-column prop="course" label="课程" min-width="15%">
         </el-table-column>
         <el-table-column prop="subject" label="学科" min-width="15%">
@@ -26,6 +31,7 @@
 export default {
   data() {
     return {
+      evaList:[],
       tableData: [
         {
           course: "设计并制作小车",
@@ -48,6 +54,29 @@ export default {
       ],
     };
   },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    getMrEva(){
+      let params = {
+        oid: this.oid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectMrEva", params)
+        .then((res) => {
+          this.evaList = res.data[0];
+          var courseList = res.data[1];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+  },
 };
 </script>
 
@@ -56,4 +85,7 @@ export default {
   width: 100%;
   margin: 10px 0 0 15px;
 }
+.el-table >>> .even_row {
+  background-color: #f1f1f1;
+}
 </style>

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

@@ -3,7 +3,7 @@
     <div style="width: 95%; height: 420px; margin: 0 auto">
       <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
       <div
-        id="charts_canvas"
+        id="gauge_canvas"
         class="echart"
         style="width: 100%; height: 100%"
       ></div>
@@ -16,7 +16,7 @@ export default {
   data() {
     return {
       chartObj: null,
-      option: {
+      gaugeOption: {
         series: [
           {
             type: "gauge",
@@ -31,22 +31,13 @@ export default {
               lineStyle: {
                 width: 6,
                 color: [
-                  // [0.25, '#8FAADC'],
-                  // [0.5, '#8FAADC'],
-                  // [0.75, '#8FAADC'],
+                  [0.25, "#8FAADC"],
+                  [0.5, "#8FAADC"],
+                  [0.75, "#8FAADC"],
                   [1, "#8FAADC"],
                 ],
               },
             },
-            pointer: {
-              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
-              length: "12%",
-              width: 20,
-              offsetCenter: [0, "-60%"],
-              itemStyle: {
-                color: "inherit",
-              },
-            },
             axisTick: {
               length: 12,
               lineStyle: {
@@ -64,10 +55,22 @@ export default {
             axisLabel: {
               color: "#464646",
               fontSize: 20,
-              distance: -60,
-              rotate: "tangential",
+              distance: -100,
+              formatter: function (value) {
+                if (value === 1) {
+                  return "优秀";
+                } else if (value === 0) {
+                  return "待提升";
+                }
+                return "";
+              },
+            },
+            title: {
+              offsetCenter: [0, "-10%"],
+              fontSize: 20,
             },
             detail: {
+              show: false,
               fontSize: 30,
               offsetCenter: [0, "-35%"],
               valueAnimation: true,
@@ -97,14 +100,19 @@ export default {
       });
       //然后异步执行echarts的初始化函数
       newPromise.then(() => {
+        const setEcharWH = {
+          width: 500,
+          height: 400,
+        };
         const chartObj = this.$echarts.init(
           //劳动课程
-          this.$el.querySelector("#charts_canvas")
-          //   document.getElementById("#charts_canvas")
+          this.$el.querySelector("#gauge_canvas"),
+          null,
+          setEcharWH
         );
         // 初始化雷达图
         this.chartObj = chartObj;
-        this.chartObj.setOption(this.option);
+        this.chartObj.setOption(this.gaugeOption);
       });
       let _this = this;
       window.addEventListener("resize", () => {
@@ -127,5 +135,8 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.r_box >>> #gauge_canvas > div > canvas {
+  width: 450px !important;
+}
 </style>

src/components/pages/myReport/components/myCourseReport.vue

@@ -16,9 +16,12 @@ export default {
   data() {
     return {
       randarJson: [
-        { target: "语言准确", count: 1, value: 5 },
-        { target: "借助多媒体工具", count: 1, value: 5 },
+        { target: "发散性思维", count: 1, value: 4 },
+        { target: "逻辑性思维", count: 1, value: 4 },
         { target: "聚焦主题", count: 1, value: 5 },
+        { target: "借助多媒体工具", count: 1, value: 4 },
+        { target: "同伴互学", count: 1, value: 4 },
+        { target: "语言准确", count: 1, value: 4.5 },
       ],
       chartObj: null,
       option: {