[完善]新增散装油标注

src/app/system-management/host-config/host-config.component.ts

@@ -246,11 +246,6 @@ export class HostConfigComponent implements OnInit {
             this.message.create('error', '请先下发source.yaml配置');
           }
         } else if (this.hostType == '黄海') {
-          if (item.type === 1) {
-            this.message.info('加油区不需要标注');
-            return;
-          }
-
           const element = document.documentElement;
           if (element.requestFullscreen) {
             //进入全屏
@@ -1213,12 +1208,11 @@ rule_threshold:
       smoke_th: 0.8,
       phone_th: 0.8,
       bulkoil_th: 0.8,
-      fileUpload:
+      fileUpload: 'https://gas.anxincloud.cn/api/Objects/gas/violations',
-        'http://121.36.37.70:8906/api/Objects/sinochemtest/violations',
+      alarmUpload: 'https://gas.anxincloud.cn/api/Data/ViolationRecordPush',
-      alarmUpload: 'http://121.36.37.70:8208/api/Data/ViolationRecordPush',
       unloadingProUpload:
-        'http://121.36.37.70:8208/api/Data/OilUnloadingProcessPush',
+        'https://gas.anxincloud.cn/api/Data/OilUnloadingProcessPush',
-      prefix: '/api/Objects/sinochemtest',
+      prefix: '/api/Objects/gas',
     };
     this.listOfData.forEach((item: any) => {
       if (item.type === 0) {
@@ -1231,10 +1225,16 @@ rule_threshold:
         });
       }
       if (item.type === 1) {
-        obj.sources.push({
+        let objitem: any = {
           nickName: '加油区',
           rtsp: item.uri,
-        });
+        };
+        if (item.dimensionedPointsHuanghaiObj.bulkoilROI.length !== 0) {
+          objitem.bulkoilROI = pointsArrTransition(
+            item.dimensionedPointsHuanghaiObj.bulkoilROI
+          );
+        }
+        obj.sources.push(objitem);
       }
       if (item.type === 2) {
         obj.sources.push({

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

@@ -14,9 +14,9 @@
       <span class="deleteItem" (click)="clearCanvasItem($event,'carStopROI')">删除</span>
     </button>
 
-    <button *ngIf="markType === 3" nz-button [ngClass]="{selectBtn: selectedBtn === '收银区'}"
+    <button *ngIf="markType === 1" nz-button [ngClass]="{selectBtn: selectedBtn === '散装油'}"
-      (click)="selectedBtn = '收银区'">收银区
+      (click)="selectedBtn = '散装油'">散装油
-      <span class="deleteItem" (click)="clearCanvasItem($event,'cashierROI')">删除</span>
+      <span class="deleteItem" (click)="clearCanvasItem($event,'bulkoilROI')">删除</span>
     </button>
 
     <button *ngIf="markType === 2" nz-button [ngClass]="{selectBtn: selectedBtn === '闯入区'}"
@@ -24,12 +24,17 @@
       <span class="deleteItem" (click)="clearCanvasItem($event,'intrusionROI')">删除</span>
     </button>
 
+
     <!-- 矩形 -->
     <button *ngIf="markType === 2" nz-button [ngClass]="{selectBtn: selectedBtn === '卸油区'}"
       (click)="selectedBtn = '卸油区'">卸油区
       <span class="deleteItem" (click)="clearCanvasItem($event,'unloadingROI')">删除</span>
     </button>
 
+    <button *ngIf="markType === 3" nz-button [ngClass]="{selectBtn: selectedBtn === '收银区'}"
+      (click)="selectedBtn = '收银区'">收银区
+      <span class="deleteItem" (click)="clearCanvasItem($event,'cashierROI')">删除</span>
+    </button>
 
 
     <button nz-button nzType="primary" (click)="anewgetImg()">重新捕获摄像头图片</button>

src/app/system-management/image-label/image-label.component.ts

@@ -34,16 +34,20 @@ export class ImageLabelComponent implements OnInit {
   getImgMarkData() {
     return new Promise((resolve, reject) => {
       this.http.get(`/api/Cameras/${this.cameraId}`).subscribe((data: any) => {
-        console.log(456, data);
-        // data.dimensionedPointsHuanghai
-        //   ? (data.dimensionedPointsHuanghai = JSON.parse(data.dimensionedPointsHuanghai))
-        //   : null;
         this.camerasData = data;
         this.markType = data.type;
-
+        if (this.markType === 1) {
-        this.markType === 3
+          this.selectedBtn = '散装油';
-          ? (this.selectedBtn = '收银区')
+        }
-          : (this.selectedBtn = '停车区');
+        if (this.markType === 2) {
+          this.selectedBtn = '停车区';
+        }
+        if (this.markType === 3) {
+          this.selectedBtn = '收银区';
+        }
+        if (this.markType === 4) {
+          this.selectedBtn = '停车区';
+        }
         const httpOptions = {
           responseType: 'blob' as 'json',
           params: { cameraId: this.cameraId },
@@ -142,6 +146,19 @@ export class ImageLabelComponent implements OnInit {
     }
 
     console.log('原始标点数据', this.camerasData.dimensionedPointsHuanghai);
+
+    //散装油
+    if (
+      this.camerasData.dimensionedPointsHuanghai.bulkoilROI &&
+      this.camerasData.dimensionedPointsHuanghai.bulkoilROI.length !== 0
+    ) {
+      this.camerasData.dimensionedPointsHuanghai.bulkoilROI.forEach(
+        (element) => {
+          this.bulkoilROIDrawPolygon(element.x, element.y, canvas, context);
+        }
+      );
+    }
+
     //收银区
     if (this.camerasData.dimensionedPointsHuanghai.cashierROI.length !== 0) {
       this.camerasData.dimensionedPointsHuanghai.cashierROI.forEach(
@@ -202,7 +219,8 @@ export class ImageLabelComponent implements OnInit {
         //进出口
         this.carStopROIDrawPolygon(clickX, clickY, canvas, context); //绘制停车区
       } else if (this.markType === 1) {
-        //加油区(暂不需要标注)
+        //加油区
+        this.bulkoilROIDrawPolygon(clickX, clickY, canvas, context); //绘制散装油
       } else if (this.markType === 2) {
         //卸油区
         if (this.selectedBtn === '停车区') {
@@ -609,6 +627,84 @@ export class ImageLabelComponent implements OnInit {
     context.strokeStyle = 'blue';
     context.stroke();
   }
+
+  //散装油
+  bulkoilROIPoints = []; //线段的点的集合
+  bulkoilROICircles = []; //可拖动圆圈的点的集合
+  bulkoilROIAllpoints = []; //整体移动点位
+  bulkoilROIIsDragging = false; //是否可拖拽
+  bulkoilROIIsInOut = false; //是否在绘制区域内
+  bulkoilROIDrawPolygon(clickX, clickY, canvas, context) {
+    if (this.isInt(clickX, clickY, this.bulkoilROIPoints)) {
+      this.bulkoilROIIsInOut = true;
+      return;
+    } else {
+      this.bulkoilROIIsInOut = false;
+    }
+    let index;
+    //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码
+    for (var i = 0; i < this.bulkoilROICircles.length; i++) {
+      let circle = this.bulkoilROICircles[i];
+      //使用勾股定理计算这个点与圆心之间的距离
+      var distanceFromCenter = Math.sqrt(
+        Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)
+      );
+
+      // 如果是其他的点，则设置可以拖动
+      if (distanceFromCenter <= circle.radius) {
+        // 清除之前选择的圆圈
+        index = i;
+        this.bulkoilROIIsDragging = true;
+        //停止搜索
+        return;
+      }
+    }
+
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
+
+    //遍历数组画圆
+    var circle = {
+      x: clickX,
+      y: clickY,
+      radius: 5,
+      color: 'yellow',
+      isSelected: false, //拖拽点的标记
+    };
+    this.bulkoilROICircles.push(circle);
+    this.bulkoilROIAllpoints = JSON.parse(
+      JSON.stringify(this.bulkoilROICircles)
+    );
+    this.bulkoilROICircles[0].color = 'white';
+    for (var i = 0; i < this.bulkoilROICircles.length; i++) {
+      let circle = this.bulkoilROICircles[i];
+      // 绘制圆圈
+      context.globalAlpha = 0.85;
+      context.beginPath();
+      context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
+      context.fillStyle = circle.color;
+      context.strokeStyle = 'red';
+      context.fill();
+      context.stroke();
+    }
+    // 画线
+    var point = {
+      x: clickX,
+      y: clickY,
+    };
+    this.bulkoilROIPoints.push(point);
+    context.beginPath();
+    context.lineWidth = 3;
+    //从起始点开始绘制
+    context.moveTo(this.bulkoilROIPoints[0].x, this.bulkoilROIPoints[0].y);
+    for (var i = 0; i < this.bulkoilROIPoints.length; i++) {
+      context.lineTo(this.bulkoilROIPoints[i].x, this.bulkoilROIPoints[i].y);
+    }
+    context.closePath();
+    context.strokeStyle = 'pink';
+    context.stroke();
+  }
+
   //判断点位是否在图形区域内
   isInt(x, y, points) {
     if (!points[2]) {
@@ -650,6 +746,10 @@ export class ImageLabelComponent implements OnInit {
     this.cashierROIPoints = []; //线段的点的集合
     this.cashierROICircles = []; //可拖动圆圈的点的集合
     this.cashierROIAllpoints = []; //整体移动点位
+    //散装油
+    this.bulkoilROIPoints = []; //线段的点的集合
+    this.bulkoilROICircles = []; //可拖动圆圈的点的集合
+    this.bulkoilROIAllpoints = []; //整体移动点位
     context.clearRect(0, 0, canvas.width, canvas.height);
     this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
   }
@@ -766,6 +866,7 @@ export class ImageLabelComponent implements OnInit {
         intrusionROI: [],
         cashierROI: [],
         unloadingROI: [],
+        bulkoilROI: [],
       };
     }
     //进出口
@@ -777,6 +878,15 @@ export class ImageLabelComponent implements OnInit {
       this.camerasData.dimensionedPointsHuanghai.carStopROI =
         this.carStopROIPoints;
     }
+    //加油区
+    if (this.markType === 1) {
+      // if (this.bulkoilROIPoints.length === 0) {
+      //   this.message.create('warning', '绘制完整后可保存!');
+      //   return;
+      // }
+      this.camerasData.dimensionedPointsHuanghai.bulkoilROI =
+        this.bulkoilROIPoints;
+    }
     //卸油区
     if (this.markType === 2) {
       if (

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

@@ -1,6 +1,7 @@
 <div class="canvasBox">
   <!-- <nz-page-header class="site-page-header" (nzBack)="goback()" nzBackIcon nzSubtitle="返回上一页"></nz-page-header> -->
   <div class="btnbox">
+    <label class="leftTitle" style="color: red;">交大盒子标记</label>
     <label class="leftTitle" *ngIf="markType === 0">进出口</label>
     <label class="leftTitle" *ngIf="markType === 1">加油区</label>
     <label class="leftTitle" *ngIf="markType === 2">卸油区</label>