[完善]审核页面证照预警增加canvas蒙层

proxy.config.json

@@ -1,6 +1,6 @@
 {
   "/api": {
-    "target": "http://121.36.37.70:8906/",
+    "target": "https://znaq.sinochemoilmarketing.com/",
     "测试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": "http://121.36.37.70:8906/",
+    "target": "https://znaq.sinochemoilmarketing.com/",
     "secure": false,
     "ws": true,
     "logLevel": "debug"

src/app/pages/audit/audit-ing/appeal-details/appeal-details.component.html

@@ -17,8 +17,13 @@
         <p>提交时间: {{data.committedTime | date:"yyyy-MM-dd HH:mm:ss"}}</p>
         <div class="cutoffrule"></div>
         <p>预警图片:</p>
-        <img (click)="viewImg(data.itemData.ViolateImage)" style="width: 100%;height: auto;color: #C4E2FC;"
-            [src]="data.itemData.ViolateImage" alt="预警图片">
+        <div class="imgbox">
+            <img id="img" (click)="viewImg(data.itemData.ViolateImage)" style="width: 100%;height: auto;color: #C4E2FC;"
+                [src]="data.itemData.ViolateImage" alt="预警图片">
+            <canvas (click)="canvasLook(data)" *ngIf="isAnxin" [width]="canvasWidth" [height]="canvasHeight"
+                    [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas"></canvas>
+        </div>
+
         <div class="cutoffrule"></div>
         <p>申诉原因: {{data.commitReason}}</p>
         <div class="cutoffrule"></div>

src/app/pages/audit/audit-ing/appeal-details/appeal-details.component.scss

@@ -45,6 +45,17 @@
       justify-content: space-between;
       align-items: center;
     }
+
+    .imgbox{
+      position: relative;
+      #canvas {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+  
+    }
   }
 
   p {

src/app/pages/audit/audit-ing/appeal-details/appeal-details.component.ts

@@ -5,6 +5,7 @@ import { NzModalRef, NzModalService } from "ng-zorro-antd/modal";
 import { VideoPlayComponent } from "src/app/component/video-play/video-play.component";
 import { PublicMethodsService } from "src/app/service/publicMethods.service";
 import Viewer from "viewerjs";
+import { ImgLookComponent } from "../../img-look/img-look.component";
 @Component({
   selector: "app-appeal-details",
   templateUrl: "./appeal-details.component.html",
@@ -18,6 +19,7 @@ export class AppealDetailsComponent implements OnInit {
     private message: NzMessageService,
     private pubilcMethods: PublicMethodsService,
     private modalChild: NzModalService,
+    private modalF: NzModalService,
     private viewContainerRef: ViewContainerRef
   ) {}
 
@@ -30,6 +32,8 @@ export class AppealDetailsComponent implements OnInit {
     lastModificationTime: "",
   };
   organizationName;
+  isAnxin = false;
+  coordinate; //标绘坐标
   ngOnInit(): void {
     console.log("申诉详情", this.data);
     if (this.data.auditType == 5) {
@@ -44,6 +48,69 @@ export class AppealDetailsComponent implements OnInit {
           console.log("申诉预警详情", this.appealData);
         });
     }
+
+    if (this.data.itemData.ViolatedItemSnapshot && this.data.auditType == 5) {
+      this.isAnxin = true;
+      if (this.isAnxin) {
+        let dataArr = [];
+        for (const key in JSON.parse(this.data.itemData.ViolatedItemSnapshot)) {
+          const element = JSON.parse(this.data.itemData.ViolatedItemSnapshot)[
+            key
+          ];
+          if (element.error) {
+            dataArr.push(element);
+          }
+        }
+        console.log("标绘坐标", dataArr);
+        this.coordinate = dataArr;
+        setTimeout(() => {
+          this.canvasLabel();
+        }, 0);
+      }
+    }
+  }
+
+  canvasWidth = 0;
+  canvasHeight = 0;
+  ctx;
+  canvasLabel() {
+    let imgBg: any = document.getElementById("img");
+    imgBg.onload = () => {
+      this.canvasWidth = imgBg.offsetWidth;
+      this.canvasHeight = imgBg.offsetHeight;
+      const img = new Image();
+      img.src = imgBg.src;
+      img.onload = () => {
+        const canvas: any = document.querySelector("#canvas");
+        this.ctx = canvas.getContext("2d");
+        const cWidth = canvas.width,
+          cHeight = canvas.height;
+        // 以图画底
+        this.ctx.drawImage(img, 0, 0, cWidth, cHeight);
+        this.strokeRect(this.coordinate);
+      };
+    };
+  }
+
+  strokeRect(data) {
+    data.forEach((item) => {
+      let startPoint = [
+        Math.round(this.canvasWidth * item.box[0]),
+        Math.round(this.canvasHeight * item.box[1]),
+      ];
+      let endPoint = [
+        Math.round(this.canvasWidth * item.box[2]),
+        Math.round(this.canvasHeight * item.box[3]),
+      ];
+      this.ctx.strokeStyle = "red";
+      this.ctx.lineWidth = 3;
+      this.ctx.strokeRect(
+        startPoint[0],
+        startPoint[1],
+        endPoint[0] - startPoint[0],
+        endPoint[1] - startPoint[1]
+      );
+    });
   }
   destroyModal() {
     this.modal.destroy({ data: "this the result data" });
@@ -69,6 +136,31 @@ export class AppealDetailsComponent implements OnInit {
     }, 0);
   }
 
+  //canvasLook()
+  canvasLook(data) {
+    const modal = this.modalF.create({
+      nzContent: ImgLookComponent,
+      nzWrapClassName: "vertical-center-modal",
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth:
+        document.documentElement.clientHeight < 650 ||
+        document.documentElement.clientWidth < 1400
+          ? 1000
+          : 1200,
+      nzClosable: false,
+      nzClassName: "modelnobg",
+      nzBodyStyle: {
+        "border-radius": "0px",
+        padding: "0px",
+      },
+      nzComponentParams: {
+        data: data,
+      },
+      nzFooter: null
+    });
+    const instance = modal.getContentComponent();
+  }
+
   //查看文件
   lookFile(item) {
     if (!item) {

src/app/pages/audit/audit-ing/audit-dispose/audit-dispose.component.html

@@ -87,8 +87,12 @@
             <p>提交时间: &nbsp;&nbsp;{{data.committedTime | date:"yyyy-MM-dd HH:mm:ss"}}</p>
             <div class="cutoffrule"></div>
             <p>预警图片:</p>
-            <img (click)="viewImg(data.itemData.ViolateImage)" style="width: 100%;height: auto;color: #C4E2FC;"
-                [src]="data.itemData.ViolateImage" alt="预警图片">
+            <div class="imgbox">
+                <img id="img" (click)="viewImg(data.itemData.ViolateImage)"
+                    style="width: 100%;height: auto;color: #C4E2FC;" [src]="data.itemData.ViolateImage" alt="预警图片">
+                <canvas (click)="canvasLook(data)" *ngIf="isAnxin" [width]="canvasWidth" [height]="canvasHeight"
+                    [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas"></canvas>
+            </div>
             <div class="cutoffrule"></div>
             <p>申诉说明: &nbsp;&nbsp;{{data.commitReason}}</p>
             <div class="cutoffrule"></div>

src/app/pages/audit/audit-ing/audit-dispose/audit-dispose.component.scss

@@ -46,6 +46,18 @@
       align-items: center;
     }
 
+    .imgbox {
+      position: relative;
+
+      #canvas {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+    }
+
     .btnbox {
       width: 100%;
       margin: 10px 0;

src/app/pages/audit/audit-ing/audit-dispose/audit-dispose.component.ts

@@ -9,6 +9,7 @@ import {
 import { HttpClient } from "@angular/common/http";
 import { PublicMethodsService } from "src/app/service/publicMethods.service";
 import { VideoPlayComponent } from "src/app/component/video-play/video-play.component";
+import { ImgLookComponent } from "../../img-look/img-look.component";
 
 @Component({
   selector: "app-audit-dispose",
@@ -36,6 +37,8 @@ export class AuditDisposeComponent implements OnInit {
   appealData: any = {
     appealAttachments: [],
   };
+  isAnxin = false;
+  coordinate;
   ngOnInit(): void {
     console.log("审批信息", this.data);
     if (this.data.auditType == 4) {
@@ -58,8 +61,70 @@ export class AuditDisposeComponent implements OnInit {
           this.appealData = data.result;
         });
     }
+
+    if (this.data.itemData.ViolatedItemSnapshot && this.data.auditType == 5) {
+      this.isAnxin = true;
+      if (this.isAnxin) {
+        let dataArr = [];
+        for (const key in JSON.parse(this.data.itemData.ViolatedItemSnapshot)) {
+          const element = JSON.parse(this.data.itemData.ViolatedItemSnapshot)[
+            key
+          ];
+          if (element.error) {
+            dataArr.push(element);
+          }
+        }
+        console.log("标绘坐标", dataArr);
+        this.coordinate = dataArr;
+        setTimeout(() => {
+          this.canvasLabel();
+        }, 0);
+      }
+    }
+  }
+
+  canvasWidth = 0;
+  canvasHeight = 0;
+  ctx;
+  canvasLabel() {
+    let imgBg: any = document.getElementById("img");
+    imgBg.onload = () => {
+      this.canvasWidth = imgBg.offsetWidth;
+      this.canvasHeight = imgBg.offsetHeight;
+      const img = new Image();
+      img.src = imgBg.src;
+      img.onload = () => {
+        const canvas: any = document.querySelector("#canvas");
+        this.ctx = canvas.getContext("2d");
+        const cWidth = canvas.width,
+          cHeight = canvas.height;
+        // 以图画底
+        this.ctx.drawImage(img, 0, 0, cWidth, cHeight);
+        this.strokeRect(this.coordinate);
+      };
+    };
   }
 
+  strokeRect(data) {
+    data.forEach((item) => {
+      let startPoint = [
+        Math.round(this.canvasWidth * item.box[0]),
+        Math.round(this.canvasHeight * item.box[1]),
+      ];
+      let endPoint = [
+        Math.round(this.canvasWidth * item.box[2]),
+        Math.round(this.canvasHeight * item.box[3]),
+      ];
+      this.ctx.strokeStyle = "red";
+      this.ctx.lineWidth = 3;
+      this.ctx.strokeRect(
+        startPoint[0],
+        startPoint[1],
+        endPoint[0] - startPoint[0],
+        endPoint[1] - startPoint[1]
+      );
+    });
+  }
   destroyModal() {
     this.modal.destroy();
   }
@@ -129,6 +194,30 @@ export class AuditDisposeComponent implements OnInit {
     }, 0);
   }
 
+  canvasLook(data) {
+    const modal = this.modalChild.create({
+      nzContent: ImgLookComponent,
+      nzWrapClassName: "vertical-center-modal",
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth:
+        document.documentElement.clientHeight < 650 ||
+        document.documentElement.clientWidth < 1400
+          ? 1000
+          : 1200,
+      nzClosable: false,
+      nzClassName: "modelnobg",
+      nzBodyStyle: {
+        "border-radius": "0px",
+        padding: "0px",
+      },
+      nzComponentParams: {
+        data: data,
+      },
+      nzFooter: null,
+    });
+    const instance = modal.getContentComponent();
+  }
+
   //查看文件
   lookFile(item) {
     if (!item) {

src/app/pages/audit/audit-ing/audit-ing.component.ts

@@ -129,22 +129,22 @@ export class AuditIngComponent implements OnInit {
     let data = JSON.parse(sessionStorage.getItem("userdata"));
     let params = {
       OrganizationUnitId: this.validateForm.value.organization
-        ? data.organization.id
-        : this.validateForm.value.organization,
+        ? this.validateForm.value.organization
+        : data.organization.id,
       IsContainsChildren: "true",
       AuditStatuses: "1",
-      AuditType:this.validateForm.value.type,
-      AuditTitle:this.validateForm.value.info,
+      AuditType: this.validateForm.value.type,
+      AuditTitle: this.validateForm.value.info,
       StartTime: this.validateForm.value.datePicker
         ? this.validateForm.value.datePicker[0]
         : null,
       EndTime: this.validateForm.value.datePicker
-        ? this.validateForm.value.datePicker[1] + ' 23:59:59'
+        ? this.validateForm.value.datePicker[1] + " 23:59:59"
         : null,
       SkipCount: this.SkipCount,
       MaxResultCount: this.MaxResultCount,
     };
-    
+
     this.http
       .get(`/api/services/app/ContentAuditLog/GetAuditting`, { params })
       .subscribe((info: any) => {
@@ -215,10 +215,10 @@ export class AuditIngComponent implements OnInit {
               // this.getStationList();
               for (let index = 0; index < this.list.length; index++) {
                 const element = this.list[index];
-                if(element.id==item.id){
-                  this.list.splice(index,1)
-                  this.SkipCount = String(Number(this.SkipCount)-1);
-                  this.totalCount = String(Number(this.totalCount)-1);
+                if (element.id == item.id) {
+                  this.list.splice(index, 1);
+                  this.SkipCount = String(Number(this.SkipCount) - 1);
+                  this.totalCount = String(Number(this.totalCount) - 1);
                   this.list = [...this.list];
                 }
               }

src/app/pages/audit/img-look/img-look.component.html

@@ -0,0 +1,5 @@
+<div class="imgbox">
+    <img id="img2" [src]="imgUrl" alt="">
+    <canvas [width]="canvasWidth" [height]="canvasHeight"
+        [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas2"></canvas>
+</div>

src/app/pages/audit/img-look/img-look.component.scss

@@ -0,0 +1,15 @@
+.imgbox {
+  position: relative;
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+
+  #canvas2 {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

src/app/pages/audit/img-look/img-look.component.ts

@@ -0,0 +1,73 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-img-look",
+  templateUrl: "./img-look.component.html",
+  styleUrls: ["./img-look.component.scss"],
+})
+export class ImgLookComponent implements OnInit {
+  @Input() data: any;
+  constructor() {}
+  imgUrl;
+  ngOnInit(): void {
+    console.log(this.data);
+    this.imgUrl = this.data.itemData.ViolateImage;
+
+    let dataArr = [];
+    for (const key in JSON.parse(this.data.itemData.ViolatedItemSnapshot)) {
+      const element = JSON.parse(this.data.itemData.ViolatedItemSnapshot)[key];
+      if (element.error) {
+        dataArr.push(element);
+      }
+    }
+    console.log("标绘坐标", dataArr);
+    this.coordinate = dataArr;
+    setTimeout(() => {
+      this.canvasLabel();
+    }, 0);
+  }
+
+  canvasWidth = 0;
+  canvasHeight = 0;
+  ctx;
+  coordinate;
+  canvasLabel() {
+    let imgBg: any = document.getElementById("img2");
+    imgBg.onload = () => {
+      this.canvasWidth = imgBg.offsetWidth;
+      this.canvasHeight = imgBg.offsetHeight;
+      const img = new Image();
+      img.src = imgBg.src;
+      img.onload = () => {
+        const canvas: any = document.querySelector("#canvas2");
+        this.ctx = canvas.getContext("2d");
+        const cWidth = canvas.width,
+          cHeight = canvas.height;
+        // 以图画底
+        this.ctx.drawImage(img, 0, 0, cWidth, cHeight);
+        this.strokeRect(this.coordinate);
+      };
+    };
+  }
+
+  strokeRect(data) {
+    data.forEach((item) => {
+      let startPoint = [
+        Math.round(this.canvasWidth * item.box[0]),
+        Math.round(this.canvasHeight * item.box[1]),
+      ];
+      let endPoint = [
+        Math.round(this.canvasWidth * item.box[2]),
+        Math.round(this.canvasHeight * item.box[3]),
+      ];
+      this.ctx.strokeStyle = "red";
+      this.ctx.lineWidth = 3;
+      this.ctx.strokeRect(
+        startPoint[0],
+        startPoint[1],
+        endPoint[0] - startPoint[0],
+        endPoint[1] - startPoint[1]
+      );
+    });
+  }
+}

src/app/pages/pages.module.ts

@@ -92,10 +92,11 @@ import { SystemModelComponent } from './home/system-model/system-model.component
 import { ForgetComponent } from './login/forget/forget.component';
 import { HomePageNologinComponent } from './home-page-nologin/home-page-nologin.component';
 import { DownImageComponent } from './down-image/down-image.component';
+import { ImgLookComponent } from './audit/img-look/img-look.component';
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
     TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
-    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent, RecordsNavComponent, UserDetailsComponent, AppealDetailsComponent, fileName, SystemModelComponent, ForgetComponent, HomePageNologinComponent, DownImageComponent],
+    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent, RecordsNavComponent, UserDetailsComponent, AppealDetailsComponent, fileName, SystemModelComponent, ForgetComponent, HomePageNologinComponent, DownImageComponent, ImgLookComponent],
 
 
   imports: [

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

@@ -260,6 +260,8 @@ export class GetOutOfLineDetailsComponent implements OnInit {
       }
     });
   }
+
+  
   typeChange(item) {
     if (item.checked) {
       this.coordinate.forEach((element) => {