1

src/components/pages/dataBoard/course/chartList/cateRank.vue

@@ -8,6 +8,7 @@
         :row-class-name="tableRowClassName"
       >
         <el-table-column prop="rank" label="排行" min-width="50" align="center">
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
         </el-table-column>
         <el-table-column
           prop="name"
@@ -18,7 +19,7 @@
         </el-table-column>
         <el-table-column
           prop="sum"
-          label="类别平均"
+          label="课程数量"
           min-width="80"
           align="center"
         >
@@ -30,15 +31,20 @@
 
 <script>
 export default {
+  props: {
+    courseNumberArray: {
+      type: Array,
+    },
+  },
   data() {
     return {
       tableData: [
-        { rank: "1", name: "一年级", sum: "2356" },
-        { rank: "2", name: "二年级", sum: "2256" },
-        { rank: "3", name: "三年级", sum: "2156" },
-        { rank: "4", name: "四年级", sum: "1356" },
-        { rank: "5", name: "五年级", sum: "1256" },
-        { rank: "6", name: "六年级", sum: "1056" },
+        // { rank: "1", name: "一年级", sum: "2356" },
+        // { rank: "2", name: "二年级", sum: "2256" },
+        // { rank: "3", name: "三年级", sum: "2156" },
+        // { rank: "4", name: "四年级", sum: "1356" },
+        // { rank: "5", name: "五年级", sum: "1256" },
+        // { rank: "6", name: "六年级", sum: "1056" },
       ],
     };
   },
@@ -50,6 +56,31 @@ export default {
         return "";
       }
     },
+    setArray(array) {
+      this.tableData = [];
+      for (var i = 0; i < array.length; i++) {
+        this.tableData.push({
+          sum: array[i].course,
+          name: array[i].name,
+        });
+      }
+      this.tableData = this.tableData.sort(function (a, b) {
+        return b.sum - a.sum;
+      });
+    },
+  },
+  watch: {
+    courseNumberArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue);
+        this.$forceUpdate();
+      },
+    },
+  },
+  mounted() {
+    this.setArray(this.courseNumberArray);
   },
 };
 </script>

src/components/pages/dataBoard/course/chartList/courseAna.vue

@@ -12,9 +12,17 @@
 
 <script>
 export default {
+  props: {
+    courseNumberArray: {
+      type: Array,
+    },
+  },
   data() {
     return {
       chartObj: null,
+      ooption: {
+        data: [],
+      },
       option: {
         tooltip: {
           trigger: "item",
@@ -22,29 +30,30 @@ export default {
         series: [
           {
             type: "pie",
-            radius: "50%",
-            data: [
-              { value: 123, name: "一年级" },
-              { value: 200, name: "二年级" },
-              { value: 250, name: "三年级" },
-              { value: 450, name: "四年级" },
-              { value: 300, name: "五年级" },
-              { value: 100, name: "六年级" },
-            ],
+            radius: ["35%", "70%"],
+            avoidLabelOverlap: false,
             emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
               },
             },
+            data: [
+              // { value: 123, name: "一年级" },
+              // { value: 200, name: "二年级" },
+              // { value: 250, name: "三年级" },
+              // { value: 450, name: "四年级" },
+              // { value: 300, name: "五年级" },
+              // { value: 100, name: "六年级" },
+            ],
           },
         ],
       },
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -52,16 +61,43 @@ export default {
       //然后异步执行echarts的初始化函数
       newPromise.then(() => {
         const chartObj = this.$echarts.init(
+          //劳动课程
           this.$el.querySelector("#charts_canvas")
         );
+        this.option.series[0].data = this.ooption.data;
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
+    setArray(array) {
+      this.ooption = {
+        data: [],
+      };
+      for (var i = 0; i < array.length; i++) {
+        this.ooption.data.push({ value: array[i].course, name: array[i].name });
+      }
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.series[0].data = this.ooption.data;
+        this.chartObj.setOption(this.option);
+      }
+      this.$forceUpdate();
+    },
+  },
+  watch: {
+    courseNumberArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue);
+        this.$forceUpdate();
+      },
+    },
   },
   mounted() {
-    this.setChart(this.option);
+    this.setArray(this.courseNumberArray);
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
@@ -69,9 +105,6 @@ export default {
       }
     });
   },
-  created() {
-    this.setChart();
-  },
 };
 </script>
 

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

