From 393f7ddcddc02f84bb64f620bd9d067a40dd6a01 Mon Sep 17 00:00:00 2001
From: yuping <82253452@qq.com>
Date: Thu, 22 Dec 2022 12:45:39 +0800
Subject: [PATCH] =?UTF-8?q?--=20=E8=B7=AF=E5=BE=84=E5=9B=BE=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/roadmap/LearnPath.vue   | 532 +++++++++++++++---------------
 src/views/roadmap/PathDetails.vue | 201 ++++++-----
 2 files changed, 366 insertions(+), 367 deletions(-)

diff --git a/src/views/roadmap/LearnPath.vue b/src/views/roadmap/LearnPath.vue
index aea809f..b1de201 100644
--- a/src/views/roadmap/LearnPath.vue
+++ b/src/views/roadmap/LearnPath.vue
@@ -1,79 +1,79 @@
 <template>
-	<div class="learnpath">
-		<div class="content">
-			<div class="title">
-				<div class="titleL">
-					<div @click="returnfun" class="text">学习路径图</div>
-					<div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
-						<img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png" />
-						<div style="margin-top: 1px">{{ userInfo.jobName }}</div>
-					</div>
-					<div class="info" v-if="userInfo.bandDesc">
-						<img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png" />
-						<div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
-					</div>
-				</div>
-				<div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
-					<!--          <el-popover width="475px" trigger="hover" popper-class="lppopover">-->
-					<!--            <div>-->
-					<!--              <div class="finish">-->
-					<!--                <img-->
-					<!--                    src="../../assets/image/circle.png"-->
-					<!--                    style="width: 20px; height: 20px"-->
-					<!--                />-->
-					<!--                <div class="text">未完成</div>-->
-					<!--                <div class="box"></div>-->
-					<!--              </div>-->
-					<!--              <div-->
-					<!--                  v-for="(value, index) in unCompleteTaskList"-->
-					<!--                  :key="index"-->
-					<!--                  class="tasks"-->
-					<!--                  :style="{-->
-					<!--                  'border-bottom':-->
-					<!--                    index === unCompleteTaskList.length - 1-->
-					<!--                      ? null-->
-					<!--                      : '1px solid rgba(229, 228, 228, 1)',-->
-					<!--                }"-->
-					<!--              >-->
-					<!--                <div style="font-size: 14px; font-weight: 500; color: #677d86">-->
-					<!--                  {{ value.name }}-->
-					<!--                </div>-->
-					<!--                <img-->
-					<!--                    style="width: 20px; height: 20px"-->
-					<!--                    src="../../assets/image/go.png"-->
-					<!--                    @click="toUnTask(chapterId)"-->
-					<!--                />-->
-					<!--              </div>-->
-					<!--            </div>-->
-					<!--            <template #reference>-->
-					<!--              todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
-					<!--              <div class="titleR">进入未完成任务</div>-->
-					<!--            </template>-->
-					<!--          </el-popover>-->
-				</div>
-				<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
-					返回列表
-				</div>
-			</div>
-			<!-- 路径列表-->
-			<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
-				<div style="min-width: 770px; width: 100%">
-					<el-table :data="data" style="width: 100%" @row-click="gofun">
-						<el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
-							<img :src="scope.row.picUrl" style="width: 230px; height: 155px" />
-						</el-table-column>
-						<el-table-column align="center" prop="name" label="路径名称" />
-						<el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
-							<el-popover placement="top-start" title="路径介绍" trigger="hover" :content="scope.row.remark">
-								<template #reference>
-									<div>{{ scope.row.remark }}</div>
-								</template>
-							</el-popover>
-						</el-table-column>
+  <div class="learnpath">
+    <div class="content">
+      <div class="title">
+        <div class="titleL">
+          <div @click="returnfun" class="text">学习路径图</div>
+          <div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
+            <img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png"/>
+            <div style="margin-top: 1px">{{ userInfo.jobName }}</div>
+          </div>
+          <div class="info" v-if="userInfo.bandDesc">
+            <img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png"/>
+            <div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
+          </div>
+        </div>
+        <div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
+          <!--          <el-popover width="475px" trigger="hover" popper-class="lppopover">-->
+          <!--            <div>-->
+          <!--              <div class="finish">-->
+          <!--                <img-->
+          <!--                    src="../../assets/image/circle.png"-->
+          <!--                    style="width: 20px; height: 20px"-->
+          <!--                />-->
+          <!--                <div class="text">未完成</div>-->
+          <!--                <div class="box"></div>-->
+          <!--              </div>-->
+          <!--              <div-->
+          <!--                  v-for="(value, index) in unCompleteTaskList"-->
+          <!--                  :key="index"-->
+          <!--                  class="tasks"-->
+          <!--                  :style="{-->
+          <!--                  'border-bottom':-->
+          <!--                    index === unCompleteTaskList.length - 1-->
+          <!--                      ? null-->
+          <!--                      : '1px solid rgba(229, 228, 228, 1)',-->
+          <!--                }"-->
+          <!--              >-->
+          <!--                <div style="font-size: 14px; font-weight: 500; color: #677d86">-->
+          <!--                  {{ value.name }}-->
+          <!--                </div>-->
+          <!--                <img-->
+          <!--                    style="width: 20px; height: 20px"-->
+          <!--                    src="../../assets/image/go.png"-->
+          <!--                    @click="toUnTask(chapterId)"-->
+          <!--                />-->
+          <!--              </div>-->
+          <!--            </div>-->
+          <!--            <template #reference>-->
+          <!--              todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
+          <!--              <div class="titleR">进入未完成任务</div>-->
+          <!--            </template>-->
+          <!--          </el-popover>-->
+        </div>
+        <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
+          返回列表
+        </div>
+      </div>
+      <!-- 路径列表-->
+      <div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
+        <div style="min-width: 770px; width: 100%">
+          <el-table :data="data" style="width: 100%" @row-click="gofun">
+            <el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
+              <img :src="scope.row.picUrl" style="width: 230px; height: 155px"/>
+            </el-table-column>
+            <el-table-column align="center" prop="name" label="路径名称"/>
+            <el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
+              <el-popover placement="top-start" title="路径介绍" trigger="hover" :content="scope.row.remark">
+                <template #reference>
+                  <div>{{ scope.row.remark }}</div>
+                </template>
+              </el-popover>
+            </el-table-column>
 
