update

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

@@ -416,10 +416,10 @@ export default {
             for (let j = 0; j < _loginTimeArray.length; j++) {
               const _user = _loginTimeArray[j];
               if(_user.classid.indexOf(_classList[i].id) != -1){
-                _EloginTimeArray[i].loginTime += _user.time
+                _EloginTimeArray[i].loginTime += Number(_user.time)
               }
             }
-            _EloginTimeArray[i].loginTime = (_EloginTimeArray[i].loginTime / 60).toFixed(2) //换算成小时
+            _EloginTimeArray[i].loginTime = (_EloginTimeArray[i].loginTime / 60 / 60).toFixed(2) //换算成小时
           }
           this.EloginTimeArray = _EloginTimeArray
           let _EscoreArray2 = []

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

@@ -36,6 +36,7 @@ export default {
         },
         yAxis: {
           type: "value",
+          minInterval: 1
         },
         grid: {
           top: "10%",

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

@@ -23,6 +23,13 @@ export default {
         tooltip: {
           trigger: "item",
         },
+        grid: {
+          top: "5%",
+          left: "5%",
+          right: "5%",
+          bottom: "15%",
+          containLabel: true,
+        },
         xAxis: {
           type: "value",
           data: [0, 50, 100, 150, 200, 250],

src/components/pages/dataBoardNew/project/chartList/bar/cCourse.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
+            <!-- <div id="cateRank" class="echart" style="width: 100%; height: 100%"></div> -->
+            <highcharts :options="option" style="width: 95%; height: 95%"></highcharts>
+        </div>
+    </div>
+</template>
+  
+<script>
+import { Chart } from 'highcharts-vue'
+import HighCharts from 'highcharts'
+//和弦图的引入依赖
+// import column from 'highcharts/modules/column';
+// column(HighCharts);
+
+export default {
+    components: {
+        highcharts: Chart,
+    },
+    props: {
+        weekCourse2: {
+            type: Array,
+        },
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                data: [],
+            },
+            option: {
+                chart: {
+                    type: 'column',
+                    inverted: true
+                },
+                credits: {
+                    enabled: false//不显示LOGO
+                },
+                title: {
+                    text: null,
+                },
+                xAxis: {
+                    categories: ['按协同比例']
+                },
+                yAxis: {
+                    min: 0,
+                    title: {
+                        text: null
+                    }
+                },
+                tooltip: {
+                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>' +
+                        '({point.percentage:.0f}%)<br/>',
+                    //:.0f 表示保留 0 位小数，详见教程：https://www.hcharts.cn/docs/basic-labels-string-formatting
+                    shared: true
+                },
+                plotOptions: {
+                    column: {
+                        stacking: 'percent'
+                    }
+                },
+                legend: {
+                    align: 'center',
+                    verticalAlign: 'top',
+                    floating: true,
+                    backgroundColor: 'white',
+                    borderColor: '#CCC',
+                    borderWidth: 1,
+                    shadow: false
+                },
+                series: [{
+                    name: '教师协作',
+                    data: [5]
+                }, {
+                    name: '师生协作',
+                    data: [2]
+                }, {
+                    name: '生生协作',
+                    data: [3]
+                }]
+            }
+        };
+    },
+    methods: {
+        setChart() {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = Highcharts.chart('cateRank', this.option);
+                // 初始化雷达图
+                // this.chartObj = chartObj;
+                // this.chartObj.setOption(this.option);
+            });
+        },
+        setArray(array) {
+            this.option.xAxis.categories = []
+            this.option.series[0].data = []
+            this.option.series[1].data = []
+            for (var i = 0; i < array.length; i++) {
+                this.option.xAxis.categories.push(array[i].name)
+                this.option.series[0].data.push(array[i].lastWeekCouseCount)
+                this.option.series[1].data.push(array[i].toWeekCouseCount)
+            }
+        }
+    },
+    watch: {
+        weekCourse2: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                // this.setArray(newValue)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        // this.setArray(this.weekCourse2)
+        // this.setChart();
+
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    /* display: flex; */
+    position: relative;
+    border-radius: 5px;
+    /* border: 1px solid #eee; */
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/project/chartList/bar/finish.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
+            <!-- <div id="cateRank" class="echart" style="width: 100%; height: 100%"></div> -->
+            <highcharts :options="option" style="width: 95%; height: 95%"></highcharts>
+        </div>
+    </div>
+</template>
+  
+<script>
+import { Chart } from 'highcharts-vue'
+import HighCharts from 'highcharts'
+//和弦图的引入依赖
+// import column from 'highcharts/modules/column';
+// column(HighCharts);
+
+export default {
+    components: {
+        highcharts: Chart,
+    },
+    props: {
+        weekCourse2: {
+            type: Array,
+        },
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                data: [],
+            },
+            option: {
+                chart: {
+                    type: 'column',
+                    inverted: true
+                },
+                credits: {
+                    enabled: false//不显示LOGO
+                },
+                title: {
+                    text: null,
+                },
+                xAxis: {
+                    categories: ['按完成状态']
+                },
+                yAxis: {
+                    min: 0,
+                    title: {
+                        text: null
+                    }
+                },
+                tooltip: {
+                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>' +
+                        '({point.percentage:.0f}%)<br/>',
+                    //:.0f 表示保留 0 位小数，详见教程：https://www.hcharts.cn/docs/basic-labels-string-formatting
+                    shared: true
+                },
+                plotOptions: {
+                    column: {
+                        stacking: 'percent'
+                    }
+                },
+                legend: {
+                    align: 'center',
+                    verticalAlign: 'top',
+                    floating: true,
+                    backgroundColor: 'white',
+                    borderColor: '#CCC',
+                    borderWidth: 1,
+                    shadow: false
+                },
+                series: [{
+                    name: '未进行',
+                    data: [5]
+                }, {
+                    name: '进行中',
+                    data: [2]
+                }, {
+                    name: '已完成',
+                    data: [3]
+                }]
+            }
+        };
+    },
+    methods: {
+        setChart() {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = Highcharts.chart('cateRank', this.option);
+                // 初始化雷达图
+                // this.chartObj = chartObj;
+                // this.chartObj.setOption(this.option);
+            });
+        },
+        setArray(array) {
+            this.option.xAxis.categories = []
+            this.option.series[0].data = []
+            this.option.series[1].data = []
+            for (var i = 0; i < array.length; i++) {
+                this.option.xAxis.categories.push(array[i].name)
+                this.option.series[0].data.push(array[i].lastWeekCouseCount)
+                this.option.series[1].data.push(array[i].toWeekCouseCount)
+            }
+        }
+    },
+    watch: {
+        weekCourse2: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                // this.setArray(newValue)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        // this.setArray(this.weekCourse2)
+        // this.setChart();
+
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    /* display: flex; */
+    position: relative;
+    border-radius: 5px;
+    /* border: 1px solid #eee; */
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/project/chartList/bar/teacherStudent.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
+            <!-- <div id="cateRank" class="echart" style="width: 100%; height: 100%"></div> -->
+            <highcharts :options="option" style="width: 95%; height: 95%"></highcharts>
+        </div>
+    </div>
+</template>
+  
+<script>
+import { Chart } from 'highcharts-vue'
+import HighCharts from 'highcharts'
+//和弦图的引入依赖
+// import column from 'highcharts/modules/column';
+// column(HighCharts);
+
+export default {
+    props: {
+        tsArray: {
+            type: Object,
+        },
+    },
+    components: {
+        highcharts: Chart,
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                data: [],
+            },
+            option: {
+                chart: {
+                    type: 'column',
+                    inverted: true
+                },
+                credits: {
+                    enabled: false//不显示LOGO
+                },
+                title: {
+                    text: null,
+                },
+                xAxis: {
+                    categories: ['按师生分工比例']
+                },
+                yAxis: {
+                    min: 0,
+                    title: {
+                        text: null
+                    }
+                },
+                tooltip: {
+                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>' +
+                        '({point.percentage:.0f}%)<br/>',
+                    //:.0f 表示保留 0 位小数，详见教程：https://www.hcharts.cn/docs/basic-labels-string-formatting
+                    shared: true
+                },
+                plotOptions: {
+                    column: {
+                        stacking: 'percent'
+                    }
+                },
+                legend: {
+                    align: 'center',
+                    verticalAlign: 'top',
+                    floating: true,
+                    y: -20,
+                    backgroundColor: 'white',
+                    borderColor: '#CCC',
+                    borderWidth: 1,
+                    shadow: false
+                },
+                series: [{
+                    name: '教师负责',
+                    data: []
+                }, {
+                    name: '学生负责',
+                    data: []
+                }, {
+                    name: '师生负责',
+                    data: []
+                }]
+            }
+        };
+    },
+    methods: {
+        setChart() {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = Highcharts.chart('cateRank', this.option);
+                // 初始化雷达图
+                // this.chartObj = chartObj;
+                // this.chartObj.setOption(this.option);
+            });
+        },
+        setArray(array) {
+            if (!array || !Object.keys(array).length) {
+                return
+            }
+            // this.option.xAxis.categories = []
+            this.option.series[0].data = [array.tt]
+            this.option.series[1].data = [array.ss]
+            this.option.series[2].data = [array.ts]     
+        }
+    },
+    watch: {
+        tsArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.setArray(newValue)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        this.setArray(this.weekCourse2)
+        // this.setChart();
+
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    /* display: flex; */
+    position: relative;
+    border-radius: 5px;
+    /* border: 1px solid #eee; */
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/project/chartList/bar/time.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
+            <!-- <div id="cateRank" class="echart" style="width: 100%; height: 100%"></div> -->
+            <highcharts :options="option" style="width: 95%; height: 95%"></highcharts>
+        </div>
+    </div>
+</template>
+  
+<script>
+import { Chart } from 'highcharts-vue'
+import HighCharts from 'highcharts'
+//和弦图的引入依赖
+// import column from 'highcharts/modules/column';
+// column(HighCharts);
+
+export default {
+    components: {
+        highcharts: Chart,
+    },
+    props: {
+        weekCourse2: {
+            type: Array,
+        },
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                data: [],
+            },
+            option: {
+                chart: {
+                    type: 'column',
+                    inverted: true
+                },
+                credits: {
+                    enabled: false//不显示LOGO
+                },
+                title: {
+                    text: null,
+                },
+                xAxis: {
+                    categories: ['按项目时长']
+                },
+                yAxis: {
+                    min: 0,
+                    title: {
+                        text: null
+                    }
+                },
+                tooltip: {
+                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>' +
+                        '({point.percentage:.0f}%)<br/>',
+                    //:.0f 表示保留 0 位小数，详见教程：https://www.hcharts.cn/docs/basic-labels-string-formatting
+                    shared: true
+                },
+                plotOptions: {
+                    column: {
+                        stacking: 'percent'
+                    }
+                },
+                legend: {
+                    align: 'center',
+                    verticalAlign: 'top',
+                    floating: true,
+                    backgroundColor: 'white',
+                    borderColor: '#CCC',
+                    borderWidth: 1,
+                    shadow: false
+                },
+                series: [{
+                    name: '9周以上',
+                    data: [5]
+                }, {
+                    name: '6-8周',
+                    data: [2]
+                }, {
+                    name: '3-5周',
+                    data: [3]
+                }, {
+                    name: '2周以下',
+                    data: [3]
+                }]
+            }
+        };
+    },
+    methods: {
+        setChart() {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = Highcharts.chart('cateRank', this.option);
+                // 初始化雷达图
+                // this.chartObj = chartObj;
+                // this.chartObj.setOption(this.option);
+            });
+        },
+        setArray(array) {
+            this.option.xAxis.categories = []
+            this.option.series[0].data = []
+            this.option.series[1].data = []
+            for (var i = 0; i < array.length; i++) {
+                this.option.xAxis.categories.push(array[i].name)
+                this.option.series[0].data.push(array[i].lastWeekCouseCount)
+                this.option.series[1].data.push(array[i].toWeekCouseCount)
+            }
+        }
+    },
+    watch: {
+        weekCourse2: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                // this.setArray(newValue)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        // this.setArray(this.weekCourse2)
+        // this.setChart();
+
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    /* display: flex; */
+    position: relative;
+    border-radius: 5px;
+    /* border: 1px solid #eee; */
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>

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

@@ -1,42 +1,105 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div
-        id="charts_canvas"
-        class="echart"
-        style="width: 100%; height: 100%"
-      ></div>
+    <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
+      <!-- <div id="cateRank" class="echart" style="width: 100%; height: 100%"></div> -->
+      <highcharts :options="option" style="width: 95%; height: 95%"></highcharts>
     </div>
   </div>
 </template>
 
 <script>
+import { Chart } from 'highcharts-vue'
+import HighCharts from 'highcharts'
+//和弦图的引入依赖
+// import column from 'highcharts/modules/column';
+// column(HighCharts);
+
 export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    weekCourse2: {
+      type: Array,
+    },
+  },
   data() {
     return {
       chartObj: null,
       ooption: {
-        xdata: [],
-        type: [],
+        data: [],
       },
       option: {
-        tooltip: {
-          trigger: "item",
+        chart: {
+          type: 'column'
+        },
+        title: {
+          text: null
+        },
+        credits: {
+          enabled: false//不显示LOGO
         },
         xAxis: {
-          type: "category",
-          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          categories: [
+          ]
         },
-        yAxis: {
-          type: "value",
+        yAxis: [{
+          allowDecimals: false,
+          min: 0,
+          title: {
+            text: '项目总数'
+          }
         },
-        series: [
-          {
-            data: [120, 200, 150, 80, 70, 110, 130],
-            type: "bar",
-          },
+          // {
+          //   title: {
+          //     text: '项目总数'
+          //   },
+          //   opposite: true
+          // }
         ],
-      },
+        legend: {
+          shadow: false
+        },
+        tooltip: {
+          shared: true
+        },
+        plotOptions: {
+          column: {
+            grouping: false,
+            shadow: false,
+            borderWidth: 0
+          }
+        },
+        series: [{
+          name: '上周课程总数',
+          color: 'rgba(165,170,217,1)',
+          data: [],
+          pointPadding: 0.3, // 通过 pointPadding 和 pointPlacement 控制柱子位置
+          // pointPlacement: -0.2
+        }, {
+          name: '本周课程总数',
+          color: 'rgba(126,86,134,.9)',
+          data: [],
+          pointPadding: 0.4,
+          // pointPlacement: -0.2
+        },
+          //  {
+          //   name: '上周项目总数',
+          //   color: 'rgba(248,161,63,1)',
+          //   data: [153, 178, 195],
+          //   pointPadding: 0.3,
+          //   pointPlacement: 0.2,
+          //   yAxis: 1  // 指定数据列所在的 yAxis
+          // }, {
+          //   name: '本周项目总数',
+          //   color: 'rgba(186,60,61,.9)',
+          //   data: [203, 198, 208],
+          //   pointPadding: 0.4,
+          //   pointPlacement: 0.2,
+          //   yAxis: 1
+          // }
+        ]
+      }
     };
   },
   methods: {
@@ -47,24 +110,37 @@ export default {
       });
       //然后异步执行echarts的初始化函数
       newPromise.then(() => {
-        const chartObj = this.$echarts.init(
-          this.$el.querySelector("#charts_canvas")
-        );
+        const chartObj = Highcharts.chart('cateRank', this.option);
         // 初始化雷达图
-        this.chartObj = chartObj;
-        this.chartObj.setOption(this.option);
+        // this.chartObj = chartObj;
+        // this.chartObj.setOption(this.option);
       });
     },
+    setArray(array) {
+      this.option.xAxis.categories = []
+      this.option.series[0].data = []
+      this.option.series[1].data = []
+      for (var i = 0; i < array.length; i++) {
+        this.option.xAxis.categories.push(array[i].name)
+        this.option.series[0].data.push(array[i].lastWeekCouseCount)
+        this.option.series[1].data.push(array[i].toWeekCouseCount)
+      }
+    }
+  },
+  watch: {
+    weekCourse2: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+        this.$forceUpdate();
+      },
+    },
   },
