tmzn-weihe/src/views/components/layerList/planDialog.vue

<template>
  <div class="plan-dialog-container" v-if="visible">
    <div class="plan-title">
      <span class="title-text">防汛预案</span>
      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="closeDialog" />
    </div>
    <div class="plan-content">
      <el-tabs tab-position="left" style="height: 5.85rem">
        <el-tab-pane :label="item.label" v-for="(item, index) in this.planItems" :key="index">
          <el-carousel :ref="'mainCarousel' + index" :interval="5000" :autoplay="false" arrow="always" indicator-position="none">
            <el-carousel-item v-for="(image,i) in item.imageList" :key="i">
              <div class="image-wrapper">
                <el-image :src="image" :preview-src-list="item.imageList" fit="cover" class="main-image" />
                <!-- <div class="fullscreen-btn" @click="openFullscreen(index)">
                  <img src="@/assets/image/smart-early-warning/fullScreen.png" alt="" />
                </div> -->
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      planList: [],
      imgsOne: [],
      imgsTwo: [],
      imgsThree: [],
      imgsFour: []
    }
  },
  created() {
    this.loadImages()
  },
  mounted() {
    this.$globalEventBus.$on('showPlanDialog', (data) => {
      this.planList = data.list
      this.visible = data.list.length > 0 ? true : false
    })
  },
  computed: {
    planItems() {
      return this.planList.map((item) => {
        if (item.id == '12') {
          return { ...item, imageList: this.imgsOne }
        } else if (item.id == '13') {
          return { ...item, imageList: this.imgsTwo }
        } else if (item.id == '14') {
          return { ...item, imageList: this.imgsThree }
        } else if (item.id == '15') {
          return { ...item, imageList: this.imgsFour }
        }
        console.info(item)
        return item
      })
    }
  },
  methods: {
    loadImages() {
      const imagesRequireContext1 = require.context('@/assets/image/planOne', false, /\.png$|\.jpg$/)
      this.imgsOne = imagesRequireContext1.keys().map((imagePath) => imagesRequireContext1(imagePath))
      const imagesRequireContext2 = require.context('@/assets/image/planTwo', false, /\.png$|\.jpg$/)
      this.imgsTwo = imagesRequireContext2.keys().map((imagePath2) => imagesRequireContext2(imagePath2))
      const imagesRequireContext3 = require.context('@/assets/image/planThree', false, /\.png$|\.jpg$/)
      this.imgsThree = imagesRequireContext3.keys().map((imagePath3) => imagesRequireContext3(imagePath3))
      const imagesRequireContext4 = require.context('@/assets/image/planFour', false, /\.png$|\.jpg$/)
      this.imgsFour = imagesRequireContext4.keys().map((imagePath4) => imagesRequireContext4(imagePath4))
    },
    openFullscreen(index) {
      const img = this.$el.querySelectorAll('.main-image')[index].querySelector('img')
      img.click()
    },
    closeDialog(){
      this.visible = false
      this.$globalEventBus.$emit('closePlanDialog',this.planList)
    }
  },
  destroyed() {
    this.$globalEventBus.$off('showPlanDialog')
  }
}
</script>

<style lang="scss" scoped>
.plan-dialog-container {
  position: absolute;
  top: px-to-rem(270);
  right: calc(50% - px-to-rem(590));
  width: px-to-rem(1180);
  z-index: 1001;
  .plan-title {
    background: url('@/assets/image/common/planTitleBg.png') no-repeat;
    background-size: 100% 100%;
    height: px-to-rem(39);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 px-to-rem(20);
    font-size: px-to-rem(16);
    color: #fff;
    .title-text {
      font-weight: bold;
      margin-left: px-to-rem(20);
    }
  }
  .plan-content {
    background-color: rgba(35, 61, 108, 0.8);
    :deep(.el-tabs__content) {
      padding: px-to-rem(10);
      padding-left: 0;
    }
    :deep(.el-tabs__item) {
      background-color: transparent;
      color: #fff;
      width: px-to-rem(170);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: px-to-rem(36);
      line-height: px-to-rem(36);
      font-weight: 400;
      font-size: px-to-rem(16);
    }
    :deep(.el-tabs__item.is-active) {
      background: #498ee3;
      font-weight: 400;
      font-size: px-to-rem(16);
      color: #f5f5f5;
    }
    :deep(.el-tabs__nav-wrap::after) {
      background-color: #4d628b;
    }
    :deep(.el-carousel__container) {
      height: px-to-rem(563);
    }
    .image-wrapper {
     height: px-to-rem(563); // 与 carousel 容器高度一致
     display: flex;
     align-items: center;
     justify-content: center;
     .main-image {
      height: 100%;
      width: auto;
      max-width: 100%;
      object-fit: contain; // 保持图片比例，完整显示图片
    }
    }
  }
  .fullscreen-btn {
    position: absolute;
    bottom: px-to-rem(10);
    right: px-to-rem(10);
    width: px-to-rem(40);
    height: px-to-rem(40);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
  }

  .fullscreen-btn:hover {
    transform: scale(1.1);
  }
}
</style>