[完善]不同颜色区分框

proxy.config.json

@@ -1,11 +1,11 @@
 {
   "/api": {
-    "target": "http://121.36.37.70:8200",
+    "target": "http://121.36.37.70:8200/",
     "secure": false,
     "changeOrigin": true
   },
   "/signalr": {
-    "target": "http://121.36.37.70:8200",
+    "target": "http://121.36.37.70:8200/",
     "secure": false,
     "ws": true,
     "logLevel": "debug"

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

@@ -140,7 +140,8 @@ export class CriminalRecordsAdminComponent implements OnInit {
       // IsHandled: disposalState,
       ViolateTime: this.validateForm.value.datePicker ? [moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD'), moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD')] : null,
       SkipCount: this.SkipCount,
-      MaxResultCount: this.MaxResultCount //每页50条
+      MaxResultCount: this.MaxResultCount, //每页50条
+      NotificationState:'All'
     }
     this.tableSpin = true
     this.http.get('/api/services/app/ViolateRecordVerification/GetAll', {

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

@@ -20,7 +20,7 @@
     <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.ts

@@ -23,42 +23,60 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   content;
   details;
 
-  isAnxin = false;
+  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,
-    },
+    // "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,
+    // },
   };
 
+  typeArr = [
+    { id: 0, name: "工装", color: "#91CCFF" },
+    { id: 2, name: "便装", color: "#46DFFF" },
+    { id: 2, name: "抽烟", color: "#36A2FF" },
+    { id: 3, name: "打电话", color: "#FF6181" },
+    { id: 4, name: "隔离锥", color: "#000000" },
+    { id: 5, name: "手持灭火器", color: "#ffffff" },
+    { id: 6, name: "推车灭火器", color: "#B4C3FF" },
+    { id: 7, name: "静电接地", color: "#FF9963" },
+    { id: 8, name: "输油管(连接)", color: "#5A9CFF" },
+    { id: 9, name: "输油管连接车", color: "#4BFFD4" },
+    { id: 10, name: "输油管连接卸油口", color: "red" },
+    { id: 11, name: "卸油口盖子", color: "green" },
+    { id: 12, name: "卸油车", color: "yellow" },
+    { id: 13, name: "私家车", color: "black" },
+    { id: 14, name: "断开的卸油管", color: "blue" },
+  ];
   ngOnInit(): void {
-    // console.log(this.data);
+    this.coordinate = JSON.parse(this.data.violatedItemSnapshot);
+    console.log('需标绘信息',this.coordinate)
     this.details = this.data.content1;
     this.imgUrl = this.data.violateImage;
     this.vedioUrl = this.data.violateVideo;
@@ -73,6 +91,7 @@ export class GetOutOfLineDetailsComponent implements OnInit {
 
   canvasWidth = 0;
   canvasHeight = 0;
+  
   canvasLabel() {
     let imgBg: any = document.getElementById("img");
     imgBg.onload = () => {
@@ -98,7 +117,7 @@ export class GetOutOfLineDetailsComponent implements OnInit {
             Math.round(this.canvasHeight * item.box[3]),
           ];
           console.log(startPoint, endPoint);
-          ctx.strokeStyle = "red";
+          ctx.strokeStyle = this.typeArr[item.id].color;
           ctx.lineWidth = 3;
           ctx.strokeRect(
             startPoint[0],
@@ -106,11 +125,32 @@ export class GetOutOfLineDetailsComponent implements OnInit {
             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]
+          );
         }
       };
     };
   }
 
+
+  strokeRect(data){
+
+  }
+
+
+
+
+
+
+
+
+
+
   selectedType: string = "img";
   contentType(type) {
     this.selectedType = type;
@@ -183,7 +223,6 @@ export class GetOutOfLineDetailsComponent implements OnInit {
       nzOnCancel: () => console.log("Cancel"),
     });
   }
-
   isSrcError = false;
   imgErr() {
     this.isSrcError = true;

src/app/pages/histories/img-list/img-list.component.ts

@@ -17,7 +17,11 @@ export class ImgListComponent implements OnInit {
     this.data.forEach((element) => {
       num++;
       if (element.indexOf("http") !== 0) {
-        str += location.origin + element + "\n";
+        if (element.indexOf("/") !== 0) {
+          str += location.origin + "/" + element + "\n";
+        } else {
+          str += location.origin + element + "\n";
+        }
       } else {
         str += element + "\n";
       }