1

src/components/pages/components/loading.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    v-if="loading2"
+    class="loadingBox"
+    v-loading="true"
+    :element-loading-text="lNum + '%'"
+  >
+    <!-- <div class="loading"><img src="../../../assets/loading.gif" alt="" /></div> -->
+    <!-- <div>{{ lNum }}%</div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["isLoading"],
+  data() {
+    return {
+      lNum: 0,
+      timmer: null,
+      loading2: false,
+      timeout: null,
+    };
+  },
+  watch: {
+    isLoading: {
+      handler: function (newVal, oldVal) {
+        if (newVal) {
+          if (this.timeout) {
+            this.timeout = null;
+            clearTimeout(this.timeout);
+          }
+          this.lNum = 1;
+          this.loading2 = true;
+          this.setTime();
+        } else {
+          if (this.timmer) {
+            clearInterval(this.timmer);
+          }
+          this.lNum = 100;
+          this.timeout = setTimeout(() => {
+            this.loading2 = false;
+          }, 1000);
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    setTime() {
+      let count = 1;
+      this.timmer = setInterval(() => {
+        count++;
+        let persent = parseInt(((count / 90) * 100).toFixed(0));
+        if (persent == 0) {
+          this.lNum = 1;
+        } else if (0 < persent < 100) {
+          this.lNum = persent;
+        } else if (persent >= 100) {
+          this.lNum = 99;
+        }
+      }, 1000);
+    },
+  },
+  beforeDestroy() {
+    if (this.timmer) {
+      clearInterval(this.timmer);
+    }
+  },
+  mounted() {
+    // if (this.isLoading) {
+    //   this.loading2 = true;
+    //   this.setTime();
+    // } else {
+    //   if (this.timmer) {
+    //     clearInterval(this.timmer);
+    //   }
+    //   this.lNum = 100;
+    //   this.timeout = setTimeout(() => {
+    //     this.loading2 = false;
+    //   }, 1000);
+    // }
+  },
+};
+</script>
+
+<style scoped>
+.loadingBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #8d8d8d8f;
+  z-index: 999;
+}
+.loading {
+  width: 100px;
+  height: 100px;
+}
+.loading > img {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -1,120 +1,99 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
-    </div>
+    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+    <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    yearArray: {
-      type: Array,
-    },
-  },
+  props: ["Josn"],
   data() {
     return {
+      mindV: true,
       chartObj: null,
-      ooption: {
-        xdata: [],
-        sdata: [],
-      },
+      timer: null,
+      range: "",
+      ooption: [],
       option: {
         // title: {
-        //   text: '登录频次',
-        //   textStyle: {
-        //     fontSize: 12,
-        //   },
-        //   padding: [10, 0, 0, 10]
+        //   top: 30,
+        //   left: 'center',
+        //   text: '作业提交热力图'
         // },
         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;
-              }
-            }
+          formatter: function (p) {
+            const format = p.data[0];
+            return format + ' ' + p.data[1]+'份';
           }
         },
-        yAxis: {
-          type: 'category',
-          data: [
-            '星期天', '星期一', '星期二', '星期三',
-            '星期四', '星期五', '星期六',
-          ],
-          splitArea: {
-            show: true
-          },
-        },
         visualMap: {
           min: 0,
-          max: 10,
-          calculable: true,
-          orient: 'horizontal',
+          max: 0,
+          type: 'continuous',
           inRange: {
-            color: ['#fff', '#477cd7']
+            color: ['#65b9fc', '#477cd7']
           },
-          right: '10',
-          top: '0%'
+          precision: 0,
+          calculable: true,
         },
-        series: [
-          {
-            name: '',
-            type: 'heatmap',
-            data: [],
-            label: {
-              show: true
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
+        calendar: {
+          top: 40,
+          left: 100,
+          right: 30,
+          cellSize: ['auto', 15],
+          range: '',
+          itemStyle: {
+            borderWidth: 0.5
+          },
+          yearLabel: { show: false },
+          dayLabel: {
+            show: false
           }
-        ]
+        },
+        series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: ''
+        }
       },
     };
   },
   methods: {
-    setChart(option) {
+    gettime() {
+      var time = new Date();
+      // time=time.setDate(time.getDate()+1);
+      // time = new Date(time);
+      // time.setTime(time.getTime());
+      var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
+        + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
+      var monthNum = 3; //要减的月数(6)自己定义
+      var dateArr = s2.split('-'); //s2当前时间
+      var year = dateArr[0]; //获取当前日期的年份
+      var month = dateArr[1]; //获取当前日期的月份
+      var day = dateArr[2]; //获取当前日期的日
+      var days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中月的天数
+      var year2 = year;
+      var month2 = parseInt(month) - monthNum;
+      if (month2 <= 0) {
+        // year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
+        year2 = parseInt(year2) - 1;
+        month2 = 12 - (Math.abs(month2) % 12);
+      }
+      var day2 = day;
+      var days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2 < 10 ? '0' + days2 : days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      var t2 = year2 + '-' + month2 + '-' + day2;
+      return [t2, s2]
+    },
+    setChart(option, year) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -125,85 +104,96 @@ export default {
           //劳动课程
           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.option.series.data = option;
+        this.option.calendar.range = year;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
-    setJson(array) {
-      this.ooption = {
-        xdata: [],
-        sdata: [],
-        max: 0
+    getVirtualData(year) {
+      const date = +this.$echarts.time.parse(year[0]);
+      const end = +this.$echarts.time.parse(year[1]);
+      const dayTime = 3600 * 24 * 1000;
+      const data = [];
+      for (let time = date; time <= end; time += dayTime) {
+        let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
+        if (this.Josn[a]) {
+          data.push([a, this.Josn[a]]);
+        } else {
+          data.push([a, null]);
+        }
       }
-      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];
+      return data;
+    },
+    setData() {
+      let year = Object.keys(this.Josn)[0].split('-')[0];
+      var t = this.gettime();
+      this.ooption = this.getVirtualData(t)
       if (!this.chartObj) {
-        this.setChart(this.ooption);
+        this.setChart(this.ooption, t);
       } else {
-        this.option.xAxis.data = this.ooption.xdata;
-        this.option.series[0].data = this.ooption.sdata;
-        this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
-        this.chartObj.setOption(this.option);
+        this.option.series.data = this.ooption;
+        this.option.calendar.range = t;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
+        this.chartObj.setOption(this.option, t);
       }
-    }
+    },
   },
   watch: {
-    yearArray: {
-      immediate: true,
+    Josn: {
+      handler: function (newVal, oldVal) { 
+        this.setData();
+       },
       deep: true,
-      handler(newValue, oldValue) {
-        this.setJson(newValue)
-        this.$forceUpdate();
-      },
     },
   },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
   mounted() {
-    this.setJson(this.yearArray)
-
+    this.setData();
+    var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
         _this.chartObj.resize();
       }
     });
   },
+  beforeDestroy() {
+    // clearInterval(this.timer);
+    // this.timer = null
+  },
 };
 </script>
 
 <style scoped>
 .data_body {
-  height: 100%;
+  /* display: flex; */
+  /* flex-direction: column; */
+  width: 100%;
+  height: 170px;
+  /* height: 500px; */
+  /* margin: 15px 5px 0 0; */
+  background: #fff;
+  overflow: hidden;
+  flex-shrink: 0;
   position: relative;
-  border-radius: 5px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 0;
-  width: 95%;
+}
+
+.noMind {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
   background: #fff;
 }
 </style>

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

@@ -1,120 +1,99 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
-    </div>
+    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+    <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    yearArray: {
-      type: Array,
-    },
-  },
+  props: ["Josn"],
   data() {
     return {
+      mindV: true,
       chartObj: null,
-      ooption: {
-        xdata: [],
-        sdata: [],
-      },
+      timer: null,
+      range: "",
+      ooption: [],
       option: {
         // title: {
-        //   text: '登录频次',
-        //   textStyle: {
-        //     fontSize: 12,
-        //   },
-        //   padding: [10, 0, 0, 10]
+        //   top: 30,
+        //   left: 'center',
+        //   text: '作业提交热力图'
         // },
         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;
-              }
-            }
+          formatter: function (p) {
+            const format = p.data[0];
+            return format + ' ' + p.data[1]+'份';
           }
         },
-        yAxis: {
-          type: 'category',
-          data: [
-            '星期天', '星期一', '星期二', '星期三',
-            '星期四', '星期五', '星期六',
-          ],
-          splitArea: {
-            show: true
-          },
-        },
         visualMap: {
           min: 0,
-          max: 10,
-          calculable: true,
-          orient: 'horizontal',
+          max: 0,
+          type: 'continuous',
           inRange: {
-            color: ['#fff', '#477cd7']
+            color: ['#65b9fc', '#477cd7']
           },
-          right: '10',
-          top: '0%'
+          precision: 0,
+          calculable: true,
         },
