From 05dd09b86625d39dd95ed22840db5ddd44d15d18 Mon Sep 17 00:00:00 2001 From: cpf <1105965053@qq.com> Date: Thu, 28 Apr 2022 15:10:59 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E4=BC=9A=E5=88=9D=E5=A7=8B=E5=8C=96?= =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../host-config/host-config.component.ts | 2 +- .../image-label2/image-label2.component.html | 12 ++-- .../image-label2/image-label2.component.ts | 56 ++++++++++++++----- 3 files changed, 50 insertions(+), 20 deletions(-) diff --git a/src/app/system-management/host-config/host-config.component.ts b/src/app/system-management/host-config/host-config.component.ts index 93538b7..7dfeb51 100644 --- a/src/app/system-management/host-config/host-config.component.ts +++ b/src/app/system-management/host-config/host-config.component.ts @@ -134,7 +134,7 @@ export class HostConfigComponent implements OnInit { } label(item) { - this.router.navigate(['/system/host/camera/imageLabel']) + this.router.navigate(['/system/host/camera/imageLabel'],{queryParams: {id : item.id, type: item.type}}) } diff --git a/src/app/system-management/image-label2/image-label2.component.html b/src/app/system-management/image-label2/image-label2.component.html index 1cd5b6b..51d2442 100644 --- a/src/app/system-management/image-label2/image-label2.component.html +++ b/src/app/system-management/image-label2/image-label2.component.html @@ -1,13 +1,13 @@
- - - + + + - - - + + +
diff --git a/src/app/system-management/image-label2/image-label2.component.ts b/src/app/system-management/image-label2/image-label2.component.ts index d9f498e..7ef06ab 100644 --- a/src/app/system-management/image-label2/image-label2.component.ts +++ b/src/app/system-management/image-label2/image-label2.component.ts @@ -1,4 +1,7 @@ +import { HttpClient } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { NzMessageService } from 'ng-zorro-antd/message'; @Component({ selector: 'app-image-label2', @@ -7,7 +10,7 @@ import { Component, OnInit } from '@angular/core'; }) export class ImageLabel2Component implements OnInit { - constructor() { } + constructor(private route: ActivatedRoute, private http: HttpClient, private message: NzMessageService) { } imgItem: any; canvasWidth: number = 0; @@ -24,19 +27,46 @@ export class ImageLabel2Component implements OnInit { } ngAfterContentInit(): void { - window.setTimeout(()=>{ - this.initBackgroundImg() - }, 0) + this.getImgMarkData().then((res: any)=>{ + this.imgItem = window.URL.createObjectURL(res) + window.setTimeout(()=>{ + this.initBackgroundImg() + }, 0) + }).catch(err => { + this.message.create('error', '获取图片失败!'); + }) + } + + //获取 摄像头图片/标注点位 + getImgMarkData() { + let that = this + return new Promise((resolve, reject) => { + that.route.queryParams.subscribe(parmas => { + parmas.type != undefined? that.markType = Number(parmas.type) : null; + const httpOptions = { + responseType: 'blob' as 'json', + params: {cameraId: parmas.id} + }; + that.http.get(`/api/Cameras/Images`,httpOptions).subscribe({ + next: (data) => { + resolve(data) + }, + error: (err) => { + reject('error') + }, + }) + }) + }) } //保存 save() { - if (this.markType === 1) { + if (this.markType === 0) { console.log("多边形",this.points) - } else if (this.markType === 3) { + } else if (this.markType === 2) { console.log("箭头",this.arrowPoints) console.log("矩形",this.oblongPoints) - } else if (this.markType === 4) { + } else if (this.markType === 3) { console.log("箭头",this.arrowPoints) } } @@ -87,7 +117,7 @@ export class ImageLabel2Component implements OnInit { - markType: number = 3; //1=进出口,3=卸油区,4=便利店, + markType: number = 0; //0=进出口,2=卸油区,3=便利店, isDrawArrow: boolean = true; //绘制type 箭头/矩形 oilUnloadingArea: boolean = true; //卸油区type 泄油管区域/静电接地仪 //记录鼠标点击位置 @@ -127,9 +157,9 @@ export class ImageLabel2Component implements OnInit { this.downx = clickX this.downy = clickY - if (this.markType === 1) { //进出口 + if (this.markType === 0) { //进出口 this.drawPolygon(clickX,clickY,canvas,context); //绘制多边形 - } else if (this.markType === 3 || this.markType === 4) { //卸油区/便利店 + } else if (this.markType === 2 || this.markType === 3) { //卸油区/便利店 //开始绘制 context.beginPath(); context.moveTo(clickX,clickY); @@ -155,7 +185,7 @@ export class ImageLabel2Component implements OnInit { canvas.onmousemove = (ev)=>{ //鼠标移动事件 return false; } - if (this.markType != 3 && this.markType != 4) { + if (this.markType != 2 && this.markType != 3) { return } var upX = e.pageX - canvas.offsetLeft; @@ -184,7 +214,7 @@ export class ImageLabel2Component implements OnInit { drawLine(pointsList, context, isRepeat: boolean = false) { context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; - if (this.markType === 3 && !isRepeat) { //同时绘制 矩形 + if (this.markType === 2 && !isRepeat) { //同时绘制 矩形 this.oblongPoints.forEach(element => { context.strokeStyle = element.oilUnloadingArea? "green" : "red"; context.lineWidth = 3; @@ -281,7 +311,7 @@ export class ImageLabel2Component implements OnInit { drawOblong(oblongList, context) { context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null; - if (this.markType === 3) { //同时绘制 直线箭头 + if (this.markType === 2) { //同时绘制 直线箭头 this.drawLine(this.arrowPoints,context,true) } oblongList.forEach(element => {