告警图片展示

src/views/alarmHandling/index.vue

@@ -271,18 +271,19 @@
                   icon="el-icon-picture-outline"
                   @click.stop="handlePicHistory(item)"
                 ></el-button>
-                <!-- <el-button
-                  type="primary"
-                  :loading="btnpicloading"
-                  @click.stop="handlePicList(item)"
-                  >主动拍照</el-button
-                >
-                <el-button type="primary" @click.stop="handlePicHistory(item)"
-                  >历史图片</el-button
-                > -->
               </div>
-              <div class="picshow" @click="handlePicAlarm(item, index)">
+              <div class="picshow" @click="handlePicAlarm(item)">
-                <img :src="item.path + '!1366x768'" ref="picJpg" />
+                <img
+                  :id="'img' + index"
+                  :ref="'imgref' + index"
+                  :src="item.path + '!1366x768'"
+                  ref="picJpg"
+                />
+                <canvas
+                  :ref="'canvansref' + index"
+                  :id="'canvas_' + index"
+                  class="canvasAll"
+                ></canvas>
               </div>
               <div class="caption">
                 <p class="infoTop">
@@ -337,8 +338,14 @@
         :style="{ transform: 'scale(' + zoomD + ')' }"
         @mousedown="move"
       >
-        <img @load="imgOnload" class="maskPic img" :src="bigPhotoPic" ref="" />
+        <img
-        <canvas id="myCanvas" class="myCanvas" ref="myCanvasbig"></canvas>
+          @load="imgOnload"
+          id="bigimg"
+          ref="bigimgref"
+          class="maskPic img"
+          :src="bigPhotoPic"
+        />
+        <canvas id="bigCanvas" class="myCanvas" ref="myCanvasbig"></canvas>
       </div>
       <div class="viewClose" @click="closePic">
         <i class="el-icon-close"></i>
