Merge branch 'master' of http://121.36.37.70:3000/shaojiahao/Sinopec-Anxin

src/app/pages/records/oil-unloading-process-list/oil-unloading-process-list.component.html

@@ -149,6 +149,8 @@
                         </td>
                         <td>
                             <span style="color: #36A2FF;cursor: pointer;" (click)="look(item)">查看</span>
+                            <span *ngIf="loginUserInfo.userName === 'superadmin'"
+                                style="color: #FF4B65;cursor: pointer;margin-left: 6px;" (click)="delete(item)">删除</span>
                         </td>
                     </tr>
                 </tbody>

src/app/pages/records/oil-unloading-process-list/oil-unloading-process-list.component.ts

@@ -100,6 +100,7 @@ export class OilUnloadingProcessListComponent implements OnInit {
   button = false;
   tableScrollHeight;
   resizeListener;
+  loginUserInfo;
   ngOnInit(): void {
     this.tableScrollHeight = "100px";
     // 页面监听
@@ -126,7 +127,7 @@ export class OilUnloadingProcessListComponent implements OnInit {
       loginUserInfo = JSON.parse(sessionStorage.getItem("userdata"));
       this.returnLastMenus(false);
     }
-
+    this.loginUserInfo = loginUserInfo;
     if (
       loginUserInfo.roles.find((item) => {
         return item.name == "ViolationPositiveCensorer";
@@ -929,6 +930,41 @@ export class OilUnloadingProcessListComponent implements OnInit {
     const instance = modal.getContentComponent();
   }
 
+  //删除某个卸油
+  delete(item) {
+    console.log(item);
+    this.modal.confirm({
+      nzTitle: `确认要删除${item.gasStation.stationName}的此条卸油记录吗`,
+      nzOkText: "确定",
+      nzOkType: "primary",
+      nzOkDanger: true,
+      nzOnOk: () => {
+        this.http
+          .delete("/api/services/app/OilUnloadingProcess/Delete", {
+            params: {
+              Id: item.id,
+            },
+          })
+          .subscribe({
+            next: (data) => {
+              this.message.create("success", "删除成功");
+              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.totalCount = String(Number(this.totalCount) - 1);
+                  this.SkipCount = String(Number(this.SkipCount) - 1);
+                  this.list = [...this.list];
+                }
+              }
+            },
+          });
+      },
+      nzCancelText: "取消",
+      nzOnCancel: () => console.log("Cancel"),
+    });
+  }
+
   gorecordList() {
     if (this.router.url.indexOf("petrolStation") != -1) {
       this.router.navigate(["/records/petrolStation"]);

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

@@ -18,11 +18,26 @@
   <div class="details">
     预警详情：{{details}}
   </div>
+  <div class="typecheckbox" *ngIf="isAnxin">
+    <ng-container *ngIf="isShowAxOtherRegion">
+      <label *ngFor="let item of this.legendList" nz-checkbox [(ngModel)]="item.checked"
+        (ngModelChange)="typeChange(item)">
+        <div style="width: 10px;height: 10px;display: inline-block;" [ngStyle]="{'background': typeArr[item.id].color}">
+        </div>
+        {{typeArr[item.id].name}}
+      </label>
+    </ng-container>
+
+
+    <button nz-button nzType="primary" (click)="downImg()">导出图片</button>
+  </div>
   <div class="content">
-    <div *ngIf="selectedType == 'img'" class="imgbox">
+    <div *ngIf="selectedType == 'img'" class="imgbox" [ngClass]="{'imgboxAX': isAnxin}">
       <ng-container *ngIf="imgUrl; else elseTemplate">
         <ng-container *ngIf="isImage; else elseTemplate2">
-          <img [src]="imgUrl" alt="">
+          <img id="img" [src]="imgUrl" alt="">
+          <canvas *ngIf="isAnxin" [width]="canvasWidth" [height]="canvasHeight"
+            [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas"></canvas>
         </ng-container>
         <ng-template #elseTemplate2>
           <iframe 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

@@ -1,6 +1,6 @@
 .box {
   width: 100%;
-  height: 715px;
+  min-height: 715px;
   // overflow-y: auto;
   color: #fff;
   display: flex;
@@ -76,16 +76,45 @@
   padding: 0 12px;
 }
 
+.typecheckbox {
+  box-sizing: border-box;
+  padding: 0 12px;
+  margin-bottom: 6px;
+
+  label {
+    color: #fff;
+  }
+
+}
+
 .content {
   flex: 1;
   overflow: hidden;
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
   .imgbox {
+    flex: 1;
+    box-sizing: border-box;
+    padding: 0 12px;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
+    // margin-bottom: 12px;
+    flex-direction: column;
+    iframe{
+      flex: 1;
+    }
+    #canvas {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
 
     img {
       max-width: 100%;
@@ -93,6 +122,13 @@
     }
   }
 
+  .imgboxAX {
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+
   .vediobox {
     width: 100%;
     height: 100%;

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

@@ -42,7 +42,73 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   isLicenseWarning = false;
 
   isSubmit;
+
+  // 标注安信框选区
+  isAnxin = false;
+  coordinate = []; //完整坐标点信息
+  currentCoordinate = []; //当前需要标绘坐标点信息
+  legendList: any = [];
+  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" },
+  ];
+  userName; //登录账号的用户名
+  isShowAxOtherRegion; //控制哪些用户可以看到ax全部
   ngOnInit(): void {
+
+    // 安信框选
+    this.userName = JSON.parse(sessionStorage.getItem("userdata")).userName;
+    if (this.userName === "admin" || this.userName === "superadmin") {
+      this.isShowAxOtherRegion = true;
+    } else {
+      this.isShowAxOtherRegion = false;
+    }
+    if (
+      this.data.violatedItemSnapshot &&
+      this.data.violation.eventSystemName.indexOf("证照") == -1 &&
+      this.data.violation.eventSystemName.indexOf("设备") == -1
+    ) {
+      this.isAnxin = true;
+    }
+    if (this.isAnxin) {
+      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]);
+      }
+      setTimeout(() => {
+        this.canvasLabel();
+      }, 0);
+    }
+
+    // 安信框选
+
     console.log("预警信息", this.data);
 
     if (this.data.violation.violationType == "证照资质") {
@@ -106,6 +172,122 @@ export class GetOutOfLineDetailsComponent implements OnInit {
       this.isMisinformation = false;
     }
   }
+
+  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.currentCoordinate);
+      };
+    };
+  }
+
+  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]),
+      ];
+      if (this.isShowAxOtherRegion) {
+        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]
+        );
+        //如果当前矩形区域为错误区域，则左上角增加色块
+        if (item.error) {
+          this.ctx.fillStyle = this.typeArr[item.id].color;
+          this.ctx.fillRect(startPoint[0], startPoint[1], 10, 10);
+        }
+        this.ctx.fillStyle = this.typeArr[item.id].color;
+        this.ctx.font = "16px Verdana";
+        let name = "";
+        if (this.isShowAxOtherRegion) {
+          name = this.typeArr[item.id].name + item.scores;
+        } else {
+          name = this.typeArr[item.id].name;
+        }
+        this.ctx.fillText(
+          name,
+          startPoint[0],
+          startPoint[1] < 20 || item.id === 2 || item.id === 3
+            ? endPoint[1] + 18
+            : startPoint[1] - 5
+        );
+      } else {
+        if (item.error) {
+          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.fillRect(startPoint[0], startPoint[1], 10, 10);
+          this.ctx.fillStyle = this.typeArr[item.id].color;
+          this.ctx.font = "16px Verdana";
+          let name = this.typeArr[item.id].name;
+          // this.ctx.fillText(
+          //   name,
+          //   startPoint[0],
+          //   startPoint[1] < 20 || item.id === 2 || item.id === 3
+          //     ? endPoint[1] + 18
+          //     : startPoint[1] - 5
+          // );
+        }
+      }
+    });
+  }
+  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);
+  }
+
+  downImg() {
+    const canvasDom: any = document.querySelector("#canvas");
+    const imageData = canvasDom.toDataURL("image/png"); //返回base64的URL
+    const elink = document.createElement("a");
+    elink.download = "图片";
+    elink.style.display = "none";
+    elink.href = imageData;
+    document.body.appendChild(elink);
+    elink.click();
+    URL.revokeObjectURL(elink.href); //释放URL对象
+    document.body.removeChild(elink);
+  }
   fileList = [];
 
   isLoadingSave: boolean = false;