-  watch: {},
   mounted() {
-    this.setChart();
-    var _this = this;
-    window.addEventListener("resize", () => {
-      if (_this.chartObj) {
-        _this.chartObj.resize();
-      }
-    });
+    this.setArray(this.weekCourse2)
+    // this.setChart();
+
   },
 };
 </script>

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

@@ -36,6 +36,7 @@ export default {
         },
         yAxis: {
           type: "value",
+          minInterval: 1
         },
         grid: {
           top: "5%",

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

@@ -22,7 +22,7 @@
                 loginCountMonthArray[loginCountMonthArray.length - 2].course < 0 ? 0 : (
                   (loginCountMonthArray[loginCountMonthArray.length - 1].course -
                     loginCountMonthArray[loginCountMonthArray.length - 2].course) / (allCourse -
-                      loginCountMonthArray[loginCountMonthArray.length - 1].course)).toFixed(2) * 100 + "%" }}</span>
+                      loginCountMonthArray[loginCountMonthArray.length - 1].course) * 100).toFixed(2) + "%" }}</span>
                   <span v-else>0</span>
             </div>
             <div class="info blueBG">
@@ -119,7 +119,7 @@
         </div>
         <div class="dataBox">
           <CateRank v-if="courseType == 0" style="height: calc(100%)"></CateRank>
-          <CourseNum v-if="courseType == 1" style="height: calc(100%)"></CourseNum>
+          <CourseNum v-if="courseType == 1" style="height: calc(100%)" :weekCourse2="weekCourse"></CourseNum>
         </div>
       </div>
       <div class="bottom">
@@ -156,7 +156,13 @@
           </div> -->
         </div>
         <div class="dataBox">
-          <CourseTime v-if="!shType" style="height: calc(100% - 30px)"></CourseTime>
+          <div v-if="!shType" style="height: calc(100% - 35px);overflow: auto;">
+            <!-- <barFinish style="height: calc(100% / 3 - 10px);"></barFinish> -->
+            <!-- <barCCourse style="height: calc(100% / 3 - 10px);"></barCCourse> -->
+            <barTeacherStudent style="height: calc(100%);" :tsArray="tsArray"></barTeacherStudent>
+            <!-- <barTime style="height: calc(100% / 4 - 10px);"></barTime> -->
+          </div>
+          <!-- <CourseTime v-if="!shType" style="height: calc(100% - 30px)"></CourseTime> -->
           <div class="info_box" v-if="shType">
             <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
               <span>项目实施总数</span>
@@ -164,7 +170,8 @@
             </div>
             <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
               <span>平台实施项目占比</span>
-              <span>{{ haveWorksCourse && allCourse ? (haveWorksCourse / allCourse * 100).toFixed(0) + '%' : 0 + '%' }}</span>
+              <span>{{ haveWorksCourse && allCourse ? (haveWorksCourse / allCourse * 100).toFixed(0) + '%' : 0 + '%'
+              }}</span>
             </div>
             <div class="info blueBG" style="width: calc(100% / 4 - 10px)">
               <span>项目平均任务数量</span>
@@ -264,6 +271,10 @@ import Bar from "./chartList/bar.vue";
 import CourseNum from "./chartList/courseNum.vue";
 import ToolChart from "./chartList/toolChart.vue";
 import subjuect from "./chartList/subjuect.vue";
