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

proxy.config.json

@@ -1,6 +1,6 @@
 {
   "/api": {
-    "target": "https://znaq.sinochemoilmarketing.com/",
+    "target": "http://121.36.37.70:8906/",
     "测试1": "http://121.36.37.70:8906/",
     "测试2": "https://znaq.sinochemoilmarketing.com/",
     "测试3": "https://gas.anxincloud.cn/",
@@ -8,7 +8,7 @@
     "changeOrigin": true
   },
   "/signalr": {
-    "target": "https://znaq.sinochemoilmarketing.com/",
+    "target": "http://121.36.37.70:8906/",
     "secure": false,
     "ws": true,
     "logLevel": "debug"

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

@@ -33,12 +33,18 @@
     <!-- <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">
         <ng-container *ngIf="isImage; else elseTemplate2">
           <img id="img" [src]="imgUrl" alt="">
           <canvas *ngIf="isAnxin" [width]="canvasWidth" [height]="canvasHeight"
             [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas"></canvas>
+          <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 #elseTemplate2>
           <iframe style="margin-bottom: 12px;" width="100%" height="100%" [src]="fileUrl" frameborder="0"></iframe>

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

@@ -97,6 +97,7 @@
   flex-direction: column;
   min-height: 550px;
   max-height: 550px;
+
   .imgbox {
     flex: 1;
     box-sizing: border-box;
@@ -125,6 +126,31 @@
       height: 550px;
       width: auto;
     }
+
+    .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;
+    }
   }
 
   .vediobox {

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

@@ -69,6 +69,10 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   ];
   userName; //登录账号的用户名
   isShowAxOtherRegion; //控制哪些用户可以看到ax全部
+
+  isCarStop = false;
+
+  pageIndex = 0;
   ngOnInit(): void {
     console.log("传进来的信息", this.data);
     // 安信框选
@@ -78,6 +82,11 @@ export class GetOutOfLineDetailsComponent implements OnInit {
     } else {
       this.isShowAxOtherRegion = false;
     }
+    //进出口停车判断
+    if (this.data.violation.eventSystemName == "进出口停车") {
+      this.isCarStop = true;
+    }
+    //是否是安信产生的预警进行判断
     if (
       this.data.violatedItemSnapshot &&
       this.data.violation.eventSystemName.indexOf("证照") == -1 &&
@@ -122,7 +131,15 @@ export class GetOutOfLineDetailsComponent implements OnInit {
     this.details = this.data.content1;
     this.vedioUrl = this.data.violateVideo;
     this.content = this.data.handleRecord;
-    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;
+    }
 
     if (this.imgUrl) {
       if (this.pubilcMethods.getFileType(this.imgUrl) == "img") {
@@ -174,7 +191,41 @@ export class GetOutOfLineDetailsComponent implements OnInit {
       this.isMisinformation = false;
     }
   }
+  //进出口停车图片翻页
+  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;