@@ -510,12 +517,13 @@ export default {
       this.canvasloading = true;
       this.canvansdata = val;
       if (val.path !== "" && this.tableData.length !== 0) {
-        console.log(val);
         this.bigPhotoPic = val.path;
         this.showBigpic = true;
+        setTimeout(() => {
           this.$nextTick(() => {
             this.drawline2(val);
           });
+        }, 100);
       }
     },
     closePic() {
@@ -586,8 +594,17 @@ export default {
           this.photoPic = res.data.list[0].path;
           this.selectRow = res.data.list[0];
           console.log(this.selectRow);
+
+          if (this.tableShow) {
+            this.$nextTick(() => {
               this.$refs.multipleTable.setCurrentRow(this.selectRow);
               this.handleRowClick(this.selectRow);
+            });
+          } else {
+            this.$nextTick(() => {
+              this.drawlineListAll(this.tableData);
+            });
+          }
         })
         .catch((err) => {
           console.log(err);
@@ -662,9 +679,12 @@ export default {
     //绘制大图告警区域
     drawline2(data) {
       console.log(data);
+      console.log(document.getElementById("bigCanvas"));
+      console.log(document.getElementById("bigimg"));
+      this.canvas = document.getElementById("bigCanvas");
+      this.imgpic = document.getElementById("bigimg");
       console.log(this.canvas);
-      this.canvas = this.$refs.myCanvasbig;
+      console.log(this.imgpic);
-      this.imgpic = this.$refs.picJpg;
       this.textInfo = data.enname;
       this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
       this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
@@ -688,7 +708,7 @@ export default {
       // this.ctx.strokeStyle = "red"; //线的颜色
       this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
       //this.ctx.strokeRect(data.x, data.y, data.width, data.height);
-      this.ctx.font = "12px normal";
+      this.ctx.font = "14px normal";
       this.ctx.fillStyle = "#ff0000";
       //this.ctx.fillText(this.textInfo, top, left + 24);
       //距离上面有空间
@@ -700,14 +720,15 @@ export default {
       this.ctx.closePath();
       this.ctx.stroke();
     },
+
     //绘制所有的图片告警区域
     drawlineListAll(val) {
       for (let i = 0; i < val.length; i++) {
         console.log(i);
-        console.log(this.$refs.myCanvas);
+        console.log(document.getElementById("canvas_" + i));
-        console.log(this.$refs.picJpg);
+        console.log(document.getElementById("img" + i));
-        this.canvas = this.$refs.myCanvas;
+        this.canvas = document.getElementById("canvas_" + i);
-        this.imgpic = this.$refs.picJpg;
+        this.imgpic = document.getElementById("img" + i);
         this.textInfo = val[i].enname;
         console.log(this.textInfo);
         console.log(this.imgpic.offsetWidth);
@@ -747,49 +768,7 @@ export default {
         this.ctx.stroke();
       }
     },
-    //绘制列表大图
-    drawlineList(data, index) {
-      console.log(data);
-      console.log(this.$refs.myCanvasbig);
-      console.log(this.$refs.picJpg);
-      console.log("picJpg" + index);
-      this.canvas = this.$refs.myCanvasbig;
-      this.imgpic = this.$refs.picJpg;
-      this.textInfo = data.enname;
-      this.canvas.width = this.imgpic[index].offsetWidth; //设置画布大小
-      this.canvas.height = this.imgpic[index].offsetHeight; //设置画布大小
-      console.log(this.canvas.width, this.canvas.height);
-      this.ctx = this.canvas.getContext("2d");
-      this.ctx.beginPath();
-      //设置线条颜色，必须放在绘制之前
-      this.ctx.strokeStyle = "#ff0000";
-      // 线宽设置，必须放在绘制之前
-      this.ctx.lineWidth = 1;
 
-      // 绘制矩形
-      var scaleX = this.canvas.width / data.photoWidth, //this.iw图片的宽
-        scaleY = this.canvas.height / data.photoHeight; //this.ih图片的高
-      console.log(scaleX, scaleY);
-      var top = data.x * scaleX,
-        left = data.y * scaleY,
-        width = data.width * scaleX,
-        height = data.height * scaleY;
-      console.log(top, left, width, height);
-      // this.ctx.strokeStyle = "red"; //线的颜色
-      this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
-      //this.ctx.strokeRect(data.x, data.y, data.width, data.height);
-      this.ctx.font = "12px normal";
-      this.ctx.fillStyle = "#ff0000";
-      //this.ctx.fillText(this.textInfo, top, left + 24);
-      //距离上面有空间
-      if (left > 32) {
-        this.ctx.fillText(this.textInfo, top, left - 4);
-      } else if (this.canvas.height - left + height > 32) {
-        this.ctx.fillText(this.textInfo, top, height - 4);
-      }
-      this.ctx.closePath();
-      this.ctx.stroke();
-    },
     //点击当前行
     handleRowClick(row) {
       //this.$refs.multipleTable.toggleRowSelection(row);
@@ -814,7 +793,6 @@ export default {
             });
         }, 300);
       }
-
       this.$nextTick(() => {
         this.drawline(row);
         this.imgOnload();
@@ -957,7 +935,14 @@ export default {
       this.tableShow = !this.tableShow;
       this.zoomD = 1;
       if (!this.tableShow) {
+        this.$nextTick(() => {
           this.drawlineListAll(this.tableData);
+        });
+      } else {
+        this.$nextTick(() => {
+          this.$refs.multipleTable.setCurrentRow(this.selectRow);
+          this.handleRowClick(this.selectRow);
+        });
       }
     },
 
@@ -975,16 +960,18 @@ export default {
     handlePicAlarm(val, index) {
       console.log(val, index);
       this.current = index;
-      this.canvansdata = val;
       this.canvasloading = true;
+      this.canvansdata = val;
       if (val.path !== "" && this.tableData.length !== 0) {
         console.log(val);
         this.bigPhotoPic = val.path;
         this.showBigpic = true;
+        setTimeout(() => {
           this.$nextTick(() => {
-          console.log("huatu");
+            this.drawline2(val);
-          this.drawlineList(val, index);
           });
+        }, 100);
+
         //未读变已读
         if (val.isread == 0) {
           setTimeout(function () {
@@ -1235,7 +1222,7 @@ export default {
             width: 100%;
             height: 100%;
           }
-          .myCanvas {
+          .canvasAll {
             position: absolute;
             width: 100%;
             height: 100%;