update

src/assets/css/dialog.css

@@ -0,0 +1,25 @@
+.pub_dialog_diy .el-dialog__header {
+  background: #3c3c3c !important;
+  padding: 15px 20px;
+}
+
+.pub_dialog_diy .el-dialog__title {
+  color: #fff;
+}
+
+.pub_dialog_diy .el-dialog__headerbtn {
+  top: 19px;
+}
+
+.pub_dialog_diy .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.pub_dialog_diy .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.pub_dialog_diy .el-dialog__body,
+.pub_dialog_diy .el-dialog__footer {
+  background: #fafafa;
+}

src/common/axios.config.js

@@ -22,7 +22,7 @@ axios.interceptors.request.use((config) => {
     // } else if (config.method === 'post') {
     //     config.data = qs.stringify(config.data)//序列化post 参数
     // }
-    if(config.url === 'https://gpt.cocorobo.cn/search_image') {
+    if(config.url === 'https://gpt.cocorobo.cn/search_image' || config.url === 'https://gpt.cocorobo.cn/chat') {
         config.data = config.data//序列化post 参数
     } else if (config.data && config.data[0].post == '1' && config.method === 'post') {
         config.data = 'mode=' + (Object.values(config.data[0]).join(','))//序列化post 参数

src/components/pages/dataBoardNew/course/chartList/cateRank.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        :header-cell-style="{ background: '#E0EAFB', color: '#000' }"
+        :row-class-name="tableRowClassName"
+        class="tableClass"
+      >
+        <el-table-column prop="rank" label="排行" min-width="50" align="center">
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="类别名称"
+          min-width="80"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="sum"
+          label="课程数量"
+          min-width="80"
+          align="center"
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    courseNumberArray: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      tableData: [
+        // { rank: "1", name: "一年级", sum: "2356" },
+        // { rank: "2", name: "二年级", sum: "2256" },
+        // { rank: "3", name: "三年级", sum: "2156" },
+        // { rank: "4", name: "四年级", sum: "1356" },
+        // { rank: "5", name: "五年级", sum: "1256" },
+        // { rank: "6", name: "六年级", sum: "1056" },
+      ],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    setArray(array) {
+      this.tableData = [];
+      for (var i = 0; i < array.length; i++) {
+        this.tableData.push({
+          sum: array[i].course,
+          name: array[i].name,
+        });
+      }
+      this.tableData = this.tableData.sort(function (a, b) {
+        return b.sum - a.sum;
+      });
+    },
+  },
+  watch: {
+    courseNumberArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue);
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.courseNumberArray);
+  },
+};
+</script>
+
+<style scoped>
+.el-table >>> .even_row {
+  background-color: #f2f7ff !important;
+}
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+
+.tableClass >>> td, .tableClass >>> th{
+  padding: 5px 0;
+}
+</style>

