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

<div class="box">
  <div class="titlebox">
    <div class="title">
      <div (click)="contentType('img')" [ngClass]="{'selected': selectedType == 'img'}">
        预警截图
        <div class="border"></div>
      </div>
      <div
        *ngIf="data.violation && data.violation.eventSystemName != '灭火器维护' && data.violation.eventSystemName != '证照预警'"
        (click)="contentType('video')" [ngClass]="{'selected': selectedType == 'video'}">
        预警视频
        <div class="border"></div>
      </div>
    </div>
  </div>
  <div class="details">
    预警详情：{{details}}
  </div>
  <div class="typecheckbox" *ngIf="isAnxin">
    <label *ngFor="let item of this.legendList" nz-checkbox [(ngModel)]="item.checked"
      (ngModelChange)="typeChange(item)">{{typeArr[item.id].name}}</label>
  </div>
  <div class="content">
    <div *ngIf="selectedType == 'img'" class="imgbox">
      <ng-container *ngIf="imgUrl; else elseTemplate">

        <img id="img" [src]="imgUrl" alt="" (error)="imgErr()">
        <canvas [width]="canvasWidth" [height]="canvasHeight"
          [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas"></canvas>
        <span *ngIf="isSrcError">
          图片资源未找到
        </span>
      </ng-container>
      <ng-template #elseTemplate>
        暂无图片
      </ng-template>
    </div>
    <div *ngIf="selectedType == 'video'" class="vediobox">
      <ng-container *ngIf="vedioUrl; else elseTemplate2">
        <video controls style="width: 100%;height: 100%;" [src]="vedioUrl"></video>
      </ng-container>
      <ng-template #elseTemplate2>
        暂无视频
      </ng-template>
    </div>
  </div>
  <div class="btnbox" *ngIf="isBtn">
    <button nz-button nzType="primary" [nzLoading]="isPushLoading" (click)="push()">推送</button>
    <button nz-button nzType="primary" [nzLoading]="isMisinformationLoading" nzDanger
      (click)="misinformation()">误报</button>
  </div>
</div>