修改轮播

src/views/components/carouselChart.vue

@@ -271,4 +271,3 @@ export default {
 }
 // https://v1.github.surmon.me/vue-awesome-swiper/
 </style>
-

src/views/components/carouselChart2.vue

@@ -1,22 +1,30 @@
 <template>
-  <div class="thumb-example2">
+  <div class="thumb-example">
+    <!-- swiper1 -->
     <swiper
       class="swiper gallery-top"
       :options="swiperOptionTop"
       ref="swiperTop"
     >
       <swiper-slide
-        :class="`slide-${index + 1}`"
+        class="slide-1"
         v-for="(item, index) in terminalPhoto"
         :key="item.id"
-        v-bind:style="{
-          'background-image': 'url(' + item.path + ')',
-        }"
-      ></swiper-slide>
-      <!-- <swiper-slide class="slide-2"></swiper-slide>
-      <swiper-slide class="slide-3"></swiper-slide>
-      <swiper-slide class="slide-4"></swiper-slide>
-      <swiper-slide class="slide-5"></swiper-slide> -->
+      >
+        <viewer class="bigimg" v-if="item.path.indexOf('nopic') == -1">
+          <!-- <img :src="item.path + '!1280x720'" alt="" /> -->
+          <img v-if="index == 0" :src="item.path + '!1280x720'" />
+          <img
+            v-else
+            src="../../assets/img/loading.jpg"
+            :data-src="item.path + '!1280x720'"
+            class="swiper-lazy"
+          />
+        </viewer>
+        <div class="bigimg" v-else>
+          <img :src="item.path" alt="" />
+        </div>
+      </swiper-slide>
       <div
         class="swiper-button-next swiper-button-white"
         slot="button-next"
@@ -33,13 +41,56 @@
       ref="swiperThumbs"
     >
       <swiper-slide
-        :class="`slide-${index + 1}`"
+        class="slide"
         v-for="(item, index) in terminalPhoto"
         :key="item.id"
-        v-bind:style="{
-          'background-image': 'url(' + item.path + ')',
-        }"
-      ></swiper-slide>
+      >
+        <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>
@@ -47,10 +98,7 @@
 <script>
 import { Swiper, SwiperSlide } from "vue-awesome-swiper";
 import "swiper/css/swiper.css";
-
 export default {
-  name: "swiper-example-thumbs-gallery",
-  title: "Thumbs gallery with Two-way control",
   components: {
     Swiper,
     SwiperSlide,
@@ -64,22 +112,55 @@ export default {
   data() {
     return {
       swiperOptionTop: {
-        loop: true,
-        loopedSlides: 5, // looped slides should be the same
         spaceBetween: 10,
+        //loop: true,
+        freeMode: true,
+        // loopedSlides: 1,
+        lazy: {
+          loadPrevNext: true,
+          loadPrevNextAmount: 1,
+          loadOnTransitionStart: true,
+        },
+        // lazyLoading: true, //懒加载开启
         navigation: {
           nextEl: ".swiper-button-next",
           prevEl: ".swiper-button-prev",
         },
+        observer: true, //修改swiper自己或子元素时，自动初始化swiper
+        observeParents: true, //修改swiper的父元素时，自动初始化swiper
+        onSlideChangeEnd: function (swiper) {
+          swiper.update();
+        },
+        virtual: {
+          slides: (function () {
+            var slides = [];
+            for (var i = 0; i < 100; i += 1) {
+              slides.push("Slide " + (i + 1));
+            }
+            return slides;
+          })(),
+        },
       },
       swiperOptionThumbs: {
-        loop: true,
-        loopedSlides: 5, // looped slides should be the same
         spaceBetween: 10,
         centeredSlides: true,
         slidesPerView: "auto",
         touchRatio: 0.2,
+        lazyLoading: true, //懒加载开启
         slideToClickedSlide: true,
+        lazy: {
+          loadPrevNext: true,
+          loadPrevNextAmount: 5,
+          loadOnTransitionStart: true,
+          //loadOnTransitionStart: true,
+        },
+        observer: true, //修改swiper自己或子元素时，自动初始化swiper
+        observeParents: true, //修改swiper的父元素时，自动初始化swiper
+        onSlideChangeEnd: function (swiper) {
+          swiper.update();
+        },
+        //loop: true,
+        //loopedSlides: 4,
       },
     };
   },
@@ -91,36 +172,111 @@ export default {
       swiperThumbs.controller.control = swiperTop;
     });
   },
+
+  methods: {},
 };
 </script>
-
-<style lang="less" scoped>
-.thumb-example2 {
-  height: 480px;
-  background-color: #000;
-  .swiper {
-    .swiper-slide {
-      background-size: cover;
-      background-position: center;
-    }
-
-    &.gallery-top {
-      height: 80%;
+<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;
+    .slide-1 {
       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;
+      }
     }
-    &.gallery-thumbs {
-      height: 20%;
-      box-sizing: border-box;
-      padding: 10px 0;
+    .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 .swiper-slide {
-      width: 25%;
-      height: 100%;
-      opacity: 0.4;
+  }
+  .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;
+      }
     }
-    &.gallery-thumbs .swiper-slide-active {
-      opacity: 1;
+
+    .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);
+  }
 }
+// https://v1.github.surmon.me/vue-awesome-swiper/
 </style>