[完善]黄海配置文件

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

@@ -29,13 +29,13 @@
             <td>{{ item.uri }}</td>
             <td>{{ item.type | cameraType}}</td>
             <td>
-              <!-- <ng-container *ngIf="item.type == 1; else elseTemplate">
-                不需要标注
+              <ng-container *ngIf="hostType === '交大'; else elseTemplate">
+                {{item.dimensionedPoints ? '已标注' : '未标注'}}
               </ng-container>
               <ng-template #elseTemplate>
-                {{item.dimensionedPoints ? '已标注' : '未标注'}}
-              </ng-template> -->
-              {{item.dimensionedPoints ? '已标注' : '未标注'}}
+                {{item.dimensionedPointsHuanghai ? '已标注' : '未标注'}}
+              </ng-template>
+
             </td>
             <td>{{ item.isEnabled ? '已启用' : '已禁用'}}</td>
             <td>

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

@@ -21,6 +21,7 @@ import { ConfigFormDataService } from 'src/app/service/configFormData.service';
 import { SendFileComponent } from './send-file/send-file.component';
 import { ImageLabel2Component } from '../image-label2/image-label2.component';
 import { ImageLabelComponent } from '../image-label/image-label.component';
+import { HuangHaiConfigComponent } from './huang-hai-config/huang-hai-config.component';
 interface Camera {
   name: string;
   user: string;
@@ -29,6 +30,8 @@ interface Camera {
   type: number;
   order: number;
   dimensionedPoints: string;
+  dimensionedPointsHuanghai: string;
+  dimensionedPointsHuanghaiObj: any;
   isEnabled: boolean;
 }
 
@@ -96,6 +99,9 @@ export class HostConfigComponent implements OnInit {
     this.http.get('/api/Cameras', { params: params }).subscribe((data: any) => {
       data.items.forEach((element) => {
         element.dimensionedPointsObj = JSON.parse(element.dimensionedPoints);
+        element.dimensionedPointsHuanghaiObj = JSON.parse(
+          element.dimensionedPointsHuanghai
+        );
       });
       this.listOfData = data.items;
       this.isLoading = false;
@@ -240,6 +246,11 @@ 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) {
             //进入全屏
@@ -1138,5 +1149,136 @@ rule_threshold:
   }
 
   //黄海配置文件
-  config() {}
+  config() {
+    let data = this.configJson();
+    const modal = this.modal.create({
+      nzTitle: '下发黄海config.json配置',
+      nzContent: HuangHaiConfigComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 1000,
+      nzBodyStyle: {
+        'border-radius': '0px',
+        padding: '7px',
+      },
+      nzComponentParams: {
+        data: data,
+      },
+      nzOnOk: () => {
+        new Promise((resolve, reject) => {
+          console.log('表单信息', instance.validateForm);
+          let body = {
+            configFiles: [{ name: 'config.json', content: instance.datacopy }],
+          };
+          this.http.put(`/api/EdgeDevices/${this.hostId}`, body).subscribe({
+            next: (data) => {
+              resolve(data);
+              this.message.success('文件保存成功');
+              let params = {
+                edgeDeviceId: this.hostId,
+                fileName: 'source.yaml',
+              };
+              this.http
+                .put('/api/EdgeDevices/Commands/PushFile', '', {
+                  params: params,
+                })
+                .subscribe({
+                  next: (data) => {
+                    this.message.create('success', `发送文件名成功`);
+                  },
+                });
+            },
+            error: (err) => {
+              this.message.error('文件保存失败');
+              reject(err);
+            },
+          });
+        });
+      },
+    });
+    const instance = modal.getContentComponent();
+  }
+
+  configJson() {
+    let obj = {
+      sources: [],
+      freq: 5,
+      minPersonWidth: 40,
+      minPersonHeight: 70,
+      personAttMaxCount: [8, 8, 10, 10],
+      carStopMaxCount: 9000,
+      fireMaxCount: 5,
+      smokeMaxCount: 5,
+      saveVideoSize: [800, 640],
+      delayWarning: 0,
+      smoke_th: 0.8,
+      phone_th: 0.8,
+      bulkoil_th: 0.8,
+      fileUpload:
+        'http://121.36.37.70:8906/api/Objects/sinochemtest/violations',
+      alarmUpload: 'http://121.36.37.70:8208/api/Data/ViolationRecordPush',
+      unloadingProUpload:
+        'http://121.36.37.70:8208/api/Data/OilUnloadingProcessPush',
+      prefix: '/api/Objects/sinochemtest',
+    };
+    this.listOfData.forEach((item: any) => {
+      if (item.type === 0) {
+        obj.sources.push({
+          nickName: '进出口',
+          rtsp: item.uri,
+          carStopROI: pointsArrTransition(
+            item.dimensionedPointsHuanghaiObj.carStopROI
+          ),
+        });
+      }
+      if (item.type === 1) {
+        obj.sources.push({
+          nickName: '加油区',
+          rtsp: item.uri,
+        });
+      }
+      if (item.type === 2) {
+        obj.sources.push({
+          nickName: '卸油区',
+          rtsp: item.uri,
+          intrusionROI: pointsArrTransition(
+            item.dimensionedPointsHuanghaiObj.intrusionROI
+          ),
+          unloadingROI:
+            item.dimensionedPointsHuanghaiObj.unloadingROI.length !== 0
+              ? [
+                  item.dimensionedPointsHuanghaiObj.unloadingROI[0].x,
+                  item.dimensionedPointsHuanghaiObj.unloadingROI[0].y,
+                  item.dimensionedPointsHuanghaiObj.unloadingROI[0].x +
+                    item.dimensionedPointsHuanghaiObj.unloadingROI[0].width,
+                  item.dimensionedPointsHuanghaiObj.unloadingROI[0].y +
+                    item.dimensionedPointsHuanghaiObj.unloadingROI[0].height,
+                ]
+              : [],
+          carStopROI: pointsArrTransition(
+            item.dimensionedPointsHuanghaiObj.carStopROI
+          ),
+        });
+      }
+      if (item.type === 3) {
+        obj.sources.push({
+          nickName: '便利店',
+          rtsp: item.uri,
+          cashierROI: pointsArrTransition(
+            item.dimensionedPointsHuanghaiObj.cashierROI
+          ),
+        });
+      }
+    });
+    console.log(obj);
+    return JSON.stringify(obj);
+
+    function pointsArrTransition(data) {
+      let arr = [];
+      data.forEach((item) => {
+        arr.push([item.x, item.y]);
+      });
+      arr.push([data[0].x, data[0].y]);
+      return arr;
+    }
+  }
 }

src/app/system-management/host-config/huang-hai-config/huang-hai-config.component.html

@@ -0,0 +1,5 @@
+<div class="box">
+    <div class="content">
+        <textarea name="config" id="config" [(ngModel)]="datacopy"></textarea>
+    </div>
+</div>

src/app/system-management/host-config/huang-hai-config/huang-hai-config.component.scss

@@ -0,0 +1,21 @@
+.box {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  font-size: 15px;
+  color: black;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.content {
+  flex: 1;
+  box-sizing: border-box;
+
+  textarea {
+    width: 100%;
+    height: 400px;
+  }
+}

src/app/system-management/host-config/huang-hai-config/huang-hai-config.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HuangHaiConfigComponent } from './huang-hai-config.component';
+
+describe('HuangHaiConfigComponent', () => {
+  let component: HuangHaiConfigComponent;
+  let fixture: ComponentFixture<HuangHaiConfigComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HuangHaiConfigComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HuangHaiConfigComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+@Component({
+  selector: 'app-huang-hai-config',
+  templateUrl: './huang-hai-config.component.html',
+  styleUrls: ['./huang-hai-config.component.scss'],
+})
+export class HuangHaiConfigComponent implements OnInit {
+  @Input() data: any;
+  validateForm!: FormGroup;
+  constructor() {}
+  datacopy;
+  ngOnInit(): void {
+    this.datacopy = JSON.parse(JSON.stringify(this.data));
+  }
+}

src/app/system-management/host-config/send-file/send-file.component.scss

@@ -13,6 +13,7 @@
 .content {
   flex: 1;
   box-sizing: border-box;
+
   textarea {
     width: 100%;
     height: 400px;

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

@@ -1,23 +1,16 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { NzModalRef } from 'ng-zorro-antd/modal';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { HttpClient } from '@angular/common/http';
+import { FormGroup } from '@angular/forms';
 @Component({
   selector: 'app-send-file',
   templateUrl: './send-file.component.html',
-  styleUrls: ['./send-file.component.scss']
+  styleUrls: ['./send-file.component.scss'],
 })
 export class SendFileComponent implements OnInit {
-
-  @Input() data: any
+  @Input() data: any;
   validateForm!: FormGroup;
-  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
-  datacopy
+  constructor() {}
+  datacopy;
   ngOnInit(): void {
-    this.datacopy = JSON.parse(JSON.stringify(this.data))
-    console.log(this.datacopy)
-  }
-  putConfig() {
-
+    this.datacopy = JSON.parse(JSON.stringify(this.data));
   }
 }

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

@@ -11,23 +11,23 @@
 
     <button *ngIf="markType === 0 || markType === 2 " nz-button [ngClass]="{selectBtn: selectedBtn === '停车区'}"
       (click)="selectedBtn = '停车区'">停车区
-      <span class="deleteItem" (click)="clearCanvasItem($event,'isAllMonitoring')">删除</span>
+      <span class="deleteItem" (click)="clearCanvasItem($event,'carStopROI')">删除</span>
     </button>
 
     <button *ngIf="markType === 3" nz-button [ngClass]="{selectBtn: selectedBtn === '收银区'}"
       (click)="selectedBtn = '收银区'">收银区
-      <span class="deleteItem" (click)="clearCanvasItem($event,'isAllMonitoring')">删除</span>
+      <span class="deleteItem" (click)="clearCanvasItem($event,'cashierROI')">删除</span>
     </button>
 
     <button *ngIf="markType === 2" nz-button [ngClass]="{selectBtn: selectedBtn === '闯入区'}"
       (click)="selectedBtn = '闯入区'">闯入区
-      <span class="deleteItem" (click)="clearCanvasItem($event,'isAllMonitoring')">删除</span>
+      <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,'isAllMonitoring')">删除</span>
+      <span class="deleteItem" (click)="clearCanvasItem($event,'unloadingROI')">删除</span>
     </button>
 
 

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

@@ -33,12 +33,13 @@ export class ImageLabelComponent implements OnInit {
   //获取 摄像头图片/标注点位
   getImgMarkData() {
     return new Promise((resolve, reject) => {
-      this.http.get(`/api/Cameras/${this.cameraId}`).subscribe((info: any) => {
-        info.dimensionedPoints
-          ? (info.dimensionedPoints = JSON.parse(info.dimensionedPoints))
-          : null;
-        this.camerasData = info;
-        this.markType = info.type;
+      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;
 
         this.markType === 3
           ? (this.selectedBtn = '收银区')
@@ -91,7 +92,6 @@ export class ImageLabelComponent implements OnInit {
   }
 
   //初始化背景图
-
   canvas;
   ctx;
 
@@ -133,39 +133,51 @@ export class ImageLabelComponent implements OnInit {
 
   //初始化标绘图形
   initMark(canvas, context) {
-    this.camerasData.dimensionedPointsOfHH = sessionStorage.getItem('xxx');
-
-    if (!this.camerasData.dimensionedPointsOfHH) {
+    if (!this.camerasData.dimensionedPointsHuanghai) {
       return;
     } else {
-      this.camerasData.dimensionedPointsOfHH = JSON.parse(
-        this.camerasData.dimensionedPointsOfHH
+      this.camerasData.dimensionedPointsHuanghai = JSON.parse(
+        this.camerasData.dimensionedPointsHuanghai
       );
     }
 
-    console.log('原始标点数据', this.camerasData.dimensionedPointsOfHH);
-
-    return;
-    //绘制停车区多边形
-    this.camerasData.dimensionedPointsOfHH.carStopROI.forEach((element) => {
-      this.carStopROIDrawPolygon(element.x, element.y, canvas, context);
-    });
+    console.log('原始标点数据', this.camerasData.dimensionedPointsHuanghai);
+    //收银区
+    if (this.camerasData.dimensionedPointsHuanghai.cashierROI.length !== 0) {
+      this.camerasData.dimensionedPointsHuanghai.cashierROI.forEach(
+        (element) => {
+          this.cashierROIDrawPolygon(element.x, element.y, canvas, context);
+        }
+      );
+    }
 
-    //绘制收银区多边形
-    this.camerasData.dimensionedPointsOfHH.cashierROI.forEach((element) => {
-      this.cashierROIDrawPolygon(element.x, element.y, canvas, context);
-    });
+    //停车区
+    if (this.camerasData.dimensionedPointsHuanghai.carStopROI.length !== 0) {
+      this.camerasData.dimensionedPointsHuanghai.carStopROI.forEach(
+        (element) => {
+          this.carStopROIDrawPolygon(element.x, element.y, canvas, context);
+        }
+      );
+    }
 
-    //绘制闯入区多边形
-    this.camerasData.dimensionedPointsOfHH.intrusionROI.forEach((element) => {
-      this.intrusionROIDrawPolygon(element.x, element.y, canvas, context);
-    });
+    //闯入区
+    if (this.camerasData.dimensionedPointsHuanghai.intrusionROI.length !== 0) {
+      this.camerasData.dimensionedPointsHuanghai.intrusionROI.forEach(
+        (element) => {
+          this.intrusionROIDrawPolygon(element.x, element.y, canvas, context);
+        }
+      );
+    }
 
     //绘制卸油区矩形
-    this.unloadingROIDrawOblong(
-      this.camerasData.dimensionedPointsOfHH.unloadingROI,
-      context
-    );
+    if (this.camerasData.dimensionedPointsHuanghai.unloadingROI.length !== 0) {
+      this.unloadingROIOblongPoints =
+        this.camerasData.dimensionedPointsHuanghai.unloadingROI;
+      this.unloadingROIDrawOblong(
+        this.camerasData.dimensionedPointsHuanghai.unloadingROI,
+        context
+      );
+    }
   }
 
   markType: number = 0; //0=进出口,1=加油区,2=卸油区,3=便利店,
@@ -625,7 +637,19 @@ export class ImageLabelComponent implements OnInit {
   clearCanvas() {
     let canvas = document.getElementById('canvas') as any;
     let context = canvas.getContext('2d');
-
+    this.unloadingROIOblongPoints = []; //矩形的点的集合
+    //停车区多边形
+    this.carStopROIPoints = []; //线段的点的集合
+    this.carStopROICircles = []; //可拖动圆圈的点的集合
+    this.carStopROIAllpoints = []; //整体移动点位
+    //闯入区多边形
+    this.intrusionROIPoints = []; //线段的点的集合
+    this.intrusionROICircles = []; //可拖动圆圈的点的集合
+    this.intrusionROIAllpoints = []; //整体移动点位
+    //收银区多边形
+    this.cashierROIPoints = []; //线段的点的集合
+    this.cashierROICircles = []; //可拖动圆圈的点的集合
+    this.cashierROIAllpoints = []; //整体移动点位
     context.clearRect(0, 0, canvas.width, canvas.height);
     this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
   }
@@ -639,21 +663,57 @@ export class ImageLabelComponent implements OnInit {
       nzOkType: 'primary',
       nzOkDanger: true,
       nzOnOk: () => {
-        // if (type == 'isAllMonitoring') {
-        //   //全局的多边形
-        //   this.pointsOfmonitor = [];
-        //   this.circlesOfmonitor = [];
-        //   this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-        //   this.copyCanvas
-        //     ? this.context.putImageData(this.copyCanvas, 0, 0)
-        //     : null;
-        // }
-        // this.initMark2(this.canvas, this.ctx); //初始化标绘图形
+        if (this.markType === 2) {
+          //卸油区
+          this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+          this.copyCanvas
+            ? this.context.putImageData(this.copyCanvas, 0, 0)
+            : null;
+          if (type === 'carStopROI') {
+            this.carStopROIPoints = [];
+            this.carStopROICircles = [];
+            this.carStopROIAllpoints = [];
+            //重绘闯入和卸油
+            this.redrawAll();
+          }
+          if (type === 'intrusionROI') {
+            this.intrusionROIPoints = [];
+            this.intrusionROICircles = [];
+            this.intrusionROIAllpoints = [];
+            this.redrawAll();
+          }
+          if (type === 'unloadingROI') {
+            this.unloadingROIOblongPoints = [];
+            this.redrawAll();
+          }
+        } else {
+          this.clearCanvas();
+        }
       },
       nzCancelText: '取消',
     });
   }
 
+  redrawAll() {
+    this.redrawPolygon(
+      this.carStopROIPoints,
+      this.carStopROIAllpoints,
+      this.carStopROICircles,
+      this.context,
+      'green'
+    );
+
+    this.redrawPolygon(
+      this.intrusionROIPoints,
+      this.intrusionROIAllpoints,
+      this.intrusionROICircles,
+      this.context,
+      'red'
+    );
+
+    this.redrawRectangle(this.unloadingROIOblongPoints, this.context);
+  }
+
   //根据已有数据重绘多边形
   redrawPolygon(data, points, circles, context, color) {
     data.forEach((element) => {
@@ -699,9 +759,9 @@ export class ImageLabelComponent implements OnInit {
 
   //保存
   save() {
-    console.log(this.camerasData.dimensionedPointsOfHH);
-    if (!this.camerasData.dimensionedPointsOfHH) {
-      this.camerasData.dimensionedPointsOfHH = {
+    console.log(this.camerasData.dimensionedPointsHuanghai);
+    if (!this.camerasData.dimensionedPointsHuanghai) {
+      this.camerasData.dimensionedPointsHuanghai = {
         carStopROI: [],
         intrusionROI: [],
         cashierROI: [],
@@ -714,7 +774,8 @@ export class ImageLabelComponent implements OnInit {
         this.message.create('warning', '绘制完整后可保存!');
         return;
       }
-      this.camerasData.dimensionedPointsOfHH.carStopROI = this.carStopROIPoints;
+      this.camerasData.dimensionedPointsHuanghai.carStopROI =
+        this.carStopROIPoints;
     }
     //卸油区
     if (this.markType === 2) {
@@ -727,10 +788,11 @@ export class ImageLabelComponent implements OnInit {
         return;
       }
 
-      this.camerasData.dimensionedPointsOfHH.carStopROI = this.carStopROIPoints;
-      this.camerasData.dimensionedPointsOfHH.intrusionROI =
+      this.camerasData.dimensionedPointsHuanghai.carStopROI =
+        this.carStopROIPoints;
+      this.camerasData.dimensionedPointsHuanghai.intrusionROI =
         this.intrusionROIPoints;
-      this.camerasData.dimensionedPointsOfHH.unloadingROI =
+      this.camerasData.dimensionedPointsHuanghai.unloadingROI =
         this.unloadingROIOblongPoints;
     }
     //便利店
@@ -739,24 +801,26 @@ export class ImageLabelComponent implements OnInit {
         this.message.create('warning', '绘制完整后可保存!');
         return;
       }
-      this.camerasData.dimensionedPointsOfHH.cashierROI = this.cashierROIPoints;
+      this.camerasData.dimensionedPointsHuanghai.cashierROI =
+        this.cashierROIPoints;
     }
 
-    // let paramsData = JSON.parse(JSON.stringify(this.camerasData));
-    // paramsData.dimensionedPointsHH = JSON.stringify(
-    //   paramsData.dimensionedPointsHH
-    // );
-    console.log('标点结果', this.camerasData.dimensionedPointsOfHH);
-    // this.http
-    //   .put(`/api/Cameras/${this.camerasData.id}/DimensionedPoints`, paramsData)
-    //   .subscribe((data) => {
-    //     this.message.create('success', '保存成功!');
-    //     const isFullScreen = document.fullscreenElement;
-    //     if (document.exitFullscreen && isFullScreen) {
-    //       //关闭全屏
-    //       document.exitFullscreen();
-    //     }
-    //     this.modal.closeAll();
-    //   });
+    let body = {
+      dimensionedPointsHuanghai: JSON.stringify(
+        this.camerasData.dimensionedPointsHuanghai
+      ),
+    };
+    console.log('标点结果', this.camerasData.dimensionedPointsHuanghai);
+    this.http
+      .put(`/api/Cameras/${this.camerasData.id}/DimensionedPoints`, body)
+      .subscribe((data) => {
+        this.message.create('success', '保存成功!');
+        const isFullScreen = document.fullscreenElement;
+        if (document.exitFullscreen && isFullScreen) {
+          //关闭全屏
+          document.exitFullscreen();
+        }
+        this.modal.closeAll();
+      });
   }
 }

src/app/system-management/system-management.module.ts

@@ -46,6 +46,7 @@ import { ScriptComponent } from './status-monitoring/script/script.component';
 import { VideoStreamingComponent } from './video-streaming/video-streaming.component';
 import { DetailsComponent } from './video-streaming/details/details.component';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { HuangHaiConfigComponent } from './host-config/huang-hai-config/huang-hai-config.component';
 @NgModule({
   declarations: [
     OrganizationComponent,
@@ -73,6 +74,7 @@ import { NzRadioModule } from 'ng-zorro-antd/radio';
     ScriptComponent,
     VideoStreamingComponent,
     DetailsComponent,
+    HuangHaiConfigComponent,
   ],
   imports: [
     CommonModule,