@@ -316,7 +326,7 @@
:style="{ transform: 'scale(' + zoomD + ')' }"
@mousedown="move"
>
- ![]()
+ ![]()
@@ -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;
}