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 1868039..7272430 100644 --- a/src/app/system-management/host-config/host-config.component.ts +++ b/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: - 'http://121.36.37.70:8906/api/Objects/sinochemtest/violations', - alarmUpload: 'http://121.36.37.70:8208/api/Data/ViolationRecordPush', + fileUpload: 'https://gas.anxincloud.cn/api/Objects/gas/violations', + alarmUpload: 'https://gas.anxincloud.cn/api/Data/ViolationRecordPush', unloadingProUpload: - 'http://121.36.37.70:8208/api/Data/OilUnloadingProcessPush', - prefix: '/api/Objects/sinochemtest', + 'https://gas.anxincloud.cn/api/Data/OilUnloadingProcessPush', + 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({ 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 019f94c..56cf45f 100644 --- a/src/app/system-management/image-label/image-label.component.html +++ b/src/app/system-management/image-label/image-label.component.html @@ -14,9 +14,9 @@ 删除 - + + 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 85a3d0d..2494d88 100644 --- a/src/app/system-management/image-label/image-label.component.ts +++ b/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; - - this.markType === 3 - ? (this.selectedBtn = '收银区') - : (this.selectedBtn = '停车区'); + if (this.markType === 1) { + 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 ( 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 0ff3223..7f9abcd 100644 --- a/src/app/system-management/image-label2/image-label2.component.html +++ b/src/app/system-management/image-label2/image-label2.component.html @@ -1,6 +1,7 @@
+