画图

src/views/alarmHandling/index.vue

@@ -161,7 +161,8 @@
         </div>
         <div class="alarmPic">
           <div class="imgshow" @click="handleBigPicbox(photoPic)">
-            <img :src="photoPic" />
+            <img ref="picJpg" :src="photoPic" />
+            <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
           </div>
           <div class="editorBtn">
             <!-- <el-button type="primary" :loading="btnpicloading" @click="handleCommandpic">主动拍照</el-button> -->
@@ -215,6 +216,7 @@ export default {
       i: 0,
       isreadshow: false,
       showBigpic: false,
+      textInfo: "",
     };
   },
   mounted() {
@@ -287,6 +289,7 @@ 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]);
         })
         .catch((err) => {
           console.log(err);
@@ -309,6 +312,42 @@ export default {
       this.pageSize = val;
       this.getTableList();
     },
+    //绘制告警区域
+    drawline(data) {
+      this.canvas = this.$refs.myCanvas;
+      this.imgpic = this.$refs.picJpg;
+      this.textInfo = data.enname;
+      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图片的高
+      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 = "26px bolder";
+      this.ctx.fillStyle = "#ff0000";
+      this.ctx.fillText(this.textInfo, top, left + 24);
+      this.ctx.closePath();
+      this.ctx.stroke();
+    },
+    //点击当前行
     handleRowClick(row) {
       //this.$refs.multipleTable.toggleRowSelection(row);
       console.log(row);
@@ -327,6 +366,7 @@ export default {
             console.log(err);
           });
       }
+      this.drawline(row);
     },
     //手动拍照
     handleCommandpic() {
@@ -479,11 +519,19 @@ export default {
       .imgshow {
         width: 100%;
         height: 100%;
-
+        position: relative;
         img {
           width: 100%;
           height: 100%;
         }
+        .myCanvas {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          cursor: pointer;
+        }
       }
       .editorBtn {
         margin-top: 8px;

vue.config.js

@@ -28,11 +28,11 @@ module.exports = defineConfig({
     proxy: {
       "/api": {
         //表示拦截以/api开头的请求路径
-        target: "http://47.96.238.157:8093", //阿里云服务器环境
+        //target: "http://47.96.238.157:8093", //阿里云服务器环境
-        //target: "http://180.166.218.222:40080", //dell
+        target: "http://180.166.218.222:40080", //dell
         changOrigin: true, //是否开启跨域
         pathRewrite: {
-          "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
+          "^/api": "/api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
         },
       },
     },