From 6c71c318fa3a3a927481e2b742a029da180e7310 Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Sun, 25 Jun 2023 14:49:11 +0800 Subject: [PATCH] =?UTF-8?q?=E5=91=8A=E8=AD=A6=E4=BF=A1=E6=81=AF=E6=9F=A5?= =?UTF-8?q?=E8=AF=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/alarmHandling/index.vue | 132 ++++++++++++++++++++++--- src/views/components/carouselChart.vue | 39 ++++++-- vue.config.js | 6 +- 3 files changed, 151 insertions(+), 26 deletions(-) diff --git a/src/views/alarmHandling/index.vue b/src/views/alarmHandling/index.vue index 92a4a4a..8171d45 100644 --- a/src/views/alarmHandling/index.vue +++ b/src/views/alarmHandling/index.vue @@ -182,12 +182,34 @@
-
+
+
- + +
-
+
- - - + + +
+
+
@@ -243,6 +272,16 @@ export default { }, data() { return { + OptionssalseImg: { + inline: false, + button: true, + navbar: false, + title: false, + toolbar: false, + tooltip: false, + zoomable: true, + url: "src", + }, dyOptions: [{ id: 0, name: "全部" }], //电压数据 xlOptions: [{ id: 0, name: "全部" }], //线路数据 gtOptions: [{ id: 0, name: "全部" }], //杆塔数据 @@ -269,6 +308,8 @@ export default { textInfo: "", bigPhotoPic: "", //大图路径 selectRow: {}, + alarmLoading: false, + canvasloading: false, }; }, mounted() { @@ -286,13 +327,18 @@ export default { this.getTableList(); }, methods: { + imgOnload() { + this.alarmLoading = false; + this.canvasloading = false; + }, handleBigPicbox(val) { - if (val.path !== "" && tableData.length !== 0) { + this.canvasloading = true; + if (val.path !== "" && this.tableData.length !== 0) { console.log(val); this.bigPhotoPic = val.path; this.showBigpic = true; this.$nextTick(() => { - this.drawline(val); + this.drawline2(val); }); } }, @@ -424,9 +470,42 @@ export default { this.ctx.closePath(); this.ctx.stroke(); }, + //绘制告警区域 + drawline2(data) { + this.canvas = this.$refs.myCanvas2; + 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; + + // 绘制矩形 + 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 = "24px normal"; + 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); + this.alarmLoading = true; console.log(row); this.photoPic = row.path; this.selectRow = row; @@ -560,13 +639,25 @@ export default { height: 100%; cursor: pointer; } - .el-icon-circle-close { + } + .viewClose { + -webkit-app-region: no-drag; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + cursor: pointer; + height: 80px; + overflow: hidden; + position: absolute; + right: -40px; + top: -40px; + transition: background-color 0.15s; + width: 80px; + .el-icon-close { + bottom: 16px; + left: 16px; position: absolute; - right: -24px; - font-size: 48px; color: #fff; - cursor: pointer; - top: -24px; + font-size: 18px; } } } @@ -639,6 +730,20 @@ export default { height: 100%; position: relative; } + .nosee { + position: absolute; + width: 100%; + height: 100%; + background-size: 100% 100%; + z-index: 2; + } + .bigimgView { + position: absolute; + width: 100%; + height: 100%; + z-index: 3; + opacity: 0; + } img { width: 100%; height: 100%; @@ -650,6 +755,7 @@ export default { width: 100%; height: 100%; cursor: pointer; + z-index: 2; } } .editorBtn { diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue index 0eb9ff8..93c3991 100644 --- a/src/views/components/carouselChart.vue +++ b/src/views/components/carouselChart.vue @@ -1,6 +1,9 @@