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

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

@@ -28,9 +28,9 @@
   <div class="content">
     <div [hidden]="!(selectedType == 'img')" class="imgbox">
       <ng-container *ngIf="imgUrl; else elseTemplate">
-        <img id="img" [src]="imgUrl" alt="" (error)="imgErr()">
+        <img [id]="'img'+data.id" [src]="imgUrl" alt="" (error)="imgErr()">
         <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>
         <span *ngIf="isSrcError" class="SrcError">
           图片资源未找到
         </span>

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

@@ -93,7 +93,7 @@
     position: relative;
     margin-bottom: 12px;
 
-    #canvas {
+    .canvas {
       position: absolute;
       left: 50%;
       top: 50%;

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

@@ -125,7 +125,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(() => {
@@ -138,12 +138,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;
@@ -216,14 +216,14 @@ export class GetOutOfLineDetailsComponent implements OnInit {
     }
 
     this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-    let imgBg: any = document.getElementById("img");
-    const canvas: any = document.querySelector("#canvas");
+    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.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 = "图片";

src/app/pages/home/home.component.ts

@@ -159,18 +159,6 @@ export class HomeComponent implements OnInit {
   }
   messageId = [];
   receiptOfNotification(userNotification) {
-    // console.log('语音播报')
-    // if (!window.speechSynthesis) {
-    //   this.message.create("warning", `该游览器不支持语音播报`);
-    // } else {
-    //   let speakMsg = new SpeechSynthesisUtterance(
-    //     "请注意,收到一条新的预警信息,请及时处理!"
-    //   );
-    //   speakMsg.lang = "zh-CN";
-    //   speakMsg.rate = 1;
-    //   speakMsg.pitch = 1.5;
-    //   window.speechSynthesis.speak(speakMsg);
-    // }
     this.Sound()
     let obj = {
       id: userNotification.notification.entityId,
@@ -367,13 +355,11 @@ export class HomeComponent implements OnInit {
             });
           }
         }, 0);
-
         this.messageId.forEach((element) => {
           if (element.id == item.notification.entityId) {
             this.notificationService.remove(element.messageId);
           }
         });
-        // this.readMess(item.notification.id)
       });
   }