新增合成报告页面

src/components/pages/myReport/components/MyLookComponent/courseDetailReport.vue

@@ -0,0 +1,406 @@
+<template>
+  <div>
+    <div style="" class="cdr_box">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <div id="charts_canvas1" class="echart"></div>
+      <div id="charts_canvas2" class="echart"></div>
+      <div id="charts_canvas3" class="echart" ref="table">
+        <div style="font-size: 13px; font-weight: 600">
+          项目综合评估：各个阶段评价平均分
+        </div>
+        <el-table
+          class="table"
+          :data="tdata"
+          :height="tableHeight"
+          :fit="true"
+          style="width: 100%"
+          :header-cell-style="{
+            background: '#fff',
+            fontSize: '12px',
+            fontWeight: 'unset',
+            padding: '0',
+            border: 'unset',
+          }"
+          :row-class-name="tableRowClassName"
+          header-row-class-name="header_row_class"
+        >
+          <el-table-column label="排名" min-width="29px" align="center">
+            <template slot-scope="scope">
+              <div style="font-weight: 600">{{ scope.$index + 1 }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="名称"
+            min-width="39px"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <div style="color: rgb(96, 96, 96); font-weight: 600">
+                {{ scope.row.name }}
+              </div>
+            </template></el-table-column
+          >
+          <el-table-column
+            prop="rate"
+            label="完成度"
+            min-width="39px"
+            align="center"
+            ><template slot-scope="scope">
+              <div style="color: rgb(35, 91, 188); font-weight: 600">
+                {{ scope.row.rate }}
+              </div>
+            </template></el-table-column
+          >
+          <el-table-column
+            prop="rate1"
+            label="活跃度"
+            min-width="39px"
+            align="center"
+            ><template slot-scope="scope">
+              <div style="color: rgb(35, 91, 188); font-weight: 600">
+                {{ scope.row.rate1 }}
+              </div>
+            </template></el-table-column
+          >
+          <el-table-column
+            prop="rate2"
+            label="参与度"
+            min-width="39px"
+            align="center"
+            ><template slot-scope="scope">
+              <div style="color: rgb(35, 91, 188); font-weight: 600">
+                {{ scope.row.rate2 }}
+              </div>
+            </template></el-table-column
+          >
+          <el-table-column
+            prop="rate3"
+            label="综合表现"
+            min-width="49px"
+            align="center"
+            ><template slot-scope="scope">
+              <div style="color: rgb(35, 91, 188);font-weight: 600">{{ scope.row.rate3 }}</div>
+            </template></el-table-column
+          >
+          <el-table-column
+            prop="ratez"
+            label="综合"
+            min-width="29px"
+            align="center"
+            ><template slot-scope="scope">
+              <div style="color: rgb(233, 140, 148);font-weight: 600">{{ scope.row.ratez }}</div>
+            </template></el-table-column
+          >
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj1: null,
+      chartObj2: null,
+      chartObj3: null,
+      tableHeight: 0,
+      tdata: [],
+      option1: {
+        title: {
+          text: "项目完成度:各个阶段完成情况",
+          textStyle: {
+            fontSize: 13,
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        legend: {
+          data: ["个人完成度", "班级平均完成度"],
+          top: "bottom",
+          icon: "circle",
+        },
+        grid: {
+          left: "15%",
+          right: "5%",
+          bottom: "20%",
+          top: "15%",
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["阶段1", "阶段2", "阶段3", "阶段4", "阶段5"],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          {
+            name: "个人完成度",
+            type: "line",
+            areaStyle: {},
+            data: [0, 0, 0, 0, 0],
+            label: {
+              show: true,
+            },
+          },
+          {
+            name: "班级平均完成度",
+            type: "line",
+            areaStyle: {},
+            data: [0, 0, 0, 0, 0],
+            label: {
+              show: true,
+            },
+          },
+        ],
+      },
+      option2: {
+        title: {
+          text: "项目活跃度:不同任务的学习时间占比",
+          textStyle: {
+            fontSize: 13,
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        grid: {
+          left: "15%",
+          right: "0%",
+          bottom: "15%",
+          top: "15%",
+        },
+        xAxis: {
+          type: "category",
+          data: ["阶段1", "阶段2", "阶段3", "阶段4", "阶段5"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "任务1",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+          {
+            name: "任务2",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+          {
+            name: "任务3",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+          {
+            name: "任务4",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+          {
+            name: "任务5",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row row_class";
+      } else {
+        return "row_class";
+      }
+    },
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj1 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas1")
+        );
+        let _array1 = [];
+        let _array2 = [];
+        for (var i = 0; i < 5; i++) {
+          //   this.option.series[0].data[i].value = this.randomNum(30, 80);
+          _array1.push(this.randomNum(50, 100));
+          _array2.push(this.randomNum(50, 100));
+        }
+        this.option1.series[0].data = _array1;
+        this.option1.series[1].data = _array2;
+
+        const chartObj2 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas2")
+        );
+        let _array21 = [];
+        let _array22 = [];
+        let _array23 = [];
+        let _array24 = [];
+        let _array25 = [];
+        for (var i = 0; i < 5; i++) {
+          //   this.option.series[0].data[i].value = this.randomNum(30, 80);
+          _array21.push(this.randomNum(2, 20));
+          _array22.push(this.randomNum(2, 20));
+          _array23.push(this.randomNum(2, 20));
+          _array24.push(this.randomNum(2, 20));
+          _array25.push(this.randomNum(2, 20));
+        }
+        this.option2.series[0].data = _array21;
+        this.option2.series[1].data = _array22;
+        this.option2.series[2].data = _array23;
+        this.option2.series[3].data = _array24;
+        this.option2.series[4].data = _array25;
+        this.chartObj1 = chartObj1;
+        this.chartObj1.setOption(this.option1);
+        this.chartObj2 = chartObj2;
+        this.chartObj2.setOption(this.option2);
+        this.tdata = [];
+        for (var i = 0; i < 5; i++) {
+          var _rate = this.randomNum(3, 5);
+          var _rate1 = this.randomNum(3, 5);
+          var _rate2 = this.randomNum(3, 5);
+          var _rate3 = this.randomNum(3, 5);
+          var _ratez = (_rate + _rate1 + _rate2 + _rate3) / 4;
+          this.tdata.push({
+            name: "阶段" + (i + 1),
+            rate: _rate.toFixed(1),
+            rate1: _rate1.toFixed(1),
+            rate2: _rate2.toFixed(1),
+            rate3: _rate3.toFixed(1),
+            ratez: _ratez.toFixed(1),
+          });
+          this.tdata.sort(this.sortId);
+          this.$nextTick(() => {
+            this.setTableHeight();
+          });
+        }
+      });
+      let _this = this;
+      window.addEventListener("resize", () => {
+        if (_this.chartObj1) {
+          _this.chartObj1.resize();
+          _this.chartObj2.resize();
+          _this.setTableHeight();
+        }
+      });
+    },
+    sortId(a, b) {
+      return b.ratez - a.ratez;
+    },
+    setTableHeight() {
+      this.tableHeight =
+        window.innerHeight - this.$refs.table.offsetHeight - 190;
+      // 监听窗口大小变化
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.setChart();
+    });
+  },
+};
+</script>
+
+<style scoped>
+.cdr_box {
+  width: calc(100% - 5px);
+  height: calc(100%);
+  display: flex;
+  justify-content: space-between;
+}
+.echart {
+  height: 100%;
+  width: calc(100% / 3 - 5px);
+}
+.el-table >>> .even_row {
+  background-color: rgb(238, 243, 250) !important;
+}
+.el-table >>> .row_class td {
+  padding: 8px 0;
+  border: unset;
+}
+.el-table >>> .row_class {
+  background: rgb(249, 249, 249);
+}
+.el-table >>> .row_class .cell {
+  padding: 0;
+  white-space: nowrap;
+  font-size: 12px;
+}
+.el-table >>> .header_row_class .cell {
+  padding: 0;
+  white-space: nowrap;
+}
+</style>

src/components/pages/myReport/components/MyLookComponent/courseInfo.vue

@@ -0,0 +1,271 @@
+<template>
+  <div v-loading="isloading">
+    <div class="ci_info" v-if="Object.keys(courseInfo).length">
+      <div class="ci_info_box">
+        <span>课程名称：</span><span>{{ courseInfo.title }}</span>
+      </div>
+      <div class="ci_info_box">
+        <span>创建人：</span><span>{{ courseInfo.name }}</span>
+      </div>
+      <div class="ci_info_box">
+        <span>协同人员：</span><span>{{ teacher ? teacher : "无协同人员" }}</span>
+      </div>
+      <div class="ci_info_box2">
+        <div>
+          阶段<span>{{ tool.stage }}</span>个
+        </div>
+        <div>
+          任务<span>{{ tool.task }}</span>个
+        </div>
+        <div>
+          工具<span>{{ tool.tool }}</span>个
+        </div>
+      </div>
+    </div>
+    <div style="width: 90%; height: calc(100% - 130px); margin: 10px auto 0">
+      <!-- <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 {
+  props: ["courseid"],
+  data() {
+    return {
+      isloading:false,
+      chartJson: {},
+      courseInfo: {},
+      teacher: "",
+      chartObj: null,
+      tool: {
+        stage: 0,
+        task: 0,
+        tool: 0,
+      },
+      option: {
+        legend: {
+          top: "bottom",
+        },
+        toolbox: {
+          show: true,
+        },
+        grid: {},
+        series: [
+          {
+            bottom: "20%",
+            name: "学习活动时间分配图",
+            type: "pie",
+            // radius: [10, "80%"],
+            center: ["50%", "50%"],
+            // roseType: "area",
+            // itemStyle: {
+            //   borderRadius: 8,
+            // },
+            label: {
+              show: true,
+              position: "inside",
+              formatter: "{b}\n{d}%",
+            },
+            data: [
+              { value: 0, name: "思维网格" },
+              { value: 0, name: "思维导图" },
+              { value: 0, name: "电子白板" },
+              { value: 0, name: "选择题" },
+              // { value: 0, name: "自主学习" },
+              { value: 0, name: "其他" },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+    getInfo() {
+      this.isloading = true
+      let params = {
+        cid: this.courseid,
+      };
+      console.log(this.courseid);
+      if (!this.courseid) {
+        return;
+      }
+      this.ajax
+        .get(this.$store.state.api + "getCourseInfo", params)
+        .then((res) => {
+          this.isloading = false
+          this.courseInfo = res.data[0][0];
+          let teachers = res.data[1];
+          let teacher = [];
+          for (var i = 0; i < teachers.length; i++) {
+            teacher.push(teachers[i].name);
+          }
+          this.teacher = teacher.join("、");
+
+          let chapters = JSON.parse(res.data[0][0].chapters);
+          var task = 0;
+          var tool = 0;
+
+          var wang = 0;//7
+          var si = 0;//3
+          var dian = 0;//1
+          var xuan = 0;//4
+          var other = 0;
+          for (var i = 0; i < chapters.length; i++) {
+            task += chapters[i].chapterInfo[0].taskJson.length;
+            for (
+              var j = 0;
+              j < chapters[i].chapterInfo[0].taskJson.length;
+              j++
+            ) {
+              if (chapters[i].chapterInfo[0].taskJson[j].toolChoose.length) {
+                for (var k = 0; k < chapters[i].chapterInfo[0].taskJson[j].toolChoose.length; k++) {
+                  if (chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool.indexOf(7) != -1) {
+                    wang++
+                  } else if (chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool.indexOf(3) != -1) {
+                    si++
+                  } else if (chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool.indexOf(1) != -1) {
+                    dian++
+                  } else if (chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool.indexOf(4) != -1) {
+                    xuan++
+                  } else {
+                    other++
+                  }
+                }
+              }
+
+              tool += chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
+            }
+          }
+          this.chartJson = {
+            wang,
+            si,
+            dian,
+            xuan,
+            other
+          }
+          this.tool.stage = chapters.length;
+          this.tool.task = task;
+          this.tool.tool = tool;
+          this.$nextTick(() => {
+            this.setChart();
+          });
+        })
+        .catch((err) => {
+          this.isloading = false
+          console.error(err);
+        });
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+          //   document.getElementById("#charts_canvas")
+        );
+        let _array = [];
+        // for (var i = 0; i < 5; i++) {
+        //   this.option.series[0].data[i].value = this.randomNum(30, 80);
+        //   // _array.push(this.randomNum(0, 80));
+        // }
+        this.option.series[0].data[0].value = this.chartJson.wang
+        this.option.series[0].data[1].value = this.chartJson.si
+        this.option.series[0].data[2].value = this.chartJson.dian
+        this.option.series[0].data[3].value = this.chartJson.xuan
+        this.option.series[0].data[4].value = this.chartJson.other
+
+        // this.option.series[0].data[0].value = _array;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+      let _this = this;
+      window.addEventListener("resize", () => {
+        if (_this.chartObj) {
+          _this.chartObj.resize();
+        }
+      });
+    },
+  },
+  watch: {
+    courseid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  created() {
+    this.getInfo();
+  },
+};
+</script>
+
+<style scoped>
+.ci_info {
+  font-size: 14px;
+}
+
+.ci_info_box {
+  width: 90%;
+  margin: 0 auto;
+  display: flex;
+}
+
+.ci_info_box span {
+  white-space: nowrap;
+}
+
+.ci_info_box span+span {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ci_info_box+.ci_info_box {
+  margin-top: 10px;
+}
+
+.ci_info_box2 {
+  width: 90%;
+  margin: 0 auto;
+  display: flex;
+  margin-top: 10px;
+  font-size: 16px;
+  justify-content: space-between;
+  color: rgb(15, 120, 187);
+  align-items: center;
+}
+
+.ci_info_box2 div {
+  display: flex;
+  align-items: center;
+}
+
+.ci_info_box2 span {
+  color: rgb(234, 146, 59);
+  width: 30px;
+  font-size: 25px;
+  text-align: center;
+  font-weight: 700;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/components/pages/myReport/components/MyLookComponent/coursePie.vue

@@ -0,0 +1,317 @@
+<template>
+  <div v-loading="isloading">
+    <div style="width: 95%; height: calc(100% - 40px); margin: 20px auto;"  ref="innder">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <!-- <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div> -->
+      <div id="charts_canvas3" class="echart" ref="table">
+        <!-- <div style="font-size: 13px; font-weight: 600">
+          项目综合评估：各个阶段评价平均分
+        </div> -->
+        <el-table class="table" :data="tdata" :height="tableHeight" :fit="true" style="width: 100%" :header-cell-style="{
+          background: '#fff',
+          fontSize: '12px',
+          fontWeight: 'unset',
+          padding: '0',
+          border: 'unset',
+        }" :row-class-name="tableRowClassName" header-row-class-name="header_row_class">
+          <el-table-column label="排名" min-width="29px" align="center">
+            <template slot-scope="scope">
+              <div style="font-weight: 600">{{ scope.$index + 1 }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="名称" min-width="39px" align="center">
+            <template slot-scope="scope">
+              <div style="color: rgb(96, 96, 96); font-weight: 600">
+                {{ scope.row.name }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="rate" label="完成度" min-width="39px" align="center"><template slot-scope="scope">
+              <div style="color: rgb(35, 91, 188); font-weight: 600">
+                {{ scope.row.rate }}
+              </div>
+            </template></el-table-column>
+          <el-table-column prop="rate1" label="活跃度" min-width="39px" align="center"><template slot-scope="scope">
+              <div style="color: rgb(35, 91, 188); font-weight: 600">
+                {{ scope.row.rate1 }}
+              </div>
+            </template></el-table-column>
+          <el-table-column prop="rate2" label="参与度" min-width="39px" align="center"><template slot-scope="scope">
+              <div style="color: rgb(35, 91, 188); font-weight: 600">
+                {{ scope.row.rate2 }}
+              </div>
+            </template></el-table-column>
+          <el-table-column prop="rate3" label="综合表现" min-width="49px" align="center"><template slot-scope="scope">
+              <div style="color: rgb(233, 140, 148);font-weight: 600">{{ scope.row.rate3 }}</div>
+            </template></el-table-column>
+          <!-- <el-table-column prop="ratez" label="综合" min-width="29px" align="center"><template slot-scope="scope">
+              <div style="color: rgb(233, 140, 148);font-weight: 600">{{ scope.row.ratez }}</div>
+            </template></el-table-column> -->
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["userid", "courseid"],
+  data() {
+    return {
+      isloading:false,
+      workJson: [],
+      chartObj: null,
+      tdata: [],
+      tableHeight: 0,
+      option: {
+        legend: {
+          top: "bottom",
+        },
+        toolbox: {
+          show: true,
+        },
+        grid: {},
+        series: [
+          {
+            bottom: "10%",
+            name: "学习活动时间分配图",
+            type: "pie",
+            radius: [10, "80%"],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 8,
+            },
+            label: {
+              show: true,
+              position: "inside",
+              formatter: "{b}\n{d}%",
+            },
+            data: [
+              { value: 0, name: "思维网格" },
+              { value: 0, name: "思维导图" },
+              { value: 0, name: "电子白板" },
+              { value: 0, name: "问卷调查" },
+              { value: 0, name: "自主学习" },
+              { value: 0, name: "其他" },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row row_class";
+      } else {
+        return "row_class";
+      }
+    },
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+    getInfo() {
+      this.isloading = true
+      let params = {
+        uid: this.userid,
+        cid: this.courseid,
+      };
+      console.log(this.userid);
+      if (!this.userid) {
+        return;
+      }
+      this.ajax
+        .get(this.$store.state.api + "getUserInfo", params)
+        .then((res) => {
+          this.isloading = false
+          let chapters = JSON.parse(res.data[2][0].chapters);
+          var tool = 0;
+          let workJson = []
+          let _pWork = res.data[3];
+          let _allWork = res.data[4];
+          let _allComment = res.data[5];
+
+          for (var i = 0; i < chapters.length; i++) {
+            workJson[i] = { tool: 0, ptool: 0, work: 0, ishuo: 0, isCan: 0 }
+            for (
+              var j = 0;
+              j < chapters[i].chapterInfo[0].taskJson.length;
+              j++
+            ) {
+              // 1、电子白板，3、思维导图，6协同文档，7思维网格 16、作业提交,40.项目-学生互评 41.项目-下拉选择题 42.项目-录音功能
+              let _toolsAarry = [1, 3, 6, 7, 16, 15, 4, 40, 41, 42];
+              for (
+                var k = 0;
+                k < chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
+                k++
+              ) {
+                if (
+                  _toolsAarry.indexOf(
+                    chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool[0]
+                  ) != -1
+                ) {
+                  tool++;
+                  workJson[i].tool++
+                }
+              }
+            }
+
+            for (var k = 0; k < _pWork.length; k++) {
+              if (_pWork[k].stage == i) {
+                workJson[i].ptool++
+              }
+            }
+            for (var k = 0; k < _allComment.length; k++) {
+              if (_allComment[k].stage == i) {
+                workJson[i].ishuo++
+              }
+            }
+
+
+          }
+          this.userinfo = res.data[0][0];
+          this.ccount = tool;
+          this.islearn = tool - parseInt(res.data[1][0].vcount);
+
+          this.iscount = res.data[1][0].vcount;
+          this.vcount = 0;
+
+          for (var i = 0; i < workJson.length; i++) {
+            if (workJson[i].ptool > workJson[i].tool) {
+              workJson[i].work = 5
+            } else if( workJson[i].tool === 0){
+              workJson[i].work = 5
+            }else{
+              workJson[i].work = Math.round(workJson[i].ptool / workJson[i].tool * 100 / 20)
+            }
+            if (workJson[i].ptool) {
+              workJson[i].isCan = 1
+            }
+          }
+          this.workJson = workJson
+
+          console.log(workJson);
+          this.setChart();
+        })
+        .catch((err) => {
+          this.isloading = false
+          console.error(err);
+        });
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        // const chartObj = this.$echarts.init(
+        //   //劳动课程
+        //   this.$el.querySelector("#charts_canvas")
+        //   //   document.getElementById("#charts_canvas")
+        // );
+        // let _array = [];
+        // for (var i = 0; i < 6; i++) {
+        //   this.option.series[0].data[i].value = this.randomNum(30, 80);
+        //   // _array.push(this.randomNum(0, 80));
+        // }
+        // // this.option.series[0].data[0].value = _array;
+        // // 初始化雷达图
+        // this.chartObj = chartObj;
+        // this.chartObj.setOption(this.option);
+
+        this.tdata = [];
+        for (var i = 0; i < this.workJson.length; i++) {
+          var _rate = this.workJson[i].work < 3 ? 3 : this.workJson[i].work;
+          var _rate1 = this.workJson[i].ishuo ? 5 : 3;
+          var _rate2 = this.workJson[i].isCan ? 5 : 3;
+          var _rate3 = (_rate + _rate1 + _rate2) / 3;
+          var _ratez = (_rate + _rate1 + _rate2 + _rate3) / 4;
+          this.tdata.push({
+            name: "阶段" + (i + 1),
+            rate: _rate.toFixed(1),
+            rate1: _rate1.toFixed(1),
+            rate2: _rate2.toFixed(1),
+            rate3: _rate3.toFixed(1),
+            ratez: _ratez.toFixed(1),
+          });
+        }
+        this.tdata.sort(this.sortId);
+        this.$nextTick(() => {
+          this.setTableHeight();
+        });
+      });
+      // let _this = this;
+      // window.addEventListener("resize", () => {
+      //   if (_this.chartObj) {
+      //     _this.chartObj.resize();
+      //   }
+      // });
+    },
+    sortId(a, b) {
+      return b.ratez - a.ratez;
+    },
+    setTableHeight() {
+      console.log(this.$refs.innder.offsetHeight);
+      this.tableHeight = this.$refs.innder.offsetHeight
+        // window.innerHeight - this.$refs.table.offsetHeight - 600;
+      // 监听窗口大小变化
+    },
+  },
+  watch: {
+    userid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getInfo();
+    });
+  },
+};
+</script>
+
+<style scoped>
+.el-table>>>.even_row {
+  background-color: rgb(238, 243, 250) !important;
+}
+
+.el-table>>>.row_class td {
+  padding: 8px 0;
+  border: unset;
+}
+
+.el-table>>>.row_class {
+  background: rgb(249, 249, 249);
+}
+
+.el-table>>>.row_class .cell {
+  padding: 0;
+  white-space: nowrap;
+  font-size: 12px;
+}
+
+.el-table>>>.header_row_class .cell {
+  padding: 0;
+  white-space: nowrap;
+}
+
+.el-table::before {
+  height: 0;
+}
+</style>

src/components/pages/myReport/components/MyLookComponent/courseRadar.vue

@@ -0,0 +1,235 @@
+<template>
+  <div v-loading="isloading">
+    <div style="width: 95%; height: calc(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 {
+  props: ["userid", "courseid"],
+  data() {
+    return {
+      isloading:false,
+      workJson: [],
+      chartObj: null,
+      option: {
+        // title: {
+        //   text: "项目完成度:各个阶段完成情况",
+        //   textStyle: {
+        //     fontSize: 13,
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        legend: {
+          data: ["个人完成度", "班级平均完成度"],
+          top: "bottom",
+          icon: "circle",
+        },
+        grid: {
+          left: "15%",
+          right: "5%",
+          bottom: "20%",
+          top: "15%",
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          {
+            name: "个人完成度",
+            type: "line",
+            areaStyle: {},
+            data: [],
+            label: {
+              show: true,
+            },
+          },
+          {
+            name: "班级平均完成度",
+            type: "line",
+            areaStyle: {},
+            data: [],
+            label: {
+              show: true,
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+    getInfo() {
+      this.isloading = true
+      let params = {
+        uid: this.userid,
+        cid: this.courseid,
+      };
+      console.log(this.userid);
+      if (!this.userid) {
+        return;
+      }
+      this.ajax
+        .get(this.$store.state.api + "getUserInfo", params)
+        .then((res) => {
+          this.isloading = false
+          let chapters = JSON.parse(res.data[2][0].chapters);
+          var tool = 0;
+          let workJson = []
+          let _pWork = res.data[3];
+          let _allWork = res.data[4];
+
+          for (var i = 0; i < chapters.length; i++) {
+            workJson[i] = { tool: 0, ptool: 0, work: 0, allTool: 0, allWork: 0 }
+            for (
+              var j = 0;
+              j < chapters[i].chapterInfo[0].taskJson.length;
+              j++
+            ) {
+              // 1、电子白板，3、思维导图，6协同文档，7思维网格 16、作业提交,40.项目-学生互评 41.项目-下拉选择题 42.项目-录音功能
+              let _toolsAarry = [1, 3, 6, 7, 16, 15, 4, 40, 41, 42];
+              for (
+                var k = 0;
+                k < chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
+                k++
+              ) {
+                if (
+                  _toolsAarry.indexOf(
+                    chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool[0]
+                  ) != -1
+                ) {
+                  tool++;
+                  workJson[i].tool++
+                }
+              }
+            }
+
+            for (var k = 0; k < _pWork.length; k++) {
+              if (_pWork[k].stage == i) {
+                workJson[i].ptool++
+              }
+            }
+            for (var k = 0; k < _allWork.length; k++) {
+              if (_allWork[k].stage == i) {
+                workJson[i].allTool++
+              }
+            }
+
+          }
+          this.userinfo = res.data[0][0];
+          this.ccount = tool;
+          this.islearn = tool - parseInt(res.data[1][0].vcount);
+
+          this.iscount = res.data[1][0].vcount;
+          this.vcount = 0;
+
+          for (var i = 0; i < workJson.length; i++) {
+            if (workJson[i].ptool > workJson[i].tool) {
+              workJson[i].work = 100
+            } else if( workJson[i].tool === 0){
+              workJson[i].work = 100
+            } else {
+              workJson[i].work = Math.round(workJson[i].ptool / workJson[i].tool * 100)
+            }
+
+            if ((workJson[i].allTool / res.data[1][0].workCount) > workJson[i].tool) {
+              workJson[i].allWork = 100
+            } else {
+              workJson[i].allWork = Math.round((workJson[i].allTool / res.data[1][0].workCount) / workJson[i].tool * 100)
+            }
+          }
+          this.workJson = workJson
+
+
+
+          console.log(workJson);
+          this.setChart();
+        })
+        .catch((err) => {
+          this.isloading = false
+          console.error(err);
+        });
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+          //   document.getElementById("#charts_canvas")
+        );
+        let _array1 = [];
+        let _array2 = [];
+        let _xarray = [];
+        for (var i = 0; i < this.workJson.length; i++) {
+          //   this.option.series[0].data[i].value = this.randomNum(30, 80);
+          _array1.push(this.workJson[i].work);
+          _array2.push(this.workJson[i].allWork);
+          _xarray.push("阶段" + (i + 1))
+        }
+        this.option.series[0].data = _array1;
+        this.option.xAxis[0].data = _xarray;
+        this.option.series[1].data = _array2;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+      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>
+
+</style>

src/components/pages/myReport/components/MyLookComponent/myRportLook.vue

@@ -42,12 +42,12 @@
 </template>
 
 <script>
-import StudentInfo from "../../../components/report/studentInfo.vue";
-import CourseInfo from "../../../components/report/courseInfo.vue";
-import StudentAbility from "../../../components/report/studentAbility.vue";
-import CourseRadar from "../../../components/report/courseRadar.vue";
-import CoursePie from "../../../components/report/coursePie.vue";
-import CourseDetailReport from "../../../components/report/courseDetailReport.vue";
+import StudentInfo from "./studentInfo.vue";
+import CourseInfo from "./courseInfo.vue";
+import StudentAbility from "./studentAbility.vue";
+import CourseRadar from "./courseRadar.vue";
+import CoursePie from "./coursePie.vue";
+import CourseDetailReport from "./courseDetailReport.vue";
 import worksDetail3 from "../../../components/worksDetail3.vue";
 export default {
   props: ["checkCourse", "checkStudent","oid"],

src/components/pages/myReport/components/MyLookComponent/studentAbility.vue

@@ -0,0 +1,769 @@
+<template>
+  <div v-loading="isloading">
+    <div style="background: #fff; padding: 10px 0; height: 100%">
+      <div class="sd_person_button">
+        <span @click="setType(2)" :class="{ active: type == 2 }">个人项目评价</span>
+        <span @click="setType(1)" :class="{ active: type == 1 }">课程目标设置</span>
+        <!-- <span @click="setType(3)" :class="{ active: type == 3 }">其他项目</span> -->
+      </div>
+      <div style="display: flex; width: 100%; height: calc(100% - 50px)">
+        <div id="person_canvas1" class="echart" v-show="type == 1"
+          style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
+          <span v-if="!eJson">暂无数据</span>
+        </div>
+        <div id="person_canvas2" class="echart" v-show="type == 2"
+          style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
+          <!-- <div class="box2" v-show="work.length ? true : false">
+            <div v-for="(item,index) in work" :key="index" class="target_box">
+              <div class="target_task">
+                <span>第{{item.stage+1}}阶段</span>
+                <span>任务{{item.task+1}}</span>
+              </div>
+              <div class="target_content_box">
+                <div v-for="(target,k) in item.work" :key="index+'-'+k"
+                  :style="{width:(target.count / item.count * 100)+'%',backgroundColor:color[k]}">
+
+                  <el-tooltip :content="target.name+' '+target.count">
+                    <span class="targetA">{{target.count}}</span>
+                  </el-tooltip>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+          <span v-show="!work.length ? true : false">暂无数据</span> -->
+          <span v-show="!randarJson.length ? true : false">暂无数据</span>
+
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  props: ["userid", "courseid"],
+  data() {
+    return {
+      randarJson: [],
+      isloading: false,
+      chartObj2: null,
+      chartObj3: null,
+      color: [],
+      workW: [],
+      work: [],
+      eJson: "",
+      type: 2,
+      option2: {
+        //color:colors,
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          left: "50",
+          top: "center",
+        },
+        series: {
+          type: "sunburst",
+          data: [],
+          radius: [20, "80%"],
+          itemStyle: {
+            borderRadius: 7,
+            borderWidth: 2,
+          },
+          label: {
+            show: true,
+            fontSize: 10
+          },
+        },
+      },
+      option3: {
+        // title: {
+        //   text: "项目活跃度:不同任务的学习时间占比",
+        //   textStyle: {
+        //     fontSize: 13,
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        grid: {
+          left: "15%",
+          right: "15%",
+          bottom: "15%",
+          top: "15%",
+        },
+        xAxis: {
+          type: "value",
+        },
+        yAxis: {
+          type: "category",
+          data: ["阶段1", "阶段2", "阶段3", "阶段4", "阶段5"],
+        },
+        legend: {
+          show: false
+        },
+        series: [
+          {
+            name: "任务1",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+          {
+            name: "任务2",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+          {
+            name: "任务3",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+          {
+            name: "任务4",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+          {
+            name: "任务5",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+        ],
+      },
+      radarOption: {
+        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: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        if (this.type == 1 && this.eJson) {
+          const chartObj2 = this.$echarts.init(
+            //劳动课程
+            this.$el.querySelector("#person_canvas1")
+          );
+          // this.option2.series.data = [
+          //   {
+          //     name: "信息意识",
+          //     value: 15,
+          //     children: [
+          //       {
+          //         name: "信息应用意识",
+          //         value: this.randomNum(1, 5),
+          //       },
+          //       {
+          //         name: "信息安全意识",
+          //         value: this.randomNum(1, 5),
+          //       },
+          //       {
+          //         name: "信息感知意识",
+          //         value: this.randomNum(1, 5),
+          //       },
+          //     ],
+          //   },
+          //   {
+          //     name: "信息社会责任",
+          //     value: 15,
+          //     children: [
+          //       {
+          //         name: "信息伦理道德",
+          //         value: this.randomNum(1, 5),
+          //       },
+          //       {
+          //         name: "信息法律法规",
+          //         value: this.randomNum(1, 10),
+          //       },
+          //     ],
+          //   },
+          //   {
+          //     name: "信息知识与技能",
+          //     value: 15,
+          //     children: [
+          //       {
+          //         name: "信息应用技能",
+          //         value: 5,
+          //       },
+          //       {
+          //         name: "信息科学知识",
+          //         value: 10,
+          //       },
+          //     ],
+          //   },
+          //   {
+          //     name: "信息思维与行为",
+          //     value: 15,
+          //     children: [
+          //       {
+          //         name: "信息思维",
+          //         value: this.randomNum(1, 10),
+          //       },
+          //       {
+          //         name: "信息行为",
+          //         value: this.randomNum(1, 5),
+          //       },
+          //     ],
+          //   },
+          // ];
+          var res = this.eJson;
+          var _array = [];
+          let i = 0;
+          for (var item in res) {
+            let num = Object.keys(res);
+            let count = 10 / num.length;
+            let _item = res[item];
+            _array.push({ name: _item.name, value: count, children: [] });
+            let j = 0;
+            for (var item2 in _item.child) {
+              let num2 = Object.keys(_item.child);
+              let count2 = count / num2.length;
+              let _item2 = _item.child[item2];
+              _array[i].children.push({
+                name: _item2.name,
+                value: count2,
+                children: [],
+              });
+              for (var item3 in _item2.child) {
+                let num3 = Object.keys(_item2.child);
+                let count3 = count2 / num3.length;
+                let _item3 = _item2.child[item3];
+                _array[i].children[j].children.push({
+                  name: _item3.name,
+                  value: count3,
+                });
+              }
+              j++;
+            }
+            i++;
+            console.log(item);
+          }
+          this.option2.series.data = _array
+          // 初始化雷达图
+          this.chartObj2 = chartObj2;
+          this.chartObj2.setOption(this.option2);
+        } else if (this.type == 2) {
+          // const chartObj3 = this.$echarts.init(
+          //   //劳动课程
+          //   this.$el.querySelector("#person_canvas2")
+          // );
+          // let _array21 = [];
+          // let _array22 = [];
+          // let _array23 = [];
+          // let _array24 = [];
+          // let _array25 = [];
+          // for (var i = 0; i < 5; i++) {
+          //   //   this.option.series[0].data[i].value = this.randomNum(30, 80);
+          //   _array21.push(this.randomNum(2, 20));
+          //   _array22.push(this.randomNum(2, 20));
+          //   _array23.push(this.randomNum(2, 20));
+          //   _array24.push(this.randomNum(2, 20));
+          //   _array25.push(this.randomNum(2, 20));
+          // }
+          // this.option3.series[0].data = _array21;
+          // this.option3.series[1].data = _array22;
+          // this.option3.series[2].data = _array23;
+          // this.option3.series[3].data = _array24;
+          // this.option3.series[4].data = _array25;
+          if (this.randarJson.length) {
+            const chartObj3 = this.$echarts.init(
+              //劳动课程
+              this.$el.querySelector("#person_canvas2")
+            );
+            let radarOption = JSON.parse(JSON.stringify(this.radarOption))
+            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.chartObj3 = chartObj3;
+            this.chartObj3.setOption(radarOption);
+
+          }
+
+          // var _work = []
+          // this.color = []
+          // for (var i = 0; i < this.workW.length; i++) {
+          //   _work[i] = { stage: this.workW[i].stage, task: this.workW[i].task, work: [], count: 0 }
+          //   for (var j = 0; j < this.workW[i].work.length; j++) {
+          //     for (var k = 0; k < this.workW[i].work[j].target.length; k++) {
+          //       this.color.push(this.color16())
+          //       _work[i].work.push(this.workW[i].work[j].target[k])
+          //       _work[i].count += this.workW[i].work[j].target[k].count
+          //     }
+          //   }
+          // }
+          // this.work = _work;
+          // console.log(_work);
+          // this.$forceUpdate();
+
+
+        }
+      });
+      let _this = this;
+      window.addEventListener("resize", () => {
+        // if (_this.chartObj2) {
+        //   _this.chartObj2.resize();
+        //   _this.chartObj3.resize();
+        // }
+
+        if (_this.chartObj2) {
+          _this.chartObj2.resize();
+
+        }
+        if (_this.chartObj3) {
+          _this.chartObj3.resize();
+        }
+      });
+    },
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+    getInfo() {
+      this.isloading = true
+      let params = {
+        uid: this.userid,
+        cid: this.courseid,
+      };
+      console.log(this.userid);
+      if (!this.userid) {
+        return;
+      }
+      this.ajax
+        .get(this.$store.state.api + "getUserInfo", params)
+        .then((res) => {
+          this.isloading = false
+          let chapters = JSON.parse(res.data[2][0].chapters);
+          var tool = 0;
+          let workJson = []
+          let _pWork = res.data[3];
+          let _allWork = res.data[4];
+          let _allComment = res.data[5];
+          let _isWorks = res.data[6];
+          var randarJson = []
+          var randarAarray = []
+
+          this.eJson = res.data[2][0].content ? JSON.parse(res.data[2][0].content) : "";
+
+          for (var i = 0; i < chapters.length; i++) {
+            workJson[i] = { tool: 0, ptool: 0, work: 0, ishuo: 0, isCan: 0 }
+            for (
+              var j = 0;
+              j < chapters[i].chapterInfo[0].taskJson.length;
+              j++
+            ) {
+              // 1、电子白板，3、思维导图，6协同文档，7思维网格 16、作业提交,40.项目-学生互评 41.项目-下拉选择题 42.项目-录音功能
+              let _toolsAarry = [1, 3, 6, 7, 16, 15, 4, 40, 41, 42];
+              for (
+                var k = 0;
+                k < chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
+                k++
+              ) {
+                if (
+                  _toolsAarry.indexOf(
+                    chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool[0]
+                  ) != -1
+                ) {
+                  tool++;
+                  workJson[i].tool++
+                }
+              }
+            }
+
+            for (var k = 0; k < _pWork.length; k++) {
+              if (_pWork[k].stage == i) {
+                workJson[i].ptool++
+              }
+            }
+            for (var k = 0; k < _allComment.length; k++) {
+              if (_allComment[k].stage == i) {
+                workJson[i].ishuo++
+              }
+            }
+
+
+          }
+          this.userinfo = res.data[0][0];
+          this.ccount = tool;
+          this.islearn = tool - parseInt(res.data[1][0].vcount);
+
+          this.iscount = res.data[1][0].vcount;
+          this.vcount = 0;
+
+          for (var i = 0; i < workJson.length; i++) {
+            if (workJson[i].ptool > workJson[i].tool) {
+              workJson[i].work = 5
+            } else if (workJson[i].tool === 0) {
+              workJson[i].work = 5
+            } else {
+              workJson[i].work = Math.round(workJson[i].ptool / workJson[i].tool * 100 / 20)
+            }
+            if (workJson[i].ptool) {
+              workJson[i].isCan = 1
+            }
+          }
+          this.workJson = workJson
+
+          console.log(workJson);
+          this.setChart();
+          let _workW = []
+          for (var i = 0; i < _isWorks.length; i++) {
+            if (chapters[_isWorks[i].stage].chapterInfo[0].taskJson[_isWorks[i].task].eList && chapters[_isWorks[i].stage].chapterInfo[0].taskJson[_isWorks[i].task].eList.length) {
+              _workW.push({ stage: _isWorks[i].stage, task: _isWorks[i].task, rate: JSON.parse(_isWorks[i].rate), elist: chapters[_isWorks[i].stage].chapterInfo[0].taskJson[_isWorks[i].task].eList })
+            }
+            // else {
+            //   let elist = [
+            //     {
+            //       "value": "意识能力",
+            //       "score": 5,
+            //       "target": [
+            //         {
+            //           "name": "意识能力1",
+            //           "per": 0.5
+            //         },
+            //         {
+            //           "name": "意识能力2",
+            //           "per": 0.5
+            //         }
+            //       ]
+            //     },
+            //     {
+            //       "value": "科学探究能力",
+            //       "score": 5,
+            //       "target": [
+            //         {
+            //           "name": "科学探究能力1",
+            //           "per": 0.5
+            //         },
+            //         {
+            //           "name": "科学探究能力2",
+            //           "per": 0.5
+            //         }
+            //       ]
+            //     },
+            //     {
+            //       "value": "实践创新能力",
+            //       "score": 5,
+            //       "target": [
+            //         {
+            //           "name": "实践创新能力1",
+            //           "per": 0.5
+            //         },
+            //         {
+            //           "name": "实践创新能力2",
+            //           "per": 0.5
+            //         }
+            //       ]
+            //     },
+            //     {
+            //       "value": "学习反思能力",
+            //       "score": 5,
+            //       "target": [
+            //         {
+            //           "name": "学习反思能力1",
+            //           "per": 0.5
+            //         },
+            //         {
+            //           "name": "学习反思能力2",
+            //           "per": 0.5
+            //         }
+            //       ]
+            //     },
+            //     {
+            //       "value": "工程思维能力",
+            //       "score": 5,
+            //       "target": [
+            //         {
+            //           "name": "工程思维能力1",
+            //           "per": 0.5
+            //         },
+            //         {
+            //           "name": "工程思维能力2",
+            //           "per": 0.5
+            //         }
+            //       ]
+            //     }
+            //   ]
+            //   _workW.push({ stage: _isWorks[i].stage, task: _isWorks[i].task, rate: JSON.parse(_isWorks[i].rate), elist: elist })
+            // }
+          }
+          for (var i = 0; i < _workW.length; i++) {
+            _workW[i].work = []
+            for (var j = 0; j < _workW[i].elist.length; j++) {
+              if (_workW[i].elist[j].target) {
+                if (randarAarray.indexOf(_workW[i].elist[j].target) == -1) {
+                  randarAarray.push(_workW[i].elist[j].target)
+                }
+              }
+              // for (var k = 0; k < _workW[i].elist[j].target.length; k++) {
+              //   _workW[i].elist[j].target[k].count = _workW[i].rate[_workW[i].elist[j].value] * _workW[i].elist[j].target[k].per
+              // }
+              _workW[i].work.push({ name: _workW[i].elist[j].value, target: _workW[i].elist[j].target })
+              _workW[i].work[_workW[i].work.length - 1][_workW[i].elist[j].value] = _workW[i].rate[_workW[i].elist[j].value]
+              _workW[i].work[_workW[i].work.length - 1].value = _workW[i].rate[_workW[i].elist[j].value]
+            }
+          }
+          for (var k = 0; k < randarAarray.length; k++) {
+            randarJson.push({ target: randarAarray[k], count: 0, value: 0 })
+            for (var i = 0; i < _workW.length; i++) {
+              for (var j = 0; j < _workW[i].work.length; j++) {
+                if (_workW[i].work[j].target == randarAarray[k]) {
+                  randarJson[k].count++
+                  randarJson[k].value += _workW[i].work[j].value
+                }
+              }
+            }
+          }
+
+          console.log('chapter=-----', chapters);
+          console.log('_workW=-----', _workW);
+          console.log('randarAarray=-----', randarAarray);
+          console.log('randarJson=-----', randarJson);
+
+          this.workW = _workW
+          this.randarJson = randarJson
+
+        })
+        .catch((err) => {
+          this.isloading = false
+          console.error(err);
+        });
+    },
+    setType(type) {
+      this.type = type;
+      if (this.chartObj2) {
+        this.chartObj2.dispose();
+
+      }
+      if (this.chartObj3) {
+        this.chartObj3.dispose();
+
+      }
+      this.getInfo();
+    },
+    color16() {//十六进制颜色随机
+      var r = Math.floor(Math.random() * 256);
+      var g = Math.floor(Math.random() * 256);
+      var b = Math.floor(Math.random() * 256);
+      var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
+      return color;
+    }
+  },
+  watch: {
+    userid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getInfo();
+    });
+  },
+};
+</script>
+
+<style scoped>
+.sd_person_button {
+  font-size: 16px;
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.sd_person_button span {
+  margin-left: 20px;
+  padding: 0 0 6px;
+  cursor: pointer;
+}
+
+.sd_person_button .active {
+  border-bottom: 2px solid rgb(30, 146, 255);
+  color: rgb(30, 146, 255);
+}
+
+
+.target_box {
+  display: flex;
+  align-items: center;
+  width: 80%;
+  margin: 0 auto;
+}
+
+.target_box+.target_box {
+  margin-top: 10px;
+}
+
+.target_task {
+  width: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: rgb(91, 91, 91);
+}
+
+.target_content_box {
+  display: flex;
+  align-items: center;
+  width: calc(100% - 100px);
+}
+
+.target_content_box div {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.box2 {
+  margin-top: 40px;
+  height: 80%;
+  width: 100%;
+  overflow: auto;
+}
+
+.targetA {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/components/pages/myReport/components/MyLookComponent/studentInfo.vue

@@ -0,0 +1,205 @@
+<template>
+  <div v-loading="isloading">
+    <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>
+        </div>
+        <div>
+          <span>账号:</span><span>{{ userinfo.username }}</span>
+        </div>
+      </div>
+    </div>
+    <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">
+          <div>{{ ccount }}</div>
+          <div>全部任务</div>
+        </div>
+        <div class="si_course_box">
+          <div>{{ iscount }}</div>
+          <div>已完成</div>
+        </div>
+        <!-- <div class="si_course_box">
+          <div>{{ vcount }}</div>
+          <div>进行中</div>
+        </div> -->
+        <div class="si_course_box">
+          <div>{{ islearn }}</div>
+          <div>待学习</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["userid", "courseid"],
+  data() {
+    return {
+      userinfo: {},
+      vcount: 0,
+      iscount: 0,
+      islearn: 0,
+      ccount: 0,
+      isloading: false,
+    };
+  },
+  methods: {
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+    getInfo() {
+      this.isloading = true;
+      let params = {
+        uid: this.userid,
+        cid: this.courseid,
+      };
+      console.log(this.userid);
+      if (!this.userid) {
+        return;
+      }
+      this.ajax
+        .get(this.$store.state.api + "getUserInfo", params)
+        .then((res) => {
+          this.isloading = false;
+          let chapters = JSON.parse(res.data[2][0].chapters);
+          var tool = 0;
+          for (var i = 0; i < chapters.length; i++) {
+            for (
+              var j = 0;
+              j < chapters[i].chapterInfo[0].taskJson.length;
+              j++
+            ) {
+              // 1、电子白板，3、思维导图，6协同文档，7思维网格 16、作业提交,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;
+                k++
+              ) {
+                if (
+                  _toolsAarry.indexOf(
+                    chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool[0]
+                  ) != -1
+                ) {
+                  tool++;
+                }
+              }
+              // tool += chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
+            }
+          }
+          this.userinfo = res.data[0][0];
+          // this.ccount = res.data[1][0].ccount;
+          this.ccount = tool;
+          this.islearn = tool - parseInt(res.data[1][0].vcount);
+
+          // let count = this.randomNum(0, parseInt(res.data[1][0].vcount));
+          this.iscount = res.data[1][0].vcount;
+          this.vcount = 0;
+        })
+        .catch((err) => {
+          this.isloading = false;
+          console.error(err);
+        });
+    },
+  },
+  watch: {
+    userid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  created() {
+    this.getInfo();
+  },
+};
+</script>
+
+<style scoped>
+.si_head {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.si_img {
+  width: 90px;
+  height: 90px;
+}
+
+.si_content {
+  width: calc(100% - 150px);
+  margin-left: 15px;
+  font-size: 14px;
+}
+
+.si_content div + div {
+  margin-top: 10px;
+}
+
+.si_content div {
+  display: flex;
+}
+
+.si_content span + span {
+  margin-left: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: calc(100% - 50px);
+}
+
+.si_course {
+  width: calc(100% - 60px);
+  margin: 0 auto;
+  margin-top: 20px;
+}
+
+.si_course_head {
+  margin-bottom: 10px;
+}
+
+.si_course_content {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.si_course_box div:nth-child(1) {
+  font-size: 22px;
+  text-align: center;
+  font-weight: 700;
+  color: rgb(47 70 136);
+}
+
+.si_course_box div:nth-child(2) {
+  font-size: 14px;
+  width: 60px;
+  border: 1px solid rgb(140, 140, 140);
+  text-align: center;
+  padding: 1px 0;
+  margin-top: 5px;
+  color: rgb(67, 67, 67);
+}
+</style>

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

@@ -25,14 +25,15 @@
             {{ scope.row.cName ? scope.row.cName : "-" }}
           </template>
         </el-table-column>
-        <el-table-column label="操作" min-width="15%">
+        <el-table-column label="选择合成报告" align="center" min-width="25%">
           <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="primary"
-              @click="getReport(scope.row.courseId)"
-              >查看</el-button
-            >
+            <input
+              type="checkbox"
+              :id="scope.row.courseId"
+              :value="scope.row.title"
+              @change="isChooseStudent(scope.row.courseId, scope.$index)"
+              v-model="checkboxList[scope.$index]"
+            />
           </template>
         </el-table-column>
       </el-table>
@@ -44,12 +45,23 @@
 export default {
   props: ["mrEvaList"],
   data() {
-    return {};
+    return {
+      checkboxList: [],
+      isChooseList: [],
+    };
   },
   methods: {
     getReport(cid) {
       this.$emit("getEvaCid", cid);
     },
+    isChooseStudent(id) {
+      if (this.isChooseList.indexOf(id) != -1) {
+        this.isChooseList.splice(this.isChooseList.indexOf(id), 1);
+      } else {
+        this.isChooseList.push(id);
+      }
+      this.$forceUpdate();
+    },
   },
 };
 </script>