update

src/components/pages/addCourse.vue

@@ -8386,16 +8386,18 @@ export default {
         stageData = stageJson
       }else{
         let iframe = top.document.querySelectorAll("#AIChat iframe")[0];
-        if (!iframe) {
+        let iframe2 = top.document.querySelectorAll("#AIChat aigpt")[0];
+        if (!iframe && !iframe2) {
           this.$message.error("请使用AI共创生成");
           return;
         }
-        let copyData = iframe.contentWindow.copyData;
-        if (!copyData || !copyData.stageData || !copyData.stageData.length) {
+        let copyData = iframe ? iframe.contentWindow.copyData : '';
+        let copyData2 = iframe2 ? iframe2.contentWindow.copyData : '';
+        if ((!copyData || !copyData.stageData || !copyData.stageData.length) && (!copyData2 || !copyData2.stageData || !copyData2.stageData.length)) {
           this.$message.error("请使用AI共创生成");
           return;
         }
-        stageData = copyData.stageData;
+        stageData = copyData ? copyData.stageData : copyData2 ? copyData2.stageData : [''];
       }
    
       let stage = [];

src/components/pages/dataBoardTest/course/chartList/bar.vue

@@ -0,0 +1,165 @@
+<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",
+          },
+        },
+        dataZoom: [
+          {
+            // start: 50,
+            type: "inside",
+            yAxisIndex: 0,
+          },
+          {
+            type: "slider",
+            yAxisIndex: 0,
+          },
+        ],
+        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/dataBoardTest/course/chartList/bar2.vue

@@ -0,0 +1,165 @@
+<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",
+          },
+        },
+        dataZoom: [
+          {
+            // start: 50,
+            type: "inside",
+            yAxisIndex: 0,
+          },
+          {
+            type: "slider",
+            yAxisIndex: 0,
+          },
+        ],
+        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/dataBoardTest/course/chartList/cateRank.vue

