画线

src/views/alarmHandling/index.vue

@@ -160,7 +160,7 @@
           </div>
         </div>
         <div class="alarmPic">
-          <div class="imgshow" @click="handleBigPicbox(photoPic)">
+          <div class="imgshow" @click="handleBigPicbox(selectRow)">
             <img ref="picJpg" :src="photoPic" />
             <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
           </div>
@@ -175,6 +175,7 @@
     <div v-if="showBigpic" class="showPic" @click="closePic">
       <div class="picboxI">
         <img class="maskPic" :src="bigPhotoPic" />
+        <!-- <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas> -->
         <i @click="closePic" class="el-icon-circle-close"></i>
       </div>
     </div>
@@ -218,6 +219,7 @@ export default {
       showBigpic: false,
       textInfo: "",
       bigPhotoPic: "", //大图路径
+      selectRow: {},
     };
   },
   mounted() {
@@ -231,8 +233,12 @@ export default {
   },
   methods: {
     handleBigPicbox(val) {
-      this.bigPhotoPic = val;
+      console.log(val);
+      this.bigPhotoPic = val.path;
       this.showBigpic = true;
+      this.$nextTick(() => {
+        this.drawline(val);
+      });
     },
     closePic() {
       this.showBigpic = false;
@@ -291,7 +297,10 @@ export default {
           this.tableData = res.data.list;
           this.total = res.data.total;
           this.photoPic = res.data.list[0].path;
-          this.drawline(res.data.list[0]);
+
+          this.selectRow = res.data.list[0];
+          console.log(this.selectRow);
+          this.drawline(this.selectRow);
         })
         .catch((err) => {
           console.log(err);
@@ -322,14 +331,12 @@ export default {
       this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
       this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
       this.ctx = this.canvas.getContext("2d");
-
       this.ctx.beginPath();
       //设置线条颜色，必须放在绘制之前
       this.ctx.strokeStyle = "#ff0000";
       // 线宽设置，必须放在绘制之前
       this.ctx.lineWidth = 1;
       this.ctx.rect(925, 548, 108, 506);
-
       // 绘制矩形
       var scaleX = this.canvas.width / data.photoWidth, //this.iw图片的宽
         scaleY = this.canvas.height / data.photoHeight; //this.ih图片的高
@@ -354,6 +361,7 @@ export default {
       //this.$refs.multipleTable.toggleRowSelection(row);
       console.log(row);
       this.photoPic = row.path;
+      this.selectRow = row;
       //未读变已读
       if (row.isread == 0) {
         readAlarm({
@@ -452,6 +460,14 @@ export default {
         max-height: 720px;
         margin: auto;
       }
+      .myCanvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+      }
       .el-icon-circle-close {
         position: absolute;
         right: -24px;