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

import { HttpClient } from "@angular/common/http";
import { Component, OnInit, Input } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { DomSanitizer } from "@angular/platform-browser";
import { NzMessageService } from "ng-zorro-antd/message";
import { NzModalRef, NzModalService } from "ng-zorro-antd/modal";
import { NzTreeModule } from "ng-zorro-antd/tree";
import { ObjectsSimpleService } from "src/app/service/objectsSimple.service";
import { PublicMethodsService } from "src/app/service/publicMethods.service";
import Viewer from "viewerjs";

@Component({
  selector: "app-get-out-of-line-details",
  templateUrl: "./get-out-of-line-details.component.html",
  styleUrls: ["./get-out-of-line-details.component.scss"],
})
export class GetOutOfLineDetailsComponent implements OnInit {
  @Input() data: any;

  constructor(
    private objectsSrv: ObjectsSimpleService,
    private fb: FormBuilder,
    private http: HttpClient,
    private message: NzMessageService,
    private modal: NzModalService,
    private initialModal: NzModalRef,
    private sanitizer: DomSanitizer,
    private openmodal: NzModalRef,
    private pubilcMethods: PublicMethodsService
  ) {}

  imgUrl: string;
  vedioUrl: string;
  content;
  details;

  isMisinformation: boolean = false; //误报按钮的显隐

