优化查看历史图片

src/views/realTimeMonitor/components/carouselChart.vue

@@ -99,7 +99,7 @@
               "
             >
               <!-- <el-image v-lazy="item.path + '!260x160'"></el-image> -->
-              <img v-lazy="item.path + '!260x160'" />
+              <img v-lazy="item.path + '!160x101'" />
               <!--  <img :src="item.path + '!260x160'" />-->
               <!-- :class="{ alarmSpan: item.isAlarm === 1 }" -->
               <p class="timeInfo">
@@ -134,7 +134,7 @@
             </div>
             <div class="picBox" v-else-if="item.mediaType == 1">
               <!-- <el-image :src="item.thumb + '!260x160'"></el-image> -->
-              <img v-lazy="item.thumb + '!260x160'" />
+              <img v-lazy="item.thumb + '!260x161'" />
               <p class="timeInfo">
                 <i class="el-icon-video-camera"></i>
                 <el-tooltip
@@ -218,6 +218,9 @@ export default {
     protocolInfo: {
       type: Number,
     },
+    fistPath: {
+      type: String,
+    },
   },
   data() {
     return {
@@ -233,7 +236,7 @@ export default {
         "Item 9",
         "Item 10",
       ],
-      picLoading: true,
+      picLoading: false,
       currentPicPath: "", //大图
       mediaType: "", //判断图片类型是视频还是图片
       activeSmall: 0, //索引选中小图,
@@ -260,6 +263,7 @@ export default {
   },
   mounted() {
     ////console.log(this.terminalPhoto);
+
     this.changeBigPic(this.terminalPhoto[0], 0);
   },
   watch: {
@@ -457,6 +461,9 @@ export default {
     loadImage() {
       console.log("loading");
       this.picLoading = false;
+
+      this.currentPicPath = this.fistPath;
+
       this.drawlineBig(this.picDataAlarm);
     },
     setDefaultImage(e) {

src/views/realTimeMonitor/components/morePicPreveiw.vue

@@ -19,10 +19,22 @@
       </div>
     </div>
     <div class="picmain" v-loading="picLoading">
+      <el-skeleton v-if="fistflag" style="width: 100%; height: 100%" animated>
+        <template slot="template">
+          <el-skeleton-item variant="image" />
+          <div class="littleBox">
+            <el-skeleton-item variant="image" />
+            <el-skeleton-item variant="image" />
+            <el-skeleton-item variant="image" />
+            <el-skeleton-item variant="image" />
+          </div>
+        </template>
+      </el-skeleton>
       <carouselChart
         ref="carouselpic"
         :terminalPhoto="terminalPhoto"
         :photoNum="photoNum"
+        :fistPath="fistPath"
         v-if="terminalPhoto.length > 0"
       ></carouselChart>
     </div>
@@ -47,6 +59,8 @@ export default {
       nopicPath: require("@/assets/img/nopic.jpg"),
       picLoading: false,
       photoNum: 10,
+      fistPath: "",
+      fistflag: true,
     };
   },
   mounted() {},
@@ -55,6 +69,7 @@ export default {
       this.isShow = true;
       console.log(data);
       this.deviceData = data;
+      this.fistPath = data.path;
       if (data.photoTime == null) {
         data.photoTime = new Date().getTime();
       }
@@ -63,7 +78,7 @@ export default {
     //获取图片
     getTerminalPhotoList(channelid, date, termId) {
       this.terminalPhoto = [];
-      this.picLoading = true;
+      //this.picLoading = true;
       getTerminalPhotoListJoggle({
         channelid: channelid,
         time: date,
@@ -72,6 +87,7 @@ export default {
         .then((res) => {
           console.log(res);
           this.picLoading = false;
+          this.fistflag = false;
           if (res.data.list.length == 0) {
             this.terminalPhoto = [
               {
@@ -107,6 +123,7 @@ export default {
     },
     handleclose() {
       this.isShow = false;
+      this.fistflag = true;
     },
   },
 };
@@ -151,6 +168,33 @@ export default {
   .picmain {
     width: 100%;
     height: calc(100% - 10px);
+    .el-skeleton {
+      width: 100%;
+      height: 100%;
+      .el-skeleton__image {
+        width: 100%;
+        height: 80%;
+        svg {
+          width: 60%;
+          height: 60%;
+        }
+      }
+      .littleBox {
+        display: flex;
+        height: 18%;
+        margin-top: 2%;
+        align-items: center;
+        justify-content: space-around;
+        .el-skeleton__image {
+          width: 23%;
+          height: 100%;
+        }
+        svg {
+          width: 30%;
+          height: 30%;
+        }
+      }
+    }
   }
 }
 </style>