@@ -0,0 +1,284 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%" :style="{minWidth:ooption.hours.length * 75 + 'px'}">
+            <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[2];//params.seriesName + '<br>' + params.
+
+                    }
+                },
+                grid: {
+                    top: '5%',
+                    left: 0,
+                    bottom: '5%',
+                    right: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: [],
+                    boundaryGap: false,
+                    splitLine: {
+                        show: true
+                    },
+                    axisLine: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: 'category',
+                    data: [],
+                    axisLine: {
+                        show: false
+                    }
+                },
+                series: [
+                    {
+                        name: 'Punch Card',
+                        type: 'scatter',
+                        symbolSize: function (val) {
+                            return val[2] * 3;
+                        },
+                        data: [],
+                        animationDelay: function (idx) {
+                            return idx * 5;
+                        },
+                        itemStyle: {
+                            color: function(params) {
+                            // 根据行索引设置不同的颜色
+                            var row = params.value[1];
+                            var colorList = ['hsl(170, 80%, 75%)', 'hsl(300, 99%, 70%)', 'hsl(139, 93%, 60%)', 'hsl(56, 73%, 69%)', 'hsl(352, 98%, 69%)', 'hsl(288, 76%, 66%)', 'hsl(167, 89%, 60%)', 'hsl(83, 81%, 74%)', 'hsl(359, 84%, 66%)', 'hsl(208, 96%, 66%)', 'hsl(259, 82%, 62%)', 'hsl(224, 95%, 64%)', 'hsl(119, 89%, 71%)', 'hsl(35, 75%, 70%)', 'hsl(48, 73%, 76%)', 'hsl(10, 73%, 69%)', 'hsl(112, 88%, 71%)', 'hsl(90, 87%, 61%)', 'hsl(37, 83%, 66%)', 'hsl(192, 86%, 72%)'];
+                            return colorList[row % colorList.length];
+                            }
+                        }
+                    }
+                ]
+                // 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]]);
+                // });
+                this.option.xAxis.data = hours
+                    this.option.yAxis.data = days
+                    this.option.series[0].data = data.map(function (item) {
+                        return [item[1], item[0], item[2]];
+                    })
+                // 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.xAxis.data = hours
+                    this.option.yAxis.data = days
+                    this.option.series[0].data = data.map(function (item) {
+                        return [item[1], item[0], item[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) {
+                // newValue = newValue.filter(item => {
+                //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
+                // })
+                this.setJson(newValue)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        // this.courseArray = this.courseArray.filter(item => {
+        //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
+        // })
+        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;
+    overflow: auto;
+}
+</style>
+  

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

@@ -0,0 +1,133 @@
+<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",
+        },
+        grid: {
+          top: "5%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        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/dataBoardTest/course/chartList/courseNum.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
+      <!-- <div id="cateRank" class="echart" style="width: 100%; height: 100%"></div> -->
+      <highcharts :options="option" style="width: 95%; height: 95%"></highcharts>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Chart } from 'highcharts-vue'
+import HighCharts from 'highcharts'
+//和弦图的引入依赖
+// import column from 'highcharts/modules/column';
+// column(HighCharts);
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    weekCourse2: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        data: [],
+      },
+      option: {
+        chart: {
+          type: 'column'
+        },
+        title: {
+          text: null
+        },
+        credits: {
+          enabled: false//不显示LOGO
+        },
+        xAxis: {
+          categories: [
+          ]
+        },
+        yAxis: [{
+          allowDecimals: false,
+          min: 0,
+          title: {
+            text: '课程总数'
+          }
+        },
+          // {
+          //   title: {
+          //     text: '项目总数'
+          //   },
+          //   opposite: true
+          // }
+        ],
+        legend: {
+          shadow: false
+        },
+        tooltip: {
+          shared: true
+        },
+        plotOptions: {
+          column: {
+            grouping: false,
+            shadow: false,
+            borderWidth: 0,
+            dataLabels: {
+              enabled: true,  //显示数量提示
+              color: '#000000',
+              formatter : function() {
+                var employee = this.point.series.chart.series[0].yData[this.point.index];
+                var optimizedEmployee = this.point.series.chart.series[1].yData[this.point.index];
+                var employeePercentage = 0;
+                if(optimizedEmployee > employee){
+                  employeePercentage = ((optimizedEmployee - employee) / optimizedEmployee) * 100
+                }
+                if (this.series.name === '本月课程总数') {
+                  return  employeePercentage.toFixed(1) + '%';
+                } else {
+                  return '';
+                }
+              }
+            }
+          }
+        },
+        series: [{
+          name: '上月课程总数',
+          color: 'rgba(165,170,217,1)',
+          data: [],
+          pointPadding: 0.3, // 通过 pointPadding 和 pointPlacement 控制柱子位置
+          // pointPlacement: -0.2
+        }, {
+          name: '本月课程总数',
+          color: 'rgba(126,86,134,.9)',
+          data: [],
+          pointPadding: 0.4,
+          // pointPlacement: -0.2
+        },
+          //  {
+          //   name: '上周项目总数',
+          //   color: 'rgba(248,161,63,1)',
+          //   data: [153, 178, 195],
+          //   pointPadding: 0.3,
+          //   pointPlacement: 0.2,
+          //   yAxis: 1  // 指定数据列所在的 yAxis
+          // }, {
+          //   name: '本周项目总数',
+          //   color: 'rgba(186,60,61,.9)',
+          //   data: [203, 198, 208],
+          //   pointPadding: 0.4,
+          //   pointPlacement: 0.2,
+          //   yAxis: 1
+          // }
+        ]
+      }
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = Highcharts.chart('cateRank', this.option);
+        // 初始化雷达图
+        // this.chartObj = chartObj;
+        // this.chartObj.setOption(this.option);
+      });
+    },
+    setArray(array) {
+      this.option.xAxis.categories = []
+      this.option.series[0].data = []
+      this.option.series[1].data = []
+      for (var i = 0; i < array.length; i++) {
+        this.option.xAxis.categories.push(array[i].name)
+        this.option.series[0].data.push(array[i].lastCourse)
+        this.option.series[1].data.push(array[i].toCourse)
+      }
+    }
+  },
+  watch: {
+    weekCourse2: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.weekCourse2)
+    // 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/dataBoardTest/course/chartList/courseTime.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: "5%",
+            top: 10,
+            bottom: 0,
+            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/dataBoardTest/course/chartList/subjuect.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%;align-items: center;justify-content: center;">
+      <!-- <div id="cateRank" class="echart" style="width: 100%; height: 100%"></div> -->
+      <highcharts :options="option" style="width: 100%; height: 95%;"></highcharts>
+    </div>
+  </div>
+</template>
+
+<script>
+import {Chart} from 'highcharts-vue'
+import HighCharts from 'highcharts'
+//和弦图的引入依赖
+import HC_sankey from 'highcharts/modules/sankey';
+import dependencywheel from 'highcharts/modules/dependency-wheel';
+HC_sankey(HighCharts);
+dependencywheel(HighCharts);
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    resultSubject: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        data: [],
+      },
+      option: {
+        title: {
+          text: null,
+        },
+        credits: {
+            enabled: false//不显示LOGO
+        },
+        series: [{
+          keys: ['from', 'to', 'weight'],
+          data: [
+            // ['Brazil', 'Portugal', 5],
+            // ['Brazil', 'France', 1],
+            // ['Brazil', 'Spain', 1],
+            // ['Brazil', 'England', 1],
+            // ['Canada', 'Portugal', 1],
+            // ['Canada', 'France', 5],
+            // ['Canada', 'England', 1],
+            // ['Mexico', 'Portugal', 1],
+            // ['Mexico', 'France', 1],
+            // ['Mexico', 'Spain', 5],
+            // ['Mexico', 'England', 1],
+            // ['USA', 'Portugal', 1],
+            // ['USA', 'France', 1],
+            // ['USA', 'Spain', 1],
+            // ['USA', 'England', 5],
+            // ['Portugal', 'Angola', 2],
+            // ['Portugal', 'Senegal', 1],
+            // ['Portugal', 'Morocco', 1],
+            // ['Portugal', 'South Africa', 3],
+            // ['France', 'Angola', 1],
+            // ['France', 'Senegal', 3],
+            // ['France', 'Mali', 3],
+            // ['France', 'Morocco', 3],
+            // ['France', 'South Africa', 1],
+            // ['Spain', 'Senegal', 1],
+            // ['Spain', 'Morocco', 3],
+            // ['Spain', 'South Africa', 1],
+            // ['England', 'Angola', 1],
+            // ['England', 'Senegal', 1],
+            // ['England', 'Morocco', 2],
+            // ['England', 'South Africa', 7],
+            // ['South Africa', 'China', 5],
+            // ['South Africa', 'India', 1],
+            // ['South Africa', 'Japan', 3],
+            // ['Angola', 'China', 5],
+            // ['Angola', 'India', 1],
+            // ['Angola', 'Japan', 3],
+            // ['Senegal', 'China', 5],
+            // ['Senegal', 'India', 1],
+            // ['Senegal', 'Japan', 3],
+            // ['Mali', 'China', 5],
+            // ['Mali', 'India', 1],
+            // ['Mali', 'Japan', 3],
+            // ['Morocco', 'China', 5],
+            // ['Morocco', 'India', 1],
+            // ['Morocco', 'Japan', 3],
+            // ['Japan', 'Brazil', 1]
+          ],
+          type: 'dependencywheel',
+          name: 'Dependency wheel series',
+          dataLabels: {
+            color: '#333',
+            textPath: {
+              enabled: true,
+              attributes: {
+                dy: 5
+              }
+            },
+            distance: 10
+          },
+          size: '95%'
+        }]
+      }
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = Highcharts.chart('cateRank',this.option);
+        // 初始化雷达图
+        // this.chartObj = chartObj;
+        // this.chartObj.setOption(this.option);
+      });
+    },
+    setArray(array) {
+      this.option.series[0].data = array
+
+    }
+  },
+  watch: {
+    resultSubject: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.resultSubject)
+    // 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/dataBoardTest/course/chartList/teaFre.vue

