1

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

@@ -10,7 +10,7 @@
           <div class="info_box">
             <div class="info blueBG">
               <span>学生总数</span>
-              <span>{{count}}</span>
+              <span>{{ count }}</span>
             </div>
             <div class="info greenBG">
               <span>周使用频次</span>
@@ -18,21 +18,23 @@
             </div>
             <div class="info blueBG">
               <span>登录频次</span>
-              <span>{{loginCount}}</span>
+              <span>{{ loginCount }}</span>
             </div>
             <div class="info greenBG">
               <span>人均使用频次</span>
               <span>{{ (loginCount / count).toFixed(0) }}</span>
             </div>
           </div>
-          <loginCount style="height: calc(100% - 140px);"></loginCount>
+          <loginCount style="height: calc(100% - 140px)"></loginCount>
         </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
           <div class="title">学生行为数据</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <stuAct style="height: calc(100% - 40px)"></stuAct>
+        </div>
       </div>
     </div>
     <div class="center">
@@ -41,21 +43,21 @@
           <div class="title">学生综合评价</div>
         </div>
         <div class="dataBox">
-          <div class="info_box" style="width:95%;justify-content: flex-start;">
-              <div class="info2 blueBG">
-                <span>学生总数</span>
-                <span>{{count}}</span>
-              </div>
-              <div class="info2 greenBG">
-                <span>班级总数</span>
-                <span>15620</span>
-              </div>
-              <div class="info2 blueBG">
-                <span>平均得分</span>
-                <span>15620</span>
+          <div class="info_box" style="width: 95%; justify-content: flex-start">
+            <div class="info2 blueBG">
+              <span>学生总数</span>
+              <span>{{ count }}</span>
+            </div>
+            <div class="info2 greenBG">
+              <span>班级总数</span>
+              <span>15620</span>
+            </div>
+            <div class="info2 blueBG">
+              <span>平均得分</span>
+              <span>15620</span>
             </div>
           </div>
-          <studentInfo style="height: calc(100% - 70px);"></studentInfo>
+          <studentInfo style="height: calc(100% - 70px)"></studentInfo>
         </div>
       </div>
       <div class="bottom">
@@ -66,23 +68,63 @@
           <div class="depth_box">
             <div class="depth">
               <span>参与课程</span>
-              <div><el-progress :width="90" type="circle" :percentage="36" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="90"
+                  type="circle"
+                  :percentage="36"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>参与项目</span>
-              <div><el-progress :width="90" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="90"
+                  type="circle"
+                  :percentage="76"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>使用工具</span>
-              <div><el-progress :width="90" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="90"
+                  type="circle"
+                  :percentage="76"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>协同合作</span>
-              <div><el-progress :width="90" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="90"
+                  type="circle"
+                  :percentage="76"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>互动交流</span>
-              <div><el-progress :width="90" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="90"
+                  type="circle"
+                  :percentage="76"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
           </div>
         </div>
@@ -105,14 +147,14 @@
           <div class="info_box">
             <div class="info blueBG">
               <span>累计在线时长</span>
-              <span>{{loginTime.toFixed(0)}}小时</span>
+              <span>{{ loginTime.toFixed(0) }}小时</span>
             </div>
             <div class="info greenBG">
               <span>学生在线平均时长</span>
-              <span>{{(loginTime / count).toFixed(0)}}</span>
+              <span>{{ (loginTime / count).toFixed(0) }}</span>
             </div>
           </div>
-          <loginTime style="height:calc(100% - 70px)"></loginTime>
+          <loginTime style="height: calc(100% - 70px)"></loginTime>
         </div>
       </div>
     </div>
@@ -120,11 +162,11 @@
 </template>
 
 <script>
