Merge branch 'master' of https://git.cocorobo.cn/CocoRoboLabs/pbl-teacher-table

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

@@ -1,15 +1,161 @@
 <template>
   <div>
-    <div class="basicBox">
-      <div></div>
+    <div style="width: 95%; height: 100%; 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>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      randarJson: [
+        { 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: {
+        splitNumber: 5,
+        tooltip: {
+          triggerOn: "mousemove",
+          //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
+          confine: true,
+          enterable: true, //鼠标是否可以移动到tooltip区域内
+          backgroundColor: "rgba(255,255,255,0.7)",
+          textStyle: {
+            // 文字样式
+            align: "left",
+          },
+          left: "right",
+          top: "bottom",
+        },
+        radar: {
+          radius: ["0%", "70%"],
+          shape: "circle",
+          center: ["50%", "50%"],
+          axisName: {
+            textStyle: {
+              // 文字样式
+              color: "#58a5e6",
+            },
+            formatter: function (value, indicator) {
+              // value = value.replace(/\S{2}/g, function (match) {
+              //   return match + "\n";
+              // });
+              return value;
+            },
+          },
+          indicator: [
+            // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
+          ],
+        },
+        // 雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: "rgba(255,0,0,0)", // 图表背景的颜色
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            color: "rgba(131,141,158,.1)", // 设置网格的颜色
+          },
+        },
+        series: [
+          {
+            name: "目标得分占比", // tooltip中的标题
+            type: "radar", // 表示是雷达图
+            symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
+            symbolSize: 8, // 拐点的大小
+            areaStyle: {
+              normal: {
+                width: 1,
+                opacity: 0.2,
+              },
+            },
+            data: [
+              {
+                // 设置各个指标原始值
+                value: [],
+                // 设置区域边框和区域的颜色
+                itemStyle: {
+                  normal: {
+                    color: "#58a5e6",
+                    lineStyle: {
+                      color: "#58a5e6",
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    getInfo() {
+      this.setChart();
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        if (this.randarJson.length) {
+          const chartObj = this.$echarts.init(
+            //劳动课程
+            this.$el.querySelector("#charts_canvas")
+          );
+          let radarOption = JSON.parse(JSON.stringify(this.option));
+          for (var i = 0; i < this.randarJson.length; i++) {
+            radarOption.radar.indicator.push({
+              name: this.randarJson[i].target,
+              max: 5,
+            });
+            radarOption.series[0].data[0].value.push(
+              (this.randarJson[i].value / this.randarJson[i].count).toFixed(1)
+            );
+          }
+
+          this.chartObj = chartObj;
+          this.chartObj.setOption(radarOption);
+        }
+      });
+      let _this = this;
+      window.addEventListener("resize", () => {
+        if (_this.chartObj) {
+          _this.chartObj.resize();
+        }
+      });
+    },
+  },
+  watch: {
+    userid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getInfo();
+    });
+  },
+};
 </script>
 
 <style scoped>
-
 </style>