loading

src/components/common/Sidebar.vue

@@ -135,7 +135,7 @@ export default {
   },
   watch: {
     activeIndex(newValue) {
-      if (newValur != this.$route.path) {
+      if (newValue != this.$route.path) {
         this.activeIndex = this.$route.path;
       }
     },

src/views/components/carouselChart.vue

@@ -12,7 +12,12 @@
         :key="item.id"
       >
         <viewer class="bigimg" v-if="item.path.indexOf('nopic') == -1">
-          <img :src="item.path + '!1330x670'" alt="" />
+          <!-- <img :src="item.path + '!1330x670'" alt="" /> -->
+          <img
+            src="../../assets/img/nopic.jpg"
+            :src="item.path + '!1330x670'"
+            class="swiper-lazy"
+          />
         </viewer>
         <div class="bigimg" v-else>
           <img :src="item.path" alt="" />
@@ -76,7 +81,13 @@ export default {
         spaceBetween: 10,
         //loop: true,
         freeMode: true,
-        // loopedSlides: 4,
+        loopedSlides: 4,
+        lazy: {
+          loadPrevNext: true,
+          loadPrevNextAmount: 1,
+          loadOnTransitionStart: true,
+        },
+        lazyLoading: true, //懒加载开启
         navigation: {
           nextEl: ".swiper-button-next",
           prevEl: ".swiper-button-prev",
@@ -87,9 +98,10 @@ export default {
         centeredSlides: true,
         slidesPerView: "auto",
         touchRatio: 0.2,
+        lazyLoading: true, //懒加载开启
         slideToClickedSlide: true,
         //loop: true,
-        //loopedSlides: 4,
+        loopedSlides: 4,
       },
     };
   },
@@ -158,6 +170,7 @@ export default {
       img {
         width: 260px;
         height: 160px;
+        object-fit: fill;
       }
     }
 

src/views/pictureRotation/index.vue

@@ -35,7 +35,8 @@
     <div class="imageCenter" v-loading="loading">
       <div class="imgList" v-for="(item, index) in picList" :key="index">
         <viewer class="bigpic" v-if="!item.path.includes('mp4')">
-          <img :src="item.path + '!1280x720'" />
+          <!-- <img :src="item.path + '!1280x720'" /> -->
+          <el-image :src="item.path + '!1280x720'" lazy></el-image>
         </viewer>
         <video width="100%" height="90%" controls autoplay v-else>
           <source :src="item.path" type="video/mp4" />
@@ -306,7 +307,7 @@ export default {
         width: 100%;
         height: 100%;
       }
-      img {
+      .el-image {
         width: 100%;
         height: 100%;
       }

src/views/realTimeMonitor/index.vue

@@ -30,13 +30,15 @@
         </el-tree>
       </div>
       <!-- 带参数的中心内容右侧参数区 -->
-      <div class="picSetBox" v-loading="loading">
+      <div class="picSetBox">
-        <div class="swiperBox">
+        <div class="swiperBox" v-loading="loading">
           <carouselChart
             :terminalPhoto="terminalPhoto"
             v-if="terminalPhoto"
           ></carouselChart>
-          <div class="totalPic" v-if="totalPic">图片总数：{{ totalPic }}张</div>
+          <div class="totalPic" v-if="totalPic !== 0">
+            图片总数：{{ totalPic }}张
+          </div>
         </div>
         <div class="parameterArea">
           <div class="paramsDate">
@@ -296,6 +298,7 @@ export default {
                 path: this.nopicPath,
               },
             ];
+            this.totalPic = 0;
           } else {
             this.terminalPhoto = res.data.list;
             this.totalPic = res.data.num;