[新增]东南西北参数

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

@@ -407,7 +407,6 @@ class-id=-1
       if ((item.type == 2 || item.type == 3) && item.dimensionedPointsObj && item.dimensionedPointsObj.arrow.length != 0) {
         let arrowArr = item.dimensionedPointsObj.arrow
         let str = arrowArr[1].startX + ';' + arrowArr[1].startY + ';' + arrowArr[1].endX + ';' + arrowArr[1].endY + ';' + arrowArr[0].startX + ';' + arrowArr[0].startY + ';' + arrowArr[0].endX + ';' + arrowArr[0].endY
-        console.log('十字箭头', str)
         config1 += `
 [line-crossing-stream-${item.order}]
 enable=1
@@ -426,7 +425,48 @@ mode=strict
       `
       }
     })
+    //新增东南西北参数
+    copyListOfData.forEach(element => {
+      if (element.type == 2) {//卸油区
+        let obj = element.dimensionedPointsObj
+        let str1 = ''
+        if (obj && obj.arrowOfSouth && obj.arrowOfSouth.length == 2) {
+          str1 = `${obj.arrowOfSouth[1].startX};${obj.arrowOfSouth[1].startY};${obj.arrowOfSouth[1].endX};${obj.arrowOfSouth[1].endY}`
+        }
+        let str2 = ''
+        if (obj && obj.arrowOfWest && obj.arrowOfWest.length == 2) {
+          str2 = `${obj.arrowOfWest[1].startX};${obj.arrowOfWest[1].startY};${obj.arrowOfWest[1].endX};${obj.arrowOfWest[1].endY}`
+        }
+        if (str1 && str2) {
+          config1 += `
+[direction-detection-stream-${element.order}]
+enable=1
+#Label;direction;
+direction-South=${str1}
+direction-West=${str2}
+class-id=0
+`
+        }
 
+      }
+      if (element.type == 3) {//收银区
+        let obj = element.dimensionedPointsObj
+        let str1 = ''
+        if (obj && obj.arrowOfSouth && obj.arrowOfSouth.length == 2) {
+          str1 = `${obj.arrowOfSouth[1].startX};${obj.arrowOfSouth[1].startY};${obj.arrowOfSouth[1].endX};${obj.arrowOfSouth[1].endY}`
+        }
+        if (str1) {
+          config1 += `
+[direction-detection-stream-${element.order}]
+enable=1
+#Label;direction;
+direction-South=${str1}
+class-id=0
+`
+        }
+
+      }
+    });
     let xieyouguan = '';
     let jingdian = '';
     if (xieyouqu.length != 0 && xieyouqu[0].dimensionedPointsObj && xieyouqu[0].dimensionedPointsObj.rectangle.length != 0) {

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

@@ -4,17 +4,32 @@
     <label class="leftTitle" *ngIf="markType === 0">进出口</label>
     <label class="leftTitle" *ngIf="markType === 2">卸油区</label>
     <label class="leftTitle" *ngIf="markType === 3">便利店</label>
-    <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 *ngIf="markType === 2 || markType === 3" [ngClass]="{selectBtn: isDrawArrow && !arrowDirection}"
+      (click)="isDrawArrow = true;arrowDirection=null">箭头方向标绘</button>
+    <button nz-button *ngIf="markType === 2 || markType === 3"
+      [ngClass]="{selectBtn:(isDrawArrow && arrowDirection=='South')}"
+      (click)="isDrawArrow = true;arrowDirection='South'">South</button>
+    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: (isDrawArrow && arrowDirection=='West')}"
+      (click)="isDrawArrow = true;arrowDirection='West'">West</button>
+    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: (isDrawArrow && arrowDirection=='East')}"
+      (click)="isDrawArrow = true;arrowDirection='East'">East</button>
+    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: (isDrawArrow && arrowDirection=='North')}"
+      (click)="isDrawArrow = true;arrowDirection='North'">North</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)="anewgetImg()">重新捕获摄像头图片</button>
     <button nz-button nzType="primary" (click)="save()">保存</button>
