diff --git a/src/views/alarmHandling/index.vue b/src/views/alarmHandling/index.vue index 92a4a4a..8be1f2b 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,19 @@ export default { this.getTableList(); }, methods: { + imgOnload() { + console.log("加载完成"); + //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); }); } }, @@ -358,7 +405,6 @@ export default { this.photoPic = res.data.list[0].path; this.selectRow = res.data.list[0]; console.log(this.selectRow); - // 别忘了标签上定义ref 这里的 myTable就说获取的标签上的ref命的名 this.$refs.multipleTable.setCurrentRow(this.selectRow); this.handleRowClick(this.selectRow); @@ -405,6 +451,37 @@ export default { 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(); + }, + //绘制告警区域 + 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图片的宽 @@ -427,8 +504,10 @@ export default { //点击当前行 handleRowClick(row) { //this.$refs.multipleTable.toggleRowSelection(row); + //this.alarmLoading = true; console.log(row); this.photoPic = row.path; + console.log(this.photoPic); this.selectRow = row; //未读变已读 if (row.isread == 0) { @@ -446,6 +525,11 @@ export default { }); }, 300); } + setTimeout(function () { + console.log("关闭遮罩"); + this.alarmLoading = false; + }, 1000); + this.$nextTick(() => { this.drawline(row); }); @@ -560,13 +644,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 +735,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 +760,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..8adf22d 100644 --- a/src/views/components/carouselChart.vue +++ b/src/views/components/carouselChart.vue @@ -1,26 +1,46 @@ + + diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue index c99658c..d30358b 100644 --- a/src/views/realTimeMonitor/index.vue +++ b/src/views/realTimeMonitor/index.vue @@ -61,9 +61,6 @@ :terminalPhoto="terminalPhoto" v-if="terminalPhoto.length > 0" > -
@@ -182,12 +179,31 @@ 关闭 + + 获取GPS位置 + + + + GPS开关 + + + 开启GPS + 关闭GPS + +
+ @@ -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" }); diff --git a/vue.config.js b/vue.config.js index e3ab0d5..c861b15 100644 --- a/vue.config.js +++ b/vue.config.js @@ -28,11 +28,11 @@ module.exports = defineConfig({ proxy: { "/api": { //表示拦截以/api开头的请求路径 - target: "http://47.96.238.157:8093", //阿里云服务器环境 - //target: "http://180.166.218.222:40080", //dell + // target: "http://47.96.238.157:8093", //阿里云服务器环境 + target: "http://180.166.218.222:40080", //dell changOrigin: true, //是否开启跨域 pathRewrite: { - "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的 + "^/api": "/api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的 }, }, },