update

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

@@ -50,7 +50,7 @@
     <div class="center">
       <div class="top">
         <div class="titleBox">
-          <div class="title">教师综合评价</div>
+          <div class="title">教师行为数据</div>
         </div>
         <div class="dataBox">
           <div class="info_box" style="width: 95%">
@@ -60,18 +60,18 @@
             </div>
             <div class="info2 greenBG">
               <span>各年级平均课程数</span>
-              <span>15620</span>
+              <span>{{ gradeCourse.toFixed(0) }}</span>
             </div>
             <div class="info2 blueBG">
-              <span>各学科平均课程</span>
-              <span>15620</span>
+              <span>各学科平均课程数</span>
+              <span>{{ subjectCourse.toFixed(0) }}</span>
             </div>
             <div class="info2 greenBG">
               <span>教师人均课程数</span>
               <span>{{ (courseCount / teacherCount).toFixed(0) }}</span>
             </div>
           </div>
-          <teacherInfo style="height: calc(100% - 70px)"></teacherInfo>
+          <teacherInfo style="height: calc(100% - 70px)" :courseArray="courseArray"></teacherInfo>
         </div>
       </div>
       <div class="bottom">
@@ -169,7 +169,7 @@
               <courseInfo></courseInfo>
             </div>
           </div>
-          <cateRank style="height: calc(100% - 200px); overflow: auto"></cateRank>
+          <cateRank style="height: calc(100% - 50% - 10px); overflow: auto"></cateRank>
         </div>
       </div>
       <div class="bottom">
@@ -215,7 +215,10 @@ export default {
       teacherCount: 0,
       loginCountMonthArray: [],
       weekCount: 0,
-      loginCountYearArray:[],
+      loginCountYearArray: [],
+      gradeCourse: 0,
+      subjectCourse: 0,
+      courseArray: []
     }
   },
   mounted() {
@@ -336,6 +339,62 @@ export default {
           }
           console.log(loginCountYearArray);
           this.loginCountYearArray = loginCountYearArray
+
+          let _grade = res.data[11] //年级
+          let _subject = res.data[12]  //学科
+          let _course = res.data[13] //课程
+          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++
+              }
+            }
+          }
+          console.log(_courseArray);
+          this.gradeCourse = _gradeCourse / _grade.length
+          this.subjectCourse = _subjectCourse / _subject.length
+          this.courseArray = _courseArray
+
+          this.$forceUpdate();
         })
         .catch((err) => {
           this.isLoading = false;

src/components/pages/dataBoard/school/teacherInfo/index.vue

@@ -8,16 +8,27 @@
   
 <script>
 export default {
+    props: {
+        courseArray: {
+            type: Array,
+        },
+    },
     data() {
         return {
             chartObj: null,
             ooption: {
-                xdata: [],
-                sdata: [],
+                hours: [],
+                days: [],
+                data: [],
             },
             option: {
                 tooltip: {
-                    position: 'top'
+                    position: 'top',
+                    formatter: function (params) {
+                        // console.log(params);
+                        return params.marker + params.name + ' ' + params.data[1];//params.seriesName + '<br>' + params.
+
+                    }
                 },
                 title: [],
                 singleAxis: [],
@@ -37,30 +48,33 @@ export default {
                     //劳动课程
                     this.$el.querySelector("#charts_canvas")
                 );
-                const hours = [
-                    '语文', '数学', '英语', '科学', '体育', '音乐', '美术',
-                    '劳动', '其他',
-                ];
+                const hours = option.hours
+                // [
+                //     // '语文', '数学', '英语', '科学', '体育', '音乐', '美术',
+                //     // '劳动', '其他',
+                // ];
                 // prettier-ignore
-                const days = [
-                    '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
-                ];
+                const days = option.days
+                // [
+                //     // '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
+                // ];
                 // prettier-ignore
-                const data = [
-                    [0, 0, 2], [0, 1, 1], [0, 2, 3], [0, 3, 0], [0, 4, 5], [0, 5, 5], [0, 6, 7], [0, 7, 8], [0, 8, 1],
-                    [1, 0, 5], [1, 1, 1], [1, 2, 2], [1, 3, 0], [1, 4, 5], [1, 5, 7], [1, 6, 7], [1, 7, 8], [1, 8, 6],
-                    [2, 0, 5], [2, 1, 2], [2, 2, 0], [2, 3, 2], [2, 4, 1], [2, 5, 5], [2, 6, 4], [2, 7, 4], [2, 8, 1],
-                    [3, 0, 1], [3, 1, 1], [3, 2, 1], [3, 3, 0], [3, 4, 5], [3, 5, 2], [3, 6, 7], [3, 7, 8], [3, 8, 5],
-                    [4, 0, 5], [4, 1, 3], [4, 2, 0], [4, 3, 3], [4, 4, 4], [4, 5, 2], [4, 6, 3], [4, 7, 5], [4, 8, 1],
-                    [5, 0, 5], [5, 1, 1], [5, 2, 0], [5, 3, 0], [5, 4, 5], [5, 5, 5], [5, 6, 7], [5, 7, 8], [5, 8, 3],
-                ];
+                const data = option.data
+                // [
+                //     // [0, 0, 2], [0, 1, 1], [0, 2, 3], [0, 3, 0], [0, 4, 5], [0, 5, 5], [0, 6, 7], [0, 7, 8], [0, 8, 1],
+                //     // [1, 0, 5], [1, 1, 1], [1, 2, 2], [1, 3, 0], [1, 4, 5], [1, 5, 7], [1, 6, 7], [1, 7, 8], [1, 8, 6],
+                //     // [2, 0, 5], [2, 1, 2], [2, 2, 0], [2, 3, 2], [2, 4, 1], [2, 5, 5], [2, 6, 4], [2, 7, 4], [2, 8, 1],
+                //     // [3, 0, 1], [3, 1, 1], [3, 2, 1], [3, 3, 0], [3, 4, 5], [3, 5, 2], [3, 6, 7], [3, 7, 8], [3, 8, 5],
+                //     // [4, 0, 5], [4, 1, 3], [4, 2, 0], [4, 3, 3], [4, 4, 4], [4, 5, 2], [4, 6, 3], [4, 7, 5], [4, 8, 1],
+                //     // [5, 0, 5], [5, 1, 1], [5, 2, 0], [5, 3, 0], [5, 4, 5], [5, 5, 5], [5, 6, 7], [5, 7, 8], [5, 8, 3],
+                // ];
                 const title = [];
                 const singleAxis = [];
                 const series = [];
                 days.forEach(function (day, idx) {
                     title.push({
                         textBaseline: 'middle',
-                        top: ((idx + 0.5) * 90) / 6 + '%',
+                        top: ((idx + 0.5) * 90) / days.length + '%',
                         text: day,
                         textStyle: {
                             fontSize: 12,
@@ -71,8 +85,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,
@@ -80,7 +94,7 @@ export default {
                         type: 'scatter',
                         data: [],
                         symbolSize: function (dataItem) {
-                            return dataItem[1] * 5;
+                            return dataItem[1] * 3;
                         }
                     });
                 });
@@ -96,13 +110,94 @@ export default {
                 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.ooption);
+        this.setJson(this.courseArray)
         var _this = this;
         window.addEventListener("resize", () => {
             if (_this.chartObj) {

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

@@ -33,7 +33,7 @@
           <div class="title">学生行为数据</div>
         </div>
         <div class="dataBox">
-          <stuAct style="height: calc(100% - 40px)"></stuAct>
+          <stuAct style="height: calc(100% - 20px)"></stuAct>
         </div>
       </div>
     </div>