From 62a6fdc0bd1d136c65a2eb8ee39d2214c33e9f1d Mon Sep 17 00:00:00 2001
From: SHAOJIAHAO <55341701@qq.com>
Date: Wed, 29 Mar 2023 13:56:25 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E5=8D=B8=E6=B2=B9=E5=8C=BA?=
 =?UTF-8?q?=E4=BA=BA,=E7=81=AD=E7=81=AB=E5=99=A8,=E9=9A=94=E7=A6=BB?=
 =?UTF-8?q?=E6=A4=8E=E6=A0=87=E7=BB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../host-config/host-config.component.ts      |   1 -
 .../image-label/image-label.component.html    |   5 +
 .../image-label/image-label.component.ts      | 163 ++++++++++++++++--
 3 files changed, 155 insertions(+), 14 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 dc64409..0c497ea 100644
--- a/src/app/system-management/host-config/host-config.component.ts
+++ b/src/app/system-management/host-config/host-config.component.ts
@@ -1213,7 +1213,6 @@ rule_threshold:
                 })
                 .subscribe({
                   next: (data) => {
-                    console.log('牛逼', JSON.parse(instance.datacopy));
                     this.message.create('success', `发送文件名成功`);
                   },
                 });
diff --git a/src/app/system-management/image-label/image-label.component.html b/src/app/system-management/image-label/image-label.component.html
index 56cf45f..d81dbbb 100644
--- a/src/app/system-management/image-label/image-label.component.html
+++ b/src/app/system-management/image-label/image-label.component.html
@@ -30,6 +30,11 @@
       (click)="selectedBtn = '卸油区'">卸油区
       <span class="deleteItem" (click)="clearCanvasItem($event,'unloadingROI')">删除</span>
     </button>
+    <button *ngIf="markType === 2" nz-button [ngClass]="{selectBtn: selectedBtn === '人'}"
+      (click)="selectedBtn = '人'">人,灭火器,隔离椎
+      <span class="deleteItem" (click)="clearCanvasItem($event,'xxxROI')">删除</span>
+    </button>
+
 
     <button *ngIf="markType === 3" nz-button [ngClass]="{selectBtn: selectedBtn === '收银区'}"
       (click)="selectedBtn = '收银区'">收银区
