优化图片

src/views/components/carouselChart.vue

@@ -6,13 +6,7 @@
         v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
       >
         <el-image :src="currentPicPath">
-          <div
-            slot="placeholder"
-            class="image-slot"
-            :style="{
-              backgroundImage: 'url(' + currentPicPath + '!260x160' + ')',
-            }"
-          >
+          <div slot="placeholder" class="image-slot">
             <i class="el-icon-loading"></i>
           </div>
         </el-image>
@@ -23,7 +17,7 @@
         @click="handleBigPicbox(currentPicPath)"
       >
         <!-- :preview-src-list="srcList"  @click="handleBigPicbox(currentPicPath)" -->
-        <el-image
+        <!--  <el-image
           :src="currentPicPath"
           @load="loadImage"
           @error="setDefaultImage"
@@ -32,19 +26,20 @@
           width="100%"
           height="100%"
         >
-          <div
-            slot="placeholder"
-            class="image-slot"
-            :style="{
-              backgroundImage: 'url(' + currentPicPath + '!260x160' + ')',
-            }"
-          >
+          <div slot="placeholder" class="image-slot">
             <i class="el-icon-loading"></i>
-          </div>
+          </div> 
           <template slot="error">
             <img src="../../assets/img/nodatapic2.jpg" />
           </template>
-        </el-image>
+        </el-image>-->
+        <img
+          :src="currentPicPath"
+          ref="picJpg"
+          id="alarmPic"
+          width="100%"
+          height="100%"
+        />
         <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
         <canvas id="alarmCanvas" class="alarmCanvas" ref="alarmCanvas"></canvas>
         <!-- <img :src="currentPicPath + '!1366x768'" @load="loadImage" /> -->
