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)">
      <div style="width: 10px;height: 10px;display: inline-block;" [ngStyle]="{'background': typeArr[item.id].color}">
      </div>
      {{typeArr[item.id].name}}
    </label>
    <button nz-button nzType="primary" (click)="downImg()">导出图片</button>
  </div>
  <div class="content">
    <div [hidden]="!(selectedType == 'img')" class="imgbox">
      <ng-container *ngIf="imgUrl; else elseTemplate">
        <img [id]="'img'+data.id" [src]="imgUrl" alt="" (error)="imgErr()">
        <canvas *ngIf="isAnxin" [width]="canvasWidth" [height]="canvasHeight"
          [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" class="canvas" [id]="'canvas'+data.id"></canvas>
        <span *ngIf="isSrcError" class="SrcError">
          图片资源未找到
        </span>
        <div *ngIf="isCarStop && isAnxin" class="pageturning lastpage" (click)="pageturning('last')">
          <i nz-icon nzType="left" nzTheme="outline"></i>
        </div>
        <div *ngIf="isCarStop && isAnxin" class="pageturning nextpage" (click)="pageturning('next')">
          <i nz-icon nzType="right" nzTheme="outline"></i>
        </div>
        <div *ngIf="isAnxin && coordinate.length === 0" class="noCoordinate">
          预警坐标信息获取失败
        </div>
      </ng-container>
      <ng-template #elseTemplate>
        <span class="SrcError">暂无图片</span>
      </ng-template>
    </div>
    <div [hidden]="!(selectedType == 'video')" class="vediobox">
      <ng-container *ngIf="vedioUrl; else elseTemplate2">
        <video controls [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>