From 5a96dce38a169b34ceb441f294a77e421897393b Mon Sep 17 00:00:00 2001
From: SHAOJIAHAO <55341701@qq.com>
Date: Mon, 25 Jul 2022 16:27:53 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E4=BF=AE=E6=94=B9=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=96=87=E4=BB=B6=EF=BC=9B=E5=8D=B8=E6=B2=B9=E5=8C=BA?=
 =?UTF-8?q?=E5=8D=95=E7=8B=AC=E5=88=A0=E9=99=A4=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      |  31 ++++--
 .../image-label2/image-label2.component.html  |  14 ++-
 .../image-label2/image-label2.component.scss  |  51 ++++++++-
 .../image-label2/image-label2.component.ts    | 105 ++++++++++++------
 4 files changed, 151 insertions(+), 50 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 bc9e6fe..0d178b2 100644
--- a/src/app/system-management/host-config/host-config.component.ts
+++ b/src/app/system-management/host-config/host-config.component.ts
@@ -404,7 +404,7 @@ inverse-roi=0
 class-id=-1
       `
       }
-      if ((item.type == 2 || item.type == 3) && item.dimensionedPointsObj && item.dimensionedPointsObj.arrow.length != 0) {
+      if ((item.type == 2 || item.type == 3) && item.dimensionedPointsObj && item.dimensionedPointsObj.arrow.length != 0 && item.dimensionedPointsObj.arrowOfWest && item.dimensionedPointsObj.arrowOfWest.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
         config1 += `
@@ -412,18 +412,33 @@ class-id=-1
 enable=1
 #Label;direction;lc
 line-crossing-Entry=${str}
-# line-crossing-Exit=789;672;1084;900;851;773;1203;732
 class-id=0
-#extended when 0- only counts crossing on the configured Line
-#              1- assumes extended Line crossing counts all the crossing
 extended=0