@@ -12,50 +12,32 @@
 
 <script>
 export default {
+  props: {
+    workNumList: {
+      type: Array,
+    },
+  },
   data() {
     return {
       chartObj: null,
+      ooption: {
+        data: [],
+      },
       option: {
-        xAxis: {},
-        yAxis: {},
+        xAxis: {
+          name: "任务数量",
+        },
+        yAxis: {
+          name: "作业提交数量",
+        },
         color: ["#3681FC"],
+        tooltip: {
+          trigger: "item",
+        },
         series: [
           {
             symbolSize: 15,
-            data: [
-              [10.0, 8.04],
-              [8.07, 6.95],
-              [13.1, 7],
-              [13.2, 8.48],
-              [13.3, 9.38],
-              [13.4, 6.28],
-              [9.05, 8],
-              [9.15, 8.71],
-              [9.25, 9],
-              [9.35, 7],
-              [9.45, 6],
-              [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.35, 4],
-              [4.25, 5.26],
-              [4.15, 6.36],
-              [4.5, 4.96],
-              [6.03, 7.24],
-              [12.0, 6.26],
-              [12.0, 8.84],
-              [7.08, 5.82],
-              [5.02, 5.68],
-            ],
+            data: [],
             type: "scatter",
           },
         ],
@@ -63,7 +45,7 @@ export default {
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -71,16 +53,43 @@ export default {
       //然后异步执行echarts的初始化函数
       newPromise.then(() => {
         const chartObj = this.$echarts.init(
+          //劳动课程
           this.$el.querySelector("#charts_canvas")
         );
+        this.option.series[0].data = this.ooption.data;
         // 初始化雷达图
         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])
+      }
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.series[0].data = this.ooption.data;
+        this.chartObj.setOption(this.option);
+      }
+      this.$forceUpdate();
+    },
+  },
+  watch: {
+    workNumList: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue);
+        this.$forceUpdate();
+      },
+    },
   },
   mounted() {
-    this.setChart(this.option);
+    this.setArray(this.workNumList);
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
@@ -88,9 +97,6 @@ export default {
       }
     });
   },
-  created() {
-    this.setChart();
-  },
 };
 </script>
 

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

@@ -49,11 +49,11 @@
               </div>
               <div class="teaMiddle tNum">
                 <div>类别总数</div>
-                <div>8412</div>
+                <div>{{ typeCount }}</div>
               </div>
               <div class="teaMiddle tSum">
                 <div>类别平均</div>
-                <div>3021</div>
+                <div>{{ (typeCount / 3).toFixed(0) }}</div>
               </div>
             </div>
             <CateRank
@@ -62,10 +62,11 @@
                 margin-top: 10px;
                 overflow: auto;
               "
+              :courseNumberArray="courseNumberArray"
             ></CateRank>
           </div>
           <div class="halfBox middleBox" style="align-items: flex-start">
-            <WorkNum style="height: calc(100% - 40px)"></WorkNum>
+            <WorkNum style="height: calc(100% - 40px)" :workNumList="workNumList"></WorkNum>
           </div>
         </div>
       </div>
@@ -83,13 +84,17 @@
         <div class="titleBox">
           <div class="title">课程分析</div>
           <el-select v-model="cType" @change="typeChange" class="selectBox">
+            <el-option label="全部" value=""></el-option>
             <el-option label="年级" value="grade"></el-option>
             <el-option label="主题" value="theme"></el-option>
             <el-option label="学科" value="subject"></el-option>
           </el-select>
         </div>
         <div class="dataBox">
-          <CourseAna style="height: calc(100% - 40px)"></CourseAna>
+          <CourseAna
+            style="height: calc(100% - 40px)"
+            :courseNumberArray="courseNumberArray"
+          ></CourseAna>
         </div>
       </div>
       <div class="bottom">
