点击放大图片

src/views/alarmHandling/index.vue

@@ -74,6 +74,12 @@
               ></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item>
+            <el-input
+              v-model="formdata.search"
+              placeholder="请输入线路/杆塔/设备名称"
+            ></el-input>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">查询</el-button>
           </el-form-item>
@@ -85,7 +91,7 @@
         </el-form>
       </div>
 
-      <div class="alarmContain" v-loading="loading" v-if="!tableShow">
+      <div class="alarmContain" v-loading="loading" v-if="tableShow">
         <div class="alarmTable">
           <el-table
             ref="multipleTable"
@@ -255,7 +261,11 @@
             <div class="bigpic">
               <div class="picshow" @click="handlePicAlarm(item, index)">
                 <img :src="item.path + '!1366x768'" ref="picJpg" />
-                <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
+                <!-- <canvas
+                  id="myCanvas"
+                  class="myCanvas"
+                  :ref="'myCanvas' + index"
+                ></canvas> -->
               </div>
 
               <div class="caption">
@@ -316,7 +326,7 @@
         :style="{ transform: 'scale(' + zoomD + ')' }"
         @mousedown="move"
       >
-        <img @load="imgOnload" class="maskPic img" :src="bigPhotoPic" />
+        <img @load="imgOnload" class="maskPic img" :src="bigPhotoPic" ref="" />
         <canvas id="myCanvas" class="myCanvas" ref="myCanvasbig"></canvas>
       </div>
       <div class="viewClose" @click="closePic">
@@ -539,7 +549,6 @@ export default {
           this.photoPic = res.data.list[0].path;
           this.selectRow = res.data.list[0];
           console.log(this.selectRow);
-
           this.$refs.multipleTable.setCurrentRow(this.selectRow);
           this.handleRowClick(this.selectRow);
         })
@@ -642,7 +651,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 = "16px normal";
+      this.ctx.font = "12px normal";
       this.ctx.fillStyle = "#ff0000";
       //this.ctx.fillText(this.textInfo, top, left + 24);
       //距离上面有空间
@@ -654,6 +663,53 @@ 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(this.$refs.picJpg);
+        this.canvas = this.$refs.myCanvas;
+        this.imgpic = this.$refs.picJpg;
+        this.textInfo = val[i].enname;
+        console.log(this.textInfo);
+        console.log(this.imgpic.offsetWidth);
+        console.log(this.canvas);
+        this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
+        this.canvas.height = this.imgpic.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 / val[i].photoWidth, //this.iw图片的宽
+          scaleY = this.canvas.height / val[i].photoHeight; //this.ih图片的高
+        console.log(scaleX, scaleY);
+        var top = val[i].x * scaleX,
+          left = val[i].y * scaleY,
+          width = val[i].width * scaleX,
+          height = val[i].height * scaleY;
+        console.log(top, left, width, height);
+        // this.ctx.strokeStyle = "red"; //线的颜色
+        this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
+        //this.ctx.strokeRect(val[i].x, val[i].y, val[i].width, val[i].height);
+        this.ctx.font = "16px 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();
+      }
+    },
     //绘制列表大图
     drawlineList(data, index) {
       console.log(data);
@@ -685,7 +741,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 = "16px normal";
+      this.ctx.font = "12px normal";
       this.ctx.fillStyle = "#ff0000";
       //this.ctx.fillText(this.textInfo, top, left + 24);
       //距离上面有空间
@@ -787,6 +843,10 @@ export default {
     //切换图片
     handleListRow() {
       this.tableShow = !this.tableShow;
+      this.zoomD = 1;
+      if (!this.tableShow) {
+        this.drawlineListAll(this.tableData);
+      }
     },
 
     //在图片列表也执行  自动拍照和 查看历史图片
@@ -935,7 +995,7 @@ export default {
   }
   .alarmContain {
     display: flex;
-    height: calc(100% - 90px);
+    height: calc(100% - 98px);
     padding: 0px 8px;
     .alarmTable {
       width: 50%;
@@ -1011,8 +1071,8 @@ export default {
     }
   }
   .pictureBox {
-    height: calc(100% - 90px);
-    max-height: calc(100% - 90px);
+    height: calc(100% - 136px);
+    max-height: calc(100% - 136px);
     .el-empty {
       margin: auto;
     }