+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";
 export default {
   components: {
     TeaFre,
@@ -276,7 +287,11 @@ export default {
     Bar,
     CourseNum,
     ToolChart,
-    subjuect
+    subjuect,
+    barFinish,
+    barCCourse,
+    barTeacherStudent,
+    barTime,
   },
   props: {
     oid: {
@@ -316,6 +331,8 @@ export default {
       taskCount: 0,
       toolList: [],
       personList: [],
+      weekCourse: [],
+      tsArray: {},
     };
   },
   mounted() {
@@ -452,11 +469,60 @@ export default {
             { name: "CocoPi", value: 0 },
             { name: "其他", value: 0 },
           ];
-          var twoPerson = 0,threePerson = 0,fivePerson = 0,sevenPerson = 0;
+          var twoPerson = 0, threePerson = 0, fivePerson = 0, sevenPerson = 0;
           let personList = []
           var wList = [];
+
+          var today = new Date();
+          var lastDayOfWeek = new Date(today.setDate(today.getDate() - today.getDay() + 7));;//本周周日
+
+          let weekArray = {
+            lastWeek: [],//上周
+            toWeek: [] //本周
+          }
+          let weekCourse = [{
+            name: '项目数量',
+            lastWeekCouseCount: 0,
+            toWeekCouseCount: 0
+          }]
+          for (var i = 0; i < 14; i++) {
+            let time = JSON.parse(JSON.stringify(lastDayOfWeek))
+            let time2 = new Date(time)
+            var a = new Date(time2.setDate(time2.getDate() - i));
+            if (i > 6) {
+              weekArray.lastWeek.push(a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate());
+            } else {
+              weekArray.toWeek.push(a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate());
+            }
+          }
+
+          var _tsArray = {
+            tt: 0,
+            ts: 0,
+            ss: 0,
+          } //记录项目的师生分工
+
           for (var i = 0; i < _workCourse.length; i++) {
             if (!wList[_workCourse[i].courseId]) {
+              let _date = new Date(weekArray.lastWeek[weekArray.lastWeek.length - 1])
+              if (new Date(_workCourse[i].create_at) > _date) {
+                var a = new Date(_workCourse[i].create_at)
+                var string = a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate()
+                if (weekArray.lastWeek.indexOf(string) != -1) {
+                  weekCourse[0].lastWeekCouseCount++
+                } else {
+                  weekCourse[0].toWeekCouseCount++
+                }
+              }
+              if ((_workCourse[i].type == _workCourse[i].type2 == 1) || (!_workCourse[i].type2 && _workCourse[i].type == 1)) {
+                _tsArray.tt++
+              } else if ((_workCourse[i].type == 2 && _workCourse[i].type2 == 1) || (_workCourse[i].type == 1 && _workCourse[i].type2 == 2)) {
+                _tsArray.ts++
+              } else if ((_workCourse[i].type == _workCourse[i].type2 == 2) || (!_workCourse[i].type2 && _workCourse[i].type == 2)) {
+                _tsArray.ss++
+              } else {
+                _tsArray.ts++
+              }
               wList[_workCourse[i].courseId] = {
                 cid: _workCourse[i].courseId,
                 title: _workCourse[i].title,
@@ -475,46 +541,46 @@ export default {
                 _taskCount += chapters[j].chapterInfo[0].taskJson.length;
                 let _taskJson = chapters[j].chapterInfo[0].taskJson
                 for (
-                    var k = 0;
-                    k < _taskJson.length;
-                    k++
+                  var k = 0;
+                  k < _taskJson.length;
+                  k++
+                ) {
+                  for (
+                    var q = 0;
+                    q <
+                    _taskJson[k].toolArray.length;
+                    q++
                   ) {
-                    for (
-                      var q = 0;
-                      q <
-                        _taskJson[k].toolArray.length;
-                      q++
-                    ) {
-                        if(_taskJson[k].toolArray[q].tool == 1){
-                          toolAllArray[0].value++;
-                        }else if(_taskJson[k].toolArray[q].tool == 3){
-                          toolAllArray[1].value++;
-                        }else if(_taskJson[k].toolArray[q].tool == 48){
-                          toolAllArray[2].value++;
-                        }else if(_taskJson[k].toolArray[q].tool == 52){
-                          toolAllArray[3].value++;
-                        }else if(_taskJson[k].toolArray[q].tool == 51){
-                          toolAllArray[4].value++;
-                        }else if(_taskJson[k].toolArray[q].tool == 54){
-                          toolAllArray[5].value++;
-                        }else if(_taskJson[k].toolArray[q].tool == 56){
-                          toolAllArray[6].value++;
-                        }else if(_taskJson[k].toolArray[q].tool == 57){
-                          toolAllArray[7].value++;
-                        }else{
-                          toolAllArray[8].value++;
-                        }
+                    if (_taskJson[k].toolArray[q].tool == 1) {
+                      toolAllArray[0].value++;
+                    } else if (_taskJson[k].toolArray[q].tool == 3) {
+                      toolAllArray[1].value++;
+                    } else if (_taskJson[k].toolArray[q].tool == 48) {
+                      toolAllArray[2].value++;
+                    } else if (_taskJson[k].toolArray[q].tool == 52) {
+                      toolAllArray[3].value++;
+                    } else if (_taskJson[k].toolArray[q].tool == 51) {
+                      toolAllArray[4].value++;
+                    } else if (_taskJson[k].toolArray[q].tool == 54) {
+                      toolAllArray[5].value++;
+                    } else if (_taskJson[k].toolArray[q].tool == 56) {
+                      toolAllArray[6].value++;
+                    } else if (_taskJson[k].toolArray[q].tool == 57) {
+                      toolAllArray[7].value++;
+                    } else {
+                      toolAllArray[8].value++;
                     }
                   }
+                }
               }
-              if(_workCourse[i].course_teacher){
-                if(_workCourse[i].course_teacher.split(',').length <= 2){
+              if (_workCourse[i].course_teacher) {
+                if (_workCourse[i].course_teacher.split(',').length <= 2) {
                   twoPerson++
-                }else if(4 >= _workCourse[i].course_teacher.split(',').length && _workCourse[i].course_teacher.split(',').length > 2){
+                } else if (4 >= _workCourse[i].course_teacher.split(',').length && _workCourse[i].course_teacher.split(',').length > 2) {
                   threePerson++;
-                }else if(6 >= _workCourse[i].course_teacher.split(',').length && _workCourse[i].course_teacher.split(',').length > 4){
+                } else if (6 >= _workCourse[i].course_teacher.split(',').length && _workCourse[i].course_teacher.split(',').length > 4) {
                   fivePerson++;
-                }else if(_workCourse[i].course_teacher.split(',').length >= 7){
+                } else if (_workCourse[i].course_teacher.split(',').length >= 7) {
                   sevenPerson++;
                 }
               }
@@ -537,9 +603,10 @@ export default {
           this.workNumList = workNumList;
           this.taskCount = _taskCount
           this.toolList = toolAllArray;
-          personList.push({ name:"2人以下",value: twoPerson },{ name:"3-4人",value: threePerson },{ name:"5-6人",value: fivePerson },{ name:"7人以上",value: sevenPerson });
+          personList.push({ name: "2人以下", value: twoPerson }, { name: "3-4人", value: threePerson }, { name: "5-6人", value: fivePerson }, { name: "7人以上", value: sevenPerson });
           this.personList = personList;
-
+          this.weekCourse = weekCourse;
+          this.tsArray = _tsArray
           this.$forceUpdate();
         })
         .catch((err) => {

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

@@ -21,7 +21,7 @@
                 loginCountMonthArray[loginCountMonthArray.length - 2].user) < 0 ? 0 :
                 ((loginCountMonthArray[loginCountMonthArray.length - 1].user -
                   loginCountMonthArray[loginCountMonthArray.length - 2].user) /
-                  loginCountMonthArray[loginCountMonthArray.length - 2].user) * 100 + '%' }}</span>
+                  loginCountMonthArray[loginCountMonthArray.length - 2].user * 100) + '%' }}</span>
             </div>
             <div class="info blueBG">
               <span>本月登录用户总数</span>

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

@@ -51,7 +51,8 @@ export default {
           data: []
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          minInterval: 1
         },
         series: [
           {

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

@@ -1,71 +1,142 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div
-        id="charts_canvas"
-        class="echart"
-        style="width: 100%; height: 100%"
-      ></div>
-    </div>
+      <div style="width: 100%; height: 100%">
+          <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+      </div>
   </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      chartObj: null,
-      ooption: {
-        xdata: [],
-        type: [],
+  props: {
+      EloginTimeArray: {
+          type: Array,
       },
-      option: {
-        tooltip: {
-          trigger: "item",
-        },
-        xAxis: {
-          type: "value",
-          data: [0, 50, 100, 150, 200, 250],
-        },
-        yAxis: {
-          type: "category",
-          data: ["五年级", "四年级", "三年级", "二年级", "一年级"],
-        },
-        series: [
-          {
-            data: [120, 200, 150, 80, 70, 110, 130],
-            type: "bar",
+  },
+  data() {
+      return {
+          chartObj: null,
+          ooption: {
+              xdata: [],
+              data: [],
           },
-        ],
-      },
-    };
+          option: {
+              // title: {
+              //     text: '在线时长',
+              //     textStyle: {
+              //         fontSize: 12,
+              //     },
+              //     padding: [5, 0, 0, 10]
+              // },
+              tooltip: {
+                  trigger: "axis",
+                  axisPointer: {
+                      type: "shadow",
+                  },
+              },
+              dataZoom: [
+                  {
+                      // start: 50,
+                      type: 'inside',
+                      yAxisIndex: 0
+                  },
+                  {
+                      type: 'slider',
+                      yAxisIndex: 0
+                  }
+              ],
+              grid: {
+                  top: '5%',
+                  left: '5%',
+                  right: '10%',
+                  bottom: '5%',
+                  containLabel: true
+              },
+              xAxis: {
+                  type: 'value',
+                  boundaryGap: [0, 0.01]
+              },
+
+              yAxis: {
+                  type: 'category',
+                  // data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
+                  data: []
+              },
+              series: [
+                  {
+                      name: "在线时长（时）",
+                      type: 'bar',
+                      // data: [180, 50, 70, 90, 100, 130],
+                      data: [],
+                      itemStyle: {
+                          normal: {
+                              color: function (params) {
+                                  return "#106bff";
+                              },
+                          },
+                      },
+                  }
+              ]
+          },
+      };
   },
   methods: {
-    setChart() {
-      // 雷达图显示的标签
-      let newPromise = new Promise((resolve) => {
-        resolve();
-      });
-      //然后异步执行echarts的初始化函数
-      newPromise.then(() => {
-        const chartObj = this.$echarts.init(
-          this.$el.querySelector("#charts_canvas")
-        );
-        // 初始化雷达图
-        this.chartObj = chartObj;
-        this.chartObj.setOption(this.option);
-      });
-    },
+      setChart(option) {
+          // 雷达图显示的标签
+          let newPromise = new Promise((resolve) => {
+              resolve();
+          });
+          //然后异步执行echarts的初始化函数
+          newPromise.then(() => {
+              const chartObj = this.$echarts.init(
+                  //劳动课程
+                  this.$el.querySelector("#charts_canvas")
+              );
+              this.option.yAxis.data = option.xdata;
+              this.option.series[0].data = option.data;
+              // 初始化雷达图
+              this.chartObj = chartObj;
+              this.chartObj.setOption(this.option);
+          });
+      },
+      setArray(Array) {
+          this.ooption = {
+              xdata: [],
+              data: [],
+          }
+          let _array = Array
+          for (var i = 0; i < _array.length; i++) {
+              this.ooption.xdata.push(_array[i].name)
+              this.ooption.data.push(_array[i].loginTime)
+          }
+
+          if (!this.chartObj) {
+              this.setChart(this.ooption);
+          } else {
+              this.option.yAxis.data = this.ooption.xdata;
+              this.option.series[0].data = this.ooption.data;
+              this.chartObj.setOption(this.option);
+          }
+      }
+  },
+  watch: {
+      EloginTimeArray: {
+          immediate: true,
+          deep: true,
+          handler(newValue, oldValue) {
+              this.setArray(newValue)
+              this.$forceUpdate();
+          },
+      },
   },
-  watch: {},
   mounted() {
-    this.setChart();
-    var _this = this;
-    window.addEventListener("resize", () => {
-      if (_this.chartObj) {
-        _this.chartObj.resize();
-      }
-    });
+      this.setArray(this.EloginTimeArray)
+      var _this = this;
+      window.addEventListener("resize", () => {
+          if (_this.chartObj) {
+              _this.chartObj.resize();
+          }
+      });
   },
 };
 </script>
@@ -73,14 +144,12 @@ export default {
 <style scoped>
 .data_body {
   height: 100%;
-  /* display: flex; */
   position: relative;
   border-radius: 5px;
-  /* border: 1px solid #eee; */
   margin: 0 auto;
   box-sizing: border-box;
   padding: 0;
   width: 95%;
   background: #fff;
 }
-</style>
+</style>

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

@@ -10,47 +10,43 @@
           <div class="info_box">
             <div class="info blueBG">
               <span>学生总数</span>
-              <!-- <span>{{ count }}</span> -->
-              <span>{{ 18 }}</span>
+              <span>{{ studentCount }}</span>
             </div>
             <div class="info blueBG">
               <span>本月登录学生用户环比</span>
-              <!-- <span>{{ weekCount }}</span> -->
-              <span>{{ "80%" }}</span>
+              <span v-if="loginCountMonthArray.length">{{ (loginCountMonthArray[loginCountMonthArray.length - 1].user -
+                loginCountMonthArray[loginCountMonthArray.length - 2].user) < 0 ? 0 :
+                ((loginCountMonthArray[loginCountMonthArray.length - 1].user -
+                  loginCountMonthArray[loginCountMonthArray.length - 2].user) /
+                  loginCountMonthArray[loginCountMonthArray.length - 2].user * 100) + '%' }}</span>
             </div>
             <div class="info blueBG">
               <span>本月登录学生用户总数</span>
-              <!-- <span>{{ weekCount }}</span> -->
-              <span>{{ 18 }}</span>
+              <span v-if="loginCountMonthArray.length">{{ loginCountMonthArray[loginCountMonthArray.length - 1].user
+              }}</span>
             </div>
             <div class="info blueBG">
               <span>本月新增登录学生用户</span>
-              <!-- <span>{{ weekCount }}</span> -->
-              <span>{{ 18 }}</span>
+              <span v-if="loginCountMonthArray.length">{{ (loginCountMonthArray[loginCountMonthArray.length - 1].user -
+                loginCountMonthArray[loginCountMonthArray.length - 2].user) < 0 ? 0 :
+                loginCountMonthArray[loginCountMonthArray.length - 1].user -
+                loginCountMonthArray[loginCountMonthArray.length - 2].user }}</span>
             </div>
           </div>
-          <loginCount style="height: calc(100% - 140px)"></loginCount>
+          <loginCount style="height: calc(100% - 140px)" :monthArray="loginCountMonthArray"></loginCount>
         </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
-          <div
-            class="title"
-            :class="{ isClick: skType == 0 }"
-            @click="skType = 0"
-            style="cursor: pointer; padding: 0 0 5px 0"
-          >
+          <div class="title" :class="{ isClick: skType == 0 }" @click="skType = 0"
+            style="cursor: pointer; padding: 0 0 5px 0">
             在线时长
           </div>
-          <div
-            class="title"
-            :class="{ isClick: skType == 1 }"
-            @click="skType = 1"
-            style="cursor: pointer; padding: 0 0 5px 0"
-          >
+          <div class="title" :class="{ isClick: skType == 1 }" @click="skType = 1"
+            style="cursor: pointer; padding: 0 0 5px 0">
             登录频次
           </div>
-          <el-select v-model="cType" class="selectBox" style="width: 110px">
+          <!-- <el-select v-model="cType" class="selectBox" style="width: 110px">
             <el-option label="全部" value="全部"></el-option>
             <el-option label="一年级" value="一年级"></el-option>
             <el-option label="二年级" value="二年级"></el-option>
@@ -60,82 +56,67 @@
             <div @click="tType = 0" :class="{ isClick: tType == 0 }">周</div>
             <div @click="tType = 1" :class="{ isClick: tType == 1 }">月</div>
             <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
-          </div>
+          </div> -->
         </div>
-        <div class="info_box" v-if="!oType">
+        <div class="info_box" v-if="skType == 1">
           <div class="info blueBG">
-            <span>开展频次</span>
+            <span>登录频次</span>
             <!-- <span>{{ count }}</span> -->
-            <span>{{ 18 }}</span>
+            <span>{{ countLogin }}</span>
           </div>
           <div class="info blueBG">
             <span>人均频次</span>
             <!-- <span>{{ weekCount }}</span> -->
-            <span>{{ "80%" }}</span>
+            <span>{{ countLogin && studentCount ? (countLogin / studentCount).toFixed(0) : 0 }}</span>
           </div>
         </div>
-        <div class="info_box" v-if="oType">
+        <div class="info_box" v-if="skType == 0">
           <div class="info blueBG">
             <span>累计时长</span>
-            <!-- <span>{{ count }}</span> -->
-            <span>{{ 18 }}</span>
+            <span>{{ loginTime.toFixed(0) }}</span>
           </div>
           <div class="info blueBG">
             <span>人均在线时长</span>
-            <!-- <span>{{ weekCount }}</span> -->
-            <span>{{ "80%" }}</span>
+            <span>{{ loginTime && studentCount ? (loginTime / studentCount).toFixed(0) : 0 }}</span>
           </div>
         </div>
-        <div class="dataBox">
-          <toolUser style="height: calc(100% - 120px)" v-if="!oType"></toolUser>
-          <bar style="height: calc(100% - 120px)" v-if="oType"></bar>
-          <div class="otherCss">
+        <div class="dataBox" style="height: calc(100% - 110px)">
+          <toolUser style="height: calc(100%)" v-if="skType == 1" :yearArray="loginCountYearArray"></toolUser>
+          <bar style="height: calc(100%)" v-if="skType == 0" :EloginTimeArray="EloginTimeArray"></bar>
+          <!-- <div class="otherCss">
             <div v-if="!oType">切换为柱状图</div>
             <div v-if="oType">切换为热力图</div>
             <div class="otherImg" @click="otherEchart">
               <img src="../../../../assets/icon/other.png" alt="" />
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
     <div class="center">
       <div class="top">
         <div class="titleBox" style="justify-content: space-between">
-          <div
-            style="
+          <div style="
               display: flex;
               flex-direction: row;
               flex-wrap: nowrap;
               align-items: center;
-            "
-          >
-            <div
-              class="title"
-              :class="{ isClick: courseType == 0 }"
-              @click="courseType = 0"
-              style="cursor: pointer; padding: 0 0 5px 0"
-            >
+            ">
+            <div class="title" :class="{ isClick: courseType == 0 }" @click="courseType = 0"
+              style="cursor: pointer; padding: 0 0 5px 0">
               学生行为分布
             </div>
-            <div
-              class="title"
-              :class="{ isClick: courseType == 1 }"
-              @click="courseType = 1"
-              style="cursor: pointer; padding: 0 0 5px 0"
-            >
+            <div class="title" :class="{ isClick: courseType == 1 }" @click="courseType = 1"
+              style="cursor: pointer; padding: 0 0 5px 0">
               学生协同情况
             </div>
           </div>
-          <div
-            style="
+          <div style="
               display: flex;
               flex-direction: row;
               flex-wrap: nowrap;
               align-items: center;
-            "
-            v-if="courseType == 0"
-          >
+            " v-if="courseType == 0">
             <el-select v-model="cType1" class="selectBox" style="width: 110px">
               <el-option label="全部" value="全部"></el-option>
             </el-select>
@@ -143,15 +124,12 @@
               <el-option label="在线时长" value="在线时长"></el-option>
             </el-select>
           </div>
-          <div
-            style="
+          <div style="
               display: flex;
               flex-direction: row;
               flex-wrap: nowrap;
               align-items: center;
-            "
-            v-if="courseType == 1"
-          >
+            " v-if="courseType == 1">
             <el-select v-model="cType3" class="selectBox" style="width: 110px">
               <el-option label="全部" value="全部"></el-option>
             </el-select>
@@ -171,105 +149,106 @@
           </div>
         </div>
         <div class="dataBox">
-          <studentInfo
-            v-if="courseType == 0"
-            style="height: calc(100%)"
-          ></studentInfo>
-          <courseNum
-            v-if="courseType == 1"
-            style="height: calc(100%)"
-          ></courseNum>
+          <studentInfo v-if="courseType == 0" style="height: calc(100%)"></studentInfo>
+          <courseNum v-if="courseType == 1" style="height: calc(100%)"></courseNum>
         </div>
       </div>
       <div class="bottom">
         <div class="titleBox" style="justify-content: space-between">
-          <div
-            style="
+          <div style="
               display: flex;
               flex-direction: row;
               flex-wrap: nowrap;
               align-items: center;
-            "
-          >
-            <div
-              class="title"
-              :class="{ isClick: bType == 0 }"
-              @click="bType = 0"
-              style="cursor: pointer; padding: 0 0 5px 0"
-            >
+            ">
+            <div class="title" :class="{ isClick: bType == 0 }" @click="bType = 0"
+              style="cursor: pointer; padding: 0 0 5px 0">
               课程参与情况
             </div>
-            <div
-              class="title"
-              :class="{ isClick: bType == 1 }"
-              @click="bType = 1"
-              style="cursor: pointer; padding: 0 0 5px 0"
-            >
+            <div class="title" :class="{ isClick: bType == 1 }" @click="bType = 1"
+              style="cursor: pointer; padding: 0 0 5px 0">
               项目参与情况
             </div>
           </div>
-          <div class="timeDiv">
+          <!-- <div class="timeDiv">
             <div @click="sType = 0" :class="{ isClick: sType == 0 }">周</div>
             <div @click="sType = 1" :class="{ isClick: sType == 1 }">月</div>
             <div @click="sType = 2" :class="{ isClick: sType == 2 }">学期</div>
-          </div>
+          </div> -->
         </div>
         <div class="dataBox">
-          <div class="allBox" style="height: calc(100% - 30px)">
+          <div class="allBox" style="height: calc(100% - 30px)" v-if="bType == 0">
+            <div class="allBox_left">
+              <stuAct :pusaDep="courseArray"></stuAct>
+            </div>
+            <div class="allBox_right">
+              <div class="depth">
+                <span>参与课程</span>
+                <div>
+                  <el-progress :width="80" type="circle"
+                    :percentage="(courseJson.courseNum && studentCount) ? parseInt((courseJson.courseNum / studentCount * 100).toFixed(0)) : 0"
+                    :stroke-width="5" :format="format" color="#106BFF"></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>使用工具</span>
+                <div>
+                  <el-progress :width="80" type="circle"
+                    :percentage="(courseJson.toolNum && studentCount) ? parseInt((courseJson.toolNum / studentCount * 100).toFixed(0)) : 0"
+                    :stroke-width="5" :format="format" color="#106BFF"></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>协同合作</span>
+                <div>
+                  <el-progress :width="80" type="circle" :percentage="0" :stroke-width="5" :format="format"
+                    color="#106BFF"></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>互动交流</span>
+                <div>
+                  <el-progress :width="80" type="circle"
+                    :percentage="(courseJson.exchangeNum && studentCount) ? parseInt((courseJson.exchangeNum / studentCount * 100).toFixed(0)) : 0"
+                    :stroke-width="5" :format="format" color="#106BFF"></el-progress>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="allBox" style="height: calc(100% - 30px)" v-if="bType == 1">
             <div class="allBox_left">
-              <stuAct></stuAct>
+              <stuAct2 :pusaDep="scourseArray"></stuAct2>
             </div>
             <div class="allBox_right">
               <div class="depth">
                 <span>参与项目</span>
                 <div>
-                  <el-progress
-                    :width="80"
-                    type="circle"
-                    :percentage="80"
-                    :stroke-width="5"
-                    :format="format"
-                    color="#106BFF"
-                  ></el-progress>
+                  <el-progress :width="80" type="circle"
+                    :percentage="(scourseJson.courseNum && studentCount) ? parseInt((scourseJson.courseNum / studentCount * 100).toFixed(0)) : 0"
+                    :stroke-width="5" :format="format" color="#106BFF"></el-progress>
                 </div>
               </div>
               <div class="depth">
                 <span>使用工具</span>
                 <div>
-                  <el-progress
-                    :width="80"
-                    type="circle"
-                    :percentage="80"
-                    :stroke-width="5"
-                    :format="format"
-                    color="#106BFF"
-                  ></el-progress>
+                  <el-progress :width="80" type="circle"
+                    :percentage="(scourseJson.toolNum && studentCount) ? parseInt((scourseJson.toolNum / studentCount * 100).toFixed(0)) : 0"
+                    :stroke-width="5" :format="format" color="#106BFF"></el-progress>
                 </div>
               </div>
               <div class="depth">
                 <span>协同合作</span>
                 <div>
-                  <el-progress
-                    :width="80"
-                    type="circle"
-                    :percentage="80"
-                    :stroke-width="5"
-                    :format="format"
-                    color="#106BFF"
-                  ></el-progress>
+                  <el-progress :width="80" type="circle"
+                    :percentage="(scourseJson.gcourseNum && studentCount) ? parseInt((scourseJson.gcourseNum / studentCount * 100).toFixed(0)) : 0"
+                    :stroke-width="5" :format="format" color="#106BFF"></el-progress>
                 </div>
               </div>
               <div class="depth">
                 <span>互动交流</span>
                 <div>
-                  <el-progress
-                    :width="80"
-                    type="circle"
-                    :percentage="80"
-                    :stroke-width="5"
-                    :format="format"
-                    color="#106BFF"
-                  ></el-progress>
+                  <el-progress :width="80" type="circle" :percentage="0" :stroke-width="5" :format="format"
+                    color="#106BFF"></el-progress>
                 </div>
               </div>
             </div>
@@ -281,14 +260,12 @@
       <div class="top" style="border-radius: 5px">
         <div class="titleBox" style="justify-content: space-between">
           <div class="title">整体分布</div>
-          <div
-            style="
+          <div style="
               display: flex;
               flex-direction: row;
               flex-wrap: nowrap;
               align-items: center;
-            "
-          >
+            ">
             <el-select v-model="cType6" class="selectBox" style="width: 110px">
               <el-option label="全部" value="全部"></el-option>
             </el-select>
@@ -304,19 +281,18 @@
       <div class="bottom">
         <div class="titleBox" style="justify-content: space-between">
           <div class="title">活动参与</div>
-          <div
-            style="
+          <div style="
               display: flex;
               flex-direction: row;
               flex-wrap: nowrap;
               align-items: center;
-            "
-          >
-            <el-select v-model="cType8" class="selectBox" style="width: 110px">
+            ">
+            <!-- <el-select v-model="cType8" class="selectBox" style="width: 110px">
               <el-option label="全部年级" value="全部年级"></el-option>
-            </el-select>
-            <el-select v-model="cType9" class="selectBox" style="width: 110px">
-              <el-option label="全部班级" value="全部班级"></el-option>
+            </el-select> -->
+            <el-select v-model="cType9" class="selectBox" style="width: 110px" @change="classChange">
+              <el-option label="全部班级" value=""></el-option>
+              <el-option :label="item.name" :value="item.id" v-for="item in classList" :key="item.id"></el-option>
             </el-select>
           </div>
         </div>
@@ -324,16 +300,14 @@
           <div class="info_box">
             <div class="info blueBG">
               <span>人均参与课程数</span>
-              <!-- <span>{{ count }}</span> -->
-              <span>{{ 18 }}</span>
+              <span>{{ courseNum && uArray.length ? (courseNum / uArray.length).toFixed(0) : 0 }}</span>
             </div>
             <div class="info blueBG">
               <span>人均参与项目数</span>
-              <!-- <span>{{ weekCount }}</span> -->
-              <span>{{ 18 }}</span>
+              <span>{{ scourseNum && uArray.length ? (scourseNum / uArray.length).toFixed(0) : 0 }}</span>
             </div>
           </div>
-          <loginTime style="height: calc(100% - 72px)"></loginTime>
+          <loginTime style="height: calc(100% - 72px)" :uArray="uArray"></loginTime>
         </div>
       </div>
     </div>
@@ -346,6 +320,7 @@ import studentInfo from "./studentInfo";
 import studentInfo2 from "./studentInfo2";
 import loginTime from "./loginTime";
 import stuAct from "./stuAct";
+import stuAct2 from "./stuAct2";
 import toolUser from "./toolUser";
 import bar from "./bar";
 import courseNum from "./courseNum";
@@ -364,6 +339,7 @@ export default {
     studentInfo2,
     loginTime,
     stuAct,
+    stuAct2,
     toolUser,
     bar,
     courseNum,
@@ -386,14 +362,42 @@ export default {
       cType6: "全部",
       cType7: "在线时长",
       cType8: "全部年级",
-      cType9: "全部班级",
+      cType9: "",
       oType: false,
+      studentCount: 0,
+      loginCountMonthArray: [],
+      countLogin: 0,
+      loginCountYearArray: [],
+      loginTime: 0,
+      EloginTimeArray: [],
+      classList: [],
+      courseNum: 0,
+      scourseNum: 0,
+      uArray: [],
+      courseNumArray: [],
+      scourseNumArray: [],
+      userArray: [],
+      courseJson: {
+        courseNum: 0,
+        toolNum: 0,
+        exchangeNum: 0,
+      },
+      scourseJson: {
+        courseNum: 0,
+        toolNum: 0,
+        gcourseNum: 0,
+      },
+      courseArray: [],
+      scourseArray: []
     };
   },
   mounted() {
     this.getData();
   },
   methods: {
+    format(percentage) {
+      return percentage + '%';
+    },
     otherEchart() {
       this.oType = !this.oType;
     },
@@ -412,7 +416,137 @@ export default {
           let _grade = res.data[0]; //年级
           let _subject = res.data[1]; //学科
           let _course = res.data[2]; //课程
-
+          this.studentCount = res.data[3][0].count //学生总数
+
+          let _loginCount = res.data[4]; //统计半年的登录学生
+
+          let loginCountMonthArray = []
+          const date = new Date()
+          var Month = date.getMonth() + 1
+          var Year = date.getFullYear()
+          for (var i = Month; i > Month - 6; i--) {
+            if (i <= 0) {
+              loginCountMonthArray.push({
+                Year: Year - 1,
+                Month: 12 + i,
+                user: 0,
+              })
+            } else {
+              loginCountMonthArray.push({
+                Month: i,
+                Year: Year,
+                user: 0,
+              })
+            }
+          }
+          loginCountMonthArray = loginCountMonthArray.reverse()
+          for (var i = 0; i < _loginCount.length; i++) {
+            let _date = new Date(_loginCount[i].create_at)
+            var _month = _date.getMonth() + 1
+            var _year = _date.getFullYear()
+            for (var j = 0; j < loginCountMonthArray.length; j++) {
+              if (_month == loginCountMonthArray[j].Month && _year == loginCountMonthArray[j].Year) {
+                loginCountMonthArray[j].user++
+                break;
+              }
+            }
+          }
+          this.loginCountMonthArray = loginCountMonthArray
+
+          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,
+              })
+            }
+          }
+          loginCountYearArray = loginCountYearArray.reverse()
+          for (var i = 0; i < loginCountYear.length; i++) {
+            let _date = new Date(loginCountYear[i].create_at)
+            var _month = _date.getMonth() + 1
+            var _year = _date.getFullYear()
+            var _day = _date.getDay()
+            let dayArray = ['sun', 'mon', 'tue', 'wed', 'thur', 'fri', 'sat']
+            for (var j = 0; j < loginCountYearArray.length; j++) {
+              if (_month == loginCountYearArray[j].Month && _year == loginCountYearArray[j].Year) {
+                loginCountYearArray[j][dayArray[_day]]++
+                break;
+              }
+            }
+          }
+          console.log(loginCountYearArray);
+          this.loginCountYearArray = loginCountYearArray
+
+          this.loginTime = parseInt(res.data[7][0].time) / 60 / 60;
+          let _loginTimeArray = res.data[9] //在线时间
+          let _classList = res.data[8] //班级
+          this.classList = _classList
+
+          let _EloginTimeArray = []
+          for (let i = 0; i < _classList.length; i++) {
+            _EloginTimeArray.push({
+              id: _classList[i].id,
+              name: _classList[i].name,
+              loginTime: 0
+            })
+            for (let j = 0; j < _loginTimeArray.length; j++) {
+              const _user = _loginTimeArray[j];
+              if (_user.classid.indexOf(_classList[i].id) != -1) {
+                _EloginTimeArray[i].loginTime += Number(_user.time)
+              }
+            }
+            _EloginTimeArray[i].loginTime = (_EloginTimeArray[i].loginTime / 60 / 60).toFixed(2) //换算成小时
+          }
+          this.EloginTimeArray = _EloginTimeArray
+
+          this.courseNumArray = res.data[10] //参与课程数
+          this.scourseNumArray = res.data[11] //参与项目数
+          this.userArray = res.data[12] //参与项目数
+          this.classChange();
+          this.courseJson.courseNum = res.data[13][0].count //参与课程
+          this.courseJson.toolNum = res.data[14][0].count //使用工具
+          this.courseJson.exchangeNum = res.data[15][0].count //互动交流
+
+          this.scourseJson.courseNum = res.data[16][0].count //参与项目
+          this.scourseJson.toolNum = res.data[17][0].count //使用工具
+          this.scourseJson.gcourseNum = res.data[18][0].count //协同
+
+          this.courseArray = [
+            { value: (this.studentCount / this.studentCount * 100).toFixed(0), name: "学生总数" },
+            { value: this.courseJson.courseNum ? (this.courseJson.courseNum / this.studentCount * 100).toFixed(0) : 0, name: "参与课程" },
+            { value: this.courseJson.toolNum ? (this.courseJson.toolNum / this.studentCount * 100).toFixed(0) : 0, name: "使用工具" },
+            { value: this.courseJson.exchangeNum ? (this.courseJson.exchangeNum / this.studentCount * 100).toFixed(0) : 0, name: "互动交流" },
+          ]
+          this.scourseArray = [
+            { value: (this.studentCount / this.studentCount * 100).toFixed(0), name: "学生总数" },
+            { value: this.scourseJson.courseNum ? (this.scourseJson.courseNum / this.studentCount * 100).toFixed(0) : 0, name: "参与项目" },
+            { value: this.scourseJson.toolNum ? (this.scourseJson.toolNum / this.studentCount * 100).toFixed(0) : 0, name: "使用工具" },
+            { value: this.scourseJson.gcourseNum ? (this.scourseJson.gcourseNum / this.studentCount * 100).toFixed(0) : 0, name: "协同" },
+          ]
           this.$forceUpdate();
         })
         .catch((err) => {
@@ -420,6 +554,44 @@ export default {
           console.error(err);
         });
     },
+    classChange() {
+      let _courseNumArray = this.courseNumArray //参与课程数
+      let _scourseNumArray = this.scourseNumArray //参与项目数
+      let _userArray = this.userArray //参与项目数
+      let _courseNum = 0;
+      let _scourseNum = 0;
+      let uArray = []
+      for (var i = 0; i < _userArray.length; i++) {
+        if (_userArray[i].classid.indexOf(this.cType9) != -1 || !this.cType9) {
+          uArray.push(
+            { userid: _userArray[i].userid, name: _userArray[i].name, courseNum: 0, scourseNum: 0 }
+          )
+        }
+      }
+
+      for (let i = 0; i < _courseNumArray.length; i++) {
+        for (let j = 0; j < uArray.length; j++) {
+          if (_courseNumArray[i].userid == uArray[j].userid) {
+            uArray[j].courseNum++
+            _courseNum++
+            break;
+          }
+        }
+      }
+
+      for (let i = 0; i < _scourseNumArray.length; i++) {
+        for (let j = 0; j < uArray.length; j++) {
+          if (_scourseNumArray[i].userid == uArray[j].userid) {
+            uArray[j].scourseNum++
+            _scourseNum++
+            break;
+          }
+        }
+      }
+      this.courseNum = _courseNum
+      this.scourseNum = _scourseNum
+      this.uArray = uArray
+    },
   },
 };
 </script>
@@ -440,7 +612,7 @@ export default {
   height: 100%;
 }
 
-.left > .top {
+.left>.top {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -448,7 +620,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.left > .bottom {
+.left>.bottom {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -461,7 +633,7 @@ export default {
   margin: 0 20px;
 }
 
-.center > .top {
+.center>.top {
   width: 100%;
   height: calc(100% / 6 * 4 - 10px);
   background: #fff;
@@ -469,7 +641,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.center > .bottom {
+.center>.bottom {
   width: 100%;
   height: calc(100% / 6 * 2 - 10px);
   background: #fff;
@@ -481,7 +653,7 @@ export default {
   height: 100%;
 }
 
-.right > .top {
+.right>.top {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -489,7 +661,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.right > .bottom {
+.right>.bottom {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -521,11 +693,9 @@ export default {
 }
 
 .greenBG {
-  background: linear-gradient(
-    180deg,
-    rgb(211, 246, 228, 0.2) 0%,
-    rgb(23, 196, 105, 0.3) 100%
-  );
+  background: linear-gradient(180deg,
+      rgb(211, 246, 228, 0.2) 0%,
+      rgb(23, 196, 105, 0.3) 100%);
 }
 
 .depth_box {
@@ -546,25 +716,25 @@ export default {
   justify-content: center;
 }
 
-.depth > span:nth-child(1) {
+.depth>span:nth-child(1) {
   font-size: 14px;
   font-weight: 700;
   margin: 0 0 10px;
 }
-.depth > div:nth-child(1) {
-}
+
+.depth>div:nth-child(1) {}
 
 .selectBox {
   width: 80px;
   margin-left: 10px;
 }
 
-.selectBox >>> .el-input__inner {
+.selectBox>>>.el-input__inner {
   height: 30px;
   line-height: 30px;
 }
 
-.selectBox >>> .el-input__icon {
+.selectBox>>>.el-input__icon {
   line-height: 30px;
 }
 
@@ -580,6 +750,7 @@ export default {
   padding: 0 10px;
   margin: 0 10px;
 }
+
 .teaMiddle {
   width: calc(100% / 3 - 10px);
 }
@@ -592,7 +763,7 @@ export default {
   margin: 0 0 0 15px;
 }
 
-.timeDiv > div {
+.timeDiv>div {
   margin-right: 10px;
   cursor: pointer;
 }
@@ -602,6 +773,7 @@ export default {
   border-bottom: 2px solid #1684fc;
   box-sizing: border-box;
 }
+
 .otherCss {
   display: flex;
   flex-direction: row;
@@ -609,16 +781,19 @@ export default {
   align-items: center;
   justify-content: flex-end;
 }
+
 .otherImg {
   width: 20px;
   height: 20px;
   margin: 0 10px;
   cursor: pointer;
 }
-.otherImg > img {
+
+.otherImg>img {
   width: 100%;
   height: 100%;
 }
+
 .allBox {
   width: 100%;
   height: 100%;
@@ -627,10 +802,12 @@ export default {
   flex-wrap: nowrap;
   align-items: center;
 }
+
 .allBox_left {
   width: 30%;
   height: 100%;
 }
+
 .allBox_right {
   display: flex;
   flex-wrap: wrap;
@@ -649,13 +826,13 @@ export default {
   justify-content: center;
 }
 
-.depth > span:nth-child(1) {
+.depth>span:nth-child(1) {
   font-size: 14px;
   font-weight: 700;
   margin: 0 0 10px;
 }
-.depth > div:nth-child(1) {
-}
+
+.depth>div:nth-child(1) {}
 
 .info_box {
   display: flex;
@@ -666,9 +843,9 @@ export default {
   margin: 0 auto;
 }
 
-.info_box > .info2,
-.info_box > .info3,
-.info_box > .info {
+.info_box>.info2,
+.info_box>.info3,
+.info_box>.info {
   width: calc(50% - 10px);
   display: flex;
   flex-direction: row;
@@ -682,19 +859,19 @@ export default {
   border-radius: 5px;
 }
 
-.info_box > .info2 {
+.info_box>.info2 {
   width: calc(100% / 4 - 10px);
   /* align-items: flex-end; */
 }
 
-.info_box > .info3 {
+.info_box>.info3 {
   width: 100%;
   margin-bottom: 5px;
 }
 
-.info_box > .info2 > span:nth-child(1),
-.info_box > .info3 > span:nth-child(1),
-.info_box > .info > span:nth-child(1) {
+.info_box>.info2>span:nth-child(1),
+.info_box>.info3>span:nth-child(1),
+.info_box>.info>span:nth-child(1) {
   font-size: 14px;
   /* margin: 0 0 0 20px; */
   color: #565e6a;
@@ -703,9 +880,9 @@ export default {
   word-break: break-all;
 }
 
-.info_box > .info2 > span:nth-child(2),
-.info_box > .info3 > span:nth-child(2),
-.info_box > .info > span:nth-child(2) {
+.info_box>.info2>span:nth-child(2),
+.info_box>.info3>span:nth-child(2),
+.info_box>.info>span:nth-child(2) {
   font-size: 24px;
   /* font-weight: 700; */
 }

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

@@ -1,55 +1,79 @@
 <template>
   <div class="data_body">
     <div style="width: 100%; height: 100%">
-      <div
-        id="charts_canvas"
-        class="echart"
-        style="width: 100%; height: 100%"
-      ></div>
+      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    monthArray: {
+      type: Array,
+      default: []
+    },
+  },
   data() {
     return {
       chartObj: null,
       ooption: {
         xdata: [],
-        course: [],
+        teacher: [],
+        student: [],
       },
       option: {
+        // title: {
+        //     text: '登录频次',
+        //     textStyle:{
+        //         fontSize: 12,
+        //     },
+        //     padding: [0, 0, 0, 10]
+        // },
         tooltip: {
-          trigger: "item",
+          trigger: 'axis'
+        },
+        // legend: {
+        //     data: ['老师', '学生'],
+        //     right: '10'
+        // },
+        grid: {
+          top: '30',
+          left: '5%',
+          right: '5%',
+          bottom: '5%',
+          containLabel: true
         },
         xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          type: 'category',
+          boundaryGap: true,
+          // data: ['1月', '2月', '3月', '4月', '5月', '6月']
+          data: []
         },
         yAxis: {
-          type: "value",
-        },
-        grid: {
-          top: "15%",
-          left: "5%",
-          right: "5%",
-          bottom: "5%",
-          containLabel: true,
+          type: 'value',
+          minInterval: 1
         },
         series: [
           {
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
-            type: "line",
+            // name: '老师',
+            type: 'line',
             areaStyle: {},
-          },
-        ],
+            data: [],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return "#106bff";
+                },
+              },
+            },
+          }
+        ]
       },
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -57,17 +81,49 @@ export default {
       //然后异步执行echarts的初始化函数
       newPromise.then(() => {
         const chartObj = this.$echarts.init(
+          //劳动课程
           this.$el.querySelector("#charts_canvas")
         );
+        this.option.xAxis.data = option.xdata;
+        this.option.series[0].data = option.user;
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
+    setJson(array) {
+      this.ooption = {
+        xdata: [],
+        user: [],
+      }
+      let _array = array
+      for (var i = 0; i < _array.length; i++) {
+        this.ooption.xdata.push(_array[i].Month + '月')
+        this.ooption.user.push(_array[i].user)
+      }
+
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.xAxis.data = this.ooption.xdata;
+        this.option.series[0].data = this.ooption.user;
+        this.chartObj.setOption(this.option);
+      }
+    }
+  },
+  watch: {
+    monthArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setJson(newValue)
+        this.$forceUpdate();
+      },
+    },
   },
-  watch: {},
   mounted() {
-    this.setChart();
+    this.setJson(this.monthArray)
+
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
@@ -91,4 +147,4 @@ export default {
   width: 95%;
   background: #fff;
 }
-</style>
+</style>

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

@@ -1,17 +1,18 @@
 <template>
-  <div class="data_body" style="height: calc(100% - 100px)">
+  <div class="data_body">
     <div style="width: 100%; height: 100%">
-      <div
-        id="charts_canvas"
-        class="echart"
-        style="width: 100%; height: 100%"
-      ></div>
+      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    uArray: {
+      type: Array,
+    },
+  },
   data() {
     return {
       chartObj: null,
@@ -19,38 +20,45 @@ export default {
         data: [],
       },
       option: {
+        xAxis: {
+          name: "任务数量",
+          nameTextStyle: {
+            padding: [25, 0, 0, 0],
+            verticalAlign: 'top'
+          },
+          nameGap: -45,
+          minInterval: 1
+        },
+        grid: {
+          top: "15%",
+          left: "10%",
+          right: "10%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        yAxis: {
+          name: "作业提交数量",
+          minInterval: 1
+        },
+        color: ["#3681FC"],
         tooltip: {
-          trigger: "item",
+          formatter: function (params) {
+            return (
+              params.marker +
+              params.data[2] +
+              "<br/>" +
+              "课程数量：" +
+              params.data[0] +
+              "<br/>" +
+              "项目数量：" +
+              params.data[1]
+            );
+          },
         },
-        xAxis: {},
-        yAxis: {},
         series: [
           {
-            symbolSize: 20,
-            data: [
-              [10.0, 8.04],
-              [8.07, 6.95],
-              [13.0, 7.58],
-              [9.05, 8.81],
-              [11.0, 8.33],
-              [14.0, 7.66],
-              [13.4, 6.81],
-              [10.0, 6.33],
-              [14.0, 8.96],
-              [12.5, 6.82],
-              [9.15, 7.2],
-              [11.5, 7.2],
-              [3.03, 4.23],
-              [12.2, 7.83],
-              [2.02, 4.47],
-              [1.05, 3.33],
-              [4.05, 4.96],
-              [6.03, 7.24],
-              [12.0, 6.26],
-              [12.0, 8.84],
-              [7.08, 5.82],
-              [5.02, 5.68],
-            ],
+            symbolSize: 8,
+            data: [],
             type: "scatter",
           },
         ],
@@ -58,7 +66,7 @@ export default {
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -69,23 +77,47 @@ export default {
           //劳动课程
           this.$el.querySelector("#charts_canvas")
         );
+        this.option.series[0].data = this.ooption.data;
 
-        chartObj.off("click");
-        let _this = this;
-        chartObj.on("click", function (param) {
-          console.log(param); //X轴的值
-          _this.$emit("openCourse", param.data[3]);
-        });
+        // chartObj.off('click')
+        // let _this = this
+        // chartObj.on('click', function (param) {
+        //   console.log(param);  //X轴的值
+        //   _this.$emit('openCourse', param.data[3])
+        // });
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
+    setArray(array) {
+      this.ooption = {
+        data: [],
+      };
+      for (var i = 0; i < array.length; i++) {
+        this.ooption.data.push([array[i].courseNum, array[i].scourseNum, array[i].name]);
+      }
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.series[0].data = this.ooption.data;
+        this.chartObj.setOption(this.option);
+      }
+      this.$forceUpdate();
+    },
   },
   watch: {
+    uArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue);
+        this.$forceUpdate();
+      },
+    },
   },
   mounted() {
-    this.setChart();
+    this.setArray(this.uArray);
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

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

@@ -12,6 +12,11 @@
 
 <script>
 export default {
+  props: {
+    pusaDep: {
+      type: Array,
+    },
+  },
   data() {
     return {
       chartObj: null,
@@ -21,14 +26,14 @@ export default {
           formatter: "{b} : {c}%",
         },
         // legend: {
-        //   data: ["教学评一体化课程", "已评价课程", "已提交作业课程", "设置评价课程", "课程总数"],
+        //   data: ["评价", "授课", "创建", "登录"],
         // },
         series: [
           {
             type: "funnel",
-            left: "10%",
-            top: 60,
-            bottom: 20,
+            left: "5%",
+            top: 10,
+            bottom: 0,
             width: "95%",
             min: 0,
             max: 100,
@@ -51,11 +56,10 @@ export default {
               borderWidth: 1,
             },
             data: [
-              { value: 20, name: "教学评一体化课程" },
-              { value: 40, name: "已评价课程" },
-              { value: 60, name: "已提交作业课程" },
-              { value: 80, name: "设置评价课程" },
-              { value: 100, name: "课程总数" },
+              // { value: 20, name: "登录" },
+              // { value: 40, name: "创建" },
+              // { value: 60, name: "授课" },
+              // { value: 80, name: "评价" },
             ],
           },
         ],
@@ -63,7 +67,7 @@ export default {
     };
   },
   methods: {
-    setChart() {
+    setChart(array) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -74,16 +78,34 @@ export default {
           this.$el.querySelector("#charts_canvas")
         );
         // 初始化雷达图
+        this.option.series[0].data = array;
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
+    setArray(array){
+        let _array = array;
+
+        if (!this.chartObj) {
+          this.setChart(_array);
+        } else {
+          this.option.series[0].data = _array;
+          this.chartObj.setOption(this.option);
+        }
+        this.$forceUpdate();
+    },
   },
   watch: {
-    
+    pusaDep: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue)
+      },
+    },
   },
   mounted() {
-    this.setChart();
+    this.setArray(this.pusaDep)
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
@@ -91,6 +113,9 @@ export default {
       }
     });
   },
+  created() {
+    this.setChart();
+  },
 };
 </script>
 

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

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

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

@@ -1,275 +1,117 @@
 <template>
   <div class="data_body">
     <div style="width: 100%; height: 100%">
-      <div
-        id="charts_canvas"
-        class="echart"
-        style="width: 100%; height: 100%"
-      ></div>
+      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    yearArray: {
+      type: Array,
+    },
+  },
   data() {
     return {
       chartObj: null,
+      ooption: {
+        xdata: [],
+        sdata: [],
+      },
       option: {
+        // title: {
+        //   text: '登录频次',
+        //   textStyle: {
+        //     fontSize: 12,
+        //   },
+        //   padding: [10, 0, 0, 10]
+        // },
         tooltip: {
-          position: "top",
+          position: 'top'
         },
         grid: {
-          height: "50%",
-          top: "10%",
+          top: '50',
+          left: '5%',
+          right: '5%',
+          bottom: '5%',
+          containLabel: true
         },
         xAxis: {
-          type: "category",
-          data: [
-            "12a",
-            "1a",
-            "2a",
-            "3a",
-            "4a",
-            "5a",
-            "6a",
-            "7a",
-            "8a",
-            "9a",
-            "10a",
-            "11a",
-            "12p",
-            "1p",
-            "2p",
-            "3p",
-            "4p",
-            "5p",
-            "6p",
-            "7p",
-            "8p",
-            "9p",
-            "10p",
-            "11p",
-          ],
+          type: 'category',
+          // data: [
+          //     '1月', '2月', '3月', '4月', '5月', '6月', '7月',
+          //     '8月', '9月', '10月', '11月', '12月'
+          // ],
+          data: [],
           splitArea: {
-            show: true,
+            show: true
           },
+          axisLabel: {
+            formatter: function (value) {
+              console.log(value);
+              var ret = "";//拼接加\n返回的类目项  
+              var maxLength = 2;//每项显示文字个数  
+              var valLength = value.length;//X轴类目项的文字个数  
+              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
+              if (rowN > 1)//如果类目项的文字大于5,  
+              {
+                for (var i = 0; i < rowN; i++) {
+                  var temp = "";//每次截取的字符串  
+                  var start = i * maxLength;//开始截取的位置  
+                  var end = start + maxLength;//结束截取的位置  
+                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
+                  temp = value.substring(start, end) + "\n";
+                  ret += temp; //凭借最终的字符串  
+                }
+                return ret;
+              }
+              else {
+                return value;
+              }
+            }
+          }
         },
         yAxis: {
-          type: "category",
+          type: 'category',
           data: [
-            "星期一",
-            "星期二",
-            "星期三",
-            "星期四",
-            "星期五",
-            "星期六",
-            "星期日",
+            '星期天', '星期一', '星期二', '星期三',
+            '星期四', '星期五', '星期六',
           ],
           splitArea: {
-            show: true,
+            show: true
           },
         },
         visualMap: {
           min: 0,
           max: 10,
           calculable: true,
-          orient: "horizontal",
-          left: "center",
-          bottom: "15%",
+          orient: 'horizontal',
+          right: '10',
+          top: '0%'
         },
         series: [
           {
-            name: "Punch Card",
-            type: "heatmap",
-            data: [
-              [0, 0, 5],
-              [0, 1, 1],
-              [0, 2, 0],
-              [0, 3, 0],
-              [0, 4, 0],
-              [0, 5, 0],
-              [0, 6, 0],
-              [0, 7, 0],
-              [0, 8, 0],
-              [0, 9, 0],
-              [0, 10, 0],
-              [0, 11, 2],
-              [0, 12, 4],
-              [0, 13, 1],
-              [0, 14, 1],
-              [0, 15, 3],
-              [0, 16, 4],
-              [0, 17, 6],
-              [0, 18, 4],
-              [0, 19, 4],
-              [0, 20, 3],
-              [0, 21, 3],
-              [0, 22, 2],
-              [0, 23, 5],
-              [1, 0, 7],
-              [1, 1, 0],
-              [1, 2, 0],
-              [1, 3, 0],
-              [1, 4, 0],
-              [1, 5, 0],
-              [1, 6, 0],
-              [1, 7, 0],
-              [1, 8, 0],
-              [1, 9, 0],
-              [1, 10, 5],
-              [1, 11, 2],
-              [1, 12, 2],
-              [1, 13, 6],
-              [1, 14, 9],
-              [1, 15, 11],
-              [1, 16, 6],
-              [1, 17, 7],
-              [1, 18, 8],
-              [1, 19, 12],
-              [1, 20, 5],
-              [1, 21, 5],
-              [1, 22, 7],
-              [1, 23, 2],
-              [2, 0, 1],
-              [2, 1, 1],
-              [2, 2, 0],
-              [2, 3, 0],
-              [2, 4, 0],
-              [2, 5, 0],
-              [2, 6, 0],
-              [2, 7, 0],
-              [2, 8, 0],
-              [2, 9, 0],
-              [2, 10, 3],
-              [2, 11, 2],
-              [2, 12, 1],
-              [2, 13, 9],
-              [2, 14, 8],
-              [2, 15, 10],
-              [2, 16, 6],
-              [2, 17, 5],
-              [2, 18, 5],
-              [2, 19, 5],
-              [2, 20, 7],
-              [2, 21, 4],
-              [2, 22, 2],
-              [2, 23, 4],
-              [3, 0, 7],
-              [3, 1, 3],
-              [3, 2, 0],
-              [3, 3, 0],
-              [3, 4, 0],
-              [3, 5, 0],
-              [3, 6, 0],
-              [3, 7, 0],
-              [3, 8, 1],
-              [3, 9, 0],
-              [3, 10, 5],
-              [3, 11, 4],
-              [3, 12, 7],
-              [3, 13, 14],
-              [3, 14, 13],
-              [3, 15, 12],
-              [3, 16, 9],
-              [3, 17, 5],
-              [3, 18, 5],
-              [3, 19, 10],
-              [3, 20, 6],
-              [3, 21, 4],
-              [3, 22, 4],
-              [3, 23, 1],
-              [4, 0, 1],
-              [4, 1, 3],
-              [4, 2, 0],
-              [4, 3, 0],
-              [4, 4, 0],
-              [4, 5, 1],
-              [4, 6, 0],
-              [4, 7, 0],
-              [4, 8, 0],
-              [4, 9, 2],
-              [4, 10, 4],
-              [4, 11, 4],
-              [4, 12, 2],
-              [4, 13, 4],
-              [4, 14, 4],
-              [4, 15, 14],
-              [4, 16, 12],
-              [4, 17, 1],
-              [4, 18, 8],
-              [4, 19, 5],
-              [4, 20, 3],
-              [4, 21, 7],
-              [4, 22, 3],
-              [4, 23, 0],
-              [5, 0, 2],
-              [5, 1, 1],
-              [5, 2, 0],
-              [5, 3, 3],
-              [5, 4, 0],
-              [5, 5, 0],
-              [5, 6, 0],
-              [5, 7, 0],
-              [5, 8, 2],
-              [5, 9, 0],
-              [5, 10, 4],
-              [5, 11, 1],
-              [5, 12, 5],
-              [5, 13, 10],
-              [5, 14, 5],
-              [5, 15, 7],
-              [5, 16, 11],
-              [5, 17, 6],
-              [5, 18, 0],
-              [5, 19, 5],
-              [5, 20, 3],
-              [5, 21, 4],
-              [5, 22, 2],
-              [5, 23, 0],
-              [6, 0, 1],
-              [6, 1, 0],
-              [6, 2, 0],
-              [6, 3, 0],
-              [6, 4, 0],
-              [6, 5, 0],
-              [6, 6, 0],
-              [6, 7, 0],
-              [6, 8, 0],
-              [6, 9, 0],
-              [6, 10, 1],
-              [6, 11, 0],
-              [6, 12, 2],
-              [6, 13, 1],
-              [6, 14, 3],
-              [6, 15, 4],
-              [6, 16, 0],
-              [6, 17, 0],
-              [6, 18, 0],
-              [6, 19, 0],
-              [6, 20, 1],
-              [6, 21, 2],
-              [6, 22, 2],
-              [6, 23, 6],
-            ].map(function (item) {
-              return [item[1], item[0], item[2] || "-"];
-            }),
+            name: '',
+            type: 'heatmap',
+            data: [],
             label: {
-              show: true,
+              show: true
             },
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
-            },
-          },
-        ],
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
       },
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -277,18 +119,70 @@ export default {
       //然后异步执行echarts的初始化函数
       newPromise.then(() => {
         const chartObj = this.$echarts.init(
+          //劳动课程
           this.$el.querySelector("#charts_canvas")
         );
+
+        this.option.xAxis.data = option.xdata;
+        this.option.series[0].data = option.sdata;
+        this.option.visualMap.max = option.max ? option.max : 0;
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
+    setJson(array) {
+      this.ooption = {
+        xdata: [],
+        sdata: [],
+        max: 0
+      }
+      let _array = array
+      let max = []
+      for (var i = 0; i < _array.length; i++) {
+        this.ooption.xdata.push(_array[i].Month + '月')
+        this.ooption.sdata.push([i, 0, _array[i].sun])
+        this.ooption.sdata.push([i, 1, _array[i].mon])
+        this.ooption.sdata.push([i, 2, _array[i].tue])
+        this.ooption.sdata.push([i, 3, _array[i].wed])
+        this.ooption.sdata.push([i, 4, _array[i].thur])
+        this.ooption.sdata.push([i, 5, _array[i].fri])
+        this.ooption.sdata.push([i, 6, _array[i].sat])
+        // let _data = [_array[i].Month-1,] //[月份，星期，值]
+        max.push(_array[i].sun)
+        max.push(_array[i].mon)
+        max.push(_array[i].tue)
+        max.push(_array[i].wed)
+        max.push(_array[i].thur)
+        max.push(_array[i].fri)
+        max.push(_array[i].sat)
+      }
+      this.ooption.max = max.sort(function (a, b) {
+        return b - a;
+      })[0];
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.xAxis.data = this.ooption.xdata;
+        this.option.series[0].data = this.ooption.sdata;
+        this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
+        this.chartObj.setOption(this.option);
+      }
+    }
+  },
+  watch: {
+    yearArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setJson(newValue)
+        this.$forceUpdate();
+      },
+    },
   },
-  watch: {},
   mounted() {
-    this.setChart();
-    var _this = this;
+    this.setJson(this.yearArray)
+
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
         _this.chartObj.resize();
@@ -301,14 +195,12 @@ export default {
 <style scoped>
 .data_body {
   height: 100%;
-  /* display: flex; */
   position: relative;
   border-radius: 5px;
-  /* border: 1px solid #eee; */
   margin: 0 auto;
   box-sizing: border-box;
   padding: 0;
   width: 95%;
   background: #fff;
 }
-</style>
+</style>

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

@@ -36,6 +36,7 @@ export default {
         },
         yAxis: {
           type: "value",
+          minInterval: 1
         },
         grid: {
           top: "30",