shaojiahao
/
Edge-host-maintenance
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[新增]卸油区人,灭火器,隔离椎标绘

非煤矿业企业安全风险监测预警系统
邵佳豪 2 years ago
parent
e0750a4b75
commit
62a6fdc0bd
3 changed files with 155 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/app/system-management/host-config/host-config.component.ts
  2. 5
      src/app/system-management/image-label/image-label.component.html
  3. 163
      src/app/system-management/image-label/image-label.component.ts

1
src/app/system-management/host-config/host-config.component.ts
Unescape View File

@ -1213,7 +1213,6 @@ rule_threshold:
})
.subscribe({
next: (data) => {
console.log('牛逼', JSON.parse(instance.datacopy));
this.message.create('success', `发送文件名成功`);
},
});

5
src/app/system-management/image-label/image-label.component.html
Unescape View File

@ -30,6 +30,11 @@
(click)="selectedBtn = '卸油区'">卸油区
<span class="deleteItem" (click)="clearCanvasItem($event,'unloadingROI')">删除</span>
</button>
<button *ngIf="markType === 2" nz-button [ngClass]="{selectBtn: selectedBtn === '人'}"
(click)="selectedBtn = '人'">人,灭火器,隔离椎
<span class="deleteItem" (click)="clearCanvasItem($event,'xxxROI')">删除</span>
</button>
<button *ngIf="markType === 3" nz-button [ngClass]="{selectBtn: selectedBtn === '收银区'}"
(click)="selectedBtn = '收银区'">收银区

163
src/app/system-management/image-label/image-label.component.ts
Unescape View File

