feat: 关卡概览页面修改和数据接入

src/api/indexLearningPath.js

@@ -0,0 +1,4 @@
+import http from "./config";
+
+// 获取路径图概览
+export const getRouterOverview = (routerId) => http.get(`/admin/router/overview?routerId=${routerId}`)

src/views/learningpath/LevelAdd.vue

@@ -116,43 +116,48 @@
             <div class="onerow"><div class="taskmain">项目概览</div></div>
             <div class="second" style="margin-top: 0">
               <div class="nubbox">
-                <span class="nub1">200</span>
+                <span class="nub1">{{routerInfoOverview.totalStudentCnt}}</span>
                 <div class="nub2">总人数</div>
               </div>
               <div class="nubbox">
-                <span class="nub1" style="color: #ff90ae">15</span>
+                <span class="nub1" style="color: #ff90ae">{{routerInfoOverview.studyStudentCnt}}</span>
-                <div class="nub2">必修课</div>
+                <div class="nub2">学习人数</div>
               </div>
               <div class="nubbox">
-                <span class="nub1" style="color: #a497ff">15</span>
+                <span class="nub1" style="color: #a497ff">{{routerInfoOverview.completeStudentCnt}}</span>
-                <div class="nub2">选修课</div>
+                <div class="nub2">完成人数</div>
               </div>
               <div class="nubbox">
                 <div>
-                  <span class="nub1" style="color: #5dc988">50</span
+                  <span class="nub1" style="color: #5dc988">{{routerInfoOverview.onlineCourseCnt}}</span
                   ><span style="color: #5dc988; font-size: 14px">%</span>
                 </div>
-                <div class="nub2">完成率</div>
+                <div class="nub2">在线课程数</div>
               </div>
               <div class="nubbox">
                 <div>
-                  <span class="nub1" style="color: #ff90ae">30</span
+                  <span class="nub1" style="color: #ff90ae">{{routerInfoOverview.offLineCourseCnt}}</span
                   ><span style="color: #ff90ae; font-size: 14px">%</span>
                 </div>
-                <div class="nub2">必修完成率</div>
+                <div class="nub2">面授课程数</div>
               </div>
               <div class="nubbox">
                 <div>
-                  <span class="nub1" style="color: #a497ff">30</span
+                  <span class="nub1" style="color: #a497ff">{{routerInfoOverview.completeRatio}}</span
                   ><span style="color: #a497ff; font-size: 14px">%</span>
                 </div>
-                <div class="nub2">选修完成率</div>
+                <div class="nub2">总完成率</div>
               </div>
             </div>
             <div class="onerow"><div class="taskmain">阶段信息</div></div>
             <div class="stagemess">
-              <div class="stage1">阶段1</div>
+              <div v-for="item in stageList" 
-              <div class="stage2">阶段2</div>
+              :class= "{ 'stage1': item.stageId == choosedStageId, 'stage2': item.stageId != choosedStageId }"
+              :key="item.stageId" @click="choosedStageId = item.stageId">
+              {{item.stage}}
+            </div>
+              <!-- <div class="stage1">阶段1</div>
+              <div class="stage2">阶段2</div> -->
             </div>
             <div class="stagesecond">
               <div class="staname">阶段名称：</div>
@@ -163,7 +168,7 @@
                 <a-progress
                   type="dashboard"
                   gapDegree="0"
-                  :percent="50"
+                  :percent="chapterOverviewList.completeCourseRatio"
                   :width="140"
                 />
                 <div class="protext">课程完成率</div>
@@ -172,7 +177,7 @@
                 <a-progress
                   type="dashboard"
                   gapDegree="0"
-                  :percent="50"
+                  :percent="chapterOverviewList.completeExamRatio"
                   :width="140"
                 />
                 <div class="protext">考试通过率</div>
@@ -181,26 +186,26 @@
                 <a-progress
                   type="dashboard"
                   gapDegree="0"
-                  :percent="50"
+                  :percent="chapterOverviewList.completeRatio"
                   :width="140"
                 />
-                <div class="protext">作业合格率</div>
+                <div class="protext">作业完成率</div>
               </div>
               <div class="proright">
-                <div class="pronub" style="margin-left: 280px">10</div>
+                <div class="pronub" style="margin-left: 280px">{{chapterOverviewList.totalTaskCnt}}</div>
                 <div class="proright1">
-                  <span class="textpro">阶段任务总数</span>
+                  <span class="textpro">关卡任务总数</span>
-                  <a-progress :percent="50" style="width: 369px" />
+                  <a-progress :percent="chapterOverviewList.totalTaskCnt" style="width: 369px" />
                 </div>
