Sinopec-Anxin/src/app/pages/oil-unloading-process/oil-unloading-process.component.ts

import { Component, OnInit, Input } from "@angular/core";
import Viewer from "viewerjs";
import { NzMessageService } from "ng-zorro-antd/message";
@Component({
  selector: "app-oil-unloading-process",
  templateUrl: "./oil-unloading-process.component.html",
  styleUrls: ["./oil-unloading-process.component.scss"],
})
export class OilUnloadingProcessComponent implements OnInit {
  @Input() stationName: any;
  @Input() data: any;
  constructor(private message: NzMessageService) {}

  ngOnInit(): void {
    // console.log(this.data)
  }
  lookImg(url) {
    if (url) {
      console.log(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);
    } else {
      this.message.create("warning", `该节点没有图片`);
    }
  }
}