diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index d5d2268..b33faf0 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -159,6 +159,10 @@ export default { index: "/waterMark", title: "水印下发", }, + { + index: "/aiWork", + title: "AI绘图", + }, ], }, ], diff --git a/src/router/index.js b/src/router/index.js index 5de4b8a..5cf4f93 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -209,7 +209,17 @@ const routes = [ requiresAuth: true, }, }, - + { + path: "/aiwork", + component: () => import("../views/system/drawPic.vue"), + name: "aiwork", + meta: { + title: "ai绘图", + icon: "", + keepAlive: true, + requiresAuth: true, + }, + }, { path: "/echarts", component: () => import("../echartsDemo.vue"), diff --git a/src/utils/api/drawApi.js b/src/utils/api/drawApi.js new file mode 100644 index 0000000..96542a4 --- /dev/null +++ b/src/utils/api/drawApi.js @@ -0,0 +1,17 @@ +import request from "../request"; +//获取图片 +export function getTestTerminalPhotoListApi(data) { + return request({ + url: "/xymanager/getTestTerminalPhotoList", + method: "post", + data, + }); +} +//上传坐标 +export function takeAlarmApi(data) { + return request({ + url: "/xymanager/takeAlarm", + method: "post", + data, + }); +} diff --git a/src/views/realTimeMonitor/components/carouselChart.vue b/src/views/realTimeMonitor/components/carouselChart.vue index 1e77c38..9386445 100644 --- a/src/views/realTimeMonitor/components/carouselChart.vue +++ b/src/views/realTimeMonitor/components/carouselChart.vue @@ -31,12 +31,16 @@ @load="loadImage" @error="setDefaultImage" ref="picJpg" + id="alarmPic" + width="100%" + height="100%" > +
@@ -209,6 +213,26 @@ export default { color: "", //线颜色 borderwidth: "", //线宽 markEnable: "", //是否显示 + recArrs: [], + picDataAlarm: [], + labelMarkArrs: [ + { + centerX: 0.5709497206703911, + centerY: 0.3220675944333996, + width: 0.18324022346368715, + height: 0.1908548707753479, + type: 1, + name: "塔吊", + }, + { + centerX: 0.3, + centerY: 0.3856858846918489, + width: 0.17318435754189945, + height: 0.2584493041749503, + type: 0, + name: "挖掘机", + }, + ], }; }, mounted() { @@ -248,31 +272,7 @@ export default { // 释放 Blob URL window.URL.revokeObjectURL(url); }, - // downLoadPic(url, name) { - // const image = new Image(); - // image.setAttribute("crossOrigin", "anonymous"); - // image.src = url; - // image.onload = () => { - // const canvas = document.createElement("canvas"); - // canvas.width = image.width; - // canvas.height = image.height; - // const ctx = canvas.getContext("2d"); - // ctx.drawImage(image, 0, 0, image.width, image.height); - // canvas.toBlob((blob) => { - // const url = URL.createObjectURL(blob); - // this.download(url, name); - // // 用完释放URL对象 - // URL.revokeObjectURL(url); - // }); - // }; - // }, - // download(href, name) { - // const eleLink = document.createElement("a"); - // eleLink.download = name; - // eleLink.href = href; - // eleLink.click(); - // eleLink.remove(); - // }, + //获取线缆绘制显示 getPointList(data) { console.log("woshi 线缆绘制", data); @@ -380,6 +380,7 @@ export default { //获取第一张大图 changeBigPic(data, i) { // //console.log("鼠标222222222", this.currentPage, this.activeSmall); + this.picDataAlarm = data; this.srcList = []; this.localPoints = []; this.activeSmall = i; @@ -413,6 +414,7 @@ export default { loadImage() { console.log("loading"); this.picLoading = false; + this.drawlineBig(this.picDataAlarm); }, setDefaultImage(e) { e.target.src = defaultImage; @@ -437,6 +439,110 @@ export default { smallRightClick() { this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth; }, + + //绘制大图告警区域 + //绘制大图告警区域 + drawlineBig(data) { + console.log(data); + + this.canvas = document.getElementById("alarmCanvas"); + this.imgpic = document.getElementById("alarmPic"); + console.log(document.getElementById("alarmCanvas")); + console.log(document.getElementById("alarmPic")); + console.log(this.canvas); + console.log(this.imgpic); + this.textInfo = data.enname; + 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; + this.labelMarkArrs = data.alarmlist; + this.recArrs = []; + for (var i = 0; i < this.labelMarkArrs.length; i++) { + console.log(this.labelMarkArrs[i]); + //获取的数据转化一下 + this.recArrs.push({ + x: + this.labelMarkArrs[i].x * this.canvas.width - + (this.labelMarkArrs[i].width * this.canvas.width) / 2, + y: + this.labelMarkArrs[i].y * this.canvas.height - + (this.labelMarkArrs[i].height * this.canvas.height) / 2, + w: this.labelMarkArrs[i].width * this.canvas.width, + h: this.labelMarkArrs[i].height * this.canvas.height, + text: this.labelMarkArrs[i].enname + this.labelMarkArrs[i].prob + "%", + type: this.labelMarkArrs[i].label, + }); + } + console.log(this.recArrs); + if (!this.recArrs.length) return; + for (var i = 0; i < this.recArrs.length; i++) { + // >2的判断是为了防止误触画出来的数据 + if (this.recArrs[i].w > 2 && this.recArrs[i].h > 2) { + this.ctx.beginPath(); + this.ctx.lineWidth = 2; // 矩形框的线条宽度 + this.ctx.strokeStyle = "rgb(255, 0, 0)"; // 矩形框的线条颜色 + // 设置填充样式 + this.ctx.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明 + this.ctx.strokeRect( + this.recArrs[i].x, + this.recArrs[i].y, + this.recArrs[i].w, + this.recArrs[i].h + ); // 矩形框 + // this.ctx.fillRect( + // this.recArrs[i].x, + // this.recArrs[i].y, + // this.recArrs[i].w, + // this.recArrs[i].h + // ); // 填充矩形 + // 如果有文本信息，填充文本信息 + if (this.recArrs[i].text) { + this.ctx.font = "100 18px 微软雅黑"; + this.ctx.lineWidth = 1; + this.ctx.strokeStyle = "rgb(255,0,0)"; + this.ctx.strokeText( + this.recArrs[i].text, + this.recArrs[i].x + + this.recArrs[i].w / 2 - + (this.recArrs[i].text.length / 2) * 16, + this.recArrs[i].y - 20 < 0 + ? this.recArrs[i].y + this.recArrs[i].h + 20 + : this.recArrs[i].y - 10 + ); + } + } + } + // // 绘制矩形 + // 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 = "14px 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(); + }, }, }; @@ -481,6 +587,16 @@ export default { z-index: 3; pointer-events: none; } + #alarmCanvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0 auto; + cursor: pointer; + pointer-events: none; + } &:hover { .arrow { opacity: 1; diff --git a/src/views/system/drawPic.vue b/src/views/system/drawPic.vue new file mode 100644 index 0000000..0a5c9bc --- /dev/null +++ b/src/views/system/drawPic.vue @@ -0,0 +1,844 @@ + + + diff --git a/vue.config.js b/vue.config.js index 9e6977d..04fbc7d 100644 --- a/vue.config.js +++ b/vue.config.js @@ -22,12 +22,12 @@ module.exports = defineConfig({ "/api": { //表示拦截以/api开头的请求路径 //target: "http://180.166.218.222:40080", //dell - target: "http://192.168.1.190:8080", //liu 本机ip 需要去掉/Api + // target: "http://192.168.1.190:8080", //liu 本机ip 需要去掉/Api //target: "http://192.168.50.7:8093", //liu 本机ip 需要去掉/Api - //target: "http://192.168.111.211:80", //东视 + target: "http://192.168.111.211:80", //东视 changOrigin: true, //是否开启跨域 pathRewrite: { - "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的 + "^/api": "/api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的 }, }, },