-                <div class="pronub" style="margin-left: 206px">5</div>
+                <div class="pronub" style="margin-left: 206px">{{chapterOverviewList.totalReqCnt}}</div>
                 <div class="proright1">
                   <span class="textpro">必修课</span>
-                  <a-progress :percent="25" style="width: 369px" />
+                  <a-progress :percent="chapterOverviewList.totalReqCnt" style="width: 369px" />
                 </div>
-                <div class="pronub" style="margin-left: 142px">1</div>
+                <div class="pronub" style="margin-left: 142px">{{chapterOverviewList.totalOptCnt}}</div>
                 <div class="proright1">
                   <span class="textpro">选修课</span>
-                  <a-progress :percent="5" style="width: 369px" />
+                  <a-progress :percent="chapterOverviewList.totalOptCnt" style="width: 369px" />
                 </div>
               </div>
             </div>
@@ -883,10 +888,15 @@
       <!-- 作业管理抽屉 -->
       <work-manage v-model:Wvisible="Wvisible" />
     </div>
+    <!--  加载动画 -->
+    <div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
+      <a-spin :spinning="addLoading" tip="添加中..." />
+    </div>
   </div>
 </template>
 <script>
-import { ref, reactive, toRefs } from "vue";
+import { ref, reactive, toRefs,onMounted } from "vue";
+import { message } from "ant-design-vue";
 import AddStu from "../../components/drawers/AddLevelAddStu";
 import ImpStu from "../../components/drawers/AddLevelImportStu";
 import CheckStu from "../../components/drawers/CheckStu";
@@ -901,6 +911,8 @@ import WorkManage from "../../components/drawers/WorkManage";
 import * as api from "../../api/index1";
 import { storage } from "../../api/storage";
 
+import { getRouterOverview } from "@/api/indexLearningPath";
+
 export default {
   name: "LevelAdd",
   components: {
@@ -926,6 +938,8 @@ export default {
       AddSvisible: false, //添加学员抽屉
       AddImpStuvisible: false, //导入学员抽屉
       CheckStuvisible: false, //学员管理的查看抽屉
+      addLoading:false, // 加载动画
+      choosedStageId:1, // 选择的阶段id
       twobtn: true,
       number: true,
       twobtnn: false,
@@ -1238,6 +1252,36 @@ export default {
         },
       ],
     });
+
+    const levelList = reactive({
+      routerInfoOverview:{ // 路径图整体数据概览
+        totalStudentCnt:0,
+        studyStudentCnt:0,
+        completeStudentCnt:0,
+        onlineCourseCnt:0,
+        offLineCourseCnt:0,
+        completeRatio:0,
+      },
+      chapterOverviewList:{ // 路径图阶段数据概览
+        completeCourseRatio:0,
+        completeExamRatio:0,
+        completeRatio:0,
+        totalTaskCnt:0,
+        totalReqCnt:0,
+        totalOptCnt:0,
+      },
+      stageList: [ // 阶段列表
+        {
+          stageId:1,
+          stage:"阶段一"
+        },
+        {
+          stageId:2,
+          stage:"阶段二"
+        }
+      ]
+    })
+
     // console.log("store", state.routerId);
     const selectProjectName = (value, index) => {
       console.log("value", value, index);
@@ -1475,8 +1519,36 @@ export default {
     };
 
     //学员管理------------------------------------------------
+
+    onMounted(() => {
+      state.addLoading = true;
+      getOverview()
+    })
+
+    // 获取项目概览
+    const getOverview = () =>{
+      getRouterOverview(state.routerId).then((res) => {
+        Object.keys(res.data.data.routerInfoOverview).forEach(item => {
+          levelList.routerInfoOverview[item] = res.data.data.routerInfoOverview[item] || 0
+        })
+        Object.keys(res.data.data.chapterOverviewList).forEach(item => {
+          levelList.chapterOverviewList[item] = res.data.data.chapterOverviewList[item] || 0
+        })
+        // res.data.data.routerInfoOverview.forEach((r) => {
+        //   console.log(r)
+        // })
+        state.addLoading = false;
+        console.log("项目概览--"+res)
+      }).catch(err => {
+        state.addLoading = false;
+        message.error("概览获取失败")
+        console.log("获取失败"+err)
+      })
+    }
+
     return {
       ...toRefs(state),
+      ...toRefs(levelList),
       selectProjectName,
       selectProjectName2,
       selectProjectName3,