-        series: [
-          {
-            name: '',
-            type: 'heatmap',
-            data: [],
-            label: {
-              show: true
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
+        calendar: {
+          top: 40,
+          left: 100,
+          right: 30,
+          cellSize: ['auto', 15],
+          range: '',
+          itemStyle: {
+            borderWidth: 0.5
+          },
+          yearLabel: { show: false },
+          dayLabel: {
+            show: false
           }
-        ]
+        },
+        series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: ''
+        }
       },
     };
   },
   methods: {
-    setChart(option) {
+    gettime() {
+      var time = new Date();
+      // time=time.setDate(time.getDate()+1);
+      // time = new Date(time);
+      // time.setTime(time.getTime());
+      var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
+        + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
+      var monthNum = 3; //要减的月数(6)自己定义
+      var dateArr = s2.split('-'); //s2当前时间
+      var year = dateArr[0]; //获取当前日期的年份
+      var month = dateArr[1]; //获取当前日期的月份
+      var day = dateArr[2]; //获取当前日期的日
+      var days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中月的天数
+      var year2 = year;
+      var month2 = parseInt(month) - monthNum;
+      if (month2 <= 0) {
+        // year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
+        year2 = parseInt(year2) - 1;
+        month2 = 12 - (Math.abs(month2) % 12);
+      }
+      var day2 = day;
+      var days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2 < 10 ? '0' + days2 : days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      var t2 = year2 + '-' + month2 + '-' + day2;
+      return [t2, s2]
+    },
+    setChart(option, year) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -125,85 +104,96 @@ export default {
           //劳动课程
           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.option.series.data = option;
+        this.option.calendar.range = year;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
-    setJson(array) {
-      this.ooption = {
-        xdata: [],
-        sdata: [],
-        max: 0
+    getVirtualData(year) {
+      const date = +this.$echarts.time.parse(year[0]);
+      const end = +this.$echarts.time.parse(year[1]);
+      const dayTime = 3600 * 24 * 1000;
+      const data = [];
+      for (let time = date; time <= end; time += dayTime) {
+        let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
+        if (this.Josn[a]) {
+          data.push([a, this.Josn[a]]);
+        } else {
+          data.push([a, null]);
+        }
       }
-      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];
+      return data;
+    },
+    setData() {
+      let year = Object.keys(this.Josn)[0].split('-')[0];
+      var t = this.gettime();
+      this.ooption = this.getVirtualData(t)
       if (!this.chartObj) {
-        this.setChart(this.ooption);
+        this.setChart(this.ooption, t);
       } else {
-        this.option.xAxis.data = this.ooption.xdata;
-        this.option.series[0].data = this.ooption.sdata;
-        this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
-        this.chartObj.setOption(this.option);
+        this.option.series.data = this.ooption;
+        this.option.calendar.range = t;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
+        this.chartObj.setOption(this.option, t);
       }
-    }
+    },
   },
   watch: {
-    yearArray: {
-      immediate: true,
+    Josn: {
+      handler: function (newVal, oldVal) { 
+        this.setData();
+       },
       deep: true,
-      handler(newValue, oldValue) {
-        this.setJson(newValue)
-        this.$forceUpdate();
-      },
     },
   },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
   mounted() {
-    this.setJson(this.yearArray)
-
+    this.setData();
+    var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
         _this.chartObj.resize();
       }
     });
   },
+  beforeDestroy() {
+    // clearInterval(this.timer);
+    // this.timer = null
+  },
 };
 </script>
 
 <style scoped>
 .data_body {
-  height: 100%;
+  /* display: flex; */
+  /* flex-direction: column; */
+  width: 100%;
+  height: 170px;
+  /* height: 500px; */
+  /* margin: 15px 5px 0 0; */
+  background: #fff;
+  overflow: hidden;
+  flex-shrink: 0;
   position: relative;
-  border-radius: 5px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 0;
-  width: 95%;
+}
+
+.noMind {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
   background: #fff;
 }
 </style>

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

@@ -1,5 +1,6 @@
 <template>
-  <div class="body1" v-loading="isLoading">
+  <div class="body1">
+    <loading :isLoading="isLoading"></loading>
     <!-- 课程数据 -->
     <div class="left">
       <div class="top">
@@ -157,13 +158,13 @@
           <ToolUse2
             style="height: calc(100% - 100px)"
             v-if="skType == 0 && oType"
-            :yearArray="courseWorksCountYearArray2"
+            :Josn="courseWorksCountYearArray2"
           ></ToolUse2>
 
           <ToolUse
             style="height: calc(100% - 100px)"
             v-if="skType == 1 && !oType2"
-            :yearArray="courseWorksCountYearArray"
+            :Josn="courseWorksCountYearArray"
           ></ToolUse>
           <Bar2
             style="height: calc(100% - 100px)"
@@ -473,6 +474,7 @@ import Bar2 from "./chartList/bar2.vue";
 import CourseNum from "./chartList/courseNum.vue";
 import ToolChart from "./chartList/toolChart.vue";
 import Subjuect from "./chartList/subjuect.vue";
