frontend/src/views/components/carouselChartnew.vue

<template>
  <div class="thumb-example">
    <!-- swiper1 -->

    <swiper
      class="swiper gallery-top"
      :options="swiperOptionTop"
      ref="swiperTop"
    >
      <!--  -->
      <!-- <viewer class="swiper-slide"> 
        
      </viewer> -->
      <!-- <viewer class="swiper-slide">
       
      </viewer> -->

      <div
        class="swiper-button-next swiper-button-white"
        slot="button-next"
      ></div>
      <div
        class="swiper-button-prev swiper-button-white"
        slot="button-prev"
      ></div>
    </swiper>

    <!-- swiper2 Thumbs -->
    <swiper
      class="swiper gallery-thumbs"
      :options="swiperOptionThumbs"
      ref="swiperThumbs"
    >
      <swiper-slide
        class="slide"
        v-for="(item, index) in terminalPhoto"
        :key="item.id"
      >
        <div class="bigimg" v-if="item.path.indexOf('nopic') == -1">
          <!-- <img :src="item.path + '!1280x720'" alt="" /> -->
          <img v-if="index == 0" :src="item.path + '!260x160'" />
          <img
            v-else
            src="../../assets/img/loading.jpg"
            :data-src="item.path + '!260x160'"
            class="swiper-lazy"
          />
        </div>
        <div class="bigimg" v-else>
          <img :src="item.path" alt="" />
        </div>
        <!-- <img v-if="index == 0" :src="item.path + '!1280x720'" />

        <img
          src="item.path + '!260x160'"
          alt=""
          :data-src="item.path + '!260x160'"
          class="swiper-lazy"
          v-else-if="item.path.indexOf('nopic') == -1"
        />
        <img :src="item.path" alt="" v-else /> -->
        <p class="timeInfo" v-if="item.path.indexOf('nopic') == -1">
          <el-tooltip
            class="item"
            effect="dark"
            content="拍照时间"
            placement="top-start"
          >
            <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
          </el-tooltip>

          (
          <el-tooltip
            class="item"
            effect="dark"
            content="图片上传时间"
            placement="top-start"
          >
            <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
          </el-tooltip>
          )
          <span>--通道{{ item.channelId }}</span>
        </p>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    terminalPhoto: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    let a = "1111111111111";
    return {
      imgflag: false,
      swiperOptionTop: {
        lazy: {
          loadPrevNext: true,
          loadPrevNextAmount: 1,
          loadOnTransitionStart: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        virtual: {
          slides: [],
          renderSlide: function (slide, index) {
            if (slide.path.indexOf("nopic") != -1) {
              return `<div class="swiper-slide"><div class="bigimg"><img src="static/img/nopic.0e9cfc7c.jpg" alt="" /></div></div>`;
            } else {
              return (
                `<view class="swiper-slide">` +
                `<div class="bigimg"  id="imgView" style="background:url(${
                  slide.path + "!80x720"
                });background-size:100% 100%">` +
                `<img id="imgid" src=" ${slide.path + "!1280x720"}  " />
                </view>`
              );
            }
          },
        },
      },
      swiperOptionThumbs: {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        slideToClickedSlide: true,
        lazy: {
          loadPrevNext: true,
          loadPrevNextAmount: 5,
          loadOnTransitionStart: true,
        },
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.$swiper;
      const swiperThumbs = this.$refs.swiperThumbs.$swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  },
  methods: {},
  watch: {
    terminalPhoto: function (newVal, oldVal) {
      this.swiperOptionTop.virtual.slides = newVal;
    },
  },
  created() {
    console.log(this.swiperOptionTop.virtual.slides);
    this.swiperOptionTop.virtual.slides = this.terminalPhoto;
  },
};
</script>
<style lang="less">
.thumb-example {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100% - 26px);
  box-sizing: border-box;
  .gallery-top {
    //background: #fcc;
    width: 100%;
    height: 80%;
    overflow: hidden;
    margin-bottom: 4px;
    //border: 3px solid transparent;
    .swiper-slide {
      width: 100%;
      overflow: hidden;
      .bigimg {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
    .swiper-button-prev.swiper-button-disabled,
    .swiper-button-next.swiper-button-disabled {
      opacity: 0.35;
      cursor: auto;
      pointer-events: none;
      display: none !important;
    }
  }
  .gallery-thumbs {
    width: 100%;
    height: 18%;
    .slide {
      width: 20%;
      border: 3px solid transparent;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;

      .bigimg {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      img {
        //width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }

    .timeInfo {
      position: absolute;
      bottom: 0px;
      width: 100%;
      background: #f0f0f0;
      padding: 8px 0px;
      font-size: 12px;
      text-align: center;
      color: #333;
    }
  }

  .swiper-button-next.swiper-button-white,
  .swiper-container-rtl .swiper-button-prev.swiper-button-white,
  .swiper-button-prev.swiper-button-white,
  .swiper-container-rtl .swiper-button-next.swiper-button-white {
    width: 40px;
    height: 40px;
    border-radius: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
  .swiper-button-next:after,
  .swiper-container-rtl .swiper-button-prev:after,
  .swiper-button-prev:after,
  .swiper-container-rtl .swiper-button-next:after {
    transform: scale(0.5);
  }
  .pismask {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    top: 0px;
    left: 0px;
  }
}
// https://v1.github.surmon.me/vue-awesome-swiper/
</style>