fe-student/src/components/PathDetailImage.vue

<template>
  <div 
    class="pathDetail" 
    v-if="visiable" 
    :style="{
      background:`url('${imgAttr.backurl}') no-repeat`,
      backgroundSize: 'contain'
      }">
    <div v-if="detail.chapterDtoList" v-for="(item,i) in detail.chapterDtoList.slice(0,8)" :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?imgAttr.currentBack:imgAttr.nameBack}')`,
            backgroundSize:'100%',
            width:`${current===i?107:93}px`,
            height:`${current===i?imgAttr.cheightC:imgAttr.cheight}px`,
            lineHeight:'50px',color: current===i?imgAttr.ccolors:imgAttr.colors}">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, defineProps, ref} from "vue";
import {ElMessage} from "element-plus";
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 back1 from '@/assets/image/pathdetails/back1.png'
import nameBack1 from '@/assets/image/pathdetails/nameBack1.png'
import currentBack1 from '@/assets/image/pathdetails/currentBack1.png'
import back2 from '@/assets/image/pathdetails/back2.png'
import nameBack2 from '@/assets/image/pathdetails/nameBack2.png'
import currentBack2 from '@/assets/image/pathdetails/currentBack2.png'
import {useRouter} from "vue-router/dist/vue-router";

const props = defineProps({
  value: String,
  img: String,
  detail: {
    type: Object,
    default: {}
  }
})
const router = useRouter();
const visiable = ref(true)
const imageAttrs = {
  '路径图背景': {
    width: 1437,
    height: 594,
    cheight:70,
    cheightC:80,
    backurl: back,
    currentBack: currentBack,
    nameBack: nameBack,
    ccolors: '#FFF',
    colors: '#FFF',
    positions: [
      {left: 50, top: 425},
      {left: 440, top: 425},
      {left: 400, top: 315},
      {left: 515, top: 220},
      {left: 800, top: 200},
      {left: 660, top: 115},
      {left: 760, top: 35},
      {left: 1000, top: 25},
    ]
  },
  '路径图2': {
    width: 1437,
    height: 594,
    cheight:100,
    cheightC:106,
    backurl: back2,
    currentBack: currentBack2,
    nameBack: nameBack2,
    ccolors: '#FFF3E5',
    colors: '#FFF',
    positions: [
      {left: 40, top: 380},
      {left: 160, top: 290},
      {left: 330, top: 270},
      {left: 440, top: 200},
      {left: 610, top: 170},
      {left: 780, top: 130},
      {left: 890, top: 60},
      {left: 1060, top: 30},
    ]
  },
  '路径图3': {
    width: 1437,
    height: 594,
    cheight:70,
    cheightC:80,
    backurl: back1,
    currentBack: currentBack1,
    nameBack: nameBack1,
    ccolors: '#FFF',
    colors: '#A06438',
    positions: [
      {left: 20, top: 390},
      {left: 210, top: 380},
      {left: 320, top: 275},
      {left: 485, top: 265},
      {left: 645, top: 220},
      {left: 820, top: 180},
      {left: 960, top: 150},
      {left: 1050, top:60},
    ]
  }
}

const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img&&props.img.includes(e))] || {})
console.log(imgAttr)
const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.id === props.detail.currentStageId))

function show() {
  visiable.value = true
}

function toDetail(i) {
  // 预览和学习设置
  let previewSetting = props.detail.previewSetting;
  let studySetting = props.detail.studySetting;
  let isStudy = false;
  let chapterId = props.detail.chapterDtoList[i].id
  console.log(studySetting)
  if(previewSetting==null){
    // 如果未设置预览 则只可以看当前关卡 其余关卡不让点击
    if (current.value !== i) {
      ElMessage.warning("当前关卡不可预览");
      return
    }
    isStudy = true;
  }else{
    if (current.value !== i) {
      let lookArr = [];
      lookArr = previewSetting.split(',')
      if((i+1)>=lookArr[0] && (i+1)<=lookArr[1]){
        if(studySetting!==null){
          let studyArr = [];
          studyArr = studySetting.split(',')
          if((i+1)>=studyArr[0] && (i+1)<=studyArr[1]){
            isStudy = true;
          }else{
            isStudy = false;
          }
        }else{
          isStudy = false;
        }
      }else{
        ElMessage.warning("当前关卡不可预览");
        return
      }
    }else{
      isStudy = true;
    }
  }
  (import.meta.env.MODE === "development" || import.meta.env.MODE === "test")
      ? router.push({
        path: "/pathdetails",
        query: {routerId: props.detail.id, routerName: props.detail.name, isStudy, chapterId},
      })
      : window.open(
          `${window.location.protocol + import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
              `routerId=${props.detail.id}&routerName=${props.detail.name}&chapterId=${chapterId}&studySetting=${studySetting}`
          )}`
      ,'_top');
}

function close() {
  visiable.value = false
}
</script>
<style lang="scss">
.pathDetail {
  width: 1232px;
  height: 1011px;
  min-width: 1232px;
  position: relative;
}

.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>