feat:增加关卡路线

src/components/PathDetailImage.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="pathDetail" :style="{ backgroundImage: `url('${back}')` }">
+    <div
+      v-for="(item, i) in data"
+      :key="i"
+      class="cha"
+      :style="{
+        top: `${imgAttr.positions[i]?.top - (current === i ? 5 : 0)}px`,
+        left: `${imgAttr.positions[i]?.left - (current === i ? 10 : 0)}px`,
+      }"
+    >
+      <div
+        @click="toDetail(i)"
+        class="nameClass"
+        :title="item.name"
+        :style="{
+          background: `url('${current === i ? currentBack : nameBack}')`,
+          backgroundSize: '100%',
+          width: `${current === i ? 139 : 123}px`,
+          height: `${current === i ? 60 : 60}px`,
+          lineHeight: '50px',
+          color: '#FFF',
+        }"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed, defineProps, ref, watch } from "vue";
+import back from "@/assets/image/pathdetails/pathDetailBack.png";
+import nameBack from "@/assets/image/pathdetails/pathDetailImg.png";
+import currentBack from "@/assets/image/pathdetails/pathDetailImgSelect.png";
+import { useRouter } from "vue-router/dist/vue-router";
+import { ElLoading } from "element-plus";
+import { ROUTERTASK_LIST } from "@/api/api";
+import { usePage } from "@/api/request";
+const listheight = document.body.clientHeight - 300 + "px";
+console.log("listheight", listheight);
+const props = defineProps({
+  value: String,
+  img: String,
+  routerId: {
+    type: Number,
+    default: null,
+  },
+});
+const router = useRouter();
+const visiable = ref(true);
+const imageAttrs = {
+  "路径图背景-1671015331292.png": {
+    width: 1437,
+    height: 594,
+    positions: [
+      { left: -28, top: 435 },
+      { left: 170, top: 360 },
+      { left: 20, top: 260 },
+      { left: 200, top: 183 },
+      { left: 160, top: 66 },
+      { left: 260, top: -30 },
+    ],
+  },
+};
+
+const imgAttr = computed(
+  () =>
+    imageAttrs[Object.keys(imageAttrs).find((e) => props.img.includes(e))] || {}
+);
+// 使用
+const loading = ref(false); // loading
+const openLoading = () => {
+  loading.value = ElLoading.service({
+    lock: true,
+    text: "Loading",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+};
+openLoading();
+const closeLoading = () => {
+  loading.value.close();
+};
+const { data } = usePage(ROUTERTASK_LIST, { routerId: props.routerId }, (e) => {
+  console.log("我请求成功了吗", e);
+
+  closeLoading();
+});
+const current = computed(() =>
+  data.value.findIndex((e) => e.chapterId === props.currentStageId)
+);
+console.log("data", data);
+
+function show() {
+  visiable.value = true;
+}
+
+function toDetail(i) {
+  console.log("import.meta.env.MODE", import.meta.env.MODE);
+  if (current.value !== i) {
+    return;
+  }
+  import.meta.env.MODE === "development" || import.meta.env.MODE === "test"
+    ? router.push({
+        path: "/pathdetails",
+        query: {
+          routerId: props.routerId,
+          // routerName: props.detail.routerName,
+        },
+      })
+    : window.open(
+        `${
+          window.location.protocol + import.meta.env.VITE_BOE_PATH_DETAIL_URL
+        }/pathdetails&params=${encodeURIComponent(
+          `routerId=${props.detail.routerId}&routerName=${props.detail.routerName}`
+        )}`,
+        "_top"
+      );
+}
+
+function close() {
+  visiable.value = false;
+}
+</script>
+<style lang="scss">
+.pathDetail {
+  width: 410px;
+  height: 500px;
+  position: relative;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  // background-position: center;
+  // overflow-x: scroll;
+  margin: 20px;
+  .cha {
+    position: absolute;
+    cursor: pointer;
+  }
+  .nameClass {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    padding: 0 20px 0 50px;
+    font-size: 12px;
+  }
+}
+</style>