From 45406d5f28524c87b70ed7eb04e17b473b27325c Mon Sep 17 00:00:00 2001
From: SHAOJIAHAO <55341701@qq.com>
Date: Thu, 25 May 2023 11:13:10 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E9=94=99=E8=AF=AF=E6=A1=86?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E5=B7=A6=E4=B8=8A=E8=A7=92=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=89=B2=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../get-out-of-line-details.component.html            |  4 ++--
 .../get-out-of-line-details.component.scss            | 10 +++++++++-
 .../get-out-of-line-details.component.ts              | 11 +++++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/get-out-of-line-details/get-out-of-line-details.component.html b/src/app/pages/get-out-of-line-details/get-out-of-line-details.component.html
index b53c326..d43331e 100644
--- a/src/app/pages/get-out-of-line-details/get-out-of-line-details.component.html
+++ b/src/app/pages/get-out-of-line-details/get-out-of-line-details.component.html
@@ -31,12 +31,12 @@
         <img id="img" [src]="imgUrl" alt="" (error)="imgErr()">
         <canvas *ngIf="isAnxin" [width]="canvasWidth" [height]="canvasHeight"
           [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas"></canvas>
-        <span *ngIf="isSrcError">
+        <span *ngIf="isSrcError" class="SrcError">
           图片资源未找到
         </span>
       </ng-container>
       <ng-template #elseTemplate>
-        暂无图片
+        <span class="SrcError">暂无图片</span>
       </ng-template>
     </div>
     <div *ngIf="selectedType == 'video'" class="vediobox">
diff --git a/src/app/pages/get-out-of-line-details/get-out-of-line-details.component.scss b/src/app/pages/get-out-of-line-details/get-out-of-line-details.component.scss
index 19ca285..f1a2e43 100644
--- a/src/app/pages/get-out-of-line-details/get-out-of-line-details.component.scss
+++ b/src/app/pages/get-out-of-line-details/get-out-of-line-details.component.scss
@@ -65,7 +65,8 @@
 .typecheckbox {
   box-sizing: border-box;
   padding: 0 12px;
-  margin-bottom:6px;
+  margin-bottom: 6px;
+
   label {
     color: #fff;
   }
@@ -101,6 +102,13 @@
       max-width: 100%;
       max-height: 100%;
     }
+
+    .SrcError {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 
   .imgboxAX {
diff --git a/src/app/pages/get-out-of-line-details/get-out-of-line-details.component.ts b/src/app/pages/get-out-of-line-details/get-out-of-line-details.component.ts
index fdea37d..5706050 100644
--- a/src/app/pages/get-out-of-line-details/get-out-of-line-details.component.ts
+++ b/src/app/pages/get-out-of-line-details/get-out-of-line-details.component.ts
@@ -69,6 +69,7 @@ export class GetOutOfLineDetailsComponent implements OnInit {
       if (!this.legendList.some((e) => e.id == checkboxArr[i].id))
         this.legendList.push(checkboxArr[i]);
     }
+
     this.details = this.data.content1;
     this.imgUrl = this.data.violateImage;
     this.vedioUrl = this.data.violateVideo;
@@ -122,6 +123,16 @@ export class GetOutOfLineDetailsComponent implements OnInit {
         endPoint[0] - startPoint[0],
         endPoint[1] - startPoint[1]
       );
+      //如果当前矩形区域为错误区域，则左上角增加色块
+      if (item.error) {
+        this.ctx.fillStyle = this.typeArr[item.id].color;
+        this.ctx.fillRect(
+          startPoint[0],
+          startPoint[1],
+          10,
+          10
+        );
+      }
       this.ctx.fillStyle = this.typeArr[item.id].color;
       this.ctx.font = "16px Verdana";
       let name = "";