新增教师行为数据功能

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

@@ -12,14 +12,35 @@
 
 <script>
 export default {
+  props: {
+    courseArray: {
+      type: Array,
+    },
+  },
   data() {
     return {
       chartObj: null,
-      option: {},
+      ooption: {
+        hours: [],
+        days: [],
+        data: [],
+      },
+      option: {
+        tooltip: {
+          position: "top",
+          formatter: function (params) {
+            // console.log(params);
+            return params.marker + params.name + " " + params.data[1]; //params.seriesName + '<br>' + params.
+          },
+        },
+        title: [],
+        singleAxis: [],
+        series: [],
+      },
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -30,31 +51,34 @@ export default {
           this.$el.querySelector("#charts_canvas")
         );
         // 初始化雷达图
-        const hours = [
-          "语文",
-          "数学",
-          "英语",
-          "科学",
-          "体育",
-          "音乐",
-          "美术",
-          "劳动",
-          "其他",
-        ];
+        const hours = option.hours;
+        // const hours = [
+        //   "语文",
+        //   "数学",
+        //   "英语",
+        //   "科学",
+        //   "体育",
+        //   "音乐",
+        //   "美术",
+        //   "劳动",
+        //   "其他",
+        // ];
         // prettier-ignore
-        const days = [
-            '一年级', '二年级', '三年级',
-            '四年级', '五年级', '六年级'
-        ];
+        const days = option.days
+        // const days = [
+        //     '一年级', '二年级', '三年级',
+        //     '四年级', '五年级', '六年级'
+        // ];
         // prettier-ignore
-        const data = [[0,0,3],[0,2,4],[0,3,8],[0,6,6],[0,8,4],[1,0,3],[1,2,4],[1,3,8],[1,6,6],[1,8,4],[2,1,13],[2,3,6],[2,4,3],[2,6,6],[2,8,4],[3,3,6],[3,4,3],[3,6,6],[3,7,4],[4,0,10],[4,2,13],[4,3,6],[4,4,3],[4,6,6],[4,7,3],[5,2,4],[5,3,6],[5,4,3],[5,5,10],[5,6,10],[5,7,3]];
+        const data = option.data
+        // const data = [[0,0,3],[0,2,4],[0,3,8],[0,6,6],[0,8,4],[1,0,3],[1,2,4],[1,3,8],[1,6,6],[1,8,4],[2,1,13],[2,3,6],[2,4,3],[2,6,6],[2,8,4],[3,3,6],[3,4,3],[3,6,6],[3,7,4],[4,0,10],[4,2,13],[4,3,6],[4,4,3],[4,6,6],[4,7,3],[5,2,4],[5,3,6],[5,4,3],[5,5,10],[5,6,10],[5,7,3]];
         const title = [];
         const singleAxis = [];
         const series = [];
         days.forEach(function (day, idx) {
           title.push({
             textBaseline: "middle",
-            top: ((idx + 0.5) * 90) / 6 + "%",
+            top: ((idx + 0.5) * 90) / days.length + "%",
             text: day,
             textStyle: {
               fontSize: 12,
@@ -65,8 +89,8 @@ export default {
             type: "category",
             boundaryGap: false,
             data: hours,
-            top: (idx * 90) / 6 + 5 + "%",
-            height: 90 / 6 - 10 + "%",
+            top: (idx * 90) / days.length + 5 + "%",
+            height: 90 / days.length - 10 + "%",
           });
           series.push({
             singleAxisIndex: idx,
@@ -74,35 +98,108 @@ export default {
             type: "scatter",
             data: [],
             symbolSize: function (dataItem) {
-              return dataItem[1] * 4;
+              return dataItem[1] * 3;
             },
           });
         });
         data.forEach(function (dataItem) {
           series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
         });
-        this.option = {
-          tooltip: {
-            position: "top",
-          },
-          title: title,
-          singleAxis: singleAxis,
-          series: series,
-          grid: {
-            left: "3",
-            right: "3",
-            top: "3",
-            bottom: 0,
-            containLabel: true,
-          },
-        };
+        this.option.title = title;
+        this.option.singleAxis = singleAxis;
+        this.option.series = series;
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
+    setJson(array) {
+      if (array != undefined && array.length > 0) {
+        this.ooption = {
+          hours: [],
+          days: [],
+          data: [],
+        };
+        let _grade = [];
+        let _subject = [];
+        let data = [];
+
+        array.forEach(function (item, idx) {
+          _grade.push(item.name);
+        });
+
+        array[0].subject.forEach(function (item, idx) {
+          _subject.push(item.name);
+        });
+        array.forEach(function (item, idx) {
+          item.subject.forEach(function (item2, idx2) {
+            data.push([idx, idx2, item2.course]);
+          });
+        });
+        this.ooption.hours = _subject;
+        this.ooption.days = _grade;
+        this.ooption.data = data;
+        if (!this.chartObj) {
+          this.setChart(this.ooption);
+        } else {
+          const hours = this.ooption.hours;
+          // prettier-ignore
+          const days = this.ooption.days;
+          // prettier-ignore
+          const data = this.ooption.data;
+          const title = [];
+          const singleAxis = [];
+          const series = [];
+          days.forEach(function (day, idx) {
+            title.push({
+              textBaseline: "middle",
+              top: ((idx + 0.5) * 90) / days.length + "%",
+              text: day,
+              textStyle: {
+                fontSize: 12,
+              },
+            });
+            singleAxis.push({
+              left: 70,
+              type: "category",
+              boundaryGap: false,
+              data: hours,
+              top: (idx * 90) / days.length + 5 + "%",
+              height: 90 / days.length - 10 + "%",
+            });
+            series.push({
+              singleAxisIndex: idx,
+              coordinateSystem: "singleAxis",
+              type: "scatter",
+              data: [],
+              symbolSize: function (dataItem) {
+                return dataItem[1] * 3;
+              },
+            });
+          });
+          data.forEach(function (dataItem) {
+            series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
+          });
+
+          this.option.title = title;
+          this.option.singleAxis = singleAxis;
+          this.option.series = series;
+          this.chartObj.setOption(this.option);
+        }
+      }
+    },
+  },
+  watch: {
+    courseArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setJson(newValue);
+        this.$forceUpdate();
+      },
+    },
   },
   mounted() {
-    this.setChart(this.option);
+    this.setJson(this.courseArray);
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
@@ -110,9 +207,6 @@ export default {
       }
     });
   },
-  created() {
-    this.setChart();
-  },
 };
 </script>
 

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

