ShangHaiYuan-AnXin/src/app/plan-audit/plan-record/plan-record.component.ts

import { Component, OnInit, Inject } from "@angular/core";
import { FormControl } from "@angular/forms";
import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar";
import {
  MatDialog,
  MatDialogRef,
  MAT_DIALOG_DATA,
} from "@angular/material/dialog";
import { HttpClient } from "@angular/common/http";
import { DomSanitizer } from "@angular/platform-browser";
import { photoViewer } from "photo-sphere-viewer";
import Viewer from "viewerjs";
@Component({
  selector: "app-plan-record",
  templateUrl: "./plan-record.component.html",
  styleUrls: ["./plan-record.component.scss"],
})
export class PlanRecordComponent implements OnInit {
  constructor(
    private http: HttpClient,
    public snackBar: MatSnackBar,
    private sanitizer: DomSanitizer,
    public dialog: MatDialog
  ) {}

  pcshow;
  ngOnInit(): void {
    if (window.matchMedia("(max-width: 1300px)").matches) {
      this.pcshow = false;
    } else {
      this.pcshow = true;
    }
    let level = sessionStorage.getItem("level");
    if (level == "0") {
      //如果是总队
      this.preparelevels = [
        { name: "总队", value: "0" },
        { name: "支队", value: "1" },
        { name: "大队", value: "2" },
        { name: "中队", value: "3" },
      ];
    }
    if (level == "1") {
      //如果是支队
      this.preparelevels = [
        { name: "支队", value: "1" },
        { name: "大队", value: "2" },
        { name: "中队", value: "3" },
      ];
    }
    if (level == "2") {
      //如果是大队
      this.preparelevels = [
        { name: "大队", value: "2" },
        { name: "中队", value: "3" },
      ];
    }
    if (level == "3") {
      //如果是中队
      this.preparelevels = [{ name: "中队", value: "3" }];
    }
    this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.src);
    this.getAlltabledate();
  }

  wordShow = true;
  iframeSrc;
  src = "";
  selected = new FormControl(0); //选项卡 实例
  preparelevels: any;
  level = ""; //类型
  verifyState = ""; //审核状态
  projectlevel; //组织机构
  PlanLevel; //编制级别
  addtime; //时间
  endtime; //结束时间
  count; //一共多少条
  tableDate;
  showPvt = false; //全景图是否显示
  shenheTable = []; //选中要审核的对象
  chuorzhong; //判断初审还是终审
  radioid; //选中的id
  showtype = -1; //0:word,1:全景图，2:二维三维，3:重点单位
  compantData = { name: "", buildingTypes: [], address: "" };
  organizationName;
  planData;
  id;
  itemid;
  companyId;
  fetchUrl;
  companyName;
  plantypes;
  IsNewData = [true, false];

  //获取表格数据
  PageNumber = 1;
  isTableData = false;
  getAlltabledate() {
    this.isTableData = true;
    let paramsdata: any = {
      Operation: this.level || [],
      ContentType: Number(this.projectlevel) || [],
      Level: this.PlanLevel || [],
      verifyState: this.verifyState || [1, 2, 4, 5],
      QueryStartTime: this.addtime || "",
      QueryEndTime: this.endtime || "",
      PlanType: this.plantypes || [],
      IsNewData: this.IsNewData,
      PageNumber: this.PageNumber,
      PageSize: 10,
    };
    this.http
      .get("/api/ContentVerifies", { params: paramsdata })
      .subscribe((data: any) => {
        //console.log(data)
        this.isTableData = false;
        this.tableDate = data.items;
        this.count = data.totalCount;
      });
  }
  //提交查询
  onSubmit(value) {
    this.PageNumber = 1;
    this.getAlltabledate();
  }
  //刷新
  record() {
    this.verifyState = "";
    this.level = "";
    this.projectlevel = "";
    this.IsNewData = [true, false];
    this.addtime = "";
    this.endtime = "";
    this.PlanLevel = "";
    this.plantypes = [];
    this.PageNumber = 1; //分页事件触发刷新
    this.getAlltabledate();
  }

  //分页事件
  chagePage(e) {
    console.log("分页事件", e);
    this.PageNumber = e.pageIndex + 1;
    this.getAlltabledate();
  }
  //表格点击事件
  viewer; //全景图对象
  waterData: any; //需要传递给子组件的水源信息
  LinkageForceDetailInfo: any; //需要传递给子组件的联动力量信息
  fireForceDetailInfo: any; //需要传递给子组件的消防力量信息
  postlevel: any;
  bianzhi = false;
  tableClick(e, item) {
    console.log(item);

    this.showtype = -1;
    this.organizationName = "";
    this.itemid = item.itemId;
    this.id = item.id;
    this.fetchUrl = "";
    this.viewer = {};
    if (item.contentType == 11) {
      this.bianzhi = false;
      window.setTimeout(() => {
        this.showtype = 3;
        sessionStorage.setItem("companyId", item.itemId);
      }, 0);
    } else if (item.contentType == 12) {
      this.bianzhi = false;
      //水源
      this.http.get(`/api/WaterSources/${item.itemId}`).subscribe((data) => {
        this.waterData = data;
        this.showtype = 12;
      });
    } else if (item.contentType == 13) {
      this.bianzhi = false;
      //消防力量
      this.http
        .get(`/api/CustomFireForce/${item.itemId}`)
        .subscribe((data: any) => {
          if (data.forceType != 0) {
            //如果是其他消防力量
            this.postlevel = 4;
          } else {
            this.postlevel = data.level;
          }
          // console.log('xxx',data)
          data.fireForceDetailInfo.location
            ? null
            : (data.fireForceDetailInfo.location = { x: null, y: null });
          this.fireForceDetailInfo = data.fireForceDetailInfo;
          this.showtype = 13;
        });
    } else if (item.contentType == 14) {
      this.bianzhi = false;
      //联动力量
      this.http
        .get(`/api/LinkageForces/${item.itemId}`)
        .subscribe((data: any) => {
          data.location ? null : (data.location = { x: null, y: null });
          this.LinkageForceDetailInfo = data;
          this.showtype = 14;
        });
    } else {
      this.http
        .get(`/api/PlanComponents/${item.itemId}`)
        .subscribe((data: any) => {
          console.log("预案详情", data);
          this.companyId = data.companyId;
          this.companyName = data.companyName;
          if (data.planType != 2 && data.planType != 1) {
            if (data.planMode == 2) {
              this.showtype = 0;
              this.bianzhi = true;
              this.src = `/CreatePlanOnlineFive?navIsOpen=false&companyId=${data.companyId}&planName=${data.name}&unitName=${data.companyName}&planCategory=${data.planCategory}&planId=${data.id}&unitTypeId=${data.company.buildingTypes[0].id}&orName=${data.company.organizationName}&orId=${data.company.organizationId}&pattern=false`;
              this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(
                this.src
              );
            } else {
              this.bianzhi = false;
              this.fetchUrl = data.attachmentUrls[0];
              var index = this.fetchUrl.indexOf("/");
              let isImg;
              if (
                this.fetchUrl.indexOf("png") !== -1 ||
                this.fetchUrl.indexOf("jpg") !== -1
              ) {
                isImg = true;
              }
              if (this.fetchUrl.substr(0, index) == "psw") {
                this.showtype = 1;
                var obj = document.getElementById("viewer");
                if (obj != null) {
                  obj.innerHTML = "";
                }
                window.setTimeout(() => {
                  this.viewer = new photoViewer({
                    container: document.querySelector("#viewer"),
                    panorama: "/api/Objects/PlanPlatform/" + this.fetchUrl,
                  });
                });
              } else if (isImg) {
                let dom = document.getElementById(`viewerjs`);
                let pObjs = dom.childNodes;
                let node = document.createElement("img");
                node.style.display = "none";
                node.src = "/api/Objects/PlanPlatform/" + this.fetchUrl;
                node.id = "img";
                dom.appendChild(node);
                setTimeout(() => {
                  let viewer = new Viewer(document.getElementById(`viewerjs`), {
                    hidden: () => {
                      dom.removeChild(pObjs[0]);
                      viewer.destroy();
                    },
                  });
                  node.click();
                }, 0);
              } else {
                this.lookWord();
              }
            }
          } else {
            this.organizationName = item.organizationName;
            this.planData = data;
            this.handleData();
            return;
          }
        });
    }

    if (e.checked) {
      this.shenheTable.push(item);
    } else {
      for (var i = 0; i < this.shenheTable.length; i++) {
        if (this.shenheTable[i].id == item.id) {
          this.shenheTable.splice(i, 1);
        }
      }
    }
    this.radioid = item.itemId;
  }

  //毕升
  lookWord() {
    this.showtype = 0;
    let suffix = this.fetchUrl
      .split(".")
      [this.fetchUrl.split(".").length - 1].toLowerCase();
    if (suffix == "docx" || suffix == "doc") {
      let arr = this.fetchUrl.split(".");
      arr[arr.length - 1] = "pdf";
      this.src = `/api/Objects/PlanPlatform/` + arr.join(".");
    } else if (suffix == "pdf") {
      this.src = `/api/Objects/PlanPlatform/` + this.fetchUrl;
    }
    this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.src);
  }
  //查看按钮跳转
  lookNew() {
    window.open(this.src);
  }

  //查看二维三维预案
  thirdPartyURL;
  planType;
  twoOrthree;
  handleData() {
    console.log(this.planData);
    this.compantData = { name: "", buildingTypes: [], address: "" };
    this.planType = this.planData.planMode;
    let data = this.planData;
    if (data.planType == 1) {
      this.twoOrthree = 2;
    } else if (data.planType == 2) {
      this.twoOrthree = 3;
    }
    if (this.planData.planMode == 0) {
      //预案planMode=0时, 查看word
      //this.lookWord()
    } else if (this.planData.planMode == 1 || this.planData.planMode == 2) {
      //预案planMode=2时, 跳查看页面组件
      this.showtype = 2;
      this.http.get(`/api/Plans/${data.companyId}`).subscribe((data: any) => {
        data && data.company ? (this.compantData = data.company) : null;
      });
      sessionStorage.setItem(
        "buildingTypeId",
        this.compantData.buildingTypes.length
          ? this.compantData.buildingTypes[0].id
          : undefined
      );
      sessionStorage.setItem("companyId", this.companyId);
      sessionStorage.setItem("planId", this.itemid);
      sessionStorage.setItem("editable", "0");
      sessionStorage.setItem("planName", data.name);
      let companyId = sessionStorage.getItem("companyId");
      this.thirdPartyURL = this.sanitizer.bypassSecurityTrustResourceUrl(
        `/keyUnit/viewunitinfoplans?id=${companyId}`
      );
      //window.open(`/keyUnit/viewunitinfoplan?id=${companyId}`)
    } else if (this.planData.planMode == 3) {
      //预案planMode=3时, 第三方网址'
      this.showtype = 2;
      this.http.get(`/api/Plans/${data.companyId}`).subscribe((data: any) => {
        data && data.company ? (this.compantData = data.company) : null;
      });
      //this.dialog.open(show3D,{width:'1350px',height:'700px',data:{url:data.url}}); //打开图片弹窗
      this.thirdPartyURL = this.sanitizer.bypassSecurityTrustResourceUrl(
        data.url
      );
    }
  }

  //打开三维预案弹窗
  selectedFileData;
  open3Dshow() {
    // console.log("三维预案1", this.thirdPartyURL);
    // console.log("三维预案2", this.twoOrthree);
    // return
    if (this.twoOrthree === 2) {
      this.dialog.open(recordshow3D, {
        width: "1650px",
        height: "850px",
        data: { url: this.thirdPartyURL, twoOrthree: this.twoOrthree },
      });
    } else if (this.twoOrthree === 3) {
      console.log(this.planData);
      if (this.planData.attachmentUrls.length !== 0) {
        this.downloadisLoading = true;
        this.http
          .get(
            "/api/ObjectMetadata/PlanPlatform/" +
              this.planData.attachmentUrls[0]
          )
          .subscribe((data: any) => {
            console.log("源文件", data);
            this.selectedFileData = data;
            this.downloadFile();
          });
      }
    }
  }
  //初始化下载
  downloadProgress = 0;
  downloadisLoading = false;
  downloadFile() {
    this.downloadProgress = 0;
    let file = this.selectedFileData;
    let fileSize = file.fileLength; //下载文件的总大小
    let shardSize = 10 * 1024 * 1024; //文件大小是否大于10MB
    console.log(file);
    if (file && fileSize <= shardSize) {
      //<=10MB时直接下载

      this.http
        .get(`/api/Objects/PlanPlatform/${file.objectName}`, {
          responseType: "blob",
        })
        .subscribe((data) => {
          console.log(data);
          let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;

          let suffix = file.objectName.substring(
            file.objectName.lastIndexOf(".") + 1,
            file.objectName.length
          );
          link.setAttribute(
            "download",
            file.fileName
              ? file.fileName
              : file.objectName.split("/")[
                  file.objectName.split("/").length - 1
                ]
          );
          document.body.appendChild(link);
          link.click();
          this.downloadisLoading = false;
        });
    } else if (file && fileSize > shardSize) {
      //>10MB时分块下载
      this.blockingDownload(); //分段下载
      this.downloadisLoading = true;
      // this.setFileLoading()
    }
  }

  // //分段下载并合并
  async blockingDownload() {
    let file = this.selectedFileData;
    let fileSize = file.fileLength; //下载文件的总大小
    let shardSize = 3 * 1024 * 1024; //3MB一个分片
    let allSlice = Math.ceil(fileSize / shardSize); //总文件/3MB===共分多少段
    let allFile: any = []; //所有的file分段

    for (let i = 0; i < allSlice; i++) {
      let start = i * shardSize; //每次下载文件开始位置
      let end = Math.min(fileSize, start + shardSize - 1); //每次下载文件结束为止

      let result = await new Promise((result, reject) => {
        this.http
          .get(`/api/Objects/PlanPlatform/${file.objectName}`, {
            headers: { range: `bytes= ${start}-${end}` },
            responseType: "blob",
          })
          .subscribe((data) => {
            result(data);
          });
      });
      allFile.push(result);
      this.downloadProgress = Number((i / allSlice).toFixed(2)) * 100;

      if (allFile.length === allSlice) {
        //合并文件输出给浏览器
        let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        let suffix = file.objectName.substring(
          file.objectName.lastIndexOf(".") + 1,
          file.objectName.length
        );
        link.setAttribute(
          "download",
          file.fileName
            ? file.fileName
            : file.objectName.split("/")[file.objectName.split("/").length - 1]
        );
        document.body.appendChild(link);
        link.click();
        // this.downloadProgress = 0
        this.downloadisLoading = false;
        // this.setFileLoading()
      }
    } //for循环
  }

  //判断iframe是否加载完成
  iftrue = true;
  ifranmeLoad() {
    var iframe = document.getElementById("myiframe");
    iframe.onload = function () {};
    this.iftrue = !this.iftrue;
  }
}

@Component({
  selector: "app-wait-examineer-show3D",
  templateUrl: "./show3D.html",
  styleUrls: ["./plan-record.component.scss"],
})
export class recordshow3D {
  constructor(
    private sanitizer: DomSanitizer,
    public dialogRef: MatDialogRef<recordshow3D>,
    @Inject(MAT_DIALOG_DATA) public data,
    public dialog: MatDialog
  ) {}
  ngOnInit(): void {
    // console.log(this.data)
    this.threedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
      this.data.url.changingThisBreaksApplicationSecurity
    );
  }
  threedUrl;
}