diff --git a/src/app/system-management/image-label/image-label.component.ts b/src/app/system-management/image-label/image-label.component.ts
index 55f76b1..9d85f8a 100644
--- a/src/app/system-management/image-label/image-label.component.ts
+++ b/src/app/system-management/image-label/image-label.component.ts
@@ -36,6 +36,9 @@ export class ImageLabelComponent implements OnInit {
       this.http.get(`/api/Cameras/${this.cameraId}`).subscribe((data: any) => {
         this.camerasData = data;
         this.markType = data.type;
+        if (this.markType === 0) {
+          this.selectedBtn = '停车区';
+        }
         if (this.markType === 1) {
           this.selectedBtn = '散装油';
         }
@@ -45,9 +48,6 @@ export class ImageLabelComponent implements OnInit {
         if (this.markType === 3) {
           this.selectedBtn = '收银区';
         }
-        if (this.markType === 4) {
-          this.selectedBtn = '停车区';
-        }
         const httpOptions = {
           responseType: 'blob' as 'json',
           params: { cameraId: this.cameraId },
@@ -196,6 +196,19 @@ export class ImageLabelComponent implements OnInit {
         context
       );
     }
+
+    //绘制人，灭火器，隔离锥矩形
+    if (
+      this.camerasData.dimensionedPointsHuanghai.xxxROI &&
+      this.camerasData.dimensionedPointsHuanghai.xxxROI.length !== 0
+    ) {
+      this.xxxROIOblongPoints =
+        this.camerasData.dimensionedPointsHuanghai.xxxROI;
+      this.xxxROIDrawOblong(
+        this.camerasData.dimensionedPointsHuanghai.xxxROI,
+        context
+      );
+    }
   }
 
   markType: number = 0; //0=进出口,1=加油区,2=卸油区,3=便利店,
@@ -234,7 +247,6 @@ export class ImageLabelComponent implements OnInit {
             this.message.create('warning', '卸油区只允许绘制1个!');
             return;
           }
-
           //绘制矩形
           context.beginPath();
           context.moveTo(clickX, clickY);
@@ -266,6 +278,43 @@ export class ImageLabelComponent implements OnInit {
               element.y + 22
             );
           };
+        } else if (this.selectedBtn === '人') {
+          if (this.xxxROIOblongPoints.length === 1) {
+            //限制数量
+            this.message.create('warning', '人,灭火器,隔离椎只允许绘制1个!');
+            return;
+          }
+          //绘制矩形
+          context.beginPath();
+          context.moveTo(clickX, clickY);
+          context.strokeStyle = 'green';
+          context.lineWidth = 3;
+          canvas.onmousemove = (ev) => {
+            //鼠标移动事件
+            var moveX = ev.pageX - canvas.offsetLeft;
+            var moveY = ev.pageY - canvas.offsetTop;
+
+            this.xxxROIDrawOblong(this.xxxROIOblongPoints, context);
+            context.strokeStyle = 'black';
+            let element = this.getOblongInfo(
+              this.downx,
+              this.downy,
+              moveX,
+              moveY
+            );
+            context.strokeRect(
+              element.x,
+              element.y,
+              element.width,
+              element.height
+            );
+            context.font = '22px Arial';
+            context.fillText(
+              '高度:' + element.height,
+              element.x + 3,
+              element.y + 22
+            );
+          };
         }
         //
       } else if (this.markType === 3) {
@@ -284,7 +333,18 @@ export class ImageLabelComponent implements OnInit {
         //因为只有卸油区需要画矩形
         return;
       }
-      if (this.markType === 2 && this.unloadingROIOblongPoints.length === 1) {
+      if (
+        this.markType === 2 &&
+        this.selectedBtn === '卸油区' &&
+        this.unloadingROIOblongPoints.length === 1
+      ) {
+        return;
+      }
+      if (
+        this.markType === 2 &&
+        this.selectedBtn === '人' &&
+        this.xxxROIOblongPoints.length === 1
+      ) {
         return;
       }
       if (this.markType === 2 && this.selectedBtn === '卸油区') {
@@ -294,6 +354,13 @@ export class ImageLabelComponent implements OnInit {
         this.unloadingROIOblongPoints.push(point);
         this.unloadingROIDrawOblong(this.unloadingROIOblongPoints, context);
       }
+      if (this.markType === 2 && this.selectedBtn === '人') {
+        var upX = e.pageX - canvas.offsetLeft;
+        var upY = e.pageY - canvas.offsetTop;
+        let point = this.getOblongInfo(this.downx, this.downy, upX, upY);
+        this.xxxROIOblongPoints.push(point);
+        this.xxxROIDrawOblong(this.xxxROIOblongPoints, context);
+      }
     };
   }
 
@@ -324,6 +391,11 @@ export class ImageLabelComponent implements OnInit {
         'red'
       );
     }
+    //重绘人，灭火器，隔离椎
+    if (this.xxxROIOblongPoints && this.xxxROIOblongPoints.length != 0) {
+      this.redrawRectangle(this.xxxROIOblongPoints, context, 'black');
+    }
+
     oblongList.forEach((element) => {
       context.strokeStyle = 'orange';
       context.lineWidth = 3;
@@ -333,6 +405,54 @@ export class ImageLabelComponent implements OnInit {
       context.fillText('高度:' + element.height, element.x + 3, element.y + 22);
     });
   }
