优化展示图片

src/views/alarmHandling/index.vue

@@ -329,7 +329,7 @@ export default {
   methods: {
     imgOnload() {
       console.log("加载完成");
-      this.alarmLoading = false;
+      //this.alarmLoading = false;
       this.canvasloading = false;
     },
     handleBigPicbox(val) {
@@ -504,7 +504,7 @@ export default {
     //点击当前行
     handleRowClick(row) {
       //this.$refs.multipleTable.toggleRowSelection(row);
-      this.alarmLoading = true;
+      //this.alarmLoading = true;
       console.log(row);
       this.photoPic = row.path;
       console.log(this.photoPic);
@@ -525,6 +525,10 @@ export default {
             });
         }, 300);
       }
+      setTimeout(function () {
+        console.log("关闭遮罩");
+        this.alarmLoading = false;
+      }, 1000);
 
       this.$nextTick(() => {
         this.drawline(row);

src/views/components/carouselChart.vue

@@ -1,45 +1,34 @@
 <template>
   <div class="thumb-example">
     <div class="picTop">
-      <div class="bigimg nopic" v-if="bigPicPath.indexOf('nopic') !== -1">
+      <!-- 判断是否是图片并且不为空 -->
-        <img class="animImg" :src="bigPicPath" />
-      </div>
       <div
         class="bigimg"
-        v-else-if="
+        v-if="
           bigPicPath.indexOf('nopic') == -1 &&
           bigPicPath.indexOf('videos') == -1
         "
-        :style="
+        :style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
-          bigPicPath ? 'backgroundImage:url(' + bigPicPath + '!260x160)' : ''
-        "
       >
         <!--  @click="handleBigPicbox(bigPicPath)"  -->
         <div
           class="nosee"
-          :style="'backgroundImage:url(' + bigPicPath + '!1280x720)'"
+          :style="'backgroundImage:url(' + bigPicPath + ')'"
         ></div>
         <viewer :options="OptionssalseImg" class="bigimgView">
-          <img ref="picJpg" class="animImg" :src="bigPicPath + '!1280x720'" />
+          <img ref="picJpg" class="animImg" :src="bigPicPath + ''" />
         </viewer>
 
         <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
         <!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1280x720'" /> -->
       </div>
-      <div
+      <div class="bigimg nopic" v-if="bigPicPath.indexOf('nopic') !== -1">
-        v-if="
+        <img
-          showBigpic &&
+          class="animImg"
-          bigPicPath.indexOf('nopic') == -1 &&
+          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
-          bigPicPath.indexOf('videos') == -1
+        />
-        "
-        class="showPic"
-        @click="closePic"
-      >
-        <div class="picboxI">
-          <img class="maskPic" :src="bigPicPath" />
-          <i @click="closePic" class="el-icon-circle-close"></i>
-        </div>
       </div>
+
       <div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
         <video
           width="100%"
@@ -51,6 +40,20 @@
         ></video>
       </div>
 
+      <!-- <div
+        v-if="
+          showBigpic &&
+          bigPicPath.indexOf('nopic') == -1 &&
+          bigPicPath.indexOf('videos') == -1
+        "
+        class="showPic"
+        @click="closePic"
+      >
+        <div class="picboxI">
+          <img class="maskPic" :src="bigPicPath" />
+          <i @click="closePic" class="el-icon-circle-close"></i>
+        </div>
+      </div> -->
       <div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
         <i class="el-icon-arrow-left"></i>
       </div>
@@ -215,7 +218,7 @@ export default {
   },
   mounted() {
     console.log(this.terminalPhoto);
-    this.bigPicPath = this.terminalPhoto[0].path;
+    this.bigPicPath = this.terminalPhoto[0].path + "!1280x720";
     this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
     this.total = this.terminalPhoto.length / this.pagesize;
     console.log(this.fiveList);
@@ -240,7 +243,7 @@ export default {
   },
   watch: {
     terminalPhoto: function (newVal, oldVal) {
-      this.bigPicPath = this.terminalPhoto[0].path;
+      this.bigPicPath = this.terminalPhoto[0].path + "!1280x720";
       this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
       this.total = this.terminalPhoto.length / this.pagesize;
     },
@@ -312,13 +315,13 @@ export default {
         (this.page - 1) * this.pagesize,
         this.page * this.pagesize
       );
-      this.bigPicPath = this.fiveList[this.activeSmall].path;
+      this.bigPicPath = this.fiveList[this.activeSmall].path + "!1280x720";
       this.videopath = this.fiveList[this.activeSmall].thumb;
     },
     //大图点击左侧切换图片
     leftClick() {
       this.bigNum--; //执行下一张
-      this.bigPicPath = this.terminalPhoto[this.bigNum].path;
+      this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1280x720";
       this.activeSmall--;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
       console.log(this.page);
@@ -344,7 +347,7 @@ export default {
     //点击右侧切换图片
     rightClick() {
       this.bigNum++; //执行下一张
-      this.bigPicPath = this.terminalPhoto[this.bigNum].path;
+      this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1280x720";
       this.activeSmall++;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
       if (this.activeSmall > 4) {
@@ -371,7 +374,7 @@ export default {
       console.log(row);
       console.log();
       this.activeSmall = index;
-      this.bigPicPath = row.path;
+      this.bigPicPath = row.path + "!1280x720";
       getCoordinate({
         channelId: row.channelId,
         needPic: "1",