-						<el-table-column align="center" prop="organizationName" label="归属组织" />
-						<el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
-							<img :src="
+            <el-table-column align="center" prop="organizationName" label="归属组织"/>
+            <el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
+              <img :src="
 								scope.row.status === 0
 									? ongoing
 									: scope.row.status === 1
@@ -81,239 +81,255 @@
 										: scope.row.status === -1
 											? nostarted
 											: null
-							" style="width: 99px; height: 99px" />
-						</el-table-column>
-					</el-table>
-				</div>
-			</div>
+							" style="width: 99px; height: 99px"/>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
 
-			<!--      :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
-			<!-- 路径列表-->
-			<!-- 路径详情图 -->
-			<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
-				<div v-for="(item, i) in detail?.rows" :key="i">
-					<img :src="useImage(`222_0${i + 2}.png`)" />
-				</div>
-				<!--        <div class="modal"-->
-				<!--             style="width: calc(100% - 168px); height: 525px;background-image: url('../../src/assets/image/mapdetail.png');background-size: 100%;background-repeat: no-repeat;">-->
-				<!--        </div>-->
-			</div>
-			<!-- 路径详情图 -->
-		</div>
-	</div>
+      <!--      :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
+      <!-- 路径列表-->
+      <!-- 路径详情图 -->
+      <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
+        <div v-for="(item, i) in detail?.rows" :key="i">
+          <img :src="useImage(`222_0${i + 2}.png`)"/>
+        </div>
+        <!--        <div class="modal"-->
+        <!--             style="width: calc(100% - 168px); height: 525px;background-image: url('../../src/assets/image/mapdetail.png');background-size: 100%;background-repeat: no-repeat;">-->
+        <!--        </div>-->
+      </div>
+      <!-- 路径详情图 -->
+    </div>
+<!--    <svg width="100%" height="600" xmlns="http://www.w3.org/2000/svg" style="padding:40px">-->
+<!--      <defs>-->
+<!--        <marker id="arrow" markerHeight="13" markerWidth="13">-->
+<!--          <path d="M2,2 L2,10 L10,6 L2,2" stroke="none" fill="#409eff"></path>-->
+<!--        </marker>-->
+<!--      </defs>-->
+<!--      <path d="M105 570 C1000 600 -60 505 890 270" stroke-width="3" stroke="#409eff" fill="none" stroke-linecap="round" stroke-dasharray=".1 5" marker-mid="url(#arrow)" marker-start="url(#arrow)" marker-end="url(#arrow)"></path>-->
+<!--      <text x="50" y="550">初级产品经理</text>-->
+<!--      <circle cx="90" cy="570" r="10" fill="#fff" stroke-width="5" stroke="#22a000"></circle>-->
+<!--      <text x="450" y="400">中级产品经理</text>-->
+<!--      <circle cx="490" cy="420" r="10" fill="#fff" stroke-width="5" stroke="#22a000"></circle>-->
+<!--      <text x="850" y="250">高级产品经理</text>-->
+<!--      <circle cx="890" cy="270" r="10" fill="#fff" stroke-width="5" stroke="#22a000"></circle>-->
+<!--    </svg>-->
+  </div>
 </template>
 <script setup>
