Browse Source

修改我的项目我的评价页面功能

zengyicheng 2 years ago
parent
commit
9385a1853b

+ 125 - 21
package-lock.json

@@ -4415,6 +4415,11 @@
         }
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/file-uri-to-path/download/file-uri-to-path-1.0.0.tgz",
@@ -5047,6 +5052,16 @@
       "integrity": "sha1-l9RoiutcgYhqNk+qDK0d2hTUM6c=",
       "dev": true
     },
+    "html-docx-js": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmmirror.com/html-docx-js/-/html-docx-js-0.3.1.tgz",
+      "integrity": "sha512-QSrMiRhxesqxYCa3f+2Z3ttIHPzSjDOL1tCOmIDIEET7HdabxXND6tAbsFMXAgRG4RADQ3wbl74ydMmjidaDPA==",
+      "requires": {
+        "jszip": "^2.3.0",
+        "lodash.escape": "^3.0.0",
+        "lodash.merge": "^3.2.0"
+      }
+    },
     "html-entities": {
       "version": "1.4.0",
       "resolved": "https://registry.nlark.com/html-entities/download/html-entities-1.4.0.tgz",
@@ -5854,6 +5869,14 @@
         "verror": "1.10.0"
       }
     },
+    "jszip": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/jszip/-/jszip-2.7.0.tgz",
+      "integrity": "sha512-JIsRKRVC3gTRo2vM4Wy9WBC3TRcfnIZU8k65Phi3izkvPH975FowRYtKGT6PxevA0XnJ/yO8b0QwV0ydVyQwfw==",
+      "requires": {
+        "pako": "~1.0.2"
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz",
@@ -5986,14 +6009,12 @@
     "lodash._arraycopy": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/lodash._arraycopy/download/lodash._arraycopy-3.0.0.tgz",
-      "integrity": "sha1-due3wfH7klRzdIeKVi7Qaj5Q9uE=",
-      "dev": true
+      "integrity": "sha1-due3wfH7klRzdIeKVi7Qaj5Q9uE="
     },
     "lodash._arrayeach": {
       "version": "3.0.0",
       "resolved": "https://registry.nlark.com/lodash._arrayeach/download/lodash._arrayeach-3.0.0.tgz",
-      "integrity": "sha1-urFWsqkNPxu9XGU0AzSeXlkz754=",
-      "dev": true
+      "integrity": "sha1-urFWsqkNPxu9XGU0AzSeXlkz754="
     },
     "lodash._baseassign": {
       "version": "3.2.0",
@@ -6022,8 +6043,7 @@
     "lodash._basecopy": {
       "version": "3.0.1",
       "resolved": "https://registry.nlark.com/lodash._basecopy/download/lodash._basecopy-3.0.1.tgz",
-      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
-      "dev": true
+      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY="
     },
     "lodash._basecreate": {
       "version": "3.0.3",
@@ -6034,26 +6054,37 @@
     "lodash._basefor": {
       "version": "3.0.3",
       "resolved": "https://registry.npm.taobao.org/lodash._basefor/download/lodash._basefor-3.0.3.tgz",
-      "integrity": "sha1-dVC06SGO8J+tJDQ7YSAhx5tMIMI=",
-      "dev": true
+      "integrity": "sha1-dVC06SGO8J+tJDQ7YSAhx5tMIMI="
     },
     "lodash._bindcallback": {
       "version": "3.0.1",
       "resolved": "https://registry.nlark.com/lodash._bindcallback/download/lodash._bindcallback-3.0.1.tgz",
-      "integrity": "sha1-5THCdkTPi1epnhftlbNcdIeJOS4=",
-      "dev": true
+      "integrity": "sha1-5THCdkTPi1epnhftlbNcdIeJOS4="
+    },
+    "lodash._createassigner": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz",
+      "integrity": "sha512-LziVL7IDnJjQeeV95Wvhw6G28Z8Q6da87LWKOPWmzBLv4u6FAT/x5v00pyGW0u38UoogNF2JnD3bGgZZDaNEBw==",
+      "requires": {
+        "lodash._bindcallback": "^3.0.0",
+        "lodash._isiterateecall": "^3.0.0",
+        "lodash.restparam": "^3.0.0"
+      }
     },
     "lodash._getnative": {
       "version": "3.9.1",
       "resolved": "https://registry.npm.taobao.org/lodash._getnative/download/lodash._getnative-3.9.1.tgz",
-      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
-      "dev": true
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
     },
     "lodash._isiterateecall": {
       "version": "3.0.9",
       "resolved": "https://registry.nlark.com/lodash._isiterateecall/download/lodash._isiterateecall-3.0.9.tgz",
-      "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=",
-      "dev": true
+      "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw="
+    },
+    "lodash._root": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/lodash._root/-/lodash._root-3.0.1.tgz",
+      "integrity": "sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ=="
     },
     "lodash._stack": {
       "version": "4.1.3",
@@ -6111,17 +6142,23 @@
         }
       }
     },
+    "lodash.escape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/lodash.escape/-/lodash.escape-3.2.0.tgz",
+      "integrity": "sha512-n1PZMXgaaDWZDSvuNZ/8XOcYO2hOKDqZel5adtR30VKQAtoWs/5AOeFA0vPV8moiPzlqe7F4cP2tzpFewQyelQ==",
+      "requires": {
+        "lodash._root": "^3.0.0"
+      }
+    },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.nlark.com/lodash.isarguments/download/lodash.isarguments-3.1.0.tgz",
-      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=",
-      "dev": true
+      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
     },
     "lodash.isarray": {
       "version": "3.0.4",
       "resolved": "https://registry.nlark.com/lodash.isarray/download/lodash.isarray-3.0.4.tgz",
-      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
-      "dev": true
+      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
     },
     "lodash.isplainobject": {
       "version": "4.0.6",
@@ -6129,11 +6166,15 @@
       "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
       "dev": true
     },
+    "lodash.istypedarray": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/lodash.istypedarray/-/lodash.istypedarray-3.0.6.tgz",
+      "integrity": "sha512-lGWJ6N8AA3KSv+ZZxlTdn4f6A7kMfpJboeyvbFdE7IU9YAgweODqmOgdUHOA+c6lVWeVLysdaxciFXi+foVsWw=="
+    },
     "lodash.keys": {
       "version": "3.1.2",
       "resolved": "https://registry.npm.taobao.org/lodash.keys/download/lodash.keys-3.1.2.tgz",
       "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
-      "dev": true,
       "requires": {
         "lodash._getnative": "^3.0.0",
         "lodash.isarguments": "^3.0.0",
@@ -6152,6 +6193,45 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.merge": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-3.3.2.tgz",
+      "integrity": "sha512-ZgGZpRhWLjivGUbjtApZR4HyLv/UAyoYqESVYkK4aLBJVHRrbFpG+GNnE9JPijliME4LkKM0SFI/WyOiBiv1+w==",
+      "requires": {
+        "lodash._arraycopy": "^3.0.0",
+        "lodash._arrayeach": "^3.0.0",
+        "lodash._createassigner": "^3.0.0",
+        "lodash._getnative": "^3.0.0",
+        "lodash.isarguments": "^3.0.0",
+        "lodash.isarray": "^3.0.0",
+        "lodash.isplainobject": "^3.0.0",
+        "lodash.istypedarray": "^3.0.0",
+        "lodash.keys": "^3.0.0",
+        "lodash.keysin": "^3.0.0",
+        "lodash.toplainobject": "^3.0.0"
+      },
+      "dependencies": {
+        "lodash.isplainobject": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmmirror.com/lodash.isplainobject/-/lodash.isplainobject-3.2.0.tgz",
+          "integrity": "sha512-P4wZnho5curNqeEq/x292Pb57e1v+woR7DJ84DURelKB46lby8aDEGVobSaYtzHdQBWQrJSdxcCwjlGOvvdIyg==",
+          "requires": {
+            "lodash._basefor": "^3.0.0",
+            "lodash.isarguments": "^3.0.0",
+            "lodash.keysin": "^3.0.0"
+          }
+        },
+        "lodash.keysin": {
+          "version": "3.0.8",
+          "resolved": "https://registry.npmmirror.com/lodash.keysin/-/lodash.keysin-3.0.8.tgz",
+          "integrity": "sha512-YDB/5xkL3fBKFMDaC+cfGV00pbiJ6XoJIfRmBhv7aR6wWtbCW6IzkiWnTfkiHTF6ALD7ff83dAtB3OEaSoyQPg==",
+          "requires": {
+            "lodash.isarguments": "^3.0.0",
+            "lodash.isarray": "^3.0.0"
+          }
+        }
+      }
+    },
     "lodash.mergewith": {
       "version": "4.6.2",
       "resolved": "https://registry.nlark.com/lodash.mergewith/download/lodash.mergewith-4.6.2.tgz",
@@ -6164,6 +6244,31 @@
       "integrity": "sha1-lU73UEkmIDjJbR/Jiyj9r58Hcqo=",
       "dev": true
     },
