学习进度、数据看板

src/api/index.js

@@ -27,6 +27,11 @@ export default {
     getProjectBySystemId: 'occupationlab/occupationlab/projectManage/getProjectBySystemId',
     getTheMostRecentlyRunProject: 'python/python/getTheMostRecentlyRunProject',
     whetherToRenewTheFee: 'nakadai/nakadai/curriculum/whetherToRenewTheFee',
+    courseLearningProgress: 'nakadai/nakadai/curriculum/learning/progressprogress/courseLearningProgress',
+    deleteLearningProgress: 'nakadai/nakadai/curriculum/learning/progressprogress/delete',
+    findLearningProgress: 'nakadai/nakadai/curriculum/learning/progressprogress/findById',
+    saveLearningProgress: 'nakadai/nakadai/curriculum/learning/progressprogress/save',
+    updateLearningProgress: 'nakadai/nakadai/curriculum/learning/progressprogress/update',
 
     // 能力测评
     canExperiment: `occupationlab/occupationlab/evaluationrecord/can_experiment`, // 查询是否能够开启实验
@@ -151,4 +156,5 @@ export default {
     monthlyAverageOnlineTime: `occupationlab/occupationlab/data/kanban/monthlyAverageOnlineTime`,
     courseRankings: `occupationlab/occupationlab/data/kanban/courseRankings`,
     platformLoginStatistics: `users/users/user/platformLoginStatistics`,
+    activityRanking: `occupationlab/occupationlab/data/kanban/activityRanking`,
 };

src/layouts/navbar/index.vue

@@ -82,6 +82,10 @@ export default {
                     index: "/log/list",
                     title: "更新日志"
                 },
+                {
+                    index: "/screen",
+                    title: "数据看板"
+                }
                 // {
                 //     index: "trial",
                 //     title: "试用申请"

src/pages/screen/index.vue

@@ -247,7 +247,7 @@
                 </ul>
               </div>
           </div>
-          <div class="item" style="height: 630px">
+          <div class="item" style="height: 300px">
             <div class="t_line_box">
                 <i class="t_l_line"></i> 
                 <i class="l_t_line"></i> 
@@ -274,20 +274,20 @@
                   <tr>
                     <th width="20%">名次</th>
                     <th width="20%">姓名</th>
-                    <th width="20%">班级</th>
+                    <th width="20%">{{ token ? '班级' : '学校' }}</th>
                     <th width="20%">练习次数</th>
                     <th width="20%">平均分</th>
                   </tr>
                 </thead>
               </table>
             </div>
-            <div class="main_table" ref="ach" style="max-height: 520px;margin-top: 0;overflow: hidden">
+            <div class="main_table" ref="ach" style="max-height: 220px;margin-top: 0;overflow: hidden">
               <table>
                 <tbody>
                   <tr v-for="(item, i) in achs" :key="i">
                     <td width="20%">{{ i + 1 }}</td>
                     <td width="20%">{{ item.userName }}</td>
-                    <td width="20%">{{ item.className }}</td>
+                    <td width="20%">{{ token ? item.className : item.schoolName }}</td>
                     <td width="20%">{{ item.practiceNumber }}</td>
                     <td width="20%">{{ item.avgScore }}</td>
                   </tr>
@@ -295,6 +295,50 @@
               </table>
             </div>
           </div>
+          <div class="item" style="height: 300px">
+            <div class="t_line_box">
+                <i class="t_l_line"></i> 
+                <i class="l_t_line"></i> 
+            </div> 
+            <div class="t_line_box">
+                <i class="t_r_line"></i> 
+                <i class="r_t_line"></i> 
+            </div> 
+            <div class="t_line_box">
+                <i class="l_b_line"></i> 
+                <i class="b_l_line"></i> 
+            </div> 
+                <div class="t_line_box">
+                <i class="r_b_line"></i> 
+                <i class="b_r_line"></i> 
+            </div>
+            <div class="main_title">
+                <img src="@/assets/img/screen/t_7.png" alt="">
+                活跃度排行榜
+            </div>
+            <div class="main_table">
+              <table>
+                <thead>
+                  <tr>
+                    <th width="20%">名次</th>
+                    <th width="20%">{{ token ? '班级' : '学校' }}</th>
+                    <th width="20%">活跃指数</th>
+                  </tr>
+                </thead>
+              </table>
+            </div>
+            <div class="main_table" ref="active" style="max-height: 220px;margin-top: 0;overflow: hidden">
+              <table>
+                <tbody>
+                  <tr v-for="(item, i) in actives" :key="i">
+                    <td width="20%">{{ i + 1 }}</td>
+                    <td width="20%">{{ token ? item.className : item.schoolName }}</td>
+                    <td width="20%">{{ item.activityIndex }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
       </div>
     </div>
   </div>
@@ -307,6 +351,7 @@ import Setting from '@/setting'
 export default {
     data() {
         return {
+          token: Util.local.get(Setting.tokenKey),
           time: 0,
           times: [
             {
@@ -324,6 +369,7 @@ export default {
           courses: [],
           popularCourses: [],
           achs: [],
+          actives: [],
           examChart: null
         }
     },
@@ -381,6 +427,11 @@ export default {
           })
           this.achs = list
         }).catch(res => {})
+        
+        // 活跃度排行榜
+        this.$post(this.api.activityRanking).then(({ list }) => {
+          this.actives = list
+        }).catch(res => {})
         this.scrollTable()
       },
       // 切换时间单位
@@ -1018,12 +1069,16 @@ export default {
       scrollTable() {
         const dom = this.$refs.popularCourses
         const dom1 = this.$refs.ach
+        const dom2 = this.$refs.active
         setInterval(() => {
           dom.scrollTop += 1
           if (dom.clientHeight + dom.scrollTop === dom.scrollHeight) dom.scrollTop = 0
 
           dom1.scrollTop += 1
           if (dom1.clientHeight + dom1.scrollTop === dom1.scrollHeight) dom1.scrollTop = 0
+
+          dom2.scrollTop += 1
+          if (dom2.clientHeight + dom2.scrollTop === dom2.scrollHeight) dom2.scrollTop = 0
         }, 30)
       }
     }

src/pages/station/preview/index.vue

@@ -48,6 +48,10 @@
                 <a v-else class="entry" @click="entry"></a>
                 <div class="list">
                     <h4 class="title">{{ courseName }}</h4>
+                    <div>
+                      <h6 class="pro-title">我的学习进度</h6>
+                      <el-progress :stroke-width="12" :percentage="schedule" :text-color="'#fff'"></el-progress>
+                    </div>
                     <div class="chapters">
                         <template v-if="chapterList.length">
                             <div class="chapter" v-for="(item,index) in chapterList" :key="index">
@@ -61,6 +65,7 @@
                                         <img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt="">
                                         <img v-else src="@/assets/img/exts/pic.png" alt="">
                                         {{ section.name }}
+                                        <i :class="['icon', section.whetherToStudyOrNot ? 'el-icon-success' : 'circle']" @click.stop="studySection(item, section)"></i>
                                     </p>
                                 </div>
                             </div>
@@ -70,6 +75,9 @@
             </div>
         </div>
         
+        <div class="tabs">
+          <a class="item" v-for="(item, i) in tabs" :key="i" :class="{active: item.id == active}" @click="tabChange(item)">{{ item.name }}</a>
+        </div>
         <div class="page">
             <h6 class="l-title">
                 <img src="@/assets/img/course1.png" alt="">
@@ -127,7 +135,7 @@ export default {
         return {
             startTime: Date.now(), // 页面进来的时间
             systemIds: '',
-            courseId: this.$route.query.courseId,
+            courseId: +this.$route.query.courseId,
             curriculumName: this.$route.query.curriculumName,
             video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4",
             chapterList: [], // 章节列表
@@ -137,6 +145,25 @@ export default {
             teachingObjectives: "", // 课程目标
             assessmentList: "", // 考核列表
             curLink: "", // 当前选中
+            active: 1,
+            tabs: [
+              {
+                id: 1,
+                name: '课程介绍'
+              },
+              {
+                id: 2,
+                name: '课程笔记'
+              },
+              {
+                id: 3,
+                name: '全国排行榜'
+              },
+              {
+                id: 4,
+                name: '教学互动'
+              }
+            ],
             playAuth: "",
             player: null,
             previewImg: "",
@@ -161,7 +188,7 @@ export default {
             loading: false,
             curProject: '',
             overdue: 0, //是否过期
-            buyVisible: false
+            buyVisible: false,
         };
     },
     computed: {
@@ -207,13 +234,14 @@ export default {
           }).then(({ isRenew }) => {
             // 1正常显示资源，0显示续费
             this.overdue = isRenew
-            this.getChapter()
+            this.getChapter(1)
           }).catch(res => {})
         },
-        async getChapter() {
+        async getChapter(first) {
-            let res = await this.$get(`${this.api.curriculumChapter}/${this.courseId}`);
+            let res = await this.$post(`${this.api.courseLearningProgress}?courseId=${this.courseId}`);
             this.chapterList = res.chapterList;
-            if (this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length) {
+            this.schedule = res.schedule.replace('%', '')
+            if (first && this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length) {
                 this.preview(this.chapterList[0].subsectionList[0], this.chapterList[0].name, 1);
             }
         },
@@ -245,6 +273,24 @@ export default {
           if('mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv'.includes(suf)) return '视频'
           return suf
         },
+        // tab切换
+        tabChange(item) {
+          this.active = item.id
+        },
+        // 勾选/取消勾选学习进度
+        studySection(chapter, section) {
+          section.whetherToStudyOrNot ?
+            this.$post(`${this.api.deleteLearningProgress}?id=${section.learningProgressId}`).then(({ isRenew }) => {
+            this.getChapter()
+          }).catch(res => {}) :
+            this.$post(this.api.saveLearningProgress, {
+              chapterId: chapter.id,
+              cid: this.courseId,
+              subsectionId: section.id,
+            }).then(({ isRenew }) => {
+              this.getChapter()
+            }).catch(res => {})
+        },
         preview(row, chapterName, showDia = 0) {
           // 如果没过期，则正常预览，否则显示购买弹框
           if (this.overdue || showDia) {
@@ -513,6 +559,17 @@ $height: 700px;
         color: #fff;
         font-size: 16px;
     }
+    .pro-title {
+      margin-bottom: 5px;
+      color: #fff;
+      font-size: 12px;
+    }
+    /deep/.el-progress-bar {
+      width: 95%;
+    }
+    /deep/.el-progress__text {
+      color: #fff;
+    }
     .desc-wrap{
         position: relative;
         .desc{
@@ -567,6 +624,8 @@ $height: 700px;
             margin-top: 12px;
             background-color: #121214;
             .sectionName{
+                position: relative;
+                padding-right: 15px;
                 margin: 12px 0;
                 font-size: 12px;
                 color: #999;
@@ -575,6 +634,18 @@ $height: 700px;
                 img {
                     margin-right: 8px;
                 }
+                .icon {
+                  position: absolute;
+                  right: 0;
+                  font-size: 14px;
+                  color: #00c935;
+                }
+                .circle {
+                  width: 14px;
+                  height: 14px;
+                  border-radius: 50%;
+                  border: 1px solid #ccc;
+                }
                 &.active{
                     color: #fff;
                 }
@@ -736,6 +807,25 @@ $height: 700px;
     color: #333;
   }
 }
+.tabs {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+    .item {
+        padding: 0 10px;
+        margin-right: 16px;
+        font-size: 17px;
+        text-align: center;
+        color: #333;
+        line-height: 50px;
+        border-bottom: 3px solid transparent;
+        cursor: pointer;
+        &.active {
+            color: #007EFF;
+            border-color: #007EFF;
+        }
+    }
+}
 @media (max-width: 1430px) {
     .wrap {
         padding: 12px 100px 20px;

src/setting.js

@@ -59,7 +59,7 @@ const Setting = {
     /**
      * 路由白名单
      * */
-    whiteList: ['/login', '/index/list', '/index/zxy', '/product', '/cityPartner/list', '/devPlatform/list', '/log/list', '/touristMatch/list', '/touristMatch/details', '/touristMatch/noticeDetail', '/preCourse/list', '/preCourse/details', '/preInfo/list', '/preInfo/details'],
+    whiteList: ['/login', '/index/list', '/index/zxy', '/product', '/cityPartner/list', '/devPlatform/list', '/log/list', '/touristMatch/list', '/touristMatch/details', '/touristMatch/noticeDetail', '/preCourse/list', '/preCourse/details', '/preInfo/list', '/preInfo/details', '/screen'],
     /**
      * 平台列表
      * */