+
+  //人，灭火器，隔离椎矩形
+  xxxROIOblongPoints = []; //矩形的点的集合
+  xxxROIDrawOblong(oblongList, context) {
+    context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+    this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
+
+    //重绘停车区
+    if (this.carStopROIPoints && this.carStopROIPoints.length != 0) {
+      this.redrawPolygon(
+        this.carStopROIPoints,
+        this.carStopROIAllpoints,
+        this.carStopROICircles,
+        context,
+        'green'
+      );
+    }
+
+    //重绘闯入区
+    if (this.carStopROIPoints && this.carStopROIPoints.length != 0) {
+      this.redrawPolygon(
+        this.intrusionROIPoints,
+        this.intrusionROIAllpoints,
+        this.intrusionROICircles,
+        context,
+        'red'
+      );
+    }
+
+    //重绘卸油区
+    if (
+      this.unloadingROIOblongPoints &&
+      this.unloadingROIOblongPoints.length != 0
+    ) {
+      this.redrawRectangle(this.unloadingROIOblongPoints, context, 'orange');
+    }
+    //
+
+    oblongList.forEach((element) => {
+      context.strokeStyle = 'black';
+      context.lineWidth = 3;
+      context.strokeRect(element.x, element.y, element.width, element.height);
+      context.font = '22px Arial';
+      context.fontColor = 'black';
+      context.fillText('高度:' + element.height, element.x + 3, element.y + 22);
+    });
+  }
+
   /** 获取 矩形左上角点位/宽高 */
   getOblongInfo(startX, startY, endX, endY) {
     let point = {
@@ -408,9 +528,12 @@ export class ImageLabelComponent implements OnInit {
       this.unloadingROIOblongPoints &&
       this.unloadingROIOblongPoints.length != 0
     ) {
-      this.redrawRectangle(this.unloadingROIOblongPoints, context);
+      this.redrawRectangle(this.unloadingROIOblongPoints, context, 'orange');
+    }
+    //重绘人，灭火器，隔离椎
+    if (this.xxxROIOblongPoints && this.xxxROIOblongPoints.length != 0) {
+      this.redrawRectangle(this.xxxROIOblongPoints, context, 'black');
     }
-
     //遍历数组画圆
     var circle = {
       x: clickX,
@@ -504,9 +627,12 @@ export class ImageLabelComponent implements OnInit {
       this.unloadingROIOblongPoints &&
       this.unloadingROIOblongPoints.length != 0
     ) {
-      this.redrawRectangle(this.unloadingROIOblongPoints, context);
+      this.redrawRectangle(this.unloadingROIOblongPoints, context, 'orange');
+    }
+    //重绘人，灭火器，隔离椎
+    if (this.xxxROIOblongPoints && this.xxxROIOblongPoints.length != 0) {
+      this.redrawRectangle(this.xxxROIOblongPoints, context, 'black');
     }
-
     //遍历数组画圆
     var circle = {
       x: clickX,
@@ -735,6 +861,7 @@ export class ImageLabelComponent implements OnInit {
     let canvas = document.getElementById('canvas') as any;
     let context = canvas.getContext('2d');
     this.unloadingROIOblongPoints = []; //矩形的点的集合
+    this.xxxROIOblongPoints = []; //矩形的点的集合
     //停车区多边形
     this.carStopROIPoints = []; //线段的点的集合
     this.carStopROICircles = []; //可拖动圆圈的点的集合
@@ -787,6 +914,10 @@ export class ImageLabelComponent implements OnInit {
             this.unloadingROIOblongPoints = [];
             this.redrawAll();
           }
+          if (type === 'xxxROI') {
+            this.xxxROIOblongPoints = [];
+            this.redrawAll();
+          }
         } else {
           this.clearCanvas();
         }
@@ -812,7 +943,9 @@ export class ImageLabelComponent implements OnInit {
       'red'
     );
 
-    this.redrawRectangle(this.unloadingROIOblongPoints, this.context);
+    this.redrawRectangle(this.unloadingROIOblongPoints, this.context, 'orange');
+
+    this.redrawRectangle(this.xxxROIOblongPoints, this.context, 'black');
   }
 
   //根据已有数据重绘多边形
@@ -847,13 +980,14 @@ export class ImageLabelComponent implements OnInit {
   }
 
   //根据已有数据重绘矩形
-  redrawRectangle(oblongList, context) {
+  redrawRectangle(oblongList, context, color) {
+    console.log(666, context.strokeStyle);
     oblongList.forEach((element) => {
-      context.strokeStyle = 'orange';
+      context.strokeStyle = color;
       context.lineWidth = 3;
       context.strokeRect(element.x, element.y, element.width, element.height);
       context.font = '22px Arial';
-      context.fontColor = 'orange';
+      context.fontColor = color;
       context.fillText('高度:' + element.height, element.x + 3, element.y + 22);
     });
   }
@@ -868,6 +1002,7 @@ export class ImageLabelComponent implements OnInit {
         cashierROI: [],
         unloadingROI: [],
         bulkoilROI: [],
+        xxxROI: [],
       };
     }
     //进出口
@@ -905,6 +1040,8 @@ export class ImageLabelComponent implements OnInit {
         this.intrusionROIPoints;
       this.camerasData.dimensionedPointsHuanghai.unloadingROI =
         this.unloadingROIOblongPoints;
+      this.camerasData.dimensionedPointsHuanghai.xxxROI =
+        this.xxxROIOblongPoints;
     }
     //便利店
     if (this.markType === 3) {