-import loginCount from './loginCount'
-import studentInfo from './studentInfo'
-import studentInfo2 from './studentInfo2'
-import loginTime from './loginTime'
-
+import loginCount from "./loginCount";
+import studentInfo from "./studentInfo";
+import studentInfo2 from "./studentInfo2";
+import loginTime from "./loginTime";
+import stuAct from "./stuAct";
 export default {
   props: {
     oid: {
@@ -132,34 +174,38 @@ export default {
     },
   },
   components: {
-    loginCount,studentInfo,studentInfo2,loginTime
+    loginCount,
+    studentInfo,
+    studentInfo2,
+    loginTime,
+    stuAct,
   },
   data() {
     return {
-      isLoading:false,
-      count:0,
+      isLoading: false,
+      count: 0,
       loginCount: 0,
       loginTime: 0,
-    }
+    };
   },
   mounted() {
-    this.getData()
+    this.getData();
   },
   methods: {
     getData() {
       this.isLoading = true;
-      let params = [{
-        oid: this.oid
-      }]
+      let params = [
+        {
+          oid: this.oid,
+        },
+      ];
       this.ajax
         .post(this.$store.state.api + "selectDataBoardStudent", 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[2][0].time) / 60 / 60
-
-          
+          this.count = res.data[0][0].count;
+          this.loginCount = res.data[1][0].loginCount;
+          this.loginTime = parseInt(res.data[2][0].time) / 60 / 60;
         })
         .catch((err) => {
           this.isLoading = false;
@@ -168,9 +214,9 @@ export default {
     },
     format(percentage) {
       return percentage;
-    }
+    },
   },
-}
+};
 </script>
 
 
@@ -188,7 +234,7 @@ export default {
   height: 100%;
 }
 
-.left>.top {
+.left > .top {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -196,7 +242,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.left>.bottom {
+.left > .bottom {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -209,7 +255,7 @@ export default {
   margin: 0 20px;
 }
 
-.center>.top {
+.center > .top {
   width: 100%;
   height: calc(100% / 5 * 3 - 10px);
   background: #fff;
@@ -217,7 +263,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.center>.bottom {
+.center > .bottom {
   width: 100%;
   height: calc(100% / 5 * 2 - 10px);
   background: #fff;
@@ -227,10 +273,9 @@ export default {
 .right {
   width: calc(100% / 4 * 1);
   height: 100%;
-
 }
 
-.right>.top {
+.right > .top {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -238,7 +283,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.right>.bottom {
+.right > .bottom {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -266,7 +311,7 @@ export default {
   width: 100%;
 }
 
-.titleBox>.title {
+.titleBox > .title {
   font-weight: 700;
 }
 
@@ -275,7 +320,6 @@ export default {
   width: 100%;
 }
 
-
 .info_box {
   display: flex;
   flex-wrap: wrap;
@@ -285,9 +329,9 @@ export default {
   margin: 0 auto;
 }
 
-.info_box>.info2,
-.info_box>.info3,
-.info_box>.info {
+.info_box > .info2,
+.info_box > .info3,
+.info_box > .info {
   width: calc(50% - 10px);
   display: flex;
   flex-direction: column;
@@ -299,42 +343,45 @@ export default {
   border-radius: 5px;
 }
 
-.info_box>.info2 {
-  width: calc(100%/4 - 10px);
+.info_box > .info2 {
+  width: calc(100% / 4 - 10px);
   align-items: flex-end;
   margin-right: 10px;
 }
 
-.info_box>.info3 {
+.info_box > .info3 {
   width: 100%;
   margin-bottom: 5px;
 }
 
-
-.info_box>.info2>span:nth-child(1),
-.info_box>.info3>span:nth-child(1),
-.info_box>.info>span:nth-child(1) {
+.info_box > .info2 > span:nth-child(1),
+.info_box > .info3 > span:nth-child(1),
+.info_box > .info > span:nth-child(1) {
   font-size: 12px;
   margin: 0 0 5px 0;
 }
 
-.info_box>.info2>span:nth-child(2),
-.info_box>.info3>span:nth-child(2),
-.info_box>.info>span:nth-child(2) {
+.info_box > .info2 > span:nth-child(2),
+.info_box > .info3 > span:nth-child(2),
+.info_box > .info > span:nth-child(2) {
   font-size: 22px;
   font-weight: 700;
 }
 
 .blueBG {
-  background: linear-gradient(180deg,
-      rgba(224, 234, 251, 0.2) 0%,
-      rgba(54, 130, 252, 0.3) 100%);
+  background: linear-gradient(
+    180deg,
+    rgba(224, 234, 251, 0.2) 0%,
+    rgba(54, 130, 252, 0.3) 100%
+  );
 }
 
 .greenBG {
-  background: linear-gradient(180deg,
-      rgb(211, 246, 228, 0.2) 0%,
-      rgb(23, 196, 105, 0.3) 100%);
+  background: linear-gradient(
+    180deg,
+    rgb(211, 246, 228, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  );
 }
 
 .depth_box {
@@ -360,5 +407,6 @@ export default {
   font-weight: 700;
   margin: 0 0 10px;
 }
-.depth > div:nth-child(1) {}
+.depth > div:nth-child(1) {
+}
 </style>