-import { reactive, toRefs, ref, onMounted, computed } from "vue";
+import {reactive, toRefs, ref, onMounted, computed} from "vue";
 import nostarted from "../../assets/image/nostarted.png";
 import completed from "../../assets/image/completed.png";
 import ongoing from "../../assets/image/ongoing.png";
-import { boeRequest, request, usePage, useRequest } from "@/api/request";
+import {boeRequest, request, usePage, useRequest} from "@/api/request";
 import {
-	ROUTER_CHAPTER_LIST,
-	ROUTER_LIST,
-	ROUTER_UNCOMPLETE_LIST,
+  ROUTER_CHAPTER_LIST,
+  ROUTER_LIST,
+  ROUTER_UNCOMPLETE_LIST,
 } from "@/api/api";
-import { useImage } from "@/api/utils";
-import { useRouter } from "vue-router";
+import {useImage} from "@/api/utils";
+import {useRouter} from "vue-router";
 import store from "@/store";
 
 const detail = ref();
 const userInfo = computed(() => store.state.userInfo);
-const { data } = usePage(ROUTER_LIST, { pageSize: 60 });
-console.log("datadata", data);
+const {data} = usePage(ROUTER_LIST, {pageSize: 60});
 const router = useRouter();
 const returnclick = () => {
-	router.back();
+  router.back();
 };
 
 // const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
 
 const state = reactive({
-	showmapdetail: false,
+  showmapdetail: false,
 });
-const { showmapdetail } = toRefs(state);
+const {showmapdetail} = toRefs(state);
 
 const returnfun = () => {
-	state.showmapdetail = false;
+  state.showmapdetail = false;
 };
 
