From 4f8bd0276aa3d9187979923432d0833a17a44355 Mon Sep 17 00:00:00 2001 From: cpf <1105965053@qq.com> Date: Sun, 8 May 2022 11:52:51 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8C=89=E5=9B=BE=E7=89=87=E5=8E=9F=E5=A7=8B?= =?UTF-8?q?=E5=AE=BD=E9=AB=98=E6=B8=B2=E6=9F=93canvas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../host-config/host-config.component.ts | 34 +++-- .../image-label2/image-label2.component.html | 7 +- .../image-label2/image-label2.component.scss | 14 +- .../image-label2/image-label2.component.ts | 122 +++++++++--------- .../system-management.module.ts | 4 +- src/styles.scss | 12 ++ 6 files changed, 111 insertions(+), 82 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 f21f8d0..e16631f 100644 --- a/src/app/system-management/host-config/host-config.component.ts +++ b/src/app/system-management/host-config/host-config.component.ts @@ -10,6 +10,7 @@ import { EditcameraComponent } from './editcamera/editcamera.component'; import { catchError, tap } from 'rxjs/operators'; import { ConfigFormDataService } from 'src/app/service/configFormData.service'; import { SendFileComponent } from './send-file/send-file.component'; +import { ImageLabel2Component } from '../image-label2/image-label2.component'; interface Camera { name: string; user: string; @@ -185,16 +186,33 @@ export class HostConfigComponent implements OnInit { this.http.get(`/api/EdgeDevices/${this.hostId}`).subscribe( { next: ((data: any) => { - console.log(data) - // let isExist = data.configFiles.find((item, index, arr) => { - // if (item.name == 'source.yaml') { - // console.log("存在", index) - // return item - // } - // }) if (data.configFiles) { - this.router.navigate(['/system/host/camera/imageLabel'], { queryParams: { id: item.id } }) this.isSourceYaml = true + const element = document.documentElement + if(element.requestFullscreen) { //进入全屏 + element.requestFullscreen(); + } + const modal = this.modal.create({ + nzContent: ImageLabel2Component, + nzViewContainerRef: this.viewContainerRef, + nzWidth: 1920, + nzClosable: false, + nzFooter: null, + nzWrapClassName: 'canvasContentBox', + nzBodyStyle: { + 'border-radius': '0px', + 'padding': '0px', + 'margin': '0px', + }, + nzComponentParams: { + data: item.id + }, + nzOnOk: async () => { + + } + }); + const instance = modal.getContentComponent(); + //this.router.navigate(['/system/host/camera/imageLabel'], { queryParams: { id: item.id } }) } else { this.isSourceYaml = false this.message.create('error', '请先下发source.yaml配置'); 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 35c7d67..2f81de6 100644 --- a/src/app/system-management/image-label2/image-label2.component.html +++ b/src/app/system-management/image-label2/image-label2.component.html @@ -1,16 +1,15 @@ -
- +
+
- - +
diff --git a/src/app/system-management/image-label2/image-label2.component.scss b/src/app/system-management/image-label2/image-label2.component.scss index 4a7f5e2..da32a4e 100644 --- a/src/app/system-management/image-label2/image-label2.component.scss +++ b/src/app/system-management/image-label2/image-label2.component.scss @@ -1,4 +1,4 @@ -.box { +.canvasBox { width: 100%; height: 100%; background: #fff; @@ -9,7 +9,7 @@ flex-direction: column; overflow: hidden; .imgbox{ flex: 1; overflow: hidden; } - canvas{ overflow: hidden; } + canvas{ overflow: hidden; display: block; } .content,.center{ width: 100%; height: 100%; @@ -19,17 +19,19 @@ .btnbox { display: flex; - margin-bottom: 8px; - + position: fixed; + left: 1%; + top: 1%; + z-index: 10; button { margin-right: 6px; } - .leftTitle{ line-height: 32px; padding: 0 20px; } + .leftTitle{ line-height: 32px; margin-right: 10px; color: #fff; } } .imgbox, .btnbox { box-sizing: border-box; - padding: 0 12px; + padding: 0; } .selectBtn { background-color: #1890ff; color: #fff; } 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 190c085..26bd995 100644 --- a/src/app/system-management/image-label2/image-label2.component.ts +++ b/src/app/system-management/image-label2/image-label2.component.ts @@ -1,7 +1,7 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http'; -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import { Component, Input, OnInit } from '@angular/core'; import { NzMessageService } from 'ng-zorro-antd/message'; +import { NzModalService } from 'ng-zorro-antd/modal'; @Component({ selector: 'app-image-label2', @@ -10,8 +10,9 @@ import { NzMessageService } from 'ng-zorro-antd/message'; }) export class ImageLabel2Component implements OnInit { - constructor(private route: ActivatedRoute, private http: HttpClient, private message: NzMessageService) { } + constructor(private http: HttpClient, private message: NzMessageService, private modal: NzModalService) { } + @Input() data: any; //传递id camerasData: any; //摄像头Data imgItem: any; //图片 URL canvasWidth: number = 0; @@ -24,7 +25,7 @@ export class ImageLabel2Component implements OnInit { } ngOnInit(): void { - + } ngAfterContentInit(): void { @@ -39,55 +40,46 @@ export class ImageLabel2Component implements OnInit { } anewgetImg() { + let params = { + cameraId: this.data + } + this.http.put('/api/Cameras/Commands/CaptureImages', '', { params: params }).subscribe( + { + next: (value: Object) => { + this.message.create('success', '向边缘设备发送请求成功，请过一段时间手动刷新页面!'); + }, + error: (error: HttpErrorResponse) => { + + }, + complete: () => { - - - this.route.queryParams.subscribe(parmas => { - let params = { - cameraId: parmas.id - } - this.http.put('/api/Cameras/Commands/CaptureImages', '', { params: params }).subscribe( - { - next: (value: Object) => { - // console.log(111, value) - this.message.create('success', '向边缘设备发送请求成功，请过一段时间手动刷新页面!'); - }, - error: (error: HttpErrorResponse) => { - - }, - complete: () => { - - } } - ) - }) + } + ) } - //获取 摄像头图片/标注点位 getImgMarkData() { let that = this return new Promise((resolve, reject) => { - that.route.queryParams.subscribe(parmas => { - that.http.get(`/api/Cameras/${parmas.id}`).subscribe((info: any) => { - info.dimensionedPoints ? info.dimensionedPoints = JSON.parse(info.dimensionedPoints) : null; - that.camerasData = info; - that.markType = info.type; - console.log(that.camerasData, "摄像头数据") - 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') - }, - }) //get + that.http.get(`/api/Cameras/${that.data}`).subscribe((info: any) => { + info.dimensionedPoints ? info.dimensionedPoints = JSON.parse(info.dimensionedPoints) : null; + that.camerasData = info; + that.markType = info.type; + console.log(that.camerasData, "摄像头数据") + const httpOptions = { + responseType: 'blob' as 'json', + params: { cameraId: that.data } + }; + that.http.get(`/api/Cameras/Images`, httpOptions).subscribe({ + next: (data) => { + resolve(data) + }, + error: (err) => { + reject('error') + }, }) //get - }) //route + }) //get }) } @@ -122,8 +114,13 @@ export class ImageLabel2Component implements OnInit { } let paramsData = JSON.parse(JSON.stringify(this.camerasData)) paramsData.dimensionedPoints = JSON.stringify(paramsData.dimensionedPoints) - this.http.put(`/api/Cameras/${this.camerasData.id}`, paramsData).subscribe(data => { + this.http.put(`/api/Cameras/${this.camerasData.id}/DimensionedPoints`, paramsData).subscribe(data => { this.message.create('success', '保存成功!'); + const isFullScreen = document.fullscreenElement + if (document.exitFullscreen && isFullScreen) { //关闭全屏 + document.exitFullscreen() + } + this.modal.closeAll(); }) } @@ -149,20 +146,23 @@ export class ImageLabel2Component implements OnInit { img.src = that.imgItem ? that.imgItem : "../../../assets/images/bgImg.png"; img.onload = () => { // 等比例缩放图片 - var scale = 1; - if (img.width > center.clientWidth || img.height > center.clientHeight) { - let scaleOne = center.clientWidth / img.width; - let scaleTwo = center.clientHeight / img.height; - if (img.width * scaleOne <= center.clientWidth && img.height * scaleOne <= center.clientHeight) { - scale = scaleOne; - } else if (img.width * scaleTwo <= center.clientWidth && img.height * scaleTwo <= center.clientHeight) { - scale = scaleTwo; - } else { - scale = 0.3; - } - } - that.canvasWidth = img.width * scale; - that.canvasHeight = img.height * scale; // 计算等比缩小后图片 + // var scale = 1; + // if (img.width > center.clientWidth || img.height > center.clientHeight) { + // let scaleOne = center.clientWidth / img.width; + // let scaleTwo = center.clientHeight / img.height; + // if (img.width * scaleOne <= center.clientWidth && img.height * scaleOne <= center.clientHeight) { + // scale = scaleOne; + // } else if (img.width * scaleTwo <= center.clientWidth && img.height * scaleTwo <= center.clientHeight) { + // scale = scaleTwo; + // } else { + // scale = 0.3; + // } + // } + // that.canvasWidth = img.width * scale; + // that.canvasHeight = img.height * scale; // 计算等比缩小后图片 + that.canvasWidth = img.width; + that.canvasHeight = img.height; + console.log(img.width + "*" + img.height) window.setTimeout(() => { // 加载图片 ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight); this.copyCanvas = ctx.getImageData(0, 0, that.canvasWidth, that.canvasHeight) @@ -202,10 +202,6 @@ export class ImageLabel2Component implements OnInit { //清空画布 clearCanvas() { - let istrue = confirm("清除属于不可逆操作,你是否继续?"); - if (!istrue) { - return - } // 清空标绘箭头 this.arrowPoints = []; // 清空标绘箭头 diff --git a/src/app/system-management/system-management.module.ts b/src/app/system-management/system-management.module.ts index bb10618..0cb057b 100644 --- a/src/app/system-management/system-management.module.ts +++ b/src/app/system-management/system-management.module.ts @@ -18,6 +18,7 @@ import { NzMessageModule } from 'ng-zorro-antd/message'; import { NzTreeModule } from 'ng-zorro-antd/tree'; import { NzSpinModule } from 'ng-zorro-antd/spin'; import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; +import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; import { AddorComponent } from './organization/addor/addor.component'; import { EditorComponent } from './organization/editor/editor.component'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; @@ -61,7 +62,8 @@ import { ModelComponent } from './condition-monitoring/model/model.component'; NzTreeSelectModule, NzCheckboxModule, NzPageHeaderModule, - NzTabsModule + NzTabsModule, + NzPopconfirmModule ], entryComponents: [AddorComponent, EditorComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, SendFileComponent, ModelComponent] diff --git a/src/styles.scss b/src/styles.scss index dd9d7b7..5aeccee 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -135,4 +135,16 @@ app-root { .maxHeightTreeSelect { max-height: 280px; +} + +.canvasContentBox{ + .ant-modal { + margin: 0; + padding: 0; + top: 0; + left: 0; + width: 100%; + height: 100%; + max-width: 100%; + } } \ No newline at end of file