diff --git a/src/views/realTimeMonitor/components/carouselChart.vue b/src/views/realTimeMonitor/components/carouselChart.vue index 9386445..3b98c22 100644 --- a/src/views/realTimeMonitor/components/carouselChart.vue +++ b/src/views/realTimeMonitor/components/carouselChart.vue @@ -24,10 +24,11 @@ class="bigPic" v-else-if="currentPicPath && mediaType == 0" v-loading="picLoading" + @click="handleBigPicbox(currentPicPath)" > + + + +
+
+ + + +
+
+ +
+
@@ -215,24 +235,10 @@ export default { 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: "挖掘机", - }, - ], + labelMarkArrs: [], + + //大图 + showBigpic: false, }; }, mounted() { @@ -321,7 +327,6 @@ export default { drawline() { this.canvas = this.$refs.myCanvas; this.imgpic = this.$refs.picJpg; - this.canvas.width = this.imgpic.imageWidth; //设置画布大小 this.canvas.height = this.imgpic.imageHeight; //设置画布大小 this.ctx = this.canvas.getContext("2d"); @@ -444,7 +449,6 @@ export default { //绘制大图告警区域 drawlineBig(data) { console.log(data); - this.canvas = document.getElementById("alarmCanvas"); this.imgpic = document.getElementById("alarmPic"); console.log(document.getElementById("alarmCanvas")); @@ -487,9 +491,9 @@ export default { 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.strokeStyle = "rgb(255, 255, 0)"; // 矩形框的线条颜色 // 设置填充样式 - this.ctx.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明 + // this.ctx.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明 this.ctx.strokeRect( this.recArrs[i].x, this.recArrs[i].y, @@ -506,7 +510,7 @@ export default { if (this.recArrs[i].text) { this.ctx.font = "100 18px 微软雅黑"; this.ctx.lineWidth = 1; - this.ctx.strokeStyle = "rgb(255,0,0)"; + this.ctx.strokeStyle = "rgb(255,255,0)"; this.ctx.strokeText( this.recArrs[i].text, this.recArrs[i].x + @@ -519,30 +523,118 @@ export default { } } } - // // 绘制矩形 - // 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(); }, + //绘制大图告警区域 + drawlineBig2(data) { + console.log(data); + this.canvas = document.getElementById("bigCanvas2"); + this.imgpic = document.getElementById("bigimg2"); + console.log(document.getElementById("alarmCanvas")); + console.log(document.getElementById("bigimg2")); + 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 + + "&nbsp;&nbsp;" + + 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 = 1; // 矩形框的线条宽度 + this.ctx.strokeStyle = "rgb(255, 255, 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 16px 微软雅黑"; + this.ctx.lineWidth = 1; + this.ctx.strokeStyle = "rgb(255,255,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 + ); + } + } + } + this.ctx.closePath(); + this.ctx.stroke(); + }, + //放大图 + handleBigPicbox(val) { + console.log(val); + this.showBigpic = true; + this.bigImgPath = val; + setTimeout(() => { + this.$nextTick(() => { + this.drawlineBig2(this.picDataAlarm); + }); + }, 100); + }, + closePic(e) { + console.log(e); + var btn = this.$refs.bigimgref; + console.log(btn); + if (btn) { + if (!btn.contains(event.target)) { + //按钮.app-download以外的区域 + this.zoomD = 1; + this.showBigpic = false; + } + } + // + // this.showBigpic = false; + }, }, }; @@ -568,6 +660,7 @@ export default { .bigPic { width: 100%; height: 100%; + cursor: pointer; .el-image { width: 100%; height: 100%; @@ -762,5 +855,72 @@ export default { justify-content: center; } } + .showPic { + position: fixed; + background-color: rgba(0, 0, 0, 50%); + bottom: 0; + left: 0; + overflow: hidden; + right: 0; + top: 0; + z-index: 9999; + width: 100%; + height: 100%; + display: flex; + cursor: pointer; + .picboxI { + position: relative; + width: 90%; + height: 90%; + margin: auto; + animation-name: scaleDraw; + /*关键帧名称*/ + animation-timing-function: ease; + /*动画的速度曲线*/ + animation-iteration-count: 1; + /*动画播放的次数*/ + animation-duration: 0.65s; + display: flex; + align-items: center; + justify-content: center; + img { + max-width: 100%; + max-height: 100%; + margin: auto; + position: absolute; + cursor: grab; + } + .mybigCanvas { + position: absolute; + // top: 0; + // left: 0; + max-width: 100%; + max-height: 100%; + margin: 0 auto; + cursor: pointer; + pointer-events: none; + } + } + .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; + color: #fff; + font-size: 18px; + } + } + } } diff --git a/src/views/system/drawPic.vue b/src/views/system/drawPic.vue index 0a5c9bc..0babc5e 100644 --- a/src/views/system/drawPic.vue +++ b/src/views/system/drawPic.vue @@ -14,10 +14,9 @@

- 标注数据 + 图片数量 {{ piclist.length }} 保存 - {{ piclist.length }}