[完善]修复同时打开多个预警弹窗预警框不显示的问题

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

@@ -34,9 +34,10 @@
     <div [hidden]="!(selectedType == 'img')" class="imgbox">
       <ng-container *ngIf="imgUrl; else elseTemplate">
         <ng-container *ngIf="isImage; else elseTemplate2">
-          <img id="img" [src]="imgUrl" alt="">
+          <img [id]="'img'+data.id" [src]="imgUrl" alt="">
           <canvas *ngIf="isAnxin" [width]="canvasWidth" [height]="canvasHeight"
-            [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas"></canvas>
+            [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" class="canvas"
+            [id]="'canvas'+data.id"></canvas>
           <div *ngIf="isCarStop && isAnxin" class="pageturning lastpage" (click)="pageturning('last')">
             <i nz-icon nzType="left" nzTheme="outline"></i>
           </div>

src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss

@@ -115,7 +115,7 @@
       flex: 1;
     }
 
-    #canvas {
+    .canvas {
       position: absolute;
       left: 50%;
       top: 50%;

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

@@ -215,7 +215,7 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   //清空画布并且重新标绘
   clearCanvas(url) {
     this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-    let imgBg: any = document.getElementById("img");
+    let imgBg: any = document.getElementById("img" + this.data.id);
     imgBg.src = url;
     imgBg.onload = () => {
       window.setTimeout(() => {
@@ -229,12 +229,12 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   canvasHeight = 0;
   ctx;
   canvasLabel() {
-    let imgBg: any = document.getElementById("img");
+    let imgBg: any = document.getElementById("img" + this.data.id);
     imgBg.onload = () => {
       console.log("图片加载完毕...");
       this.canvasWidth = imgBg.offsetWidth;
       this.canvasHeight = imgBg.offsetHeight;
-      const canvas: any = document.querySelector("#canvas");
+      const canvas: any = document.getElementById("canvas" + this.data.id);
       this.ctx = canvas.getContext("2d");
       const cWidth = canvas.width,
         cHeight = canvas.height;
@@ -318,14 +318,14 @@ export class GetOutOfLineDetailsComponent implements OnInit {
       );
     }
     this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-    let imgBg: any = document.getElementById("img");
+    let imgBg: any = document.getElementById("img" + this.data.id);
-    const canvas: any = document.querySelector("#canvas");
+    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.querySelector("#canvas");
+    const canvasDom: any = document.getElementById("canvas" + this.data.id);
     const imageData = canvasDom.toDataURL("image/png"); //返回base64的URL
     const elink = document.createElement("a");
     elink.download = "图片";