src/components/pages/dataBoardNew/course/chartList/courseAna.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    courseNumberArray: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        data: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: '50%',
+            avoidLabelOverlap: true,
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+              },
+            },
+            data: [
+              // { value: 123, name: "一年级" },
+              // { value: 200, name: "二年级" },
+              // { value: 250, name: "三年级" },
+              // { value: 450, name: "四年级" },
+              // { value: 300, name: "五年级" },
+              // { value: 100, name: "六年级" },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  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 = this.ooption.data.filter(item => item.value !== 0);
+        chartObj.off('click')
+        let _this = this
+        chartObj.on('click', function (param) {
+          console.log(param);  //X轴的值
+          _this.$emit('openCourse', param.dataIndex)
+        });
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+    setArray(array) {
+      this.ooption = {
+        data: [],
+      };
+      for (var i = 0; i < array.length; i++) {
+        this.ooption.data.push({ value: array[i].course, name: array[i].name });
+      }
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.series[0].data = this.ooption.data;
+        this.chartObj.setOption(this.option);
+      }
+      this.$forceUpdate();
+    },
+  },
+  watch: {
+    courseNumberArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue);
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.courseNumberArray);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/course/chartList/courseTime.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        singleAxis: {
+          top: 50,
+          bottom: 50,
+          axisTick: {},
+          axisLabel: {},
+          grid: {
+            top: "5%",
+            left: "5%",
+            right: "5%",
+            bottom: "5%",
+            containLabel: true,
+          },
+          type: "time",
+          axisPointer: {
+            animation: true,
+            label: {
+              show: true,
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              opacity: 0.2,
+            },
+          },
+        },
+        series: [
+          {
+            type: "themeRiver",
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 20,
+                shadowColor: "rgba(0, 0, 0, 0.8)",
+              },
+            },
+            data: [
+              ["2015/11/08", 10, "DQ"],
+              ["2015/11/09", 15, "DQ"],
+              ["2015/11/10", 35, "DQ"],
+              ["2015/11/11", 38, "DQ"],
+              ["2015/11/12", 22, "DQ"],
+              ["2015/11/13", 16, "DQ"],
+              ["2015/11/14", 7, "DQ"],
+              ["2015/11/15", 2, "DQ"],
+              ["2015/11/16", 17, "DQ"],
+              ["2015/11/17", 33, "DQ"],
+              ["2015/11/18", 40, "DQ"],
+              ["2015/11/19", 32, "DQ"],
+              ["2015/11/20", 26, "DQ"],
+              ["2015/11/21", 35, "DQ"],
+              ["2015/11/22", 40, "DQ"],
+              ["2015/11/23", 32, "DQ"],
+              ["2015/11/24", 26, "DQ"],
+              ["2015/11/25", 22, "DQ"],
+              ["2015/11/26", 16, "DQ"],
+              ["2015/11/27", 22, "DQ"],
+              ["2015/11/28", 10, "DQ"],
+              ["2015/11/08", 35, "TY"],
+              ["2015/11/09", 36, "TY"],
+              ["2015/11/10", 37, "TY"],
+              ["2015/11/11", 22, "TY"],
+              ["2015/11/12", 24, "TY"],
+              ["2015/11/13", 26, "TY"],
+              ["2015/11/14", 34, "TY"],
+              ["2015/11/15", 21, "TY"],
+              ["2015/11/16", 18, "TY"],
+              ["2015/11/17", 45, "TY"],
+              ["2015/11/18", 32, "TY"],
+              ["2015/11/19", 35, "TY"],
+              ["2015/11/20", 30, "TY"],
+              ["2015/11/21", 28, "TY"],
+              ["2015/11/22", 27, "TY"],
+              ["2015/11/23", 26, "TY"],
+              ["2015/11/24", 15, "TY"],
+              ["2015/11/25", 30, "TY"],
+              ["2015/11/26", 35, "TY"],
+              ["2015/11/27", 42, "TY"],
+              ["2015/11/28", 42, "TY"],
+              ["2015/11/08", 21, "SS"],
+              ["2015/11/09", 25, "SS"],
+              ["2015/11/10", 27, "SS"],
+              ["2015/11/11", 23, "SS"],
+              ["2015/11/12", 24, "SS"],
+              ["2015/11/13", 21, "SS"],
+              ["2015/11/14", 35, "SS"],
+              ["2015/11/15", 39, "SS"],
+              ["2015/11/16", 40, "SS"],
+              ["2015/11/17", 36, "SS"],
+              ["2015/11/18", 33, "SS"],
+              ["2015/11/19", 43, "SS"],
+              ["2015/11/20", 40, "SS"],
+              ["2015/11/21", 34, "SS"],
+              ["2015/11/22", 28, "SS"],
+              ["2015/11/23", 26, "SS"],
+              ["2015/11/24", 37, "SS"],
+              ["2015/11/25", 41, "SS"],
+              ["2015/11/26", 46, "SS"],
+              ["2015/11/27", 47, "SS"],
+              ["2015/11/28", 41, "SS"],
+              ["2015/11/08", 10, "QG"],
+              ["2015/11/09", 15, "QG"],
+              ["2015/11/10", 35, "QG"],
+              ["2015/11/11", 38, "QG"],
+              ["2015/11/12", 22, "QG"],
+              ["2015/11/13", 16, "QG"],
+              ["2015/11/14", 7, "QG"],
+              ["2015/11/15", 2, "QG"],
+              ["2015/11/16", 17, "QG"],
+              ["2015/11/17", 33, "QG"],
+              ["2015/11/18", 40, "QG"],
+              ["2015/11/19", 32, "QG"],
+              ["2015/11/20", 26, "QG"],
+              ["2015/11/21", 35, "QG"],
+              ["2015/11/22", 40, "QG"],
+              ["2015/11/23", 32, "QG"],
+              ["2015/11/24", 26, "QG"],
+              ["2015/11/25", 22, "QG"],
+              ["2015/11/26", 16, "QG"],
+              ["2015/11/27", 22, "QG"],
+              ["2015/11/28", 10, "QG"],
+              ["2015/11/08", 10, "SY"],
+              ["2015/11/09", 15, "SY"],
+              ["2015/11/10", 35, "SY"],
+              ["2015/11/11", 38, "SY"],
+              ["2015/11/12", 22, "SY"],
+              ["2015/11/13", 16, "SY"],
+              ["2015/11/14", 7, "SY"],
+              ["2015/11/15", 2, "SY"],
+              ["2015/11/16", 17, "SY"],
+              ["2015/11/17", 33, "SY"],
+              ["2015/11/18", 40, "SY"],
+              ["2015/11/19", 32, "SY"],
+              ["2015/11/20", 26, "SY"],
+              ["2015/11/21", 35, "SY"],
+              ["2015/11/22", 4, "SY"],
+              ["2015/11/23", 32, "SY"],
+              ["2015/11/24", 26, "SY"],
+              ["2015/11/25", 22, "SY"],
+              ["2015/11/26", 16, "SY"],
+              ["2015/11/27", 22, "SY"],
+              ["2015/11/28", 10, "SY"],
+              ["2015/11/08", 10, "DD"],
+              ["2015/11/09", 15, "DD"],
+              ["2015/11/10", 35, "DD"],
+              ["2015/11/11", 38, "DD"],
+              ["2015/11/12", 22, "DD"],
+              ["2015/11/13", 16, "DD"],
+              ["2015/11/14", 7, "DD"],
+              ["2015/11/15", 2, "DD"],
+              ["2015/11/16", 17, "DD"],
+              ["2015/11/17", 33, "DD"],
+              ["2015/11/18", 4, "DD"],
+              ["2015/11/19", 32, "DD"],
+              ["2015/11/20", 26, "DD"],
+              ["2015/11/21", 35, "DD"],
+              ["2015/11/22", 40, "DD"],
+              ["2015/11/23", 32, "DD"],
+              ["2015/11/24", 26, "DD"],
+              ["2015/11/25", 22, "DD"],
+              ["2015/11/26", 16, "DD"],
+              ["2015/11/27", 22, "DD"],
+              ["2015/11/28", 10, "DD"],
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  mounted() {
+    this.setChart(this.option);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/course/chartList/teaFre.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    monthArray: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        course: [],
+      },
+      option: {
+        title: {
+          text: '授课频次',
+          textStyle: {
+            fontSize: 12,
+          },
+          padding: [10, 0, 0, 10]
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+          data: [],
+        },
+        yAxis: {
+          type: "value",
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        series: [
+          {
+            data:[],
+            // data: [400, 510, 510, 350, 320, 510],
+            symbolSize: 10,
+            type: "line",
+            lineStyle: {
+              width: 3, // 设置线宽度
+              color: "#0E65F7", // 设置线颜色
+            },
+            areaStyle: {}
+          },
+        ],
+      },
+    };
+  },
+  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.course;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  watch: {
+    monthArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.ooption = {
+          xdata: [],
+          course: [],
+        };
+        let _array = newValue;
+        for (var i = 0; i < _array.length; i++) {
+          this.ooption.xdata.push(_array[i].Month + "月");
+          this.ooption.course.push(_array[i].course);
+        }
+
+        if (!this.chartObj) {
+          this.setChart(this.ooption);
+        } else {
+          this.option.xAxis.data = this.ooption.xdata;
+          this.option.series[0].data = this.ooption.course;
+          this.chartObj.setOption(this.option);
+        }
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.ooption = {
+      xdata: [],
+      course: [],
+    };
+    let _array = this.monthArray;
+    for (var i = 0; i < _array.length; i++) {
+      this.ooption.xdata.push(_array[i].Month + "月");
+      this.ooption.course.push(_array[i].course);
+    }
+    this.setChart(this.ooption);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/course/chartList/toolUse.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    toolArray: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true,
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 14,
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: true,
+            },
+            // data: [
+            //   { value: 123, name: "思维类" },
+            //   { value: 200, name: "评价类" },
+            //   { value: 250, name: "学科类" },
+            //   { value: 450, name: "其他类" },
+            //   { value: 300, name: "逻辑类" },
+            //   { value: 100, name: "动作类" },
+            // ],
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart(arrArray) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        this.option.series[0].data = arrArray;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  watch: {
+    toolArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        let _array = newValue;
+
+        if (!this.chartObj) {
+          this.setChart(_array);
+        } else {
+          this.option.series[0].data = _array;
+          this.chartObj.setOption(this.option);
+        }
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    let _array = this.toolArray;
+    this.setChart(_array);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/course/chartList/workNum.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    workNumList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        data: [],
+      },
+      option: {
+        xAxis: {
+          name: "任务数量",
+          nameTextStyle: {
+            padding: [25, 0, 0, 0],
+            verticalAlign:'top'
+          },
+          nameGap: -45
+        },
+        grid: {
+          top: "10%",
+          left: "5%",
+          right: "5%",
+          bottom: "6%",
+          containLabel: true,
+        },
+        yAxis: {
+          name: "作业提交数量",
+        },
+        color: ["#3681FC"],
+        tooltip: {
+          formatter: function (params) {
+            return (
+              params.marker +
+              params.data[2] +
+              "<br/>" +
+              "任务数量：" +
+              params.data[0] +
+              "<br/>" +
+              "作业提交数量：" +
+              params.data[1]
+            );
+          },
+        },
+        series: [
+          {
+            symbolSize: 8,
+            data: [],
+            type: "scatter",
+          },
+        ],
+      },
+    };
+  },
+  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 = this.ooption.data;
+
+        chartObj.off('click')
+        let _this = this
+        chartObj.on('click', function (param) {
+          console.log(param);  //X轴的值
+          _this.$emit('openCourse', param.data[3])
+        });
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+    setArray(array) {
+      this.ooption = {
+        data: [],
+      };
+      for (var i = 0; i < array.length; i++) {
+        this.ooption.data.push(array[i]);
+      }
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.series[0].data = this.ooption.data;
+        this.chartObj.setOption(this.option);
+      }
+      this.$forceUpdate();
+    },
+  },
+  watch: {
+    workNumList: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue);
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.workNumList);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/course/chartList/workTime.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    workList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        type: [],
+      },
+      option: {
+        title: {
+          text: '授课时长',
+          textStyle: {
+            fontSize: 12,
+          },
+          padding: [10, 0, 0, 10]
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          top: "10%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: "category",
+          // data: ["六年级", "五年级", "四年级", "三年级", "二年级", "一年级"],
+          data: [],
+        },
+        series: [
+          {
+            name: "授课时长（时）",
+            type: "bar",
+            // data: [60, 110, 25, 130, 65, 80],
+            data: [],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return "#106bff";
+                },
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  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.type;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  watch: {
+    workList: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.ooption = {
+          xdata: [],
+          type: [],
+        };
+        let _array = newValue;
+        for (var i = 0; i < _array.length; i++) {
+          this.ooption.xdata.push(_array[i].name);
+          this.ooption.type.push(_array[i].time);
+        }
+
+        if (!this.chartObj) {
+          this.setChart(this.ooption);
+        } else {
+          this.option.yAxis.data = this.ooption.xdata;
+          this.option.series[0].data = this.ooption.type;
+          this.chartObj.setOption(this.option);
+        }
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.ooption = {
+      xdata: [],
+      type: [],
+    };
+    let _array = this.workList;
+    for (var i = 0; i < _array.length; i++) {
+      this.ooption.xdata.push(_array[i].name);
+      this.ooption.type.push(_array[i].time);
+    }
+    this.setChart(this.ooption);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/course/index.vue

@@ -0,0 +1,760 @@
+<template>
+  <div class="body1" v-loading="isLoading">
+    <!-- 课程数据 -->
+    <div class="left">
+      <div class="top">
+        <div class="titleBox">
+          <div class="title">授课频次</div>
+        </div>
+        <div class="dataBox">
+          <div class="teafre">
+            <div class="teaLeft">
+              <div>累计授课次数</div>
+              <div>{{ wCount }}</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>相对增幅百分比</div>
+              <div>{{ reInc }}%</div>
+            </div>
+          </div>
+          <TeaFre
+            style="height: calc(100% - 62px)"
+            :monthArray="groupedArrayByMonth"
+          ></TeaFre>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">工具使用</div>
+        </div>
+        <div class="dataBox">
+          <ToolUse
+            style="height: calc(100% - 40px)"
+            :toolArray="toolList"
+          ></ToolUse>
+        </div>
+      </div>
+    </div>
+    <div class="center">
+      <div class="top">
+        <div class="titleBox">
+          <div class="title">课程数量</div>
+        </div>
+        <div class="dataBox middleBox">
+          <div class="halfBox">
+            <div class="teafre">
+              <div class="teaMiddle cNum">
+                <div>课程总数</div>
+                <div>{{ typeCourseCount }}</div>
+              </div>
+              <div class="teaMiddle tNum">
+                <div>类别总数</div>
+                <div>{{ typeCount }}</div>
+              </div>
+              <div class="teaMiddle tSum">
+                <div>类别平均</div>
+                <div>{{ (typeCourseCount / typeCount).toFixed(0) }}</div>
+              </div>
+            </div>
+            <CateRank
+              style="
+                height: calc(100% - 72px);
+                margin-top: 10px;
+                overflow: auto;
+              "
+              :courseNumberArray="courseNumberArray2"
+            ></CateRank>
+          </div>
+          <div class="halfBox middleBox" style="align-items: flex-start">
+            <WorkNum
+              style="height: calc(100% - 40px)"
+              :workNumList="workNumList"
+              @openCourse="openCourse"
+            ></WorkNum>
+          </div>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">课程时间分布</div>
+        </div>
+        <div class="dataBox">
+          <CourseTime style="height: calc(100% - 40px)"></CourseTime>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="top" style="border-radius: 5px">
+        <div class="titleBox">
+          <div class="title">课程分析</div>
+          <el-select v-model="cType" @change="typeChange" class="selectBox">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="年级" value="grade"></el-option>
+            <el-option label="主题" value="theme"></el-option>
+            <el-option label="学科" value="subject"></el-option>
+          </el-select>
+        </div>
+        <div class="dataBox">
+          <CourseAna
+            style="height: calc(100% - 40px)"
+            :courseNumberArray="courseNumberArray"
+            @openCourse="openCourse2"
+          ></CourseAna>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">授课时长</div>
+          <el-select v-model="lType" @change="typeChange1" class="selectBox">
+            <el-option label="年级" value="grade"></el-option>
+            <el-option label="主题" value="theme"></el-option>
+            <el-option label="学科" value="subject"></el-option>
+          </el-select>
+        </div>
+        <div class="dataBox">
+          <div class="teafre" style="margin: 10px 0 0 0">
+            <div class="teaLeft">
+              <div>累计时长</div>
+              <div>15624小时</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>学生在线平均时长</div>
+              <div>268小时</div>
+            </div>
+          </div>
+          <WorkTime
+            style="height: calc(100% - 72px)"
+            :workList="tedurArray"
+          ></WorkTime>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TeaFre from "./chartList/teaFre.vue";
+import ToolUse from "./chartList/toolUse.vue";
+import CateRank from "./chartList/cateRank.vue";
+import WorkNum from "./chartList/workNum.vue";
+import CourseTime from "./chartList/courseTime.vue";
+import CourseAna from "./chartList/courseAna.vue";
+import WorkTime from "./chartList/workTime.vue";
+export default {
+  components: {
+    TeaFre,
+    ToolUse,
+    CateRank,
+    WorkNum,
+    CourseTime,
+    CourseAna,
+    WorkTime,
+  },
+  props: {
+    oid: {
+      type: String,
+    },
+    org: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      wCount: 0,
+      cCount: 0,
+      groupedArrayByMonth: [],
+      toolList: [],
+      reInc: 0,
+      cType: "",
+      lType: "grade",
+      tedurArray: [],
+      classList: [],
+      subjectList: [],
+      themeList: [],
+      typeCount: 0,
+      typeCourseCount: 0,
+      courseNumberArray: [],
+      courseNumberArray2: [],
+      gradeArray: [],
+      subjectArray: [],
+      themeArray: [],
+      allArray: [],
+      workNumList: [],
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    openCourse(cid) {
+      window.parent.postMessage({ cid: cid, screenType: "3" }, "*");
+    },
+    openCourse2(index) {
+      console.log(index);
+      // console.log(this.courseNumberArray);
+      let id = this.courseNumberArray[index].typeid;
+      let typea = "";
+      let typeb = "";
+      let typed = "";
+      // console.log(this.gradeArray);
+      // console.log(this.subjectArray);
+      // console.log(this.themeArray);
+      let key = 0;
+      for (key in this.gradeArray) {
+        if (this.gradeArray.hasOwnProperty.call(this.gradeArray, key)) {
+          const element = this.gradeArray[key];
+          if (element.typeid == id) {
+            typea = id;
+          }
+        }
+      }
+      for (key in this.subjectArray) {
+        if (this.subjectArray.hasOwnProperty.call(this.subjectArray, key)) {
+          const element = this.subjectArray[key];
+          if (element.typeid == id) {
+            typed = id;
+          }
+        }
+      }
+      for (key in this.themeArray) {
+        if (this.themeArray.hasOwnProperty.call(this.themeArray, key)) {
+          const element = this.themeArray[key];
+          if (element.typeid == id) {
+            typeb = id;
+          }
+        }
+      }
+      window.parent.postMessage(
+        {
+          tools: "openCourse",
+          typea: typea || "",
+          typeb: typeb || "",
+          typed: typed || "",
+        },
+        "*"
+      );
+    },
+    typeCourseCountCalu() {
+      this.courseNumberArray2 = this.allArray;
+      this.typeCount = this.courseNumberArray2.length;
+      let course = [];
+      for (var i = 0; i < this.courseNumberArray2.length; i++) {
+        let _array = this.courseNumberArray2[i].array;
+        for (var j = 0; j < _array.length; j++) {
+          console.log(_array[j]);
+          if (course.indexOf(_array[j]) == -1) {
+            course.push(_array[j]);
+          }
+        }
+      }
+      this.typeCourseCount = course.length;
+    },
+    typeChange() {
+      if (this.cType === "") {
+        this.courseNumberArray = this.allArray;
+      } else if (this.cType === "grade") {
+        this.courseNumberArray = this.gradeArray;
+      } else if (this.cType === "theme") {
+        this.courseNumberArray = this.themeArray;
+      } else if (this.cType === "subject") {
+        this.courseNumberArray = this.subjectArray;
+      }
+      this.$forceUpdate();
+    },
+    typeChange1() {
+      if (this.lType == "grade") {
+        this.tedurArray = this.classList;
+      } else if (this.lType == "subject") {
+        this.tedurArray = this.subjectList;
+      } else {
+        this.tedurArray = this.themeList;
+      }
+    },
+    getData() {
+      this.isLoading = true;
+      let params = [
+        {
+          oid: this.oid,
+          org: this.org,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "selectDataBoardCourse", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.wCount = res.data[0].length;
+          this.cCount = res.data[1].length;
+          var workArray = res.data[0];
+          var courseList = res.data[1];
+          var tList = res.data[2];
+          var classList = res.data[3]; //年级数组
+          var subjectList = res.data[4]; //学科数组
+          var themeList = res.data[5]; //主题数组
+          let _course = res.data[6]; //课程
+          let _grade = res.data[3]; //年级
+          let _subject = res.data[4]; //学科
+          var _workCourse = res.data[7]; //带作业的课程
+          _subject.push({ name: "其他" });
+          var cList = [];
+          //将数据根据time里面的月份分成多个数组
+          var groupedArrayByMonth = [];
+          const date = new Date();
+          var Month = date.getMonth() + 1;
+          var Year = date.getFullYear();
+          for (var i = Month; i > Month - 6; i--) {
+            if (i <= 0) {
+              groupedArrayByMonth.push({
+                Year: Year - 1,
+                Month: 12 + i,
+                course: 0,
+              });
+            } else {
+              groupedArrayByMonth.push({
+                Month: i,
+                Year: Year,
+                course: 0,
+              });
+            }
+          }
+          groupedArrayByMonth = groupedArrayByMonth.reverse();
+
+          for (var i = 0; i < workArray.length; i++) {
+            let _date = new Date(workArray[i].time);
+            var _month = _date.getMonth() + 1;
+            var _year = _date.getFullYear();
+            for (var j = 0; j < groupedArrayByMonth.length; j++) {
+              if (
+                _month == groupedArrayByMonth[j].Month &&
+                _year == groupedArrayByMonth[j].Year
+              ) {
+                groupedArrayByMonth[j].course++;
+                break;
+              }
+            }
+          }
+          if (
+            groupedArrayByMonth[groupedArrayByMonth.length - 1].course == 0 ||
+            groupedArrayByMonth[groupedArrayByMonth.length - 2].course == 0
+          ) {
+            this.reInc = 0;
+          } else {
+            this.reInc = (
+              (groupedArrayByMonth[groupedArrayByMonth.length - 1].course /
+                groupedArrayByMonth[groupedArrayByMonth.length - 2].course) *
+              100
+            ).toFixed(1);
+          }
+          this.groupedArrayByMonth = groupedArrayByMonth;
+          for (var i = 0; i < courseList.length; i++) {
+            cList.push(JSON.parse(courseList[i].chapters));
+          }
+          var toolList = [
+            [10, 65], //互动类
+            [7, 1, 52, 3, 48], //思维类
+            [49], //协作类
+            [4, 45, 15, 16, 50, 41, 47], //测评类
+            [40], //评价类
+            [18, 21, 22, 23, 24, 32, 57, 63], //编程类
+            [28, 31, 39, 66, 67, 68], //学科类
+          ];
+          var toolAllArray = [
+            { name: "互动类", value: 0 },
+            { name: "思维类", value: 0 },
+            { name: "协作类", value: 0 },
+            { name: "测评类", value: 0 },
+            { name: "评价类", value: 0 },
+            { name: "编程类", value: 0 },
+            { name: "学科类", value: 0 },
+          ];
+          for (var p = 0; p < toolList.length; p++) {
+            for (var i = 0; i < cList.length; i++) {
+              for (var j = 0; j < cList[i].length; j++) {
+                for (
+                  var k = 0;
+                  k < cList[i][j].chapterInfo[0].taskJson.length;
+                  k++
+                ) {
+                  for (
+                    var q = 0;
+                    q <
+                    cList[i][j].chapterInfo[0].taskJson[k].toolChoose.length;
+                    q++
+                  ) {
+                    if (
+                      toolList[p].indexOf(
+                        cList[i][j].chapterInfo[0].taskJson[k].toolChoose[q]
+                          .tool[0]
+                      ) != -1
+                    ) {
+                      toolAllArray[p].value++;
+                    }
+                  }
+                }
+              }
+            }
+          }
+          for(var i = 0;i<toolAllArray.length;i++){
+            if(toolAllArray[i].value == 0){
+              toolAllArray.splice(i,1)
+            }
+          }
+          this.toolList = toolAllArray;
+          var courseJson = Object.values(
+            tList.reduce(function (acc, obj) {
+              if (!acc[obj.courseid]) {
+                acc[obj.courseid] = { ...obj };
+                acc[obj.courseid].typeid = [acc[obj.courseid].typeid];
+              } else {
+                if (!acc[obj.courseid].typeid.includes(obj.typeid)) {
+                  acc[obj.courseid].typeid.push(obj.typeid);
+                }
+                acc[obj.courseid].text =
+                  parseInt(acc[obj.courseid].text) + parseInt(obj.text);
+              }
+              return acc;
+            }, {})
+          ).map(function (obj) {
+            var totalTime = parseInt(obj.text);
+            obj.text = (totalTime / (60 * 60)).toFixed(2);
+            return obj;
+          });
+
+          for (var i = 0; i < courseJson.length; i++) {
+            for (var j = 0; j < classList.length; j++) {
+              if (courseJson[i].typeid.indexOf(classList[j].id) != -1) {
+                if (classList[j].time && courseJson[i].text) {
+                  classList[j].time += parseInt(courseJson[i].text);
+                } else if (courseJson[i].text) {
+                  classList[j].time = parseInt(courseJson[i].text);
+                }
+              }
+            }
+            for (var k = 0; k < subjectList.length; k++) {
+              if (courseJson[i].typeid.indexOf(subjectList[k].id) != -1) {
+                if (subjectList[k].time && courseJson[i].text) {
+                  subjectList[k].time += parseInt(courseJson[i].text);
+                } else if (courseJson[i].text) {
+                  subjectList[k].time = parseInt(courseJson[i].text);
+                }
+              }
+            }
+            for (var l = 0; l < themeList.length; l++) {
+              if (courseJson[i].typeid.indexOf(themeList[l].id) != -1) {
+                if (themeList[l].time && courseJson[i].text) {
+                  themeList[l].time += parseInt(courseJson[i].text);
+                } else if (courseJson[i].text) {
+                  themeList[l].time = parseInt(courseJson[i].text);
+                }
+              }
+            }
+          }
+          this.classList = classList;
+          this.subjectList = subjectList;
+          this.themeList = themeList;
+          if (this.lType == "grade") {
+            this.tedurArray = classList;
+          } else if (this.lType == "subject") {
+            this.tedurArray = subjectList;
+          } else {
+            this.tedurArray = themeList;
+          }
+          this.typeCount =
+            classList.length + subjectList.length + themeList.length;
+          let _gradeArray = [];
+          let _subjectArray = [];
+          let _themeArray = [];
+
+          for (var i = 0; i < _grade.length; i++) {
+            _gradeArray.push({
+              name: _grade[i].name,
+              typeid: _grade[i].id,
+              course: 0,
+              array: [],
+            });
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _grade[i].id) {
+                _gradeArray[i].course++;
+                _gradeArray[i].array.push(_course[z].courseid);
+              }
+            }
+          }
+
+          for (var i = 0; i < _subject.length; i++) {
+            _subjectArray.push({
+              name: _subject[i].name,
+              typeid: _subject[i].id,
+              course: 0,
+              array: [],
+            });
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _subject[i].id) {
+                _subjectArray[i].course++;
+                _subjectArray[i].array.push(_course[z].courseid);
+              }
+            }
+          }
+
+          for (var i = 0; i < themeList.length; i++) {
+            _themeArray.push({
+              name: themeList[i].name,
+              typeid: themeList[i].id,
+              course: 0,
+              array: [],
+            });
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == themeList[i].id) {
+                _themeArray[i].course++;
+                _themeArray[i].array.push(_course[z].courseid);
+              }
+            }
+          }
+          this.gradeArray = _gradeArray;
+          this.subjectArray = _subjectArray;
+          this.themeArray = _themeArray;
+          this.allArray = [..._gradeArray, ..._subjectArray, ..._themeArray];
+          this.typeCourseCountCalu();
+          this.typeChange();
+          var wList = [];
+          for (var i = 0; i < _workCourse.length; i++) {
+            if (!wList[_workCourse[i].courseId]) {
+              wList[_workCourse[i].courseId] = {
+                cid: _workCourse[i].courseId,
+                title: _workCourse[i].title,
+                task: 0,
+                work: 0,
+              };
+              let chapters = JSON.parse(_workCourse[i].chapters);
+              for (var j = 0; j < chapters.length; j++) {
+                if (wList[_workCourse[i].courseId].task == 0) {
+                  wList[_workCourse[i].courseId].task =
+                    chapters[j].chapterInfo[0].taskJson.length;
+                } else {
+                  wList[_workCourse[i].courseId].task +=
+                    chapters[j].chapterInfo[0].taskJson.length;
+                }
+              }
+            }
+          }
+          for (var i = 0; i < _workCourse.length; i++) {
+            let a = Object.keys(wList);
+            for (var j = 0; j < Object.keys(wList).length; j++) {
+              if (_workCourse[i].courseId == wList[a[j]].cid) {
+                wList[a[j]].work++;
+              }
+            }
+          }
+          var workNumList = Object.values(wList).map((item) => [
+            item.task,
+            item.work,
+            item.title,
+            item.cid,
+          ]);
+          this.workNumList = workNumList;
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    // format(percentage) {
+    //   return percentage;
+    // },
+  },
+};
+</script>
+
+<style scoped>
+.body1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.left {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+}
+
+.left > .top {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.left > .bottom {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.center {
+  width: calc(100% / 4 * 2 - 40px);
+  height: 100%;
+  margin: 0 20px;
+}
+
+.center > .top {
+  width: 100%;
+  height: calc(100% / 5 * 3 - 10px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.center > .bottom {
+  width: 100%;
+  height: calc(100% / 5 * 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.right {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+}
+
+.right > .top {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 16px;
+  margin: 0 0 20px 0;
+}
+
+.right > .bottom {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.titleBox {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  width: 100%;
+}
+
+.dataBox {
+  height: calc(100% - 40px);
+  width: 100%;
+}
+
+.middleBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+
+.title {
+  font-weight: bold;
+  color: #060e17;
+  font-size: 18px;
+}
+
+.teafre {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+  justify-content: space-evenly;
+}
+
+.teaLeft,
+.teaMiddle {
+  width: calc(100% / 2 - 10px);
+  height: 60px;
+  border-radius: 8px;
+  /* border: 1px solid #e0eafb; */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0 10px;
+  margin: 0 10px;
+}
+.teaMiddle {
+  width: calc(100% / 3 - 10px);
+}
+.teaLeft {
+  width: 95%;
+  background: linear-gradient(
+    180deg,
+    rgba(224, 234, 251, 0.2) 0%,
+    rgba(54, 130, 252, 0.3) 100%
+  );
+}
+.teaRigth {
+  background: linear-gradient(
+    180deg,
+    rgb(211, 246, 228, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.cNum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.tNum {
+  background: linear-gradient(
+    180deg,
+    rgb(174, 204, 254, 0.2) 0%,
+    rgb(54, 129, 252, 0.3) 100%
+  ) !important;
+}
+
+.tSum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.teaLeft > div:first-child,
+.teaMiddle > div:first-child {
+  font-size: 12px;
+  font-weight: 400;
+  color: #565e6a;
+}
+
+.teaLeft > div:last-child,
+.teaMiddle > div:last-child {
+  font-size: 22px;
+  font-weight: bold;
+  color: #060e17;
+}
+
+.halfBox {
+  width: 50%;
+  height: 100%;
+}
+.selectBox {
+  width: 80px;
+  margin-left: 10px;
+}
+
+.selectBox >>> .el-input__inner {
+  height: 30px;
+  line-height: 30px;
+}
+
+.selectBox >>> .el-input__icon {
+  line-height: 30px;
+}
+</style>

src/components/pages/dataBoardNew/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="body">
+    <div class="db_header">
+      <!-- <div class="logoTop">Logo</div> -->
+      <div class="db_header_title">
+        <div v-if="type == 1">综合数据中心</div>
+        <div v-if="type == 2">课程数据中心</div>
+        <div v-if="type == 3">学生数据中心</div>
+        <div v-if="type == 4">教师数据中心</div>
+      </div>
+      <div class="db_check">
+        <div :class="{ active: type == 1 }" @click="setType(1)">综合数据</div>
+        <div :class="{ active: type == 2 }" @click="setType(2)">课程数据</div>
+        <div :class="{ active: type == 3 }" @click="setType(3)">学生数据</div>
+        <div :class="{ active: type == 4 }" @click="setType(4)">教师数据</div>
+      </div>
+    </div>
+    <div class="db_body">
+      <school v-if="type == 1" :oid="oid" :org="org"></school>
+      <course v-if="type == 2" :oid="oid" :org="org"></course>
+      <student v-if="type == 3" :oid="oid" :org="org"></student>
+      <teacher v-if="type == 4" :oid="oid" :org="org"></teacher>
+    </div>
+  </div>
+</template>
+
+<script>
+import school from "./school";
+import course from "./course";
+import student from "./student";
+import teacher from "./teacher";
+export default {
+  components: {
+    school,
+    course,
+    student,
+    teacher,
+  },
+  data() {
+    return {
+      type: 1,
+      oid: this.$route.query.oid,
+      org: this.$route.query.org,
+    };
+  },
+  methods: {
+    setType(type) {
+      this.type = type;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.body {
+  height: 100%;
+  width: 100%;
+  min-width: 1200px;
+  min-height: 750px;
+}
+
+.db_header {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  background: #fff;
+  align-items: center;
+}
+
+.logoTop {
+  position: absolute;
+  left: 30px;
+}
+
+.db_header_title {
+  font-weight: bold;
+  font-size: 20px;
+}
+.db_header_title > div {
+  position: relative;
+  z-index: 9;
+}
+.db_header_title > div:after {
+  content: "";
+  position: absolute;
+  width: 250px;
+  height: 10px;
+  bottom: -30px;
+  left: -85px;
+  border-top: 20px solid #fff;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+  -webkit-transform: skew(20deg);
+  transform: skew(359deg);
+  z-index: 1;
+}
+
+.db_check {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 30px;
+  height: 100%;
+}
+
+.db_check > div {
+  padding: 14px 20px;
+  cursor: pointer;
+}
+
+.db_check > div:hover {
+  background: #edf4ff;
+}
+
+.db_check > div.active {
+  font-weight: 700;
+  color: #297bff;
+  background: #edf4ff;
+  border-top: 2px solid #297bff;
+  box-sizing: border-box;
+}
+
+/* .db_check > div + div {
+  margin-left: 30px;
+} */
+
+.db_body {
+  height: calc(100% - 50px);
+  width: 100%;
+  overflow: auto;
+  background: rgb(231, 242, 252);
+}
+</style>

src/components/pages/dataBoardNew/school/cateRank/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#E0EAFB',color: '#000' }"
+        :row-class-name="tableRowClassName" class="tableClass">
+        <el-table-column label="排行" min-width="50" align="center">
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column prop="name" label="类别名称" min-width="80" align="center">
+        </el-table-column>
+        <el-table-column prop="sum" label="课程数量" min-width="80" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    courseNumberArray: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      tableData: [
+        // { rank: "1", name: "一年级", sum: "2356" },
+        // { rank: "2", name: "二年级", sum: "2256" },
+        // { rank: "3", name: "三年级", sum: "2156" },
+        // { rank: "4", name: "四年级", sum: "1356" },
+        // { rank: "5", name: "五年级", sum: "1256" },
+        // { rank: "6", name: "六年级", sum: "1056" },
+      ],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    setArray(array){
+      this.tableData = []
+      for(var i = 0;i<array.length;i++){
+        this.tableData.push({
+          sum:array[i].course,
+          name:array[i].name
+        })
+      }
+      this.tableData = this.tableData.sort(function(a,b){
+        return b.sum - a.sum;
+      })
+    }
+  },
+  watch: {
+    courseNumberArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.courseNumberArray)
+  },
+};
+</script>
+
+<style scoped>
+.el-table>>>.even_row {
+  background-color: #f2f7ff !important;
+}
+
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+
+.tableClass >>> td, .tableClass >>> th{
+  padding: 5px 0;
+}
+</style>

src/components/pages/dataBoardNew/school/courseInfo/index.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        courseNumberArray: {
+            type: Array,
+        },
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                data: [],
+            },
+            option: {
+                title: {
+                    text: '课程数量',
+                    textStyle:{
+                        fontSize: 12,
+                    },
+                    padding: [5, 0, 0, 10]
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                series: [
+                    {
+                        avoidLabelOverlap: true,  //是否启用防止标签重叠策略
+                        labelLine: { // 设置指示线的长度
+                            length: 8,
+                            length2: 5
+                        },
+                        label: {
+                            fontSize: 12,
+                            position:'outer',
+                            // alignTo:'labelLine'
+                        },
+                        labelLayout: {
+                            hideOverlap: false
+                        },
+                        type: 'pie',
+                        radius: ['35%', '70%'],
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: 13,
+                                fontWeight: 'bold'
+                            }
+                        },
+                        data: [
+                            // { value: 1048, name: '一年级' },
+                            // { value: 735, name: '二年级' },
+                            // { value: 580, name: '三年级' },
+                            // { value: 484, name: '四年级' },
+                            // { value: 484, name: '五年级' },
+                            // { value: 300, name: '六年级' }
+                        ]
+                    }
+                ]
+            },
+        };
+    },
+    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 = this.ooption.data.filter(item => item.value !== 0);
+                chartObj.off('click')
+                let _this = this
+                chartObj.on('click', function (param) {
+                    //param参数包含的内容有： 
+                    //param.name：X轴的值 
+                    //param.data：Y轴的值 
+                    //param.value：Y轴的值 
+                    //param.type：点击事件均为click 
+                    //param.seriesName：legend的名称 
+                    //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个） 
+                    //param.dataIndex：数值序列（X轴上当前点是第几个点）
+                    //alert(param.seriesName);  //legend的名称
+                    console.log(param);  //X轴的值
+                    _this.$emit('openCourse', param.dataIndex)
+                });
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+        setArray(array) {
+            this.ooption = {
+                data: [],
+            }
+            for (var i = 0; i < array.length; i++) {
+                this.ooption.data.push({ value: array[i].course, name: array[i].name })
+            }
+            if (!this.chartObj) {
+                this.setChart(this.ooption);
+            } else {
+                this.option.series[0].data = this.ooption.data;
+                this.chartObj.setOption(this.option);
+            }
+            this.$forceUpdate();
+        },
+    },
+    watch: {
+        courseNumberArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.setArray(newValue)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        this.setArray(this.courseNumberArray)
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    /* display: flex; */
+    position: relative;
+    border-radius: 5px;
+    /* border: 1px solid #eee; */
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>
+  

src/components/pages/dataBoardNew/school/index.vue

@@ -0,0 +1,913 @@
+<template>
+  <div class="body1" v-loading="isLoading">
+    <!-- 综合数据 -->
+    <div class="left">
+      <div class="top">
+        <div class="titleBox">
+          <div class="title">基础概况</div>
+        </div>
+        <div class="dataBox">
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>用户总数</span>
+              <span>{{ count }}</span>
+            </div>
+            <div class="info greenBG">
+              <span>周使用频次</span>
+              <span>{{ weekCount }}</span>
+            </div>
+            <div class="info blueBG">
+              <span>登录频次</span>
+              <span>{{ loginCount }}</span>
+            </div>
+            <div class="info greenBG">
+              <span>人均使用频次</span>
+              <span>{{ (loginCount / count).toFixed(0) }}</span>
+            </div>
+          </div>
+          <loginCount style="height: calc(100% - 140px)" :monthArray="loginCountMonthArray"></loginCount>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">在线时长</div>
+        </div>
+        <div class="dataBox">
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>累计时长</span>
+              <span>{{ loginTime.toFixed(0) }}小时</span>
+            </div>
+            <div class="info greenBG">
+              <span>人均时长</span>
+              <span>{{ (loginTime / count).toFixed(0) }}小时</span>
+            </div>
+          </div>
+          <loginTime :yearArray="loginCountYearArray" style="height: calc(100% - 70px)"></loginTime>
+        </div>
+      </div>
+    </div>
+    <div class="center">
+      <div class="top">
+        <div class="titleBox">
+          <div class="title">教师行为数据</div>
+        </div>
+        <div class="dataBox">
+          <div class="info_box" style="width: 95%">
+            <div class="info2 blueBG">
+              <span>上传课程总数</span>
+              <span>{{ courseCount }}</span>
+            </div>
+            <div class="info2 greenBG">
+              <span>各年级平均课程数</span>
+              <span>{{ gradeCourse.toFixed(0) }}</span>
+            </div>
+            <div class="info2 blueBG">
+              <span>各学科平均课程数</span>
+              <span>{{ subjectCourse.toFixed(0) }}</span>
+            </div>
+            <div class="info2 greenBG">
+              <span>教师人均课程数</span>
+              <span>{{ (courseCount / teacherCount).toFixed(0) }}</span>
+            </div>
+          </div>
+          <teacherInfo style="height: calc(100% - 70px)" :courseArray="courseArray" @openCourse="openCourse"></teacherInfo>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">平台使用深度</div>
+        </div>
+        <div class="dataBox">
+          <div class="depth_box">
+            <div class="depth">
+              <span>上传课程</span>
+              <div>
+                <el-progress :width="80" type="circle"
+                  :percentage="lightJson.upCourseTeachers ? ((lightJson.upCourseTeachers / lightJson.teachers) * 100).toFixed(0) : 0"
+                  :stroke-width="15" :format="format" color="#106BFF"></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>上传项目</span>
+              <div>
+                <el-progress :width="80" type="circle" :percentage="lightJson.upCourseUsers ? ((lightJson.upCourseUsers / lightJson.users) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
+                  color="#106BFF"></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>使用工具</span>
+              <div>
+                <el-progress :width="80" type="circle" :percentage="lightJson.toolUsers ? ((lightJson.toolUsers / lightJson.users) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
+                  color="#106BFF"></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>课程评价</span>
+              <div>
+                <el-progress :width="80" type="circle" :percentage="lightJson.rateUser ? ((lightJson.rateUser / lightJson.users) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
+                  color="#106BFF"></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>互动交流</span>
+              <div>
+                <el-progress :width="80" type="circle" :percentage="lightJson.commentUsers ? ((lightJson.commentUsers / lightJson.users) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
+                  color="#106BFF"></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>参与课程</span>
+              <div>
+                <el-progress :width="80" type="circle" :percentage="lightJson.gCourseTeachers ? ((lightJson.gCourseTeachers / lightJson.teachers) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
+                  color="#106BFF"></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>参与项目</span>
+              <div>
+                <el-progress :width="80" type="circle" :percentage="lightJson.gCourseUsers ? ((lightJson.gCourseUsers / lightJson.users) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
+                  color="#106BFF"></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>使用工具</span>
+              <div>
+                <el-progress :width="80" type="circle" :percentage="25" :stroke-width="15" :format="format"
+                  color="#106BFF"></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>协同合作</span>
+              <div>
+                <el-progress :width="80" type="circle" :percentage="lightJson.upgCourseTeachers ? ((lightJson.upgCourseTeachers / lightJson.teachers) * 100).toFixed(0) : 0" :stroke-width="15" :format="format"
+                  color="#106BFF"></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>合作交流</span>
+              <div>
+                <el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"
+                  color="#106BFF"></el-progress>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="top">
+        <div class="titleBox">
+          <div class="title">课程数量</div>
+          <el-select v-model="cType" @change="typeChange" class="selectBox">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="年级" value="grade"></el-option>
+            <el-option label="主题" value="theme"></el-option>
+            <el-option label="学科" value="subject"></el-option>
+          </el-select>
+
+        </div>
+        <div class="dataBox">
+          <div class="course_box">
+            <div class="info_box">
+              <div class="info3 blueBG">
+                <span>课程总数</span>
+                <span>{{ typeCourseCount }}</span>
+              </div>
+              <div class="info3 greenBG">
+                <span>类别总数</span>
+                <span>{{ typeCount }}</span>
+              </div>
+              <div class="info3 blueBG">
+                <span>类别平均</span>
+                <span>{{ (typeCourseCount / typeCount).toFixed(0) }}</span>
+              </div>
+            </div>
+            <div class="course_box_p">
+              <courseInfo :courseNumberArray="courseNumberArray" @openCourse="openCourse2"></courseInfo>
+            </div>
+          </div>
+          <cateRank style="height: calc(100% - 50% - 10px); overflow: auto" :courseNumberArray="courseNumberArray">
+          </cateRank>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">学生综合评价</div>
+          <el-select v-model="eva" @change="typeChange2" @focus="setMinWidth" class="selectBox" style="width: 150px;">
+            <el-option v-for="item in evArray" :key="item.id" :label="item.title" :value="item.id" :style="{'width': minWidth + 2 + 'px'}"></el-option>
+          </el-select>
+        </div>
+        <div class="dataBox">
+          <studentInfo :evCourseArray="evCourseArray" :eva="eva"></studentInfo>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import loginCount from "./loginCount";
+import loginTime from "./loginTime";
+import teacherInfo from "./teacherInfo";
+import courseInfo from "./courseInfo";
+import studentInfo from "./studentInfo";
+import cateRank from "./cateRank";
+export default {
+  components: {
+    loginCount,
+    loginTime,
+    teacherInfo,
+    courseInfo,
+    studentInfo,
+    cateRank,
+  },
+  props: {
+    oid: {
+      type: String,
+    },
+    org: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      count: 0,
+      loginCount: 0,
+      loginTime: 0,
+      courseCount: 0,
+      teacherCount: 0,
+      loginCountMonthArray: [],
+      weekCount: 0,
+      loginCountYearArray: [],
+      gradeCourse: 0,
+      subjectCourse: 0,
+      courseArray: [],
+      cType: '',
+      gradeArray: [],
+      subjectArray: [],
+      themeArray: [],
+      allArray: [],
+      courseNumberArray: [],
+      typeCount: 0,
+      typeCourseCount: 0,
+      lightJson: {
+        users: 0,
+        teachers: 0,
+        students: 0,
+        upCourseTeachers: 0,
+        gCourseTeachers: 0,
+        upCourseUsers: 0,
+        gCourseUsers: 0,
+        toolUsers: 0,
+        rateUser: 0,
+        upgCourseTeachers: 0,
+        commentUsers: 0,
+      },
+      evArray:[],
+      eva:'',
+      evCourseArray:[],
+      minWidth:0
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    setMinWidth (val) {
+      this.minWidth = val.srcElement.clientWidth
+    },
+    openCourse(classIndex,subIndex){
+      // console.log(classIndex,subIndex);
+      // console.log(this.courseArray);
+      // console.log(this.courseArray[classIndex].id,this.courseArray[classIndex].subject[subIndex].id || '');
+      window.parent.postMessage(
+        { 
+          tools: "openCourse",
+          typea: this.courseArray[classIndex].id,
+          typed: this.courseArray[classIndex].subject[subIndex].id || '',
+        }, 
+        "*"
+      );
+    },
+    openCourse2(index){
+      console.log(index);
+      // console.log(this.courseNumberArray);
+      let id = this.courseNumberArray[index].typeid
+      let typea = ""
+      let typeb = ""
+      let typed = ""
+      // console.log(this.gradeArray);
+      // console.log(this.subjectArray);
+      // console.log(this.themeArray);
+      let key = 0
+      for (key in this.gradeArray) {
+        if (this.gradeArray.hasOwnProperty.call(this.gradeArray, key)) {
+          const element = this.gradeArray[key];
+          if(element.typeid == id){
+            typea = id
+          }
+        }
+      }
+      for (key in this.subjectArray) {
+        if (this.subjectArray.hasOwnProperty.call(this.subjectArray, key)) {
+          const element = this.subjectArray[key];
+          if(element.typeid == id){
+            typed = id
+          }
+        }
+      }
+      for (key in this.themeArray) {
+        if (this.themeArray.hasOwnProperty.call(this.themeArray, key)) {
+          const element = this.themeArray[key];
+          if(element.typeid == id){
+            typeb = id
+          }
+        }
+      }
+      window.parent.postMessage(
+        { 
+          tools: "openCourse",
+          typea: typea || "",
+          typeb: typeb || "",
+          typed: typed || "",
+        }, 
+        "*"
+      );
+    },
+    getData() {
+      this.isLoading = true;
+      let params = [
+        {
+          oid: this.oid,
+          org: this.org,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "selectDataBoardSchool", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.count = res.data[0][0].count
+          this.loginCount = res.data[1][0].loginCount
+          this.loginTime = parseInt(res.data[3][0].time) / 60 / 60
+          this.courseCount = res.data[5][0].courseCount
+          this.teacherCount = res.data[6][0].count
+
+          let loginCountMonthArray = []
+          const date = new Date()
+          var Month = date.getMonth() + 1
+          var Year = date.getFullYear()
+          for (var i = Month; i > Month - 6; i--) {
+            if (i <= 0) {
+              loginCountMonthArray.push({
+                Year: Year - 1,
+                Month: 12 + i,
+                student: 0,
+                teacher: 0
+              })
+            } else {
+              loginCountMonthArray.push({
+                Month: i,
+                Year: Year,
+                student: 0,
+                teacher: 0
+              })
+            }
+          }
+          loginCountMonthArray = loginCountMonthArray.reverse()
+          let teacherLoginCountYear = res.data[7] // 老师半年登录次数统计
+          let studentLoginCountYear = res.data[8] // 学生半年登录次数统计
+
+          for (var i = 0; i < teacherLoginCountYear.length; i++) {
+            let _date = new Date(teacherLoginCountYear[i].create_at)
+            var _month = _date.getMonth() + 1
+            var _year = _date.getFullYear()
+            for (var j = 0; j < loginCountMonthArray.length; j++) {
+              if (_month == loginCountMonthArray[j].Month && _year == loginCountMonthArray[j].Year) {
+                loginCountMonthArray[j].teacher++
+                break;
+              }
+            }
+          }
+          for (var i = 0; i < studentLoginCountYear.length; i++) {
+            let _date = new Date(studentLoginCountYear[i].create_at)
+            var _month = _date.getMonth() + 1
+            var _year = _date.getFullYear()
+            for (var j = 0; j < loginCountMonthArray.length; j++) {
+              if (_month == loginCountMonthArray[j].Month && _year == loginCountMonthArray[j].Year) {
+                loginCountMonthArray[j].student++
+                break;
+              }
+            }
+          }
+          console.log(loginCountMonthArray);
+          this.loginCountMonthArray = loginCountMonthArray
+
+          this.weekCount = res.data[9][0].count
+
+          let loginCountYear = res.data[10]
+          let loginCountYearArray = []
+          for (var i = Month; i > Month - 12; i--) {
+            if (i <= 0) {
+              loginCountYearArray.push({
+                Year: Year - 1,
+                Month: 12 + i,
+                mon: 0,
+                tue: 0,
+                wed: 0,
+                thur: 0,
+                fri: 0,
+                sat: 0,
+                sun: 0,
+              })
+            } else {
+              loginCountYearArray.push({
+                Month: i,
+                Year: Year,
+                mon: 0,
+                tue: 0,
+                wed: 0,
+                thur: 0,
+                fri: 0,
+                sat: 0,
+                sun: 0,
+              })
+            }
+          }
+          loginCountYearArray = loginCountYearArray.reverse()
+          for (var i = 0; i < loginCountYear.length; i++) {
+            let _date = new Date(loginCountYear[i].create_at)
+            var _month = _date.getMonth() + 1
+            var _year = _date.getFullYear()
+            var _day = _date.getDay()
+            let dayArray = ['sun', 'mon', 'tue', 'wed', 'thur', 'fri', 'sat']
+            for (var j = 0; j < loginCountYearArray.length; j++) {
+              if (_month == loginCountYearArray[j].Month && _year == loginCountYearArray[j].Year) {
+                loginCountYearArray[j][dayArray[_day]]++
+                break;
+              }
+            }
+          }
+          console.log(loginCountYearArray);
+          this.loginCountYearArray = loginCountYearArray
+
+          let _grade = res.data[11] //年级
+          let _subject = res.data[12]  //学科
+          let _course = res.data[13] //课程
+          let _gradeCourse = 0 //各年级上传课程
+          let _subjectCourse = 0 //各学科上传课程
+          let _courseArray = []
+          _subject.push({ name: '其他' })
+
+          for (var i = 0; i < _grade.length; i++) {
+            _courseArray.push({
+              name: _grade[i].name,
+              id: _grade[i].id,
+              courseid: [],
+              subject: [],
+            })
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _grade[i].id) {
+                _gradeCourse++
+                if (_courseArray[i].courseid.indexOf(_course[z].courseid) === -1) {
+                  _courseArray[i].courseid.push(_course[z].courseid)
+                }
+              }
+
+            }
+            for (var j = 0; j < _subject.length; j++) {
+              _courseArray[i].subject.push({
+                name: _subject[j].name,
+                id: _subject[j].id,
+                course: 0
+              })
+              for (var z = 0; z < _course.length; z++) {
+                if (_course[z].typeid == _subject[j].id && _courseArray[i].courseid.indexOf(_course[z].courseid) !== -1) {
+                  _courseArray[i].subject[j].course++
+                }
+              }
+            }
+            let sum = 0
+            for (var j = 0; j < _courseArray[i].subject.length - 1; j++) {
+              sum += _courseArray[i].subject[j].course
+            }
+            _courseArray[i].subject[_courseArray[i].subject.length - 1].course = (_courseArray[i].courseid.length - sum) < 0 ? 0 : _courseArray[i].courseid.length - sum
+          }
+          for (var j = 0; j < _subject.length; j++) {
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _subject[j].id) {
+                _subjectCourse++
+              }
+            }
+          }
+          console.log(_courseArray);
+          this.gradeCourse = _gradeCourse / _grade.length
+          this.subjectCourse = _subjectCourse / _subject.length
+          this.courseArray = _courseArray
+
+          let _theme = res.data[14] //主题
+
+          this.typeCount = _grade.length + _subject.length + _theme.length
+          let _gradeArray = []
+          let _subjectArray = []
+          let _themeArray = []
+
+          for (var i = 0; i < _grade.length; i++) {
+            _gradeArray.push({
+              name: _grade[i].name,
+              typeid: _grade[i].id,
+              course: 0,
+              array:[]
+            })
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _grade[i].id) {
+                _gradeArray[i].course++
+                _gradeArray[i].array.push(_course[z].courseid)
+              }
+            }
+          }
+
+          for (var i = 0; i < _subject.length; i++) {
+            _subjectArray.push({
+              name: _subject[i].name,
+              typeid: _subject[i].id,
+              course: 0,
+              array: []
+            })
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _subject[i].id) {
+                _subjectArray[i].course++
+                _subjectArray[i].array.push(_course[z].courseid)
+              }
+            }
+          }
+
+
+          for (var i = 0; i < _theme.length; i++) {
+            _themeArray.push({
+              name: _theme[i].name,
+              typeid: _theme[i].id,
+              course: 0,
+              array: []
+            })
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _theme[i].id) {
+                _themeArray[i].course++
+                _themeArray[i].array.push(_course[z].courseid)
+              }
+            }
+          }
+
+
+
+          this.gradeArray = _gradeArray
+          this.subjectArray = _subjectArray
+          this.themeArray = _themeArray
+          this.allArray = [..._gradeArray, ..._subjectArray, ..._themeArray]
+          this.typeChange();
+
+          let _teachers = res.data[15][0].count //老师数量
+          let _students = res.data[16][0].count //学生数量
+          let _upCourseTeachers = res.data[17][0].count //上传课程老师的数量
+          let _gCourseTeachers = res.data[18][0].count //参与课程的老师
+          let _upCourseUsers = res.data[19][0].count //上传项目的用户
+          let _gCourseUsers = res.data[20][0].count //参与项目的用户
+          let _toolUsers = res.data[21][0].count //使用工具的用户
+          let _rateUser = res.data[22][0].count //被评价的用户
+          let _upgCourseTeachers = res.data[23][0].count //参与协同课程的老师
+          let _commentUsers = res.data[24][0].count //参与互动交流的用户
+
+          this.lightJson = {
+            users: this.count,
+            teachers: _teachers,
+            students: _students,
+            upCourseTeachers: _upCourseTeachers,
+            gCourseTeachers: _gCourseTeachers,
+            upCourseUsers: _upCourseUsers,
+            gCourseUsers: _gCourseUsers,
+            toolUsers: _toolUsers,
+            rateUser: _rateUser,
+            upgCourseTeachers: _upgCourseTeachers,
+            commentUsers: _commentUsers,
+          }
+
+
+          let _evArray = res.data[25] //目标数组
+          let _evWorkArray = res.data[26] //目标课程的作业
+          let _evCourseArray = [] //计算总分 
+          let _evCourse = [] //筛选有目标的数组 
+          for(var i = 0;i<_evWorkArray.length;i++){
+              let courseJson = JSON.parse(_evWorkArray[i].chapters)
+              let _rate = JSON.parse(_evWorkArray[i].rate)
+              delete _rate.content
+              if(courseJson[_evWorkArray[i].stage] && 
+                courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task] && 
+                courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task].eList &&
+                courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task].eList.length){
+                let _elist = courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task].eList
+                let _rateC = Object.keys(_rate)
+                let json = {}
+                for(var j = 0;j<_rateC.length;j++){
+                  for(var k = 0;k<_elist.length;k++){
+                    if(_elist[k].value == _rateC[j] && _elist[k].target){
+                      json[_elist[k].target[0]] = _rate[_rateC[j]]
+                      break;
+                    }
+                  }
+                }
+                if(Object.keys(json).length){
+                  _evCourse.push({
+                    evid:_evWorkArray[i].evaId,
+                    rateJson:json
+                  })
+                }
+              }
+          }
+          for(var i = 0;i<_evArray.length;i++){
+            _evCourseArray.push({
+              title:_evArray[i].title,
+              evid:_evArray[i].id,
+              evJson:{}
+            })
+            for(var j = 0;j<_evCourse.length;j++){
+              if(_evArray[i].id == _evCourse[j].evid){
+                let _rate = Object.keys(_evCourse[j].rateJson)
+                for(var k = 0;k<_rate.length;k++){
+                  if(_evCourseArray[i].evJson[_rate[k]]){
+                    _evCourseArray[i].evJson[_rate[k]].push(_evCourse[j].rateJson[_rate[k]])
+                  }else{
+                    _evCourseArray[i].evJson[_rate[k]] = [_evCourse[j].rateJson[_rate[k]]]
+                  }
+                }
+              }
+            }
+          }
+          for(var i = 0;i < _evCourseArray.length; i++){
+            _evCourseArray[i].indicator = []
+            _evCourseArray[i].value = []
+            let evJson = Object.keys(_evCourseArray[i].evJson)
+            for(var j = 0;j < evJson.length;j++){
+              _evCourseArray[i].indicator.push({
+                name:evJson[j],
+                max: 5 
+              })
+              let sum = 0
+              _evCourseArray[i].evJson[evJson[j]].forEach((value)=>{
+                sum+=value
+              })
+              _evCourseArray[i].value.push((sum / _evCourseArray[i].evJson[evJson[j]].length).toFixed(1))
+            }
+          }
+          this.evArray = _evArray
+          this.eva = _evArray[0].id
+          this.evCourseArray = _evCourseArray
+          this.$forceUpdate();
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    typeChange() {
+      if (this.cType === '') {
+        this.courseNumberArray = this.allArray
+      } else if (this.cType === 'grade') {
+        this.courseNumberArray = this.gradeArray
+      } else if (this.cType === 'theme') {
+        this.courseNumberArray = this.themeArray
+      } else if (this.cType === 'subject') {
+        this.courseNumberArray = this.subjectArray
+      }
+      let course = []
+      for(var i = 0;i<this.courseNumberArray.length;i++){
+        let _array = this.courseNumberArray[i].array
+        for(var j = 0; j <_array.length;j++){
+          console.log(_array[j]);
+          if(course.indexOf(_array[j]) == -1){
+            course.push(_array[j])
+          }
+        }
+      }
+      this.typeCount = this.courseNumberArray.length
+      this.typeCourseCount = course.length
+      this.$forceUpdate();
+    },
+    typeChange2(){
+
+    },
+    format(percentage) {
+      return percentage + '%';
+    },
+  },
+};
+</script>
+
+
+<style scoped>
+.body1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.left {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+}
+
+.left>.top {
+  width: 100%;
+  height: calc(100% / 5 * 2.8 - 20px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.left>.bottom {
+  width: 100%;
+  height: calc(100% / 5 * 2.2);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.center {
+  width: calc(100% / 4 * 2 - 40px);
+  height: 100%;
+  margin: 0 20px;
+}
+
+.center>.top {
+  width: 100%;
+  height: calc(100% / 5 * 2.8 - 20px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.center>.bottom {
+  width: 100%;
+  height: calc(100% / 5 * 2.2);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.right {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+}
+
+.right>.top {
+  width: 100%;
+  height: calc(100% / 5 * 2.8 - 20px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.right>.bottom {
+  width: 100%;
+  height: calc(100% / 5 * 2.2);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.titleBox {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  width: 100%;
+}
+
+.titleBox>.title {
+  font-weight: 700;
+}
+
+.dataBox {
+  height: calc(100% - 40px);
+  width: 100%;
+}
+
+.info_box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.info_box>.info2,
+.info_box>.info3,
+.info_box>.info {
+  width: calc(50% - 10px);
+  display: flex;
+  flex-direction: column;
+  height: 60px;
+  justify-content: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+
+.info_box>.info2 {
+  width: calc(100% / 4 - 10px);
+  align-items: flex-end;
+}
+
+.info_box>.info3 {
+  width: 100%;
+  margin-bottom: 5px;
+}
+
+.info_box>.info2>span:nth-child(1),
+.info_box>.info3>span:nth-child(1),
+.info_box>.info>span:nth-child(1) {
+  font-size: 12px;
+  /* margin: 0 0 5px 0; */
+  color: #565e6a;
+}
+
+.info_box>.info2>span:nth-child(2),
+.info_box>.info3>span:nth-child(2),
+.info_box>.info>span:nth-child(2) {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.blueBG {
+  background: linear-gradient(180deg,
+      rgba(224, 234, 251, 0.2) 0%,
+      rgba(54, 130, 252, 0.3) 100%);
+}
+
+.greenBG {
+  background: linear-gradient(180deg,
+      rgb(211, 246, 228, 0.2) 0%,
+      rgb(23, 196, 105, 0.3) 100%);
+}
+
+.depth_box {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  width: 95%;
+  margin: 0 auto;
+  overflow: hidden;
+  justify-content: space-between;
+}
+
+.depth {
+  width: calc(100% / 5 - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.depth>span:nth-child(1) {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 0 10px;
+}
+
+.depth>div:nth-child(1) {}
+
+.course_box {
+  display: flex;
+  height: 50%;
+  width: 95%;
+  margin: 0 auto;
+}
+
+.course_box .info_box {
+  height: 100%;
+  width: 100px;
+  flex-direction: column;
+  margin: 0;
+  flex-wrap: nowrap;
+}
+
+.course_box_p {
+  width: calc(100% - 100px);
+}
+
+.selectBox {
+  width: 80px;
+  margin-left: 10px;
+}
+
+.selectBox>>>.el-input__inner {
+  height: 30px;
+  line-height: 30px;
+}
+
+.selectBox>>>.el-input__icon {
+  line-height: 30px;
+}
+</style>

src/components/pages/dataBoardNew/school/loginCount/index.vue

@@ -0,0 +1,169 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        monthArray: {
+            type: Array,
+            default:[]
+        },
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                teacher: [],
+                student: [],
+            },
+            option: {
+                title: {
+                    text: '登录频次',
+                    textStyle:{
+                        fontSize: 12,
+                    },
+                    padding: [0, 0, 0, 10]
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['老师', '学生'],
+                    right: '10'
+                },
+                grid: {
+                    top: '30',
+                    left: '5%',
+                    right: '5%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: true,
+                    // data: ['1月', '2月', '3月', '4月', '5月', '6月']
+                    data: []
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        name: '老师',
+                        type: 'line',
+                        // data: [120, 50, 101, 130, 110, 120]
+                        areaStyle: {},
+                        data: [],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return "#106bff";
+                                    },
+                                }, 
+                        },
+                    },
+                    {
+                        name: '学生',
+                        type: 'line',
+                        areaStyle: {},
+                        // data: [220, 182, 191, 234, 290, 330]
+                        data: []
+                    },
+                ]
+            },
+        };
+    },
+    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.teacher;
+                this.option.series[1].data = option.student;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+        monthArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.ooption = {
+                    xdata: [],
+                    teacher: [],
+                    student: [],
+                }
+                let _array = newValue
+                for (var i = 0; i < _array.length; i++) {
+                    this.ooption.xdata.push(_array[i].Month + '月')
+                    this.ooption.teacher.push(_array[i].teacher)
+                    this.ooption.student.push(_array[i].student)
+                }
+
+                if (!this.chartObj) {
+                    this.setChart(this.ooption);
+                } else {
+                    this.option.xAxis.data = this.ooption.xdata;
+                    this.option.series[0].data = this.ooption.teacher;
+                    this.option.series[1].data = this.ooption.student;
+                    this.chartObj.setOption(this.option);
+                }
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        this.ooption = {
+            xdata: [],
+            teacher: [],
+            student: [],
+        }
+        let _array = this.monthArray
+        for (var i = 0; i < _array.length; i++) {
+            this.ooption.xdata.push(_array[i].Month + '月')
+            this.ooption.teacher.push(_array[i].teacher)
+            this.ooption.student.push(_array[i].student)
+        }
+        this.setChart(this.ooption);
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    /* display: flex; */
+    position: relative;
+    border-radius: 5px;
+    /* border: 1px solid #eee; */
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>
+  

src/components/pages/dataBoardNew/school/loginTime/index.vue

@@ -0,0 +1,209 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        yearArray: {
+            type: Array,
+        },
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                sdata: [],
+            },
+            option: {
+                title: {
+                    text: '在线时长',
+                    textStyle:{
+                        fontSize: 12,
+                    },
+                    padding: [10, 0, 0, 10]
+                },
+                tooltip: {
+                    position: 'top'
+                },
+                grid: {
+                    top: '50',
+                    left: '5%',
+                    right: '5%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    // data: [
+                    //     '1月', '2月', '3月', '4月', '5月', '6月', '7月',
+                    //     '8月', '9月', '10月', '11月', '12月'
+                    // ],
+                    data: [],
+                    splitArea: {
+                        show: true
+                    }
+                },
+                yAxis: {
+                    type: 'category',
+                    data: [
+                        '星期天', '星期一', '星期二', '星期三',
+                        '星期四', '星期五', '星期六',
+                    ],
+                    splitArea: {
+                        show: true
+                    },
+                },
+                visualMap: {
+                    min: 0,
+                    max: 10,
+                    calculable: true,
+                    orient: 'horizontal',
+                    right: '10',
+                    top: '0%'
+                },
+                series: [
+                    {
+                        name: '',
+                        type: 'heatmap',
+                        data: [],
+                        label: {
+                            show: true
+                        },
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ]
+            },
+        };
+    },
+    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.option.visualMap.max = option.max ? option.max : 0;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+        yearArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.ooption = {
+                    xdata: [],
+                    sdata: [],
+                    max:0
+                }
+                let _array = newValue
+                let max = []
+                for (var i = 0; i < _array.length; i++) {
+                    this.ooption.xdata.push(_array[i].Month + '月')
+                    this.ooption.sdata.push([i, 0, _array[i].sun])
+                    this.ooption.sdata.push([i, 1, _array[i].mon])
+                    this.ooption.sdata.push([i, 2, _array[i].tue])
+                    this.ooption.sdata.push([i, 3, _array[i].wed])
+                    this.ooption.sdata.push([i, 4, _array[i].thur])
+                    this.ooption.sdata.push([i, 5, _array[i].fri])
+                    this.ooption.sdata.push([i, 6, _array[i].sat])
+                    // let _data = [_array[i].Month-1,] //[月份，星期，值]
+                    max.push(_array[i].sun)
+                    max.push(_array[i].mon)
+                    max.push(_array[i].tue)
+                    max.push(_array[i].wed)
+                    max.push(_array[i].thur)
+                    max.push(_array[i].fri)
+                    max.push(_array[i].sat)
+                }
+                this.ooption.max = max.sort(function(a,b){
+                    return b-a;
+                })[0];
+                if (!this.chartObj) {
+                    this.setChart(this.ooption);
+                } else {
+                    this.option.xAxis.data = this.ooption.xdata;
+                    this.option.series[0].data = this.ooption.sdata;
+                    this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
+                    this.chartObj.setOption(this.option);
+                }
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        this.ooption = {
+            xdata: [],
+            sdata: [],
+            max:0
+        }
+        let _array = this.yearArray
+        let max = []
+        for (var i = 0; i < _array.length; i++) {
+            this.ooption.xdata.push(_array[i].Month + '月')
+            this.ooption.sdata.push([i, 0, _array[i].sun])
+            this.ooption.sdata.push([i, 1, _array[i].mon])
+            this.ooption.sdata.push([i, 2, _array[i].tue])
+            this.ooption.sdata.push([i, 3, _array[i].wed])
+            this.ooption.sdata.push([i, 4, _array[i].thur])
+            this.ooption.sdata.push([i, 5, _array[i].fri])
+            this.ooption.sdata.push([i, 6, _array[i].sat])
+            // let _data = [_array[i].Month-1,] //[月份，星期，值]
+            max.push(_array[i].sun)
+            max.push(_array[i].mon)
+            max.push(_array[i].tue)
+            max.push(_array[i].wed)
+            max.push(_array[i].thur)
+            max.push(_array[i].fri)
+            max.push(_array[i].sat)
+        }
+        this.ooption.max = max.sort(function(a,b){
+                    return b-a;
+                })[0];
+                
+        this.setChart(this.ooption);
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    position: relative;
+    border-radius: 5px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>
+  

src/components/pages/dataBoardNew/school/studentInfo/index.vue

@@ -0,0 +1,159 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%" v-if="this.ooption.xdata.length">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+        <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;"
+            v-show="!this.ooption.xdata.length">暂无数据</div>
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        evCourseArray: {
+            type: Array,
+            default: []
+        },
+        eva: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                sdata: [],
+            },
+            option: {
+                tooltip: {},
+                radar: {
+                    axisName: {
+                        color: "#000"
+                    },
+                    // shape: 'circle',
+                    indicator: [
+                        // { name: '目标一', max: 5 },
+                        // { name: '目标二', max: 5 },
+                        // { name: '目标三', max: 5 },
+                        // { name: '目标四', max: 5 },
+                        // { name: '目标五', max: 5 }
+                    ]
+                },
+                series: [
+                    {
+                        name: '学生综合评价',
+                        type: 'radar',
+                        data: [
+                            {
+                                areaStyle: {
+                                    opacity: 0.2,
+                                    color: '#0061FF'
+                                },
+                                itemStyle: {
+                                    color: '#0061FF',
+                                    lineStyle: {
+                                    color: '#0061FF'
+                                    }
+                                },
+                                // 5, 4, 3, 5, 5, 2
+                                value: [],
+                                name: ''
+                            }
+                        ]
+                    }
+                ]
+            },
+        };
+    },
+    methods: {
+        setChart(option) {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = this.$echarts.init(
+                    //劳动课程
+                    this.$el.querySelector("#charts_canvas")
+                );
+                this.option.radar.indicator = option.xdata;
+                this.option.series[0].data[0].value = option.sdata;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+        setArray(array) {
+            this.ooption = {
+                xdata: [],
+                sdata: [],
+            }
+            for (var i = 0; i < array.length; i++) {
+                if (array[i].evid == this.eva) {
+                    this.ooption.xdata = array[i].indicator
+                    this.ooption.sdata = array[i].value
+                    break;
+                }
+            }
+            setTimeout(() => {
+                // if (!this.chartObj) {
+                this.setChart(this.ooption);
+                // } else {
+                //     this.option.radar.indicator = this.ooption.xdata;
+                //     this.option.series[0].data[0].value = this.ooption.sdata;
+                //     this.chartObj.setOption(this.option);
+                // }
+            }, 100);
+            this.$forceUpdate();
+        },
+    },
+    watch: {
+        evCourseArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.setArray(newValue)
+                this.$forceUpdate();
+            },
+        },
+        eva: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.setArray(this.evCourseArray)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        this.setArray(this.evCourseArray)
+        // this.setChart(this.ooption);
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    /* display: flex; */
+    position: relative;
+    border-radius: 5px;
+    /* border: 1px solid #eee; */
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>
+  

src/components/pages/dataBoardNew/school/teacherInfo/index.vue

@@ -0,0 +1,238 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        courseArray: {
+            type: Array,
+        },
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                hours: [],
+                days: [],
+                data: [],
+            },
+            option: {
+                tooltip: {
+                    position: 'top',
+                    formatter: function (params) {
+                        // console.log(params);
+                        return params.marker + params.name + ' ' + params.data[1];//params.seriesName + '<br>' + params.
+
+                    }
+                },
+                title: [],
+                singleAxis: [],
+                series: []
+            },
+        };
+    },
+    methods: {
+        setChart(option) {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = this.$echarts.init(
+                    //劳动课程
+                    this.$el.querySelector("#charts_canvas")
+                );
+                const hours = option.hours
+                // [
+                //     // '语文', '数学', '英语', '科学', '体育', '音乐', '美术',
+                //     // '劳动', '其他',
+                // ];
+                // prettier-ignore
+                const days = option.days
+                // [
+                //     // '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
+                // ];
+                // prettier-ignore
+                const data = option.data
+                // [
+                //     // [0, 0, 2], [0, 1, 1], [0, 2, 3], [0, 3, 0], [0, 4, 5], [0, 5, 5], [0, 6, 7], [0, 7, 8], [0, 8, 1],
+                //     // [1, 0, 5], [1, 1, 1], [1, 2, 2], [1, 3, 0], [1, 4, 5], [1, 5, 7], [1, 6, 7], [1, 7, 8], [1, 8, 6],
+                //     // [2, 0, 5], [2, 1, 2], [2, 2, 0], [2, 3, 2], [2, 4, 1], [2, 5, 5], [2, 6, 4], [2, 7, 4], [2, 8, 1],
+                //     // [3, 0, 1], [3, 1, 1], [3, 2, 1], [3, 3, 0], [3, 4, 5], [3, 5, 2], [3, 6, 7], [3, 7, 8], [3, 8, 5],
+                //     // [4, 0, 5], [4, 1, 3], [4, 2, 0], [4, 3, 3], [4, 4, 4], [4, 5, 2], [4, 6, 3], [4, 7, 5], [4, 8, 1],
+                //     // [5, 0, 5], [5, 1, 1], [5, 2, 0], [5, 3, 0], [5, 4, 5], [5, 5, 5], [5, 6, 7], [5, 7, 8], [5, 8, 3],
+                // ];
+                const title = [];
+                const singleAxis = [];
+                const series = [];
+                days.forEach(function (day, idx) {
+                    title.push({
+                        textBaseline: 'middle',
+                        top: ((idx + 0.5) * 90) / days.length + '%',
+                        text: day,
+                        textStyle: {
+                            fontSize: 12,
+                        },
+                    });
+                    singleAxis.push({
+                        left: 70,
+                        type: 'category',
+                        boundaryGap: false,
+                        data: hours,
+                        top: (idx * 90) / days.length + 5 + '%',
+                        height: 90 / days.length - 10 + '%'
+                    });
+                    series.push({
+                        singleAxisIndex: idx,
+                        coordinateSystem: 'singleAxis',
+                        type: 'scatter',
+                        data: [],
+                        symbolSize: function (dataItem) {
+                            return dataItem[1] * 3;
+                        }
+                    });
+                });
+                data.forEach(function (dataItem) {
+                    series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
+                });
+                chartObj.off('click')
+                let _this = this
+                chartObj.on('click', function (param) {  
+                    //param参数包含的内容有： 
+                    //param.name：X轴的值 
+                    //param.data：Y轴的值 
+                    //param.value：Y轴的值 
+                    //param.type：点击事件均为click 
+                    //param.seriesName：legend的名称 
+                    //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个） 
+                    //param.dataIndex：数值序列（X轴上当前点是第几个点）
+                    //alert(param.seriesName);  //legend的名称
+                    console.log(param);  //X轴的值
+                    _this.$emit('openCourse',param.componentIndex,param.data[0])
+                });
+
+                this.option.title = title
+                this.option.singleAxis = singleAxis
+                this.option.series = series
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+        setJson(array) {
+            if (array != undefined && array.length > 0) {
+                this.ooption = {
+                    hours: [],
+                    days: [],
+                    data: [],
+                }
+                let _grade = []
+                let _subject = []
+                let data = []
+
+                array.forEach(function (item, idx) {
+                    _grade.push(item.name)
+                })
+
+                array[0].subject.forEach(function (item, idx) {
+                    _subject.push(item.name)
+                })
+                array.forEach(function (item, idx) {
+                    item.subject.forEach(function (item2, idx2) {
+                        data.push([idx, idx2, item2.course])
+                    })
+                })
+                this.ooption.hours = _subject
+                this.ooption.days = _grade
+                this.ooption.data = data
+                if (!this.chartObj) {
+                    this.setChart(this.ooption);
+                } else {
+                    const hours = this.ooption.hours;
+                    // prettier-ignore
+                    const days = this.ooption.days;
+                    // prettier-ignore
+                    const data = this.ooption.data;
+                    const title = [];
+                    const singleAxis = [];
+                    const series = [];
+                    days.forEach(function (day, idx) {
+                        title.push({
+                            textBaseline: 'middle',
+                            top: ((idx + 0.5) * 90) / days.length + '%',
+                            text: day,
+                            textStyle: {
+                                fontSize: 12,
+                            },
+                        });
+                        singleAxis.push({
+                            left: 70,
+                            type: 'category',
+                            boundaryGap: false,
+                            data: hours,
+                            top: (idx * 90) / days.length + 5 + '%',
+                            height: 90 / days.length - 10 + '%'
+                        });
+                        series.push({
+                            singleAxisIndex: idx,
+                            coordinateSystem: 'singleAxis',
+                            type: 'scatter',
+                            data: [],
+                            symbolSize: function (dataItem) {
+                                return dataItem[1] * 3;
+                            }
+                        });
+                    });
+                    data.forEach(function (dataItem) {
+                        series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
+                    });
+
+                    this.option.title = title
+                    this.option.singleAxis = singleAxis
+                    this.option.series = series
+                    this.chartObj.setOption(this.option);
+                }
+            }
+        }
+    },
+    watch: {
+        courseArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.setJson(newValue)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        this.setJson(this.courseArray)
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    position: relative;
+    border-radius: 5px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>
+  

src/components/pages/dataBoardNew/student/index.vue

@@ -0,0 +1,668 @@
+<template>
+  <div class="body1" v-loading="isLoading">
+    <!-- 学生数据 -->
+    <div class="left">
+      <div class="top">
+        <div class="titleBox">
+          <div class="title">基础概况</div>
+        </div>
+        <div class="dataBox">
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>学生总数</span>
+              <span>{{ count }}</span>
+            </div>
+            <div class="info greenBG">
+              <span>周使用频次</span>
+              <span>{{weekCount}}</span>
+            </div>
+            <div class="info blueBG">
+              <span>登录频次</span>
+              <span>{{ loginCount }}</span>
+            </div>
+            <div class="info greenBG">
+              <span>人均使用频次</span>
+              <span>{{ (loginCount / count).toFixed(0) }}</span>
+            </div>
+          </div>
+          <loginCount :monthArray="loginCountMonthArray" style="height: calc(100% - 140px)"></loginCount>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">学生行为数据</div>
+        </div>
+        <div class="dataBox">
+          <stuAct style="height: calc(100% - 20px)" :courseClass="courseClass"></stuAct>
+        </div>
+      </div>
+    </div>
+    <div class="center">
+      <div class="top">
+        <div class="titleBox">
+          <div class="title">学生综合评价</div>
+        </div>
+        <div class="dataBox">
+          <div class="info_box" style="width: 95%; justify-content: flex-start">
+            <div class="info2 blueBG">
+              <span>学生总数</span>
+              <span>{{ count }}</span>
+            </div>
+            <div class="info2 greenBG">
+              <span>班级总数</span>
+              <span>{{classList.length}}</span>
+            </div>
+            <div class="info2 blueBG">
+              <span>平均得分</span>
+              <span>{{scoreJun}}</span>
+            </div>
+          </div>
+          <studentInfo style="height: calc(100% - 70px)" :EscoreArray2="EscoreArray2" @openDataClass="openDataClass"></studentInfo>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">平台使用深度</div>
+        </div>
+        <div class="dataBox">
+          <div class="depth_box">
+            <div class="depth">
+              <span>参与课程</span>
+              <div>
+                <el-progress
+                  :width="90"
+                  type="circle"
+                  :percentage="lightJson.course ? ((lightJson.course / count) * 100).toFixed(0) : 0"
+                  :stroke-width="15"
+                  :format="format"
+                  color="#106BFF"
+                ></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>参与项目</span>
+              <div>
+                <el-progress
+                  :width="90"
+                  type="circle"
+                  :percentage="lightJson.scourse ? ((lightJson.scourse / count) * 100).toFixed(0) : 0"
+                  :stroke-width="15"
+                  :format="format"
+                  color="#106BFF"
+                ></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>使用工具</span>
+              <div>
+                <el-progress
+                  :width="90"
+                  type="circle"
+                  :percentage="lightJson.tools ? ((lightJson.tools / count) * 100).toFixed(0) : 0"
+                  :stroke-width="15"
+                  :format="format"
+                  color="#106BFF"
+                ></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>协同合作</span>
+              <div>
+                <el-progress
+                  :width="90"
+                  type="circle"
+                  :percentage="lightJson.xcourse ? ((lightJson.xcourse / count) * 100).toFixed(0) : 0"
+                  :stroke-width="15"
+                  :format="format"
+                  color="#106BFF"
+                ></el-progress>
+              </div>
+            </div>
+            <div class="depth">
+              <span>互动交流</span>
+              <div>
+                <el-progress
+                  :width="90"
+                  type="circle"
+                  :percentage="lightJson.exchange ? ((lightJson.exchange / count) * 100).toFixed(0) : 0"
+                  :stroke-width="15"
+                  :format="format"
+                  color="#106BFF"
+                ></el-progress>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="top">
+        <div class="titleBox">
+          <div class="title">学生综合评价</div>
+          <el-select v-model="eva" @focus="setMinWidth" class="selectBox" style="width: 150px;">
+            <el-option v-for="item in evArray" :key="item.id" :label="item.title" :value="item.id" :style="{'width': minWidth + 2 + 'px'}"></el-option>
+          </el-select>
+        </div>
+        <div class="dataBox">
+          <studentInfo2 :evCourseArray="evCourseArray" :eva="eva"></studentInfo2>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">在线时长</div>
+        </div>
+        <div class="dataBox">
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>累计在线时长</span>
+              <span>{{ loginTime.toFixed(0) }}小时</span>
+            </div>
+            <div class="info greenBG">
+              <span>学生在线平均时长</span>
+              <span>{{ (loginTime / count).toFixed(0) }}小时</span>
+            </div>
+          </div>
+          <loginTime style="height: calc(100% - 70px)" :EloginTimeArray="EloginTimeArray"></loginTime>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import loginCount from "./loginCount";
+import studentInfo from "./studentInfo";
+import studentInfo2 from "./studentInfo2";
+import loginTime from "./loginTime";
+import stuAct from "./stuAct";
+export default {
+  props: {
+    oid: {
+      type: String,
+    },
+    org: {
+      type: String,
+    },
+  },
+  components: {
+    loginCount,
+    studentInfo,
+    studentInfo2,
+    loginTime,
+    stuAct,
+  },
+  data() {
+    return {
+      isLoading: false,
+      count: 0,
+      loginCount: 0,
+      loginTime: 0,
+      loginCountMonthArray:[],
+      weekCount:0,
+      classList:[],
+      scoreJun:0,
+      evArray:[],
+      eva:'',
+      evCourseArray:[],
+      minWidth:0,
+      courseClass:[],
+      lightJson: {
+        course:0,
+        scourse:0,
+        tools:0,
+        xcourse:0,
+        exchange:0,
+      },
+      EloginTimeArray:[],
+      EscoreArray2:[],
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    openDataClass(classIndex){
+      console.log(classIndex);
+      console.log(this.EscoreArray2[classIndex]);
+      window.parent.postMessage(
+        { 
+          tools: "openDataClass",
+          classid: this.EscoreArray2[classIndex].id,
+        }, 
+        "*"
+      );
+    },
+    setMinWidth (val) {
+      this.minWidth = val.srcElement.clientWidth
+    },
+    getData() {
+      this.isLoading = true;
+      let params = [
+        {
+          oid: this.oid,
+          org: this.org,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "selectDataBoardStudent", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.count = res.data[0][0].count;
+          this.loginCount = res.data[1][0].loginCount;
+          this.loginTime = parseInt(res.data[2][0].time) / 60 / 60;
+
+
+
+          let loginCountMonthArray = []
+          const date = new Date()
+          var Month = date.getMonth() + 1
+          var Year = date.getFullYear()
+          for (var i = Month; i > Month - 6; i--) {
+            if (i <= 0) {
+              loginCountMonthArray.push({
+                Year: Year - 1,
+                Month: 12 + i,
+                student: 0,
+              })
+            } else {
+              loginCountMonthArray.push({
+                Month: i,
+                Year: Year,
+                student: 0,
+              })
+            }
+          }
+
+          loginCountMonthArray = loginCountMonthArray.reverse()
+          let studentLoginCountYear = res.data[3] // 学生半年登录次数统计
+
+          for (var i = 0; i < studentLoginCountYear.length; i++) {
+            let _date = new Date(studentLoginCountYear[i].create_at)
+            var _month = _date.getMonth() + 1
+            var _year = _date.getFullYear()
+            for (var j = 0; j < loginCountMonthArray.length; j++) {
+              if (_month == loginCountMonthArray[j].Month && _year == loginCountMonthArray[j].Year) {
+                loginCountMonthArray[j].student++
+                break;
+              }
+            }
+          }
+          this.loginCountMonthArray = loginCountMonthArray;
+          console.log(loginCountMonthArray);
+
+          this.weekCount = res.data[4][0].count
+          let _classList = res.data[5]
+          this.classList = _classList
+          let _scoreArray = res.data[6]
+          let _sumScore = 0
+          for(var i = 0; i< _scoreArray.length;i++){
+            let _score = JSON.parse(_scoreArray[i].score)
+            _sumScore += _score.wScore
+          }
+          this.scoreJun = (_sumScore / _scoreArray.length).toFixed(0)
+
+
+          let _evArray = res.data[7] //目标数组
+          let _evWorkArray = res.data[8] //目标课程的作业
+          let _evCourseArray = [] //计算总分 
+          let _evCourse = [] //筛选有目标的数组 
+          for(var i = 0;i<_evWorkArray.length;i++){
+              let courseJson = JSON.parse(_evWorkArray[i].chapters)
+              let _rate = JSON.parse(_evWorkArray[i].rate)
+              delete _rate.content
+              if(courseJson[_evWorkArray[i].stage] && 
+                courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task] && 
+                courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task].eList &&
+                courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task].eList.length){
+                let _elist = courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task].eList
+                let _rateC = Object.keys(_rate)
+                let json = {}
+                for(var j = 0;j<_rateC.length;j++){
+                  for(var k = 0;k<_elist.length;k++){
+                    if(_elist[k].value == _rateC[j] && _elist[k].target){
+                      json[_elist[k].target[0]] = _rate[_rateC[j]]
+                      break;
+                    }
+                  }
+                }
+                if(Object.keys(json).length){
+                  _evCourse.push({
+                    evid:_evWorkArray[i].evaId,
+                    rateJson:json
+                  })
+                }
+              }
+          }
+          for(var i = 0;i<_evArray.length;i++){
+            _evCourseArray.push({
+              title:_evArray[i].title,
+              evid:_evArray[i].id,
+              evJson:{}
+            })
+            for(var j = 0;j<_evCourse.length;j++){
+              if(_evArray[i].id == _evCourse[j].evid){
+                let _rate = Object.keys(_evCourse[j].rateJson)
+                for(var k = 0;k<_rate.length;k++){
+                  if(_evCourseArray[i].evJson[_rate[k]]){
+                    _evCourseArray[i].evJson[_rate[k]].push(_evCourse[j].rateJson[_rate[k]])
+                  }else{
+                    _evCourseArray[i].evJson[_rate[k]] = [_evCourse[j].rateJson[_rate[k]]]
+                  }
+                }
+              }
+            }
+          }
+          for(var i = 0;i < _evCourseArray.length; i++){
+            _evCourseArray[i].indicator = []
+            _evCourseArray[i].value = []
+            let evJson = Object.keys(_evCourseArray[i].evJson)
+            for(var j = 0;j < evJson.length;j++){
+              _evCourseArray[i].indicator.push({
+                name:evJson[j],
+                max: 5 
+              })
+              let sum = 0
+              _evCourseArray[i].evJson[evJson[j]].forEach((value)=>{
+                sum+=value
+              })
+              _evCourseArray[i].value.push((sum / _evCourseArray[i].evJson[evJson[j]].length).toFixed(1))
+            }
+          }
+          this.evArray = _evArray
+          this.eva = _evArray[0].id
+          this.evCourseArray = _evCourseArray
+
+          let _courseClassArray = res.data[9] //作业带课程
+          let _courseClass = []
+          for(var i = 0;i<_classList.length;i++){
+            _courseClass.push({
+              name:_classList[i].name,
+              works:0,
+              id:_classList[i].id
+            })
+            for(var j = 0;j<_courseClassArray.length;j++){
+              if(_courseClassArray[j].classid.indexOf(_classList[i].id) != -1){
+                _courseClass[i].works++
+              }
+            }
+          }
+          this.courseClass = _courseClass
+
+          let _lcourse = res.data[10][0].num //参与课程数量
+          let _lscourse = res.data[11][0].num //参与项目
+          let _ltools = res.data[12][0].num //使用工具
+          let _lxcourse = res.data[13][0].num //协同合作
+          let _lexchange = res.data[14][0].num //互动交流
+
+          this.lightJson = {
+            course:_lcourse,
+            scourse:_lscourse,
+            tools:_ltools,
+            xcourse:_lxcourse,
+            exchange:_lexchange,
+          }
+
+          let _loginTimeArray = res.data[15] //在线时间
+          let _scoreArray2 = res.data[16] //得分
+
+
+          let _EloginTimeArray = []
+          for (let i = 0; i < _classList.length; i++) {
+            _EloginTimeArray.push({
+              id:_classList[i].id,
+              name:_classList[i].name,
+              loginTime:0
+            })
+            for (let j = 0; j < _loginTimeArray.length; j++) {
+              const _user = _loginTimeArray[j];
+              if(_user.classid.indexOf(_classList[i].id) != -1){
+                _EloginTimeArray[i].loginTime += _user.time
+              }
+            }
+            _EloginTimeArray[i].loginTime = (_EloginTimeArray[i].loginTime / 60).toFixed(2) //换算成小时
+          }
+          this.EloginTimeArray = _EloginTimeArray
+          let _EscoreArray2 = []
+          for (let i = 0; i < _classList.length; i++) {
+            _EscoreArray2.push({
+              id:_classList[i].id,
+              name:_classList[i].name,
+              max:0,
+              min:0,
+              score:[]
+            })
+            for (let j = 0; j < _scoreArray2.length; j++) {
+              const _user = _scoreArray2[j];
+              if(_user.classid.indexOf(_classList[i].id) != -1){
+                _EscoreArray2[i].score.push(_user.score)
+              }
+            }
+            if(_EscoreArray2[i].score.length){
+              _EscoreArray2[i].score = _EscoreArray2[i].score.sort((i, j) => {
+                return i-j; 
+              })
+              _EscoreArray2[i].max = _EscoreArray2[i].score[_EscoreArray2[i].score.length-1]
+              _EscoreArray2[i].min = _EscoreArray2[i].score[0]
+            }
+          }
+          this.EscoreArray2 = _EscoreArray2
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    format(percentage) {
+      return percentage + '%';
+    },
+  },
+};
+</script>
+
+
+<style scoped>
+.body1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.left {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+}
+
+.left > .top {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.left > .bottom {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.center {
+  width: calc(100% / 4 * 2 - 40px);
+  height: 100%;
+  margin: 0 20px;
+}
+
+.center > .top {
+  width: 100%;
+  height: calc(100% / 6 * 4 - 10px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.center > .bottom {
+  width: 100%;
+  height: calc(100% / 6 * 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.right {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+}
+
+.right > .top {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.right > .bottom {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.titleBox {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  width: 100%;
+}
+
+.dataBox {
+  height: calc(100% - 40px);
+  width: 100%;
+}
+
+.titleBox {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  width: 100%;
+}
+
+.titleBox > .title {
+  font-weight: 700;
+}
+
+.dataBox {
+  height: calc(100% - 40px);
+  width: 100%;
+}
+
+.info_box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.info_box > .info2,
+.info_box > .info3,
+.info_box > .info {
+  width: calc(50% - 10px);
+  display: flex;
+  flex-direction: column;
+  height: 60px;
+  justify-content: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+
+.info_box > .info2 {
+  width: calc(100% / 4 - 10px);
+  align-items: flex-end;
+  margin-right: 10px;
+}
+
+.info_box > .info3 {
+  width: 100%;
+  margin-bottom: 5px;
+}
+
+.info_box > .info2 > span:nth-child(1),
+.info_box > .info3 > span:nth-child(1),
+.info_box > .info > span:nth-child(1) {
+  font-size: 12px;
+  /* margin: 0 0 5px 0; */
+  color: #565e6a;
+}
+
+.info_box > .info2 > span:nth-child(2),
+.info_box > .info3 > span:nth-child(2),
+.info_box > .info > span:nth-child(2) {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.blueBG {
+  background: linear-gradient(
+    180deg,
+    rgba(224, 234, 251, 0.2) 0%,
+    rgba(54, 130, 252, 0.3) 100%
+  );
+}
+
+.greenBG {
+  background: linear-gradient(
+    180deg,
+    rgb(211, 246, 228, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  );
+}
+
+.depth_box {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  width: 95%;
+  margin: 0 auto;
+  overflow: hidden;
+  justify-content: space-between;
+}
+
+.depth {
+  width: calc(100% / 5 - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.depth > span:nth-child(1) {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 0 10px;
+}
+.depth > div:nth-child(1) {
+}
+
+.selectBox {
+  width: 80px;
+  margin-left: 10px;
+}
+
+.selectBox>>>.el-input__inner {
+  height: 30px;
+  line-height: 30px;
+}
+
+.selectBox>>>.el-input__icon {
+  line-height: 30px;
+}
+</style>

src/components/pages/dataBoardNew/student/loginCount/index.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        monthArray: {
+            type: Array,
+        },
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                student: [],
+            },
+            option: {
+                title: {
+                    text: '登录频次',
+                    textStyle:{
+                        fontSize: 12,
+                    },
+                    padding: [0, 0, 0, 10]
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                grid: {
+                    top:'15%',
+                    left: '5%',
+                    right: '5%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: true,
+                    // data: ['1月', '2月', '3月', '4月', '5月', '6月']
+                    data: []
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        name: '学生',
+                        type: 'line',
+                        areaStyle:{},
+                        // data: [220, 182, 191, 234, 290, 330]
+                        data: []
+                    },
+                ]
+            },
+        };
+    },
+    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.student;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+        monthArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.ooption = {
+                    xdata: [],
+                    student: [],
+                }
+                let _array = newValue
+                for (var i = 0; i < _array.length; i++) {
+                    this.ooption.xdata.push(_array[i].Month + '月')
+                    this.ooption.student.push(_array[i].student)
+                }
+
+                if (!this.chartObj) {
+                    this.setChart(this.ooption);
+                } else {
+                    this.option.xAxis.data = this.ooption.xdata;
+                    this.option.series[0].data = this.ooption.student;
+                    this.chartObj.setOption(this.option);
+                }
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        this.ooption = {
+            xdata: [],
+            student: [],
+        }
+        let _array = this.monthArray
+        for (var i = 0; i < _array.length; i++) {
+            this.ooption.xdata.push(_array[i].Month + '月')
+            this.ooption.student.push(_array[i].student)
+        }
+        this.setChart(this.ooption);
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    /* display: flex; */
+    position: relative;
+    border-radius: 5px;
+    /* border: 1px solid #eee; */
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>
+  

src/components/pages/dataBoardNew/student/loginTime/index.vue

@@ -0,0 +1,156 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        EloginTimeArray: {
+            type: Array,
+        },
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                data: [],
+            },
+            option: {
+                title: {
+                    text: '在线时长',
+                    textStyle: {
+                        fontSize: 12,
+                    },
+                    padding: [5, 0, 0, 10]
+                },
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        type: "shadow",
+                    },
+                },
+                dataZoom: [
+                    {
+                        // start: 50,
+                        type: 'inside',
+                        yAxisIndex: 0
+                    },
+                    {
+                        type: 'slider',
+                        yAxisIndex: 0
+                    }
+                ],
+                grid: {
+                    top: '10%',
+                    left: '5%',
+                    right: '10%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+                    boundaryGap: [0, 0.01]
+                },
+
+                yAxis: {
+                    type: 'category',
+                    // data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
+                    data: []
+                },
+                series: [
+                    {
+                        name: "在线时长（时）",
+                        type: 'bar',
+                        // data: [180, 50, 70, 90, 100, 130],
+                        data: [],
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    return "#106bff";
+                                },
+                            },
+                        },
+                    }
+                ]
+            },
+        };
+    },
+    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.data;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+        setArray(Array) {
+            this.ooption = {
+                xdata: [],
+                data: [],
+            }
+            let _array = Array
+            for (var i = 0; i < _array.length; i++) {
+                this.ooption.xdata.push(_array[i].name)
+                this.ooption.data.push(_array[i].loginTime)
+            }
+
+            if (!this.chartObj) {
+                this.setChart(this.ooption);
+            } else {
+                this.option.yAxis.data = this.ooption.xdata;
+                this.option.series[0].data = this.ooption.data;
+                this.chartObj.setOption(this.option);
+            }
+        }
+    },
+    watch: {
+        EloginTimeArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.setArray(newValue)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        this.setArray(this.EloginTimeArray)
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    position: relative;
+    border-radius: 5px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>
+  

src/components/pages/dataBoardNew/student/stuAct/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%;">
+      <el-table
+        :data="tableData"
+        style="width: 100%;"
+        :header-cell-style="{ background: '#E0EAFB', color:'#000' }"
+        :row-class-name="tableRowClassName"
+        class="tableClass"
+      >
+      <el-table-column label="排行" min-width="50" align="center">
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="班级名称"
+          min-width="80"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="sum" label="作业数量" min-width="80" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    courseClass: {
+      type: Array,
+      default: []
+    },
+  },
+  data() {
+    return {
+      tableData: [
+        // { rank: "1", name: "一年级", sum: "2356" },
+        // { rank: "2", name: "二年级", sum: "2256" },
+        // { rank: "3", name: "三年级", sum: "2156" },
+        // { rank: "4", name: "四年级", sum: "1356" },
+        // { rank: "5", name: "五年级", sum: "1256" },
+        // { rank: "6", name: "六年级", sum: "1056" },
+        // { rank: "7", name: "七年级", sum: "956" },
+        // { rank: "8", name: "八年级", sum: "856" },
+      ],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    setArray(array){
+      this.tableData = []
+      for(var i = 0;i<array.length;i++){
+        this.tableData.push({
+          sum:array[i].works,
+          name:array[i].name
+        })
+      }
+      this.tableData = this.tableData.sort(function(a,b){
+        return b.sum - a.sum;
+      })
+    }
+  },
+  watch: {
+    courseClass: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.courseClass)
+  },
+};
+</script>
+
+<style scoped>
+.el-table >>> .even_row {
+  background-color: #f2f7ff !important;
+}
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+  overflow: auto;
+}
+
+.tableClass >>> td, .tableClass >>> th{
+  padding: 5px 0;
+}
+</style>

src/components/pages/dataBoardNew/student/studentInfo/index.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        EscoreArray2: {
+            type: Array,
+        },
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                sdata: [],
+            },
+            option: {
+                xAxis: {
+                    // data: ['一年级一班', '一年级二班', '一年级三班', '一年级四班', '一年级五班', '一年级六班', '一年级七班']
+                    data: []
+                },
+                tooltip: {
+                    formatter: function (params, ticket, callback) {
+                        return `${params.marker + params.name}</br>最高分：${params.value[2]}</br>最低分：${params.value[1]}`;
+                    }
+                },
+                dataZoom: [
+                    {
+                        // start: 50,
+                        type: 'inside',
+                    },
+                    {
+                        type: 'slider',
+                    }
+                ],
+                yAxis: {},
+                grid: {
+                    top: '5%',
+                    left: '0%',
+                    right: '0%',
+                    bottom: '13%',
+                    containLabel: true
+                },
+                series: [
+                    {
+                        type: 'candlestick',
+                        data: [
+                            // [70, 80, 70, 80],
+                            // [60, 90, 60, 90],
+                            // [50, 80, 50, 80],
+                            // [78, 88, 78, 88],
+                            // [85, 98, 85, 98],
+                            // [75, 95, 75, 95],
+                            // [65, 100, 65, 100],
+                            // [55, 99, 55, 99]
+                        ],
+                        itemStyle: {
+                            color: '#17C469',
+                            borderColor: null
+                        }
+                    }
+                ]
+            },
+        };
+    },
+    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;
+                chartObj.off('click')
+                let _this = this
+                chartObj.on('click', function (param) {
+                    console.log(param);  //X轴的值
+                    _this.$emit('openDataClass', param.dataIndex)
+                });
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+        setArray(Array) {
+            this.ooption = {
+                xdata: [],
+                sdata: [],
+            }
+            let _array = Array
+            for (var i = 0; i < _array.length; i++) {
+                this.ooption.xdata.push(_array[i].name)
+                this.ooption.sdata.push([_array[i].min, _array[i].max, _array[i].min, _array[i].max])
+            }
+
+            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);
+            }
+        }
+    },
+    watch: {
+        EscoreArray2: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.setArray(newValue)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        this.setArray(this.EscoreArray2)
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    /* display: flex; */
+    position: relative;
+    border-radius: 5px;
+    /* border: 1px solid #eee; */
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>
+  

src/components/pages/dataBoardNew/student/studentInfo2/index.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%" v-if="this.ooption.xdata.length">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+        <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;" v-show="!this.ooption.xdata.length">暂无数据</div>
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        evCourseArray: {
+            type: Array,
+            default: []
+        },
+        eva: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                sdata: [],
+            },
+            option: {
+                tooltip: {},
+                radar: {
+                    axisName: {
+                        color: "#000"
+                    },
+                    // shape: 'circle',
+                    indicator: [
+                        // { name: '目标一', max: 5 },
+                        // { name: '目标二', max: 5 },
+                        // { name: '目标三', max: 5 },
+                        // { name: '目标四', max: 5 },
+                        // { name: '目标五', max: 5 }
+                    ]
+                },
+                series: [
+                    {
+                        name: '学生综合评价',
+                        type: 'radar',
+                        data: [
+                            {
+                                areaStyle: {
+                                    opacity: 0.2,
+                                    color: '#0061FF'
+                                },
+                                itemStyle: {
+                                    color: '#0061FF',
+                                    lineStyle: {
+                                    color: '#0061FF'
+                                    }
+                                },
+                                // 5, 4, 3, 5, 5, 2
+                                value: [],
+                                name: ''
+                            }
+                        ]
+                    }
+                ]
+            },
+        };
+    },
+    methods: {
+        setChart(option) {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = this.$echarts.init(
+                    //劳动课程
+                    this.$el.querySelector("#charts_canvas")
+                );
+                this.option.radar.indicator = option.xdata;
+                this.option.series[0].data[0].value = option.sdata;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+        setArray(array) {
+            this.ooption = {
+                xdata: [],
+                sdata: [],
+            }
+            for(var i = 0;i<array.length;i++){
+                if(array[i].evid == this.eva){
+                    this.ooption.xdata = array[i].indicator
+                    this.ooption.sdata = array[i].value
+                    break;
+                }
+            }
+            setTimeout(() => {
+                // if (!this.chartObj) {
+                    this.setChart(this.ooption);
+                // } else {
+                //     this.option.radar.indicator = this.ooption.xdata;
+                //     this.option.series[0].data[0].value = this.ooption.sdata;
+                //     this.chartObj.setOption(this.option);
+                // }
+            }, 100);
+            this.$forceUpdate();
+        },
+    },
+    watch: {
+        evCourseArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.setArray(newValue)
+                this.$forceUpdate();
+            },
+        },
+        eva: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.setArray(this.evCourseArray)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        this.setArray(this.evCourseArray)
+        // this.setChart(this.ooption);
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    /* display: flex; */
+    position: relative;
+    border-radius: 5px;
+    /* border: 1px solid #eee; */
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>
+  