@@ -51,24 +51,24 @@
               style="align-items: flex-end; width: calc(100% / 4 - 10px)"
             >
               <div>上传课程总数</div>
-              <div>12546</div>
+              <div>{{ courseCount }}</div>
             </div>
             <div
               class="teaLeft teaRigth"
               style="align-items: flex-end; width: calc(100% / 4 - 10px)"
             >
               <div>各年级课程上传平均数</div>
-              <div>40</div>
+              <div>{{ gradeCourse.toFixed(0) }}</div>
             </div>
             <div
               class="teaLeft"
               style="align-items: flex-end; width: calc(100% / 4 - 10px)"
             >
               <div>各学科课程上传平均数</div>
-              <div>20</div>
+              <div>{{ subjectCourse.toFixed(0) }}</div>
             </div>
           </div>
-          <TeaData style="height: calc(100% - 62px)"></TeaData>
+          <TeaData style="height: calc(100% - 62px)" :courseArray="courseArray"></TeaData>
         </div>
       </div>
       <div class="bottom">
@@ -246,8 +246,12 @@ export default {
       count: 0,
       loginCount: 0,
       loginTime: 0,
+      courseCount: 0,
       loginCountMonthArray:[],
-      weekCount:0
+      weekCount:0,
+      gradeCourse: 0,
+      subjectCourse: 0,
+      courseArray: []
     };
   },
   mounted() {
@@ -268,6 +272,7 @@ export default {
           this.count = res.data[0][0].count;
           this.loginCount = res.data[1][0].loginCount;
           this.loginTime = parseInt(res.data[2][0].time) / 60 / 60;
+          this.courseCount = res.data[5][0].courseCount
 
 
 
@@ -308,6 +313,61 @@ export default {
 
           this.loginCountMonthArray = loginCountMonthArray;
           this.weekCount = res.data[4][0].count
+
+          let _grade = res.data[6] //年级
+          let _subject = res.data[7]  //学科
+          let _course = res.data[8] //课程
+          let _gradeCourse = 0 //各年级上传课程
+          let _subjectCourse = 0 //各学科上传课程
+          let _courseArray = []
+          _subject.push({ name: '其他' })
+
+          for (var i = 0; i < _grade.length; i++) {
+            _courseArray.push({
+              name: _grade[i].name,
+              id: _grade[i].id,
+              courseid: [],
+              subject: [],
+            })
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _grade[i].id) {
+                _gradeCourse++
+                if (_courseArray[i].courseid.indexOf(_course[z].courseid) === -1) {
+                  _courseArray[i].courseid.push(_course[z].courseid)
+                }
+              }
+
+            }
+            for (var j = 0; j < _subject.length; j++) {
+              _courseArray[i].subject.push({
+                name: _subject[j].name,
+                id: _subject[j].id,
+                course: 0
+              })
+              for (var z = 0; z < _course.length; z++) {
+                if (_course[z].typeid == _subject[j].id && _courseArray[i].courseid.indexOf(_course[z].courseid) !== -1) {
+                  _courseArray[i].subject[j].course++
+                }
+              }
+            }
+            let sum = 0
+            for (var j = 0; j < _courseArray[i].subject.length - 1; j++) {
+              sum += _courseArray[i].subject[j].course
+            }
+            _courseArray[i].subject[_courseArray[i].subject.length - 1].course = (_courseArray[i].courseid.length - sum) < 0 ? 0 : _courseArray[i].courseid.length - sum 
+          }
+          for (var j = 0; j < _subject.length; j++) {
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _subject[j].id) {
+                _subjectCourse++
+              }
+            }
+          }
+          this.gradeCourse = _gradeCourse / _grade.length
+          this.subjectCourse = _subjectCourse / _subject.length
+          this.courseArray = _courseArray
+
+          this.$forceUpdate();
         })
         .catch((err) => {
           this.isLoading = false;