标会初始化对接接口

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}})
   }
 
 

src/app/system-management/image-label2/image-label2.component.html

@@ -1,13 +1,13 @@
 <div class="box">
   <nz-page-header class="site-page-header" (nzBack)="goback()" nzBackIcon nzSubtitle="返回上一页"></nz-page-header>
   <div class="btnbox">
-    <label class="leftTitle" *ngIf="markType === 1">进出口</label>
-    <label class="leftTitle" *ngIf="markType === 3">卸油区</label>
-    <label class="leftTitle" *ngIf="markType === 4">便利店</label>
+    <label class="leftTitle" *ngIf="markType === 0">进出口</label>
+    <label class="leftTitle" *ngIf="markType === 2">卸油区</label>
+    <label class="leftTitle" *ngIf="markType === 3">便利店</label>
     <!-- <button nz-button nzType="primary">获取标注底图/更新摄像头图片</button> -->
-    <button nz-button *ngIf="markType === 3" [ngClass]="{selectBtn: isDrawArrow}" (click)="isDrawArrow = true;">箭头方向标绘</button>
-    <button nz-button *ngIf="markType === 3" [ngClass]="{selectBtn: !isDrawArrow && oilUnloadingArea}" (click)="isDrawArrow = false; oilUnloadingArea = true;">泄油管区域</button>
-    <button nz-button *ngIf="markType === 3" [ngClass]="{selectBtn: !isDrawArrow && !oilUnloadingArea}" (click)="isDrawArrow = false; oilUnloadingArea = false;">静电接地仪</button>
+    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: isDrawArrow}" (click)="isDrawArrow = true;">箭头方向标绘</button>
+    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: !isDrawArrow && oilUnloadingArea}" (click)="isDrawArrow = false; oilUnloadingArea = true;">泄油管区域</button>
+    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: !isDrawArrow && !oilUnloadingArea}" (click)="isDrawArrow = false; oilUnloadingArea = false;">静电接地仪</button>
     <button nz-button nzType="primary" (click)="save()">保存</button>
     <button nz-button nzType="primary" nzDanger (click)="clearCanvas()">清空</button>
   </div>

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 => {