|
|
|
|
@ -1,5 +1,6 @@
|
|
|
|
|
import { HttpClient, HttpErrorResponse } from '@angular/common/http'; |
|
|
|
|
import { Component, Input, OnInit } from '@angular/core'; |
|
|
|
|
import { ActivatedRoute } from '@angular/router'; |
|
|
|
|
import { NzMessageService } from 'ng-zorro-antd/message'; |
|
|
|
|
import { NzModalService } from 'ng-zorro-antd/modal'; |
|
|
|
|
|
|
|
|
|
@ -12,7 +13,8 @@ export class ImageLabelAnxinComponent implements OnInit {
|
|
|
|
|
constructor( |
|
|
|
|
private http: HttpClient, |
|
|
|
|
private message: NzMessageService, |
|
|
|
|
private modal: NzModalService |
|
|
|
|
private modal: NzModalService, |
|
|
|
|
private route: ActivatedRoute |
|
|
|
|
) {} |
|
|
|
|
|
|
|
|
|
@Input() cameraId: any; //传递id
|
|
|
|
|
@ -29,7 +31,21 @@ export class ImageLabelAnxinComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ngOnInit(): void {} |
|
|
|
|
|
|
|
|
|
ngAfterContentInit(): void { |
|
|
|
|
this.getImgMarkData() |
|
|
|
|
.then((res: any) => { |
|
|
|
|
this.imgItem = window.URL.createObjectURL(res); |
|
|
|
|
window.setTimeout(() => { |
|
|
|
|
this.initBackgroundImg(); |
|
|
|
|
}, 0); |
|
|
|
|
}) |
|
|
|
|
.catch((err) => { |
|
|
|
|
this.message.create('error', '获取图片失败!'); |
|
|
|
|
window.setTimeout(() => { |
|
|
|
|
this.initBackgroundImg(); |
|
|
|
|
}, 0); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
//获取 摄像头图片/标注点位
|
|
|
|
|
getImgMarkData() { |
|
|
|
|
console.log('获取照片', new Date().getTime()); |
|
|
|
|
@ -74,22 +90,6 @@ export class ImageLabelAnxinComponent implements OnInit {
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ngAfterContentInit(): void { |
|
|
|
|
this.getImgMarkData() |
|
|
|
|
.then((res: any) => { |
|
|
|
|
this.imgItem = window.URL.createObjectURL(res); |
|
|
|
|
window.setTimeout(() => { |
|
|
|
|
this.initBackgroundImg(); |
|
|
|
|
}, 0); |
|
|
|
|
}) |
|
|
|
|
.catch((err) => { |
|
|
|
|
this.message.create('error', '获取图片失败!'); |
|
|
|
|
window.setTimeout(() => { |
|
|
|
|
this.initBackgroundImg(); |
|
|
|
|
}, 0); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//初始化背景图
|
|
|
|
|
canvas; |
|
|
|
|
ctx; |
|
|
|
|
@ -156,32 +156,6 @@ export class ImageLabelAnxinComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
console.log('原始标点数据', this.camerasData.dimensionedPointsAnxin); |
|
|
|
|
|
|
|
|
|
// for (const key in this.camerasData.dimensionedPointsAnxin.rawData) {
|
|
|
|
|
// const element = this.camerasData.dimensionedPointsAnxin.rawData[key];
|
|
|
|
|
// console.log(key, element);
|
|
|
|
|
// if (element.length !== 0) {
|
|
|
|
|
// for (let index = 0; index < element.length; index++) {
|
|
|
|
|
// const item = element[index];
|
|
|
|
|
// console.log(666, item);
|
|
|
|
|
// let obj = this.PolygonData[key];
|
|
|
|
|
// this.DrawPolygoning = key;
|
|
|
|
|
// this.DrawPolygon(
|
|
|
|
|
// item.x,
|
|
|
|
|
// item.y,
|
|
|
|
|
// canvas,
|
|
|
|
|
// context,
|
|
|
|
|
// obj.Points,
|
|
|
|
|
// obj.Circles,
|
|
|
|
|
// obj.Allpoints,
|
|
|
|
|
// obj.IsDragging,
|
|
|
|
|
// obj.IsInOut,
|
|
|
|
|
// obj.Color
|
|
|
|
|
// );
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// this.DrawPolygoning = '';
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
for ( |
|
|
|
|
let key = 0; |
|
|
|
|
key < this.camerasData.dimensionedPointsAnxin.yamlData.length; |
|
|
|
|
@ -190,6 +164,9 @@ export class ImageLabelAnxinComponent implements OnInit {
|
|
|
|
|
const element = this.camerasData.dimensionedPointsAnxin.yamlData[key]; |
|
|
|
|
let name = enum_area[element.type]; |
|
|
|
|
let arr = this.handleArr(element.points); |
|
|
|
|
|
|
|
|
|
console.log('arr', arr); |
|
|
|
|
|
|
|
|
|
for (let index = 0; index < arr.length; index++) { |
|
|
|
|
const item = arr[index]; |
|
|
|
|
let obj = this.PolygonData[name]; |
|
|
|
|
@ -210,6 +187,7 @@ export class ImageLabelAnxinComponent implements OnInit {
|
|
|
|
|
this.DrawPolygoning = ''; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 将比例点转换为底图的坐标点
|
|
|
|
|
handleArr(arr, n = 2) { |
|
|
|
|
const res = []; |
|
|
|
|
for (let i = 0; i < arr.length - 1; i += 2) { |
|
|
|
|
@ -306,6 +284,22 @@ export class ImageLabelAnxinComponent implements OnInit {
|
|
|
|
|
IsInOut: false, //是否在绘制区域内
|
|
|
|
|
Color: 'black', |
|
|
|
|
}, |
|
|
|
|
办公区: { |
|
|
|
|
Points: [], //线段的点的集合
|
|
|
|
|
Circles: [], //可拖动圆圈的点的集合
|
|
|
|
|
Allpoints: [], //整体移动点位
|
|
|
|
|
IsDragging: false, //是否可拖拽
|
|
|
|
|
IsInOut: false, //是否在绘制区域内
|
|
|
|
|
Color: 'pink', |
|
|
|
|
}, |
|
|
|
|
工位: { |
|
|
|
|
Points: [], //线段的点的集合
|
|
|
|
|
Circles: [], //可拖动圆圈的点的集合
|
|
|
|
|
Allpoints: [], //整体移动点位
|
|
|
|
|
IsDragging: false, //是否可拖拽
|
|
|
|
|
IsInOut: false, //是否在绘制区域内
|
|
|
|
|
Color: 'purple', |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//绘制多边形的方法
|
|
|
|
|
@ -515,6 +509,8 @@ export class ImageLabelAnxinComponent implements OnInit {
|
|
|
|
|
console.log(this.camerasData.dimensionedPointsAnxin); |
|
|
|
|
console.log('标点数据', this.PolygonData); |
|
|
|
|
|
|
|
|
|
// console.log(999, this.route.snapshot.queryParams.type);
|
|
|
|
|
// return;
|
|
|
|
|
for (const key in this.PolygonData) { |
|
|
|
|
const element = this.PolygonData[key]; |
|
|
|
|
if (element.Points.length !== 0 && element.Points.length <= 2) { |
|
|
|
|
@ -529,6 +525,8 @@ export class ImageLabelAnxinComponent implements OnInit {
|
|
|
|
|
收银区: [], |
|
|
|
|
加油区: [], |
|
|
|
|
卸油区: [], |
|
|
|
|
办公区: [], |
|
|
|
|
工位: [], |
|
|
|
|
}; |
|
|
|
|
this.camerasData.dimensionedPointsAnxin.yamlData = []; |
|
|
|
|
} |
|
|
|
|
@ -598,8 +596,10 @@ export class ImageLabelAnxinComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
enum enum_area { |
|
|
|
|
'进出口' = 0, |
|
|
|
|
'收银区' = 1, |
|
|
|
|
'加油区' = 2, |
|
|
|
|
'卸油区' = 3, |
|
|
|
|
'收银区' = 1, |
|
|
|
|
'进出口' = 0, |
|
|
|
|
'办公区' = 4, |
|
|
|
|
'工位' = 5, |
|
|
|
|
} |
|
|
|
|
|
邵佳豪