[新增]增加全选按钮

src/app/pages/get-out-of-line-details/get-out-of-line-details.component.html

@@ -17,7 +17,10 @@
     预警详情：{{details}}
   </div>
   <div class="typecheckbox" *ngIf="isAnxin">
-    <label *ngFor="let item of this.legendList" nz-checkbox [(ngModel)]="item.checked"
+    <label *ngIf="legendList.length !== 0" nz-checkbox [(ngModel)]="checkedAll" (ngModelChange)="typeChangeAll()">
+      全选
+    </label>
+    <label *ngFor="let item of legendList" nz-checkbox [(ngModel)]="item.checked"
       (ngModelChange)="typeChange(item)">
       <div style="width: 10px;height: 10px;display: inline-block;" [ngStyle]="{'background': typeArr[item.id].color}">
       </div>
@@ -30,7 +33,8 @@
       <ng-container *ngIf="imgUrl; else elseTemplate">
         <img [id]="'img'+data.id" [src]="imgUrl" alt="" (error)="imgErr()">
         <canvas *ngIf="isAnxin" [width]="canvasWidth" [height]="canvasHeight"
-          [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" class="canvas" [id]="'canvas'+data.id"></canvas>
+          [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" class="canvas"
+          [id]="'canvas'+data.id"></canvas>
         <span *ngIf="isSrcError" class="SrcError">
           图片资源未找到
         </span>

src/app/pages/get-out-of-line-details/get-out-of-line-details.component.ts

@@ -55,6 +55,8 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   isCarStop = false;
 
   pageIndex = 0;
+
+  checkedAll = true;
   ngOnInit(): void {
     this.userName = JSON.parse(sessionStorage.getItem("userdata")).userName;
     console.log("预警数据", this.data);
@@ -223,6 +225,21 @@ export class GetOutOfLineDetailsComponent implements OnInit {
     this.ctx.drawImage(imgBg, 0, 0, canvas.width, canvas.height);
     this.strokeRect(this.currentCoordinate);
   }
+  typeChangeAll() {
+    if (this.checkedAll) {
+      this.legendList.forEach((element) => {element.checked = true;});
+      this.currentCoordinate = this.coordinate;
+    } else {
+      this.legendList.forEach((element) => {element.checked = false;});
+      this.currentCoordinate = [];
+    }
+
+    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+    let imgBg: any = document.getElementById("img" + this.data.id);
+    const canvas: any = document.getElementById("canvas" + this.data.id);
+    this.ctx.drawImage(imgBg, 0, 0, canvas.width, canvas.height);
+    this.strokeRect(this.currentCoordinate);
+  }
 
   downImg() {
     const canvasDom: any = document.getElementById("canvas" + this.data.id);