-#LC modes supported:
-#loose   : counts all crossing without strong adherence to direction
-#balanced: Strict direction adherence expected compared to mode=loose
-#strict  : Strict direction adherence expected compared to mode=balanced
 mode=strict
       `
       }
+      if ((item.type == 2 || item.type == 3) && item.dimensionedPointsObj && item.dimensionedPointsObj.arrow.length != 0 && item.dimensionedPointsObj.arrowOfWest && item.dimensionedPointsObj.arrowOfWest.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
+        let arrowArr2 = item.dimensionedPointsObj.arrowOfWest
+        let str2 = arrowArr2[1].startX + ';' + arrowArr2[1].startY + ';' + arrowArr2[1].endX + ';' + arrowArr2[1].endY + ';' + arrowArr2[0].startX + ';' + arrowArr2[0].startY + ';' + arrowArr2[0].endX + ';' + arrowArr2[0].endY
+
+        config1 += `
+[line-crossing-stream-${item.order}]
+enable=1
+#Label;direction;lc
+line-crossing-Entry1=${str}
+class-id=0
+extended=0
+mode=strict
+line-crossing-Entry2=${str2}
+class-id=0
+extended=0
+mode=strict
+      `
+      }
+
+
     })
     //新增东南西北参数
     copyListOfData.forEach(element => {
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 e09e3b4..c694636 100644
--- a/src/app/system-management/image-label2/image-label2.component.html
+++ b/src/app/system-management/image-label2/image-label2.component.html
@@ -5,20 +5,26 @@
     <label class="leftTitle" *ngIf="markType === 2">卸油区</label>
     <label class="leftTitle" *ngIf="markType === 3">便利店</label>
     <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: isDrawArrow && !arrowDirection}"
-      (click)="isDrawArrow = true;arrowDirection=null">箭头方向标绘1</button>
+      (click)="isDrawArrow = true;arrowDirection=null">
+      箭头方向标绘1
+      <span class="deleteItem" (click)="clearCanvasItem($event,'arrow')">删除</span>
+    </button>
     <!-- <button nz-button *ngIf="markType === 2"
       [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'">箭头方向标绘2</button>
+      (click)="isDrawArrow = true;arrowDirection='West'">箭头方向标绘2
+      <span class="deleteItem" (click)="clearCanvasItem($event,'arrowOfWest')">删除</span></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>
+      (click)="isDrawArrow = false; oilUnloadingArea = true;">泄油管区域
+      <span class="deleteItem" (click)="clearCanvasItem($event,'oilUnloadingAreaTrue')">删除</span></button>
     <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: !isDrawArrow && !oilUnloadingArea}"
-      (click)="isDrawArrow = false; oilUnloadingArea = false;">静电接地仪</button>
+      (click)="isDrawArrow = false; oilUnloadingArea = false;">静电接地仪
+      <span class="deleteItem" (click)="clearCanvasItem($event,'oilUnloadingAreaFalse')">删除</span></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="您确定要清空吗?"
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 27c3510..8ee26e6 100644
--- a/src/app/system-management/image-label2/image-label2.component.scss
+++ b/src/app/system-management/image-label2/image-label2.component.scss
@@ -8,9 +8,19 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  .imgbox{ flex: 1; overflow: hidden; }
-  canvas{ overflow: hidden; display: block; }
-  .content,.center{
+
+  .imgbox {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  canvas {
+    overflow: hidden;
+    display: block;
+  }
+
+  .content,
+  .center {
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -23,11 +33,36 @@
   left: 1%;
   top: 1%;
   z-index: 10;
+
   button {
     margin-right: 6px;
+    display: flex;
+  }
+
+  .deleteItem {
+    display: none;
+    color: red;
+    cursor: pointer;
+    margin-left: 5px;
+  }
+
+  button:hover {
+    .deleteItem {
+      display: block;
+    }
+  }
+
+  .leftTitle {
+    line-height: 32px;
+    margin-right: 10px;
+    color: #fff;
+  }
+
+  .rightTitle {
+    line-height: 32px;
+    margin-left: 10px;
+    color: #fff;
   }
-  .leftTitle{ line-height: 32px; margin-right: 10px; color: #fff; }
-  .rightTitle{ line-height: 32px; margin-left: 10px; color: #fff; }
 }
 
 .imgbox,
@@ -35,4 +70,8 @@
   box-sizing: border-box;
   padding: 0;
 }
-.selectBtn { background-color: #1890ff; color: #fff; }
+
+.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 2200f6e..816425c 100644
--- a/src/app/system-management/image-label2/image-label2.component.ts
+++ b/src/app/system-management/image-label2/image-label2.component.ts
@@ -85,6 +85,7 @@ export class ImageLabel2Component implements OnInit {
 
   //保存
   save() {
+    console.log(this.camerasData.dimensionedPoints)
     if (!this.camerasData.dimensionedPoints) {
       this.camerasData.dimensionedPoints = {
         polygon: [],
@@ -137,53 +138,85 @@ export class ImageLabel2Component implements OnInit {
   }
 
   //初始化背景图
+  canvas
+  ctx
   initBackgroundImg() {
-    let canvas = document.getElementById('canvas') as any;
-    canvas.oncontextmenu = () => { return false; };
+    this.canvas = document.getElementById('canvas') as any;
+    this.canvas.oncontextmenu = () => { return false; };
     let that = this
-    let ctx
     // 检测canvas支持性
-    if (canvas.getContext) {
-      ctx = canvas.getContext('2d');	// 返回一个对象，该对象提供了用在画布上绘图的方法和属性
+    if (this.canvas.getContext) {
+      this.ctx = this.canvas.getContext('2d');	// 返回一个对象，该对象提供了用在画布上绘图的方法和属性
     } else {
       document.write("你的浏览器不支持canvas,请升级你的浏览器!");
       return;
     }
-
-    // 读取可视区域 宽高
-    let center = document.getElementById('canvasCenter') as any;
-
     // 图片加载完后，将其显示在canvas中
     var img = new Image();
     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; // 计算等比缩小后图片
       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)
-        that.initCanvasEvent(canvas) //监听canvas事件
-        that.initMark(canvas, ctx) //初始化标绘图形
+        this.ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight);
+        this.copyCanvas = this.ctx.getImageData(0, 0, that.canvasWidth, that.canvasHeight)
+        that.initCanvasEvent(this.canvas) //监听canvas事件
+        that.initMark(this.canvas, this.ctx) //初始化标绘图形
       }, 0)
     }
   }
 
+
+  clearCanvasItem(e, type) {
+    e.stopPropagation()
+    this.modal.confirm({
+      nzTitle: '确认要清除此标绘吗?',
+      nzOkText: '确定',
+      nzOkType: 'primary',
+      nzOkDanger: true,
+      nzOnOk: () => {
+        // this.clearCanvas()
+        if (type == 'arrow') {
+          this.arrowPoints = []
+        }
+        if (type == 'arrowOfWest') {
+          this.arrowPointsOfWest = []
+        }
+        if (type == 'oilUnloadingAreaTrue') {
+          for (let index = 0; index < this.oblongPoints.length; index++) {
+            const element = this.oblongPoints[index];
+            if (element.oilUnloadingArea) {
+              this.oblongPoints.splice(index, 1);
+              index--;
+            }
+          }
+        }
+        if (type == 'oilUnloadingAreaFalse') {
+          for (let index = 0; index < this.oblongPoints.length; index++) {
+            const element = this.oblongPoints[index];
+            if (!element.oilUnloadingArea) {
+              this.oblongPoints.splice(index, 1);
+              index--;
+            }
+          }
+        }
+
+        console.log(this.camerasData.dimensionedPoints)
+        this.initMark2(this.canvas, this.ctx) //初始化标绘图形
+
+      },
+      nzCancelText: '取消',
+      nzOnCancel: () => console.log('Cancel')
+    });
+
+
+  }
+
+
+
+
+
   //初始化标绘图形
   initMark(canvas, context) {
     if (!this.camerasData.dimensionedPoints) {
@@ -221,6 +254,17 @@ export class ImageLabel2Component implements OnInit {
   }
 
 
+  //初始化标绘图形
+  initMark2(canvas, context) {
+    if (this.markType === 2) {
+      let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
+      this.drawLine(arr, context)
+    } else if (this.markType === 3) {
+      let arr = [this.arrowPoints, this.arrowPointsOfSouth]
+      this.drawLine(arr, context)
+    }
+  }
+
 
   markType: number = 0; //0=进出口,2=卸油区,3=便利店,
   isDrawArrow: boolean = true; //绘制type   箭头/矩形
@@ -410,6 +454,7 @@ export class ImageLabel2Component implements OnInit {
         this.oblongPoints.push(point)
         this.drawOblong(this.oblongPoints, context)
       }
+      console.log(this.camerasData.dimensionedPoints)
     };
 
   }
@@ -452,10 +497,7 @@ export class ImageLabel2Component implements OnInit {
           }
         })
       }
-
     });
-
-
   }
 
   //canvas 绘制箭头
@@ -532,7 +574,6 @@ export class ImageLabel2Component implements OnInit {
 
   //canvas 绘制矩形
   drawOblong(oblongList, context) {
-    console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxi')
     context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
     this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
     if (this.markType === 2) { //同时绘制 直线箭头