[新增]预警图片查看大图

package.json

@@ -3,7 +3,7 @@
     "version": "0.0.0",
     "scripts": {
         "ng": "ng",
-        "start": "ng serve --proxy-config  proxy.config.json  --open --port 1119",
+        "start": "ng serve --proxy-config  proxy.config.json  --open --port 1119 --host 192.168.1.82",
         "build": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --configuration production",
         "test": "ng test",
         "lint": "ng lint",

proxy.config.json

@@ -8,7 +8,7 @@
     "changeOrigin": true
   },
   "/signalr": {
-    "target": "http://121.36.37.70:8906/",
+    "target": "https://znaq.sinochemoilmarketing.com/",
     "secure": false,
     "ws": true,
     "logLevel": "debug"

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

@@ -23,9 +23,10 @@
     <ng-container *ngIf="isShowAxOtherRegion">
       <label *ngFor="let item of this.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 style="width: 10px;height: 10px;display: inline-block;"
+          [ngStyle]="{'background': typeArr[item.id]?.color || 'yellow'}">
         </div>
-        {{typeArr[item.id].name}}
+        {{typeArr[item.id]?.name || '未定义'}}
       </label>
     </ng-container>
     <!-- <button nz-button nzType="primary" (click)="downImg()">导出图片</button> -->
@@ -37,7 +38,7 @@
           <img [id]="'img'+data.id" [src]="imgUrl" alt="">
           <canvas *ngIf="isAnxin" [width]="canvasWidth" [height]="canvasHeight"
             [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" class="canvas"
-            [id]="'canvas'+data.id"></canvas>
+            [id]="'canvas'+data.id" (click)="viewImg($event)"></canvas>
           <div *ngIf="isCarStop && isAnxin" class="pageturning lastpage" (click)="pageturning('last')">
             <i nz-icon nzType="left" nzTheme="outline"></i>
           </div>
@@ -62,7 +63,7 @@
       </ng-container>
       <ng-template #elseTemplate3>
         暂无视频
-      </ng-template>
+      </ng-template> 
     </div>
   </div>
   <p style="margin-bottom: 0px;margin-top: 3px;box-sizing: border-box;padding: 0 12px;"

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

@@ -233,24 +233,32 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   ctx;
   canvasLabel() {
     let imgBg: any = document.getElementById("img" + this.data.id);
-    imgBg.onload = () => {
+    const drawImageAndRect = () => {
-      console.log("图片加载完毕...");
       this.canvasWidth = imgBg.offsetWidth;
       this.canvasHeight = imgBg.offsetHeight;
       const canvas: any = document.getElementById("canvas" + this.data.id);
-      this.ctx = canvas.getContext("2d");
-      const cWidth = canvas.width,
-        cHeight = canvas.height;
       setTimeout(() => {
-        console.log("以图画底,描绘预警框...");
+        this.ctx = canvas.getContext("2d");
-        // 以图画底
+        const cWidth = canvas.width,
+          cHeight = canvas.height;
+        console.log(1, cWidth, cHeight);
         this.ctx.drawImage(imgBg, 0, 0, cWidth, cHeight);
         this.strokeRect(this.currentCoordinate);
-      }, 100);
+      }, 0);
     };
+    if (imgBg.complete) {
+      console.log("图片已经加载, 直接绘制...");
+      drawImageAndRect(); // 如果图片已加载，直接调用绘制函数
+    } else {
+      imgBg.onload = () => {
+        console.log("图片加载完毕...");
+        drawImageAndRect(); // 图片加载完成后，调用绘制函数
+      };
+    }
   }
 
   strokeRect(data) {
+    console.log(data);
     data.forEach((item) => {
       let startPoint = [
         Math.round(this.canvasWidth * item.box[0]),
@@ -261,7 +269,7 @@ export class GetOutOfLineDetailsComponent implements OnInit {
         Math.round(this.canvasHeight * item.box[3]),
       ];
       if (this.isShowAxOtherRegion) {
-        this.ctx.strokeStyle = this.typeArr[item.id].color;
+        this.ctx.strokeStyle = this.typeArr[item.id]?.color || "yellow";
         this.ctx.lineWidth = 3;
         this.ctx.strokeRect(
           startPoint[0],
@@ -271,16 +279,16 @@ export class GetOutOfLineDetailsComponent implements OnInit {
         );
         //如果当前矩形区域为错误区域，则左上角增加色块
         if (item.error) {
-          this.ctx.fillStyle = this.typeArr[item.id].color;
+          this.ctx.fillStyle = this.typeArr[item.id]?.color || "yellow";
           this.ctx.fillRect(startPoint[0], startPoint[1], 10, 10);
         }
-        this.ctx.fillStyle = this.typeArr[item.id].color;
+        this.ctx.fillStyle = this.typeArr[item.id]?.color || "yellow";
         this.ctx.font = "16px Verdana";
         let name = "";
         if (this.isShowAxOtherRegion) {
-          name = this.typeArr[item.id].name + item.scores;
+          name = this.typeArr[item.id]?.name || "未定义" + item.scores;
         } else {
-          name = this.typeArr[item.id].name;
+          name = this.typeArr[item.id]?.name || "未定义";
         }
         this.ctx.fillText(
           name,
@@ -291,7 +299,7 @@ export class GetOutOfLineDetailsComponent implements OnInit {
         );
       } else {
         if (item.error) {
-          this.ctx.strokeStyle = this.typeArr[item.id].color;
+          this.ctx.strokeStyle = this.typeArr[item.id]?.color || "yellow";
           this.ctx.lineWidth = 3;
           this.ctx.strokeRect(
             startPoint[0],
@@ -299,9 +307,9 @@ export class GetOutOfLineDetailsComponent implements OnInit {
             endPoint[0] - startPoint[0],
             endPoint[1] - startPoint[1]
           );
-          this.ctx.fillStyle = this.typeArr[item.id].color;
+          this.ctx.fillStyle = this.typeArr[item.id]?.color || "yellow";
           this.ctx.fillRect(startPoint[0], startPoint[1], 10, 10);
-          this.ctx.fillStyle = this.typeArr[item.id].color;
+          this.ctx.fillStyle = this.typeArr[item.id]?.color || "yellow";
           this.ctx.font = "16px Verdana";
         }
       }
@@ -422,7 +430,9 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   }
 
   //查看图片
-  viewImg(url) {
+  viewImg(e) {
+    // return;
+    const url = e.target.toDataURL();
     let dom = document.getElementById(`viewerjs`);
     let pObjs = dom.childNodes;
     let node = document.createElement("img");

src/app/service/pattern.service.ts

@@ -4,9 +4,9 @@ import { Injectable } from "@angular/core";
   providedIn: "root",
 })
 export class PatternService {
-  static isProd: any = false;
+  static isProd: any = true;
 
   constructor() {}
 
-  public isProd: boolean = false; //是否是生产环境
+  public isProd: boolean = true; //是否是生产环境
 }