src/components/pages/dataBoardNew/teacher/chartList/funPlot.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    pusaDep: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        tooltip: {
+          trigger: "item",
+          formatter: "{b} : {c}%",
+        },
+        legend: {
+          data: ["评价", "授课", "创建", "登录"],
+        },
+        series: [
+          {
+            type: "funnel",
+            left: "10%",
+            top: 60,
+            bottom: 20,
+            width: "95%",
+            min: 0,
+            max: 100,
+            minSize: "0%",
+            maxSize: "100%",
+            sort: "descending",
+            label: {
+              show: true,
+              position: "inside",
+            },
+            labelLine: {
+              length: 10,
+              lineStyle: {
+                width: 1,
+                type: "solid",
+              },
+            },
+            itemStyle: {
+              borderColor: "#fff",
+              borderWidth: 1,
+            },
+            data: [
+              // { value: 20, name: "登录" },
+              // { value: 40, name: "创建" },
+              // { value: 60, name: "授课" },
+              // { value: 80, name: "评价" },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart(array) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.option.series[0].data = array;
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+    setArray(array){
+        let _array = array;
+
+        if (!this.chartObj) {
+          this.setChart(_array);
+        } else {
+          this.option.series[0].data = _array;
+          this.chartObj.setOption(this.option);
+        }
+        this.$forceUpdate();
+    },
+  },
+  watch: {
+    pusaDep: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.pusaDep)
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/teacher/chartList/teaAct.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%; ">
+      <el-table
+        :data="tableData"
+        style="width: 100%; "
+        :header-cell-style="{ background: '#E0EAFB', color: '#000' }"
+        :row-class-name="tableRowClassName"
+        class="tableClass"
+      >
+        <el-table-column label="排行" min-width="50" align="center">
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="课程名称"
+          min-width="80"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="sum" label="作业数量" min-width="80" align="center">
+        </el-table-column>
+        <el-table-column prop="teacher" label="创建老师" min-width="80" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    cWorkSum: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      tableData: [
+        // { rank: "1", name: "一年级", sum: "2356" },
+        // { rank: "2", name: "二年级", sum: "2256" },
+        // { rank: "3", name: "三年级", sum: "2156" },
+        // { rank: "4", name: "四年级", sum: "1356" },
+        // { rank: "5", name: "五年级", sum: "1256" },
+        // { rank: "6", name: "六年级", sum: "1056" },
+        // { rank: "7", name: "七年级", sum: "956" },
+        // { rank: "8", name: "八年级", sum: "856" },
+      ],
+    };
+  },
+  methods:{
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    setArray(array){
+      this.tableData = []
+      for(var i = 0;i<array.length;i++){
+        this.tableData.push({
+          sum:array[i].count,
+          name:array[i].title,
+          teacher:array[i].teacher
+        })
+      }
+      this.tableData = this.tableData.sort(function(a,b){
+        return b.sum - a.sum;
+      })
+    }
+  },
+  watch: {
+    cWorkSum: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.cWorkSum)
+  },
+};
+</script>
+
+<style scoped>
+.el-table >>> .even_row {
+  background-color: #f2f7ff !important;
+}
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+  overflow: auto;
+}
+
+.tableClass >>> td, .tableClass >>> th{
+  padding: 5px 0;
+}
+</style>

