From 3b50cf87c00623da2eb641664b23ca9e70048a6f Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Tue, 25 Jul 2023 10:58:23 +0800 Subject: [PATCH] =?UTF-8?q?=E5=91=8A=E8=AD=A6=E5=9B=BE=E7=89=87=E5=B1=95?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/alarmHandling/index.vue | 139 ++++++++++++++---------------- 1 file changed, 63 insertions(+), 76 deletions(-) diff --git a/src/views/alarmHandling/index.vue b/src/views/alarmHandling/index.vue index 4769640..776959a 100644 --- a/src/views/alarmHandling/index.vue +++ b/src/views/alarmHandling/index.vue @@ -271,18 +271,19 @@ icon="el-icon-picture-outline" @click.stop="handlePicHistory(item)" > - -
- +
+ +

@@ -337,8 +338,14 @@ :style="{ transform: 'scale(' + zoomD + ')' }" @mousedown="move" > - - + +

@@ -510,12 +517,13 @@ export default { this.canvasloading = true; this.canvansdata = val; if (val.path !== "" && this.tableData.length !== 0) { - console.log(val); this.bigPhotoPic = val.path; this.showBigpic = true; - this.$nextTick(() => { - this.drawline2(val); - }); + setTimeout(() => { + this.$nextTick(() => { + this.drawline2(val); + }); + }, 100); } }, closePic() { @@ -586,8 +594,17 @@ 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); + + if (this.tableShow) { + this.$nextTick(() => { + this.$refs.multipleTable.setCurrentRow(this.selectRow); + this.handleRowClick(this.selectRow); + }); + } else { + this.$nextTick(() => { + this.drawlineListAll(this.tableData); + }); + } }) .catch((err) => { console.log(err); @@ -662,9 +679,12 @@ export default { //绘制大图告警区域 drawline2(data) { console.log(data); + console.log(document.getElementById("bigCanvas")); + console.log(document.getElementById("bigimg")); + this.canvas = document.getElementById("bigCanvas"); + this.imgpic = document.getElementById("bigimg"); console.log(this.canvas); - this.canvas = this.$refs.myCanvasbig; - this.imgpic = this.$refs.picJpg; + console.log(this.imgpic); this.textInfo = data.enname; this.canvas.width = this.imgpic.offsetWidth; //设置画布大小 this.canvas.height = this.imgpic.offsetHeight; //设置画布大小 @@ -688,7 +708,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 = "12px normal"; + this.ctx.font = "14px normal"; this.ctx.fillStyle = "#ff0000"; //this.ctx.fillText(this.textInfo, top, left + 24); //距离上面有空间 @@ -700,14 +720,15 @@ 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; + console.log(document.getElementById("canvas_" + i)); + console.log(document.getElementById("img" + i)); + this.canvas = document.getElementById("canvas_" + i); + this.imgpic = document.getElementById("img" + i); this.textInfo = val[i].enname; console.log(this.textInfo); console.log(this.imgpic.offsetWidth); @@ -747,49 +768,7 @@ export default { this.ctx.stroke(); } }, - //绘制列表大图 - drawlineList(data, index) { - console.log(data); - console.log(this.$refs.myCanvasbig); - console.log(this.$refs.picJpg); - console.log("picJpg" + index); - this.canvas = this.$refs.myCanvasbig; - this.imgpic = this.$refs.picJpg; - this.textInfo = data.enname; - this.canvas.width = this.imgpic[index].offsetWidth; //设置画布大小 - this.canvas.height = this.imgpic[index].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 / 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 = "12px 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(); - }, //点击当前行 handleRowClick(row) { //this.$refs.multipleTable.toggleRowSelection(row); @@ -814,7 +793,6 @@ export default { }); }, 300); } - this.$nextTick(() => { this.drawline(row); this.imgOnload(); @@ -957,7 +935,14 @@ export default { this.tableShow = !this.tableShow; this.zoomD = 1; if (!this.tableShow) { - this.drawlineListAll(this.tableData); + this.$nextTick(() => { + this.drawlineListAll(this.tableData); + }); + } else { + this.$nextTick(() => { + this.$refs.multipleTable.setCurrentRow(this.selectRow); + this.handleRowClick(this.selectRow); + }); } }, @@ -975,16 +960,18 @@ export default { handlePicAlarm(val, index) { console.log(val, index); this.current = index; - this.canvansdata = val; this.canvasloading = true; + this.canvansdata = val; if (val.path !== "" && this.tableData.length !== 0) { console.log(val); this.bigPhotoPic = val.path; this.showBigpic = true; - this.$nextTick(() => { - console.log("huatu"); - this.drawlineList(val, index); - }); + setTimeout(() => { + this.$nextTick(() => { + this.drawline2(val); + }); + }, 100); + //未读变已读 if (val.isread == 0) { setTimeout(function () { @@ -1235,7 +1222,7 @@ export default { width: 100%; height: 100%; } - .myCanvas { + .canvasAll { position: absolute; width: 100%; height: 100%;