data

package-lock.json

@@ -3539,6 +3539,22 @@
         "stream-shift": "^1.0.0"
       }
     },
+    "echarts": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.0.2.tgz",
+      "integrity": "sha512-En0VYpc96nw2/2AZoBWPHsGi471zMublttj50kfFpYAeR4geup0Tj9iVgEXh7QYZFPnRiruDJEjcB5PXZ+BYzQ==",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.0.4"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -12367,6 +12383,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.0.4.tgz",
+      "integrity": "sha512-DJpy0yrHYY5CuH6vhb9IINWbjvBUe/56J8aH86Jb7O8rRPAYZ3M2E469Qf5B3EOIfM3o3aUrO5edRQfLJ+l1Qw==",
+      "requires": {
+        "tslib": "2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
     }
   }
 }

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "clipboard": "^2.0.10",
+    "echarts": "^5.0.2",
     "element-ui": "^2.15.1",
     "file-saver": "^2.0.5",
     "jquery": "^3.6.0",

src/components/pages/components/data/problelmData.vue

@@ -0,0 +1,157 @@
+<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,
+          axisLabel: {
+            inside: true,
+            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: "65%",
+            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: {
+    chapters(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);
+  },
+};
+</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%;
+}
+.data_body .title {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+</style>

src/components/pages/components/data/scoreData.vue

@@ -0,0 +1,143 @@
+<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);
+  },
+};
+</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%;
+}
+.data_body .title {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+</style>

src/components/pages/components/data/toolsData.vue

@@ -0,0 +1,160 @@
+<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);
+  },
+};
+</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%;
+}
+.data_body .title {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+</style>

src/components/pages/components/data/workData.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: ["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: "65%",
+            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: {
+    chapters(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]++;
+      });
+      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]++;
+    });
+    this.setChart(this.ooption);
+  },
+};
+</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%;
+}
+.data_body .title {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+</style>

src/components/pages/components/workData.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div class="cp_title">
+      <span>{{this.dataJson.title}}</span>
+    </div>
+    <div>
+      <WorkData :workJson="workJson" :chapters="chapters"></WorkData>
+    </div>
+    <div>
+      <ProblelmData :problemJson="problemJson" :chapters="chapters"></ProblelmData>
+    </div>
+    <div>
+      <ToolsData :toolsJson="toolsJson" :tools="tools"></ToolsData>
+    </div>
+    <div>
+      <ScoreData :scoreJson="scoreJson"></ScoreData>
+    </div>
+  </div>
+</template>
+
+<script>
+import WorkData from "./data/workData";
+import ProblelmData from "./data/problelmData";
+import ToolsData from "./data/toolsData";
+import ScoreData from "./data/scoreData";
+
+export default {
+  props: ["dataJson"],
+  components: {
+    WorkData,
+    ProblelmData,
+    ToolsData,
+    ScoreData,
+  },
+  data() {
+    return {
+      Course: this.dataJson,
+      courseId: "",
+      tools: [],
+      chapters: [],
+      workJson: [], //多少人提交作业数据
+      scoreJson: [], //量规评分数据
+      problemJson: [], //问答数据
+      toolsJson: [], //工具数据
+    };
+  },
+  methods: {
+    getData() {
+      let params = {
+        cid: this.courseId,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getWorkData", params)
+        .then((res) => {
+          let _data = res.data[1]; //所有作业数据
+          let _data2 = res.data[2]; //问答提交数据
+          let _data3 = res.data[3]; //工具使用数据
+          let workJson = [];
+          let scoreJson = [];
+          let problemJson = [];
+          let toolsJson = [];
+          _data.forEach((item, index) => {
+            workJson.push({ stage: item.stage, userid: item.userid });
+            scoreJson.push({ rate: JSON.parse(item.rate) });
+          });
+          _data2.forEach((item, index) => {
+            problemJson.push({ stage: item.chapterid });
+          });
+          _data3.forEach((item, index) => {
+            toolsJson.push({ tools: item.tools, count: item.count });
+          });
+          this.workJson = workJson;
+          this.scoreJson = scoreJson;
+          this.problemJson = problemJson;
+          this.toolsJson = toolsJson;
+          this.$forceUpdate();
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+  },
+  watch: {
+    // 使用监听的方式，监听数据的变化
+    dataJson(val) {
+      this.Course = val;
+      this.courseId = val.courseId;
+      var _chapters = JSON.parse(val.chapters);
+      this.chapters = [];
+      this.tools = [];
+      _chapters.forEach((element) => {
+        this.chapters.push({
+          name: element.dyName,
+          id: element.chapterInfo[0].chapterid,
+        });
+        if (element.chapterInfo[0].toolChoose) {
+          this.tools.push(...element.chapterInfo[0].toolChoose);
+        }
+      });
+      this.tools.push(...[1, 1, 1, 1, 2, 2, 2, 2]);
+      this.tools = Array.from(new Set(this.tools)).sort();
+      this.getData();
+    },
+  },
+  mounted() {
+    this.courseId = this.dataJson.courseId;
+    var _chapters = JSON.parse(this.dataJson.chapters);
+    this.chapters = [];
+    this.tools = [];
+    _chapters.forEach((element) => {
+      this.chapters.push({
+        name: element.dyName,
+        id: element.chapterInfo[0].chapterid,
+      });
+      if (element.chapterInfo[0].toolChoose) {
+        this.tools.push(...element.chapterInfo[0].toolChoose);
+      }
+    });
+    this.tools = Array.from(new Set(this.tools)).sort();
+    this.getData();
+  },
+};
+</script>
+
+<style scoped>
+.cp_title {
+  font-size: 24px;
+  margin: 0 auto;
+  width: 95%;
+}
+</style>

src/components/pages/works.vue

@@ -20,11 +20,7 @@
             <el-option value="0" label="我的课程"></el-option>
             <el-option value="1" label="他人课程"></el-option>
           </el-select>
-          <el-input
-            v-model="cn"
-            placeholder="筛选项目名称"
-            @input="search"
-          ></el-input>
+          <el-input v-model="cn" placeholder="筛选项目名称" @input="search"></el-input>
         </div>
       </div>
     </div>
@@ -41,24 +37,9 @@
           :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
           :row-class-name="tableRowClassName"
         >
-          <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 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
@@ -74,8 +55,8 @@
                       oid
                   )
                 "
-                >查看学生</el-button
-              >
+              >查看学生</el-button>
+              <el-button type="primary" size="small" @click="getWorkData(scope.row)">生成报告</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -88,15 +69,35 @@
           :total="total"
           v-if="page"
           @current-change="handleCurrentChange"
-        >
-        </el-pagination>
+        ></el-pagination>
       </div>
     </div>
+    <el-dialog
+      title="查看报告"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="750px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div>
+        <div class="a_addBox">
+          <WorkDate :dataJson="dataJson"></WorkDate>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import WorkDate from "./components/workData";
 export default {
+  components: {
+    WorkDate,
+  },
   data() {
     return {
       tableHeight: "500px",
@@ -115,6 +116,8 @@ export default {
       cn: "",
       userid: this.$route.query.userid,
       oid: this.$route.query.oid,
+      dialogVisible: false,
+      dataJson: {},
     };
   },
   mounted() {
@@ -197,6 +200,10 @@ export default {
       this.page = 1;
       this.getProject();
     },
+    getWorkData(res) {
+      this.dataJson = res;
+      this.dialogVisible = true;
+    },
   },
   created() {
     this.page = 1;
@@ -215,7 +222,7 @@ export default {
 }
 .pb_head {
   margin: 0 !important;
-    width: 100% !important;
+  width: 100% !important;
 }
 .student_page {
   margin-top: 10px;
@@ -254,4 +261,25 @@ export default {
 .el-table >>> .even_row {
   background-color: #f1f1f1 !important;
 }
+
+.dialog_diy >>> .el-dialog__header {
+  background: #3d67bc !important;
+  padding: 15px 20px;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 19px;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+.a_addBox {
+  height: 570px;
+  overflow: auto;
+}
 </style>

src/main.js

@@ -15,6 +15,7 @@ import VueCookies from 'vue-cookies'
 import Viewer from 'v-viewer'
 import 'viewerjs/dist/viewer.css'
 import Clipboard from "clipboard";
+const echarts = require('echarts');
 
 
 Vue.use(VideoPlayer).use(VueCookies).use(Viewer)
@@ -24,6 +25,7 @@ Vue.prototype.ajax = ajax
 Vue.prototype.Clipboard = Clipboard
 Vue.prototype.$message = Message
 Vue.prototype.$loading = Loading
+Vue.prototype.$echarts = echarts
 Vue.prototype.openLoading = function(target) {
     const loading = this.$loading.service({ // 声明一个loading对象
         lock: true, // 是否锁屏