-    <button nz-button nzType="primary" nzDanger nz-popconfirm nzPopconfirmTitle="您确定要清空吗?" (nzOnConfirm)="clearCanvas()">清空</button>
-    <label *ngIf="camerasData" class="rightTitle">原始分辨率：  {{camerasData.originalWeight}} × {{camerasData.originalHeight}}</label>
+    <button nz-button nzType="primary" nzDanger nz-popconfirm nzPopconfirmTitle="您确定要清空吗?"
+      (nzOnConfirm)="clearCanvas()">清空</button>
+    <label *ngIf="camerasData" class="rightTitle">原始分辨率： {{camerasData.originalWeight}} ×
+      {{camerasData.originalHeight}}</label>
   </div>
   <div class="imgbox">
     <div class="content">
-      <div class="center" id="canvasCenter"><canvas id="canvas" [width]="canvasWidth" [height]="canvasHeight"></canvas></div>
+      <div class="center" id="canvasCenter"><canvas id="canvas" [width]="canvasWidth" [height]="canvasHeight"></canvas>
+      </div>
     </div>
   </div>
-</div>
+</div>

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

@@ -25,7 +25,7 @@ export class ImageLabel2Component implements OnInit {
   }
 
   ngOnInit(): void {
-    
+
   }
 
   ngAfterContentInit(): void {
@@ -49,7 +49,7 @@ export class ImageLabel2Component implements OnInit {
           this.message.create('success', '向边缘设备发送请求成功，请过一段时间手动刷新页面!');
         },
         error: (error: HttpErrorResponse) => {
-        
+
         },
         complete: () => {
 
@@ -89,6 +89,10 @@ export class ImageLabel2Component implements OnInit {
       this.camerasData.dimensionedPoints = {
         polygon: [],
         arrow: [],
+        arrowOfSouth: [],
+        arrowOfWest: [],
+        arrowOfEast: [],
+        arrowOfNorth: [],
         rectangle: [],
       }
     }
@@ -104,6 +108,12 @@ export class ImageLabel2Component implements OnInit {
         return
       }
       this.camerasData.dimensionedPoints.arrow = this.arrowPoints
+
+      this.camerasData.dimensionedPoints.arrowOfSouth = this.arrowPointsOfSouth
+      this.camerasData.dimensionedPoints.arrowOfWest = this.arrowPointsOfWest
+      this.camerasData.dimensionedPoints.arrowOfEast = this.arrowPointsOfEast
+      this.camerasData.dimensionedPoints.arrowOfNorth = this.arrowPointsOfNorth
+
       this.camerasData.dimensionedPoints.rectangle = this.oblongPoints
     } else if (this.markType === 3) {
       if (this.arrowPoints.length != 2) {
@@ -111,9 +121,11 @@ export class ImageLabel2Component implements OnInit {
         return
       }
       this.camerasData.dimensionedPoints.arrow = this.arrowPoints
+      this.camerasData.dimensionedPoints.arrowOfSouth = this.arrowPointsOfSouth
     }
     let paramsData = JSON.parse(JSON.stringify(this.camerasData))
     paramsData.dimensionedPoints = JSON.stringify(paramsData.dimensionedPoints)
+    console.log('标点结果', this.camerasData.dimensionedPoints)
     this.http.put(`/api/Cameras/${this.camerasData.id}/DimensionedPoints`, paramsData).subscribe(data => {
       this.message.create('success', '保存成功!');
       const isFullScreen = document.fullscreenElement
@@ -183,11 +195,28 @@ export class ImageLabel2Component implements OnInit {
       });
     } else if (this.markType === 2) {
       this.arrowPoints = this.camerasData.dimensionedPoints.arrow
+      if (this.camerasData.dimensionedPoints.arrowOfSouth && this.camerasData.dimensionedPoints.arrowOfSouth.length != 0) {
+        this.arrowPointsOfSouth = this.camerasData.dimensionedPoints.arrowOfSouth
+      }
+      if (this.camerasData.dimensionedPoints.arrowOfWest && this.camerasData.dimensionedPoints.arrowOfWest.length != 0) {
+        this.arrowPointsOfWest = this.camerasData.dimensionedPoints.arrowOfWest
+      }
+      if (this.camerasData.dimensionedPoints.arrowOfEast && this.camerasData.dimensionedPoints.arrowOfEast.length != 0) {
+        this.arrowPointsOfEast = this.camerasData.dimensionedPoints.arrowOfEast
+      }
+      if (this.camerasData.dimensionedPoints.arrowOfNorth && this.camerasData.dimensionedPoints.arrowOfNorth.length != 0) {
+        this.arrowPointsOfNorth = this.camerasData.dimensionedPoints.arrowOfNorth
+      }
       this.oblongPoints = this.camerasData.dimensionedPoints.rectangle
-      this.drawLine(this.arrowPoints, context)
+      let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
+      this.drawLine(arr, context)
     } else if (this.markType === 3) {
       this.arrowPoints = this.camerasData.dimensionedPoints.arrow
-      this.drawLine(this.arrowPoints, context)
+      if (this.camerasData.dimensionedPoints.arrowOfSouth && this.camerasData.dimensionedPoints.arrowOfSouth.length != 0) {
+        this.arrowPointsOfSouth = this.camerasData.dimensionedPoints.arrowOfSouth
+      }
+      let arr = [this.arrowPoints, this.arrowPointsOfSouth]
+      this.drawLine(arr, context)
     }
   }
 
@@ -195,6 +224,7 @@ export class ImageLabel2Component implements OnInit {
 
   markType: number = 0; //0=进出口,2=卸油区,3=便利店,
   isDrawArrow: boolean = true; //绘制type   箭头/矩形
+  arrowDirection = null
   oilUnloadingArea: boolean = true; //卸油区type   泄油管区域/静电接地仪
   //记录鼠标点击位置
   downx = 0;
@@ -204,6 +234,10 @@ export class ImageLabel2Component implements OnInit {
   clearCanvas() {
     // 清空标绘箭头
     this.arrowPoints = [];
+    this.arrowPointsOfSouth = []; //南 箭头的点的集合
+    this.arrowPointsOfWest = []; //西 箭头的点的集合
+    this.arrowPointsOfEast = []; //东 箭头的点的集合
+    this.arrowPointsOfNorth = []; //北 箭头的点的集合
     // 清空标绘箭头
     // 清空标绘矩形
     this.oblongPoints = [];
@@ -240,12 +274,36 @@ export class ImageLabel2Component implements OnInit {
         canvas.onmousemove = (ev) => { //鼠标移动事件
           var moveX = ev.pageX - canvas.offsetLeft;
           var moveY = ev.pageY - canvas.offsetTop;
-          if (this.isDrawArrow) { //绘制 箭头
+          if (this.isDrawArrow && !this.arrowDirection) { //绘制 箭头
             if (this.arrowPoints.length === 2) { //限制数量
               return
             }
             context.lineTo(moveX, moveY);
             context.stroke();
+          } else if (this.isDrawArrow && this.arrowDirection == 'South') {
+            if (this.arrowPointsOfSouth.length === 2) { //限制数量
+              return
+            }
+            context.lineTo(moveX, moveY);
+            context.stroke();
+          } else if (this.isDrawArrow && this.arrowDirection == 'West') {
+            if (this.arrowPointsOfWest.length === 2) { //限制数量
+              return
+            }
+            context.lineTo(moveX, moveY);
+            context.stroke();
+          } else if (this.isDrawArrow && this.arrowDirection == 'East') {
+            if (this.arrowPointsOfEast.length === 2) { //限制数量
+              return
+            }
+            context.lineTo(moveX, moveY);
+            context.stroke();
+          } else if (this.isDrawArrow && this.arrowDirection == 'North') {
+            if (this.arrowPointsOfNorth.length === 2) { //限制数量
+              return
+            }
+            context.lineTo(moveX, moveY);
+            context.stroke();
           } else { //绘制 矩形
             if (this.oblongPoints.length === 2) { //限制数量
               return
@@ -268,7 +326,7 @@ export class ImageLabel2Component implements OnInit {
       }
       var upX = e.pageX - canvas.offsetLeft;
       var upY = e.pageY - canvas.offsetTop;
-      if (this.isDrawArrow) { //绘制 箭头
+      if (this.isDrawArrow && !this.arrowDirection) { //绘制 箭头
         if (this.arrowPoints.length === 2) { //限制数量
           this.message.create('warning', '绘制数量已达上限!');
           return
@@ -280,7 +338,68 @@ export class ImageLabel2Component implements OnInit {
           endY: upY,
         }
         this.arrowPoints.push(point);
-        this.drawLine(this.arrowPoints, context)
+        let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
+        this.drawLine(arr, context)
+      } else if (this.isDrawArrow && this.arrowDirection == 'South') {
+        console.log('South')
+        if (this.arrowPointsOfSouth.length === 2) { //限制数量
+          this.message.create('warning', '绘制数量已达上限!');
+          return
+        }
+        let point = {
+          startX: this.downx,
+          startY: this.downy,
+          endX: upX,
+          endY: upY,
+        }
+        this.arrowPointsOfSouth.push(point);
+        let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
+        this.drawLine(arr, context)
+      } else if (this.isDrawArrow && this.arrowDirection == 'West') {
+        console.log('West')
+        if (this.arrowPointsOfWest.length === 2) { //限制数量
+          this.message.create('warning', '绘制数量已达上限!');
+          return
+        }
+        let point = {
+          startX: this.downx,
+          startY: this.downy,
+          endX: upX,
+          endY: upY,
+        }
+        this.arrowPointsOfWest.push(point);
+        let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
+        this.drawLine(arr, context)
+      } else if (this.isDrawArrow && this.arrowDirection == 'East') {
+        console.log('East')
+        if (this.arrowPointsOfEast.length === 2) { //限制数量
+          this.message.create('warning', '绘制数量已达上限!');
+          return
+        }
+        let point = {
+          startX: this.downx,
+          startY: this.downy,
+          endX: upX,
+          endY: upY,
+        }
+        this.arrowPointsOfEast.push(point);
+        let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
+        this.drawLine(arr, context)
+      } else if (this.isDrawArrow && this.arrowDirection == 'North') {
+        console.log('North')
+        if (this.arrowPointsOfNorth.length === 2) { //限制数量
+          this.message.create('warning', '绘制数量已达上限!');
+          return
+        }
+        let point = {
+          startX: this.downx,
+          startY: this.downy,
+          endX: upX,
+          endY: upY,
+        }
+        this.arrowPointsOfNorth.push(point);
+        let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
+        this.drawLine(arr, context)
       } else { //绘制 矩形
         if (this.oblongPoints.length === 2) { //限制数量
           this.message.create('warning', '绘制数量已达上限!');
@@ -296,6 +415,13 @@ export class ImageLabel2Component implements OnInit {
 
   arrowPoints = []; //箭头的点的集合
 
+  arrowPointsOfSouth = []; //南 箭头的点的集合
+  arrowPointsOfWest = []; //西 箭头的点的集合
+  arrowPointsOfEast = []; //东 箭头的点的集合
+  arrowPointsOfNorth = []; //北 箭头的点的集合
+
+
+
   //canvas 绘制直线
   drawLine(pointsList, context, isRepeat: boolean = false) {
     context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
@@ -307,18 +433,26 @@ export class ImageLabel2Component implements OnInit {
         context.strokeRect(element.x, element.y, element.width, element.height);
       });
     }
-    pointsList.forEach((item, index) => {
-      if ((index + 1) % 2 === 0) {
-        this.drawArrow(item.startX, item.startY, item.endX, item.endY, 30, 10, 3, 'green', context)
-      } else {
-        context.beginPath();
-        context.moveTo(item.startX, item.startY);
-        context.strokeStyle = "green";
-        context.lineWidth = 3;
-        context.lineTo(item.endX, item.endY);
-        context.stroke();
+    // console.log(789, pointsList)
+    pointsList.forEach(element => {
+      if (element.length != 0) {
+        element.forEach((item, index) => {
+          if ((index + 1) % 2 === 0) {
+            this.drawArrow(item.startX, item.startY, item.endX, item.endY, 30, 10, 3, 'green', context)
+          } else {
+            context.beginPath();
+            context.moveTo(item.startX, item.startY);
+            context.strokeStyle = "green";
+            context.lineWidth = 3;
+            context.lineTo(item.endX, item.endY);
+            context.stroke();
+          }
+        })
       }
-    })
+
+    });
+
+
   }
 
   //canvas 绘制箭头
@@ -398,7 +532,8 @@ export class ImageLabel2Component implements OnInit {
     context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
     this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
     if (this.markType === 2) { //同时绘制 直线箭头
-      this.drawLine(this.arrowPoints, context, true)
+      let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
+      this.drawLine(arr, context, true)
     }
     oblongList.forEach(element => {
       context.strokeStyle = element.oilUnloadingArea ? "green" : "red";