-async function gofun({ routerId, name: routerName }) {
-	// console.log(routerId)
-	// const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
-	// detail.value = data.data
-	// state.showmapdetail = true;
-	// router.push({path: "/pathdetails", query: {routerId}});
-	import.meta.env.MODE === "development"
-		? router.push({
-			path: "/pathdetails",
-			query: { routerId, routerName },
-		})
-		: window.open(
-			`http://u-pre.boe.com/pc/forward?to=/fe-student/pathdetails&params=${encodeURIComponent(
-				`routerId=${routerId}&routerName=${routerName}`
-			)}`
-		);
+async function gofun({routerId, name: routerName}) {
+  // console.log(routerId)
+  // const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
+  // detail.value = data.data
+  // state.showmapdetail = true;
+  // router.push({path: "/pathdetails", query: {routerId}});
+  // import.meta.env.MODE === "development"
+  //     ? router.push({
+  //       path: "/pathdetails",
+  //       query: {routerId, routerName},
+  //     })
+  //     : window.open(
+  //         `http://u-pre.boe.com/pc/forward?to=/fe-student/pathdetails&params=${encodeURIComponent(
+  //             `routerId=${routerId}&routerName=${routerName}`
+  //         )}`
+  //     );
+}
+
+function toUnTask() {
 }
-function toUnTask() { }
 </script>
 <style lang="scss">
-#app div:nth-child(1) {
-	background: rgba(0, 0, 0, 0) !important;
+//#app div:nth-child(1) {
+//	background: rgba(0, 0, 0, 0) !important;
+//}
+
+.modal {
 }
 
-.modal {}
-
 .modal:after {
-	content: "";
+  content: "";
 }
 
 .learnpath {
-	width: 100%;
-	min-height: 800px;
-	//border-radius: 8px;
-	background-color: rgba(255, 255, 255, 1);
-	display: flex;
+  width: 100%;
+  min-height: 800px;
+  //border-radius: 8px;
+  background-color: rgba(255, 255, 255, 1);
+  display: flex;
 
-	.content {
-		width: 100%;
-		// flex: 1;
-		margin-top: 43px;
+  .content {
+    width: 100%;
+    // flex: 1;
+    margin-top: 43px;
 
-		// background-color: pink;
-		.title {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			margin-left: 53px;
-			margin-right: 54px;
-		}
+    // background-color: pink;
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-left: 53px;
+      margin-right: 54px;
+    }
 
-		.title .titleL {
-			display: flex;
-			align-items: center;
-		}
+    .title .titleL {
+      display: flex;
+      align-items: center;
+    }
 
-		.title .titleL .text {
-			font-size: 18px;
-			font-weight: bold;
-			color: #333333;
-			line-height: 24px;
-			margin-right: 26px;
-		}
+    .title .titleL .text {
+      font-size: 18px;
+      font-weight: bold;
+      color: #333333;
+      line-height: 24px;
+      margin-right: 26px;
+    }
 
-		.title .titleL .info {
-			display: flex;
-			// align-items: center;
-			font-size: 14px;
-			font-weight: 400;
-			color: #387df7;
-		}
+    .title .titleL .info {
+      display: flex;
+      // align-items: center;
+      font-size: 14px;
+      font-weight: 400;
+      color: #387df7;
+    }
 
-		.title .titleR {
-			width: 157px;
-			height: 48px;
-			border: 2px solid #0060ff;
-			border-radius: 8px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			cursor: pointer;
-			font-size: 16px;
-			font-weight: bold;
-			color: #0060ff;
-		}
+    .title .titleR {
+      width: 157px;
+      height: 48px;
+      border: 2px solid #0060ff;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: bold;
+      color: #0060ff;
+    }
 
-		.head {
-			// height: 50px;
-			background: #f9f9f9;
-			margin-top: 50px;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			font-size: 14px;
-			font-weight: 500;
-			color: #333333;
-			margin-left: 53px;
-			margin-right: 54px;
-			width: calc(100% - 107px);
-			// min-width: 770px;
-			overflow-x: auto;
+    .head {
+      // height: 50px;
+      background: #f9f9f9;
+      margin-top: 50px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 500;
+      color: #333333;
+      margin-left: 53px;
+      margin-right: 54px;
+      width: calc(100% - 107px);
+      // min-width: 770px;
+      overflow-x: auto;
 
-			.el-table th.el-table__cell {
-				background: rgba(249, 249, 249, 1);
-				color: rgba(51, 51, 51, 1);
-				font-size: 14px;
-				font-weight: 500;
-			}
+      .el-table th.el-table__cell {
+        background: rgba(249, 249, 249, 1);
+        color: rgba(51, 51, 51, 1);
+        font-size: 14px;
+        font-weight: 500;
+      }
 
-			.el-table .cell {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				width: 100%;
-				display: -webkit-box;
-				-webkit-box-orient: vertical;
-				-webkit-line-clamp: 3;
-				word-break: break-all;
-			}
+      .el-table .cell {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        word-break: break-all;
+      }
 
-			.el-table__row {
-				height: 231px;
-				font-size: 14px;
-				color: rgba(102, 102, 102, 1);
-				font-weight: 500;
-			}
-		}
+      .el-table__row {
+        height: 231px;
+        font-size: 14px;
+        color: rgba(102, 102, 102, 1);
+        font-weight: 500;
+      }
+    }
 
-		.mapdetail {
-			width: calc(100% - 107px);
-			height: 577px;
-			background: rgba(242, 245, 247, 0.6);
-			margin-top: 26px;
-			border-radius: 8px;
-			margin-left: 53px;
-			margin-right: 54px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
+    .mapdetail {
+      width: calc(100% - 107px);
+      height: 577px;
+      background: rgba(242, 245, 247, 0.6);
+      margin-top: 26px;
+      border-radius: 8px;
+      margin-left: 53px;
+      margin-right: 54px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 }
 
 .lppopover {
-	.finish {
-		padding-left: 27px;
-		padding-right: 18px;
-		margin-top: 15px;
-		margin-bottom: 17px;
-		position: relative;
-		display: flex;
-		align-items: center;
-	}
+  .finish {
+    padding-left: 27px;
+    padding-right: 18px;
+    margin-top: 15px;
+    margin-bottom: 17px;
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
 
-	.text {
-		font-size: 16px;
-		font-weight: 800;
-		color: #333333;
-		margin-left: 8px;
-	}
+  .text {
+    font-size: 16px;
+    font-weight: 800;
+    color: #333333;
+    margin-left: 8px;
+  }
 
-	.box {
-		width: 59px;
-		height: 10px;
-		background-color: rgba(36, 120, 255, 0.15);
-		position: absolute;
-		left: 50px;
-		top: 15px;
-	}
+  .box {
+    width: 59px;
+    height: 10px;
+    background-color: rgba(36, 120, 255, 0.15);
+    position: absolute;
+    left: 50px;
+    top: 15px;
+  }
 
-	.tasks {
-		width: 405px;
-		height: 52px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-left: 28px;
-		cursor: pointer;
-	}
+  .tasks {
+    width: 405px;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 28px;
+    cursor: pointer;
+  }
 }
 </style>
diff --git a/src/views/roadmap/PathDetails.vue b/src/views/roadmap/PathDetails.vue
index 210ce6f..e7e9747 100644
--- a/src/views/roadmap/PathDetails.vue
+++ b/src/views/roadmap/PathDetails.vue
@@ -11,44 +11,38 @@
     <!-- 详细信息 -->
     <div class="detailinfo">
       <div class="detailL">
-        <div v-for="(i, k) in data.chapterProcessList" :key="k">
+        <div>
           <div class="title">
-            <div class="titleL">{{ i.chapterName }}</div>
+            <div class="titleL">{{ data.currentStageName }}</div>
             <div class="titleR" :style="{ display: 'flex' }">
-              <img src="../../assets/image/pathdetails/circle.png" />
-              <div class="titleRT">进行中</div>
-            </div>
-            <div
-              class="titleR"
-              :style="{ display: i.status === 2 ? 'flex' : 'none' }"
-            >
-              <img src="../../assets/image/pathdetails/circle2.png" />
-              <div class="titleRT" style="color: rgba(102, 102, 102, 1)">
-                未开始
+              <img
+                  :src="data.currentChapterCnt?circle:circle2"/>
+              <div class="titleRT" :style="{color:data.currentChapterCnt?'':'rgba(102, 102, 102, 1)'}">
+                {{ data.currentChapterCnt ? '进行中' : '未开始' }}
               </div>
             </div>
           </div>
           <div
-            class="course"
-            v-for="(value, index) in i.taskProcessList.filter(
+              class="course"
+              v-for="(value, index) in data.taskBoList?.filter(
               (e) => !whiteTypes(e.type)
             )"
-            :key="index"
+              :key="index"
           >
             <div style="width: 70%">
               <div class="coursename" :title="value.name">{{ value.name }}</div>
               <div class="coursetag">
                 <div
-                  class="tag1"
-                  style="margin-right: 11px; margin-top: 16px"
-                  v-if="value.flag"
+                    class="tag1"
+                    style="margin-right: 11px; margin-top: 16px"
+                    v-if="value.flag"
                 >
                   必修
                 </div>
                 <div
-                  class="tag2"
-                  style="margin-right: 11px; margin-top: 16px"
-                  v-if="!value.flag"
+                    class="tag2"
+                    style="margin-right: 11px; margin-top: 16px"
+                    v-if="!value.flag"
                 >
                   选修
                 </div>
@@ -66,17 +60,17 @@
                 <!--                                </div>-->
               </div>
               <div
-                class="progressBox"
-                :style="{ display: value.type === 1 ? 'block' : 'none' }"
+                  class="progressBox"
+                  :style="{ display: value.type === 1 ? 'block' : 'none' }"
               >
                 <div>当前进度</div>
                 <div class="progress">
                   <div style="width: 291px">
                     <el-progress
-                      :percentage="value.currentRatio"
-                      :show-text="false"
-                      :stroke-width="8"
-                      :color="
+                        :percentage="value.currentRatio"
+                        :show-text="false"
+                        :stroke-width="8"
+                        :color="
                         {
                           0: 'rgba(238, 112, 108, 1)',
                           1: 'rgba(255, 151, 38, 1)',
@@ -89,13 +83,13 @@
                     />
                   </div>
                   <div
-                    style="
+                      style="
                       font-size: 14px;
                       font-weight: 500;
                       color: #277aff;
                       margin-left: 10px;
                     "
-                    :style="{
+                      :style="{
                       color: {
                         0: 'rgba(238, 112, 108, 1)',
                         1: 'rgba(255, 151, 38, 1)',
@@ -112,18 +106,18 @@
               </div>
             </div>
             <div
-              class="goclass"
-              :style="{
+                class="goclass"
+                :style="{
                 background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
               }"
-              @click="toFinish(value, i.chapterName, i.chapterId)"
+                @click="toFinish(value)"
             >
               {{
                 value.status === 1
-                  ? "已完成"
-                  : types.path[value.type]
-                  ? types.toName[value.type]
-                  : "未开放"
+                    ? "已完成"
+                    : types.path[value.type]
+                        ? types.toName[value.type]
+                        : "未开放"
               }}
             </div>
             <!--            <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
@@ -186,18 +180,18 @@
           <div class="info">
             <div class="title">
               <img
-                style="width: 21px; height: 20px"
-                src="../../assets/image/pathdetails/info.png"
+                  style="width: 21px; height: 20px"
+                  src="../../assets/image/pathdetails/info.png"
               />
               <div class="text" style="margin-left: 7px">个人信息</div>
               <div class="box"></div>
             </div>
             <!--            todo #路径详情 个人信息缺少img和介绍-->
             <div
-              class="teacheritem"
-              :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
+                class="teacheritem"
+                :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
             >
-              <img class="peopleimg" :src="`/upload${userInfo.avatar}`" />
+              <img class="peopleimg" :src="`/upload${userInfo.avatar}`"/>
               <div style="margin-left: 17px">
                 <div class="teacherName">
                   <div style="margin-right: 5px">
@@ -214,8 +208,8 @@
           <div class="info" style="padding-top: 20px">
             <div class="title">
               <img
-                style="width: 18px; height: 17px"
-                src="../../assets/image/pathdetails/study.png"
+                  style="width: 18px; height: 17px"
+                  src="../../assets/image/pathdetails/study.png"
               />
               <div class="text" style="margin-left: 9px">学习进度</div>
               <div class="box"></div>
@@ -231,10 +225,10 @@
                 <div class="progress">
                   <div style="width: 291px">
                     <el-progress
-                      :percentage="parseInt(data.totalProgress * 100)"
-                      :show-text="false"
-                      :stroke-width="8"
-                      :color="
+                        :percentage="parseInt(data.currentChapterCnt/data.totalChapterCnt * 100)"
+                        :show-text="false"
+                        :stroke-width="8"
+                        :color="
                         {
                           0: 'rgba(238, 112, 108, 1)',
                           1: 'rgba(255, 151, 38, 1)',
@@ -242,13 +236,13 @@
                           3: 'rgba(59, 94, 251, 1)',
                           4: 'rgba(57, 219, 183, 1)',
                           5: 'rgba(57, 219, 183, 1)',
-                        }[(parseInt(data.totalProgress) * 100) / 20]
+                        }[(parseInt(data.currentChapterCnt/data.totalChapterCnt)* 100) / 20]
                       "
                     />
                   </div>
                   <div
-                    style="font-size: 14px; font-weight: 500; margin-left: 10px"
-                    :style="{
+                      style="font-size: 14px; font-weight: 500; margin-left: 10px"
+                      :style="{
                       color: {
                         0: 'rgba(238, 112, 108, 1)',
                         1: 'rgba(255, 151, 38, 1)',
@@ -256,10 +250,10 @@
                         3: 'rgba(59, 94, 251, 1)',
                         4: 'rgba(57, 219, 183, 1)',
                         5: 'rgba(57, 219, 183, 1)',
-                      }[parseInt((data.totalProgress * 100) / 20)],
+                      }[parseInt((data.currentChapterCnt/data.totalChapterCnt * 100) / 20)],
                     }"
                   >
-                    {{ parseInt(data.totalProgress * 100) }}%
+                    {{ parseInt(data.currentChapterCnt/data.totalChapterCnt * 100) }}%
                   </div>
                 </div>
               </div>
@@ -270,10 +264,10 @@
                 <div class="progress">
                   <div style="width: 291px">
                     <el-progress
-                      :percentage="parseInt(data.compulsoryProgress * 100)"
-                      :show-text="false"
-                      :stroke-width="8"
-                      :color="
+                        :percentage="parseInt(data.currentReqCnt/data.totalReqCnt * 100)"
+                        :show-text="false"
+                        :stroke-width="8"
+                        :color="
                         {
                           0: 'rgba(238, 112, 108, 1)',
                           1: 'rgba(255, 151, 38, 1)',
@@ -281,18 +275,18 @@
                           3: 'rgba(59, 94, 251, 1)',
                           4: 'rgba(57, 219, 183, 1)',
                           5: 'rgba(57, 219, 183, 1)',
-                        }[parseInt((data.compulsoryProgress * 100) / 20)]
+                        }[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)]
                       "
                     />
                   </div>
                   <div
