From 065b41de1781e9d097f2adc3f5855011d9bb3a83 Mon Sep 17 00:00:00 2001
From: Sjh <55341701@qq.com>
Date: Sun, 18 Feb 2024 09:48:00 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E9=A2=84=E8=AD=A6=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=9F=A5=E7=9C=8B=E5=A4=A7=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 proxy.config.json                             |  2 +-
 .../get-out-of-line-details.component.html    |  9 ++--
 .../get-out-of-line-details.component.ts      | 44 ++++++++++++-------
 src/app/service/pattern.service.ts            |  4 +-
 5 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index d10cd3e..2ff5d11 100644
--- a/package.json
+++ b/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",
diff --git a/proxy.config.json b/proxy.config.json
index 07408fe..f1d1515 100644
--- a/proxy.config.json
+++ b/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"
diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
index 6a301a4..cb44498 100644
--- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
+++ b/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;"
diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
index 4350faf..f1e6913 100644
--- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
+++ b/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 = () => {
-      console.log("图片加载完毕...");
+    const drawImageAndRect = () => {
       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");
diff --git a/src/app/service/pattern.service.ts b/src/app/service/pattern.service.ts
index 3572f1b..32bde12 100644
--- a/src/app/service/pattern.service.ts
+++ b/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; //是否是生产环境
 }