1

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

@@ -409,11 +409,6 @@ export default {
               }
             }
           }
-          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) {

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

@@ -38,7 +38,7 @@ export default {
           type: "value",
         },
         grid: {
-          top: "30",
+          top: "10%",
           left: "5%",
           right: "5%",
           bottom: "5%",

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

@@ -33,7 +33,7 @@ export default {
           nameGap: -45
         },
         grid: {
-          top: "10%",
+          top: "15%",
           left: "5%",
           right: "5%",
           bottom: "10%",

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

@@ -427,7 +427,6 @@ export default {
       lType: "all",
       lType1: "all",
       tedurArray: [],
-      tedurArray1: [],
       classList: [],
       subjectList: [],
       themeList: [],
@@ -973,11 +972,6 @@ export default {
               }
             }
           }
-          for(var i = 0;i<toolAllArray.length;i++){
-            if(toolAllArray[i].value == 0){
-              toolAllArray.splice(i,1)
-            }
-          }
           this.toolList = toolAllArray;
 
           var twoPerson = 0,threePerson = 0,fivePerson = 0,sevenPerson = 0;

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

@@ -12,36 +12,68 @@
 
 <script>
 export default {
+  props: {
+    workTime: {
+      type: Array,
+    },
+  },
   data() {
     return {
       chartObj: null,
       ooption: {
-        xdata: [],
-        type: [],
+        ydata: [],
+        teacher: [],
       },
       option: {
+        title: {
+          text: '在线时长',
+          textStyle: {
+            fontSize: 12,
+          },
+          padding: [10, 0, 0, 10]
+        },
         tooltip: {
-          trigger: "item",
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          top: "10%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
         },
         xAxis: {
           type: "value",
-          data: [0, 50, 100, 150, 200, 250],
+          boundaryGap: [0, 0.01],
         },
         yAxis: {
           type: "category",
-          data: ["五年级", "四年级", "三年级", "二年级", "一年级"],
+          // data: ["六年级", "五年级", "四年级", "三年级", "二年级", "一年级"],
+          data:[]
         },
         series: [
           {
-            data: [120, 200, 150, 80, 70, 110, 130],
+            name: "在线时长（时）",
             type: "bar",
+            // data: [60, 110, 25, 130, 65, 80],
+            data:[],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return "#106bff";
+                },
+              },
+            },
           },
         ],
       },
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -49,17 +81,54 @@ export default {
       //然后异步执行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: {},
+  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.setChart();
+    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) {

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

@@ -37,94 +37,6 @@ export default {
         };
     },
     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);
-        //     });
-        // },
         setChart(option) {
             // 雷达图显示的标签
             let newPromise = new Promise((resolve) => {
@@ -136,25 +48,26 @@ export default {
                     //劳动课程
                     this.$el.querySelector("#charts_canvas")
                 );
-                const hours = 
-                [
-                    '1班', '2班', '3班', '4班', '5班', '6班'
-                ];
+                const hours = option.hours
+                // [
+                //     // '语文', '数学', '英语', '科学', '体育', '音乐', '美术',
+                //     // '劳动', '其他',
+                // ];
                 // prettier-ignore
-                const days = 
-                [
-                    '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
-                ];
+                const days = option.days
+                // [
+                //     // '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
+                // ];
                 // prettier-ignore
-                const data = 
-                [
-                    [0, 0, 34], [0, 1, 35], [0, 2, 40], [0, 3, 33], [0, 4, 35], [0, 5, 35], 
-                    [1, 0, 34], [1, 1, 30], [1, 2, 35], [1, 3, 41], [1, 4, 42], [1, 5, 37], 
-                    [2, 0, 45], [2, 1, 35], [2, 2, 44], [2, 3, 45], [2, 4, 41], [2, 5, 35], 
-                    [3, 0, 41], [3, 1, 44], [3, 2, 43], [3, 3, 39], [3, 4, 42], [3, 5, 42], 
-                    [4, 0, 34], [4, 1, 36], [4, 2, 40], [4, 3, 0], [4, 4, 0], [4, 5, 0], 
-                    [5, 0, 44], [5, 1, 44], [5, 2, 34], [5, 3, 0], [5, 4, 0], [5, 5, 0],
-                ];
+                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 = [];
@@ -181,7 +94,7 @@ export default {
                         type: 'scatter',
                         data: [],
                         symbolSize: function (dataItem) {
-                            return dataItem[1];
+                            return dataItem[1] * 3;
                         }
                     });
                 });
@@ -197,7 +110,6 @@ export default {
             });
         },
         setJson(array) {
-            this.setChart(this.ooption);
             if (array != undefined && array.length > 0) {
                 this.ooption = {
                     hours: [],
@@ -290,7 +202,6 @@ export default {
         // this.courseArray = this.courseArray.filter(item => {
         //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
         // })
-
         this.setJson(this.courseArray)
         var _this = this;
         window.addEventListener("resize", () => {

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

@@ -12,27 +12,33 @@
 
 <script>
 export default {
+  props: {
+    monthArray: {
+      type: Array,
+      default: [],
+    },
+  },
   data() {
     return {
       chartObj: null,
       ooption: {
         xdata: [],
-        course: [],
+        login: [],
       },
       option: {
         tooltip: {
-          trigger: "item",
+          trigger: "axis",
         },
         xAxis: {
           type: "category",
-          boundaryGap: false,
-          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          boundaryGap: true,
+          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
         },
         yAxis: {
           type: "value",
         },
         grid: {
-          top: "15%",
+          top: "30",
           left: "5%",
           right: "5%",
           bottom: "5%",
@@ -40,16 +46,24 @@ export default {
         },
         series: [
           {
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            // data: [820, 932, 901, 934, 1290, 1330, 1320],
+            data: [],
             type: "line",
             areaStyle: {},
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return "#106bff";
+                },
+              },
+            },
           },
         ],
       },
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -59,15 +73,46 @@ export default {
         const chartObj = this.$echarts.init(
           this.$el.querySelector("#charts_canvas")
         );
+        this.option.xAxis.data = option.xdata;
+        this.option.series[0].data = option.login;
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
+    setJson(array) {
+      this.ooption = {
+        xdata: [],
+        login: [],
+      }
+      let _array = array
+      for (var i = 0; i < _array.length; i++) {
+        this.ooption.xdata.push(_array[i].Month + '月')
+        this.ooption.login.push(_array[i].login)
+      }
+
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.xAxis.data = this.ooption.xdata;
+        this.option.series[0].data = this.ooption.login;
+        this.chartObj.setOption(this.option);
+      }
+    }
+  },
+  watch: {
+    monthArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setJson(newValue)
+        this.$forceUpdate();
+      },
+    },
   },
-  watch: {},
   mounted() {
-    this.setChart();
+    this.setJson(this.monthArray)
+
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

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

@@ -1,275 +1,117 @@
 <template>
   <div class="data_body">
     <div style="width: 100%; height: 100%">
-      <div
-        id="charts_canvas"
-        class="echart"
-        style="width: 100%; height: 100%"
-      ></div>
+      <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",
+          position: 'top'
         },
         grid: {
-          height: "50%",
-          top: "10%",
+          top: '50',
+          left: '5%',
+          right: '5%',
+          bottom: '5%',
+          containLabel: true
         },
         xAxis: {
-          type: "category",
-          data: [
-            "12a",
-            "1a",
-            "2a",
-            "3a",
-            "4a",
-            "5a",
-            "6a",
-            "7a",
-            "8a",
-            "9a",
-            "10a",
-            "11a",
-            "12p",
-            "1p",
-            "2p",
-            "3p",
-            "4p",
-            "5p",
-            "6p",
-            "7p",
-            "8p",
-            "9p",
-            "10p",
-            "11p",
-          ],
+          type: 'category',
+          // data: [
+          //     '1月', '2月', '3月', '4月', '5月', '6月', '7月',
+          //     '8月', '9月', '10月', '11月', '12月'
+          // ],
+          data: [],
           splitArea: {
-            show: true,
+            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",
+          type: 'category',
           data: [
-            "星期一",
-            "星期二",
-            "星期三",
-            "星期四",
-            "星期五",
-            "星期六",
-            "星期日",
+            '星期天', '星期一', '星期二', '星期三',
+            '星期四', '星期五', '星期六',
           ],
           splitArea: {
-            show: true,
+            show: true
           },
         },
         visualMap: {
           min: 0,
           max: 10,
           calculable: true,
-          orient: "horizontal",
-          left: "center",
-          bottom: "15%",
+          orient: 'horizontal',
+          right: '10',
+          top: '0%'
         },
         series: [
           {
-            name: "Punch Card",
-            type: "heatmap",
-            data: [
-              [0, 0, 5],
-              [0, 1, 1],
-              [0, 2, 0],
-              [0, 3, 0],
-              [0, 4, 0],
-              [0, 5, 0],
-              [0, 6, 0],
-              [0, 7, 0],
-              [0, 8, 0],
-              [0, 9, 0],
-              [0, 10, 0],
-              [0, 11, 2],
-              [0, 12, 4],
-              [0, 13, 1],
-              [0, 14, 1],
-              [0, 15, 3],
-              [0, 16, 4],
-              [0, 17, 6],
-              [0, 18, 4],
-              [0, 19, 4],
-              [0, 20, 3],
-              [0, 21, 3],
-              [0, 22, 2],
-              [0, 23, 5],
-              [1, 0, 7],
-              [1, 1, 0],
-              [1, 2, 0],
-              [1, 3, 0],
-              [1, 4, 0],
-              [1, 5, 0],
-              [1, 6, 0],
-              [1, 7, 0],
-              [1, 8, 0],
-              [1, 9, 0],
-              [1, 10, 5],
-              [1, 11, 2],
-              [1, 12, 2],
-              [1, 13, 6],
-              [1, 14, 9],
-              [1, 15, 11],
-              [1, 16, 6],
-              [1, 17, 7],
-              [1, 18, 8],
-              [1, 19, 12],
-              [1, 20, 5],
-              [1, 21, 5],
-              [1, 22, 7],
-              [1, 23, 2],
-              [2, 0, 1],
-              [2, 1, 1],
-              [2, 2, 0],
-              [2, 3, 0],
-              [2, 4, 0],
-              [2, 5, 0],
-              [2, 6, 0],
-              [2, 7, 0],
-              [2, 8, 0],
-              [2, 9, 0],
-              [2, 10, 3],
-              [2, 11, 2],
-              [2, 12, 1],
-              [2, 13, 9],
-              [2, 14, 8],
-              [2, 15, 10],
-              [2, 16, 6],
-              [2, 17, 5],
-              [2, 18, 5],
-              [2, 19, 5],
-              [2, 20, 7],
-              [2, 21, 4],
-              [2, 22, 2],
-              [2, 23, 4],
-              [3, 0, 7],
-              [3, 1, 3],
-              [3, 2, 0],
-              [3, 3, 0],
-              [3, 4, 0],
-              [3, 5, 0],
-              [3, 6, 0],
-              [3, 7, 0],
-              [3, 8, 1],
-              [3, 9, 0],
-              [3, 10, 5],
-              [3, 11, 4],
-              [3, 12, 7],
-              [3, 13, 14],
-              [3, 14, 13],
-              [3, 15, 12],
-              [3, 16, 9],
-              [3, 17, 5],
-              [3, 18, 5],
-              [3, 19, 10],
-              [3, 20, 6],
-              [3, 21, 4],
-              [3, 22, 4],
-              [3, 23, 1],
-              [4, 0, 1],
-              [4, 1, 3],
-              [4, 2, 0],
-              [4, 3, 0],
-              [4, 4, 0],
-              [4, 5, 1],
-              [4, 6, 0],
-              [4, 7, 0],
-              [4, 8, 0],
-              [4, 9, 2],
-              [4, 10, 4],
-              [4, 11, 4],
-              [4, 12, 2],
-              [4, 13, 4],
-              [4, 14, 4],
-              [4, 15, 14],
-              [4, 16, 12],
-              [4, 17, 1],
-              [4, 18, 8],
-              [4, 19, 5],
-              [4, 20, 3],
-              [4, 21, 7],
-              [4, 22, 3],
-              [4, 23, 0],
-              [5, 0, 2],
-              [5, 1, 1],
-              [5, 2, 0],
-              [5, 3, 3],
-              [5, 4, 0],
-              [5, 5, 0],
-              [5, 6, 0],
-              [5, 7, 0],
-              [5, 8, 2],
-              [5, 9, 0],
-              [5, 10, 4],
-              [5, 11, 1],
-              [5, 12, 5],
-              [5, 13, 10],
-              [5, 14, 5],
-              [5, 15, 7],
-              [5, 16, 11],
-              [5, 17, 6],
-              [5, 18, 0],
-              [5, 19, 5],
-              [5, 20, 3],
-              [5, 21, 4],
-              [5, 22, 2],
-              [5, 23, 0],
-              [6, 0, 1],
-              [6, 1, 0],
-              [6, 2, 0],
-              [6, 3, 0],
-              [6, 4, 0],
-              [6, 5, 0],
-              [6, 6, 0],
-              [6, 7, 0],
-              [6, 8, 0],
-              [6, 9, 0],
-              [6, 10, 1],
-              [6, 11, 0],
-              [6, 12, 2],
-              [6, 13, 1],
-              [6, 14, 3],
-              [6, 15, 4],
-              [6, 16, 0],
-              [6, 17, 0],
-              [6, 18, 0],
-              [6, 19, 0],
-              [6, 20, 1],
-              [6, 21, 2],
-              [6, 22, 2],
-              [6, 23, 6],
-            ].map(function (item) {
-              return [item[1], item[0], item[2] || "-"];
-            }),
+            name: '',
+            type: 'heatmap',
+            data: [],
             label: {
-              show: true,
+              show: true
             },
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
-            },
-          },
-        ],
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
       },
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -277,18 +119,70 @@ export default {
       //然后异步执行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();
+      },
+    },
   },
-  watch: {},
   mounted() {
-    this.setChart();
-    var _this = this;
+    this.setJson(this.yearArray)
+
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
         _this.chartObj.resize();
@@ -301,14 +195,12 @@ export default {
 <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>
+</style>

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

@@ -1,17 +1,18 @@
 <template>
   <div class="data_body">
     <div style="width: 100%; height: 100%">
-      <div
-        id="charts_canvas"
-        class="echart"
-        style="width: 100%; height: 100%"
-      ></div>
+      <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,
@@ -22,6 +23,13 @@ export default {
         tooltip: {
           trigger: "item",
         },
+        grid: {
+          top: "5%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
         series: [
           {
             type: "pie",
@@ -35,12 +43,12 @@ export default {
               },
             },
             data: [
-              { value: 100, name: "一年级" },
-              { value: 150, name: "二年级" },
-              { value: 223, name: "三年级" },
-              { value: 216, name: "四年级" },
-              { value: 130, name: "五年级" },
-              { value: 208, name: "六年级" },
+              // { value: 123, name: "一年级" },
+              // { value: 200, name: "二年级" },
+              // { value: 250, name: "三年级" },
+              // { value: 450, name: "四年级" },
+              // { value: 300, name: "五年级" },
+              // { value: 100, name: "六年级" },
             ],
           },
         ],
@@ -48,7 +56,7 @@ export default {
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -59,16 +67,46 @@ export default {
           //劳动课程
           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.setChart();
+    this.setArray(this.courseNumberArray);
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

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

@@ -11,25 +11,58 @@
             <div class="info blueBG">
               <span>教师总数</span>
               <!-- <span>{{ count }}</span> -->
-              <span>{{ 18 }}</span>
+              <span>{{ teacherNum }}</span>
             </div>
             <div class="info blueBG">
               <span>本月登录教师用户环比</span>
               <!-- <span>{{ weekCount }}</span> -->
-              <span>{{ "80%" }}</span>
+              <span v-if="teacherLoginCountMonthArray.length">{{
+                teacherLoginCountMonthArray[
+                  teacherLoginCountMonthArray.length - 1
+                ].login -
+                  teacherLoginCountMonthArray[
+                    teacherLoginCountMonthArray.length - 2
+                  ].login <
+                0
+                  ? 0
+                  : (
+                      (teacherLoginCountMonthArray[
+                        teacherLoginCountMonthArray.length - 1
+                      ].login -
+                        teacherLoginCountMonthArray[
+                          teacherLoginCountMonthArray.length - 2
+                        ].login) /
+                      (allLoginTeacher -
+                        teacherLoginCountMonthArray[
+                          teacherLoginCountMonthArray.length - 1
+                        ].login)
+                    ).toFixed(2) *
+                      100 +
+                    "%"
+              }}</span>
             </div>
             <div class="info blueBG">
               <span>本月登录教师用户总数</span>
               <!-- <span>{{ weekCount }}</span> -->
-              <span>{{ 18 }}</span>
+              <span v-if="teacherLoginCountMonthArray.length">{{
+                teacherLoginCountMonthArray[
+                  teacherLoginCountMonthArray.length - 1
+                ].login
+              }}</span>
             </div>
             <div class="info blueBG">
-              <span>本月新增登录教师用户</span>
+              <span>本月新增教师总数</span>
               <!-- <span>{{ weekCount }}</span> -->
-              <span>{{ 18 }}</span>
+              <span v-if="teacherNumCountMonthArray.length">{{
+                teacherNumCountMonthArray[teacherNumCountMonthArray.length - 1]
+                  .num
+              }}</span>
             </div>
           </div>
-          <TeaFre style="height: calc(100% - 150px)"></TeaFre>
+          <TeaFre
+            style="height: calc(100% - 150px)"
+            :monthArray="teacherLoginCountMonthArray"
+          ></TeaFre>
         </div>
       </div>
       <div class="bottom">
@@ -50,49 +83,51 @@
           >
             登录频次
           </div>
-          <el-select v-model="cType" class="selectBox" style="width: 110px">
-            <el-option label="全部" value="全部"></el-option>
-          </el-select>
-          <div class="timeDiv">
-            <div @click="tType = 0" :class="{ isClick: tType == 0 }">周</div>
-            <div @click="tType = 1" :class="{ isClick: tType == 1 }">月</div>
-            <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
-          </div>
         </div>
-        <div class="info_box" v-if="!oType">
+        <div class="info_box" v-if="skType == 0">
           <div class="info blueBG">
-            <span>开展频次</span>
+            <span>累计时长</span>
             <!-- <span>{{ count }}</span> -->
-            <span>{{ 18 }}</span>
+            <span>{{ allTime.toFixed(0) }}</span>
           </div>
           <div class="info blueBG">
-            <span>人均使用频次</span>
+            <span>人均在线时长</span>
             <!-- <span>{{ weekCount }}</span> -->
-            <span>{{ "80%" }}</span>
+            <span>{{
+              allTime == 0 ? 0 : (allTime / teacherNum).toFixed(0)
+            }}</span>
           </div>
         </div>
-        <div class="info_box" v-if="oType">
+        <div class="info_box" v-if="skType == 1">
           <div class="info blueBG">
-            <span>累计时长</span>
+            <span>登录频次</span>
             <!-- <span>{{ count }}</span> -->
-            <span>{{ 18 }}</span>
+            <span>{{ allLoginTime }}</span>
           </div>
           <div class="info blueBG">
-            <span>人均在线时长</span>
+            <span>人均登录频次</span>
             <!-- <span>{{ weekCount }}</span> -->
-            <span>{{ 4 }}</span>
+            <span>{{ allLoginTime == 0 ? 0 : (allLoginTime / teacherNum).toFixed(0) }}</span>
           </div>
         </div>
         <div class="dataBox">
-          <ToolUse style="height: calc(100% - 120px)" v-if="!oType"></ToolUse>
-          <Bar style="height: calc(100% - 120px)" v-if="oType"></Bar>
-          <div class="otherCss">
+          <Bar
+            style="height: calc(100% - 70px)"
+            v-if="skType == 0"
+            :workTime="workTime"
+          ></Bar>
+          <ToolUse
+            style="height: calc(100% - 70px)"
+            v-if="skType == 1"
+            :yearArray="loginCountYearArray"
+          ></ToolUse>
+          <!-- <div class="otherCss">
             <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> -->
         </div>
       </div>
     </div>
@@ -124,46 +159,10 @@
               教师协同情况
             </div>
           </div>
-          <div
-            style="
-              display: flex;
-              flex-direction: row;
-              flex-wrap: nowrap;
-              align-items: center;
-            "
-            v-if="courseType == 0"
-          >
-            <el-select v-model="cType1" class="selectBox" style="width: 110px">
-              <el-option label="全部活动" value="全部活动"></el-option>
-            </el-select>
-            <el-select v-model="cType2" class="selectBox" style="width: 110px">
-              <el-option label="时长" value="时长"></el-option>
-            </el-select>
-          </div>
-          <div
-            style="
-              display: flex;
-              flex-direction: row;
-              flex-wrap: nowrap;
-              align-items: center;
-            "
-            v-if="courseType == 1"
-          >
-            <el-select v-model="cType3" class="selectBox" style="width: 110px">
-              <el-option label="课程" value="课程"></el-option>
-            </el-select>
-          </div>
-          <div class="timeDiv">
-            <div @click="tType1 = 0" :class="{ isClick: tType1 == 0 }">周</div>
-            <div @click="tType1 = 1" :class="{ isClick: tType1 == 1 }">月</div>
-            <div @click="tType1 = 2" :class="{ isClick: tType1 == 2 }">
-              学期
-            </div>
-          </div>
         </div>
         <div class="dataBox">
-          <TeaData v-if="courseType == 0" style="height: calc(100%)"></TeaData>
-          <FunPlot v-if="courseType == 1" style="height: calc(100%)"></FunPlot>
+          <TeaData v-if="courseType == 0 || courseType == 1" style="height: calc(100%)" :courseArray="courseArray"></TeaData>
+          <!-- <FunPlot v-if="courseType == 1" style="height: calc(100%)"></FunPlot> -->
         </div>
       </div>
       <div class="bottom">
@@ -305,24 +304,19 @@
       <div class="top" style="border-radius: 5px">
         <div class="titleBox" style="justify-content: space-between">
           <div class="title">年级占比</div>
-          <div
-            style="
-              display: flex;
-              flex-direction: row;
-              flex-wrap: nowrap;
-              align-items: center;
-            "
+          <el-select
+            v-model="cType4"
+            @change="typeChange"
+            class="selectBox"
           >
-            <el-select v-model="cType4" class="selectBox" style="width: 110px">
-              <el-option label="全部活动" value="全部活动"></el-option>
-            </el-select>
-            <el-select v-model="cType5" class="selectBox" style="width: 110px">
-              <el-option label="时长" value="时长"></el-option>
-            </el-select>
-          </div>
+            <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">
-          <WorkNum style="height: calc(100% - 40px)"></WorkNum>
+          <WorkNum style="height: calc(100% - 40px)" :courseNumberArray="courseNumberArray"></WorkNum>
         </div>
       </div>
       <div class="bottom">
@@ -393,19 +387,29 @@ export default {
     return {
       isLoading: false,
       skType: 0,
-      tType: 0,
-      tType1: 0,
       courseType: 0,
       bType: 0,
       sType: 0,
-      cType: "全部",
-      cType1: "全部活动",
-      cType2: "时长",
-      cType3: "课程",
-      cType4: "全部活动",
-      cType5: "时长",
+      cType4: "",
       cType6: "全部年级",
       oType: false,
+      teacherNum: 0,
+      allLoginTeacher: 0,
+      teacherNumCountMonthArray: [],
+      teacherLoginCountMonthArray: [],
+      tedurArray: [],
+      allTime: 0,
+      workTime: [],
+      gradeTime: [],
+      subjectTime: [],
+      themeListTime: [],
+      loginCountYearArray: [],
+      courseArray: [],
+      courseNumberArray: [],
+      gradeArray: [],
+      subjectArray: [],
+      themeArray: [],
+      allArray: [],
     };
   },
   mounted() {
@@ -415,6 +419,21 @@ export default {
     otherEchart() {
       this.oType = !this.oType;
     },
+    format(percentage) {
+      return percentage + '%';
+    },
+    typeChange() {
+      if (this.cType4 === "") {
+        this.courseNumberArray = this.allArray;
+      } else if (this.cType4 === "grade") {
+        this.courseNumberArray = this.gradeArray;
+      } else if (this.cType4 === "theme") {
+        this.courseNumberArray = this.themeArray;
+      } else if (this.cType4 === "subject") {
+        this.courseNumberArray = this.subjectArray;
+      }
+      this.$forceUpdate();
+    },
     getData() {
       this.isLoading = true;
       let params = [
@@ -429,7 +448,254 @@ export default {
           this.isLoading = false;
           let _grade = res.data[0]; //年级
           let _subject = res.data[1]; //学科
-          let _course = res.data[2]; //课程
+          let _themeList = res.data[2]; //主题
+          this.teacherNum = res.data[3][0].count; //教师总数
+          let _teacherNumYear = res.data[4]; //半年内教师数量
+          let _teacherLoginYear = res.data[5]; //半年内登录教师
+
+          //将数据根据time里面的月份分成多个数组
+          let teacherNumCountMonthArray = [];
+          let teacherLoginCountMonthArray = [];
+          const date = new Date();
+          var Month = date.getMonth() + 1;
+          var Year = date.getFullYear();
+          for (var i = Month; i > Month - 6; i--) {
+            if (i <= 0) {
+              teacherNumCountMonthArray.push({
+                Year: Year - 1,
+                Month: 12 + i,
+                num: 0,
+              });
+              teacherLoginCountMonthArray.push({
+                Year: Year - 1,
+                Month: 12 + i,
+                login: 0,
+              });
+            } else {
+              teacherNumCountMonthArray.push({
+                Month: i,
+                Year: Year,
+                num: 0,
+              });
+              teacherLoginCountMonthArray.push({
+                Month: i,
+                Year: Year,
+                login: 0,
+              });
+            }
+          }
+
+          teacherNumCountMonthArray = teacherNumCountMonthArray.reverse();
+          teacherLoginCountMonthArray = teacherLoginCountMonthArray.reverse();
+          for (var i = 0; i < _teacherNumYear.length; i++) {
+            let _date = new Date(_teacherNumYear[i].time);
+            var _month = _date.getMonth() + 1;
+            var _year = _date.getFullYear();
+            for (var j = 0; j < teacherNumCountMonthArray.length; j++) {
+              if (
+                _month == teacherNumCountMonthArray[j].Month &&
+                _year == teacherNumCountMonthArray[j].Year
+              ) {
+                teacherNumCountMonthArray[j].num++;
+                break;
+              }
+            }
+          }
+          for (var i = 0; i < _teacherLoginYear.length; i++) {
+            let _date = new Date(_teacherLoginYear[i].time);
+            var _month = _date.getMonth() + 1;
+            var _year = _date.getFullYear();
+            for (var j = 0; j < teacherLoginCountMonthArray.length; j++) {
+              if (
+                _month == teacherLoginCountMonthArray[j].Month &&
+                _year == teacherLoginCountMonthArray[j].Year
+              ) {
+                teacherLoginCountMonthArray[j].login++;
+                break;
+              }
+            }
+          }
+          var allLoginTeacher = 0;
+          for (var i = 0; i < teacherLoginCountMonthArray.length; i++) {
+            allLoginTeacher += teacherLoginCountMonthArray[i].login;
+          }
+
+          this.allLoginTeacher = allLoginTeacher;
+          this.teacherNumCountMonthArray = teacherNumCountMonthArray;
+          this.teacherLoginCountMonthArray = teacherLoginCountMonthArray;
+
+          let _workTime = res.data[6]; //查询教研室在线时长
+          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.allTime = parseInt(res.data[7][0].time) / 60 / 60;
+
+          let allLoginCount = res.data[8]; //一年的登录频次
+          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 < allLoginCount.length; i++) {
+            let _date = new Date(allLoginCount[i].time);
+            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;
+              }
+            }
+          }
+          this.loginCountYearArray = loginCountYearArray;
+
+          this.allLoginTime = res.data[9][0].count; //一年的登录频次
+
+          let _course = res.data[10]; //课程
+          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.courseArray = _courseArray;
+
+          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.typeChange();
 
           this.$forceUpdate();
         })