+import loading from "../../comploadingonents/loading.vue";
 export default {
   components: {
     TeaFre,
@@ -488,6 +490,7 @@ export default {
     CourseNum,
     ToolChart,
     Subjuect,
+    loading
   },
   props: {
     oid: {
@@ -670,87 +673,124 @@ export default {
       const date = new Date();
       var Month = date.getMonth() + 1;
       var Year = date.getFullYear();
-      let courseWorksCountYearArray = [];
-      for (var i = Month; i > Month - 12; i--) {
-        if (i <= 0) {
-          courseWorksCountYearArray.push({
-            Year: Year - 1,
-            Month: 12 + i,
-            mon: 0,
-            tue: 0,
-            wed: 0,
-            thur: 0,
-            fri: 0,
-            sat: 0,
-            sun: 0,
-          });
-        } else {
-          courseWorksCountYearArray.push({
-            Month: i,
-            Year: Year,
-            mon: 0,
-            tue: 0,
-            wed: 0,
-            thur: 0,
-            fri: 0,
-            sat: 0,
-            sun: 0,
-          });
-        }
+      let courseWorksCountYearArray = {};
+      let timeArray = [];
+      for (var i = 0; i < this.courseTList.length; i++) {
+        timeArray.push(this.courseTList[i].time);
       }
-      courseWorksCountYearArray = courseWorksCountYearArray.reverse();
-
       for (var i = 0; i < this.courseTList.length; i++) {
-        let _date = new Date(this.courseTList[i].create_at);
         let _type = this.courseTList[i].type
           ? this.courseTList[i].type.split(",")
           : [];
-        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 < courseWorksCountYearArray.length; j++) {
-          let time = (this.courseTList[i].text / 3600).toFixed(0);
-          time = parseInt(time) ? parseInt(time) : 0;
-          if (this.lType1 == "all") {
-            if (
-              _month == courseWorksCountYearArray[j].Month &&
-              _year == courseWorksCountYearArray[j].Year
-            ) {
-              courseWorksCountYearArray[j][dayArray[_day]] += time;
-              break;
-            }
-          } else if (this.lType1 == "grade") {
-            if (
-              _month == courseWorksCountYearArray[j].Month &&
-              _year == courseWorksCountYearArray[j].Year &&
-              this.hasCommonValue(this.gradeList, _type)
-            ) {
-              courseWorksCountYearArray[j][dayArray[_day]] += time;
-              break;
-            }
-          } else if (this.lType1 == "subject") {
-            if (
-              _month == courseWorksCountYearArray[j].Month &&
-              _year == courseWorksCountYearArray[j].Year &&
-              this.hasCommonValue(this.subjectList2, _type)
-            ) {
-              courseWorksCountYearArray[j][dayArray[_day]] += time;
-              break;
-            }
-          } else {
-            if (
-              _month == courseWorksCountYearArray[j].Month &&
-              _year == courseWorksCountYearArray[j].Year &&
-              this.hasCommonValue(this.thList, _type)
-            ) {
-              courseWorksCountYearArray[j][dayArray[_day]] += time;
-              break;
-            }
+        if (this.lType1 == "all") {
+          timeArray.forEach((item) => {
+            courseWorksCountYearArray[item] =
+              courseWorksCountYearArray[item] + 1 || 1;
+          });
+        } else if (this.lType1 == "grade") {
+          if (this.hasCommonValue(this.gradeList, _type)) {
+            timeArray.forEach((item) => {
+              courseWorksCountYearArray[item] =
+                courseWorksCountYearArray[item] + 1 || 1;
+            });
+          }
+        } else if (this.lType1 == "subject") {
+          if (this.hasCommonValue(this.subjectList2, _type)) {
+            timeArray.forEach((item) => {
+              courseWorksCountYearArray[item] =
+                courseWorksCountYearArray[item] + 1 || 1;
+            });
+          }
+        } else {
+          if (this.hasCommonValue(this.thList, _type)) {
+            timeArray.forEach((item) => {
+              courseWorksCountYearArray[item] =
+                courseWorksCountYearArray[item] + 1 || 1;
+            });
           }
         }
       }
 
+      // for (var i = Month; i > Month - 12; i--) {
+      //   if (i <= 0) {
+      //     courseWorksCountYearArray.push({
+      //       Year: Year - 1,
+      //       Month: 12 + i,
+      //       mon: 0,
+      //       tue: 0,
+      //       wed: 0,
+      //       thur: 0,
+      //       fri: 0,
+      //       sat: 0,
+      //       sun: 0,
+      //     });
+      //   } else {
+      //     courseWorksCountYearArray.push({
+      //       Month: i,
+      //       Year: Year,
+      //       mon: 0,
+      //       tue: 0,
+      //       wed: 0,
+      //       thur: 0,
+      //       fri: 0,
+      //       sat: 0,
+      //       sun: 0,
+      //     });
+      //   }
+      // }
+      // courseWorksCountYearArray = courseWorksCountYearArray.reverse();
+
+      // for (var i = 0; i < this.courseTList.length; i++) {
+      //   let _date = new Date(this.courseTList[i].create_at);
+      //   let _type = this.courseTList[i].type
+      //     ? this.courseTList[i].type.split(",")
+      //     : [];
+      //   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 < courseWorksCountYearArray.length; j++) {
+      //     let time = (this.courseTList[i].text / 3600).toFixed(0);
+      //     time = parseInt(time) ? parseInt(time) : 0;
+      //     if (this.lType1 == "all") {
+      //       if (
+      //         _month == courseWorksCountYearArray[j].Month &&
+      //         _year == courseWorksCountYearArray[j].Year
+      //       ) {
+      //         courseWorksCountYearArray[j][dayArray[_day]] += time;
+      //         break;
+      //       }
+      //     } else if (this.lType1 == "grade") {
+      //       if (
+      //         _month == courseWorksCountYearArray[j].Month &&
+      //         _year == courseWorksCountYearArray[j].Year &&
+      //         this.hasCommonValue(this.gradeList, _type)
+      //       ) {
+      //         courseWorksCountYearArray[j][dayArray[_day]] += time;
+      //         break;
+      //       }
+      //     } else if (this.lType1 == "subject") {
+      //       if (
+      //         _month == courseWorksCountYearArray[j].Month &&
+      //         _year == courseWorksCountYearArray[j].Year &&
+      //         this.hasCommonValue(this.subjectList2, _type)
+      //       ) {
+      //         courseWorksCountYearArray[j][dayArray[_day]] += time;
+      //         break;
+      //       }
+      //     } else {
+      //       if (
+      //         _month == courseWorksCountYearArray[j].Month &&
+      //         _year == courseWorksCountYearArray[j].Year &&
+      //         this.hasCommonValue(this.thList, _type)
+      //       ) {
+      //         courseWorksCountYearArray[j][dayArray[_day]] += time;
+      //         break;
+      //       }
+      //     }
+      //   }
+      // }
+
       this.courseWorksCountYearArray2 = courseWorksCountYearArray;
 
       this.$forceUpdate();
@@ -759,84 +799,120 @@ export default {
       const date = new Date();
       var Month = date.getMonth() + 1;
       var Year = date.getFullYear();
-      let courseWorksCountYearArray = [];
-      for (var i = Month; i > Month - 12; i--) {
-        if (i <= 0) {
-          courseWorksCountYearArray.push({
-            Year: Year - 1,
-            Month: 12 + i,
-            mon: 0,
-            tue: 0,
-            wed: 0,
-            thur: 0,
-            fri: 0,
-            sat: 0,
-            sun: 0,
-          });
-        } else {
-          courseWorksCountYearArray.push({
-            Month: i,
-            Year: Year,
-            mon: 0,
-            tue: 0,
-            wed: 0,
-            thur: 0,
-            fri: 0,
-            sat: 0,
-            sun: 0,
-          });
-        }
+      let courseWorksCountYearArray = {};
+      let timeArray = [];
+      for (var i = 0; i < this.allCourseWorks.length; i++) {
+        timeArray.push(this.allCourseWorks[i].time);
       }
-      courseWorksCountYearArray = courseWorksCountYearArray.reverse();
-
       for (var i = 0; i < this.allCourseWorks.length; i++) {
-        let _date = new Date(this.allCourseWorks[i].create_at);
         let _type = this.allCourseWorks[i].type
           ? this.allCourseWorks[i].typeid.split(",")
           : [];
-        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 < courseWorksCountYearArray.length; j++) {
-          if (this.lType1 == "all") {
-            if (
-              _month == courseWorksCountYearArray[j].Month &&
-              _year == courseWorksCountYearArray[j].Year
-            ) {
-              courseWorksCountYearArray[j][dayArray[_day]]++;
-              break;
-            }
-          } else if (this.lType1 == "grade") {
-            if (
-              _month == courseWorksCountYearArray[j].Month &&
-              _year == courseWorksCountYearArray[j].Year &&
-              this.hasCommonValue(this.gradeList, _type)
-            ) {
-              courseWorksCountYearArray[j][dayArray[_day]]++;
-              break;
-            }
-          } else if (this.lType1 == "subject") {
-            if (
-              _month == courseWorksCountYearArray[j].Month &&
-              _year == courseWorksCountYearArray[j].Year &&
-              this.hasCommonValue(this.subjectList2, _type)
-            ) {
-              courseWorksCountYearArray[j][dayArray[_day]]++;
-              break;
-            }
-          } else {
-            if (
-              _month == courseWorksCountYearArray[j].Month &&
-              _year == courseWorksCountYearArray[j].Year &&
-              this.hasCommonValue(this.thList, _type)
-            ) {
-              courseWorksCountYearArray[j][dayArray[_day]]++;
-              break;
-            }
+        if (this.lType1 == "all") {
+          timeArray.forEach((item) => {
+            courseWorksCountYearArray[item] =
+              courseWorksCountYearArray[item] + 1 || 1;
+          });
+        } else if (this.lType1 == "grade") {
+          if (this.hasCommonValue(this.gradeList, _type)) {
+            timeArray.forEach((item) => {
+              courseWorksCountYearArray[item] =
+                courseWorksCountYearArray[item] + 1 || 1;
+            });
+          }
+        } else if (this.lType1 == "subject") {
+          if (this.hasCommonValue(this.subjectList2, _type)) {
+            timeArray.forEach((item) => {
+              courseWorksCountYearArray[item] =
+                courseWorksCountYearArray[item] + 1 || 1;
+            });
+          }
+        } else {
+          if (this.hasCommonValue(this.thList, _type)) {
+            timeArray.forEach((item) => {
+              courseWorksCountYearArray[item] =
+                courseWorksCountYearArray[item] + 1 || 1;
+            });
           }
         }
       }
+      // for (var i = Month; i > Month - 12; i--) {
+      //   if (i <= 0) {
+      //     courseWorksCountYearArray.push({
+      //       Year: Year - 1,
+      //       Month: 12 + i,
+      //       mon: 0,
+      //       tue: 0,
+      //       wed: 0,
+      //       thur: 0,
+      //       fri: 0,
+      //       sat: 0,
+      //       sun: 0,
+      //     });
+      //   } else {
+      //     courseWorksCountYearArray.push({
+      //       Month: i,
+      //       Year: Year,
+      //       mon: 0,
+      //       tue: 0,
+      //       wed: 0,
+      //       thur: 0,
+      //       fri: 0,
+      //       sat: 0,
+      //       sun: 0,
+      //     });
+      //   }
+      // }
+      // courseWorksCountYearArray = courseWorksCountYearArray.reverse();
+
+      // for (var i = 0; i < this.allCourseWorks.length; i++) {
+      //   let _date = new Date(this.allCourseWorks[i].create_at);
+      //   let _type = this.allCourseWorks[i].type
+      //     ? this.allCourseWorks[i].typeid.split(",")
+      //     : [];
+      //   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 < courseWorksCountYearArray.length; j++) {
+      //     if (this.lType1 == "all") {
+      //       if (
+      //         _month == courseWorksCountYearArray[j].Month &&
+      //         _year == courseWorksCountYearArray[j].Year
+      //       ) {
+      //         courseWorksCountYearArray[j][dayArray[_day]]++;
+      //         break;
+      //       }
+      //     } else if (this.lType1 == "grade") {
+      //       if (
+      //         _month == courseWorksCountYearArray[j].Month &&
+      //         _year == courseWorksCountYearArray[j].Year &&
+      //         this.hasCommonValue(this.gradeList, _type)
+      //       ) {
+      //         courseWorksCountYearArray[j][dayArray[_day]]++;
+      //         break;
+      //       }
+      //     } else if (this.lType1 == "subject") {
+      //       if (
+      //         _month == courseWorksCountYearArray[j].Month &&
+      //         _year == courseWorksCountYearArray[j].Year &&
+      //         this.hasCommonValue(this.subjectList2, _type)
+      //       ) {
+      //         courseWorksCountYearArray[j][dayArray[_day]]++;
+      //         break;
+      //       }
+      //     } else {
+      //       if (
+      //         _month == courseWorksCountYearArray[j].Month &&
+      //         _year == courseWorksCountYearArray[j].Year &&
+      //         this.hasCommonValue(this.thList, _type)
+      //       ) {
+      //         courseWorksCountYearArray[j][dayArray[_day]]++;
+      //         break;
+      //       }
+      //     }
+      //   }
+      // }
 
       var worksCount = 0,
         haveWorksCourse = [];
@@ -1563,7 +1639,7 @@ export default {
           for (var z = 0; z < _course.length; z++) {
             let _date = new Date(weekArray.lastWeek[0]);
             if (
-              new Date(_course[z].create_at) > _date 
+              new Date(_course[z].create_at) > _date
               // && _course[z].pid == "34628934-d02f-11ec-8c78-005056b86db5"
             ) {
               weekCourse.push(_course[z]);

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

@@ -1,120 +1,99 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
-    </div>
+    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+    <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    worksYearArray: {
-      type: Array,
-    },
-  },
+  props: ["Josn"],
   data() {
     return {
+      mindV: true,
       chartObj: null,
-      ooption: {
-        xdata: [],
-        sdata: [],
-      },
+      timer: null,
+      range: "",
+      ooption: [],
       option: {
         // title: {
-        //   text: '登录频次',
-        //   textStyle: {
-        //     fontSize: 12,
-        //   },
-        //   padding: [10, 0, 0, 10]
+        //   top: 30,
+        //   left: 'center',
+        //   text: '作业提交热力图'
         // },
         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;
-              }
-            }
+          formatter: function (p) {
+            const format = p.data[0];
+            return format + ' ' + p.data[1]+'份';
           }
         },
-        yAxis: {
-          type: 'category',
-          data: [
-            '星期天', '星期一', '星期二', '星期三',
-            '星期四', '星期五', '星期六',
-          ],
-          splitArea: {
-            show: true
-          },
-        },
         visualMap: {
           min: 0,
-          max: 10,
-          calculable: true,
-          orient: 'horizontal',
+          max: 0,
+          type: 'continuous',
           inRange: {
-            color: ['#fff', '#477cd7']
+            color: ['#65b9fc', '#477cd7']
           },
-          right: '10',
-          top: '0%'
+          precision: 0,
+          calculable: true,
         },
-        series: [
-          {
-            name: '',
-            type: 'heatmap',
-            data: [],
-            label: {
-              show: true
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
+        calendar: {
+          top: 40,
+          left: 100,
+          right: 30,
+          cellSize: ['auto', 15],
+          range: '',
+          itemStyle: {
+            borderWidth: 0.5
+          },
+          yearLabel: { show: false },
+          dayLabel: {
+            show: false
           }
-        ]
+        },
+        series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: ''
+        }
       },
     };
   },
   methods: {
-    setChart(option) {
+    gettime() {
+      var time = new Date();
+      // time=time.setDate(time.getDate()+1);
+      // time = new Date(time);
+      // time.setTime(time.getTime());
+      var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
+        + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
+      var monthNum = 3; //要减的月数(6)自己定义
+      var dateArr = s2.split('-'); //s2当前时间
+      var year = dateArr[0]; //获取当前日期的年份
+      var month = dateArr[1]; //获取当前日期的月份
+      var day = dateArr[2]; //获取当前日期的日
+      var days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中月的天数
+      var year2 = year;
+      var month2 = parseInt(month) - monthNum;
+      if (month2 <= 0) {
+        // year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
+        year2 = parseInt(year2) - 1;
+        month2 = 12 - (Math.abs(month2) % 12);
+      }
+      var day2 = day;
+      var days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2 < 10 ? '0' + days2 : days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      var t2 = year2 + '-' + month2 + '-' + day2;
+      return [t2, s2]
+    },
+    setChart(option, year) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -125,85 +104,96 @@ export default {
           //劳动课程
           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.option.series.data = option;
+        this.option.calendar.range = year;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
-    setJson(array) {
-      this.ooption = {
-        xdata: [],
-        sdata: [],
-        max: 0
+    getVirtualData(year) {
+      const date = +this.$echarts.time.parse(year[0]);
+      const end = +this.$echarts.time.parse(year[1]);
+      const dayTime = 3600 * 24 * 1000;
+      const data = [];
+      for (let time = date; time <= end; time += dayTime) {
+        let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
+        if (this.Josn[a]) {
+          data.push([a, this.Josn[a]]);
+        } else {
+          data.push([a, null]);
+        }
       }
-      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];
+      return data;
+    },
+    setData() {
+      let year = Object.keys(this.Josn)[0].split('-')[0];
+      var t = this.gettime();
+      this.ooption = this.getVirtualData(t)
       if (!this.chartObj) {
-        this.setChart(this.ooption);
+        this.setChart(this.ooption, t);
       } else {
-        this.option.xAxis.data = this.ooption.xdata;
-        this.option.series[0].data = this.ooption.sdata;
-        this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
-        this.chartObj.setOption(this.option);
+        this.option.series.data = this.ooption;
+        this.option.calendar.range = t;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
+        this.chartObj.setOption(this.option, t);
       }
-    }
+    },
   },
   watch: {
-    worksYearArray: {
-      immediate: true,
+    Josn: {
+      handler: function (newVal, oldVal) { 
+        this.setData();
+       },
       deep: true,
-      handler(newValue, oldValue) {
-        this.setJson(newValue)
-        this.$forceUpdate();
-      },
     },
   },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
   mounted() {
-    this.setJson(this.worksYearArray)
-
+    this.setData();
+    var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
         _this.chartObj.resize();
       }
     });
   },
+  beforeDestroy() {
+    // clearInterval(this.timer);
+    // this.timer = null
+  },
 };
 </script>
 
 <style scoped>
 .data_body {
-  height: 100%;
+  /* display: flex; */
+  /* flex-direction: column; */
+  width: 100%;
+  height: 170px;
+  /* height: 500px; */
+  /* margin: 15px 5px 0 0; */
+  background: #fff;
+  overflow: hidden;
+  flex-shrink: 0;
   position: relative;
-  border-radius: 5px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 0;
-  width: 95%;
+}
+
+.noMind {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
   background: #fff;
 }
 </style>

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

@@ -1,5 +1,6 @@
 <template>
-  <div class="body1" v-loading="isLoading">
+  <div class="body1">
+    <loading :isLoading="isLoading"></loading>
     <!-- 课程数据 -->
     <div class="left">
       <div class="top">
@@ -97,7 +98,7 @@
           </div>
         </div>
         <div class="dataBox" style="height: calc(100% - 110px);">
-          <ToolUse style="height: calc(100%)" v-if="skType == 1" :worksYearArray="worksYearArray"></ToolUse>
+          <ToolUse style="height: calc(100%)" v-if="skType == 1" :Josn="worksYearArray"></ToolUse>
           <Bar style="height: calc(100%)" v-if="skType == 0"></Bar>
           <!-- <div class="otherCss">
             <div v-if="!oType">切换为柱状图</div>
@@ -278,6 +279,7 @@ import barFinish from "./chartList/bar/finish.vue";
 import barCCourse from "./chartList/bar/cCourse.vue";
 import barTeacherStudent from "./chartList/bar/teacherStudent.vue";
 import barTime from "./chartList/bar/time.vue";
+import loading from "../../comploadingonents/loading.vue";
 export default {
   components: {
     TeaFre,
@@ -295,6 +297,7 @@ export default {
     barCCourse,
     barTeacherStudent,
     barTime,
+    loading
   },
   props: {
     oid: {
@@ -340,7 +343,8 @@ export default {
       subjectCourseList:[],
       courseNumberArray:[],
       pCourseList:[],
-      courseArray: []
+      courseArray: [],
+      worksYearArray: {},
     };
   },
   mounted() {
@@ -462,49 +466,56 @@ export default {
           this.worksCount = res.data[6][0].count; //作业数量
 
           let worksArray = res.data[7];//一年内提交的作业
-          let worksYearArray = []
-          for (var i = Month; i > Month - 12; i--) {
-            if (i <= 0) {
-              worksYearArray.push({
-                Year: Year - 1,
-                Month: 12 + i,
-                mon: 0,
-                tue: 0,
-                wed: 0,
-                thur: 0,
-                fri: 0,
-                sat: 0,
-                sun: 0,
-              })
-            } else {
-              worksYearArray.push({
-                Month: i,
-                Year: Year,
-                mon: 0,
-                tue: 0,
-                wed: 0,
-                thur: 0,
-                fri: 0,
-                sat: 0,
-                sun: 0,
-              })
-            }
+          let worksYearArray = {}
+          let timeArray = [];
+          for(var i = 0;i<worksArray.length;i++){
+            timeArray.push(worksArray[i].time);
           }
-          worksYearArray = worksYearArray.reverse()
-          for (var i = 0; i < worksArray.length; i++) {
-            let _date = new Date(worksArray[i].create_at)
-            var _month = _date.getMonth() + 1
-            var _year = _date.getFullYear()
-            var _day = _date.getDay()
-            let dayArray = ['sun', 'mon', 'tue', 'wed', 'thur', 'fri', 'sat']
-            for (var j = 0; j < worksYearArray.length; j++) {
-              if (_month == worksYearArray[j].Month && _year == worksYearArray[j].Year) {
-                worksYearArray[j][dayArray[_day]]++
-                break;
-              }
-            }
-          }
-          console.log(worksYearArray);
+          timeArray.forEach((item) => {
+            worksYearArray[item] = worksYearArray[item] + 1 || 1;
+          });
+          // for (var i = Month; i > Month - 12; i--) {
+          //   if (i <= 0) {
+          //     worksYearArray.push({
+          //       Year: Year - 1,
+          //       Month: 12 + i,
+          //       mon: 0,
+          //       tue: 0,
+          //       wed: 0,
+          //       thur: 0,
+          //       fri: 0,
+          //       sat: 0,
+          //       sun: 0,
+          //     })
+          //   } else {
+          //     worksYearArray.push({
+          //       Month: i,
+          //       Year: Year,
+          //       mon: 0,
+          //       tue: 0,
+          //       wed: 0,
+          //       thur: 0,
+          //       fri: 0,
+          //       sat: 0,
+          //       sun: 0,
+          //     })
+          //   }
+          // }
+          // worksYearArray = worksYearArray.reverse()
+          // for (var i = 0; i < worksArray.length; i++) {
+          //   let _date = new Date(worksArray[i].create_at)
+          //   var _month = _date.getMonth() + 1
+          //   var _year = _date.getFullYear()
+          //   var _day = _date.getDay()
+          //   let dayArray = ['sun', 'mon', 'tue', 'wed', 'thur', 'fri', 'sat']
+          //   for (var j = 0; j < worksYearArray.length; j++) {
+          //     if (_month == worksYearArray[j].Month && _year == worksYearArray[j].Year) {
+          //       worksYearArray[j][dayArray[_day]]++
+          //       break;
+          //     }
+          //   }
+          // }
+          // console.log(worksYearArray);
           this.worksYearArray = worksYearArray
 
 

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

@@ -1,123 +1,99 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
-    </div>
+    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+    <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    yearArray: {
-      type: Array,
-    },
-  },
+  props: ["Josn"],
   data() {
     return {
+      mindV: true,
       chartObj: null,
-      ooption: {
-        xdata: [],
-        sdata: [],
-      },
+      timer: null,
+      range: "",
+      ooption: [],
       option: {
         // title: {
-        //   text: '登录频次',
-        //   textStyle: {
-        //     fontSize: 12,
-        //   },
-        //   padding: [10, 0, 0, 10]
+        //   top: 30,
+        //   left: 'center',
+        //   text: '作业提交热力图'
         // },
         tooltip: {
-          position: 'top',
-          formatter: function(params){
-            return params.name + '  ' + params.data[2] + '(小时)';
+          formatter: function (p) {
+            const format = p.data[0];
+            return format + ' ' + p.data[1]+'份';
           }
         },
-        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',
+          max: 0,
+          type: 'continuous',
           inRange: {
-            color: ['#fff', '#477cd7']
+            color: ['#65b9fc', '#477cd7']
           },
-          right: '10',
-          top: '0%'
+          precision: 0,
+          calculable: true,
         },
-        series: [
-          {
-            name: '',
-            type: 'heatmap',
-            data: [],
-            label: {
-              show: true
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
+        calendar: {
+          top: 40,
+          left: 100,
+          right: 30,
+          cellSize: ['auto', 15],
+          range: '',
+          itemStyle: {
+            borderWidth: 0.5
+          },
+          yearLabel: { show: false },
+          dayLabel: {
+            show: false
           }
-        ]
+        },
+        series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: ''
+        }
       },
     };
   },
   methods: {
-    setChart(option) {
+    gettime() {
+      var time = new Date();
+      // time=time.setDate(time.getDate()+1);
+      // time = new Date(time);
+      // time.setTime(time.getTime());
+      var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
+        + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
+      var monthNum = 3; //要减的月数(6)自己定义
+      var dateArr = s2.split('-'); //s2当前时间
+      var year = dateArr[0]; //获取当前日期的年份
+      var month = dateArr[1]; //获取当前日期的月份
+      var day = dateArr[2]; //获取当前日期的日
+      var days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中月的天数
+      var year2 = year;
+      var month2 = parseInt(month) - monthNum;
+      if (month2 <= 0) {
+        // year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
+        year2 = parseInt(year2) - 1;
+        month2 = 12 - (Math.abs(month2) % 12);
+      }
+      var day2 = day;
+      var days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2 < 10 ? '0' + days2 : days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      var t2 = year2 + '-' + month2 + '-' + day2;
+      return [t2, s2]
+    },
+    setChart(option, year) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -128,85 +104,96 @@ export default {
           //劳动课程
           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.option.series.data = option;
+        this.option.calendar.range = year;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
-    setJson(array) {
-      this.ooption = {
-        xdata: [],
-        sdata: [],
-        max: 0
+    getVirtualData(year) {
+      const date = +this.$echarts.time.parse(year[0]);
+      const end = +this.$echarts.time.parse(year[1]);
+      const dayTime = 3600 * 24 * 1000;
+      const data = [];
+      for (let time = date; time <= end; time += dayTime) {
+        let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
+        if (this.Josn[a]) {
+          data.push([a, this.Josn[a]]);
+        } else {
+          data.push([a, null]);
+        }
       }
-      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];
+      return data;
+    },
+    setData() {
+      let year = Object.keys(this.Josn)[0].split('-')[0];
+      var t = this.gettime();
+      this.ooption = this.getVirtualData(t)
       if (!this.chartObj) {
-        this.setChart(this.ooption);
+        this.setChart(this.ooption, t);
       } else {
-        this.option.xAxis.data = this.ooption.xdata;
-        this.option.series[0].data = this.ooption.sdata;
-        this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
-        this.chartObj.setOption(this.option);
+        this.option.series.data = this.ooption;
+        this.option.calendar.range = t;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
+        this.chartObj.setOption(this.option, t);
       }
-    }
+    },
   },
   watch: {
-    yearArray: {
-      immediate: true,
+    Josn: {
+      handler: function (newVal, oldVal) { 
+        this.setData();
+       },
       deep: true,
-      handler(newValue, oldValue) {
-        this.setJson(newValue)
-        this.$forceUpdate();
-      },
     },
   },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
   mounted() {
-    this.setJson(this.yearArray)
-
+    this.setData();
+    var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
         _this.chartObj.resize();
       }
     });
   },
+  beforeDestroy() {
+    // clearInterval(this.timer);
+    // this.timer = null
+  },
 };
 </script>
 
 <style scoped>
 .data_body {
-  height: 100%;
+  /* display: flex; */
+  /* flex-direction: column; */
+  width: 100%;
+  height: 170px;
+  /* height: 500px; */
+  /* margin: 15px 5px 0 0; */
+  background: #fff;
+  overflow: hidden;
+  flex-shrink: 0;
   position: relative;
-  border-radius: 5px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 0;
-  width: 95%;
+}
+
+.noMind {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
   background: #fff;
 }
 </style>

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

@@ -1,120 +1,99 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
-    </div>
+    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+    <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    yearArray: {
-      type: Array,
-    },
-  },
+  props: ["Josn"],
   data() {
     return {
+      mindV: true,
       chartObj: null,
-      ooption: {
-        xdata: [],
-        sdata: [],
-      },
+      timer: null,
+      range: "",
+      ooption: [],
       option: {
         // title: {
-        //   text: '登录频次',
-        //   textStyle: {
-        //     fontSize: 12,
-        //   },
-        //   padding: [10, 0, 0, 10]
+        //   top: 30,
+        //   left: 'center',
+        //   text: '作业提交热力图'
         // },
         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;
-              }
-            }
+          formatter: function (p) {
+            const format = p.data[0];
+            return format + ' ' + p.data[1]+'份';
           }
         },
-        yAxis: {
-          type: 'category',
-          data: [
-            '星期天', '星期一', '星期二', '星期三',
-            '星期四', '星期五', '星期六',
-          ],
-          splitArea: {
-            show: true
-          },
-        },
         visualMap: {
           min: 0,
-          max: 10,
-          calculable: true,
-          orient: 'horizontal',
+          max: 0,
+          type: 'continuous',
           inRange: {
-            color: ['#fff', '#477cd7']
+            color: ['#65b9fc', '#477cd7']
           },
-          right: '10',
-          top: '0%'
+          precision: 0,
+          calculable: true,
         },
-        series: [
-          {
-            name: '',
-            type: 'heatmap',
-            data: [],
-            label: {
-              show: true
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
+        calendar: {
+          top: 40,
+          left: 100,
+          right: 30,
+          cellSize: ['auto', 15],
+          range: '',
+          itemStyle: {
+            borderWidth: 0.5
+          },
+          yearLabel: { show: false },
+          dayLabel: {
+            show: false
           }
-        ]
+        },
+        series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: ''
+        }
       },
     };
   },
   methods: {
-    setChart(option) {
+    gettime() {
+      var time = new Date();
+      // time=time.setDate(time.getDate()+1);
+      // time = new Date(time);
+      // time.setTime(time.getTime());
+      var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
+        + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
+      var monthNum = 3; //要减的月数(6)自己定义
+      var dateArr = s2.split('-'); //s2当前时间
+      var year = dateArr[0]; //获取当前日期的年份
+      var month = dateArr[1]; //获取当前日期的月份
+      var day = dateArr[2]; //获取当前日期的日
+      var days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中月的天数
+      var year2 = year;
+      var month2 = parseInt(month) - monthNum;
+      if (month2 <= 0) {
+        // year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
+        year2 = parseInt(year2) - 1;
+        month2 = 12 - (Math.abs(month2) % 12);
+      }
+      var day2 = day;
+      var days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2 < 10 ? '0' + days2 : days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      var t2 = year2 + '-' + month2 + '-' + day2;
+      return [t2, s2]
+    },
+    setChart(option, year) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -125,85 +104,96 @@ export default {
           //劳动课程
           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.option.series.data = option;
+        this.option.calendar.range = year;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
-    setJson(array) {
-      this.ooption = {
-        xdata: [],
-        sdata: [],
-        max: 0
+    getVirtualData(year) {
+      const date = +this.$echarts.time.parse(year[0]);
+      const end = +this.$echarts.time.parse(year[1]);
+      const dayTime = 3600 * 24 * 1000;
+      const data = [];
+      for (let time = date; time <= end; time += dayTime) {
+        let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
+        if (this.Josn[a]) {
+          data.push([a, this.Josn[a]]);
+        } else {
+          data.push([a, null]);
+        }
       }
-      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];
+      return data;
+    },
+    setData() {
+      let year = Object.keys(this.Josn)[0].split('-')[0];
+      var t = this.gettime();
+      this.ooption = this.getVirtualData(t)
       if (!this.chartObj) {
-        this.setChart(this.ooption);
+        this.setChart(this.ooption, t);
       } else {
-        this.option.xAxis.data = this.ooption.xdata;
-        this.option.series[0].data = this.ooption.sdata;
-        this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
-        this.chartObj.setOption(this.option);
+        this.option.series.data = this.ooption;
+        this.option.calendar.range = t;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
+        this.chartObj.setOption(this.option, t);
       }
-    }
+    },
   },
   watch: {
-    yearArray: {
-      immediate: true,
+    Josn: {
+      handler: function (newVal, oldVal) { 
+        this.setData();
+       },
       deep: true,
-      handler(newValue, oldValue) {
-        this.setJson(newValue)
-        this.$forceUpdate();
-      },
     },
   },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
   mounted() {
-    this.setJson(this.yearArray)
-
+    this.setData();
+    var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
         _this.chartObj.resize();
       }
     });
   },
+  beforeDestroy() {
+    // clearInterval(this.timer);
+    // this.timer = null
+  },
 };
 </script>
 
 <style scoped>
 .data_body {
-  height: 100%;
+  /* display: flex; */
+  /* flex-direction: column; */
+  width: 100%;
+  height: 170px;
+  /* height: 500px; */
+  /* margin: 15px 5px 0 0; */
+  background: #fff;
+  overflow: hidden;
+  flex-shrink: 0;
   position: relative;
-  border-radius: 5px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 0;
-  width: 95%;
+}
+
+.noMind {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
   background: #fff;
 }
 </style>

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

@@ -1,5 +1,6 @@
 <template>
-  <div class="body1" v-loading="isLoading">
+  <div class="body1">
+    <loading :isLoading="isLoading"></loading>
     <!-- 学生数据 -->
     <div class="left">
       <div class="top">
@@ -118,7 +119,7 @@
           <toolUser
             style="height: calc(100% - 30px)"
             v-if="skType == 1 && !oType"
-            :yearArray="loginCountYearArray"
+            :Josn="loginCountYearArray"
           ></toolUser>
           <bar2
             style="height: calc(100% - 30px)"
@@ -135,7 +136,7 @@
           <toolUser2
             style="height: calc(100% - 30px)"
             v-if="skType == 0 && oType2"
-            :yearArray="loginCountYearArray2"
+            :Josn="loginCountYearArray2"
           ></toolUser2>
 
           <div class="otherCss" v-if="skType == 1">
@@ -554,6 +555,7 @@ import bar from "./bar";
 import bar2 from "./bar2";
 import courseNum from "./courseNum";
 import cateRank from "./cateRank";
+import loading from "../../components/loading.vue";
 export default {
   props: {
     oid: {
@@ -577,7 +579,8 @@ export default {
     bar,
     bar2,
     courseNum,
-    cateRank
+    cateRank,
+    loading,
   },
   data() {
     return {
@@ -602,8 +605,8 @@ export default {
       studentCount: 0,
       loginCountMonthArray: [],
       countLogin: 0,
-      loginCountYearArray: [],
-      loginCountYearArray2: [],
+      loginCountYearArray: {},
+      loginCountYearArray2: {},
       loginTime: 0,
       EloginTimeArray: [],
       EloginTimeArray2: [],
@@ -703,52 +706,59 @@ export default {
           this.countLogin = res.data[5][0].count; //登录频次
 
           let loginCountYear = res.data[6]; //一年的登录频次
-          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,
-              });
-            }
+          let loginCountYearArray = {};
+          let timeArray = [];
+          for(var i = 0;i<loginCountYear.length;i++){
+            timeArray.push(loginCountYear[i].time);
           }
-          loginCountYearArray = loginCountYearArray.reverse();
-          for (var i = 0; i < loginCountYear.length; i++) {
-            let _date = new Date(loginCountYear[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]]+=loginCountYear[i].usernum;
-                break;
-              }
-            }
-          }
-          console.log(loginCountYearArray);
+          timeArray.forEach((item) => {
+            loginCountYearArray[item] = loginCountYearArray[item] + 1 || 1;
+          });
+          // for (var i = Month; i > Month - 12; i--) {
+          //   if (i <= 0) {
+          //     loginCountYearArray.push({
+          //       Year: Year - 1,
+          //       Month: 12 + i,
+          //       mon: 0,
+          //       tue: 0,
+          //       wed: 0,
+          //       thur: 0,
+          //       fri: 0,
+          //       sat: 0,
+          //       sun: 0,
+          //     });
+          //   } else {
+          //     loginCountYearArray.push({
+          //       Month: i,
+          //       Year: Year,
+          //       mon: 0,
+          //       tue: 0,
+          //       wed: 0,
+          //       thur: 0,
+          //       fri: 0,
+          //       sat: 0,
+          //       sun: 0,
+          //     });
+          //   }
+          // }
+          // loginCountYearArray = loginCountYearArray.reverse();
+          // for (var i = 0; i < loginCountYear.length; i++) {
+          //   let _date = new Date(loginCountYear[i].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]]+=loginCountYear[i].usernum;
+          //       break;
+          //     }
+          //   }
+          // }
+          // console.log(loginCountYearArray);
           this.loginCountYearArray = loginCountYearArray;
 
           this.loginTime = parseInt(res.data[7][0].time) / 60 / 60;
@@ -898,54 +908,61 @@ export default {
 
 
           let loginCountYear2 = res.data[22]; //一年的在线时长
-          let loginCountYearArray2 = [];
-          for (var i = Month; i > Month - 12; i--) {
-            if (i <= 0) {
-              loginCountYearArray2.push({
-                Year: Year - 1,
-                Month: 12 + i,
-                mon: 0,
-                tue: 0,
-                wed: 0,
-                thur: 0,
-                fri: 0,
-                sat: 0,
-                sun: 0,
-              });
-            } else {
-              loginCountYearArray2.push({
-                Month: i,
-                Year: Year,
-                mon: 0,
-                tue: 0,
-                wed: 0,
-                thur: 0,
-                fri: 0,
-                sat: 0,
-                sun: 0,
-              });
-            }
+          let loginCountYearArray2 = {};
+          let timeArray1 = [];
+          for(var i = 0;i<loginCountYear2.length;i++){
+            timeArray1.push(loginCountYear2[i].vtime);
           }
-          loginCountYearArray2 = loginCountYearArray2.reverse();
-          for (var i = 0; i < loginCountYear2.length; i++) {
-            let _date = new Date(loginCountYear2[i].create_at);
-            var _month = _date.getMonth() + 1;
-            var _year = _date.getFullYear();
-            var _day = _date.getDay();
-            let dayArray = ["sun", "mon", "tue", "wed", "thur", "fri", "sat"];
-            for (var j = 0; j < loginCountYearArray2.length; j++) {
-              let time = (loginCountYear2[i].time / 3600).toFixed(0)
-              time = parseInt(time) ? parseInt(time) : 0
-              if (
-                _month == loginCountYearArray2[j].Month &&
-                _year == loginCountYearArray2[j].Year
-              ) {
-                loginCountYearArray2[j][dayArray[_day]]+=time;
-                break;
-              }
-            }
-          }
-          console.log(loginCountYearArray2);
+          timeArray1.forEach((item) => {
+            loginCountYearArray2[item] = loginCountYearArray2[item] + 1 || 1;
+          });
+          // for (var i = Month; i > Month - 12; i--) {
+          //   if (i <= 0) {
+          //     loginCountYearArray2.push({
+          //       Year: Year - 1,
+          //       Month: 12 + i,
+          //       mon: 0,
+          //       tue: 0,
+          //       wed: 0,
+          //       thur: 0,
+          //       fri: 0,
+          //       sat: 0,
+          //       sun: 0,
+          //     });
+          //   } else {
+          //     loginCountYearArray2.push({
+          //       Month: i,
+          //       Year: Year,
+          //       mon: 0,
+          //       tue: 0,
+          //       wed: 0,
+          //       thur: 0,
+          //       fri: 0,
+          //       sat: 0,
+          //       sun: 0,
+          //     });
+          //   }
+          // }
+          // loginCountYearArray2 = loginCountYearArray2.reverse();
+          // for (var i = 0; i < loginCountYear2.length; i++) {
+          //   let _date = new Date(loginCountYear2[i].create_at);
+          //   var _month = _date.getMonth() + 1;
+          //   var _year = _date.getFullYear();
+          //   var _day = _date.getDay();
+          //   let dayArray = ["sun", "mon", "tue", "wed", "thur", "fri", "sat"];
+          //   for (var j = 0; j < loginCountYearArray2.length; j++) {
+          //     let time = (loginCountYear2[i].time / 3600).toFixed(0)
+          //     time = parseInt(time) ? parseInt(time) : 0
+          //     if (
+          //       _month == loginCountYearArray2[j].Month &&
+          //       _year == loginCountYearArray2[j].Year
+          //     ) {
+          //       loginCountYearArray2[j][dayArray[_day]]+=time;
+          //       break;
+          //     }
+          //   }
+          // }
+          // console.log(loginCountYearArray2);
           this.loginCountYearArray2 = loginCountYearArray2;
 
           let _loginTimeArray2 = res.data[23]; //一年的在线时长

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

@@ -1,120 +1,99 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
-    </div>
+    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+    <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    yearArray: {
-      type: Array,
-    },
-  },
+  props: ["Josn"],
   data() {
     return {
+      mindV: true,
       chartObj: null,
-      ooption: {
-        xdata: [],
-        sdata: [],
-      },
+      timer: null,
+      range: "",
+      ooption: [],
       option: {
         // title: {
-        //   text: '登录频次',
-        //   textStyle: {
-        //     fontSize: 12,
-        //   },
-        //   padding: [10, 0, 0, 10]
+        //   top: 30,
+        //   left: 'center',
+        //   text: '作业提交热力图'
         // },
         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;
-              }
-            }
+          formatter: function (p) {
+            const format = p.data[0];
+            return format + ' ' + p.data[1]+'份';
           }
         },
-        yAxis: {
-          type: 'category',
-          data: [
-            '星期天', '星期一', '星期二', '星期三',
-            '星期四', '星期五', '星期六',
-          ],
-          splitArea: {
-            show: true
-          },
-        },
         visualMap: {
           min: 0,
-          max: 10,
-          calculable: true,
-          orient: 'horizontal',
+          max: 0,
+          type: 'continuous',
           inRange: {
-            color: ['#fff', '#477cd7']
+            color: ['#65b9fc', '#477cd7']
           },
-          right: '10',
-          top: '0%'
+          precision: 0,
+          calculable: true,
         },
-        series: [
-          {
-            name: '',
-            type: 'heatmap',
-            data: [],
-            label: {
-              show: true
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
+        calendar: {
+          top: 40,
+          left: 100,
+          right: 30,
+          cellSize: ['auto', 15],
+          range: '',
+          itemStyle: {
+            borderWidth: 0.5
+          },
+          yearLabel: { show: false },
+          dayLabel: {
+            show: false
           }
-        ]
+        },
+        series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: ''
+        }
       },
     };
   },
   methods: {
-    setChart(option) {
+    gettime() {
+      var time = new Date();
+      // time=time.setDate(time.getDate()+1);
+      // time = new Date(time);
+      // time.setTime(time.getTime());
+      var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
+        + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
+      var monthNum = 3; //要减的月数(6)自己定义
+      var dateArr = s2.split('-'); //s2当前时间
+      var year = dateArr[0]; //获取当前日期的年份
+      var month = dateArr[1]; //获取当前日期的月份
+      var day = dateArr[2]; //获取当前日期的日
+      var days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中月的天数
+      var year2 = year;
+      var month2 = parseInt(month) - monthNum;
+      if (month2 <= 0) {
+        // year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
+        year2 = parseInt(year2) - 1;
+        month2 = 12 - (Math.abs(month2) % 12);
+      }
+      var day2 = day;
+      var days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2 < 10 ? '0' + days2 : days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      var t2 = year2 + '-' + month2 + '-' + day2;
+      return [t2, s2]
+    },
+    setChart(option, year) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -125,85 +104,96 @@ export default {
           //劳动课程
           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.option.series.data = option;
+        this.option.calendar.range = year;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
-    setJson(array) {
-      this.ooption = {
-        xdata: [],
-        sdata: [],
-        max: 0
+    getVirtualData(year) {
+      const date = +this.$echarts.time.parse(year[0]);
+      const end = +this.$echarts.time.parse(year[1]);
+      const dayTime = 3600 * 24 * 1000;
+      const data = [];
+      for (let time = date; time <= end; time += dayTime) {
+        let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
+        if (this.Josn[a]) {
+          data.push([a, this.Josn[a]]);
+        } else {
+          data.push([a, null]);
+        }
       }
-      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];
+      return data;
+    },
+    setData() {
+      let year = Object.keys(this.Josn)[0].split('-')[0];
+      var t = this.gettime();
+      this.ooption = this.getVirtualData(t)
       if (!this.chartObj) {
-        this.setChart(this.ooption);
+        this.setChart(this.ooption, t);
       } else {
-        this.option.xAxis.data = this.ooption.xdata;
-        this.option.series[0].data = this.ooption.sdata;
-        this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
-        this.chartObj.setOption(this.option);
+        this.option.series.data = this.ooption;
+        this.option.calendar.range = t;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
+        this.chartObj.setOption(this.option, t);
       }
-    }
+    },
   },
   watch: {
-    yearArray: {
-      immediate: true,
+    Josn: {
+      handler: function (newVal, oldVal) { 
+        this.setData();
+       },
       deep: true,
-      handler(newValue, oldValue) {
-        this.setJson(newValue)
-        this.$forceUpdate();
-      },
     },
   },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
   mounted() {
-    this.setJson(this.yearArray)
-
+    this.setData();
+    var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
         _this.chartObj.resize();
       }
     });
   },
+  beforeDestroy() {
+    // clearInterval(this.timer);
+    // this.timer = null
+  },
 };
 </script>
 
 <style scoped>
 .data_body {
-  height: 100%;
+  /* display: flex; */
+  /* flex-direction: column; */
+  width: 100%;
+  height: 170px;
+  /* height: 500px; */
+  /* margin: 15px 5px 0 0; */
+  background: #fff;
+  overflow: hidden;
+  flex-shrink: 0;
   position: relative;
-  border-radius: 5px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 0;
-  width: 95%;
+}
+
+.noMind {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
   background: #fff;
 }
 </style>

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

@@ -1,120 +1,99 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
-    </div>
+    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+    <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    yearArray: {
-      type: Array,
-    },
-  },
+  props: ["Josn"],
   data() {
     return {
+      mindV: true,
       chartObj: null,
-      ooption: {
-        xdata: [],
-        sdata: [],
-      },
+      timer: null,
+      range: "",
+      ooption: [],
       option: {
         // title: {
-        //   text: '在线时长',
-        //   textStyle: {
-        //     fontSize: 12,
-        //   },
-        //   padding: [10, 0, 0, 10]
+        //   top: 30,
+        //   left: 'center',
+        //   text: '作业提交热力图'
         // },
         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;
-              }
-            }
+          formatter: function (p) {
+            const format = p.data[0];
+            return format + ' ' + p.data[1]+'份';
           }
         },
-        yAxis: {
-          type: 'category',
-          data: [
-            '星期天', '星期一', '星期二', '星期三',
-            '星期四', '星期五', '星期六',
-          ],
-          splitArea: {
-            show: true
-          },
-        },
         visualMap: {
           min: 0,
-          max: 10,
-          calculable: true,
-          orient: 'horizontal',
+          max: 0,
+          type: 'continuous',
           inRange: {
-            color: ['#fff', '#477cd7']
+            color: ['#65b9fc', '#477cd7']
           },
-          right: '10',
-          top: '0%'
+          precision: 0,
+          calculable: true,
         },
-        series: [
-          {
-            name: '',
-            type: 'heatmap',
-            data: [],
-            label: {
-              show: true
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
+        calendar: {
+          top: 40,
+          left: 100,
+          right: 30,
+          cellSize: ['auto', 15],
+          range: '',
+          itemStyle: {
+            borderWidth: 0.5
+          },
+          yearLabel: { show: false },
+          dayLabel: {
+            show: false
           }
-        ]
+        },
+        series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: ''
+        }
       },
     };
   },
   methods: {
-    setChart(option) {
+    gettime() {
+      var time = new Date();
+      // time=time.setDate(time.getDate()+1);
+      // time = new Date(time);
+      // time.setTime(time.getTime());
+      var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
+        + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
+      var monthNum = 3; //要减的月数(6)自己定义
+      var dateArr = s2.split('-'); //s2当前时间
+      var year = dateArr[0]; //获取当前日期的年份
+      var month = dateArr[1]; //获取当前日期的月份
+      var day = dateArr[2]; //获取当前日期的日
+      var days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中月的天数
+      var year2 = year;
+      var month2 = parseInt(month) - monthNum;
+      if (month2 <= 0) {
+        // year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
+        year2 = parseInt(year2) - 1;
+        month2 = 12 - (Math.abs(month2) % 12);
+      }
+      var day2 = day;
+      var days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2 < 10 ? '0' + days2 : days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      var t2 = year2 + '-' + month2 + '-' + day2;
+      return [t2, s2]
+    },
+    setChart(option, year) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -125,85 +104,96 @@ export default {
           //劳动课程
           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.option.series.data = option;
+        this.option.calendar.range = year;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
-    setJson(array) {
-      this.ooption = {
-        xdata: [],
-        sdata: [],
-        max: 0
+    getVirtualData(year) {
+      const date = +this.$echarts.time.parse(year[0]);
+      const end = +this.$echarts.time.parse(year[1]);
+      const dayTime = 3600 * 24 * 1000;
+      const data = [];
+      for (let time = date; time <= end; time += dayTime) {
+        let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
+        if (this.Josn[a]) {
+          data.push([a, this.Josn[a]]);
+        } else {
+          data.push([a, null]);
+        }
       }
-      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];
+      return data;
+    },
+    setData() {
+      let year = Object.keys(this.Josn)[0].split('-')[0];
+      var t = this.gettime();
+      this.ooption = this.getVirtualData(t)
       if (!this.chartObj) {
-        this.setChart(this.ooption);
+        this.setChart(this.ooption, t);
       } else {
-        this.option.xAxis.data = this.ooption.xdata;
-        this.option.series[0].data = this.ooption.sdata;
-        this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
-        this.chartObj.setOption(this.option);
+        this.option.series.data = this.ooption;
+        this.option.calendar.range = t;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
+        this.chartObj.setOption(this.option, t);
       }
-    }
+    },
   },
   watch: {
-    yearArray: {
-      immediate: true,
+    Josn: {
+      handler: function (newVal, oldVal) { 
+        this.setData();
+       },
       deep: true,
-      handler(newValue, oldValue) {
-        this.setJson(newValue)
-        this.$forceUpdate();
-      },
     },
   },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
   mounted() {
-    this.setJson(this.yearArray)
-
+    this.setData();
+    var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
         _this.chartObj.resize();
       }
     });
   },
+  beforeDestroy() {
+    // clearInterval(this.timer);
+    // this.timer = null
+  },
 };
 </script>
 
 <style scoped>
 .data_body {
-  height: 100%;
+  /* display: flex; */
+  /* flex-direction: column; */
+  width: 100%;
+  height: 170px;
+  /* height: 500px; */
+  /* margin: 15px 5px 0 0; */
+  background: #fff;
+  overflow: hidden;
+  flex-shrink: 0;
   position: relative;
-  border-radius: 5px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 0;
-  width: 95%;
+}
+
+.noMind {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
   background: #fff;
 }
 </style>

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

@@ -1,119 +1,99 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
-    </div>
+    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+    <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    yearArray: {
-      type: Array,
-    },
-  },
+  props: ["Josn"],
   data() {
     return {
+      mindV: true,
       chartObj: null,
-      ooption: {
-        xdata: [],
-        sdata: [],
-      },
+      timer: null,
+      range: "",
+      ooption: [],
       option: {
         // title: {
-        //   text: '登录频次',
-        //   textStyle: {
-        //     fontSize: 12,
-        //   },
-        //   padding: [10, 0, 0, 10]
+        //   top: 30,
+        //   left: 'center',
+        //   text: '作业提交热力图'
         // },
         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) {
-              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;
-              }
-            }
+          formatter: function (p) {
+            const format = p.data[0];
+            return format + ' ' + p.data[1]+'份';
           }
         },
-        yAxis: {
-          type: 'category',
-          data: [
-            '星期天', '星期一', '星期二', '星期三',
-            '星期四', '星期五', '星期六',
-          ],
-          splitArea: {
-            show: true
-          },
-        },
         visualMap: {
           min: 0,
-          max: 10,
-          calculable: true,
-          orient: 'horizontal',
+          max: 0,
+          type: 'continuous',
           inRange: {
-            color: ['#fff', '#477cd7']
+            color: ['#65b9fc', '#477cd7']
           },
-          right: '10',
-          top: '0%'
+          precision: 0,
+          calculable: true,
         },
-        series: [
-          {
-            name: '',
-            type: 'heatmap',
-            data: [],
-            label: {
-              show: true
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
+        calendar: {
+          top: 40,
+          left: 100,
+          right: 30,
+          cellSize: ['auto', 15],
+          range: '',
+          itemStyle: {
+            borderWidth: 0.5
+          },
+          yearLabel: { show: false },
+          dayLabel: {
+            show: false
           }
-        ]
+        },
+        series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: ''
+        }
       },
     };
   },
   methods: {
-    setChart(option) {
+    gettime() {
+      var time = new Date();
+      // time=time.setDate(time.getDate()+1);
+      // time = new Date(time);
+      // time.setTime(time.getTime());
+      var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
+        + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
+      var monthNum = 3; //要减的月数(6)自己定义
+      var dateArr = s2.split('-'); //s2当前时间
+      var year = dateArr[0]; //获取当前日期的年份
+      var month = dateArr[1]; //获取当前日期的月份
+      var day = dateArr[2]; //获取当前日期的日
+      var days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中月的天数
+      var year2 = year;
+      var month2 = parseInt(month) - monthNum;
+      if (month2 <= 0) {
+        // year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
+        year2 = parseInt(year2) - 1;
+        month2 = 12 - (Math.abs(month2) % 12);
+      }
+      var day2 = day;
+      var days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2 < 10 ? '0' + days2 : days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      var t2 = year2 + '-' + month2 + '-' + day2;
+      return [t2, s2]
+    },
+    setChart(option, year) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -124,85 +104,96 @@ export default {
           //劳动课程
           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.option.series.data = option;
+        this.option.calendar.range = year;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
-    setJson(array) {
-      this.ooption = {
-        xdata: [],
-        sdata: [],
-        max: 0
+    getVirtualData(year) {
+      const date = +this.$echarts.time.parse(year[0]);
+      const end = +this.$echarts.time.parse(year[1]);
+      const dayTime = 3600 * 24 * 1000;
+      const data = [];
+      for (let time = date; time <= end; time += dayTime) {
+        let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
+        if (this.Josn[a]) {
+          data.push([a, this.Josn[a]]);
+        } else {
+          data.push([a, null]);
+        }
       }
-      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];
+      return data;
+    },
+    setData() {
+      let year = Object.keys(this.Josn)[0].split('-')[0];
+      var t = this.gettime();
+      this.ooption = this.getVirtualData(t)
       if (!this.chartObj) {
-        this.setChart(this.ooption);
+        this.setChart(this.ooption, t);
       } else {
-        this.option.xAxis.data = this.ooption.xdata;
-        this.option.series[0].data = this.ooption.sdata;
-        this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
-        this.chartObj.setOption(this.option);
+        this.option.series.data = this.ooption;
+        this.option.calendar.range = t;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
+        this.chartObj.setOption(this.option, t);
       }
-    }
+    },
   },
   watch: {
-    yearArray: {
-      immediate: true,
+    Josn: {
+      handler: function (newVal, oldVal) { 
+        this.setData();
+       },
       deep: true,
-      handler(newValue, oldValue) {
-        this.setJson(newValue)
-        this.$forceUpdate();
-      },
     },
   },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
   mounted() {
-    this.setJson(this.yearArray)
-
+    this.setData();
+    var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
         _this.chartObj.resize();
       }
     });
   },
+  beforeDestroy() {
+    // clearInterval(this.timer);
+    // this.timer = null
+  },
 };
 </script>
 
 <style scoped>
 .data_body {
-  height: 100%;
+  /* display: flex; */
+  /* flex-direction: column; */
+  width: 100%;
+  height: 170px;
+  /* height: 500px; */
+  /* margin: 15px 5px 0 0; */
+  background: #fff;
+  overflow: hidden;
+  flex-shrink: 0;
   position: relative;
-  border-radius: 5px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 0;
-  width: 95%;
+}
+
+.noMind {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
   background: #fff;
 }
 </style>

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

@@ -1,5 +1,6 @@
 <template>
-  <div class="body1" v-loading="isLoading">
+  <div class="body1">
+    <loading :isLoading="isLoading"></loading>
     <!-- 教师数据 -->
     <div class="left">
       <div class="top">
@@ -134,7 +135,7 @@
           <ToolUse
             style="height: calc(100% - 70px)"
             v-if="skType == 1"
-            :yearArray="loginCountYearArray"
+            :Josn="loginCountYearArray"
           ></ToolUse>
           <!-- <div class="otherCss">
             <div v-if="!oType">切换为柱状图</div>
@@ -589,6 +590,7 @@ import ToolUse from "./chartList/toolUse.vue";
 import Bar from "./chartList/bar.vue";
 import TeaActSecond from "./chartList/teaActSecond.vue";
 import CateRank from "./chartList/cateRank.vue";
+import loading from "../../components/loading.vue";
 export default {
   components: {
     TeaFre,
@@ -601,6 +603,7 @@ export default {
     Bar,
     TeaActSecond,
     CateRank,
+    loading
   },
   props: {
     oid: {
@@ -630,7 +633,7 @@ export default {
       gradeTime: [],
       subjectTime: [],
       themeListTime: [],
-      loginCountYearArray: [],
+      loginCountYearArray: {},
       courseArray: [],
       _courseArray: [],
       _course2: [],
@@ -938,52 +941,59 @@ export default {
           this.allTime = _allTime;
 
           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;
-              }
-            }
+          let loginCountYearArray = {};
+          let timeArray = [];
+          for(var i = 0;i<allLoginCount.length;i++){
+            timeArray.push(allLoginCount[i].vtime);
           }
+          timeArray.forEach((item) => {
+            loginCountYearArray[item] = loginCountYearArray[item] + 1 || 1;
+          });
+          // 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; //一年的登录频次