diff --git a/src/app/system-management/host-config/host-config.component.html b/src/app/system-management/host-config/host-config.component.html index f97bc44..a0869ba 100644 --- a/src/app/system-management/host-config/host-config.component.html +++ b/src/app/system-management/host-config/host-config.component.html @@ -29,13 +29,13 @@ {{ item.uri }} {{ item.type | cameraType}} - - {{item.dimensionedPoints ? '已标注' : '未标注'}} + {{item.dimensionedPointsHuanghai ? '已标注' : '未标注'}} + + {{ item.isEnabled ? '已启用' : '已禁用'}} 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 c17f0f5..1868039 100644 --- a/src/app/system-management/host-config/host-config.component.ts +++ b/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; + } + } } diff --git a/src/app/system-management/host-config/huang-hai-config/huang-hai-config.component.html b/src/app/system-management/host-config/huang-hai-config/huang-hai-config.component.html new file mode 100644 index 0000000..41d2a87 --- /dev/null +++ b/src/app/system-management/host-config/huang-hai-config/huang-hai-config.component.html @@ -0,0 +1,5 @@ +
+
+ +
+
\ No newline at end of file diff --git a/src/app/system-management/host-config/huang-hai-config/huang-hai-config.component.scss b/src/app/system-management/host-config/huang-hai-config/huang-hai-config.component.scss new file mode 100644 index 0000000..d167756 --- /dev/null +++ b/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; + } +} diff --git a/src/app/system-management/host-config/huang-hai-config/huang-hai-config.component.spec.ts b/src/app/system-management/host-config/huang-hai-config/huang-hai-config.component.spec.ts new file mode 100644 index 0000000..62e5553 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HuangHaiConfigComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HuangHaiConfigComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/system-management/host-config/huang-hai-config/huang-hai-config.component.ts b/src/app/system-management/host-config/huang-hai-config/huang-hai-config.component.ts new file mode 100644 index 0000000..74752da --- /dev/null +++ b/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)); + } +} diff --git a/src/app/system-management/host-config/send-file/send-file.component.scss b/src/app/system-management/host-config/send-file/send-file.component.scss index 3a25efc..d167756 100644 --- a/src/app/system-management/host-config/send-file/send-file.component.scss +++ b/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; diff --git a/src/app/system-management/host-config/send-file/send-file.component.ts b/src/app/system-management/host-config/send-file/send-file.component.ts index 96ed217..8218047 100644 --- a/src/app/system-management/host-config/send-file/send-file.component.ts +++ b/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)); } } 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 c0293d7..019f94c 100644 --- a/src/app/system-management/image-label/image-label.component.html +++ b/src/app/system-management/image-label/image-label.component.html @@ -11,23 +11,23 @@ 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 61ffd3a..85a3d0d 100644 --- a/src/app/system-management/image-label/image-label.component.ts +++ b/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(); + }); } } diff --git a/src/app/system-management/system-management.module.ts b/src/app/system-management/system-management.module.ts index 05e7342..acdb953 100644 --- a/src/app/system-management/system-management.module.ts +++ b/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,