update

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

@@ -13,26 +13,29 @@
           <div class="info_box">
             <div class="info blueBG">
               <span>用户总数</span>
-              <!-- <span>{{ count }}</span> -->
-              <span>{{ 310 }}</span>
+              <span>{{ allUser }}</span>
             </div>
             <div class="info blueBG">
               <span>本月登录用户环比</span>
-              <!-- <span>{{ weekCount }}</span> -->
-              <span>{{ "0.9%" }}</span>
+              <span>{{ (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>{{ loginCount }}</span> -->
-              <span>{{ 138 }}</span>
+              <span>{{ loginCountMonthArray[loginCountMonthArray.length - 1].user }}</span>
             </div>
             <div class="info blueBG">
               <span>本月新增登录用户</span>
-              <!-- <span>{{ (loginCount / count).toFixed(0) }}</span> -->
-              <span>{{ 18 }}</span>
+              <span>{{ (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">
@@ -170,74 +173,74 @@
           </div> -->
         </div>
         <div class="dataBox">
-          <div class="depth_box" style="height: calc(100%s)">
+          <div class="depth_box" style="height: calc(100%)">
             <div class="depth">
               <span>参与课程</span>
               <div>
-                <el-progress :width="80" type="circle" :percentage="80" :stroke-width="15" :format="format"
+                <el-progress :width="80" type="circle" :percentage="80" :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="15" :format="format"
+                <el-progress :width="80" type="circle" :percentage="80" :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="15" :format="format"
+                <el-progress :width="80" type="circle" :percentage="80" :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="15" :format="format"
+                <el-progress :width="80" type="circle" :percentage="80" :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="15" :format="format"
+                <el-progress :width="80" type="circle" :percentage="80" :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="15" :format="format"
+                <el-progress :width="80" type="circle" :percentage="80" :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="15" :format="format"
+                <el-progress :width="80" type="circle" :percentage="80" :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="15" :format="format"
+                <el-progress :width="80" type="circle" :percentage="80" :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="15" :format="format"
+                <el-progress :width="80" type="circle" :percentage="80" :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="15" :format="format"
+                <el-progress :width="80" type="circle" :percentage="80" :stroke-width="5" :format="format"
                   color="#106BFF"></el-progress>
               </div>
             </div>
@@ -332,6 +335,8 @@ export default {
       courseType: 0,
       oType: false,
       shType: false,
+      allUser: 0,
+      loginCountMonthArray: []
     };
   },
   mounted() {
@@ -344,6 +349,9 @@ export default {
     shEchart() {
       this.shType = !this.shType;
     },
+    format(percentage) {
+      return percentage + '%';
+    },
     getData() {
       this.isLoading = true;
       let params = [
@@ -360,6 +368,42 @@ export default {
           let _subject = res.data[1]; //学科
           let _course = res.data[2]; //课程
 
+          this.allUser = 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.$forceUpdate();
         })
         .catch((err) => {
@@ -639,5 +683,4 @@ export default {
 .blueBG {
   background: rgb(243, 248, 253);
   border: 2px solid rgb(234, 246, 255);
-}
-</style>
+}</style>

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

@@ -1,55 +1,78 @@
 <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'
         },
         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 +80,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 +146,4 @@ export default {
   width: 95%;
   background: #fff;
 }
-</style>
+</style>