master
fanluyan 2 years ago
parent 61bff19b67
commit c5427fc33d

@ -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;

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

Loading…
Cancel
Save