@ -36,6 +36,9 @@ export class ImageLabelComponent implements OnInit {
this.http.get(`/api/Cameras/${this.cameraId}`).subscribe((data: any) => {
this.camerasData = data;
this.markType = data.type;
if (this.markType === 0) {
this.selectedBtn = '停车区';
}
if (this.markType === 1) {
this.selectedBtn = '散装油';
}
@ -45,9 +48,6 @@ export class ImageLabelComponent implements OnInit {
if (this.markType === 3) {
this.selectedBtn = '收银区';
}
if (this.markType === 4) {
this.selectedBtn = '停车区';
}
const httpOptions = {
responseType: 'blob' as 'json',
params: { cameraId: this.cameraId },
@ -196,6 +196,19 @@ export class ImageLabelComponent implements OnInit {
context
);
}
//绘制人，灭火器，隔离锥矩形
if (
this.camerasData.dimensionedPointsHuanghai.xxxROI &&
this.camerasData.dimensionedPointsHuanghai.xxxROI.length !== 0
) {
this.xxxROIOblongPoints =
this.camerasData.dimensionedPointsHuanghai.xxxROI;
this.xxxROIDrawOblong(
this.camerasData.dimensionedPointsHuanghai.xxxROI,
context
);
}
}
markType: number = 0; //0=进出口,1=加油区,2=卸油区,3=便利店,
@ -234,7 +247,6 @@ export class ImageLabelComponent implements OnInit {
this.message.create('warning', '卸油区只允许绘制1个!');
return;
}
//绘制矩形
context.beginPath();
context.moveTo(clickX, clickY);
@ -266,6 +278,43 @@ export class ImageLabelComponent implements OnInit {
element.y + 22
);
};
} else if (this.selectedBtn === '人') {
if (this.xxxROIOblongPoints.length === 1) {
//限制数量
this.message.create('warning', '人,灭火器,隔离椎只允许绘制1个!');
return;
}
//绘制矩形
context.beginPath();
context.moveTo(clickX, clickY);
context.strokeStyle = 'green';
context.lineWidth = 3;
canvas.onmousemove = (ev) => {
//鼠标移动事件
var moveX = ev.pageX - canvas.offsetLeft;
var moveY = ev.pageY - canvas.offsetTop;
this.xxxROIDrawOblong(this.xxxROIOblongPoints, context);
context.strokeStyle = 'black';
let element = this.getOblongInfo(
this.downx,
this.downy,
moveX,
moveY
);
context.strokeRect(
element.x,
element.y,
element.width,
element.height
);
context.font = '22px Arial';
context.fillText(
'高度:' + element.height,
element.x + 3,
element.y + 22
);
};
}
//
} else if (this.markType === 3) {
@ -284,7 +333,18 @@ export class ImageLabelComponent implements OnInit {
//因为只有卸油区需要画矩形
return;
}
if (this.markType === 2 && this.unloadingROIOblongPoints.length === 1) {
if (
this.markType === 2 &&
this.selectedBtn === '卸油区' &&
this.unloadingROIOblongPoints.length === 1
) {
return;
}
if (
this.markType === 2 &&
this.selectedBtn === '人' &&
this.xxxROIOblongPoints.length === 1
) {
return;
}
if (this.markType === 2 && this.selectedBtn === '卸油区') {
@ -294,6 +354,13 @@ export class ImageLabelComponent implements OnInit {
this.unloadingROIOblongPoints.push(point);
this.unloadingROIDrawOblong(this.unloadingROIOblongPoints, context);
}
if (this.markType === 2 && this.selectedBtn === '人') {
var upX = e.pageX - canvas.offsetLeft;
var upY = e.pageY - canvas.offsetTop;
let point = this.getOblongInfo(this.downx, this.downy, upX, upY);
this.xxxROIOblongPoints.push(point);
this.xxxROIDrawOblong(this.xxxROIOblongPoints, context);
}
};
}
@ -324,6 +391,11 @@ export class ImageLabelComponent implements OnInit {
'red'
);
}
//重绘人，灭火器，隔离椎
if (this.xxxROIOblongPoints && this.xxxROIOblongPoints.length != 0) {
this.redrawRectangle(this.xxxROIOblongPoints, context, 'black');
}
oblongList.forEach((element) => {
context.strokeStyle = 'orange';
context.lineWidth = 3;
@ -333,6 +405,54 @@ export class ImageLabelComponent implements OnInit {
context.fillText('高度:' + element.height, element.x + 3, element.y + 22);
});
}
//人，灭火器，隔离椎矩形
xxxROIOblongPoints = []; //矩形的点的集合
xxxROIDrawOblong(oblongList, context) {
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
//重绘停车区
if (this.carStopROIPoints && this.carStopROIPoints.length != 0) {
this.redrawPolygon(
this.carStopROIPoints,
this.carStopROIAllpoints,
this.carStopROICircles,
context,
'green'
);
}
//重绘闯入区
if (this.carStopROIPoints && this.carStopROIPoints.length != 0) {
this.redrawPolygon(
this.intrusionROIPoints,
this.intrusionROIAllpoints,
this.intrusionROICircles,
context,
'red'
);
}
//重绘卸油区
if (
this.unloadingROIOblongPoints &&
this.unloadingROIOblongPoints.length != 0
) {
this.redrawRectangle(this.unloadingROIOblongPoints, context, 'orange');
}
//
oblongList.forEach((element) => {
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeRect(element.x, element.y, element.width, element.height);
context.font = '22px Arial';
context.fontColor = 'black';
context.fillText('高度:' + element.height, element.x + 3, element.y + 22);
});
}
/** 获取 矩形左上角点位/宽高 */
getOblongInfo(startX, startY, endX, endY) {
let point = {
@ -408,9 +528,12 @@ export class ImageLabelComponent implements OnInit {
this.unloadingROIOblongPoints &&
this.unloadingROIOblongPoints.length != 0
) {
this.redrawRectangle(this.unloadingROIOblongPoints, context);
this.redrawRectangle(this.unloadingROIOblongPoints, context, 'orange');
}
//重绘人，灭火器，隔离椎
if (this.xxxROIOblongPoints && this.xxxROIOblongPoints.length != 0) {
this.redrawRectangle(this.xxxROIOblongPoints, context, 'black');
}
//遍历数组画圆
var circle = {
x: clickX,
@ -504,9 +627,12 @@ export class ImageLabelComponent implements OnInit {
this.unloadingROIOblongPoints &&
this.unloadingROIOblongPoints.length != 0
) {
this.redrawRectangle(this.unloadingROIOblongPoints, context);
this.redrawRectangle(this.unloadingROIOblongPoints, context, 'orange');
}
//重绘人，灭火器，隔离椎
if (this.xxxROIOblongPoints && this.xxxROIOblongPoints.length != 0) {
this.redrawRectangle(this.xxxROIOblongPoints, context, 'black');
}
//遍历数组画圆
var circle = {
x: clickX,
@ -735,6 +861,7 @@ export class ImageLabelComponent implements OnInit {
let canvas = document.getElementById('canvas') as any;
let context = canvas.getContext('2d');
this.unloadingROIOblongPoints = []; //矩形的点的集合
this.xxxROIOblongPoints = []; //矩形的点的集合
//停车区多边形
this.carStopROIPoints = []; //线段的点的集合
this.carStopROICircles = []; //可拖动圆圈的点的集合
@ -787,6 +914,10 @@ export class ImageLabelComponent implements OnInit {
this.unloadingROIOblongPoints = [];
this.redrawAll();
}
if (type === 'xxxROI') {
this.xxxROIOblongPoints = [];
this.redrawAll();
}
} else {
this.clearCanvas();
}
@ -812,7 +943,9 @@ export class ImageLabelComponent implements OnInit {
'red'
);
this.redrawRectangle(this.unloadingROIOblongPoints, this.context);
this.redrawRectangle(this.unloadingROIOblongPoints, this.context, 'orange');
this.redrawRectangle(this.xxxROIOblongPoints, this.context, 'black');
}
//根据已有数据重绘多边形
@ -847,13 +980,14 @@ export class ImageLabelComponent implements OnInit {
}
//根据已有数据重绘矩形
redrawRectangle(oblongList, context) {
redrawRectangle(oblongList, context, color) {
console.log(666, context.strokeStyle);
oblongList.forEach((element) => {
context.strokeStyle = 'orange';
context.strokeStyle = color;
context.lineWidth = 3;
context.strokeRect(element.x, element.y, element.width, element.height);
context.font = '22px Arial';
context.fontColor = 'orange';
context.fontColor = color;
context.fillText('高度:' + element.height, element.x + 3, element.y + 22);
});
}
@ -868,6 +1002,7 @@ export class ImageLabelComponent implements OnInit {
cashierROI: [],
unloadingROI: [],
bulkoilROI: [],
xxxROI: [],
};
}
//进出口
@ -905,6 +1040,8 @@ export class ImageLabelComponent implements OnInit {
this.intrusionROIPoints;
this.camerasData.dimensionedPointsHuanghai.unloadingROI =
this.unloadingROIOblongPoints;
this.camerasData.dimensionedPointsHuanghai.xxxROI =
this.xxxROIOblongPoints;
}
//便利店
if (this.markType === 3) {

Write Preview
Loading…
Cancel
Save