+    "lodash.restparam": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
+      "integrity": "sha512-L4/arjjuq4noiUJpt3yS6KIKDtJwNe2fIYgMqyYYKoeIfV1iEqvPwhCx23o+R9dzouGihDAPN1dTIRWa7zk8tw=="
+    },
+    "lodash.toplainobject": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/lodash.toplainobject/-/lodash.toplainobject-3.0.0.tgz",
+      "integrity": "sha512-wMI0Ju1bvSmnBS3EcRRH/3zDnZOPpDtMtNDzbbNMKuTrEpALsf+sPyMeogmv63Y11qZQO7H1xFzohIEGRMjPYA==",
+      "requires": {
+        "lodash._basecopy": "^3.0.0",
+        "lodash.keysin": "^3.0.0"
+      },
+      "dependencies": {
+        "lodash.keysin": {
+          "version": "3.0.8",
+          "resolved": "https://registry.npmmirror.com/lodash.keysin/-/lodash.keysin-3.0.8.tgz",
+          "integrity": "sha512-YDB/5xkL3fBKFMDaC+cfGV00pbiJ6XoJIfRmBhv7aR6wWtbCW6IzkiWnTfkiHTF6ALD7ff83dAtB3OEaSoyQPg==",
+          "requires": {
+            "lodash.isarguments": "^3.0.0",
+            "lodash.isarray": "^3.0.0"
+          }
+        }
+      }
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npm.taobao.org/lodash.uniq/download/lodash.uniq-4.5.0.tgz",
@@ -7400,8 +7505,7 @@
     "pako": {
       "version": "1.0.11",
       "resolved": "https://registry.nlark.com/pako/download/pako-1.0.11.tgz",
-      "integrity": "sha1-bJWZ00DVTf05RjgCUqNXBaa5kr8=",
-      "dev": true
+      "integrity": "sha1-bJWZ00DVTf05RjgCUqNXBaa5kr8="
     },
     "parallel-transform": {
       "version": "1.2.0",

+ 2 - 0
package.json

@@ -15,7 +15,9 @@
     "axios": "^0.21.3",
     "echarts": "^5.2.2",
     "element-ui": "^2.15.6",
+    "file-saver": "^2.0.5",
     "hevue-img-preview": "^5.0.3",
+    "html-docx-js": "^0.3.1",
     "html2canvas": "^1.4.1",
     "js-audio-recorder": "^1.0.7",
     "jsmind": "^0.4.8",

+ 170 - 0
src/components/components/data/problelmData.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="data_body">
+    <div class="title">
+      <span>问答数量</span>
+    </div>
+    <div style="width: 100%">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["problemJson", "chapters"],
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        sdata: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        grid: {
+          left: "1%",
+          bottom: "10%",
+          top: "15%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 1],
+          minInterval: 1,
+          position: "top",
+          axisLine: {
+            onZero: false,
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: [],
+          inverse: true,
+          offset: -10,
+          axisLabel: {
+            inside: true,
+            left: 10,
+            textStyle: {
+              color: "#000",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          z: 10,
+        },
+        dataZoom: [
+          {
+            type: "inside",
+            yAxisIndex: 0,
+            startValue: 0,
+            endValue: 5,
+            zoomLock: true,
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [],
+            showBackground: true,
+            barWidth: "50px",
+            label: {
+              show: true,
+              position: "right",
+              color: "#2e2e2e",
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart(option) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
+        this.option.yAxis.data = option.xdata;
+        this.option.series[0].data = option.sdata;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  watch: {
+    problemJson(val) {
+      this.ooption = {
+        xdata: [],
+        sdata: [],
+      };
+      this.chapters.forEach((item, index) => {
+        this.ooption.xdata.push(item.name);
+        this.ooption.sdata.push(0);
+      });
+      this.problemJson.forEach((item, index) => {
+        this.ooption.sdata[item.stage]++;
+      });
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.yAxis.data = this.ooption.xdata;
+        this.option.series[0].data = this.ooption.sdata;
+        this.chartObj.setOption(this.option);
+      }
+    },
+  },
+  mounted() {
+    this.chapters.forEach((item, index) => {
+      this.ooption.xdata.push(item.name);
+      this.ooption.sdata.push(0);
+    });
+    this.problemJson.forEach((item, index) => {
+      this.ooption.sdata[item.stage]++;
+    });
+    this.setChart(this.ooption);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 500px;
+  display: flex;
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 10px auto;
+  box-sizing: border-box;
+  padding: 10px;
+  width: 95%;
+  background: #fff;
+}
+.data_body .title {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+</style>

+ 154 - 0
src/components/components/data/scoreData.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="data_body">
+    <div class="title">
+      <span>量规评分</span>
+    </div>
+    <div style="width: 100%">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["scoreJson"],
+  data() {
+    return {
+      chartObj: null,
+      ooption: [
+        { value: 0, name: "意识能力" },
+        { value: 0, name: "科学探究能力" },
+        { value: 0, name: "实践创新能力" },
+        { value: 0, name: "学习房媳能力" },
+        { value: 0, name: "工程思维能力" },
+      ],
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            name: "量规评分",
+            type: "pie",
+            radius: "70%",
+            center: ["50%", "50%"],
+            data: [
+              { value: 0, name: "意识能力" },
+              { value: 0, name: "科学探究能力" },
+              { value: 0, name: "实践创新能力" },
+              { value: 0, name: "学习房媳能力" },
+              { value: 0, name: "工程思维能力" },
+            ],
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+              normal: {
+                label: {
+                  show: true,
+                  formatter: "{d}%",
+                  inside: true,
+                  position: "inner",
+                },
+                labelLine: { show: false },
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart(option) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
+        this.option.series[0].data = option;
+        console.log(this.option.series[0].data);
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  watch: {
+    scoreJson(val) {
+      this.ooption = [
+        { value: 0, name: "意识能力" },
+        { value: 0, name: "科学探究能力" },
+        { value: 0, name: "实践创新能力" },
+        { value: 0, name: "学习反思能力" },
+        { value: 0, name: "工程思维能力" },
+      ];
+      this.scoreJson.forEach((item) => {
+        if (item.rate) {
+          this.ooption[0].value += item.rate.ca;
+          this.ooption[1].value += item.rate.sia;
+          this.ooption[2].value += item.rate.eta;
+          this.ooption[3].value += item.rate.pia;
+          this.ooption[4].value += item.rate.lra;
+        }
+      });
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.series[0].data = this.ooption;
+        this.chartObj.setOption(this.option);
+      }
+    },
+  },
+  mounted() {
+    //ca 意识能力 sia 科学探究能力 eta 实践创新能力 pia 学习反思能力 lra 工程思维能力
+    this.scoreJson.forEach((item) => {
+      if (item.rate) {
+        this.ooption[0].value += item.rate.ca;
+        this.ooption[1].value += item.rate.sia;
+        this.ooption[2].value += item.rate.eta;
+        this.ooption[3].value += item.rate.pia;
+        this.ooption[4].value += item.rate.lra;
+      }
+    });
+    this.setChart(this.ooption);
+    var _this = this;
+     window.addEventListener('resize', () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    })
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 500px;
+  display: flex;
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 10px auto;
+  box-sizing: border-box;
+  padding: 10px;
+  width: 95%;
+  background: #fff;
+}
+.data_body .title {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+</style>

+ 167 - 0
src/components/components/data/toolsData.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="data_body">
+    <div class="title">
+      <span>工具使用</span>
+    </div>
+    <div style="width:100%">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%;margin:0 0 0 1rem"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["toolsJson", "tools"],
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        sdata: [],
+        tools: [],
+      },
+      // 1电子白板 2便签 3思维导图 4问卷调查 5量规评分 6协同文档
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [],
+            type: "line",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart(option) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
+        this.option.xAxis.data = option.xdata;
+        this.option.series[0].data = option.sdata;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(option);
+      });
+    },
+  },
+  watch: {
+    toolsJson(val) {
+      this.ooption = {
+        xdata: [],
+        sdata: [],
+        tools: [],
+      };
+      console.log(this.tools);
+      console.log(this.toolsJson);
+      this.tools.forEach((item, index) => {
+        // 1电子白板 2便签 3思维导图 4问卷调查 5量规评分 6协同文档
+        if (item == 1) {
+          this.ooption.xdata.push("电子白板");
+        } else if (item == 2) {
+          this.ooption.xdata.push("便签");
+        } else if (item == 3) {
+          this.ooption.xdata.push("思维导图");
+        } else if (item == 4) {
+          this.ooption.xdata.push("问卷调查");
+        } else if (item == 5) {
+          this.ooption.xdata.push("量规评分");
+        } else if (item == 6) {
+          this.ooption.xdata.push("协同文档");
+        }
+        this.ooption.sdata.push(0);
+        this.ooption.tools.push(item);
+      });
+      this.toolsJson.forEach((item, index) => {
+        this.ooption.tools.forEach((x, i) => {
+          if (item.tools == x) {
+            this.ooption.sdata[i] += item.count;
+          }
+        });
+      });
+      console.log(this.ooption);
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.xAxis.data = this.ooption.xdata;
+        this.option.series[0].data = this.ooption.sdata;
+        this.chartObj.setOption(this.option);
+      }
+    },
+  },
+  mounted() {
+    console.log(this.tools);
+    console.log(this.toolsJson);
+    this.tools.forEach((item, index) => {
+      // 1电子白板 2便签 3思维导图 4问卷调查 5量规评分 6协同文档
+      if (item == 1) {
+        this.ooption.xdata.push("电子白板");
+      } else if (item == 2) {
+        this.ooption.xdata.push("便签");
+      } else if (item == 3) {
+        this.ooption.xdata.push("思维导图");
+      } else if (item == 4) {
+        this.ooption.xdata.push("问卷调查");
+      } else if (item == 5) {
+        this.ooption.xdata.push("量规评分");
+      } else if (item == 6) {
+        this.ooption.xdata.push("协同文档");
+      }
+      this.ooption.sdata.push(0);
+      this.ooption.tools.push(item);
+    });
+    this.toolsJson.forEach((item, index) => {
+      this.ooption.tools.forEach((x, i) => {
+        if (item.tools == x) {
+          this.ooption.sdata[i] += item.count;
+        }
+      });
+    });
+    console.log(this.ooption);
+    this.setChart(this.ooption);
+    var _this = this;
+     window.addEventListener('resize', () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    })
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 500px;
+  display: flex;
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 10px auto;
+  box-sizing: border-box;
+  padding: 10px;
+  width: 95%;
+  background: #fff;
+}
+.data_body .title {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+</style>

+ 180 - 0
src/components/components/data/workData.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="data_body">
+    <div class="title">
+      <span>作业数量</span>
+    </div>
+    <div style="width: 100%">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["workJson", "chapters"],
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        sdata: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        grid: {
+          left: "1%",
+          bottom: "10%",
+          top: "15%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+          inverse: true,
+          axisLabel: {
+            inside: true,
+            textStyle: {
+              color: "#000",
+            },
+            formatter: function (val) {
+              var strs = val.split(""); //字符串数组
+              var str = "";
+              for (var i = 0, s; (s = strs[i++]); ) {
+                //遍历字符串数组
+                str += s;
+                if (!(i % 1)) str += "\n";
+              }
+              return str;
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          z: 10,
+        },
+        yAxis: {
+          type: "value",
+          boundaryGap: [0, 1],
+          minInterval: 1,
+          position: "top",
+          axisLine: {
+            onZero: false,
+          },
+        },
+        dataZoom: [
+          {
+            type: "inside",
+            yAxisIndex: 0,
+            startValue: 0,
+            endValue: 5,
+            zoomLock: true,
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [],
+            showBackground: true,
+            barWidth: "50px",
+            label: {
+              show: true,
+              position: "top",
+              color: "#2e2e2e",
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart(option) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
+        this.option.xAxis.data = option.xdata;
+        this.option.series[0].data = option.sdata;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  watch: {
+    workJson(val) {
+      this.ooption = {
+        xdata: [],
+        sdata: [],
+      };
+      this.chapters.forEach((item, index) => {
+        this.ooption.xdata.push(item.name);
+        this.ooption.sdata.push(0);
+      });
+      this.workJson.forEach((item, index) => {
+        this.ooption.sdata[item.stage]++;
+      });
+      console.log(this.ooption);
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.xAxis.data = this.ooption.xdata;
+        this.option.series[0].data = this.ooption.sdata;
+        this.chartObj.setOption(this.option);
+      }
+    },
+  },
+  mounted() {
+    this.chapters.forEach((item, index) => {
+      this.ooption.xdata.push(item.name);
+      this.ooption.sdata.push(0);
+    });
+    this.workJson.forEach((item, index) => {
+      this.ooption.sdata[item.stage]++;
+    });
+    console.log(this.ooption);
+    this.setChart(this.ooption);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 500px;
+  display: flex;
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 10px auto;
+  box-sizing: border-box;
+  padding: 10px;
+  width: 95%;
+  background: #fff;
+}
+.data_body .title {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+</style>

+ 567 - 0
src/components/components/studentData.vue

@@ -0,0 +1,567 @@
+<template>
+  <div>
+    <div class="sd_name">
+      <span>学生姓名:</span>
+      <span>{{studentInfo.sName}}</span>
+    </div>
+
+    <div class="sd_class">
+      <div class="sd_tTitle">課堂表現</div>
+      <div class="sd_module">
+        <div class="sd_module_content">
+          <div class="sd_module_children">
+            <span class="s">課堂活動</span>
+            <span class="s2">
+              <span>{{randomNum(1,20)}}</span>次
+            </span>
+            <span>已經擊敗99%學生</span>
+          </div>
+          <div class="sd_module_count">
+            <span>挑戰:</span>
+            <span>{{randomNum(1,5)}}</span>次
+          </div>
+          <div class="sd_module_count">
+            <span>選項挑戰:</span>
+            <span>{{randomNum(1,5)}}</span>次
+          </div>
+          <div class="sd_module_count">
+            <span>分數挑戰:</span>
+            <span>{{randomNum(1,5)}}</span>次
+          </div>
+        </div>
+        <div class="sd_module_content">
+          <div class="sd_module_children">
+            <span class="s">課堂生成</span>
+            <span class="s2">
+              <span>{{randomNum(1,10)}}</span>次
+            </span>
+            <span>已經擊敗99%學生</span>
+          </div>
+          <div class="sd_module_count">
+            <span>作品上傳:</span>
+            <span>{{randomNum(1,20)}}</span>张
+          </div>
+          <div class="sd_module_count">
+            <span>視頻上傳:</span>
+            <span>{{randomNum(1,5)}}</span>部
+          </div>
+        </div>
+
+        <div class="sd_module_content">
+          <div class="sd_module_children">
+            <span class="s">自主活動</span>
+            <span class="s2">
+              <span>{{randomNum(1,15)}}</span>分
+              <span>{{randomNum(1,60)}}</span>秒
+            </span>
+            <span>已經擊敗99%學生</span>
+          </div>
+          <div class="sd_module_count">
+            <span>計時:</span>
+            <span>{{randomNum(1,5)}}</span>分
+          </div>
+          <div class="sd_module_count">
+            <span>小組計分:</span>
+            <span>{{randomNum(1,10)}}</span>次
+          </div>
+          <div class="sd_module_count">
+            <span>個人計分:</span>
+            <span>{{randomNum(1,10)}}</span>次
+          </div>
+        </div>
+      </div>
+      <div class="sd_module_data">
+        <div
+          id="charts_canvas"
+          class="echart"
+          style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+        ></div>
+      </div>
+    </div>
+    <div class="sd_class">
+      <div class="sd_tTitle">個人能力</div>
+      <div class="sd_person_button">
+        <span @click="setType(1)" :class="{'active':type == 1}">語文</span>
+        <span @click="setType(2)" :class="{'active':type == 2}">數學</span>
+        <span @click="setType(3)" :class="{'active':type == 3}">英語</span>
+        <span @click="setType(4)" :class="{'active':type == 4}">資訊科技</span>
+        <span @click="setType(5)" :class="{'active':type == 5}">藝術</span>
+        <span @click="setType(6)" :class="{'active':type == 6}">跨學科素養</span>
+      </div>
+      <div class="sd_person_data">
+        <div
+          id="person_canvas1"
+          class="echart"
+          style="width: 50%; height: 100%; margin: 0 0 0 1rem"
+        ></div>
+        <div
+          id="person_canvas2"
+          class="echart"
+          style="width: 50%; height: 100%; margin: 0 0 0 1rem"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["studentInfo"],
+  data() {
+    return {
+      type: 6,
+      chartObj: null,
+      chartObj2: null,
+      chartObj3: null,
+      ooption: [],
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "50",
+          top: "center",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "60%",
+            center: ["65%", "50%"],
+            label: {
+              color: "inherit",
+              formatter: "{b|{b}:} {d}%  ",
+              rich: {
+                b: {
+                  fontSize: 14,
+                  fontWeight: "bold",
+                  lineHeight: 33,
+                },
+              },
+            },
+            data: [
+              { value: 0, name: "学习时间" },
+              { value: 0, name: "自我介绍" },
+              { value: 0, name: "能力闯关" },
+              { value: 0, name: "提交探究表" },
+              { value: 0, name: "提交活动表" },
+              { value: 0, name: "讨论交流" },
+              { value: 0, name: "与大家分享你的“神兽”" },
+              { value: 0, name: "总结其它动物保护自己" },
+              { value: 0, name: "作业提交" },
+              { value: 0, name: "拓展思考,讨论交流" },
+              { value: 0, name: "提交倡议书" },
+              { value: 0, name: "提交学习手册" },
+              { value: 0, name: "能力测试" },
+              { value: 0, name: "自我评价调查问卷" },
+              { value: 0, name: "课程满意度调查问卷" },
+              { value: 0, name: "家长评价问卷调查" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      },
+      data: [],
+      //const colors = ['red', 'blue', 'green', 'purple'];
+      option2: {
+        //color:colors,
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          left: "50",
+          top: "center",
+        },
+        series: {
+          type: "sunburst",
+          data: [],
+          radius: [20, "90%"],
+          itemStyle: {
+            borderRadius: 7,
+            borderWidth: 2,
+          },
+          label: {
+            show: true,
+          },
+        },
+      },
+      option3: {
+        xAxis: {
+          type: "category",
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
+          boundaryGap: false,
+          splitLine: {
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: [
+            "資訊應用意識",
+            "資訊安全意識",
+            "資訊感知意識",
+            "資訊社會責任",
+            "資訊法律法規",
+            "資訊應用技能",
+            "資訊科學知識",
+            "資訊思維",
+            "資訊行為",
+          ],
+          axisLine: {
+            show: false,
+          },
+        },
+        grid: {
+          left: 100,
+          bottom: 50,
+          right: 30,
+          top: 50,
+        },
+        series: [
+          {
+            name: "Punch Card",
+            type: "scatter",
+            symbolSize: function (val) {
+              return val[2] * 2;
+            },
+            data: [],
+            animationDelay: function (idx) {
+              return idx * 5;
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
+        var optionB = [
+          { value: this.randomNum(0, 300), name: "學習時間" },
+          { value: this.randomNum(0, 300), name: "自我介紹" },
+          { value: this.randomNum(0, 300), name: "能力闖關" },
+          { value: this.randomNum(0, 300), name: "提交探究錶" },
+          { value: this.randomNum(0, 300), name: "提交活動錶" },
+          { value: this.randomNum(0, 300), name: "討論交流" },
+          { value: this.randomNum(0, 300), name: "與大家分享你的“神獸”" },
+          { value: this.randomNum(0, 300), name: "總結其它動物保護自己" },
+          { value: this.randomNum(0, 300), name: "作业提交" },
+          { value: this.randomNum(0, 300), name: "拓展思考,討論交流" },
+          { value: this.randomNum(0, 300), name: "提交倡議書" },
+          { value: this.randomNum(0, 300), name: "提交學習手册" },
+          { value: this.randomNum(0, 300), name: "能力測試" },
+          { value: this.randomNum(0, 300), name: "自我評價調查問卷" },
+          { value: this.randomNum(0, 300), name: "課程滿意度調查問卷" },
+          { value: this.randomNum(0, 300), name: "家長評估問卷調查" },
+        ];
+        this.option.series[0].data = optionB;
+        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),
+              },
+            ],
+          },
+        ];
+        const chartObj3 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#person_canvas2")
+        );
+        let data = [];
+        for (var i = 1; i < 10; i++) {
+          for (var j = 0; j < 9; j++) {
+            var x = i;
+            var y = j;
+            var z = this.randomNum(0, 10);
+            data.push([x, y, z]);
+          }
+        }
+        this.option3.series[0].data = data;
+        // console.log(this.option.series[0].data);
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj2 = chartObj2;
+        this.chartObj3 = chartObj3;
+        this.chartObj.setOption(this.option);
+        this.chartObj2.setOption(this.option2);
+        this.chartObj3.setOption(this.option3);
+      });
+    },
+    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;
+      }
+    },
+
+    setType(type) {
+      this.type = type;
+      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: "資訊思維與行為2",
+          value: 15,
+          children: [
+            {
+              name: "資訊思維",
+              value: this.randomNum(1, 10),
+            },
+            {
+              name: "資訊行為",
+              value: this.randomNum(1, 5),
+            },
+          ],
+        },
+      ];
+      this.chartObj2.setOption(this.option2);
+      let data = [];
+      for (var i = 1; i < 10; i++) {
+        for (var j = 0; j < 9; j++) {
+          var x = i;
+          var y = j;
+          var z = this.randomNum(0, 10);
+          data.push([x, y, z]);
+        }
+      }
+      this.option3.series[0].data = data;
+      this.chartObj3.setOption(this.option3);
+    },
+  },
+  mounted() {
+    this.setChart();
+  },
+};
+</script>
+
+<style scoped>
+.sd_name {
+  font-size: 20px;
+}
+
+.sd_class {
+  width: 100%;
+}
+.sd_tTitle {
+  width: 100%;
+  background: rgb(199, 217, 212);
+  padding: 10px 10px;
+  border-radius: 5px;
+  border: 1px solid rgb(165, 182, 177);
+  font-size: 18px;
+  font-weight: 500;
+  margin: 20px 0;
+  box-sizing: border-box;
+  font-weight: 600;
+}
+.sd_module {
+  display: flex;
+  justify-content: space-between;
+}
+.sd_module_content {
+  width: calc(100% / 3 - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.sd_module_content:nth-child(1) .sd_module_children {
+  background: rgb(232, 141, 105);
+}
+.sd_module_content:nth-child(2) .sd_module_children {
+  background: rgb(87, 156, 238);
+}
+.sd_module_content:nth-child(3) .sd_module_children {
+  background: rgb(112, 221, 232);
+}
+.sd_module_children {
+  width: 100%;
+  height: 130px;
+  position: relative;
+  border-radius: 5px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.sd_module_children .s {
+  position: absolute;
+  font-size: 16px;
+  top: 10px;
+  left: 10px;
+}
+.sd_module_children .s2 span {
+  font-size: 45px;
+  margin-right: 3px;
+}
+
+.sd_module_count {
+  font-size: 18px;
+  margin: 20px 0 0 0;
+}
+.sd_module_count {
+  display: flex;
+  align-items: center;
+}
+.sd_module_count span:nth-child(1) {
+  width: 100px;
+  text-align: right;
+}
+.sd_module_count span:nth-child(2) {
+  width: 100px;
+  text-align: center;
+  color: rgb(214, 132, 150);
+}
+.sd_module_data {
+  height: 700px;
+  width: 100%;
+}
+
+.sd_person_data {
+  height: 500px;
+  width: 100%;
+  display: flex;
+}
+.sd_person_button {
+  font-size: 16px;
+  display: flex;
+}
+
+.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);
+}
+</style>

+ 1801 - 0
src/components/components/worksDetail2.vue

@@ -0,0 +1,1801 @@
+<template>
+  <div class="pb_content" style="background: unset">
+    <div
+      class="pb_content_body"
+      style="
+        background: #fff;
+        padding: 25px 0 0;
+        box-sizing: border-box;
+        border-radius: 5px;
+      "
+    >
+      <div class="student_head">
+        <div class="student_search">
+          <div>课程筛选</div>
+          <div style="display: flex; width: 90%">
+            <!-- <el-select
+              class="r_select"
+              v-model="uname"
+              placeholder="请选择学生"
+              @change="searchWork2"
+            >
+              <el-option label="所有学生" value></el-option>
+              <el-option
+                v-for="item in userAarray"
+                :key="item.userid"
+                :label="item.username"
+                :value="item.userid"
+              ></el-option>
+            </el-select> -->
+            <el-select
+              v-model="chooseDy"
+              placeholder="请选择阶段"
+              @change="searchWork1"
+            >
+              <el-option label="所有阶段" value></el-option>
+              <el-option
+                v-for="(item, index) in dyList"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+            <el-select
+              v-model="chooseTask"
+              placeholder="请选择任务"
+              @change="searchWork2"
+            >
+              <el-option label="所有任务" value></el-option>
+              <el-option
+                v-for="(item, index) in dyList[chooseDy]
+                  ? dyList[chooseDy].taskList
+                  : []"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pb_content_body">
+      <div class="student_table">
+        <el-table
+          ref="table"
+          :data="tableData"
+          border
+          :height="tableHeight"
+          :fit="true"
+          v-loading="isLoading"
+          style="width: 100%"
+          :header-cell-style="{ background: '#f1f1f1' }"
+          :row-class-name="tableRowClassName"
+          stripe
+        >
+          <el-table-column
+            prop="sName"
+            label="姓名"
+            min-width="15"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="class"
+            label="班级"
+            min-width="20"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <div>{{ scope.row.class ? scope.row.class : "暂无班级" }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="course"
+            label="项目"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            prop="course"
+            label="阶段"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <div>
+                {{ dyList.length > 0 ? dyList[scope.row.stage].name : "" }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="course"
+            label="任务"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <div>
+                {{
+                  dyList.length > 0
+                    ? dyList[scope.row.stage].taskList[scope.row.task].name
+                    : ""
+                }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="time"
+            label="时间"
+            width="100px"
+            align="center"
+          ></el-table-column>
+          <el-table-column label="操作" width="200px" align="center">
+            <template slot-scope="scope">
+              <el-button
+                style="text-align: center"
+                type="primary"
+                size="small"
+                @click="
+                  lookWork(
+                    scope.row.id,
+                    scope.row.userid,
+                    scope.row.stage,
+                    scope.row.task
+                  )
+                "
+                >查看作业</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-dialog
+          title="查看作业"
+          :visible.sync="dialogVisible3"
+          :append-to-body="true"
+          :before-close="handleClose"
+          width="800px"
+          class="dialog_diy2"
+        >
+          <div class="zyBoxC">
+            <div class="courseTitle" v-if="sInfo.course">
+              <div class="course_t">
+                <span>
+                  {{
+                    "第" +
+                    (sInfo.stage + 1) +
+                    "阶段 " +
+                    dyList[sInfo.stage].name
+                  }}
+                </span>
+                <!-- <span>{{ "任务"+(sInfo.task + 1)+' ' + dyList[sInfo.stage].taskList[sInfo.task].name }}</span> -->
+              </div>
+              <span>
+                {{
+                  "任务" +
+                  (sInfo.task + 1) +
+                  " " +
+                  dyList[sInfo.stage].taskList[sInfo.task].name
+                }}-{{ sInfo.sName }}
+              </span>
+              <!-- <span v-if="item.askJson" @click="checkAsk(item.askJson)">查看问卷</span> -->
+            </div>
+            <div class="zyBox">
+              <div class="left">
+                <div class="left_top">
+                  <div
+                    class="bigImg"
+                    v-if="worksDetail.img && worksDetail.img.length"
+                  >
+                    <img :src="worksDetail.img[worksDetail.imgIndex].src" alt />
+                  </div>
+                  <div
+                    class="thumbnail"
+                    v-if="worksDetail.img && worksDetail.img.length"
+                  >
+                    <div
+                      v-for="(item, index) in worksDetail.img"
+                      :key="index"
+                      :class="worksDetail.imgIndex == index ? 'isClick' : ''"
+                    >
+                      <img
+                        :src="item.src"
+                        alt
+                        @click="worksDetail.imgIndex = index"
+                      />
+                    </div>
+                  </div>
+                  <div class="work_nopicture" v-else>暂无上传截图</div>
+                </div>
+                <div class="left_bottom">
+                  <!-- <div
+                    class="task_title"
+                    v-if="sInfo.course"
+                  >{{ "任务"+(sInfo.task + 1)+' ' + dyList[sInfo.stage].taskList[sInfo.task].name }}</div>-->
+                  <div class="ask_Answer" v-if="worksDetail.askInfo">
+                    <div class="ask_Answer_title">问卷调查</div>
+                    <div
+                      class="ask_Answer_content"
+                      v-if="!worksDetail.askInfo.length"
+                    >
+                      暂无提交问卷
+                    </div>
+                    <div class="ask_body" v-else>
+                      <div
+                        v-for="(item, index) in worksDetail.askInfo"
+                        :key="index"
+                      >
+                        <span>
+                          问卷-
+                          {{ item.askTitle }}
+                        </span>
+                        <span class="btn" @click="checkAsk(item)">查看</span>
+                        <!-- <span
+                          style="margin-left:10px"
+                        >{{item.time}}</span>-->
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div style="width: 50%; margin-right: 10px">
+                <div
+                  class="sd_score"
+                  style="box-sizing: border-box; width: 100%; box-shadow: none"
+                >
+                  <div class="title" style="margin-bottom: 10px">
+                    <span style="font-size: 18px; width: unset; display: unset"
+                      >量规评分</span
+                    >
+                  </div>
+                  <div
+                    class="score_box"
+                    v-for="(item, index) in worksDetail.eList"
+                    :key="index"
+                  >
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      :content="item.value"
+                      placement="top-start"
+                    >
+                      <span>{{ item.value }}</span>
+                    </el-tooltip>
+                    <el-rate
+                      class="rate_size"
+                      style="min-width: 120px"
+                      v-model="worksDetail.rateList[item.value]"
+                      disabled
+                    ></el-rate>
+                  </div>
+                  <!-- <div class="score_box">
+                    <span>意识能力</span>
+                    <el-rate></el-rate>
+                  </div>
+                  <div class="score_box">
+                    <span>科学探究能力</span>
+                    <el-rate></el-rate>
+                  </div>
+                  <div class="score_box">
+                    <span>实践创新能力</span>
+                    <el-rate></el-rate>
+                  </div>
+                  <div class="score_box">
+                    <span>学习反思能力</span>
+                    <el-rate></el-rate>
+                  </div>
+                  <div class="score_box">
+                    <span>工程思维能力</span>
+                    <el-rate></el-rate>
+                  </div>-->
+                </div>
+                <div class="data_body">
+                  <div class="title">
+                    <span style="font-size: 18px">雷达图</span>
+                  </div>
+                  <div style="width: 100%">
+                    <!-- <img src="../../../assets/dataimage/1.png" style="width:90%" /> -->
+                    <div
+                      class="echart charts_canvas"
+                      style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+              <div class="right">
+                <div class="comment" v-if="worksDetail.answerInfo">
+                  <div class="comment_title">问答</div>
+                  <div
+                    class="other_Answer"
+                    v-if="!worksDetail.answerInfo.length"
+                  >
+                    暂无提交问答
+                  </div>
+                  <div class="comment_body" v-else>
+                    <div
+                      class="answer_body"
+                      v-for="(item, index) in worksDetail.answerInfo"
+                      :key="index"
+                    >
+                      <div class="answer_title">
+                        <span>提问:</span>
+                        {{ item.answerTitle }}
+                      </div>
+                      <div class="answer_content" v-html="item.answer"></div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  v-if="false"
+                  class="lastTop"
+                  style="
+                    width: 100%;
+                    padding: 5px 0px 0px;
+                    box-sizing: border-box;
+                    height: 225px;
+                    margin-top: 10px;
+                    box-shadow: none;
+                  "
+                >
+                  <div class="moreSay">更多评价</div>
+                  <div class="more_say_input" v-if="worksDetail.rateList">
+                    <el-input
+                      type="textarea"
+                      placeholder="还有要说的吗..."
+                      :rows="8"
+                      resize="none"
+                      style="background: #fafafa"
+                      v-model="worksDetail.rateList.content"
+                    ></el-input>
+                  </div>
+                </div>
+              </div>
+              <!-- <div class="rbButtom" @click="giveScore">评分</div> -->
+              <!-- @click="updateWorks(item.id, item.rate, index)" -->
+              <!-- <div class="rbButtom" @click="updateWorks()">评分</div> -->
+            </div>
+          </div>
+        </el-dialog>
+      </div>
+      <div class="student_page">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :page-size="10"
+          :total="total"
+          v-if="page"
+          @current-change="handleCurrentChange"
+        ></el-pagination>
+      </div>
+    </div>
+    <el-dialog :visible.sync="pictureDialog" size="tiny">
+      <img width="100%" :src="dialogImageUrl" alt />
+    </el-dialog>
+    <el-dialog
+      title="项目评分"
+      :visible.sync="dataVisible"
+      :append-to-body="true"
+      width="1100px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div>
+        <div class="a_addBox2">
+          <StudentData :studentInfo="studentInfo"></StudentData>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dataVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="查看问卷调查"
+      :visible.sync="dialogVisible4"
+      :append-to-body="true"
+      width="800px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div>
+        <div
+          class="a_add_title"
+          style="
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+          "
+        >
+          <div style="font-size: 20px">{{ askJson.askTitle }}</div>
+        </div>
+        <div class="a_addBox">
+          <div style="font-size: 16px; color: #c7c7c7">问卷内容</div>
+          <div
+            class="a_add_box"
+            v-for="(item, index) in askJson.askJson"
+            :key="index"
+          >
+            <div class="a_add_head">
+              <div style="display: flex">
+                {{ index + 1 + "、" }}
+                <div>问卷题目:{{ item.askstitle }}</div>
+              </div>
+            </div>
+            <div class="a_add_body">
+              <div class="a_add_input">
+                <el-radio-group v-model="askJson.radio[index]">
+                  <el-radio
+                    v-for="(item3, checkIndex1) in item.checkList"
+                    :key="checkIndex1"
+                    :label="checkIndex1"
+                    class="redioStyle"
+                    disabled
+                    >{{ item3 }}</el-radio
+                  >
+                </el-radio-group>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible4 = false"
+          >关 闭</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import StudentData from "./studentData";
+import htmlDocx from "html-docx-js/dist/html-docx";
+import saveAs from "file-saver";
+export default {
+  components: {
+    StudentData,
+  },
+  props: ["cid", "uid", "ooid"],
+  data() {
+    return {
+      tableHeight: "500px",
+      isLoading: false,
+      id: this.cid,
+      userid: this.uid,
+      formLabelWidth: "100px",
+      dialogImageUrl: "",
+      pictureDialog: false,
+      dialogVisible: false,
+      dialogVisible1: false,
+      dialogVisible2: false,
+      dialogVisible3: false,
+      dialogVisible4: false,
+      dataVisible: false,
+      studentInfo: {},
+      courseByUser: "诗词中的植物",
+      userName: "林点",
+      answerName: "宿赞公房",
+      studentAnswer: "雨荒深院菊,霜倒半池莲.唐杜甫《宿赞公房》",
+      commentCount: 0,
+      publicIndex: 0,
+      playerOptions: {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
+        fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目   || "video/ogg"|| "video/webm"
+            src: "", //url地址require("../../../assets/media/aaa.mp4")
+          },
+        ],
+        // poster: require("../../../assets/tu31.png"), //你的封面地址
+        // poster: dataRes.imgUrl, //你的封面地址
+        notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true, //当前时间和持续时间的分隔符
+          durationDisplay: true, //显示持续时间
+          remainingTimeDisplay: false, //是否显示剩余时间功能
+          fullscreenToggle: true, //全屏按钮
+        },
+      },
+      playerO: {},
+      commentName: "谭子松",
+      commentTime: "2021/2/5",
+      commentAnswer:
+        "作为家长我很高兴看到孩子的进步,希望这个进步只是一个开始,在新学期能够继续延续,这样才能不负老师的期望",
+      tableData: [],
+      uploadBoolean: false,
+      studentMessage: [],
+      subject: "",
+      sClass: "",
+      chooseDy: "",
+      uname: "",
+      chooseTask: "",
+      subjectJuri: [],
+      projectJuri: [],
+      mr: require("../../assets/icon/wheel.png"),
+      tx: require("../../assets/avatar.png"),
+      projectchoose: "",
+      scopeId: "",
+      thumbnail: [],
+      rateList: {
+        ca: 0,
+        sia: 0,
+        eta: 0,
+        pia: 0,
+        lra: 0,
+        content: "",
+      },
+      rateParams: [],
+      page: 1,
+      total: 0,
+      worksDetail: [],
+      suserId: "",
+      sInfo: {},
+      chapInfo: [],
+      vedio: [],
+      file: [],
+      tType: 0,
+      chartObj: null,
+      ooption: [
+        { value: 0, name: "意识能力" },
+        { value: 0, name: "科学探究能力" },
+        { value: 0, name: "实践创新能力" },
+        { value: 0, name: "学习反思能力" },
+        { value: 0, name: "工程思维能力" },
+      ],
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            name: "量规评分",
+            type: "pie",
+            radius: "70%",
+            center: ["50%", "50%"],
+            data: [
+              { value: 0, name: "意识能力" },
+              { value: 0, name: "科学探究能力" },
+              { value: 0, name: "实践创新能力" },
+              { value: 0, name: "学习房媳能力" },
+              { value: 0, name: "工程思维能力" },
+            ],
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+              normal: {
+                label: {
+                  show: true,
+                  formatter: "{d}%",
+                  inside: true,
+                  position: "inner",
+                },
+                labelLine: { show: false },
+              },
+            },
+          },
+        ],
+      },
+      // 雷达图的数据
+      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",
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+      askJson: {},
+      dyList: [],
+      userAarray: [],
+    };
+  },
+  mounted() {
+    this.$nextTick(function () {
+      this.tableHeight =
+        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
+      if (this.tableHeight <= 530) {
+        this.tableHeight = 530;
+      }
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function () {
+        self.tableHeight =
+          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
+        if (self.tableHeight <= 530) {
+          self.tableHeight = 530;
+        }
+      };
+    });
+  },
+  methods: {
+    lookData(uid) {
+      let params = {
+        uid: uid,
+        cid: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectWorksDetail", params)
+        .then((res) => {
+          this.studentInfo = res.data[0][0];
+          this.dataVisible = true;
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    handleClose(done) {
+      done();
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getWorks();
+    },
+    lookWork(id, uid, stage, task) {
+      // this.scopeId = id;
+      let params = {
+        uid: uid,
+        cid: this.id,
+        stage: stage,
+        task: task,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectWorksDetail2", params)
+        .then((res) => {
+          this.sInfo = res.data[0][0];
+          this.chapInfo = JSON.parse(res.data[0][0].chapters);
+          var chapters = JSON.parse(res.data[0][0].chapters);
+          var worksDetail = res.data[1];
+          // var askArray = res.data[2];
+          this.scopeId = res.data[2].length ? res.data[2][0].id : this.sInfo.id;
+          var askInfo = res.data[3];
+          var answerInfo = res.data[4];
+          var workJson = {
+            img: [],
+            imgIndex: 0,
+            eList: [],
+            rateList: {},
+            askInfo: [],
+            answerInfo: [],
+          };
+          var eList =
+            chapters[this.sInfo.stage].chapterInfo[0].taskJson[this.sInfo.task]
+              .eList;
+          //           ooption: [
+          //   { value: 0, name: "意识能力" },
+          //   { value: 0, name: "科学探究能力" },
+          //   { value: 0, name: "实践创新能力" },
+          //   { value: 0, name: "学习反思能力" },
+          //   { value: 0, name: "工程思维能力" },
+          // ],
+          var _ooption = [];
+          if (eList) {
+            workJson.eList = eList;
+            for (var i = 0; i < eList.length; i++) {
+              _ooption.push({ value: 0, name: eList[i].value });
+              workJson.rateList[eList[i].value] = 0;
+            }
+            workJson.rateList.content = "";
+            this.ooption = _ooption;
+          } else {
+            workJson.eList = [
+              { value: "意识能力", detail: "", score: 5 },
+              { value: "科学探究能力", detail: "", score: 5 },
+              { value: "实践创新能力", detail: "", score: 5 },
+              { value: "学习反思能力", detail: "", score: 5 },
+              { value: "工程思维能力", detail: "", score: 5 },
+            ];
+            for (var i = 0; i < workJson.eList.length; i++) {
+              _ooption.push({ value: 0, name: workJson.eList[i].value });
+              workJson.rateList[workJson.eList[i].value] = 0;
+            }
+            workJson.rateList.content = "";
+            this.ooption = [
+              { value: 0, name: "意识能力" },
+              { value: 0, name: "科学探究能力" },
+              { value: 0, name: "实践创新能力" },
+              { value: 0, name: "学习反思能力" },
+              { value: 0, name: "工程思维能力" },
+            ];
+          }
+          if (this.sInfo.rate) {
+            var _rate = JSON.parse(this.sInfo.rate);
+            var _rateList = Object.keys(JSON.parse(this.sInfo.rate));
+            for (var i = 0; i < _rateList.length; i++) {
+              var _c = Object.keys(workJson.rateList);
+              if (_c.indexOf(_rateList[i]) != -1) {
+                workJson.rateList[_rateList[i]] = _rate[_rateList[i]];
+              }
+            }
+            for (var i = 0; i < this.ooption.length; i++) {
+              if (_rateList.indexOf(this.ooption[i].name) != -1) {
+                this.ooption[i].value = _rate[this.ooption[i].name];
+              }
+            }
+          }
+
+          for (var i = 0; i < worksDetail.length; i++) {
+            workJson.img.push({ src: worksDetail[i].content, id: i });
+          }
+          for (var i = 0; i < askInfo.length; i++) {
+            const element = askInfo[i];
+            let a = JSON.parse(element.content)[0];
+            let b = a.anwer.split(",");
+            let c = [];
+            for (var j = 0; j < b.length; j++) {
+              c.push(parseInt(b[j]));
+            }
+            a.askJson.radio = c;
+            a.askJson.time = element.time;
+            workJson.askInfo.push(a.askJson);
+          }
+
+          for (var i = 0; i < answerInfo.length; i++) {
+            const element = answerInfo[i];
+            workJson.answerInfo.push(JSON.parse(element.content)[0]);
+          }
+
+          this.worksDetail = workJson;
+
+          this.courseDetail = res.data[0][0];
+
+          this.$forceUpdate;
+          this.dialogVisible3 = true;
+
+          setTimeout(() => {
+            var _ooption = JSON.parse(JSON.stringify(this.ooption));
+            // var _option = JSON.parse(JSON.stringify(this.option));
+            // var _option = JSON.parse(JSON.stringify(this.radarOption));
+            var _option = this.radarOption;
+            _option.radar.indicator = [];
+            _option.series[0].data[0].value = [];
+            for (var i = 0; i < _ooption.length; i++) {
+              _option.radar.indicator.push({ name: _ooption[i].name, max: 5 });
+              _option.series[0].data[0].value.push(_ooption[i].value);
+            }
+            console.log(_option);
+            if (this.chartObj) {
+              // _option.series[0].data = _ooption;
+              this.chartObj.setOption(_option);
+            } else {
+              // _option.series[0].data = _ooption;
+              this.setChart(_option);
+            }
+            // this.setChart(this.option);
+          }, 0);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    checkAsk(askJson) {
+      this.askJson = askJson;
+      this.dialogVisible4 = true;
+    },
+    setChart(option) {
+      let _this = this;
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        console.log(_this.option);
+
+        const chartObj = _this.$echarts.init(
+          //劳动课程
+          // _this.$el.querySelector("#charts_canvas")
+          document.getElementsByClassName("charts_canvas")[0]
+        );
+        // 初始化雷达图
+        _this.chartObj = chartObj;
+        _this.chartObj.setOption(option);
+      });
+    },
+    giveScore() {
+      this.rateList = this.chapInfo[this.publicIndex].rate;
+      this.dialogVisible2 = true;
+    },
+    //获取分组分类
+    getGroup() {
+      let params = {};
+      this.ajax
+        .get(this.$store.state.api + "getGroup", params)
+        .then((res) => {
+          this.subjectJuri = res.data[0];
+          this.projectJuri = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    searchWork1() {
+      this.page = 1;
+      this.chooseTask = "";
+      this.getWorks();
+    },
+    searchWork2() {
+      this.page = 1;
+      this.getWorks();
+    },
+    //获取作业
+    getWorks() {
+      this.isLoading = true;
+      var mr = this.mr;
+      let params = {
+        cid: this.id,
+        uname: this.userid,
+        stage: this.chooseDy,
+        task: this.chooseTask,
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getCourseWorks2", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.tableData = res.data[0];
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    getCourseDetail() {
+      let params = {
+        cid: this.cid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getCourseWorksReport", params)
+        .then((res) => {
+          this.course = res.data[0][0];
+          var dyJSON = JSON.parse(res.data[0][0].chapters);
+          let dyList = [];
+          for (var i = 0; i < dyJSON.length; i++) {
+            dyList.push({ name: dyJSON[i].dyName, id: i, taskList: [] });
+            var a = dyJSON[i].chapterInfo[0].taskJson;
+            for (var j = 0; j < a.length; j++) {
+              dyList[i].taskList.push({ name: a[j].task, id: j });
+            }
+          }
+          this.dyList = dyList;
+          this.userAarray = res.data[1];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    // getCourseDetail() {
+    //   const loading = this.$loading.service({
+    //     background: "rgba(255, 255, 255, 0.7)",
+    //     target: document.querySelector(".student_table"),
+    //   });
+    //   console.log(this.id);
+    //   let params = {
+    //     courseId: this.id,
+    //   };
+    //   this.ajax
+    //     .get(this.$store.state.api + "selectCourseDetail", params)
+    //     .then((res) => {
+    //       loading.close();
+    //       // this.chapInfo = JSON.parse(res.data[0][0].chapters);
+    //       var dyJSON = JSON.parse(res.data[0][0].chapters);
+    //       let dyList = [];
+    //       for (var i = 0; i < dyJSON.length; i++) {
+    //         dyList.push({ name: dyJSON[i].dyName, id: i, taskList: [] });
+    //         var a = dyJSON[i].chapterInfo[0].taskJson;
+    //         for (var j = 0; j < a.length; j++) {
+    //           dyList[i].taskList.push({ name: a[j].task, id: j });
+    //         }
+    //       }
+    //       console.log(dyList);
+    //       this.dyList = dyList;
+    //       // var dyJSON = JSON.parse()
+    //     })
+    //     .catch((err) => {
+    //       loading.close();
+    //       console.error(err);
+    //     });
+    // },
+    handlePictureCardPreview(url) {
+      this.dialogImageUrl = url;
+      this.pictureDialog = true;
+    },
+    updateWorks() {
+      let params = {
+        rate: this.worksDetail.rateList,
+        tuid: this.userid,
+        id: this.scopeId,
+      };
+      this.ajax
+        .get(this.$store.state.api + "updateWorks", params)
+        .then((res) => {
+          this.$message({
+            message: "评价成功",
+            type: "success",
+          });
+          var _ooption = JSON.parse(JSON.stringify(this.ooption));
+          // var _option = JSON.parse(JSON.stringify(this.option));
+
+          var _rate = this.worksDetail.rateList;
+          var _rateList = Object.keys(this.worksDetail.rateList);
+          for (var i = 0; i < _ooption.length; i++) {
+            if (_rateList.indexOf(_ooption[i].name) != -1) {
+              _ooption[i].value = _rate[_ooption[i].name];
+            }
+          }
+
+          // var _option = JSON.parse(JSON.stringify(this.radarOption));
+          var _option = this.radarOption;
+          _option.radar.indicator = [];
+          _option.series[0].data[0].value = [];
+          for (var i = 0; i < _ooption.length; i++) {
+            _option.radar.indicator.push({ name: _ooption[i].name, max: 5 });
+            _option.series[0].data[0].value.push(_ooption[i].value);
+          }
+          console.log(_option);
+          if (this.chartObj) {
+            // _option.series[0].data = _ooption;
+            this.chartObj.setOption(_option);
+          } else {
+            this.setChart(_ooption);
+          }
+          // this.uploadBoolean = false;
+          // this.dialogVisible2 = false;
+        })
+        .catch((err) => {
+          this.$message.error("评价失败");
+          console.error(err);
+        });
+    },
+    switchVideo(media, index) {
+      this.playerO = {};
+      this.playerOptions.poster = "";
+      this.playerOptions.sources[0].src = media;
+      this.playerO = this.playerOptions;
+    },
+    onPlayerPlay() {},
+    // this.$store.commit("update", ["userInfo", userInfo]);
+    async generate(a) {
+      // 将html文件中需要用到的数据挂载到store上
+      this.$store.commit("update", ["report", a]);
+      console.log(this.$store.state.report);
+      const content = `<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta http-equiv="X-UA-Compatible" content="IE=edge">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>报告</title>
+      </head>
+      <body>
+      ${this.$store.state.report}
+      </body>
+      </html>`;
+      // debugger
+      //生成报告
+      // const link = document.createElement("a");
+      // link.download = "报告.html"; // 文件名
+      // link.style.display = "none";
+      // // 创建文件流
+      // // 创建bolb实例时,内容一定要放在[]中
+      // const blob = new Blob([content], {
+      //   type: "text/plain;charset='utf-8'",
+      // });
+      // link.href = window.URL.createObjectURL(blob);
+      // document.body.appendChild(link);
+      // link.click();
+      // document.body.removeChild(link);
+      saveAs(
+        htmlDocx.asBlob(content, {
+          orientation: "landscape", //跨域设置
+        }),
+        //文件名
+        "报告.doc"
+      );
+    },
+  },
+  created() {
+    this.page = 1;
+    this.getCourseDetail();
+    this.getGroup();
+    this.getWorks();
+  },
+};
+</script>
+
+<style scoped>
+.pb_head > span:nth-child(2) {
+  font-size: 16px;
+  margin-left: 80px;
+  color: #ab582f;
+}
+.pb_head {
+  margin: 0 !important;
+  width: 100% !important;
+}
+.student_page {
+  margin-top: 10px;
+}
+.student_head {
+  margin-top: 10px;
+  padding-bottom: 15px;
+}
+.student_search {
+  display: flex;
+}
+.student_search > div:nth-child(1) {
+  line-height: 35px;
+  font-size: 14px;
+}
+.student_search >>> .el-input__inner {
+  width: 190px;
+  height: 35px;
+  margin-left: 10px;
+}
+.student_table >>> .el-table--border td {
+  border-right: 0px !important;
+}
+.add_work >>> .el-dialog__header {
+  padding: 20px 20px 10px;
+  text-align: center;
+  background: #32455b;
+}
+.add_work >>> .el-dialog__title {
+  font-size: 14px !important;
+  color: #fff !important;
+}
+.add_work >>> .el-dialog__headerbtn {
+  font-size: 20px !important;
+  top: 5px !important;
+  right: 8px !important;
+}
+.add_work >>> .el-form-item__label {
+  margin-left: 65px;
+}
+.add_work >>> .el-form-item {
+  display: flex;
+}
+.add_work >>> .el-form-item__content {
+  margin: 0 !important;
+}
+.add_work >>> .el-dialog__footer {
+  text-align: center !important;
+}
+.add_work >>> .el-dialog {
+  min-width: 650px !important;
+  width: 1080px;
+}
+.add_work >>> .el-dialog__body {
+  background: #fff;
+  height: 660px;
+  overflow: auto;
+}
+.header-title {
+  display: flex;
+}
+.logoImg {
+  width: 30px;
+}
+.logoImg > img {
+  width: 100%;
+  height: 100%;
+}
+.title_add_student {
+  margin: 0 auto;
+  color: #fff;
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #eee;
+}
+.top > div:nth-child(1) {
+  font-size: 18px;
+}
+.top > div:nth-child(2) {
+  font-size: 14px;
+  line-height: 28px;
+}
+.first {
+  margin-top: 25px;
+  border-bottom: 1px solid #c5c5c5;
+}
+.one_top {
+  display: flex;
+  justify-content: space-between;
+}
+.one_top > div:nth-child(1) {
+  color: #2490bf;
+  font-size: 16px;
+}
+.one_top > button {
+  width: 100px;
+  background: #24a0a4;
+  height: 30px;
+  color: #e0e0e0;
+  font-size: 13px;
+  padding: 0 !important;
+}
+.work_Img {
+  width: 150px;
+  margin: 10px 0;
+}
+.assess_Img {
+  width: 400px;
+  margin: 0 auto;
+  padding: 15px 0;
+}
+.work_Img > img,
+.assess_Img > img {
+  width: 100%;
+  height: 100%;
+}
+.work_input {
+  border: 1px solid;
+  width: 135px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 13px;
+  padding: 5px;
+}
+.poetry {
+  margin: 10px 0 15px 0;
+}
+.assess {
+  background: #169bd5 !important;
+}
+.assess_top {
+  border-bottom: 2px solid #eee;
+  padding-bottom: 10px;
+}
+.assess_top > div:nth-child(1) {
+  color: #2490bf;
+  font-size: 16px;
+}
+.student_Answer {
+  display: flex;
+  margin: 5px 10px;
+  /* padding-bottom: 25px; */
+}
+.workName {
+  font-size: 18px;
+  font-weight: bold;
+  margin: 5px 10px;
+}
+.toux {
+  width: 35px;
+  /* margin: auto 0; */
+  height: 35px;
+}
+.toux > img {
+  width: 100%;
+  height: 100%;
+}
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  flex-direction: column;
+}
+.studentName {
+  margin-left: 10px;
+  font-size: 13px;
+}
+.studentAnswer {
+  font-size: 12px;
+  margin: 5px 0 0 10px;
+  height: 42px;
+  overflow: auto;
+}
+.comment {
+  /* margin: 20px 0 0 10px;
+  overflow: auto;
+  height: 75%;
+  max-height: 330px; */
+  overflow: auto;
+  /* height: 290px; */
+  height: 525px;
+  background: #fff;
+  border-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.comment_body {
+  height: calc(100% - 25px);
+  overflow: auto;
+}
+.comment > .comment_title {
+  font-size: 18px;
+}
+.comment > .comment_title > span {
+  font-size: 14px;
+}
+.other_Answer {
+  display: flex;
+  margin: 5px 10px;
+  padding: 15px 0;
+  justify-content: center;
+}
+.nav {
+  margin-left: 5px;
+  width: 80%;
+}
+.nameAndTime {
+  display: flex;
+}
+.otherName {
+  font-weight: bold;
+  margin-left: 10px;
+  font-size: 13px;
+}
+.time {
+  margin-left: 25px;
+  font-size: 12px;
+  margin-top: 3px;
+}
+.otherAnswer {
+  width: 80%;
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow: hidden;
+  font-size: 12px;
+  margin: 5px 0 0 10px;
+}
+.doingAssess {
+  margin: 0 auto;
+  width: 300px;
+  background: #169bd5;
+  height: 35px;
+  line-height: 35px;
+  border-radius: 3px;
+  font-size: 13px;
+  text-align: center;
+  color: #fff;
+  margin-top: 30px;
+  cursor: pointer;
+}
+.score_top {
+  display: flex;
+  margin-bottom: 10px;
+}
+.userTou {
+  width: 50px;
+}
+.userTou > img {
+  width: 100%;
+  height: 100%;
+}
+.score_user_name {
+  line-height: 53px;
+  margin-left: 15px;
+}
+.course_top {
+  display: flex;
+  align-items: center;
+}
+.course_top > div:nth-child(1) {
+  line-height: 25px;
+}
+.course_top > div:nth-child(2) {
+  border: 1px solid #ccc;
+  width: 250px;
+  text-align: center;
+  height: 25px;
+  line-height: 25px;
+  margin-left: 30px;
+}
+.sd_score {
+  font-size: 15px;
+  background: #fff;
+  padding: 18px 15px 1px;
+  margin-bottom: 15px;
+  border-radius: 5px;
+  width: 90%;
+  box-shadow: 2px 2px 5px #909090;
+  height: 238px;
+  overflow: auto;
+}
+.sd_score .score_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 15px;
+  /* margin-left: 30px; */
+}
+.sd_score .score_box:last-child {
+  margin-bottom: 0;
+}
+
+.rate_size >>> .el-rate__icon {
+  font-size: 25px;
+}
+.rate_size >>> .el-icon-star-off {
+  font-size: 22px;
+}
+.sd_score span {
+  width: 130px;
+  text-align: justify;
+  text-align-last: justify;
+  display: block;
+  margin-right: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 16px;
+}
+.moreSay {
+  margin: 0px 0 5px 20px;
+}
+.more_say_input {
+  margin-left: 20px;
+  width: 80%;
+}
+.more_say_input >>> .el-input__inner {
+  height: 75px;
+  font-size: 13px;
+  padding: 0 0 0 10px;
+}
+.assess_right {
+  width: 200px;
+  background: #82b0ee;
+  color: #fff;
+  text-align: center;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 5px;
+  margin: 0 auto;
+  margin-top: 20px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.student_page {
+  margin-top: 10px;
+}
+.display {
+  display: none;
+}
+
+.firstTop {
+  background: #fff;
+  display: flex;
+  margin-bottom: 15px;
+  flex-direction: column;
+  align-items: flex-start;
+  height: 90px;
+  padding: 10px 25px;
+  border-radius: 5px;
+  width: 90%;
+  box-shadow: 2px 2px 5px #909090;
+}
+
+.talkScore >>> .el-dialog__body {
+  background: #efefef;
+  margin: 0 !important;
+}
+
+.lastTop {
+  background: #fff;
+  border-radius: 5px;
+  width: 98%;
+  height: 120px;
+  box-shadow: 2px 2px 5px #909090;
+}
+
+.left,
+.right {
+  /* background: #fff; */
+  border-radius: 5px;
+  /* padding: 10px; */
+  box-sizing: border-box;
+}
+
+.left {
+  margin-right: 10px;
+  width: 30%;
+  min-height: 425px;
+}
+.left .left_top {
+  background: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 15px;
+}
+.left .left_bottom {
+  background: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  height: 160px;
+}
+.right {
+  width: 20%;
+  background: none;
+  padding: 0;
+}
+
+.courseTitle {
+  font-size: 16px;
+  font-weight: 600;
+  width: 100%;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.course_t {
+  font-size: 19px;
+  display: flex;
+  align-items: flex-end;
+}
+.course_t span:nth-child(2) {
+  font-size: 16px;
+  margin-left: 10px;
+}
+
+.courseTitle span:nth-child(2) {
+  /* font-size: 14px;
+  cursor: pointer; */
+}
+
+.bigImg {
+  margin-top: 10px;
+  /* height: 300px; */
+  height: 268px;
+}
+
+.bigImg > img,
+.thumbnail > div > img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.thumbnail {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin: 10px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.isClick {
+  border: 3px solid #5f89d4;
+  border-radius: 5px;
+}
+
+.thumbnail > div {
+  width: 80px;
+  height: 80px;
+  margin-right: 5px;
+  cursor: pointer;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.zyBoxC {
+  background: #ededed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0px;
+  flex-direction: column;
+}
+
+.zyBox {
+  display: flex;
+  width: 100%;
+  position: relative;
+}
+
+.zyBoxC + .zyBoxC {
+  margin-top: 10px;
+}
+.rbButtom {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: #06a7ff;
+  width: 100px;
+  height: 30px;
+  border-radius: 5px;
+  text-align: center;
+  color: #fff;
+  line-height: 30px;
+  font-size: 14px;
+  cursor: pointer;
+  right: 10px;
+}
+
+.bigImg >>> .vjs-tech,
+.bigImg >>> .video-js {
+  height: 300px !important;
+}
+
+.el-table >>> .even_row {
+  background-color: #f1f1f1;
+}
+
+.data_body {
+  height: 340px;
+  display: flex;
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  /* margin: 10px auto; */
+  box-sizing: border-box;
+  padding: 10px;
+  width: 100%;
+  background: #fff;
+}
+.data_body .title {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+
+.dialog_diy >>> .el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 14px;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #fafafa;
+}
+
+.dialog_diy2 >>> .el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+.dialog_diy2 >>> .el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+.dialog_diy2 >>> .el-dialog__headerbtn {
+  top: 14px;
+}
+.dialog_diy2 >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+.dialog_diy2 >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+.dialog_diy2 >>> .el-dialog__body,
+.dialog_diy2 >>> .el-dialog__footer {
+  background: #ededed;
+  padding: 15px 20px;
+}
+.a_addBox2 {
+  margin: 10px 0;
+  background: #fff;
+  padding: 15px;
+}
+.a_addBox {
+  margin: 10px 0;
+  background: #fff;
+  padding: 15px;
+  max-height: 400px;
+  overflow: auto;
+}
+.a_add_box {
+  border-bottom: 2px solid #eee;
+  padding-bottom: 10px;
+}
+
+.a_add_head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px 0;
+  font-size: 18px;
+}
+.a_add_head .a_add_head_input {
+  width: 300px;
+}
+.a_add_head .a_add_head_div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.a_add_body {
+  display: flex;
+  align-items: center;
+}
+.a_add_input {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  /* flex-direction: column; */
+  /* width: 100%; */
+}
+.a_add_input >>> el-radio-group {
+  margin: 10px 0;
+}
+.redioStyle >>> .el-radio__label {
+  font-size: 18px;
+}
+.task_title {
+  font-size: 18px;
+  font-weight: 700;
+}
+.ask_Answer {
+  /* margin-top: 10px; */
+}
+.ask_Answer_title {
+  font-size: 18px;
+}
+.ask_Answer_content {
+  display: flex;
+  justify-content: center;
+  margin: 10px 0;
+}
+
+.answer_body {
+  padding: 10px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+.answer_title {
+  font-size: 15px;
+  font-weight: 700;
+}
+.answer_content {
+  margin-top: 5px;
+}
+.ask_body {
+  display: flex;
+  font-size: 16px;
+  margin-top: 10px;
+  flex-direction: column;
+  height: 130px;
+  overflow: auto;
+  /* padding: 0 10px; */
+  box-sizing: border-box;
+}
+.ask_body div {
+  /* cursor: pointer; */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ask_body div .btn {
+  cursor: pointer;
+  color: #fff;
+  background-color: #409eff;
+  text-align: center;
+  font-size: 12px;
+  padding: 6px 12px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  width: 60px;
+}
+.ask_body div span:nth-child(1) {
+  max-width: 250px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ask_body div + div {
+  margin-top: 10px;
+}
+.work_nopicture {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* height: 350px; */
+  height: 352px;
+}
+.student_table >>> .el-table,
+.student_table >>> .el-table__body-wrapper {
+  height: auto !important;
+}
+</style>

+ 32 - 19
src/components/project.vue

@@ -46,7 +46,15 @@
                     '/courseDetail?courseId=' +
                       item.courseid +
                       '&userid=' +
-                      userid + '&oid=' + oid
+                      userid +
+                      '&oid=' +
+                      oid +
+                      '&cid=' +
+                      classId +
+                      '&tType=' +
+                      tType +
+                      '&screenType=' +
+                      screenType
                   )
                 "
               >
@@ -58,7 +66,7 @@
                   "
                   alt=""
                 />
-				<!-- <img
+                <!-- <img
                   :src="
                     mpj
                   "
@@ -73,13 +81,15 @@
                       '/courseDetail?courseId=' +
                         item.courseid +
                         '&userid=' +
-                        userid + '&oid=' + oid
+                        userid +
+                        '&oid=' +
+                        oid
                     )
                   "
                 >
                   {{ item.title }}
                 </div>
-				<div style="color: #2FDB88">
+                <div style="color: #2fdb88">
                   共{{ JSON.parse(item.chapters).length }}讲
                 </div>
                 <div>
@@ -102,9 +112,12 @@ export default {
       studentMessage: [],
       tx: require("../assets/avatar.png"),
       // mpj: require("../assets/project.png"),
-      mpj:"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/noBanner1656409780264.jpg",
+      mpj: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/noBanner1656409780264.jpg",
       userid: this.$route.query.userid,
-      oid:this.$route.query.oid,
+      oid: this.$route.query.oid,
+      classId: this.$route.query.cid,
+      tType: this.$route.query.tType,
+      screenType: this.$route.query.screenType,
     };
   },
   methods: {
@@ -123,7 +136,7 @@ export default {
         .catch((err) => {
           this.isLoading = false;
           console.error(err);
-        }); 
+        });
     },
     selectMyCourse() {
       let params = {
@@ -192,24 +205,24 @@ export default {
   background: #fff;
   margin-top: 20px;
   padding: 0 0 20px;
-  min-height: 1000px;
 }
 .project {
   width: 100%;
+  height: 175px;
 }
 .project_box {
-      display: flex;
-    width: 100%;
-    flex-direction: row;
-    flex-wrap: wrap;
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 .three_box_inthis {
   display: flex;
-    width: 21%;
-    flex-direction: column;
-    align-items: flex-start;
-    border: 1px solid #ccc;
-    margin: 15px;
+  width: 30.33%;
+  flex-direction: column;
+  align-items: flex-start;
+  border: 1px solid #ccc;
+  margin: 15px 0 0 15px;
 }
 .projct_nav {
   margin-left: 5px;
@@ -223,8 +236,8 @@ export default {
   cursor: pointer;
 }
 
-.projct_nav > div{
-	margin-bottom: 5px;
+.projct_nav > div {
+  margin-bottom: 5px;
 }
 
 .myProject {

+ 158 - 78
src/components/works.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pb_content">
+  <div class="pb_content" style="background:#fff;">
     <div class="pb_content_body">
       <div class="body_student">
         <div class="student_head">
@@ -31,66 +31,84 @@
             </div>
           </div>
         </div>
-        <div class="student_body">
-          <div class="project_box">
-            <div
-              class="three_box_inthis"
-              v-for="(item, index) in myCourse"
-              :key="index"
+        <div class="student_body" v-if="!dialogVisible">
+          <div class="student_table">
+            <el-table
+              ref="table"
+              :data="tableData1"
+              border
+              :height="tableHeight"
+              :fit="true"
+              style="width: 100%"
+              :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
+              :row-class-name="tableRowClassName"
             >
-              <div class="project">
-                <!-- <img
-                  :src="
-                    item.cover != null && item.cover != ''
-                      ? JSON.parse(item.cover)[0].url
-                      : mpj
-                  "
-                  alt=""
-                /> -->
-				<img
-                  :src="
-                    mpj
-                  "
-                  alt=""
-                />
-              </div>
-              <div class="projct_nav">
-                <div style="font-size: 18px">
-                  {{ item.title }} -
-                  {{ JSON.parse(item.chapters)[item.stage].dyName }}
-                </div>
-                <div>
-                  <span style="color: #999">{{ item.createTime }}</span>
-                </div>
-                <div style="color: #999">
-                  <span>提交人:</span><span>{{ studentMessage.name }}</span>
-                </div>
-              </div>
-              <div
-                class="look_score"
-                @click="
-                  goTo(
-                    '/score?courseId=' +
-                      item.courseId +
-                      '&userid=' +
-                      userid +
-                      '&stage=' +
-                      item.stage
-                  )
-                "
-              >
-                查看评分
-              </div>
-            </div>
+              <el-table-column
+                prop="title"
+                label="项目"
+                min-width="30"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="uname"
+                label="创建人"
+                min-width="30"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="time"
+                label="时间"
+                min-width="20"
+                align="center"
+              ></el-table-column>
+              <el-table-column label="操作" min-width="30">
+                <template slot-scope="scope">
+                  <el-button
+                    type="primary"
+                    size="small"
+                    @click="getWorkData(scope.row)"
+                    >查看课程</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="student_page" style="padding: 10px 0;">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :page-size="10"
+              :total="total"
+              v-if="page"
+              @current-change="handleCurrentChange"
+            ></el-pagination>
           </div>
         </div>
       </div>
+      <div style="position: relative">
+        <div style="width: 98.5%;margin: 0 auto;">
+          <WorksDetail2
+            :cid="cid"
+            :uid="userid"
+            v-if="dialogVisible"
+          ></WorksDetail2>
+        </div>
+        <div class="cancelbox" v-if="dialogVisible">
+          <el-button @click="cancel" type="primary" size="small"
+            >返回</el-button
+          >
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import WorksDetail2 from "./components/worksDetail2";
 export default {
+  components: {
+    WorksDetail2,
+  },
   data() {
     return {
       myCourse: [],
@@ -98,12 +116,30 @@ export default {
       tx: require("../assets/avatar.png"),
       mpj: require("../assets/project.png"),
       userid: this.$route.query.userid,
+      tableData1: [],
+      tableHeight: "500px",
+      page: 1,
+      total: 0,
+      dialogVisible: false,
+      dataJson: {},
+      cid: "",
     };
   },
   methods: {
     goTo(path) {
       this.$router.push(path);
     },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getProject();
+    },
     selectSDetail() {
       let params = {
         uid: this.userid,
@@ -118,23 +154,52 @@ export default {
           console.error(err);
         });
     },
-    selectMyCourse() {
+    getProject() {
       let params = {
         uid: this.userid,
+        page: this.page,
       };
       this.ajax
-        .get(this.$store.state.api + "selectMyCourse", params)
+        .get(this.$store.state.api + "getMyProject", params)
         .then((res) => {
-          this.myCourse = res.data[0];
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.tableData1 = res.data[0];
         })
         .catch((err) => {
           console.error(err);
         });
     },
+    getWorkData(res) {
+      this.cid = res.courseid;
+      this.dialogVisible = true;
+    },
+    cancel() {
+      this.dataJson = "";
+      this.dialogVisible = false;
+    },
+  },
+  mounted() {
+    this.$nextTick(function () {
+      this.tableHeight =
+        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
+      if (this.tableHeight <= 530) {
+        this.tableHeight = 530;
+      }
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function () {
+        self.tableHeight =
+          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
+        if (self.tableHeight <= 530) {
+          self.tableHeight = 530;
+        }
+      };
+    });
   },
   created() {
+    this.page = 1;
     this.selectSDetail();
-    this.selectMyCourse();
+    this.getProject();
     document.scrollingElement.scrollTop = 0;
   },
 };
@@ -185,25 +250,24 @@ export default {
   background: #fff;
   margin-top: 20px;
   padding: 0 0 20px;
-  min-height: 1000px;
 }
 .project {
   width: 100%;
+  height: 100%;
 }
 .project_box {
-      display: flex;
-    width: 100%;
-    flex-direction: row;
-    flex-wrap: wrap;
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 .three_box_inthis {
   display: flex;
-    width: 21%;
-    flex-direction: column;
-    height: 360px;
-    align-items: flex-start;
-    border: 1px solid #ccc;
-    margin: 15px;
+  width: 30.33%;
+  flex-direction: column;
+  align-items: flex-start;
+  border: 1px solid #ccc;
+  margin: 15px 0 0 15px;
 }
 .projct_nav {
   margin-left: 5px;
@@ -212,19 +276,35 @@ export default {
   flex-wrap: nowrap;
   justify-content: space-around;
 }
-.projct_nav>div{
-	margin-bottom: 5px;
+.projct_nav > div {
+  margin-bottom: 5px;
 }
 .look_score {
-      border-radius: 0px 0px 5px 5px;
-    text-align: center;
-    background: #41CDA6;
-    width: 100%;
-    height: 35px;
-    font-size: 14px;
-    color: #fff;
-    line-height: 35px;
-    cursor: pointer;
-    margin-top: 10px;
+  border-radius: 0px 0px 5px 5px;
+  text-align: center;
+  background: #41cda6;
+  width: 100%;
+  height: 35px;
+  font-size: 14px;
+  color: #fff;
+  line-height: 35px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.cancelbox {
+  position: absolute;
+  z-index: 2;
+  left: 50%;
+  width: 95%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: flex-end;
+  box-sizing: border-box;
+}
+
+.student_table >>> .el-table,
+.student_table >>> .el-table__body-wrapper {
+  height: auto !important;
 }
 </style>