1

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

@@ -12,13 +12,27 @@
 
 <script>
 export default {
+  props: {
+    monthArray: {
+      type: Array,
+    },
+  },
   data() {
     return {
       chartObj: null,
+      ooption: {
+        xdata: [],
+        course: [],
+      },
       option: {
+        tooltip: {
+          trigger: "axis",
+        },
         xAxis: {
           type: "category",
-          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+          boundaryGap: true,
+          // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+          data: [],
         },
         yAxis: {
           type: "value",
@@ -32,7 +46,8 @@ export default {
         },
         series: [
           {
-            data: [400, 510, 510, 350, 320, 510, 420],
+            data:[],
+            // data: [400, 510, 510, 350, 320, 510],
             symbolSize: 10,
             type: "line",
             lineStyle: {
@@ -45,7 +60,7 @@ export default {
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -55,14 +70,51 @@ export default {
         const chartObj = this.$echarts.init(
           this.$el.querySelector("#charts_canvas")
         );
+        this.option.xAxis.data = option.xdata;
+        this.option.series[0].data = option.course;
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
   },
+  watch: {
+    monthArray: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.ooption = {
+          xdata: [],
+          course: [],
+        };
+        let _array = newValue;
+        for (var i = 0; i < _array.length; i++) {
+          this.ooption.xdata.push(_array[i].Month + "月");
+          this.ooption.course.push(_array[i].course);
+        }
+
+        if (!this.chartObj) {
+          this.setChart(this.ooption);
+        } else {
+          this.option.xAxis.data = this.ooption.xdata;
+          this.option.series[0].data = this.ooption.course;
+          this.chartObj.setOption(this.option);
+        }
+        this.$forceUpdate();
+      },
+    },
+  },
   mounted() {
-    this.setChart(this.option);
+    this.ooption = {
+      xdata: [],
+      course: [],
+    };
+    let _array = this.monthArray;
+    for (var i = 0; i < _array.length; i++) {
+      this.ooption.xdata.push(_array[i].Month + "月");
+      this.ooption.course.push(_array[i].course);
+    }
+    this.setChart(this.ooption);
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
@@ -70,9 +122,6 @@ export default {
       }
     });
   },
-  created() {
-    this.setChart();
-  },
 };
 </script>
 

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

@@ -10,14 +10,17 @@
           <div class="teafre">
             <div class="teaLeft">
               <div>累计授课次数</div>
-              <div>{{ wCount }} </div>
+              <div>{{ wCount }}</div>
             </div>
             <div class="teaLeft teaRigth">
               <div>相对增幅百分比</div>
-              <div>20.3%</div>
+              <div>{{ reInc }}%</div>
             </div>
           </div>
-          <TeaFre style="height: calc(100% - 62px)"></TeaFre>
+          <TeaFre
+            style="height: calc(100% - 62px)"
+            :monthArray="groupedArrayByMonth"
+          ></TeaFre>
         </div>
       </div>
       <div class="bottom">
@@ -39,7 +42,7 @@
             <div class="teafre">
               <div class="teaMiddle cNum">
                 <div>课程总数</div>
-                <div>{{ cCount }} </div>
+                <div>{{ cCount }}</div>
               </div>
               <div class="teaMiddle tNum">
                 <div>类别总数</div>
@@ -125,16 +128,16 @@ export default {
   data() {
     return {
       isLoading: false,
-      wCount:0,
-      cCount:0,
-      loginTime:0,
+      wCount: 0,
+      cCount: 0,
+      groupedArrayByMonth: [],
+      reInc: 0,
     };
   },
   mounted() {
     this.getData();
-    this.getData1();
   },
-  methods:{
+  methods: {
     getData() {
       this.isLoading = true;
       let params = [
@@ -148,29 +151,50 @@ export default {
           this.isLoading = false;
           this.wCount = res.data[0].length;
           this.cCount = res.data[1].length;
-        })
-        .catch((err) => {
-          this.isLoading = false;
-          console.error(err);
-        });
-    },
-    getData1() {
-      this.isLoading = true;
-      let params = [
-        {
-          oid: this.oid,
-        },
-      ];
-      this.ajax
-        .post(this.$store.state.api + "selectDataBoardSchool", params)
-        .then((res) => {
-          this.isLoading = false;
-          this.count = res.data[0][0].count
-          this.loginCount = res.data[1][0].loginCount
-          this.loginTime = parseInt(res.data[3][0].time) / 60  / 60
-          this.courseCount = res.data[5][0].courseCount
-          this.teacherCount = res.data[6][0].count
-          
+          var workArray = res.data[0];
+          let workList = [];
+          //将数据根据time里面的月份分成多个数组
+          var groupedArrayByMonth = [];
+          const date = new Date();
+          var Month = date.getMonth() + 1;
+          var Year = date.getFullYear();
+          for (var i = Month; i > Month - 6; i--) {
+            if (i <= 0) {
+              groupedArrayByMonth.push({
+                Year: Year - 1,
+                Month: 12 + i,
+                course: 0,
+              });
+            } else {
+              groupedArrayByMonth.push({
+                Month: i,
+                Year: Year,
+                course: 0,
+              });
+            }
+          }
+          groupedArrayByMonth = groupedArrayByMonth.reverse();
+
+          for (var i = 0; i < workArray.length; i++) {
+            let _date = new Date(workArray[i].time);
+            var _month = _date.getMonth() + 1;
+            var _year = _date.getFullYear();
+            for (var j = 0; j < groupedArrayByMonth.length; j++) {
+              if (
+                _month == groupedArrayByMonth[j].Month &&
+                _year == groupedArrayByMonth[j].Year
+              ) {
+                groupedArrayByMonth[j].course++;
+                break;
+              }
+            }
+          }
+          this.reInc = (
+            (groupedArrayByMonth[groupedArrayByMonth.length - 1].course /
+              groupedArrayByMonth[groupedArrayByMonth.length - 2].course) *
+            100
+          ).toFixed(1);
+          this.groupedArrayByMonth = groupedArrayByMonth;
         })
         .catch((err) => {
           this.isLoading = false;