@@ -0,0 +1,140 @@
+<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: [],
+        course: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+          minInterval: 1
+        },
+        grid: {
+          top: "10%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        series: [
+          {
+            // data: [820, 932, 901, 934, 1290, 1330, 1320],
+            data: [],
+            type: "line",
+            areaStyle: {},
+            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.xAxis.data = option.xdata;
+        this.option.series[0].data = option.course;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+    setJson(array) {
+      this.ooption = {
+        xdata: [],
+        course: [],
+      }
+      let _array = array
+      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);
+      }
+    }
+  },
+  watch: {
+    monthArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setJson(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setJson(this.monthArray)
+
+    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/dataBoardTest/course/chartList/toolChart.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/dataBoardTest/course/chartList/toolUse.vue

@@ -0,0 +1,206 @@
+<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
+          },
+          axisLabel: {
+            formatter: function (value) {
+              console.log(value);
+              var ret = "";//拼接加\n返回的类目项  
+              var maxLength = 2;//每项显示文字个数  
+              var valLength = value.length;//X轴类目项的文字个数  
+              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
+              if (rowN > 1)//如果类目项的文字大于5,  
+              {
+                for (var i = 0; i < rowN; i++) {
+                  var temp = "";//每次截取的字符串  
+                  var start = i * maxLength;//开始截取的位置  
+                  var end = start + maxLength;//结束截取的位置  
+                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
+                  temp = value.substring(start, end) + "\n";
+                  ret += temp; //凭借最终的字符串  
+                }
+                return ret;
+              }
+              else {
+                return value;
+              }
+            }
+          }
+        },
+        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);
+      });
+    },
+    setJson(array) {
+      this.ooption = {
+        xdata: [],
+        sdata: [],
+        max: 0
+      }
+      let _array = array
+      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);
+      }
+    }
+  },
+  watch: {
+    yearArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setJson(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setJson(this.yearArray)
+
+    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/dataBoardTest/course/chartList/toolUse2.vue

@@ -0,0 +1,206 @@
+<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
+          },
+          axisLabel: {
+            formatter: function (value) {
+              console.log(value);
+              var ret = "";//拼接加\n返回的类目项  
+              var maxLength = 2;//每项显示文字个数  
+              var valLength = value.length;//X轴类目项的文字个数  
+              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
+              if (rowN > 1)//如果类目项的文字大于5,  
+              {
+                for (var i = 0; i < rowN; i++) {
+                  var temp = "";//每次截取的字符串  
+                  var start = i * maxLength;//开始截取的位置  
+                  var end = start + maxLength;//结束截取的位置  
+                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
+                  temp = value.substring(start, end) + "\n";
+                  ret += temp; //凭借最终的字符串  
+                }
+                return ret;
+              }
+              else {
+                return value;
+              }
+            }
+          }
+        },
+        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);
+      });
+    },
+    setJson(array) {
+      this.ooption = {
+        xdata: [],
+        sdata: [],
+        max: 0
+      }
+      let _array = array
+      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);
+      }
+    }
+  },
+  watch: {
+    yearArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setJson(newValue)
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setJson(this.yearArray)
+
+    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/dataBoardTest/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: "20%",
+          left: "5%",
+          right: "5%",
+          bottom: "15%",
+          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/dataBoardTest/course/chartList/workTime.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: {
+    personArray: {
+      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: {
+    personArray: {
+      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.personArray;
+    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/dataBoardTest/course/index.vue

@@ -0,0 +1,797 @@
+<template>
+  <div class="body1" v-loading="isLoading">
+    <!-- 课程数据 -->
+    <div class="left">
+      <div class="top">
+        <div class="titleBox" style="justify-content: space-between">
+          <div class="title">基础概况</div>
+        </div>
+        <div class="dataBox">
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>课程总数</span>
+              <span>{{ allCourse }}</span>
+            </div>
+            <div class="info blueBG">
+              <span>本月新增课程环比</span>
+              <span v-if="loginCountMonthArray.length">{{ (loginCountMonthArray[loginCountMonthArray.length - 1].course) >
+                0 ? (((loginCountMonthArray[loginCountMonthArray.length - 1].course) / allCourse) * 100).toFixed(0) + '%'
+                : 0 }}</span>
+            </div>
+            <div class="info blueBG">
+              <span>模板课程总数</span>
+              <span>{{ 0 }}</span>
+            </div>
+            <div class="info blueBG">
+              <span>本月新增课程总数</span>
+              <span v-if="loginCountMonthArray.length">{{
+                loginCountMonthArray[loginCountMonthArray.length - 1].course
+              }}</span>
+            </div>
+          </div>
+          <TeaFre style="height: calc(100% - 140px)" :monthArray="loginCountMonthArray"></TeaFre>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title" :class="{ isClick: skType == 0 }" @click="skType = 0"
+            style="cursor: pointer; padding: 0 0 5px 0">
+            授课时长
+          </div>
+          <div class="title" :class="{ isClick: skType == 1 }" @click="skType = 1"
+            style="cursor: pointer; padding: 0 0 5px 0">
+            作业数量
+          </div>
+          <el-select v-if="skType == 0" v-model="lType" @change="typeChange1" class="selectBox" style="margin-left: auto">
+            <el-option label="年级" value="grade"></el-option>
+            <el-option label="主题" value="theme"></el-option>
+            <el-option label="学科" value="subject"></el-option>
+          </el-select>
+          <el-select v-if="skType == 1" v-model="lType1" @change="typeChange2" class="selectBox"
+            style="margin-left: auto">
+            <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="info_box" style="width: 96%" v-if="skType == 0">
+            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
+              <span>累计时长</span>
+              <span>{{ allTime }}</span>
+            </div>
+            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
+              <span>课程实施总数</span>
+              <span>{{ courseLength }}</span>
+            </div>
+            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
+              <span>课均时长</span>
+              <span>{{
+                allTime == 0 ? 0 : (allTime / courseLength).toFixed(0)
+              }}</span>
+            </div>
+          </div>
+          <div class="info_box" style="width: 96%" v-if="skType == 1">
+            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
+              <span>作业数量</span>
+              <span>{{ worksCount }}</span>
+            </div>
+            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
+              <span>课程开展总数</span>
+              <span>{{ haveWorksCourse }}</span>
+            </div>
+            <div class="info blueBG" style="width: calc(100% / 3 - 10px)">
+              <span>课程平均作业数量</span>
+              <span>{{
+                worksCount == 0 ? 0 : (worksCount / haveWorksCourse).toFixed(0)
+              }}</span>
+            </div>
+          </div>
+          <Bar style="height: calc(100% - 100px)" v-if="skType == 0 && !oType" :workList="tedurArray"></Bar>
+          <ToolUse2 style="height: calc(100% - 100px)" v-if="skType == 0 && oType" :yearArray="courseWorksCountYearArray2"></ToolUse2>
+
+          <ToolUse style="height: calc(100% - 100px)" v-if="skType == 1 && !oType2"
+            :yearArray="courseWorksCountYearArray"></ToolUse>
+          <Bar2 style="height: calc(100% - 100px)" v-if="skType == 1 && oType2" :workList="tedurArray2"></Bar2>
+          <div class="otherCss" v-if="skType == 0">
+            <div v-if="!oType">切换为热力图</div>
+            <div v-if="oType">切换为柱状图</div>
+            <div class="otherImg" @click="otherEchart">
+              <img src="../../../../assets/icon/other.png" alt="" />
+            </div>
+          </div>
+          <div class="otherCss" v-if="skType == 1">
+            <div v-if="!oType2">切换为柱状图</div>
+            <div v-if="oType2">切换为热力图</div>
+            <div class="otherImg" @click="otherEchart2">
+              <img src="../../../../assets/icon/other.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="center">
+      <div class="top">
+        <div class="titleBox">
+          <div class="title" :class="{ isClick: courseType == 0 }" @click="courseType = 0"
+            style="cursor: pointer; padding: 0 0 5px 0">
+            课程分布
+          </div>
+          <div class="title" :class="{ isClick: courseType == 1 }" @click="courseType = 1"
+            style="cursor: pointer; padding: 0 0 5px 0">
+            课程总数变化
+          </div>
+        </div>
+        <div class="dataBox">
+          <CateRank v-if="courseType == 0" style="height: calc(100%)" :courseArray="courseArray"></CateRank>
+          <CourseNum v-if="courseType == 1" style="height: calc(100%)" :weekCourse2="weekCourse2"></CourseNum>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox" style="justify-content: space-between">
+          <div class="title">课程实施程度</div>
+        </div>
+        <div class="dataBox">
+          <div class="allBox" v-if="!shType" style="height: calc(100% - 30px)">
+            <div class="allBox_left">
+              <CourseTime v-if="!shType" :pusaDep="pusaDep"></CourseTime>
+            </div>
+            <div class="allBox_right">
+              <div class="depth">
+                <span>已提交作业</span>
+                <div>
+                  <el-progress :width="80" type="circle" :percentage="allCourse
+                    ? parseInt(
+                      ((haveWorksCourse / allCourse) * 100).toFixed(0)
+                    )
+                    : 0
+                    " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>设置评价</span>
+                <div>
+                  <el-progress :width="80" type="circle" :percentage="allCourse
+                    ? parseInt(((evaCount / allCourse) * 100).toFixed(0))
+                    : 0
+                    " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>已评价课程</span>
+                <div>
+                  <el-progress :width="80" type="circle" :percentage="allCourse
+                    ? parseInt(
+                      ((evaWorksCount / allCourse) * 100).toFixed(0)
+                    )
+                    : 0
+                    " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>教学评一体化</span>
+                <div>
+                  <el-progress :width="80" type="circle" :percentage="allCourse
+                    ? parseInt(
+                      ((evaWorksCount / allCourse) * 100).toFixed(0)
+                    )
+                    : 0
+                    " :stroke-width="5" :format="format" color="#106BFF"></el-progress>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="info_box" v-if="shType">
+            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
+              <span>平台实施课程总数</span>
+              <!-- <span>{{ count }}</span> -->
+              <span>{{ isCourseCount }}</span>
+            </div>
+            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
+              <span>平台实施课程占比</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{
+                isCourseCount
+                ? ((isCourseCount / allCourseCount) * 100).toFixed(0) + "%"
+                : "0%"
+              }}</span>
+            </div>
+            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
+              <span>课程平均任务数量</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{
+                isCourseCount ? (taskCount / isCourseCount).toFixed(0) : 0
+              }}</span>
+            </div>
+            <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
+              <span>课程平均作业数量</span>
+              <!-- <span>{{ weekCount }}</span> -->
+              <span>{{
+                isCourseCount ? (workCount / isCourseCount).toFixed(0) : 0
+              }}</span>
+            </div>
+          </div>
+          <WorkNum style="height: calc(100% - 95px)" :workNumList="workNumList" @openCourse="openCourse" v-if="shType">
+          </WorkNum>
+          <div class="otherCss">
+            <div v-if="!shType">转换为散点图</div>
+            <div v-if="shType">转换为漏斗图</div>
+            <div class="otherImg" @click="shEchart">
+              <img src="../../../../assets/icon/other.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="top" style="border-radius: 5px">
+        <div class="titleBox" style="justify-content: space-between">
+          <div style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            ">
+            <div class="title" :class="{ isClick: toolType == 0 }" @click="toolType = 0"
+              style="cursor: pointer; padding: 0 0 5px 0">
+              课程占比
+            </div>
+            <div class="title" :class="{ isClick: toolType == 1 }" @click="toolType = 1"
+              style="cursor: pointer; padding: 0 0 5px 0">
+              工具使用
+            </div>
+          </div>
+          <el-select v-model="cType4" @change="typeChange" class="selectBox" v-if="toolType == 0">
+            <!-- <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%)" :courseNumberArray="courseNumberArray" v-if="toolType == 0"></CourseAna>
+          <ToolChart style="height: calc(100%)" :toolArray="toolList" v-if="toolType == 1"></ToolChart>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <div class="title">课程协同情况</div>
+        </div>
+        <div class="dataBox">
+          <WorkTime style="height: calc(100% - 25px)" :personArray="personList" v-if="xtType"></WorkTime>
+          <Subjuect style="height: calc(100% - 25px)" v-if="!xtType" :resultSubject="resultSubject"></Subjuect>
+          <div class="otherCss">
+            <div v-if="!xtType">转换为人员协同</div>
+            <div v-if="xtType">转换为学科协同</div>
+            <div class="otherImg" @click="xtEchart">
+              <img src="../../../../assets/icon/other.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TeaFre from "./chartList/teaFre.vue";
+import ToolUse from "./chartList/toolUse.vue";
+import ToolUse2 from "./chartList/toolUse2.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";
+import Bar from "./chartList/bar.vue";
+import Bar2 from "./chartList/bar2.vue";
+import CourseNum from "./chartList/courseNum.vue";
+import ToolChart from "./chartList/toolChart.vue";
+import Subjuect from "./chartList/subjuect.vue";
+export default {
+  components: {
+    TeaFre,
+    ToolUse,
+    ToolUse2,
+    CateRank,
+    WorkNum,
+    CourseTime,
+    CourseAna,
+    WorkTime,
+    Bar,
+    Bar2,
+    CourseNum,
+    ToolChart,
+    Subjuect,
+  },
+  props: {
+    oid: {
+      type: String,
+    },
+    org: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      cType: "全部年级",
+      cType4: "grade",
+      cType7: "全部课程",
+      toolType: 0,
+      tType: 0,
+      skType: 0,
+      courseType: 0,
+      sType: 0,
+      oType: false,
+      oType2: false,
+      shType: true,
+      xtType: false,
+      allCourse: 0,
+      courseTemplate: 0,
+      loginCountMonthArray: [],
+      lType: "grade",
+      lType1: "grade",
+      allTimeList: [],
+      tedurArray: [],
+      tedurArray2: [],
+      classList: [],
+      subjectList: [],
+      themeList: [],
+      allTime: 0,
+      allTimeLength: 0,
+      gradeLength: 0,
+      subjectLength: 0,
+      themeLength: 0,
+      courseTList: [],
+      courseLength: 0,
+      courseWorksCountYearArray: [],
+      courseWorksCountYearArray2: [],
+      allCourseWorks: [],
+      gradeList: [],
+      subjectList2: [],
+      thList: [],
+      worksCount: 0,
+      haveWorksCourse: 0,
+      courseNumberArray: [],
+      gradeArray: [],
+      subjectArray: [],
+      themeArray: [],
+      allArray: [],
+      toolList: [],
+      personList: [],
+      workNumList: [],
+      taskCount: 0,
+      workCount: 0,
+      isCourseCount: 0,
+      allCourseCount: 0,
+      courseArray: [],
+      evaCount: 0,
+      evaWorksCount: 0,
+      pusaDep: [
+        { value: 0, name: "课程总数" },
+        { value: 0, name: "设置评价课程" },
+        { value: 0, name: "已提交作业课程" },
+        { value: 0, name: "已评价课程" },
+        { value: 0, name: "教学评一体化课程" },
+      ],
+      weekCourse2: [],
+      resultSubject: []
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    openCourse(cid) {
+      window.parent.postMessage({ cid: cid, screenType: "3" }, "*");
+    },
+    otherEchart() {
+      this.oType = !this.oType;
+    },
+    otherEchart2() {
+      this.oType2 = !this.oType2;
+    },
+    shEchart() {
+      this.shType = !this.shType;
+    },
+    xtEchart() {
+      this.xtType = !this.xtType;
+    },
+    format(percentage) {
+      return percentage + "%";
+    },
+    getMonth() {
+      // 获取当前时间
+      var currentDate = new Date();
+
+      // 获取本月的年份和月份
+      var currentYear = currentDate.getFullYear();
+      var currentMonth = currentDate.getMonth() + 1; // 月份从0开始，需要加1
+
+      // 获取上个月的年份和月份
+      var lastMonthYear, lastMonth;
+      if (currentMonth === 1) {
+        lastMonthYear = currentYear - 1;
+        lastMonth = 12;
+      } else {
+        lastMonthYear = currentYear;
+        lastMonth = currentMonth - 1;
+      }
+      // 获取本月的第一天和最后一天的日期
+      var firstDayOfMonth = new Date(currentYear, currentMonth - 1, 1);
+      var lastDayOfMonth = new Date(currentYear, currentMonth, 0);
+
+      // 获取上个月的第一天和最后一天的日期
+      var firstDayOfLastMonth = new Date(lastMonthYear, lastMonth - 1, 1);
+      var lastDayOfLastMonth = new Date(lastMonthYear, lastMonth, 0);
+
+      // 构建本月日期的数组
+      var currentMonthDates = [];
+      for (var i = 1; i <= lastDayOfMonth.getDate(); i++) {
+        let a = new Date(currentYear, currentMonth - 1, i)
+        currentMonthDates.push(a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate());
+      }
+
+      // 构建上个月日期的数组
+      var lastMonthDates = [];
+      for (var j = firstDayOfLastMonth.getDate(); j <= lastDayOfLastMonth.getDate(); j++) {
+        let a = new Date(lastMonthYear, lastMonth - 1, j)
+        lastMonthDates.push(a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate());
+      }
+
+      return {
+        lastWeek: lastMonthDates,//上月
+        toWeek: currentMonthDates //本月
+      }
+    },
+    typeChange1() {
+      var a = [];
+      this.$forceUpdate();
+    },
+    typeChange2() {
+      const date = new Date()
+      this.$forceUpdate();
+    },
+    typeChange() {
+
+      this.$forceUpdate();
+    },
+    getData() {
+      this.isLoading = true;
+      let params = [
+        {
+          oid: this.oid,
+          org: this.org,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "selectDataBoardCourseNew", params)
+        .then((res) => {
+          this.isLoading = false;
+          
+          this.$forceUpdate();
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          this.$message.error('因加载数据量过大，服务器统计异常，请联系管理员。');
+          console.error(err);
+        });
+    },
+    checkArrayInclusion(arr1, arr2) {
+      return arr1.every(item => arr2.includes(item));
+    },
+    hasCommonValue(arr1, arr2) {
+      const set1 = new Set(arr1);
+      for (const val of arr2) {
+        if (set1.has(val)) {
+          return true;
+        }
+      }
+      return false;
+    }
+  },
+};
+</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;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.dataBox {
+  height: calc(100% - 40px);
+  width: 100%;
+}
+
+.middleBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+
+.title {
+  color: #060e17;
+  margin-right: 10px;
+}
+
+.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);
+}
+
+.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;
+}
+
+.timeDiv {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0 0 0 15px;
+}
+
+.timeDiv>div {
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.isClick {
+  color: #1684fc;
+  border-bottom: 2px solid #1684fc;
+  box-sizing: border-box;
+}
+
+.otherCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.otherImg {
+  width: 20px;
+  height: 20px;
+  margin: 0 10px;
+  cursor: pointer;
+}
+
+.otherImg>img {
+  width: 100%;
+  height: 100%;
+}
+
+.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) {}
+
+.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: row;
+  flex-wrap: nowrap;
+  height: 60px;
+  justify-content: space-between;
+  align-items: 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 0 20px; */
+  color: #565e6a;
+  width: 60px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.info_box>.info2>span:nth-child(2),
+.info_box>.info3>span:nth-child(2),
+.info_box>.info>span:nth-child(2) {
+  font-size: 24px;
+  /* font-weight: 700; */
+}
+
+.blueBG {
+  background: rgb(243, 248, 253);
+  border: 2px solid rgb(234, 246, 255);
+}</style>