src/components/pages/dataBoardNew/teacher/chartList/teaData.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    courseArray: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        hours: [],
+        days: [],
+        data: [],
+      },
+      option: {
+        tooltip: {
+          position: "top",
+          formatter: function (params) {
+            // console.log(params);
+            return params.marker + params.name + " " + params.data[1]; //params.seriesName + '<br>' + params.
+          },
+        },
+        title: [],
+        singleAxis: [],
+        series: [],
+      },
+    };
+  },
+  methods: {
+    setChart(option) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        const hours = option.hours;
+        // const hours = [
+        //   "语文",
+        //   "数学",
+        //   "英语",
+        //   "科学",
+        //   "体育",
+        //   "音乐",
+        //   "美术",
+        //   "劳动",
+        //   "其他",
+        // ];
+        // prettier-ignore
+        const days = option.days
+        // const days = [
+        //     '一年级', '二年级', '三年级',
+        //     '四年级', '五年级', '六年级'
+        // ];
+        // prettier-ignore
+        const data = option.data
+        // const data = [[0,0,3],[0,2,4],[0,3,8],[0,6,6],[0,8,4],[1,0,3],[1,2,4],[1,3,8],[1,6,6],[1,8,4],[2,1,13],[2,3,6],[2,4,3],[2,6,6],[2,8,4],[3,3,6],[3,4,3],[3,6,6],[3,7,4],[4,0,10],[4,2,13],[4,3,6],[4,4,3],[4,6,6],[4,7,3],[5,2,4],[5,3,6],[5,4,3],[5,5,10],[5,6,10],[5,7,3]];
+        const title = [];
+        const singleAxis = [];
+        const series = [];
+        days.forEach(function (day, idx) {
+          title.push({
+            textBaseline: "middle",
+            top: ((idx + 0.5) * 90) / days.length + "%",
+            text: day,
+            textStyle: {
+              fontSize: 12,
+            },
+          });
+          singleAxis.push({
+            left: 70,
+            type: "category",
+            boundaryGap: false,
+            data: hours,
+            top: (idx * 90) / days.length + 5 + "%",
+            height: 90 / days.length - 10 + "%",
+          });
+          series.push({
+            singleAxisIndex: idx,
+            coordinateSystem: "singleAxis",
+            type: "scatter",
+            data: [],
+            symbolSize: function (dataItem) {
+              return dataItem[1] * 3;
+            },
+          });
+        });
+        data.forEach(function (dataItem) {
+          series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
+        });
+        chartObj.off('click')
+        let _this = this
+        chartObj.on('click', function (param) {
+          console.log(param);  //X轴的值
+          _this.$emit('openCourse', param.componentIndex, param.data[0])
+        });
+        this.option.title = title;
+        this.option.singleAxis = singleAxis;
+        this.option.series = series;
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+    setJson(array) {
+      if (array != undefined && array.length > 0) {
+        this.ooption = {
+          hours: [],
+          days: [],
+          data: [],
+        };
+        let _grade = [];
+        let _subject = [];
+        let data = [];
+
+        array.forEach(function (item, idx) {
+          _grade.push(item.name);
+        });
+
+        array[0].subject.forEach(function (item, idx) {
+          _subject.push(item.name);
+        });
+        array.forEach(function (item, idx) {
+          item.subject.forEach(function (item2, idx2) {
+            data.push([idx, idx2, item2.course]);
+          });
+        });
+        this.ooption.hours = _subject;
+        this.ooption.days = _grade;
+        this.ooption.data = data;
+        if (!this.chartObj) {
+          this.setChart(this.ooption);
+        } else {
+          const hours = this.ooption.hours;
+          // prettier-ignore
+          const days = this.ooption.days;
+          // prettier-ignore
+          const data = this.ooption.data;
+          const title = [];
+          const singleAxis = [];
+          const series = [];
+          days.forEach(function (day, idx) {
+            title.push({
+              textBaseline: "middle",
+              top: ((idx + 0.5) * 90) / days.length + "%",
+              text: day,
+              textStyle: {
+                fontSize: 12,
+              },
+            });
+            singleAxis.push({
+              left: 70,
+              type: "category",
+              boundaryGap: false,
+              data: hours,
+              top: (idx * 90) / days.length + 5 + "%",
+              height: 90 / days.length - 10 + "%",
+            });
+            series.push({
+              singleAxisIndex: idx,
+              coordinateSystem: "singleAxis",
+              type: "scatter",
+              data: [],
+              symbolSize: function (dataItem) {
+                return dataItem[1] * 3;
+              },
+            });
+          });
+          data.forEach(function (dataItem) {
+            series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
+          });
+
+          this.option.title = title;
+          this.option.singleAxis = singleAxis;
+          this.option.series = series;
+          this.chartObj.setOption(this.option);
+        }
+      }
+    },
+  },
+  watch: {
+    courseArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setJson(newValue);
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setJson(this.courseArray);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/teacher/chartList/teaFre.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    monthArray: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        teacher: [],
+      },
+      option: {
+        title: {
+          text: '登录频次',
+          textStyle: {
+            fontSize: 12,
+          },
+          padding: [0, 0, 0, 10]
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+          data: [],
+        },
+        yAxis: {
+          type: "value",
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "教师",
+            type: "line",
+            // data: [220, 182, 191, 234, 290, 330]
+            data: [],
+            areaStyle: {}
+          },
+        ],
+      },
+    };
+  },
+  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.teacher;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  watch: {
+    monthArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.ooption = {
+          xdata: [],
+          teacher: [],
+        };
+        let _array = newValue;
+        for (var i = 0; i < _array.length; i++) {
+          this.ooption.xdata.push(_array[i].Month + "月");
+          this.ooption.teacher.push(_array[i].teacher);
+        }
+
+        if (!this.chartObj) {
+          this.setChart(this.ooption);
+        } else {
+          this.option.xAxis.data = this.ooption.xdata;
+          this.option.series[0].data = this.ooption.teacher;
+          this.chartObj.setOption(this.option);
+        }
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.ooption = {
+      xdata: [],
+      teacher: [],
+    };
+    let _array = this.monthArray;
+    for (var i = 0; i < _array.length; i++) {
+      this.ooption.xdata.push(_array[i].Month + "月");
+      this.ooption.teacher.push(_array[i].teacher);
+    }
+    this.setChart(this.ooption);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/teacher/chartList/workNum.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    workNumList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        data: [],
+      },
+      option: {
+        xAxis: {
+          name: "任务数量",
+          nameTextStyle: {
+            padding: [25, 0, 0, 0],
+            verticalAlign: 'top'
+          },
+          nameGap: -45
+        },
+        grid: {
+          top: "10%",
+          left: "5%",
+          right: "5%",
+          bottom: "8%",
+          containLabel: true,
+        },
+        yAxis: {
+          name: "作业提交数量",
+        },
+        color: ["#3681FC"],
+        tooltip: {
+          formatter: function (params) {
+            return (
+              params.marker +
+              params.data[2] +
+              "<br/>" +
+              "任务数量：" +
+              params.data[0] +
+              "<br/>" +
+              "作业提交数量：" +
+              params.data[1]
+            );
+          },
+        },
+        series: [
+          {
+            symbolSize: 8,
+            data: [],
+            type: "scatter",
+          },
+        ],
+      },
+    };
+  },
+  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 = this.ooption.data;
+
+        chartObj.off('click')
+        let _this = this
+        chartObj.on('click', function (param) {
+          console.log(param);  //X轴的值
+          _this.$emit('openCourse', param.data[3])
+        });
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+    setArray(array) {
+      this.ooption = {
+        data: [],
+      };
+      for (var i = 0; i < array.length; i++) {
+        this.ooption.data.push(array[i]);
+      }
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.series[0].data = this.ooption.data;
+        this.chartObj.setOption(this.option);
+      }
+      this.$forceUpdate();
+    },
+  },
+  watch: {
+    workNumList: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue);
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.workNumList);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/teacher/chartList/workTime.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    workTime: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        ydata: [],
+        teacher: [],
+      },
+      option: {
+        title: {
+          text: '在线时长',
+          textStyle: {
+            fontSize: 12,
+          },
+          padding: [10, 0, 0, 10]
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          top: "10%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: "category",
+          // data: ["六年级", "五年级", "四年级", "三年级", "二年级", "一年级"],
+          data:[]
+        },
+        series: [
+          {
+            name: "在线时长（时）",
+            type: "bar",
+            // data: [60, 110, 25, 130, 65, 80],
+            data:[],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return "#106bff";
+                },
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  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.ydata;
+        this.option.series[0].data = option.teacher;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  watch: {
+    workTime: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.ooption = {
+          ydata: [],
+          teacher: [],
+        };
+        let _array = newValue;
+        for (var i = 0; i < _array.length; i++) {
+          this.ooption.ydata.push(_array[i].name);
+          this.ooption.teacher.push(_array[i].text);
+        }
+
+        if (!this.chartObj) {
+          this.setChart(this.ooption);
+        } else {
+          this.option.yAxis.data = this.ooption.ydata;
+          this.option.series[0].data = this.ooption.teacher;
+          this.chartObj.setOption(this.option);
+        }
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.ooption = {
+      ydata: [],
+      teacher: [],
+    };
+    let _array = this.workTime;
+    for (var i = 0; i < _array.length; i++) {
+      this.ooption.ydata.push(_array[i].name);
+          this.ooption.teacher.push(_array[i].text + "小时");
+    }
+    this.setChart(this.ooption);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/teacher/index.vue

@@ -0,0 +1,840 @@
+<template>
+  <div class="body1" v-loading="isLoading">
+    <!-- 教师数据 -->
+    <div class="left">
+      <div class="top">
+        <div class="titleBox">
+          <div class="title">基础概况</div>
+        </div>
+        <div class="dataBox">
+          <div class="teafre">
+            <div class="teaLeft">
+              <div>教师总数</div>
+              <div>{{ count }}</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>周使用频次</div>
+              <div>{{ weekCount }}</div>
+            </div>
+          </div>
+          <div class="teafre" style="margin: 10px auto">
+            <div class="teaLeft">
+              <div>登录频次</div>
+              <div>{{ loginCount }}</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>人均使用频次</div>
+              <div>{{ (loginCount / count).toFixed(0) }}</div>
+            </div>
+          </div>
+          <TeaFre
+            style="height: calc(100% - 150px)"
+            :monthArray="loginCountMonthArray"
+          ></TeaFre>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">教师活跃度</div>
+        </div>
+        <div class="dataBox">
+          <TeaAct
+            style="height: calc(100% - 20px)"
+            :cWorkSum="cWorkSum"
+          ></TeaAct>
+        </div>
+      </div>
+    </div>
+    <div class="center">
+      <div class="top">
+        <div class="titleBox">
+          <div class="title">教师行为数据</div>
+        </div>
+        <div class="dataBox">
+          <div class="teafre" style="justify-content: flex-start">
+            <div
+              class="teaLeft"
+              style="align-items: flex-end; width: calc(100% / 4 - 10px)"
+            >
+              <div>上传课程总数</div>
+              <div>{{ courseCount }}</div>
+            </div>
+            <div
+              class="teaLeft teaRigth"
+              style="align-items: flex-end; width: calc(100% / 4 - 10px)"
+            >
+              <div>各年级课程上传平均数</div>
+              <div>{{ gradeCourse.toFixed(0) }}</div>
+            </div>
+            <div
+              class="teaLeft"
+              style="align-items: flex-end; width: calc(100% / 4 - 10px)"
+            >
+              <div>各学科课程上传平均数</div>
+              <div>{{ subjectCourse.toFixed(0) }}</div>
+            </div>
+          </div>
+          <TeaData
+            style="height: calc(100% - 62px)"
+            :courseArray="courseArray"
+            @openCourse="openCourse2"
+          ></TeaData>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">平台使用深度</div>
+        </div>
+        <div class="dataBox">
+          <div class="allBox">
+            <div class="allBox_left">
+              <FunPlot :pusaDep="pusaDep"></FunPlot>
+            </div>
+            <div class="allBox_right">
+              <div class="depth">
+                <span>上传课程</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="
+                      lightJson.upCourseTeachers
+                        ? (
+                            (lightJson.upCourseTeachers / lightJson.teachers) *
+                            100
+                          ).toFixed(0)
+                        : 0
+                    "
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>创设项目</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="
+                      lightJson.upCourseUsers
+                        ? (
+                            (lightJson.upCourseUsers / lightJson.teachers) *
+                            100
+                          ).toFixed(0)
+                        : 0
+                    "
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>协同合作</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="
+                      lightJson.upgCourseTeachers
+                        ? (
+                            (lightJson.upgCourseTeachers / lightJson.teachers) *
+                            100
+                          ).toFixed(0)
+                        : 0
+                    "
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>互动交流</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="
+                      lightJson.commentUsers
+                        ? (
+                            (lightJson.commentUsers / lightJson.teachers) *
+                            100
+                          ).toFixed(0)
+                        : 0
+                    "
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>添加目标</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="
+                      lightJson.evaTeachers
+                        ? (
+                            (lightJson.evaTeachers / lightJson.teachers) *
+                            100
+                          ).toFixed(0)
+                        : 0
+                    "
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>使用工具</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="
+                      lightJson.toolUsers
+                        ? (
+                            (lightJson.toolUsers / lightJson.teachers) *
+                            100
+                          ).toFixed(0)
+                        : 0
+                    "
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>设置评价</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="
+                      lightJson.tevaTeachers
+                        ? (
+                            (lightJson.tevaTeachers / lightJson.teachers) *
+                            100
+                          ).toFixed(0)
+                        : 0
+                    "
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>学生评价</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="
+                      lightJson.sevaTeachers
+                        ? (
+                            (lightJson.sevaTeachers / lightJson.teachers) *
+                            100
+                          ).toFixed(0)
+                        : 0
+                    "
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="top">
+        <div class="titleBox">
+          <div class="title">教学活动</div>
+        </div>
+        <div class="dataBox">
+          <WorkNum
+            :workNumList="workNumList"
+            @openCourse="openCourse"
+          ></WorkNum>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">在线时长</div>
+        </div>
+        <div class="dataBox">
+          <div class="teafre">
+            <div class="teaLeft">
+              <div>累计在线时长</div>
+              <div>{{ loginTime.toFixed(0) }}小时</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>师均时长</div>
+              <div>{{ (loginTime / count).toFixed(0) }}小时</div>
+            </div>
+          </div>
+          <WorkTime
+            style="height: calc(100% - 62px)"
+            :workTime="workTime"
+          ></WorkTime>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TeaFre from "./chartList/teaFre.vue";
+import TeaAct from "./chartList/teaAct.vue";
+import TeaData from "./chartList/teaData.vue";
+import FunPlot from "./chartList/funPlot.vue";
+import WorkNum from "./chartList/workNum.vue";
+import WorkTime from "./chartList/workTime.vue";
+export default {
+  components: {
+    TeaFre,
+    TeaAct,
+    TeaData,
+    FunPlot,
+    WorkNum,
+    WorkTime,
+  },
+  props: {
+    oid: {
+      type: String,
+    },
+    org: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      count: 0,
+      loginCount: 0,
+      loginTime: 0,
+      courseCount: 0,
+      loginCountMonthArray: [],
+      weekCount: 0,
+      gradeCourse: 0,
+      subjectCourse: 0,
+      courseArray: [],
+      workNumList: [],
+      grade: [],
+      subject: [],
+      theme: [],
+      lightJson: {
+        users: 0,
+        teachers: 0,
+        students: 0,
+        upCourseTeachers: 0,
+        upCourseUsers: 0,
+        toolUsers: 0,
+        upgCourseTeachers: 0,
+        commentUsers: 0,
+        evaTeachers: 0,
+        tevaTeachers: 0,
+        sevaTeachers: 0,
+      },
+      pusaDep: [
+        { value: 0, name: "登录" },
+        { value: 0, name: "创建" },
+        { value: 0, name: "授课" },
+        { value: 0, name: "评价" },
+      ],
+      cWorkSum: [],
+      workTime: [],
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    openCourse2(classIndex, subIndex) {
+      console.log(classIndex, subIndex);
+      // console.log(this.courseArray);
+      // console.log(this.courseArray[classIndex].id,this.courseArray[classIndex].subject[subIndex].id || '');
+      window.parent.postMessage(
+        {
+          tools: "openCourse",
+          typea: this.courseArray[classIndex].id,
+          typed: this.courseArray[classIndex].subject[subIndex].id || "",
+        },
+        "*"
+      );
+    },
+    openCourse(cid) {
+      window.parent.postMessage({ cid: cid, screenType: "3" }, "*");
+    },
+    getData() {
+      this.isLoading = true;
+      let params = [
+        {
+          oid: this.oid,
+          org: this.org,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "selectDataBoardTeacher", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.count = res.data[0][0].count;
+          this.loginCount = res.data[1][0].loginCount;
+          this.loginTime = parseInt(res.data[2][0].time) / 60 / 60;
+          this.courseCount = res.data[5][0].courseCount;
+
+          let loginCountMonthArray = [];
+          const date = new Date();
+          var Month = date.getMonth() + 1;
+          var Year = date.getFullYear();
+          for (var i = Month; i > Month - 6; i--) {
+            if (i <= 0) {
+              loginCountMonthArray.push({
+                Year: Year - 1,
+                Month: 12 + i,
+                teacher: 0,
+              });
+            } else {
+              loginCountMonthArray.push({
+                Month: i,
+                Year: Year,
+                teacher: 0,
+              });
+            }
+          }
+
+          loginCountMonthArray = loginCountMonthArray.reverse();
+          let teacherLoginCountYear = res.data[3]; // 教师半年登录次数统计
+
+          for (var i = 0; i < teacherLoginCountYear.length; i++) {
+            let _date = new Date(teacherLoginCountYear[i].create_at);
+            var _month = _date.getMonth() + 1;
+            var _year = _date.getFullYear();
+            for (var j = 0; j < loginCountMonthArray.length; j++) {
+              if (
+                _month == loginCountMonthArray[j].Month &&
+                _year == loginCountMonthArray[j].Year
+              ) {
+                loginCountMonthArray[j].teacher++;
+                break;
+              }
+            }
+          }
+
+          this.loginCountMonthArray = loginCountMonthArray;
+          this.weekCount = res.data[4][0].count;
+
+          let _grade = res.data[6]; //年级
+          let _subject = res.data[7]; //学科
+          let _course = res.data[8]; //课程
+          let _gradeCourse = 0; //各年级上传课程
+          let _subjectCourse = 0; //各学科上传课程
+          let _courseArray = [];
+          _subject.push({ name: "其他" });
+
+          for (var i = 0; i < _grade.length; i++) {
+            _courseArray.push({
+              name: _grade[i].name,
+              id: _grade[i].id,
+              courseid: [],
+              subject: [],
+            });
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _grade[i].id) {
+                _gradeCourse++;
+                if (
+                  _courseArray[i].courseid.indexOf(_course[z].courseid) === -1
+                ) {
+                  _courseArray[i].courseid.push(_course[z].courseid);
+                }
+              }
+            }
+            for (var j = 0; j < _subject.length; j++) {
+              _courseArray[i].subject.push({
+                name: _subject[j].name,
+                id: _subject[j].id,
+                course: 0,
+              });
+              for (var z = 0; z < _course.length; z++) {
+                if (
+                  _course[z].typeid == _subject[j].id &&
+                  _courseArray[i].courseid.indexOf(_course[z].courseid) !== -1
+                ) {
+                  _courseArray[i].subject[j].course++;
+                }
+              }
+            }
+            let sum = 0;
+            for (var j = 0; j < _courseArray[i].subject.length - 1; j++) {
+              sum += _courseArray[i].subject[j].course;
+            }
+            _courseArray[i].subject[_courseArray[i].subject.length - 1].course =
+              _courseArray[i].courseid.length - sum < 0
+                ? 0
+                : _courseArray[i].courseid.length - sum;
+          }
+          for (var j = 0; j < _subject.length; j++) {
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _subject[j].id) {
+                _subjectCourse++;
+              }
+            }
+          }
+          this.gradeCourse = _gradeCourse / _grade.length;
+          this.subjectCourse = _subjectCourse / _subject.length;
+          this.courseArray = _courseArray;
+
+          this.grade = _grade;
+          this.subject = _subject;
+          this.theme = res.data[9]; //主题
+          var _workCourse = res.data[10]; //带作业的课程
+          var wList = [];
+          for (var i = 0; i < _workCourse.length; i++) {
+            if (!wList[_workCourse[i].courseId]) {
+              wList[_workCourse[i].courseId] = {
+                cid: _workCourse[i].courseId,
+                title: _workCourse[i].title,
+                task: 0,
+                work: 0,
+              };
+              let chapters = JSON.parse(_workCourse[i].chapters);
+              for (var j = 0; j < chapters.length; j++) {
+                if (wList[_workCourse[i].courseId].task == 0) {
+                  wList[_workCourse[i].courseId].task =
+                    chapters[j].chapterInfo[0].taskJson.length;
+                } else {
+                  wList[_workCourse[i].courseId].task +=
+                    chapters[j].chapterInfo[0].taskJson.length;
+                }
+              }
+            }
+          }
+          for (var i = 0; i < _workCourse.length; i++) {
+            let a = Object.keys(wList);
+            for (var j = 0; j < Object.keys(wList).length; j++) {
+              if (_workCourse[i].courseId == wList[a[j]].cid) {
+                wList[a[j]].work++;
+              }
+            }
+          }
+          var workNumList = Object.values(wList).map((item) => [
+            item.task,
+            item.work,
+            item.title,
+            item.cid,
+          ]);
+          this.workNumList = workNumList;
+
+          let _teachers = res.data[11][0].count; //老师数量
+          let _students = res.data[12][0].count; //学生数量
+          let _upCourseTeachers = res.data[13][0].count; //上传课程老师的数量
+          let _upCourseUsers = res.data[14][0].count; //上传项目的用户
+          let _toolUsers = res.data[15][0].count; //使用工具的用户
+          let _upgCourseTeachers = res.data[16][0].count; //参与协同课程的老师
+          let _commentUsers = res.data[17][0].count; //参与互动交流的用户
+          let _evaTeachers = res.data[18][0].count; //查询添加目标的老师
+          let _tevaTeachers = res.data[19][0].count; //查询创建课程有添加目标的老师
+          let _sevaTeachers = res.data[20][0].count; //查询对作业评价的老师
+
+          this.lightJson = {
+            users: this.count,
+            teachers: _teachers,
+            students: _students,
+            upCourseTeachers: _upCourseTeachers,
+            upCourseUsers: _upCourseUsers,
+            toolUsers: _toolUsers,
+            upgCourseTeachers: _upgCourseTeachers,
+            commentUsers: _commentUsers,
+            evaTeachers: _evaTeachers,
+            tevaTeachers: _tevaTeachers,
+            sevaTeachers: _sevaTeachers,
+          };
+
+          let _loginCount = res.data[21][0].count; //漏斗图查询登录
+          let _workTeaCount = res.data[22][0].count; //漏斗图查询有交作业的课程老师数量
+          // let allCount = _loginCount + _upCourseTeachers + _workTeaCount + _sevaTeachers;
+          for (var i = 0; i < this.pusaDep.length; i++) {
+            if (this.pusaDep[i].name == "登录") {
+              this.pusaDep[i].value = ((_loginCount / _teachers) * 100).toFixed(
+                0
+              );
+            } else if (this.pusaDep[i].name == "创建") {
+              this.pusaDep[i].value = (
+                (_upCourseTeachers / _teachers) *
+                100
+              ).toFixed(0);
+            } else if (this.pusaDep[i].name == "授课") {
+              this.pusaDep[i].value = (
+                (_workTeaCount / _teachers) *
+                100
+              ).toFixed(0);
+            } else if (this.pusaDep[i].name == "评价") {
+              this.pusaDep[i].value = (
+                (_sevaTeachers / _teachers) *
+                100
+              ).toFixed(0);
+            }
+          }
+
+          let _cWorkSum = res.data[23]; //查询课程名称和作业数量
+          this.cWorkSum = _cWorkSum;
+
+          let _workTime = res.data[24]; //查询教研室在线时长
+          var mergedArray = [];
+          _workTime.forEach((obj) => {
+            var foundItem = mergedArray.find((item) => item.name === obj.name);
+            if (foundItem) {
+              foundItem.text = String(
+                Number(foundItem.text) + Number(obj.text)
+              );
+            } else {
+              mergedArray.push({ name: obj.name, text: obj.text });
+            }
+          });
+          mergedArray.forEach((obj) => {
+            obj.text = (Number(obj.text) / 3600).toFixed(2); // 秒转小时，并保留两位小数
+          });
+          this.workTime = mergedArray;
+          this.$forceUpdate();
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    format(percentage) {
+      return percentage + '%';
+    },
+  },
+};
+</script>
+
+
+<style scoped>
+.body1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.left {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+}
+
+.left > .top {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.left > .bottom {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.center {
+  width: calc(100% / 4 * 2 - 40px);
+  height: 100%;
+  margin: 0 20px;
+}
+
+.center > .top {
+  width: 100%;
+  height: calc(100% / 5 * 3 - 10px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.center > .bottom {
+  width: 100%;
+  height: calc(100% / 5 * 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.right {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+}
+
+.right > .top {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.right > .bottom {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.titleBox {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  width: 100%;
+}
+
+.dataBox {
+  height: calc(100% - 40px);
+  width: 100%;
+}
+
+.middleBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.title {
+  font-weight: bold;
+  color: #060e17;
+  font-size: 18px;
+}
+
+.teafre {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 95%;
+  margin: 0 auto;
+  justify-content: space-evenly;
+}
+
+.teaLeft,
+.teaMiddle {
+  width: calc(100% / 2 - 10px);
+  height: 60px;
+  border-radius: 8px;
+  /* border: 1px solid #e0eafb; */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0 10px;
+  margin-right: 10px;
+}
+.teaMiddle {
+  width: calc(100% / 3 - 10px);
+}
+.teaLeft {
+  width: 95%;
+  background: linear-gradient(
+    180deg,
+    rgba(224, 234, 251, 0.2) 0%,
+    rgba(54, 130, 252, 0.3) 100%
+  );
+}
+.teaRigth {
+  background: linear-gradient(
+    180deg,
+    rgb(211, 246, 228, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.cNum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.tNum {
+  background: linear-gradient(
+    180deg,
+    rgb(174, 204, 254, 0.2) 0%,
+    rgb(54, 129, 252, 0.3) 100%
+  ) !important;
+}
+
+.tSum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.teaLeft > div:first-child,
+.teaMiddle > div:first-child {
+  font-size: 12px;
+  font-weight: 400;
+  color: #565e6a;
+}
+
+.teaLeft > div:last-child,
+.teaMiddle > div:last-child {
+  font-size: 22px;
+  font-weight: bold;
+  color: #060e17;
+}
+
+.halfBox {
+  width: 50%;
+}
+.allBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.allBox_left {
+  width: 30%;
+  height: 100%;
+}
+.allBox_right {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  width: 70%;
+  margin: 0 auto;
+  overflow: hidden;
+  justify-content: space-between;
+}
+
+.depth {
+  width: calc(100% / 4 - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.depth > span:nth-child(1) {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 0 10px;
+}
+.depth > div:nth-child(1) {
+}
+</style>

src/components/pages/test/add/setInfo/aiCreate.vue

@@ -1,19 +1,184 @@
 <template>
-  <div class="mc_box">
-    ai创建
+  <div>
+    <el-dialog
+      title="智能创建"
+      :visible.sync="aiDialogVisible"
+      :append-to-body="true" 
+      width="600px"
+      :before-close="handleClose"
+      class="pub_dialog_diy" v-loading="loading">
+      <div>
+        <div class="ex_box">
+          例子：请你以富文本的形式给我出三个关于小学数学单位换算的选择题，每个选择题选项不少于4个，需要答案，但不需要解释，符号请使用中文的
+        </div>
+        <div class="ac_box">
+          <el-input v-model="text" placeholder="请在这里输入要发送的消息" size="normal" type="textarea" resize="none" :rows="3"></el-input>
+          <el-button type="primary" size="mini" @click="generate" style="margin-left:10px">生成</el-button>
+        </div>
+        <div class="ac_content">
+          <div class="title">生成内容：</div>
+          <div class="box" v-if="aiCreate">
+            <div></div>
+          </div>
+        </div>
+      </div>
+      <div slot="footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="exportT">导入</el-button>
+      </div>
+    </el-dialog>
+    
   </div>
 </template>
 
 <script>
-export default {
 
+export default {
+  props: {
+    aiJson: {
+      type: Array,
+    },
+    aiDialogVisible:{
+      type: Boolean,
+    }
+  },
+  data() {
+    return {
+      text:"",
+      aiCreate:"",
+      loading:false
+    }
+  },
+  methods: {
+    handleClose(done){
+      this.close()
+      done()
+    },
+    close() {
+      this.$emit('update:aiDialogVisible',false)
+    },
+    guid() {
+      var _num,
+        i,
+        _guid = "";
+      for (i = 0; i < 32; i++) {
+        _guid += Math.floor(Math.random() * 16).toString(16); //随机0  - 16 的数字 转变为16进制的字符串
+        _num = Math.floor((i - 7) / 4); //计算 (i-7)除4
+        if (_num > -1 && _num < 4 && i == 7 + 4 * _num) {
+          //会使guid中间加 "-"   形式为xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
+          _guid += "-";
+        }
+      }
+      return _guid;
+    },
+    generate(){
+      if(this.text == ""){
+        this.$message.error("请输入要发送的消息")
+        return
+      }
+      this.loading = true
+      let param = {
+        model: "gpt-3.5-turbo",
+        temperature: 0,
+        max_tokens: 2048,
+        top_p: 1,
+        frequency_penalty: 0,
+        presence_penalty: 0,
+        messages: [
+          {
+            role: "user",
+            content: this.text,
+          },
+        ],
+        uid: this.guid(),
+        stream: false,
+      };
+      this.ajax.post("https://gpt.cocorobo.cn/chat", param).then(
+        (res) => {
+          if (
+            res.data.FunctionResponse &&
+            res.data.FunctionResponse.result &&
+            res.data.FunctionResponse.result == "无效请求,请重新发起对话"
+          ) {
+            this.$message.error("你的内容太长，无法使用Ai创建!");
+            this.loading = false
+            return;
+          }
+          let aiReturn = res.data.FunctionResponse.choices[0].message.content;
+          aiReturn = aiReturn.split("\n")
+          aiReturn = aiReturn.filter(e => e != "")
+          this.loading = false
+          this.generate2(aiReturn)
+        },
+        (err) => {
+          console.log(err);
+          this.loading = false
+        }
+      );
+    },
+    generate2(aiReturn){
+      this.loading = true
+      let param = {
+        model: "gpt-3.5-turbo",
+        temperature: 0,
+        max_tokens: 2048,
+        top_p: 1,
+        frequency_penalty: 0,
+        presence_penalty: 0,
+        messages: [
+          {
+            role: "user",
+            content: `${JSON.stringify(aiReturn)},要求返回格式是Array [{"title":"",opition:[],answer:[]}]`
+          },
+        ],
+        uid: this.guid(),
+        stream: false,
+      };
+      this.ajax.post("https://gpt.cocorobo.cn/chat", param).then(
+        (res) => {
+          if (
+            res.data.FunctionResponse &&
+            res.data.FunctionResponse.result &&
+            res.data.FunctionResponse.result == "无效请求,请重新发起对话"
+          ) {
+            this.$message.error("你的内容太长，无法使用Ai创建!");
+            this.loading = false
+            return;
+          }
+          let aiCreate = res.data.FunctionResponse.choices[0].message.content;
+          this.aiCreate = aiCreate;
+          this.loading = false
+        },
+        (err) => {
+          console.log(err);
+          this.loading = false
+        }
+      );
+    }
+  },
 }
 </script>
 
 <style scoped>
-.mc_box {
-    width: 90%;
-    margin: 10px auto;
-    display: flex;
+.ac_box{
+  display: flex;
+  width: 100%;
+  align-items: flex-end;
+  margin-bottom: 10px;
+}
+
+.ex_box{
+  margin-bottom: 10px;
+  color: #909090;
+}
+
+.ac_content{
+
+}
+.ac_content > .title{
+  margin-bottom: 10px;
+}
+.ac_content > .box{
+  
 }
 </style>

src/components/pages/test/add/setInfo/index.vue

@@ -40,19 +40,22 @@
                 <div class="c_info_title">创建评测内容</div>
                 <div class="c_info_box">
                     <div class="c_info_tab">
-                        <span :class="{ active: type == 1 }" @click="type = 1">智能创建</span>
+                        <!-- <span :class="{ active: type == 1 }" @click="type = 1">智能创建</span> -->
                         <span :class="{ active: type == 2 }" @click="type = 2">手动创建</span>
                         <!-- <span :class="{ active: type == 3 }" @click="type = 3">题库导入</span> -->
-                        <el-button type="primary" size="mini" @click="nextSteps" class="skip_btn">跳过</el-button>
+                        <div class="skip_btn">
+                            <el-button type="primary" size="mini" @click="openAiCreate">智能创建</el-button>
+                            <el-button type="primary" size="mini" @click="nextSteps">跳过</el-button>
+                        </div>
                         
                     </div>
                     <div class="c_info_tab_box">
-                        <aiCreate v-if="type == 1" :aiJson.sync="aiJson" @nextSteps="nextSteps"></aiCreate>
                         <manualCreate v-if="type == 2" :manualJson.sync="manualJson" @nextSteps="nextSteps"></manualCreate>
                     </div>
                 </div>
             </div>
         </div>
+        <aiCreate :aiJson.sync="manualJson" :aiDialogVisible.sync="aiDialogVisible" v-if="aiDialogVisible"></aiCreate>
     </div>
 </template>
 
@@ -90,7 +93,7 @@ export default {
             isTeacherSee: false,
             type: 2,
             manualJson:[],
-            aiJson:[]
+            aiDialogVisible:false
         }
     },
     methods: {
@@ -178,11 +181,12 @@ export default {
         depthCopy(s){
             return JSON.parse(JSON.stringify(s))
         },
+        openAiCreate(){
+            this.aiDialogVisible = true
+        },
         nextSteps(){
             if(this.type == 2){
                 this.$emit("update:cJson", this.manualJson)
-            }else if(this.type == 1){
-                this.$emit("update:cJson", this.aiJson)
             }
             this.$emit('update:steps',this.steps+1)
             console.log(this.cJson);
@@ -194,7 +198,6 @@ export default {
         this.courseName = this.depthCopy(this.title)
         this.isTeacherSee = this.depthCopy(this.see)
         this.manualJson = this.depthCopy(this.cJson)
-        this.aiJson = this.depthCopy(this.cJson)
         this.$forceUpdate()
         this.selectAllType();
     }

src/main.js

@@ -19,6 +19,7 @@ import 'viewerjs/dist/viewer.css'
 import Clipboard from "clipboard";
 import hevueImgPreview from './components/tools/hevue-img-preview'
 import './assets/css/button.css'
+import './assets/css/dialog.css'
 
 const echarts = require('echarts');