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 1/4] =?UTF-8?q?=E5=91=8A=E8=AD=A6=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=E6=9F=A5=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 @@ @@ -201,18 +217,21 @@ import { getReturnedPhotoJoggle, alarmMarkJoggle, getTermStatus, + setTermGPSJoggle, } from "@/utils/api/index"; import { mapState } from "vuex"; import carouselChart from "../components/carouselChart.vue"; import setschedule from "./components/setschedule.vue"; import deviceUpgrade from "./components/deviceUpgrade.vue"; import infoDialog from "./components/infoDialog.vue"; +import gpsPosition from "./components/gpsPosition.vue"; export default { components: { carouselChart, setschedule, deviceUpgrade, infoDialog, + gpsPosition, }, data() { return { @@ -493,6 +512,7 @@ export default { this.$refs.setschedule_ref.getSingleAccess(this.channelId, this.cmdid); this.$refs.setschedule_ref.deviceList(); }, + //声光报警开启关闭 handleCommandWarn(command) { switch (command) { case "open": //开启 @@ -731,6 +751,51 @@ export default { } }); }, + //获取GPS位置 + + handleShowGPS() { + this.$refs.gpsdialog_ref.display(); + this.$refs.gpsdialog_ref.getgpsData(this.cmdid, this.newTermId); + console.log(this.cmdid, this.newTermId); + }, + + //切换gps开启关闭 + handleCommandGps(command) { + switch (command) { + case "open": //开启 + this.changeGPS(1, this.cmdid); + break; + case "close": //关闭 + this.changeGPS(0, this.cmdid); + break; + } + }, + changeGPS(val, cmdid) { + console.log(val, cmdid); + setTermGPSJoggle({ gpsstatus: val, cmdId: cmdid }) + .then((res) => { + console.log(res); + if (val == 0) { + this.$message({ + duration: 1500, + message: "关闭GPS", + type: "success", + showClose: true, + }); + } else { + this.$message({ + duration: 1500, + message: "成功开启GPS", + type: "success", + showClose: true, + }); + } + }) + .catch((err) => { + console.log(err); //代码错误、请求失败捕获 + }); + }, + //历史图片 // handlehistoryPic() { // this.$router.push({ path: "/realTimeSearch" }); From b038c3bddeaf3e3bad583deeeef0ecddbe1407c3 Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Tue, 27 Jun 2023 13:15:50 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E5=9B=BE=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/alarmHandling/index.vue | 8 +++- src/views/components/carouselChart.vue | 59 ++++++++++++++------------ 2 files changed, 37 insertions(+), 30 deletions(-) diff --git a/src/views/alarmHandling/index.vue b/src/views/alarmHandling/index.vue index c958e50..8be1f2b 100644 --- a/src/views/alarmHandling/index.vue +++ b/src/views/alarmHandling/index.vue @@ -329,7 +329,7 @@ export default { methods: { imgOnload() { console.log("加载完成"); - this.alarmLoading = false; + //this.alarmLoading = false; this.canvasloading = false; }, handleBigPicbox(val) { @@ -504,7 +504,7 @@ export default { //点击当前行 handleRowClick(row) { //this.$refs.multipleTable.toggleRowSelection(row); - this.alarmLoading = true; + //this.alarmLoading = true; console.log(row); this.photoPic = row.path; console.log(this.photoPic); @@ -525,6 +525,10 @@ export default { }); }, 300); } + setTimeout(function () { + console.log("关闭遮罩"); + this.alarmLoading = false; + }, 1000); this.$nextTick(() => { this.drawline(row); diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue index 16012f1..8adf22d 100644 --- a/src/views/components/carouselChart.vue +++ b/src/views/components/carouselChart.vue @@ -1,45 +1,34 @@