src/components/pages/dataBoardTest/index.vue

@@ -0,0 +1,153 @@
+<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 == 5">项目数据中心</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 == 5 }" @click="setType(5)" v-if="scourseLength > 0">项目数据</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">
+      <course v-if="type == 1" :oid="oid" :org="org"></course>
+    </div>
+  </div>
+</template>
+
+<script>
+import course from "./course";
+export default {
+  components: {
+    course,
+  },
+  data() {
+    return {
+      type: 1,
+      oid: this.$route.query.oid,
+      org: this.$route.query.org,
+      scourseLength: 0,
+    };
+  },
+  methods: {
+    setType(type) {
+      this.type = type;
+    },
+    getData() {
+      this.isLoading = true;
+      let params = [
+        {
+          oid: this.oid,
+          org: this.org,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "getCourseLength", params)
+        .then((res) => {
+          this.isLoading = false;
+         
+          this.scourseLength = res.data[0][0].count;
+          this.$forceUpdate();
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+  },
+  mounted () {
+    // this.getData();
+  },
+};
+</script>
+
+<style scoped>
+.body {
+  height: 100%;
+  width: 100%;
+  min-width: 1550px;
+  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/router/index.js

@@ -101,6 +101,7 @@ import addTrainCourseE from '@/components/pages/trainCourse/easy/addCourse'
 import dataBoard from '@/components/pages/dataBoard'
 import dataBoardSies from '@/components/pages/dataBoardSies'
 import dataBoardNew from '@/components/pages/dataBoardNew'
+import dataBoardTest from '@/components/pages/dataBoardTest'
 import addSynergyCourse from '@/components/pages/synergyCourse/addCourse'
 import synergyCourse from '@/components/pages/synergyCourse/course'
 import test from '@/components/pages/test/index'
@@ -960,5 +961,12 @@ export default new Router({
                 requireAuth: '' // 是否需要判断是否登录,这里是需要判断
             }
         },
+        {
+            path: '/dataBoardTest',
+            component: dataBoardTest,
+            meta: {
+                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+            }
+        }
     ]
 })