  isImage = true; //传过来的文件是否是图片
  fileUrl;

  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" },
    { id: 15, name: "烟雾预警", color: "#B4C3FF" },
    { id: 16, name: "火灾报警", color: "red" },
    { id: 17, name: "延长工装", color: "blue" },
    { id: 18, name: "江苏工装", color: "blue" },
    { id: 19, name: "经理工装", color: "yellow" },
    { id: 20, name: "江苏道达尔工装", color: "yellow" },
  ];
  userName; //登录账号的用户名
  isShowAxOtherRegion; //控制哪些用户可以看到ax全部

  isCarStop = false;

  pageIndex = 0;
  ngOnInit(): void {
    console.log("传进来的信息", this.data);
    // 安信框选
    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.violation.eventSystemName == "进出口停车") {
      this.isCarStop = true;
    }
    //是否是安信产生的预警进行判断
    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 == "证照资质") {
      this.isLicenseWarning = true;
    } else {
      this.isLicenseWarning = false;
    }

    this.details = this.data.content1;
    this.vedioUrl = this.data.violateVideo;
    this.content = this.data.handleRecord;

    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") {
        this.isImage = true;
      } else {
        this.isImage = false;
        if (this.pubilcMethods.getFileType(this.imgUrl) == "word") {
          let arr = this.imgUrl.split(".");
          arr[arr.length - 1] = "pdf";
          this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
            arr.join(".")
          );
        } else if (this.pubilcMethods.getFileType(this.imgUrl) == "pdf") {
          this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
            this.imgUrl
          );
        }
      }
    }

    let loginUserInfo;
    if (sessionStorage.getItem("isGasStation") == "true") {
      loginUserInfo = JSON.parse(
        sessionStorage.getItem("userdataOfgasstation")
      );
    } else {
      loginUserInfo = JSON.parse(sessionStorage.getItem("userdata"));
    }

    if (
      loginUserInfo.userName == "admin" ||
      sessionStorage.getItem("isGasStation") == "true"
    ) {
      this.isSubmit = true;
    } else {
      this.isSubmit = false;
    }

    console.log("this.isSubmit", this.isSubmit);

    if (
      loginUserInfo.permissions.find((item) => {
        return item.name == "Data.Violation.Positive.Censor";
      }) &&
      this.data.violation.eventSystemName.indexOf("证照有效期") == -1
    ) {
      this.isMisinformation = true;
    } else {
      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);
    let imgBg: any = document.getElementById("img" + this.data.id);
    imgBg.src = url;
    imgBg.onload = () => {
      window.setTimeout(() => {
        // 加载图片
        this.ctx.drawImage(imgBg, 0, 0, this.canvasWidth, this.canvasHeight);
        this.strokeRect(this.currentCoordinate);
      }, 0);
    };
  }
  canvasWidth = 0;
  canvasHeight = 0;
  ctx;
  canvasLabel() {
    let imgBg: any = document.getElementById("img" + this.data.id);
    imgBg.onload = () => {
      console.log("图片加载完毕...");
      this.canvasWidth = imgBg.offsetWidth;
      this.canvasHeight = imgBg.offsetHeight;
      const canvas: any = document.getElementById("canvas" + this.data.id);
      this.ctx = canvas.getContext("2d");
      const cWidth = canvas.width,
        cHeight = canvas.height;
      setTimeout(() => {
        console.log("以图画底,描绘预警框...");
        // 以图画底
        this.ctx.drawImage(imgBg, 0, 0, cWidth, cHeight);
        this.strokeRect(this.currentCoordinate);
      }, 100);
    };
  }

  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";
        }
      }
    });
  }

  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);
    let imgBg: any = document.getElementById("img" + this.data.id);
    const canvas: any = document.getElementById("canvas" + this.data.id);
    this.ctx.drawImage(imgBg, 0, 0, canvas.width, canvas.height);
    this.strokeRect(this.currentCoordinate);
  }

  downImg() {
    const canvasDom: any = document.getElementById("canvas" + this.data.id);
    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;
  uploadIndex: string;
  filechange(e) {
    this.isLoadingSave = true;
    let file = e.target.files[0] || null; //获取上传的文件
    this.openFileSelect(
      file,
      `stationPhotos/${this.data.gasStation.id}/appealFile/${this.data.id}`
    );
  }
  //设置文件路径并上传
  postFilePath;
  async openFileSelect(file: File, extensionPath: string) {
    this.postFilePath = extensionPath;
    let fileSize = file.size || null; //上传文件的总大小
    let shardSize = 5 * 1024 * 1024; //5MB 超过5MB要分块上传
    if (fileSize >= shardSize) {
      //  超过5MB要分块上传
      await this.postFileByMul(file);
    } //普通上传
    else {
      await this.postFile(file);
    }
  }
  //上传文件
  async postFile(file: File) {
    await new Promise((resolve, reject) => {
      this.objectsSrv.postFile(this.postFilePath, file).subscribe((data) => {
        let dataObj = data as any;
        let filePath: string =
          ObjectsSimpleService.baseUrl + dataObj.objectName;
        this.fileList.push(filePath);
        this.isLoadingSave = false;
        resolve("success");
      });
    });
  }

  /**
   * 分块上传
   * @param file
   */
  postFileByMul(file: File) {
    this.objectsSrv
      .postFile_MultipartUpload(this.postFilePath, file)
      .then((value) => {
        let dataObj = value as any;
        let filePath = dataObj.filePath;
        this.fileList.push(filePath);
        this.isLoadingSave = false;
      });
  }

  lookfile(item) {
    if (!item) {
      return;
    }
    if (this.pubilcMethods.getFileType(item) == "word") {
      let arr = item.split(".");
      arr[arr.length - 1] = "pdf";
      window.open(arr.join("."));
    } else if (this.pubilcMethods.getFileType(item) == "pdf") {
      window.open(item);
    } else {
      this.viewImg(item);
    }
  }

  delete(fileList, key) {
    this.modal.confirm({
      nzTitle: `确定要删除这个文件吗?`,
      nzOkText: "确定",
      nzOkType: "primary",
      nzOnOk: () => {
        fileList.splice(key, 1);
      },
      nzCancelText: "取消",
    });
  }

  //查看图片
  viewImg(url) {
    let dom = document.getElementById(`viewerjs`);
    let pObjs = dom.childNodes;
    let node = document.createElement("img");
    node.style.display = "none";
    node.src = url;
    node.id = "img";
    dom.appendChild(node);
    setTimeout(() => {
      let viewer = new Viewer(document.getElementById(`viewerjs`), {
        hidden: () => {
          dom.removeChild(pObjs[0]);
          viewer.destroy();
        },
      });
      node.click();
    }, 0);
  }

  selectedType: string = "img";
  contentType(type) {
    this.selectedType = type;
  }
  submit() {
    let body = {
      id: this.data.id,
      handleRecord: this.content,
    };
    this.http
      .post("/api/services/app/ViolateRecord/HandleViolateRecord", body)
      .subscribe((data) => {
        this.message.create("success", "处置成功!");
        this.data.handleTime = new Date();
        this.data.handleStateStr = "已处置";
        this.data.handleRecord = this.content;
      });
  }

  //误报
  misinformation() {
    this.modal.confirm({
      nzTitle: "判定该预警为误报吗?",
      nzOkText: "确定",
      nzOkType: "primary",
      nzOnOk: () => {
        let body = {
          id: this.data.id,
          positive: false,
        };
        this.http
          .post("/api/services/app/ViolateRecord/CensorViolateRecord", body)
          .subscribe(
            (data) => {
              this.message.create("success", "处置成功!");
              // this.data.handleTime = new Date()
              this.initialModal.triggerOk();
            },
            (err) => {
              this.message.create("warning", "处置失败，请联系管理员!");
            }
          );
      },
      nzCancelText: "取消",
      nzOnCancel: () => console.log("Cancel"),
    });
  }

  // 申诉
  isAppeal;
  appealValue;
  appeal() {
    this.isAppeal = true;
  }

  isOkLoading = false;
  handleOk() {
    this.isOkLoading = true;
    let body = {
      appealReason: this.appealValue,
      appealAttachments: this.fileList,
    };
    this.http
      .post("/api/services/app/ViolateRecord/Appeal", body, {
        params: {
          id: this.data.id,
        },
      })
      .subscribe(
        (data: any) => {
          this.message.create("success", "申诉提交成功");
          this.isAppeal = false;
          this.isOkLoading = false;
          this.data.appealStatus = 1;
          this.data.appealLog = data.result.appealLog;
        },
        (err) => {
          this.isOkLoading = false;
          this.message.create("warning", "申诉提交失败，请联系管理员!");
        }
      );
  }

  handleCancel(): void {
    this.isAppeal = false;
    this.isOkLoading = false;
  }

  Unappeal() {
    this.http
      .post("/api/services/app/ViolateRecord/Unappeal", null, {
        params: {
          id: this.data.id,
        },
      })
      .subscribe(
        (data) => {
          this.message.create("success", "申诉撤销成功");
          this.data.appealStatus = 4;
        },
        (err) => {
          this.message.create("warning", "申诉撤销失败，请联系管理员!");
        }
      );
  }

  closeModel() {
    this.openmodal.close();
  }
}