@@ -228,6 +223,7 @@ export default {
   },
   data() {
     return {
+      piclist: [],
       items: [
         "Item 1",
         "Item 2",
@@ -245,7 +241,7 @@ export default {
       mediaType: 0, //判断图片类型是视频还是图片
       activeSmall: 0, //索引选中小图,
       currentPage: 0,
-      srcList: [],
+
       radioPx: "",
       fileSize: "",
       roleUser: "",
@@ -420,17 +416,12 @@ export default {
     //获取第一张大图
     changeBigPic(data, i) {
       if (data) {
+        this.currentPicPath = data.path;
         console.log("aaaaaaaaaaaaaaaaaaaaa", data.mediaType);
         this.mediaType = data.mediaType !== null ? data.mediaType : 0;
-
         this.picDataAlarm = data;
-        this.srcList = [];
         this.localPoints = [];
         this.activeSmall = i;
-
-        this.currentPicPath = data.path;
-        this.srcList.push(data.path);
-
         if (data.width != undefined) {
           this.radioPx = data.width + "x" + data.height;
         } else {
@@ -482,8 +473,8 @@ export default {
       }
     },
     loadImage() {
-      console.log("loading");
-      this.picLoading = false;
+      // console.log("loading");
+      // this.picLoading = false;
       this.drawlineBig(this.picDataAlarm);
     },
     setDefaultImage(e) {
@@ -1059,5 +1050,8 @@ export default {
       }
     }
   }
+  .hideimg {
+    display: none;
+  }
 }
 </style>

src/views/components/carouselChartmore.vue

@@ -6,13 +6,7 @@
         v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
       >
         <el-image :src="currentPicPath">
-          <div
-            slot="placeholder"
-            class="image-slot"
-            :style="{
-              backgroundImage: 'url(' + currentPicPath + '!260x160' + ')',
-            }"
-          >
+          <div slot="placeholder" class="image-slot">
             <i class="el-icon-loading"></i>
           </div>
         </el-image>
@@ -23,7 +17,7 @@
         @click="handleBigPicbox(currentPicPath)"
       >
         <!-- :preview-src-list="srcList"  @click="handleBigPicbox(currentPicPath)" -->
-        <el-image
+        <!--  <el-image
           :src="currentPicPath"
           @load="loadImage"
           @error="setDefaultImage"
@@ -32,19 +26,20 @@
           width="100%"
           height="100%"
         >
-          <div
-            slot="placeholder"
-            class="image-slot"
-            :style="{
-              backgroundImage: 'url(' + currentPicPath + '!260x160' + ')',
-            }"
-          >
+          <div slot="placeholder" class="image-slot">
             <i class="el-icon-loading"></i>
-          </div>
+          </div> 
           <template slot="error">
             <img src="../../assets/img/nodatapic2.jpg" />
           </template>
-        </el-image>
+        </el-image>-->
+        <img
+          :src="currentPicPath"
+          ref="picJpg"
+          id="alarmPic"
+          width="100%"
+          height="100%"
+        />
         <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
         <canvas id="alarmCanvas" class="alarmCanvas" ref="alarmCanvas"></canvas>
         <!-- <img :src="currentPicPath + '!1366x768'" @load="loadImage" /> -->
@@ -228,6 +223,7 @@ export default {
   },
   data() {
     return {
+      piclist: [],
       items: [
         "Item 1",
         "Item 2",
@@ -245,7 +241,7 @@ export default {
       mediaType: 0, //判断图片类型是视频还是图片
       activeSmall: 0, //索引选中小图,
       currentPage: 0,
-      srcList: [],
+
       radioPx: "",
       fileSize: "",
       roleUser: "",
@@ -420,17 +416,12 @@ export default {
     //获取第一张大图
     changeBigPic(data, i) {
       if (data) {
+        this.currentPicPath = data.path;
         console.log("aaaaaaaaaaaaaaaaaaaaa", data.mediaType);
         this.mediaType = data.mediaType !== null ? data.mediaType : 0;
-
         this.picDataAlarm = data;
-        this.srcList = [];
         this.localPoints = [];
         this.activeSmall = i;
-
-        this.currentPicPath = data.path;
-        this.srcList.push(data.path);
-
         if (data.width != undefined) {
           this.radioPx = data.width + "x" + data.height;
         } else {
@@ -482,8 +473,8 @@ export default {
       }
     },
     loadImage() {
-      console.log("loading");
-      this.picLoading = false;
+      // console.log("loading");
+      // this.picLoading = false;
       this.drawlineBig(this.picDataAlarm);
     },
     setDefaultImage(e) {
@@ -1059,5 +1050,8 @@ export default {
       }
     }
   }
+  .hideimg {
+    display: none;
+  }
 }
 </style>

src/views/pictureRotation/index.vue

@@ -212,6 +212,7 @@
           :key="carouselKey"
           :terminalPhoto="terminalPhoto"
           :photoNum="photoNum"
+          v-loading="historyPicLoading"
         ></carouselChartmore>
       </div>
     </div>
@@ -328,7 +329,7 @@ export default {
     //获取图片
     getTerminalPhotoList(channelId, date, termId) {
       console.log(channelId, date, termId);
-
+      this.historyPicLoading = true;
       console.log("zhanshi asdadadadadadsddadadadadad", this.terminalPhoto);
       //this.terminalPhoto = [];
       getTerminalPhotoListJoggle({
@@ -354,6 +355,7 @@ export default {
           this.$nextTick(() => {
             this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0);
           });
+          this.historyPicLoading = false;
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
@@ -789,6 +791,9 @@ export default {
       width: 100%;
       height: calc(100% - 10px);
     }
+    .el-loading-mask {
+      background-color: rgba(0, 0, 0, 0.3);
+    }
   }
 }
 [v-cloak] {

src/views/realTimeMonitor/index.vue

@@ -1039,24 +1039,24 @@ export default {
             this.$message({
               duration: 1500,
               showClose: true,
-              message: "下发指令超时，请重试！",
-              type: "warning",
+              message: "拍照指令已下发",
+              type: "success",
             });
           } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
-            this.statusNum = 0;
             this.btnpicloading = false;
             this.btnvideoloading = false;
+            this.statusNum = 0;
             clearInterval(this.statusTimer);
             this.statusTimer = null;
             this.$message({
               duration: 1500,
               showClose: true,
-              message: "下发指令成功！",
+              message: "拍照指令下发成功！",
               type: "success",
             });
 
-            // clearInterval(this.timer);
-            // this.timer = null;
+            clearInterval(this.timer);
+            this.timer = null;
             // this.timer = window.setInterval(() => {
             //   this.newPicApi();
             //   this.i++;
@@ -1097,7 +1097,7 @@ export default {
           type: "warning",
           duration: 60000,
         });
-        // this.newPicApi();
+        //this.newPicApi();
       }
     },
     //获取最新图片