diff --git a/src/app/system-management/image-label2/image-label2.component.ts b/src/app/system-management/image-label2/image-label2.component.ts
index 67484b8..b0a7499 100644
--- a/src/app/system-management/image-label2/image-label2.component.ts
+++ b/src/app/system-management/image-label2/image-label2.component.ts
@@ -6,11 +6,14 @@ import { NzModalService } from 'ng-zorro-antd/modal';
@Component({
selector: 'app-image-label2',
templateUrl: './image-label2.component.html',
- styleUrls: ['./image-label2.component.scss']
+ styleUrls: ['./image-label2.component.scss'],
})
export class ImageLabel2Component implements OnInit {
-
- constructor(private http: HttpClient, private message: NzMessageService, private modal: NzModalService) { }
+ constructor(
+ private http: HttpClient,
+ private message: NzMessageService,
+ private modal: NzModalService
+ ) {}
@Input() data: any; //传递id
camerasData: any; //摄像头Data
@@ -21,450 +24,480 @@ export class ImageLabel2Component implements OnInit {
//返回上一步路由
goback() {
- history.go(-1)
- }
-
- 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', '获取图片失败!');
- })
+ history.go(-1);
}
- anewgetImg() {
- let params = {
- cameraId: this.data
- }
- this.http.put('/api/Cameras/Commands/CaptureImages', '', { params: params }).subscribe(
- {
- next: (value: Object) => {
- this.message.create('success', '向边缘设备发送请求成功，请过一段时间手动刷新页面!');
- },
- error: (error: HttpErrorResponse) => {
-
- },
- complete: () => {
-
- }
- }
- )
- }
+ ngOnInit(): void {}
//获取 摄像头图片/标注点位
getImgMarkData() {
- let that = this
+ let that = this;
return new Promise((resolve, reject) => {
that.http.get(`/api/Cameras/${that.data}`).subscribe((info: any) => {
- info.dimensionedPoints ? info.dimensionedPoints = JSON.parse(info.dimensionedPoints) : null;
+ info.dimensionedPoints
+ ? (info.dimensionedPoints = JSON.parse(info.dimensionedPoints))
+ : null;
that.camerasData = info;
that.markType = info.type;
- console.log(that.camerasData, "摄像头数据")
const httpOptions = {
responseType: 'blob' as 'json',
- params: { cameraId: that.data }
+ params: { cameraId: that.data },
};
that.http.get(`/api/Cameras/Images`, httpOptions).subscribe({
next: (data) => {
- resolve(data)
+ resolve(data);
},
error: (err) => {
- reject('error')
+ reject('error');
},
- }) //get
- }) //get
- })
+ });
+ });
+ });
}
- //保存
- save() {
- console.log(this.camerasData.dimensionedPoints)
- if (!this.camerasData.dimensionedPoints) {
- this.camerasData.dimensionedPoints = {
- polygon: [],
- arrow: [],
- arrowOfSouth: [],
- arrowOfWest: [],
- arrowOfEast: [],
- arrowOfNorth: [],
- rectangle: [],
- }
- }
- if (this.markType === 0) {
- if (!this.points.length) {
- this.message.create('warning', '绘制完整后可保存!');
- return
- }
- this.camerasData.dimensionedPoints.polygon = this.points
- } else if (this.markType === 2) {
-
- console.log(this.arrowPoints)
-
- if(this.arrowPoints.length == 1){
- this.message.create('warning', '请将箭头标绘完整!');
- return
- }
-
- if (this.oblongPoints.length != 2 || !this.oblongPoints.find(item => { return item.oilUnloadingArea }) || !this.oblongPoints.find(item => { return !item.oilUnloadingArea })) {
- this.message.create('warning', '绘制完整后可保存!');
- return
- }
- this.camerasData.dimensionedPoints.arrow = this.arrowPoints
-
- this.camerasData.dimensionedPoints.arrowOfSouth = this.arrowPointsOfSouth
- this.camerasData.dimensionedPoints.arrowOfWest = this.arrowPointsOfWest
- this.camerasData.dimensionedPoints.arrowOfEast = this.arrowPointsOfEast
- this.camerasData.dimensionedPoints.arrowOfNorth = this.arrowPointsOfNorth
+ anewgetImg() {
+ let params = {
+ cameraId: this.data,
+ };
+ this.http
+ .put('/api/Cameras/Commands/CaptureImages', '', { params: params })
+ .subscribe({
+ next: (value: Object) => {
+ this.message.create(
+ 'success',
+ '向边缘设备发送请求成功，请过一段时间手动刷新页面!'
+ );
+ },
+ error: (error: HttpErrorResponse) => {},
+ complete: () => {},
+ });
+ }
- this.camerasData.dimensionedPoints.rectangle = this.oblongPoints
- } else if (this.markType === 3) {
- if (this.arrowPoints.length != 2) {
- this.message.create('warning', '绘制完整后可保存!');
- return
- }
- this.camerasData.dimensionedPoints.arrow = this.arrowPoints
- this.camerasData.dimensionedPoints.arrowOfSouth = this.arrowPointsOfSouth
- }
- let paramsData = JSON.parse(JSON.stringify(this.camerasData))
- paramsData.dimensionedPoints = JSON.stringify(paramsData.dimensionedPoints)
- console.log('标点结果', this.camerasData.dimensionedPoints)
- 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();
- })
+ ngAfterContentInit(): void {
+ this.getImgMarkData()
+ .then((res: any) => {
+ this.imgItem = window.URL.createObjectURL(res);
+ window.setTimeout(() => {
+ this.initBackgroundImg();
+ }, 0);
+ })
+ .catch((err) => {
+ this.message.create('error', '获取图片失败!');
+ });
}
//初始化背景图
- canvas
- ctx
+ canvas;
+ ctx;
initBackgroundImg() {
this.canvas = document.getElementById('canvas') as any;
- this.canvas.oncontextmenu = () => { return false; };
- let that = this
+ this.canvas.oncontextmenu = () => {
+ return false;
+ };
+ let that = this;
// 检测canvas支持性
if (this.canvas.getContext) {
- this.ctx = this.canvas.getContext('2d'); // 返回一个对象，该对象提供了用在画布上绘图的方法和属性
+ this.ctx = this.canvas.getContext('2d'); // 返回一个对象，该对象提供了用在画布上绘图的方法和属性
} else {
- document.write("你的浏览器不支持canvas,请升级你的浏览器!");
+ document.write('你的浏览器不支持canvas,请升级你的浏览器!');
return;
}
// 图片加载完后，将其显示在canvas中
var img = new Image();
- img.src = that.imgItem ? that.imgItem : "../../../assets/images/bgImg.png";
+ img.src = that.imgItem ? that.imgItem : '../../../assets/images/bgImg.png';
img.onload = () => {
that.canvasWidth = img.width;
that.canvasHeight = img.height;
- console.log(img.width + "*" + img.height)
- window.setTimeout(() => { // 加载图片
+ window.setTimeout(() => {
+ // 加载图片
this.ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight);
- this.copyCanvas = this.ctx.getImageData(0, 0, that.canvasWidth, that.canvasHeight)
- that.initCanvasEvent(this.canvas) //监听canvas事件
- that.initMark(this.canvas, this.ctx) //初始化标绘图形
- }, 0)
- }
- }
-
-
- clearCanvasItem(e, type) {
- e.stopPropagation()
- this.modal.confirm({
- nzTitle: '确认要清除此标绘吗?',
- nzOkText: '确定',
- nzOkType: 'primary',
- nzOkDanger: true,
- nzOnOk: () => {
- // this.clearCanvas()
- if (type == 'arrow') {
- this.arrowPoints = []
- }
- if (type == 'arrowOfWest') {
- this.arrowPointsOfWest = []
- }
- if (type == 'oilUnloadingAreaTrue') {
- for (let index = 0; index < this.oblongPoints.length; index++) {
- const element = this.oblongPoints[index];
- if (element.oilUnloadingArea) {
- this.oblongPoints.splice(index, 1);
- index--;
- }
- }
- }
- if (type == 'oilUnloadingAreaFalse') {
- for (let index = 0; index < this.oblongPoints.length; index++) {
- const element = this.oblongPoints[index];
- if (!element.oilUnloadingArea) {
- this.oblongPoints.splice(index, 1);
- index--;
- }
- }
- }
-
- console.log(this.camerasData.dimensionedPoints)
- this.initMark2(this.canvas, this.ctx) //初始化标绘图形
-
- },
- nzCancelText: '取消',
- nzOnCancel: () => console.log('Cancel')
- });
-
-
+ this.copyCanvas = this.ctx.getImageData(
+ 0,
+ 0,
+ that.canvasWidth,
+ that.canvasHeight
+ );
+ that.initMark(this.canvas, this.ctx); //初始化标绘图形
+ that.initCanvasEvent(this.canvas); //监听canvas事件
+ }, 0);
+ };
}
-
-
-
-
//初始化标绘图形
initMark(canvas, context) {
+ if (this.markType === 1) {
+ this.isAllMonitoring = true;
+ }
if (!this.camerasData.dimensionedPoints) {
- return
+ return;
}
if (this.markType === 0) {
- this.camerasData.dimensionedPoints.polygon.forEach(element => {
+ this.camerasData.dimensionedPoints.polygon.forEach((element) => {
this.drawPolygon(element.x, element.y, canvas, context); //绘制多边形
});
} else if (this.markType === 2) {
- this.arrowPoints = this.camerasData.dimensionedPoints.arrow
- if (this.camerasData.dimensionedPoints.arrowOfSouth && this.camerasData.dimensionedPoints.arrowOfSouth.length != 0) {
- this.arrowPointsOfSouth = this.camerasData.dimensionedPoints.arrowOfSouth
+ this.arrowPoints = this.camerasData.dimensionedPoints.arrow;
+ if (
+ this.camerasData.dimensionedPoints.arrowOfSouth &&
+ this.camerasData.dimensionedPoints.arrowOfSouth.length != 0
+ ) {
+ this.arrowPointsOfSouth =
+ this.camerasData.dimensionedPoints.arrowOfSouth;
}
- if (this.camerasData.dimensionedPoints.arrowOfWest && this.camerasData.dimensionedPoints.arrowOfWest.length != 0) {
- this.arrowPointsOfWest = this.camerasData.dimensionedPoints.arrowOfWest
+ if (
+ this.camerasData.dimensionedPoints.arrowOfWest &&
+ this.camerasData.dimensionedPoints.arrowOfWest.length != 0
+ ) {
+ this.arrowPointsOfWest = this.camerasData.dimensionedPoints.arrowOfWest;
}
- if (this.camerasData.dimensionedPoints.arrowOfEast && this.camerasData.dimensionedPoints.arrowOfEast.length != 0) {
- this.arrowPointsOfEast = this.camerasData.dimensionedPoints.arrowOfEast
+ if (
+ this.camerasData.dimensionedPoints.arrowOfEast &&
+ this.camerasData.dimensionedPoints.arrowOfEast.length != 0
+ ) {
+ this.arrowPointsOfEast = this.camerasData.dimensionedPoints.arrowOfEast;
}
- if (this.camerasData.dimensionedPoints.arrowOfNorth && this.camerasData.dimensionedPoints.arrowOfNorth.length != 0) {
- this.arrowPointsOfNorth = this.camerasData.dimensionedPoints.arrowOfNorth
+ if (
+ this.camerasData.dimensionedPoints.arrowOfNorth &&
+ this.camerasData.dimensionedPoints.arrowOfNorth.length != 0
+ ) {
+ this.arrowPointsOfNorth =
+ this.camerasData.dimensionedPoints.arrowOfNorth;
}
- this.oblongPoints = this.camerasData.dimensionedPoints.rectangle
- let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
- this.drawLine(arr, context)
+ this.oblongPoints = this.camerasData.dimensionedPoints.rectangle;
+ let arr = [
+ this.arrowPoints,
+ this.arrowPointsOfSouth,
+ this.arrowPointsOfWest,
+ this.arrowPointsOfEast,
+ this.arrowPointsOfNorth,
+ ];
+ this.drawLine(arr, context);
} else if (this.markType === 3) {
- this.arrowPoints = this.camerasData.dimensionedPoints.arrow
- if (this.camerasData.dimensionedPoints.arrowOfSouth && this.camerasData.dimensionedPoints.arrowOfSouth.length != 0) {
- this.arrowPointsOfSouth = this.camerasData.dimensionedPoints.arrowOfSouth
+ this.arrowPoints = this.camerasData.dimensionedPoints.arrow;
+ if (
+ this.camerasData.dimensionedPoints.arrowOfSouth &&
+ this.camerasData.dimensionedPoints.arrowOfSouth.length != 0
+ ) {
+ this.arrowPointsOfSouth =
+ this.camerasData.dimensionedPoints.arrowOfSouth;
}
- let arr = [this.arrowPoints, this.arrowPointsOfSouth]
- this.drawLine(arr, context)
+ let arr = [this.arrowPoints, this.arrowPointsOfSouth];
+ this.drawLine(arr, context);
+ }
+ if (
+ this.camerasData.dimensionedPoints.polygonOfmonitor &&
+ this.camerasData.dimensionedPoints.polygonOfmonitor.length !== 0
+ ) {
+ this.camerasData.dimensionedPoints.polygonOfmonitor.forEach((element) => {
+ this.drawPolygonOfmonitor(element.x, element.y, canvas, context); //绘制多边形
+ });
}
}
-
- //初始化标绘图形
+ //初始化标绘图形---单独清除某个标绘
initMark2(canvas, context) {
if (this.markType === 2) {
- let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
- this.drawLine(arr, context)
+ //卸油区
+ let arr = [
+ this.arrowPoints,
+ this.arrowPointsOfSouth,
+ this.arrowPointsOfWest,
+ this.arrowPointsOfEast,
+ this.arrowPointsOfNorth,
+ ];
+ this.drawLine(arr, context);
} else if (this.markType === 3) {
- let arr = [this.arrowPoints, this.arrowPointsOfSouth]
- this.drawLine(arr, context)
+ //便利店
+ let arr = [this.arrowPoints, this.arrowPointsOfSouth];
+ this.drawLine(arr, context);
}
- }
+ if (this.markType !== 0) {
+ this.redrawPolygon(
+ this.pointsOfmonitor,
+ this.allpointsOfmonitor,
+ this.circlesOfmonitor,
+ context,
+ 'black'
+ );
+ }
+ }
- markType: number = 0; //0=进出口,2=卸油区,3=便利店,
+ markType: number = 0; //0=进出口,1=加油区,2=卸油区,3=便利店,
isDrawArrow: boolean = true; //绘制type 箭头/矩形
- arrowDirection = null
+
+ isAllMonitoring: boolean = false; //控制全局监控标绘按钮的显隐
+ isPolygon: boolean = true; //进出口的多边形
+
+ arrowDirection = null;
+
+ isConvenienceStore = true;
+
oilUnloadingArea: boolean = true; //卸油区type 泄油管区域/静电接地仪
//记录鼠标点击位置
downx = 0;
downy = 0;
- //清空画布
- clearCanvas() {
- // 清空标绘箭头
- this.arrowPoints = [];
- this.arrowPointsOfSouth = []; //南 箭头的点的集合
- this.arrowPointsOfWest = []; //西 箭头的点的集合
- this.arrowPointsOfEast = []; //东 箭头的点的集合
- this.arrowPointsOfNorth = []; //北 箭头的点的集合
- // 清空标绘箭头
- // 清空标绘矩形
- this.oblongPoints = [];
- // 清空标绘矩形
- // 清空标绘多边形
- this.points = [];
- this.circles = [];
- this.allpoints = [];
- // 清空标绘多边形
- let canvas = document.getElementById('canvas') as any;
- let context = canvas.getContext('2d');
-
- context.clearRect(0, 0, canvas.width, canvas.height);
- this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
- }
-
//初始化 canvas画布 监听事件
-
+ context;
initCanvasEvent(canvas) {
- let context = canvas.getContext('2d');
- canvas.onmousedown = (e) => { //鼠标按下事件
+ var context = canvas.getContext('2d');
+ this.context = context;
+ canvas.onmousedown = (e) => {
+ //鼠标按下事件
var clickX = e.pageX - canvas.offsetLeft;
var clickY = e.pageY - canvas.offsetTop;
- this.downx = clickX
- this.downy = clickY
+ this.downx = clickX;
+ this.downy = clickY;
- if (this.markType === 0) { //进出口
- this.drawPolygon(clickX, clickY, canvas, context); //绘制多边形
- } else if (this.markType === 2 || this.markType === 3) { //卸油区/便利店
+ if (this.markType === 0) {
+ //进出口
+ if (this.isPolygon) {
+ this.drawPolygon(clickX, clickY, canvas, context); //绘制多边形
+ } else if (this.isAllMonitoring) {
+ this.drawPolygonOfmonitor(clickX, clickY, canvas, context); //绘制多边形
+ }
+ } else if (this.markType === 1) {
+ //加油区
+ this.drawPolygonOfmonitor(clickX, clickY, canvas, context); //绘制多边形
+ } else if (this.markType === 2 || this.markType === 3) {
+ //卸油区/便利店
//开始绘制
- 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;
- if (this.isDrawArrow && !this.arrowDirection) { //绘制 箭头
- if (this.arrowPoints.length === 2) { //限制数量
- return
+ if (this.isAllMonitoring) {
+ this.drawPolygonOfmonitor(clickX, clickY, canvas, context); //绘制多边形
+ } else {
+ 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;
+ if (this.isDrawArrow && !this.arrowDirection) {
+ //绘制 箭头
+ if (this.arrowPoints.length === 2) {
+ //限制数量
+ return;
+ }
+ context.lineTo(moveX, moveY);
+ context.stroke();
+ } else if (this.isDrawArrow && this.arrowDirection == 'South') {
+ if (this.arrowPointsOfSouth.length === 2) {
+ //限制数量
+ return;
+ }
+ context.lineTo(moveX, moveY);
+ context.stroke();
+ } else if (this.isDrawArrow && this.arrowDirection == 'West') {
+ if (this.arrowPointsOfWest.length === 2) {
+ //限制数量
+ return;
+ }
+ context.lineTo(moveX, moveY);
+ context.stroke();
+ } else if (this.isDrawArrow && this.arrowDirection == 'East') {
+ if (this.arrowPointsOfEast.length === 2) {
+ //限制数量
+ return;
+ }
+ context.lineTo(moveX, moveY);
+ context.stroke();
+ } else if (this.isDrawArrow && this.arrowDirection == 'North') {
+ if (this.arrowPointsOfNorth.length === 2) {
+ //限制数量
+ return;
+ }
+ context.lineTo(moveX, moveY);
+ context.stroke();
+ } else {
+ //绘制 矩形
+ if (this.oblongPoints.length === 2) {
+ //限制数量
+ return;
+ }
+ this.drawOblong(this.oblongPoints, context);
+ context.strokeStyle = this.oilUnloadingArea ? 'green' : 'red';
+ 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
+ );
}
- context.lineTo(moveX, moveY);
- context.stroke();
- } else if (this.isDrawArrow && this.arrowDirection == 'South') {
- if (this.arrowPointsOfSouth.length === 2) { //限制数量
- return
- }
- context.lineTo(moveX, moveY);
- context.stroke();
- } else if (this.isDrawArrow && this.arrowDirection == 'West') {
- if (this.arrowPointsOfWest.length === 2) { //限制数量
- return
- }
- context.lineTo(moveX, moveY);
- context.stroke();
- } else if (this.isDrawArrow && this.arrowDirection == 'East') {
- if (this.arrowPointsOfEast.length === 2) { //限制数量
- return
- }
- context.lineTo(moveX, moveY);
- context.stroke();
- } else if (this.isDrawArrow && this.arrowDirection == 'North') {
- if (this.arrowPointsOfNorth.length === 2) { //限制数量
- return
- }
- context.lineTo(moveX, moveY);
- context.stroke();
- } else { //绘制 矩形
- if (this.oblongPoints.length === 2) { //限制数量
- return
- }
- this.drawOblong(this.oblongPoints, context)
- context.strokeStyle = this.oilUnloadingArea ? "green" : "red";
- 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);
- }
+ };
}
+ //
}
- }
+ };
- canvas.onmouseup = (e) => { //鼠标松开事件
- canvas.onmousemove = (ev) => { //鼠标移动事件
+ canvas.onmouseup = (e) => {
+ //鼠标松开事件
+ canvas.onmousemove = (ev) => {
+ //鼠标移动事件
return false;
- }
- if (this.markType != 2 && this.markType != 3) {
- return
+ };
+ if (this.markType == 0 || this.markType == 1) {
+ //因为进出口或加油区 不画箭头或者矩形 所以不检测松开事件
+ return;
}
var upX = e.pageX - canvas.offsetLeft;
var upY = e.pageY - canvas.offsetTop;
- if (this.isDrawArrow && !this.arrowDirection) { //绘制 箭头
- if (this.arrowPoints.length === 2) { //限制数量
+ if (this.isDrawArrow && !this.arrowDirection && !this.isAllMonitoring) {
+ console.log('八嘎');
+ //绘制 箭头
+ if (this.arrowPoints.length === 2) {
+ //限制数量
this.message.create('warning', '绘制数量已达上限!');
- return
+ return;
}
let point = {
startX: this.downx,
startY: this.downy,
endX: upX,
endY: upY,
- }
+ };
this.arrowPoints.push(point);
- let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
- this.drawLine(arr, context)
- } else if (this.isDrawArrow && this.arrowDirection == 'South') {
- if (this.arrowPointsOfSouth.length === 2) { //限制数量
+ let arr = [
+ this.arrowPoints,
+ this.arrowPointsOfSouth,
+ this.arrowPointsOfWest,
+ this.arrowPointsOfEast,
+ this.arrowPointsOfNorth,
+ ];
+ this.drawLine(arr, context);
+ }
+ if (
+ this.isDrawArrow &&
+ this.arrowDirection == 'South' &&
+ !this.isAllMonitoring
+ ) {
+ if (this.arrowPointsOfSouth.length === 2) {
+ //限制数量
this.message.create('warning', '绘制数量已达上限!');
- return
+ return;
}
let point = {
startX: this.downx,
startY: this.downy,
endX: upX,
endY: upY,
- }
+ };
this.arrowPointsOfSouth.push(point);
- let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
- this.drawLine(arr, context)
- } else if (this.isDrawArrow && this.arrowDirection == 'West') {
- if (this.arrowPointsOfWest.length === 2) { //限制数量
+ let arr = [
+ this.arrowPoints,
+ this.arrowPointsOfSouth,
+ this.arrowPointsOfWest,
+ this.arrowPointsOfEast,
+ this.arrowPointsOfNorth,
+ ];
+ this.drawLine(arr, context);
+ }
+ if (
+ this.isDrawArrow &&
+ this.arrowDirection == 'West' &&
+ !this.isAllMonitoring
+ ) {
+ if (this.arrowPointsOfWest.length === 2) {
+ //限制数量
this.message.create('warning', '绘制数量已达上限!');
- return
+ return;
}
let point = {
startX: this.downx,
startY: this.downy,
endX: upX,
endY: upY,
- }
+ };
this.arrowPointsOfWest.push(point);
- let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
- this.drawLine(arr, context)
- } else if (this.isDrawArrow && this.arrowDirection == 'East') {
- console.log('East')
- if (this.arrowPointsOfEast.length === 2) { //限制数量
+ let arr = [
+ this.arrowPoints,
+ this.arrowPointsOfSouth,
+ this.arrowPointsOfWest,
+ this.arrowPointsOfEast,
+ this.arrowPointsOfNorth,
+ ];
+ this.drawLine(arr, context);
+ }
+ if (
+ this.isDrawArrow &&
+ this.arrowDirection == 'East' &&
+ !this.isAllMonitoring
+ ) {
+ console.log('East');
+ if (this.arrowPointsOfEast.length === 2) {
+ //限制数量
this.message.create('warning', '绘制数量已达上限!');
- return
+ return;
}
let point = {
startX: this.downx,
startY: this.downy,
endX: upX,
endY: upY,
- }
+ };
this.arrowPointsOfEast.push(point);
- let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
- this.drawLine(arr, context)
- } else if (this.isDrawArrow && this.arrowDirection == 'North') {
- console.log('North')
- if (this.arrowPointsOfNorth.length === 2) { //限制数量
+ let arr = [
+ this.arrowPoints,
+ this.arrowPointsOfSouth,
+ this.arrowPointsOfWest,
+ this.arrowPointsOfEast,
+ this.arrowPointsOfNorth,
+ ];
+ this.drawLine(arr, context);
+ }
+ if (
+ this.isDrawArrow &&
+ this.arrowDirection == 'North' &&
+ !this.isAllMonitoring
+ ) {
+ console.log('North');
+ if (this.arrowPointsOfNorth.length === 2) {
+ //限制数量
this.message.create('warning', '绘制数量已达上限!');
- return
+ return;
}
let point = {
startX: this.downx,
startY: this.downy,
endX: upX,
endY: upY,
- }
+ };
this.arrowPointsOfNorth.push(point);
- let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
- this.drawLine(arr, context)
- } else { //绘制 矩形
- if (this.oblongPoints.length === 2) { //限制数量
+ let arr = [
+ this.arrowPoints,
+ this.arrowPointsOfSouth,
+ this.arrowPointsOfWest,
+ this.arrowPointsOfEast,
+ this.arrowPointsOfNorth,
+ ];
+ this.drawLine(arr, context);
+ }
+ if (this.markType === 2 && !this.isDrawArrow && !this.isAllMonitoring) {
+ //只有卸油区才判断
+ //绘制 矩形
+ if (this.oblongPoints.length === 2) {
+ //限制数量
this.message.create('warning', '绘制数量已达上限!');
- return
+ return;
}
- let point = this.getOblongInfo(this.downx, this.downy, upX, upY)
- this.oblongPoints.push(point)
- this.drawOblong(this.oblongPoints, context)
+ let point = this.getOblongInfo(this.downx, this.downy, upX, upY);
+ this.oblongPoints.push(point);
+ this.drawOblong(this.oblongPoints, context);
}
- console.log(this.camerasData.dimensionedPoints)
};
-
}
arrowPoints = []; //箭头的点的集合
@@ -474,36 +507,48 @@ export class ImageLabel2Component implements OnInit {
arrowPointsOfEast = []; //东 箭头的点的集合
arrowPointsOfNorth = []; //北 箭头的点的集合
-
-
//canvas 绘制直线
drawLine(pointsList, context, isRepeat: boolean = false) {
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
- if (this.markType === 2 && !isRepeat) { //同时绘制 矩形
- this.oblongPoints.forEach(element => {
- context.strokeStyle = element.oilUnloadingArea ? "green" : "red";
+ if (this.markType === 2 && !isRepeat) {
+ //同时绘制 矩形
+ this.oblongPoints.forEach((element) => {
+ context.strokeStyle = element.oilUnloadingArea ? 'green' : 'red';
context.lineWidth = 3;
context.strokeRect(element.x, element.y, element.width, element.height);
context.font = '22px Arial';
- context.fillText('高度:' + element.height, element.x + 3, element.y + 22);
+ context.fillText(
+ '高度:' + element.height,
+ element.x + 3,
+ element.y + 22
+ );
});
}
- // console.log(789, pointsList)
- pointsList.forEach(element => {
+ pointsList.forEach((element) => {
if (element.length != 0) {
element.forEach((item, index) => {
if ((index + 1) % 2 === 0) {
- this.drawArrow(item.startX, item.startY, item.endX, item.endY, 30, 10, 3, 'green', context)
+ this.drawArrow(
+ item.startX,
+ item.startY,
+ item.endX,
+ item.endY,
+ 30,
+ 10,
+ 3,
+ 'green',
+ context
+ );
} else {
context.beginPath();
context.moveTo(item.startX, item.startY);
- context.strokeStyle = "green";
+ context.strokeStyle = 'green';
context.lineWidth = 3;
context.lineTo(item.endX, item.endY);
context.stroke();
}
- })
+ });
}
});
}
@@ -517,15 +562,15 @@ export class ImageLabel2Component implements OnInit {
// width：箭头线宽度
// color：箭头颜色
- theta = typeof (theta) != 'undefined' ? theta : 30;
- headlen = typeof (theta) != 'undefined' ? headlen : 10;
- width = typeof (width) != 'undefined' ? width : 1;
- color = typeof (color) != 'undefined' ? color : '#000';
+ theta = typeof theta != 'undefined' ? theta : 30;
+ headlen = typeof theta != 'undefined' ? headlen : 10;
+ width = typeof width != 'undefined' ? width : 1;
+ color = typeof color != 'undefined' ? color : '#000';
// 计算各角度和对应的P2,P3坐标
- var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
- angle1 = (angle + theta) * Math.PI / 180,
- angle2 = (angle - theta) * Math.PI / 180,
+ var angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI,
+ angle1 = ((angle + theta) * Math.PI) / 180,
+ angle2 = ((angle - theta) * Math.PI) / 180,
topX = headlen * Math.cos(angle1),
topY = headlen * Math.sin(angle1),
botX = headlen * Math.cos(angle2),
@@ -562,34 +607,50 @@ export class ImageLabel2Component implements OnInit {
width: 0,
height: 0,
oilUnloadingArea: this.oilUnloadingArea,
- }
+ };
if (startX > endX) {
- point.x = endX
- point.width = startX - endX
+ point.x = endX;
+ point.width = startX - endX;
} else {
- point.x = startX
- point.width = endX - startX
+ point.x = startX;
+ point.width = endX - startX;
}
if (startY > endY) {
- point.y = endY
- point.height = startY - endY
+ point.y = endY;
+ point.height = startY - endY;
} else {
- point.y = startY
- point.height = endY - startY
+ point.y = startY;
+ point.height = endY - startY;
}
- return point
+ return point;
}
//canvas 绘制矩形
drawOblong(oblongList, context) {
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
- if (this.markType === 2) { //同时绘制 直线箭头
- let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth]
- this.drawLine(arr, context, true)
+ if (this.markType === 2) {
+ //同时绘制 直线箭头
+ let arr = [
+ this.arrowPoints,
+ this.arrowPointsOfSouth,
+ this.arrowPointsOfWest,
+ this.arrowPointsOfEast,
+ this.arrowPointsOfNorth,
+ ];
+ this.drawLine(arr, context, true);
+
+ //同时绘制多边形
+ this.redrawPolygon(
+ this.pointsOfmonitor,
+ this.allpointsOfmonitor,
+ this.circlesOfmonitor,
+ context,
+ 'black'
+ );
}
- oblongList.forEach(element => {
- context.strokeStyle = element.oilUnloadingArea ? "green" : "red";
+ oblongList.forEach((element) => {
+ context.strokeStyle = element.oilUnloadingArea ? 'green' : 'red';
context.lineWidth = 3;
context.strokeRect(element.x, element.y, element.width, element.height);
context.font = '22px Arial';
@@ -606,18 +667,19 @@ export class ImageLabel2Component implements OnInit {
//canvas 绘制多边形
drawPolygon(clickX, clickY, canvas, context) {
if (this.isInt(clickX, clickY)) {
- this.isInOut = true
- return
+ this.isInOut = true;
+ return;
} else {
- this.isInOut = false
+ this.isInOut = false;
}
-
- let index
+ let index;
//判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码
for (var i = 0; i < this.circles.length; i++) {
let circle = this.circles[i];
//使用勾股定理计算这个点与圆心之间的距离
- var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2));
+ var distanceFromCenter = Math.sqrt(
+ Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)
+ );
// 如果是其他的点，则设置可以拖动
if (distanceFromCenter <= circle.radius) {
@@ -628,20 +690,30 @@ export class ImageLabel2Component implements OnInit {
return;
}
}
+
//如果点击新的位置，则进入下面的代码，绘制点
context.clearRect(0, 0, canvas.width, canvas.height);
this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
+ if (this.pointsOfmonitor.length !== 0) {
+ this.redrawPolygon(
+ this.pointsOfmonitor,
+ this.allpointsOfmonitor,
+ this.circlesOfmonitor,
+ context,
+ 'black'
+ );
+ }
//遍历数组画圆
var circle = {
x: clickX,
y: clickY,
radius: 5,
- color: "white",
+ color: 'white',
isSelected: false, //拖拽点的标记
};
this.circles.push(circle);
- this.allpoints = JSON.parse(JSON.stringify(this.circles))
- this.circles[0].color = "white";
+ this.allpoints = JSON.parse(JSON.stringify(this.circles));
+ this.circles[0].color = 'white';
for (var i = 0; i < this.circles.length; i++) {
let circle = this.circles[i];
// 绘制圆圈
@@ -649,7 +721,7 @@ export class ImageLabel2Component implements OnInit {
context.beginPath();
context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
context.fillStyle = circle.color;
- context.strokeStyle = "red";
+ context.strokeStyle = 'red';
context.fill();
context.stroke();
}
@@ -658,7 +730,7 @@ export class ImageLabel2Component implements OnInit {
x: clickX,
y: clickY,
};
- this.points.push(point)
+ this.points.push(point);
context.beginPath();
context.lineWidth = 3;
//从起始点开始绘制
@@ -666,32 +738,367 @@ export class ImageLabel2Component implements OnInit {
for (var i = 0; i < this.points.length; i++) {
context.lineTo(this.points[i].x, this.points[i].y);
}
- context.closePath()
+ context.closePath();
//ontext.fillStyle = "rgb(2,100,30)";
//context.fill();
- context.strokeStyle = "green";
+ context.strokeStyle = 'green';
context.stroke();
}
//判断点位是否在图形区域内
isInt(x, y) {
if (!this.points[2]) {
- return
+ return;
}
var pt = {
x: x,
- y: y
- }
- return this.PointInPoly(pt, this.points)
+ y: y,
+ };
+ return this.PointInPoly(pt, this.points);
}
-
//射线法判断点位
PointInPoly(pt, poly) {
for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
- ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
- && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
- && (c = !c);
+ ((poly[i].y <= pt.y && pt.y < poly[j].y) ||
+ (poly[j].y <= pt.y && pt.y < poly[i].y)) &&
+ pt.x <
+ ((poly[j].x - poly[i].x) * (pt.y - poly[i].y)) /
+ (poly[j].y - poly[i].y) +
+ poly[i].x &&
+ (c = !c);
return c;
}
+ //2023.2.18新增 绘制监控区域的多边形
+
+ pointsOfmonitor = []; //线段的点的集合
+ circlesOfmonitor = []; //可拖动圆圈的点的集合
+ allpointsOfmonitor = []; //整体移动点位
+ isDraggingOfmonitor = false; //是否可拖拽
+ isInOutOfmonitor = false; //是否在绘制区域内
+
+ //canvas 绘制多边形
+ drawPolygonOfmonitor(clickX, clickY, canvas, context) {
+ if (this.isIntOfmonitor(clickX, clickY)) {
+ this.isInOutOfmonitor = true;
+ return;
+ } else {
+ this.isInOutOfmonitor = false;
+ }
+ let index;
+ //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码
+ for (var i = 0; i < this.circlesOfmonitor.length; i++) {
+ let circle = this.circlesOfmonitor[i];
+ //使用勾股定理计算这个点与圆心之间的距离
+ var distanceFromCenter = Math.sqrt(
+ Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)
+ );
+
+ // 如果是其他的点，则设置可以拖动
+ if (distanceFromCenter <= circle.radius) {
+ // 清除之前选择的圆圈
+ index = i;
+ this.isDraggingOfmonitor = true;
+ //停止搜索
+ return;
+ }
+ }
+
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
+
+ //再次绘制多边形
+ if (this.points.length !== 0) {
+ this.redrawPolygon(
+ this.points,
+ this.allpoints,
+ this.circles,
+ context,
+ 'green'
+ );
+ }
+ // 再次绘制箭头-->里面自动绘制矩形
+ if (this.markType === 2 || this.markType === 3) {
+ //同时绘制 直线箭头
+ let arr = [
+ this.arrowPoints,
+ this.arrowPointsOfSouth,
+ this.arrowPointsOfWest,
+ this.arrowPointsOfEast,
+ this.arrowPointsOfNorth,
+ ];
+ this.drawLine(arr, context, false);
+ }
+
+ //再次绘制矩形
+ // if (this.markType === 2) {
+ // console.log(88888, this.oblongPoints);
+ // // 同时绘制 矩形
+ // this.oblongPoints.forEach((element) => {
+ // context.strokeStyle = element.oilUnloadingArea ? 'green' : 'red';
+ // context.lineWidth = 3;
+ // context.strokeRect(element.x, element.y, element.width, element.height);
+ // context.font = '22px Arial';
+ // context.fillText(
+ // '高度:' + element.height,
+ // element.x + 3,
+ // element.y + 22
+ // );
+ // });
+ // }
+
+ //遍历数组画圆
+ var circle = {
+ x: clickX,
+ y: clickY,
+ radius: 5,
+ color: 'yellow',
+ isSelected: false, //拖拽点的标记
+ };
+ this.circlesOfmonitor.push(circle);
+ this.allpointsOfmonitor = JSON.parse(JSON.stringify(this.circlesOfmonitor));
+ this.circlesOfmonitor[0].color = 'white';
+ for (var i = 0; i < this.circlesOfmonitor.length; i++) {
+ let circle = this.circlesOfmonitor[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.pointsOfmonitor.push(point);
+ context.beginPath();
+ context.lineWidth = 3;
+ //从起始点开始绘制
+ context.moveTo(this.pointsOfmonitor[0].x, this.pointsOfmonitor[0].y);
+ for (var i = 0; i < this.pointsOfmonitor.length; i++) {
+ context.lineTo(this.pointsOfmonitor[i].x, this.pointsOfmonitor[i].y);
+ }
+ context.closePath();
+ context.strokeStyle = 'black';
+ context.stroke();
+ }
+ isIntOfmonitor(x, y) {
+ if (!this.pointsOfmonitor[2]) {
+ return;
+ }
+ var pt = {
+ x: x,
+ y: y,
+ };
+ return this.PointInPoly(pt, this.pointsOfmonitor);
+ }
+ //射线法判断点位
+ PointInPolyOfmonitor(pt, poly) {
+ for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
+ ((poly[i].y <= pt.y && pt.y < poly[j].y) ||
+ (poly[j].y <= pt.y && pt.y < poly[i].y)) &&
+ pt.x <
+ ((poly[j].x - poly[i].x) * (pt.y - poly[i].y)) /
+ (poly[j].y - poly[i].y) +
+ poly[i].x &&
+ (c = !c);
+ return c;
+ }
+ //2023.2.18新增 绘制监控区域的多边形
+
+ //清空画布
+ clearCanvas() {
+ // 清空标绘箭头
+ this.arrowPoints = [];
+ this.arrowPointsOfSouth = []; //南 箭头的点的集合
+ this.arrowPointsOfWest = []; //西 箭头的点的集合
+ this.arrowPointsOfEast = []; //东 箭头的点的集合
+ this.arrowPointsOfNorth = []; //北 箭头的点的集合
+ // 清空标绘箭头
+ // 清空标绘矩形
+ this.oblongPoints = [];
+ // 清空标绘矩形
+ // 清空标绘多边形
+ this.points = [];
+ this.pointsOfmonitor = [];
+ this.circles = [];
+ this.circlesOfmonitor = [];
+ this.allpoints = [];
+ // 清空标绘多边形
+ let canvas = document.getElementById('canvas') as any;
+ let context = canvas.getContext('2d');
+
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null;
+ }
+
+ //清除某个标绘
+ clearCanvasItem(e, type) {
+ e.stopPropagation();
+ this.modal.confirm({
+ nzTitle: '确认要清除此标绘吗?',
+ nzOkText: '确定',
+ nzOkType: 'primary',
+ nzOkDanger: true,
+ nzOnOk: () => {
+ // this.clearCanvas()
+ if (type == 'arrow') {
+ this.arrowPoints = [];
+ }
+ if (type == 'arrowOfWest') {
+ this.arrowPointsOfWest = [];
+ }
+ if (type == 'oilUnloadingAreaTrue') {
+ for (let index = 0; index < this.oblongPoints.length; index++) {
+ const element = this.oblongPoints[index];
+ if (element.oilUnloadingArea) {
+ this.oblongPoints.splice(index, 1);
+ index--;
+ }
+ }
+ }
+ if (type == 'oilUnloadingAreaFalse') {
+ for (let index = 0; index < this.oblongPoints.length; index++) {
+ const element = this.oblongPoints[index];
+ if (!element.oilUnloadingArea) {
+ this.oblongPoints.splice(index, 1);
+ index--;
+ }
+ }
+ }
+
+ 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;
+ }
+
+ // if (type == 'polygon') {
+ // //进出口的多边形
+ // this.points = [];
+ // this.circles = [];
+ // }
+
+ this.initMark2(this.canvas, this.ctx); //初始化标绘图形
+ },
+ nzCancelText: '取消',
+ });
+ }
+
+ //根据已有数据重绘多边形
+ redrawPolygon(data, points, circles, context, color) {
+ data.forEach((element) => {
+ //遍历数组画圆
+ points = JSON.parse(JSON.stringify(circles));
+ circles[0].color = 'white';
+ for (var i = 0; i < circles.length; i++) {
+ let circle = circles[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();
+ }
+ // 画线
+ context.beginPath();
+ context.lineWidth = 3;
+ //从起始点开始绘制
+ context.moveTo(data[0].x, data[0].y);
+ for (var i = 0; i < data.length; i++) {
+ context.lineTo(data[i].x, data[i].y);
+ }
+ context.closePath();
+ //ontext.fillStyle = "rgb(2,100,30)";
+ //context.fill();
+ context.strokeStyle = color;
+ context.stroke();
+ });
+ }
+
+ //保存
+ save() {
+ console.log(this.camerasData.dimensionedPoints);
+ if (!this.camerasData.dimensionedPoints) {
+ this.camerasData.dimensionedPoints = {
+ polygon: [],
+ arrow: [],
+ arrowOfSouth: [],
+ arrowOfWest: [],
+ arrowOfEast: [],
+ arrowOfNorth: [],
+ rectangle: [],
+ polygonOfmonitor: [],
+ };
+ }
+ if (this.markType === 0) {
+ if (!this.points.length) {
+ this.message.create('warning', '绘制完整后可保存!');
+ return;
+ }
+ this.camerasData.dimensionedPoints.polygon = this.points;
+ } else if (this.markType === 2) {
+ if (this.arrowPoints.length == 1) {
+ this.message.create('warning', '请将箭头标绘完整!');
+ return;
+ }
+ if (
+ this.oblongPoints.length != 2 ||
+ !this.oblongPoints.find((item) => {
+ return item.oilUnloadingArea;
+ }) ||
+ !this.oblongPoints.find((item) => {
+ return !item.oilUnloadingArea;
+ })
+ ) {
+ this.message.create('warning', '绘制完整后可保存!');
+ return;
+ }
+ this.camerasData.dimensionedPoints.arrow = this.arrowPoints;
+
+ this.camerasData.dimensionedPoints.arrowOfSouth = this.arrowPointsOfSouth;
+ this.camerasData.dimensionedPoints.arrowOfWest = this.arrowPointsOfWest;
+ this.camerasData.dimensionedPoints.arrowOfEast = this.arrowPointsOfEast;
+ this.camerasData.dimensionedPoints.arrowOfNorth = this.arrowPointsOfNorth;
+
+ this.camerasData.dimensionedPoints.rectangle = this.oblongPoints;
+ } else if (this.markType === 3) {
+ if (this.arrowPoints.length != 2) {
+ this.message.create('warning', '绘制完整后可保存!');
+ return;
+ }
+ this.camerasData.dimensionedPoints.arrow = this.arrowPoints;
+ this.camerasData.dimensionedPoints.arrowOfSouth = this.arrowPointsOfSouth;
+ }
+
+ if (this.pointsOfmonitor.length !== 0) {
+ this.camerasData.dimensionedPoints.polygonOfmonitor =
+ this.pointsOfmonitor;
+ }
+
+ let paramsData = JSON.parse(JSON.stringify(this.camerasData));
+ paramsData.dimensionedPoints = JSON.stringify(paramsData.dimensionedPoints);
+ console.log('标点结果', this.camerasData.dimensionedPoints);
+ 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();
+ });
+ }
}