[完善]checkbox显示

src/app/pages/criminal-records-admin/criminal-records-admin.component.ts

@@ -274,7 +274,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
 
 
   look(item) {
-    console.log('点击item', item)
+    // console.log('点击item', item)
     if (item.violation.eventSystemName == '灭火器维护') {
       item.violatedItemSnapshotObj = JSON.parse(item.violatedItemSnapshot)
       const modal = this.modal.create({

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

@@ -16,11 +16,17 @@
   <div class="details">
     预警详情：{{details}}
   </div>
+  <div class="typecheckbox" *ngIf="isAnxin">
+    <label *ngFor="let item of this.legendList" nz-checkbox [(ngModel)]="item.checked"
+      (ngModelChange)="typeChange(item)">{{typeArr[item.id].name}}</label>
+  </div>
   <div class="content">
     <div *ngIf="selectedType == 'img'" class="imgbox">
       <ng-container *ngIf="imgUrl; else elseTemplate">
+
         <img id="img" [src]="imgUrl" alt="" (error)="imgErr()">
-        <canvas [width]="canvasWidth" [height]="canvasHeight" [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas"></canvas>
+        <canvas [width]="canvasWidth" [height]="canvasHeight"
+          [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas"></canvas>
         <span *ngIf="isSrcError">
           图片资源未找到
         </span>

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

@@ -61,7 +61,14 @@
   box-sizing: border-box;
   padding: 0 12px;
 }
+.typecheckbox{
+  box-sizing: border-box;
+  padding: 0 12px;
+  label{
+    color: #fff;
+  }
 
+}
 .content {
   flex: 1;
   overflow: hidden;

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

@@ -23,40 +23,10 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   content;
   details;
 
-  isAnxin = true;
-  coordinate = {
-    // "0": {
-    //   id: 11,
-    //   box: [0, 0, 0.5, 0.5],
-    //   scores: 0.9081,
-    // },
-    // "1": {
-    //   id: 4,
-    //   box: [0.4399, 0.4705, 0.4883, 0.6071],
-    //   scores: 0.8815,
-    // },
-    // "2": {
-    //   id: 4,
-    //   box: [0.3868, 0.356, 0.4232, 0.4745],
-    //   scores: 0.8652,
-    // },
-    // "3": {
-    //   id: 4,
-    //   box: [0.33, 0.5203, 0.376, 0.6598],
-    //   scores: 0.865,
-    // },
-    // "4": {
-    //   id: 4,
-    //   box: [0.3562, 0.2895, 0.387, 0.3898],
-    //   scores: 0.8181,
-    // },
-    // "5": {
-    //   id: 4,
-    //   box: [0.2883, 0.3206, 0.3159, 0.4151],
-    //   scores: 0.6876,
-    // },
-  };
-
+  isAnxin = false;
+  coordinate = []; //完整坐标点信息
+  currentCoordinate = []; //当前需要标绘坐标点信息
+  legendList: any = [];
   typeArr = [
     { id: 0, name: "工装", color: "#91CCFF" },
     { id: 2, name: "便装", color: "#46DFFF" },
@@ -74,9 +44,31 @@ export class GetOutOfLineDetailsComponent implements OnInit {
     { id: 13, name: "私家车", color: "black" },
     { id: 14, name: "断开的卸油管", color: "blue" },
   ];
+
+  userName;
   ngOnInit(): void {
-    this.coordinate = JSON.parse(this.data.violatedItemSnapshot);
-    console.log('需标绘信息',this.coordinate)
+    this.userName = JSON.parse(sessionStorage.getItem("userdata")).userName;
+    if (this.data.violatedItemSnapshot) {
+      this.isAnxin = true;
+    }
+    let dataArr = [];
+    for (const key in JSON.parse(this.data.violatedItemSnapshot)) {
+      const element = JSON.parse(this.data.violatedItemSnapshot)[key];
+      dataArr.push(element);
+    }
+    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;
     this.vedioUrl = this.data.violateVideo;
@@ -91,7 +83,7 @@ export class GetOutOfLineDetailsComponent implements OnInit {
 
   canvasWidth = 0;
   canvasHeight = 0;
-  
+  ctx;
   canvasLabel() {
     let imgBg: any = document.getElementById("img");
     imgBg.onload = () => {
@@ -101,56 +93,70 @@ export class GetOutOfLineDetailsComponent implements OnInit {
       img.src = imgBg.src;
       img.onload = () => {
         const canvas: any = document.querySelector("#canvas");
-        let ctx = canvas.getContext("2d");
+        this.ctx = canvas.getContext("2d");
         const cWidth = canvas.width,
           cHeight = canvas.height;
         // 以图画底
-        ctx.drawImage(img, 0, 0, cWidth, cHeight);
-        for (const key in this.coordinate) {
-          const item: any = this.coordinate[key];
-          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]),
-          ];
-          console.log(startPoint, endPoint);
-          ctx.strokeStyle = this.typeArr[item.id].color;
-          ctx.lineWidth = 3;
-          ctx.strokeRect(
-            startPoint[0],
-            startPoint[1],
-            endPoint[0] - startPoint[0],
-            endPoint[1] - startPoint[1]
-          );
-          ctx.fillStyle = this.typeArr[item.id].color;
-          ctx.font = "16px Verdana";
-          ctx.fillText(
-            this.typeArr[item.id].name + item.scores,
-            startPoint[0],
-            startPoint[1] < 20 ? endPoint[1] + 16 : startPoint[1]
-          );
-        }
+        this.ctx.drawImage(img, 0, 0, cWidth, cHeight);
+        this.strokeRect(this.currentCoordinate);
       };
     };
   }
 
-
-  strokeRect(data){
-
+  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]),
+      ];
+      // console.log(startPoint, endPoint);
+      this.ctx.strokeStyle = this.typeArr[item.id].color;
+      this.ctx.lineWidth = 3;
+      this.ctx.strokeRect(
+        startPoint[0],
+        startPoint[1],
+        endPoint[0] - startPoint[0],
+        endPoint[1] - startPoint[1]
+      );
+      this.ctx.fillStyle = this.typeArr[item.id].color;
+      this.ctx.font = "16px Verdana";
+      let name = "";
+      if (
+        this.userName === "zhairjVerifier" ||
+        this.userName === "admin" ||
+        this.userName === "superadmin"
+      ) {
+        name = this.typeArr[item.id].name + item.scores;
+      } else {
+        name = this.typeArr[item.id].name;
+      }
+      this.ctx.fillText(
+        name,
+        startPoint[0],
+        startPoint[1] < 20 ? endPoint[1] + 16 : startPoint[1]
+      );
+    });
   }
 
-
-
-
-
-
-
-
-
-
+  typeChange(item) {
+    if (item.checked) {
+      this.coordinate.forEach((element) => {
+        if (element.id === item.id) {
+          this.currentCoordinate.push(element);
+        }
+      });
+    } else {
+      this.currentCoordinate = this.currentCoordinate.filter(
+        (v) => v.id !== item.id
+      );
+    }
+    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+    this.strokeRect(this.currentCoordinate);
+  }
   selectedType: string = "img";
   contentType(type) {
     this.selectedType = type;

src/app/pages/histories/histories.component.ts

@@ -371,7 +371,7 @@ export class HistoriesComponent implements OnInit {
   }
 
   look(item) {
-    console.log("点击item", item);
+    // console.log("点击item", item);
     if (item.violation.eventSystemName == "灭火器维护") {
       item.violatedItemSnapshotObj = JSON.parse(item.violatedItemSnapshot);
       const modal = this.modal.create({