@@ -156,19 +161,37 @@ export default {
       groupedArrayByMonth: [],
       toolList: [],
       reInc: 0,
-      cType: "grade",
+      cType: "",
       lType: "grade",
       tedurArray: [],
       classList: [],
       subjectList: [],
       themeList: [],
+      typeCount: 0,
+      courseNumberArray: [],
+      gradeArray: [],
+      subjectArray: [],
+      themeArray: [],
+      allArray: [],
+      workNumList:[],
     };
   },
   mounted() {
     this.getData();
   },
   methods: {
-    typeChange(){},
+    typeChange() {
+      if (this.cType === "") {
+        this.courseNumberArray = this.allArray;
+      } else if (this.cType === "grade") {
+        this.courseNumberArray = this.gradeArray;
+      } else if (this.cType === "theme") {
+        this.courseNumberArray = this.subjectArray;
+      } else if (this.cType === "subject") {
+        this.courseNumberArray = this.themeArray;
+      }
+      this.$forceUpdate();
+    },
     typeChange1() {
       if (this.lType == "grade") {
         this.tedurArray = this.classList;
@@ -198,6 +221,11 @@ export default {
           var classList = res.data[3]; //年级数组
           var subjectList = res.data[4]; //学科数组
           var themeList = res.data[5]; //主题数组
+          let _course = res.data[6]; //课程
+          let _grade = res.data[3]; //年级
+          let _subject = res.data[4]; //学科
+          var _workCourse = res.data[7]; //带作业的课程
+          _subject.push({ name: "其他" });
           var cList = [];
           //将数据根据time里面的月份分成多个数组
           var groupedArrayByMonth = [];
@@ -320,27 +348,27 @@ export default {
           for (var i = 0; i < courseJson.length; i++) {
             for (var j = 0; j < classList.length; j++) {
               if (courseJson[i].typeid.indexOf(classList[j].id) != -1) {
-                if(classList[j].time && courseJson[i].text){
+                if (classList[j].time && courseJson[i].text) {
                   classList[j].time += parseInt(courseJson[i].text);
-                }else if(courseJson[i].text){
+                } else if (courseJson[i].text) {
                   classList[j].time = parseInt(courseJson[i].text);
                 }
               }
             }
             for (var k = 0; k < subjectList.length; k++) {
               if (courseJson[i].typeid.indexOf(subjectList[k].id) != -1) {
-                if(subjectList[k].time && courseJson[i].text){
+                if (subjectList[k].time && courseJson[i].text) {
                   subjectList[k].time += parseInt(courseJson[i].text);
-                }else if(courseJson[i].text){
+                } else if (courseJson[i].text) {
                   subjectList[k].time = parseInt(courseJson[i].text);
                 }
               }
             }
             for (var l = 0; l < themeList.length; l++) {
               if (courseJson[i].typeid.indexOf(themeList[l].id) != -1) {
-                if(themeList[l].time && courseJson[i].text){
+                if (themeList[l].time && courseJson[i].text) {
                   themeList[l].time += parseInt(courseJson[i].text);
-                }else if(courseJson[i].text){
+                } else if (courseJson[i].text) {
                   themeList[l].time = parseInt(courseJson[i].text);
                 }
               }
@@ -356,15 +384,90 @@ export default {
           } else {
             this.tedurArray = themeList;
           }
+          this.typeCount =
+            classList.length + subjectList.length + themeList.length;
+          let _gradeArray = [];
+          let _subjectArray = [];
+          let _themeArray = [];
+
+          for (var i = 0; i < _grade.length; i++) {
+            _gradeArray.push({
+              name: _grade[i].name,
+              typeid: _grade[i].id,
+              course: 0,
+            });
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _grade[i].id) {
+                _gradeArray[i].course++;
+              }
+            }
+          }
+
+          for (var i = 0; i < _subject.length; i++) {
+            _subjectArray.push({
+              name: _subject[i].name,
+              typeid: _subject[i].id,
+              course: 0,
+            });
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _subject[i].id) {
+                _subjectArray[i].course++;
+              }
+            }
+          }
+
+          for (var i = 0; i < themeList.length; i++) {
+            _themeArray.push({
+              name: themeList[i].name,
+              typeid: themeList[i].id,
+              course: 0,
+            });
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == themeList[i].id) {
+                _themeArray[i].course++;
+              }
+            }
+          }
+          this.gradeArray = _gradeArray;
+          this.subjectArray = _subjectArray;
+          this.themeArray = _themeArray;
+          this.allArray = [..._gradeArray, ..._subjectArray, ..._themeArray];
+          this.typeChange();
+          var wList = [];
+          for (var i = 0; i < _workCourse.length; i++) {
+            if (!wList[_workCourse[i].courseId]) {
+              wList[_workCourse[i].courseId] = { cid:_workCourse[i].courseId, task: 0, work: 0 };
+              let chapters = JSON.parse(_workCourse[i].chapters);
+              for (var j = 0; j < chapters.length; j++) {
+                if (wList[_workCourse[i].courseId].task == 0) {
+                  wList[_workCourse[i].courseId].task =
+                    chapters[j].chapterInfo[0].taskJson.length;
+                } else {
+                  wList[_workCourse[i].courseId].task +=
+                    chapters[j].chapterInfo[0].taskJson.length;
+                }
+              }
+            }
+          }
+          for(var i =0;i<_workCourse.length;i++){
+            let a = Object.keys(wList)
+            for(var j =0;j<Object.keys(wList).length;j++){
+              if(_workCourse[i].courseId == wList[a[j]].cid){
+                wList[a[j]].work++
+              }
+            }
+          }
+          var workNumList = Object.values(wList).map(item => [item.task, item.work]);
+          this.workNumList = workNumList;
         })
         .catch((err) => {
           this.isLoading = false;
           console.error(err);
         });
     },
-    format(percentage) {
-      return percentage;
-    },
+    // format(percentage) {
+    //   return percentage;
+    // },
   },
 };
 </script>