From 88e7f192d65b7f8d876b527d915cf9f3311e7afc Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Mon, 23 Oct 2023 15:25:54 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=91=8A=E8=AD=A6=E4=BF=A1?= =?UTF-8?q?=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/alarmHandling/index.vue | 1 + src/views/pictureRotation/index.vue | 91 +++++++++++++++++--- src/views/realTimeMonitor/previewContain.vue | 74 ++++++++++++++++ src/views/realTimeSearch/index.vue | 15 ++-- 4 files changed, 160 insertions(+), 21 deletions(-) diff --git a/src/views/alarmHandling/index.vue b/src/views/alarmHandling/index.vue index 8d63bb2..1fc455e 100644 --- a/src/views/alarmHandling/index.vue +++ b/src/views/alarmHandling/index.vue @@ -1237,6 +1237,7 @@ export default { bottom: 0px; background: rgba(0, 0, 0, 0.5); width: calc(100% - 12px); + z-index: 4; .alarmInfo { color: #fff; } diff --git a/src/views/pictureRotation/index.vue b/src/views/pictureRotation/index.vue index 6b83cb4..4fce24e 100644 --- a/src/views/pictureRotation/index.vue +++ b/src/views/pictureRotation/index.vue @@ -35,18 +35,6 @@ :key="'col-' + index" >
-
- + +
{ + this.drawlineListAll(this.picList); + }); }) .catch((err) => { console.log(err); @@ -430,6 +430,58 @@ export default { } this.isRuning = !this.isRuning; }, + //绘制所有的图片告警区域 + drawlineListAll(val) { + console.log(val); + for (let i = 0; i < val.length; i++) { + if (val[i].isAlarm == 1) { + console.log(i); + 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].alarmlist[0].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].alarmlist[0].photoWidth, //this.iw图片的宽 + scaleY = this.canvas.height / val[i].alarmlist[0].photoHeight; //this.ih图片的高 + console.log(scaleX, scaleY); + var top = val[i].alarmlist[0].x * scaleX, + left = val[i].alarmlist[0].y * scaleY, + width = val[i].alarmlist[0].width * scaleX, + height = val[i].alarmlist[0].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(); + } else { + console.log("没有告警"); + } + } + }, }, computed: {}, mounted() { @@ -516,12 +568,22 @@ export default { width: 100%; height: 100%; background-size: 100% 100%; + position: relative; } img { width: 100%; height: 100%; cursor: pointer; } + .canvasAll { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; + pointer-events: none; + } .picInfo { position: absolute; background: #169e8ca1; @@ -532,6 +594,7 @@ export default { bottom: 0; width: 100%; text-align: center; + z-index: 4; p { margin-top: 4px; } diff --git a/src/views/realTimeMonitor/previewContain.vue b/src/views/realTimeMonitor/previewContain.vue index 6a91c75..1682116 100644 --- a/src/views/realTimeMonitor/previewContain.vue +++ b/src/views/realTimeMonitor/previewContain.vue @@ -19,6 +19,8 @@ + +

{{ item.linename }}-{{ item.towername }}-（{{ @@ -88,6 +96,7 @@ export default { this.page = page; console.log(id, type); this.previewLoading = true; + this.picList = []; getTowerAndPhotoList({ id: id, type: type, @@ -100,6 +109,9 @@ export default { this.picList = res.data.list; this.totalPage = res.data.totalpage; this.total = res.data.total; + this.$nextTick(() => { + this.drawlineListAll(this.picList); + }); }) .catch((err) => { console.log(err); //代码错误、请求失败捕获 @@ -116,6 +128,58 @@ export default { this.picList = []; this.getPicList(this.id, this.type, this.page); }, + //绘制所有的图片告警区域 + drawlineListAll(val) { + console.log(val); + for (let i = 0; i < val.length; i++) { + if (val[i].isAlarm == 1) { + console.log(i); + 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].alarmlist[0].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].alarmlist[0].photoWidth, //this.iw图片的宽 + scaleY = this.canvas.height / val[i].alarmlist[0].photoHeight; //this.ih图片的高 + console.log(scaleX, scaleY); + var top = val[i].alarmlist[0].x * scaleX, + left = val[i].alarmlist[0].y * scaleY, + width = val[i].alarmlist[0].width * scaleX, + height = val[i].alarmlist[0].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(); + } else { + console.log("没有告警"); + } + } + }, }, }; @@ -154,6 +218,15 @@ export default { width: 100%; height: 100%; } + .canvasAll { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; + pointer-events: none; + } .picInfo { position: absolute; background: #169e8ca1; @@ -164,6 +237,7 @@ export default { bottom: 0; width: 100%; text-align: center; + z-index: 4; .timeinfo { margin-top: 4px; margin-bottom: 4px; diff --git a/src/views/realTimeSearch/index.vue b/src/views/realTimeSearch/index.vue index b89896e..fea165a 100644 --- a/src/views/realTimeSearch/index.vue +++ b/src/views/realTimeSearch/index.vue @@ -1021,11 +1021,13 @@ export default { console.log(val); this.bigPhotoPic = val.path; this.showBigpic = true; - setTimeout(() => { - this.$nextTick(() => { - this.drawline2(val); - }); - }, 100); + if (val.isAlarm == 1) { + setTimeout(() => { + this.$nextTick(() => { + this.drawline2(val); + }); + }, 100); + } } }, //关闭大图 @@ -1145,8 +1147,7 @@ export default { this.ctx.closePath(); this.ctx.stroke(); } else { - this.canvas = document.getElementById("canvas_" + i); - this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + console.log("没有告警"); } } },