-- bug

src/components/PathDetailImage.vue

@@ -1,40 +1,69 @@
 <template>
-  <div class="pathDetail" v-if="visiable" :style="{background:`url('${img}') no-repeat`}">
-    <div v-for="(item,i) in chapters" :key="i" class="cha"
+  <div class="pathDetail" v-if="visiable" :style="{background:`url('${back}') no-repeat`}">
+    <div v-for="(item,i) in detail.chapterDtoList" :key="i" class="cha"
          :style="{top:`${imgAttr.positions[i]?.top}px`,left:`${imgAttr.positions[i]?.left}px`}">
-      <div>{{ item.name }}</div>
+      <div @click="toDetail(i)"
+           :style="{background: `url('${current===i?currentBack:nameBack}')`,width:'245px',height:'105px',textAlign:'center',lineHeight:'75px',color:'#FFF'}">
+        {{ item.name }}
+      </div>
     </div>
   </div>
 </template>
 <script setup>
 import {computed, defineProps, ref, watch} from "vue";
+import back from '@/assets/image/pathdetails/路径图背景线@2x.png'
+import nameBack from '@/assets/image/pathdetails/组 23@2x.png'
+import currentBack from '@/assets/image/pathdetails/组 23(1).png'
+import {useRouter} from "vue-router/dist/vue-router";
 
 const props = defineProps({
   value: String,
   img: String,
-  chapters: Array,
-  current: Number
+  detail: {
+    type: Object,
+    default: {}
+  }
 })
+const router = useRouter();
 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},
+      {left: -72, top: 508},
+      {left: 147, top: 356},
+      {left: 689, top: 263},
+      {left: 617, top: 69},
+      {left: 1047, top: 42},
     ]
   }
 }
 
 const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img.includes(e))] || {})
 
+const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.chapterId === props.detail.currentStageId))
+
 function show() {
   visiable.value = true
 }
 
+function toDetail(i) {
+  if (current.value !== i) {
+    return
+  }
+  import.meta.env.MODE === "development"
+      ? router.push({
+        path: "/pathdetails",
+        query: {routerId: props.detail.routerId, routerName: props.detail.routerName},
+      })
+      : window.open(
+          `${import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
+              `routerId=${props.detail.routerId}&routerName=${props.detail.routerName}`
+          )}`
+      );
+}
+
 function close() {
   visiable.value = false
 }
@@ -42,11 +71,12 @@ function close() {
 <style lang="scss">
 .pathDetail {
   width: 100%;
-  height: 577px;
+  height: 1011px;
   position: relative;
 }
 
 .cha {
   position: absolute;
+  cursor: pointer;
 }
 </style>