-- bug

src/components/PathDetailImage.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="pathDetail" v-if="visiable" :style="{background:`url('${img}') no-repeat`}">
+    <div v-for="(item,i) in chapters" :key="i" class="cha"
+         :style="{top:`${imgAttr.positions[i]?.top}px`,left:`${imgAttr.positions[i]?.left}px`}">
+      <div>{{ item.name }}</div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {computed, defineProps, ref, watch} from "vue";
+
+const props = defineProps({
+  value: String,
+  img: String,
+  chapters: Array,
+  current: Number
+})
+const visiable = ref(true)
+const imageAttrs = {
+  '路径图背景-1671015331292.png': {
+    width: 1437,
+    height: 594,
+    positions: [
+      {left: 50, top: 500},
+      {left: 150, top: 400},
+      {left: 250, top: 300},
+      {left: 450, top: 100},
+    ]
+  }
+}
+
+const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img.includes(e))] || {})
+
+function show() {
+  visiable.value = true
+}
+
+function close() {
+  visiable.value = false
+}
+</script>
+<style lang="scss">
+.pathDetail {
+  width: 100%;
+  height: 577px;
+  position: relative;
+}
+
+.cha {
+  position: absolute;
+}
+</style>

src/views/roadmap/LearnPath.vue

@@ -5,11 +5,11 @@
         <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" />
+            <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" />
+            <img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png"/>
             <div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
           </div>
         </div>
@@ -60,18 +60,19 @@
         <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" />
+              <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="name" label="路径名称"/>
             <el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
-							<el-popover placement="bottom-start"   :width="400"  title="路径介绍" trigger="hover" :content="scope.row.remark">
+              <el-popover placement="bottom-start" :width="400" 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 align="center" prop="organizationName" label="归属组织"/>
             <el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
               <img :src="
 								scope.row.taskStatus === 1
@@ -81,46 +82,38 @@
 										: scope.row.taskStatus === 0
 											? nostarted
 											: null
-							" style="width: 99px; height: 99px" />
+							" 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">
+        <PathDetailImage img="https://u-pre.boe.com/upload/路径图背景-1671015331292.png" :chapters="chapters"></PathDetailImage>
-					<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>
 </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,
 } from "@/api/api";
-import { useImage } from "@/api/utils";
+import {useRouter} from "vue-router";
-import { useRouter } from "vue-router";
 import store from "@/store";
+import PathDetailImage from "@/components/PathDetailImage.vue";
 
 const detail = ref();
+const chapters = ref([]);
 const userInfo = computed(() => store.state.userInfo);
-const { data } = usePage(ROUTER_LIST, { pageSize: 60 });
+const {data} = usePage(ROUTER_LIST, {pageSize: 60});
-console.log("datadata", data);
 const router = useRouter();
 const returnclick = () => {
   router.back();
@@ -129,24 +122,25 @@ const returnclick = () => {
 // const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
 
 const state = reactive({
-	showmapdetail: false,
+  showmapdetail: true,
 });
-const { showmapdetail } = toRefs(state);
+const {showmapdetail} = toRefs(state);
 
 const returnfun = () => {
   state.showmapdetail = false;
 };
 
-async function gofun({ routerId, name: routerName }) {
+async function gofun({routerId, name: routerName,chapterDtoList}) {
   // console.log(routerId)
   // const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
   // detail.value = data.data
   // state.showmapdetail = true;
+  chapters.value = chapterDtoList
   // router.push({path: "/pathdetails", query: {routerId}});
   import.meta.env.MODE === "development"
       ? router.push({
         path: "/pathdetails",
-			query: { routerId, routerName },
+        query: {routerId, routerName},
       })
       : window.open(
           `${import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
@@ -154,14 +148,17 @@ async function gofun({ routerId, name: routerName }) {
           )}`
       );
 }
-function toUnTask() { }
+
+function toUnTask() {
+}
 </script>
 <style lang="scss">
 #app div:nth-child(1) {
   // background: rgba(0, 0, 0, 0) !important;
 }
 
-.modal {}
+.modal {
+}
 
 .modal:after {
   content: "";
@@ -178,7 +175,7 @@ function toUnTask() { }
     width: 100%;
     // flex: 1;
     margin-top: 43px;
-
+    position: relative;
     // background-color: pink;
     .title {
       display: flex;
@@ -315,9 +312,10 @@ function toUnTask() { }
     margin-left: 28px;
     cursor: pointer;
   }
+
   .box-item {
     width: 200px;
     margin-top: 10px;
-}
+  }
 }
 </style>

src/views/roadmap/PathDetails.vue

@@ -125,7 +125,7 @@
                 @click="toFinish(value)"
             >
               {{
-                value.status === 1
+                value.currentRatio === 1
                     ? "已完成"
                     : types.path[value.type]
                         ? types.toName[value.type]