-                    style="
+                      style="
                       font-size: 14px;
                       font-weight: 500;
                       color: #277aff;
                       margin-left: 10px;
                     "
-                    :style="{
+                      :style="{
                       color: {
                         0: 'rgba(238, 112, 108, 1)',
                         1: 'rgba(255, 151, 38, 1)',
@@ -300,10 +294,10 @@
                         3: 'rgba(59, 94, 251, 1)',
                         4: 'rgba(57, 219, 183, 1)',
                         5: 'rgba(57, 219, 183, 1)',
-                      }[parseInt((data.compulsoryProgress * 100) / 20)],
+                      }[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)],
                     }"
                   >
-                    {{ parseInt(data.compulsoryProgress * 100) }}%
+                    {{ parseInt(data.currentReqCnt/data.totalReqCnt * 100) }}%
                   </div>
                 </div>
               </div>
@@ -318,40 +312,31 @@
 </template>
 
 <script setup>
-import { computed, reactive, ref, watch } from "vue";
-import word from "@/assets/image/file/word.png";
-import ppt from "@/assets/image/file/ppt.png";
-import pdf from "@/assets/image/file/pdf.png";
-import zip from "@/assets/image/file/zip.png";
-import md from "@/assets/image/file/md.png";
-import medal1 from "@/assets/image/medal/medal1.png";
-import medal2 from "@/assets/image/medal/medal2.png";
-import medal3 from "@/assets/image/medal/medal3.png";
-import img from "@/assets/image/uploadimg.png";
-import { boeRequest, useRequest, request } from "@/api/request";
-import { ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD } from "@/api/api";
-import { useRoute, useRouter } from "vue-router";
-import { ElMessage } from "element-plus";
-import { useUserInfo } from "@/api/utils";
+import {computed, reactive, ref, watch} from "vue";
+import circle from '../../assets/image/pathdetails/circle.png';
+import circle2 from '../../assets/image/pathdetails/circle2.png';
+import {boeRequest, useRequest, request} from "@/api/request";
+import {ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD} from "@/api/api";
+import {useRoute, useRouter} from "vue-router";
+import {ElMessage} from "element-plus";
 import store from "@/store";
 
 const {
-  query: { routerId, routerName },
+  query: {routerId, routerName},
 } = useRoute();
 const router = useRouter();
 const returnclick = () => {
   router.back();
 };
