|
|
|
|
@ -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;
|
|
|
|
|
|
fanluyan
2 years ago