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

[完善]新增标绘类型

beijing
邵佳豪 1 year ago
parent
d818d2d087
commit
514d6abd9e
4 changed files with 55 additions and 51 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. 4
      src/app/system-management/analysis-of-the-host/addhost/addhost.component.html
  2. 4
      src/app/system-management/analysis-of-the-host/edithost/edithost.component.html
  3. 12
      src/app/system-management/image-label-anxin/image-label-anxin.component.html
  4. 86
      src/app/system-management/image-label-anxin/image-label-anxin.component.ts

4
src/app/system-management/analysis-of-the-host/addhost/addhost.component.html
Unescape View File

@ -12,8 +12,8 @@
<nz-form-label [nzSpan]="5">类型</nz-form-label>
<nz-form-control>
<nz-select formControlName="type" name="select-validate" nzPlaceHolder="设备类型">
<nz-option [nzValue]="0" nzLabel="警旗1"></nz-option>
<nz-option [nzValue]="1" nzLabel="警旗2"></nz-option>
<!-- <nz-option [nzValue]="0" nzLabel="警旗1"></nz-option>
<nz-option [nzValue]="1" nzLabel="警旗2"></nz-option> -->
<nz-option [nzValue]="2" nzLabel="警旗3"></nz-option>
</nz-select>
</nz-form-control>

4
src/app/system-management/analysis-of-the-host/edithost/edithost.component.html
Unescape View File

@ -12,8 +12,8 @@
<nz-form-label [nzSpan]="5">类型</nz-form-label>
<nz-form-control>
<nz-select formControlName="type" name="select-validate" [(ngModel)]="type" nzPlaceHolder="设备类型">
<nz-option [nzValue]="0" nzLabel="警旗1"></nz-option>
<nz-option [nzValue]="1" nzLabel="警旗2"></nz-option>
<!-- <nz-option [nzValue]="0" nzLabel="警旗1"></nz-option>
<nz-option [nzValue]="1" nzLabel="警旗2"></nz-option> -->
<nz-option [nzValue]="2" nzLabel="警旗3"></nz-option>
</nz-select>
</nz-form-control>

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

@ -1,4 +1,4 @@
<div class="canvasBox" >
<div class="canvasBox">
<div class="btnbox" cdkDrag>
<label class="leftTitle" style="color: red;">安信盒子标记</label>
@ -6,7 +6,7 @@
<label class="leftTitle" *ngIf="markType === 1">加油区</label>
<label class="leftTitle" *ngIf="markType === 2">卸油区</label>
<label class="leftTitle" *ngIf="markType === 3">便利店</label>
<label class="leftTitle" *ngIf="markType === 4">办公区</label>
<button nz-button [ngClass]="{selectBtn: selectedBtn === '进出口'}" (click)="selectedBtn = '进出口'">进出口
@ -28,6 +28,14 @@
<span class="colorBlock" style="background-color: black;"></span>
<span class="deleteItem" (click)="clearCanvasItem($event,'卸油区')">删除</span>
</button>
<button nz-button [ngClass]="{selectBtn: selectedBtn === '办公区'}" (click)="selectedBtn = '办公区'">办公区
<span class="colorBlock" style="background-color: pink;"></span>
<span class="deleteItem" (click)="clearCanvasItem($event,'办公区')">删除</span>
</button>
<button nz-button [ngClass]="{selectBtn: selectedBtn === '工位'}" (click)="selectedBtn = '工位'">工位
<span class="colorBlock" style="background-color: purple;"></span>
<span class="deleteItem" (click)="clearCanvasItem($event,'工位')">删除</span>
</button>
<button nz-button nzType="primary" (click)="anewgetImg()">重新捕获摄像头图片</button>

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

@ -29,7 +29,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 +88,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 +154,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 +162,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 +185,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 +282,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',
}
};
//绘制多边形的方法
@ -529,6 +521,8 @@ export class ImageLabelAnxinComponent implements OnInit {
收银区: [],
加油区: [],
卸油区: [],
办公区: [],
工位: [],
};
this.camerasData.dimensionedPointsAnxin.yamlData = [];
}
@ -598,8 +592,10 @@ export class ImageLabelAnxinComponent implements OnInit {
}
enum enum_area {
'进出口' = 0,
'收银区' = 1,
'加油区' = 2,
'卸油区' = 3,
'收银区' = 1,
'进出口' = 0,
'办公区' = 4,
'工位' = 5,
}

Write Preview
Loading…
Cancel
Save