-const { data } = useRequest(ROUTER_PROCESS, { routerId });
-console.log("data", data);
+const {data} = useRequest(ROUTER_PROCESS, {routerId});
 const userInfo = computed(() => store.state.userInfo);
-console.log("userInfo", userInfo);
+
 const activeName = ref("first");
 
 const handleClick = (tab, event) => {
   console.log(tab, event);
 };
-const path = { 1: "path" };
+const path = {1: "path"};
 
 const types = ref({
   typeName: {
@@ -391,56 +376,54 @@ const types = ref({
     4: "/homeworkpage",
     5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
     6: "/livebroadcast",
-    7: ({ courseId }) =>
-      request(LINK_DETAILS(courseId), {}).then(({ data: { linkAddress } }) =>
-        window.open(linkAddress)
-      ), //外联
+    7: ({courseId}) =>
+        request(LINK_DETAILS(courseId), {}).then(({data: {linkAddress}}) =>
+            window.open(linkAddress)
+        ), //外联
     8: "/discusspage",
     9: "/moreactive",
-    10: ({ evaType, targetId }) =>
-      window.open(
-        (evaType == 0
-          ? import.meta.env.VITE_BOE_TEST_DETAIL_URL
-          : import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL) + targetId
-      ), //测评
+    10: ({evaType, targetId}) =>
+        window.open(
+            (evaType == 0
+                ? import.meta.env.VITE_BOE_TEST_DETAIL_URL
+                : import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL) + targetId
+        ), //测评
     11: "/surveydetail",
     12: "/ballotpage",
     13: "/projectdetails",
   },
 });
 
-function toFinish(d, sName, chapterId) {
+function toFinish(d) {
   if (!types.value.path[d.type]) {
     ElMessage.error("暂时未开放");
     return;
   }
-  if (d.type == 3 || d.type == 7) {
+  if (d.type === 3 || d.type === 7) {
     request(STUDY_RECORD, {
       studentId: data.value.userInfoBo.userId,
       targetId: data.value.routerId,
       logo: 1,
-      stageOrChapterId: chapterId,
+      stageOrChapterId: data.value.currentStageId,
       taskId: d.routerTaskId,
     });
   }
   if (typeof types.value.path[d.type] === "string") {
-    console.log("dddddd", d);
-
     types.value.path[d.type] &&
-      types.value.path[d.type].startsWith("http") &&
-      window.open(types.value.path[d.type] + d.targetId);
+    types.value.path[d.type].startsWith("http") &&
+    window.open(types.value.path[d.type] + d.targetId);
     types.value.path[d.type] &&
-      types.value.path[d.type].startsWith("/") &&
-      router.push({
-        path: types.value.path[d.type],
-        query: {
-          id: d.routerTaskId,
-          type: 1,
-          courseId: d.courseId,
-          pName: data.value.name,
-          sName,
-        },
-      });
+    types.value.path[d.type].startsWith("/") &&
+    router.push({
+      path: types.value.path[d.type],
+      query: {
+        id: d.routerTaskId,
+        type: 1,
+        courseId: d.courseId,
+        pName: data.value.name,
+        sName:data.currentStageName,
+      },
+    });
   } else if (typeof types.value.path[d.type] === "function") {
     console.log("ddddddd", d);
     types.value.path[d.type](d);