[新增]安信进出口停车预警增加一张图片

proxy.config.json

@@ -1,13 +1,13 @@
 {
   "/api": {
-    "target": "http://10.156.134.53:8200/",
+    "target": "http://121.36.37.70:8200/",
     "测试": "http://121.36.37.70:8200/",
     "生产": "http://10.156.134.53:8200/",
     "secure": false,
     "changeOrigin": true
   },
   "/signalr": {
-    "target": "http://10.156.134.53:8200/",
+    "target": "http://121.36.37.70:8200/",
     "secure": false,
     "ws": true,
     "logLevel": "debug"

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

@@ -26,7 +26,7 @@
     <button nz-button nzType="primary" (click)="downImg()">导出图片</button>
   </div>
   <div class="content">
-    <div [hidden]="!(selectedType == 'img')" class="imgbox" [ngClass]="{'imgboxAX': isAnxin}">
+    <div [hidden]="!(selectedType == 'img')" class="imgbox">
       <ng-container *ngIf="imgUrl; else elseTemplate">
         <img id="img" [src]="imgUrl" alt="" (error)="imgErr()">
         <canvas *ngIf="isAnxin" [width]="canvasWidth" [height]="canvasHeight"
@@ -34,6 +34,12 @@
         <span *ngIf="isSrcError" class="SrcError">
           图片资源未找到
         </span>
+        <div *ngIf="isCarStop && isAnxin" class="pageturning lastpage" (click)="pageturning('last')">
+          <i nz-icon nzType="left" nzTheme="outline"></i>
+        </div>
+        <div *ngIf="isCarStop && isAnxin" class="pageturning nextpage" (click)="pageturning('next')">
+          <i nz-icon nzType="right" nzTheme="outline"></i>
+        </div>
       </ng-container>
       <ng-template #elseTemplate>
         <span class="SrcError">暂无图片</span>

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

@@ -64,6 +64,7 @@
   box-sizing: border-box;
   padding: 0 12px;
   margin-bottom: 6px;
+
   label {
     color: #fff;
   }
@@ -80,6 +81,7 @@
   justify-content: center;
   min-height: 550px;
   max-height: 550px;
+
   .imgbox {
     box-sizing: border-box;
     padding: 0 12px;
@@ -102,12 +104,38 @@
       height: 550px;
       width: auto;
     }
+
     .SrcError {
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
     }
+
+    .pageturning {
+      width: 50px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      border-radius: 3px;
+      background: rgba(128, 128, 128, 0.3);
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+
+    .pageturning:hover {
+      color: #40a9ff;
+    }
+
+    .lastpage {
+      left: 20px;
+    }
+
+    .nextpage {
+      right: 20px;
+    }
   }
 
 
@@ -121,6 +149,7 @@
     box-sizing: border-box;
     padding: 0 12px;
     margin-bottom: 12px;
+
     video {
       height: 550px;
       width: auto;

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

@@ -48,11 +48,23 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   ];
 
   userName;
+
+  isCarStop = false;
+
+  pageIndex = 0;
   ngOnInit(): void {
     this.userName = JSON.parse(sessionStorage.getItem("userdata")).userName;
+    console.log("预警数据", this.data);
+    //进出口停车判断
+    if (this.data.violation.eventSystemName == "进出口停车") {
+      this.isCarStop = true;
+    }
+    //是否是安信产生的预警进行判断
     if (this.data.violatedItemSnapshot) {
       this.isAnxin = true;
     }
+
+    //生成安信产生预警上面checkbox列表
     let dataArr = [];
     for (const key in JSON.parse(this.data.violatedItemSnapshot)) {
       const element = JSON.parse(this.data.violatedItemSnapshot)[key];
@@ -60,20 +72,26 @@ export class GetOutOfLineDetailsComponent implements OnInit {
     }
     this.coordinate = dataArr;
     this.currentCoordinate = JSON.parse(JSON.stringify(this.coordinate));
-    console.log("坐标信息", this.coordinate);
-
     let checkboxArr = [];
     this.coordinate.forEach((element) => {
       checkboxArr.push({ id: element.id, checked: true });
     });
-
     for (let i = 0; i < checkboxArr.length; i++) {
       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;
+
+    if (this.isCarStop && this.isAnxin) {
+      if (!this.data.violateImage2) {
+        this.data.violateImage2 = this.data.violateImage;
+      }
+      this.imgUrl = this.data.violateImage2;
+    } else {
+      this.imgUrl = this.data.violateImage;
+    }
+
     this.vedioUrl = this.data.violateVideo;
     this.content = this.data.handleRecord;
 
@@ -83,7 +101,41 @@ export class GetOutOfLineDetailsComponent implements OnInit {
       }
     }, 0);
   }
+  //进出口停车图片翻页
+  pageturning(type) {
+    if (type == "last") {
+      if (this.pageIndex === 0) {
+        this.message.create("info", "已到第一张图片");
+      } else {
+        this.pageIndex--;
+        this.clearCanvas(this.data.violateImage2);
+      }
+    }
+    if (type == "next") {
+      if (this.pageIndex === 1) {
+        this.message.create("info", "图片已经到底了");
+      } else {
+        this.pageIndex++;
+        this.clearCanvas(this.data.violateImage);
+      }
+    }
+  }
 
+  //清空画布并且重新标绘
+  clearCanvas(url) {
+    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+    var img = new Image();
+    img.src = url;
+    img.onload = () => {
+      this.canvasWidth = img.width;
+      this.canvasHeight = img.height;
+      window.setTimeout(() => {
+        // 加载图片
+        this.ctx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight);
+        this.strokeRect(this.currentCoordinate);
+      }, 0);
+    };
+  }
   canvasWidth = 0;
   canvasHeight = 0;
   ctx;
@@ -128,12 +180,7 @@ export class GetOutOfLineDetailsComponent implements OnInit {
       //如果当前矩形区域为错误区域，则左上角增加色块
       if (item.error) {
         this.ctx.fillStyle = this.typeArr[item.id].color;
-        this.ctx.fillRect(
-          startPoint[0],
-          startPoint[1],
-          10,
-          10
-        );
+        this.ctx.fillRect(startPoint[0], startPoint[1], 10, 10);
       }
       this.ctx.fillStyle = this.typeArr[item.id].color;
       this.ctx.font = "16px Verdana";