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() 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', `该节点没有图片`);
    }
  }
}