Sinopec-Anxin/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html

<div class="box" cdkDrag>
  <div class="titlebox">
    <div class="title" cdkDragHandle>
      <div (click)="contentType('img')" [ngClass]="{'selected': selectedType == 'img'}">
        预警截图
        <div class="border"></div>
      </div>
      <div *ngIf="data.violation && data.violation.violationType != '设备监测' && data.violation.violationType != '证照资质'"
        (click)="contentType('video')" [ngClass]="{'selected': selectedType == 'video'}">
        预警视频
        <div class="border"></div>
      </div>
    </div>
    <div class="close" (click)="closeModel()">
      <i nz-icon nzType="close" nzTheme="outline"></i>
    </div>
  </div>
  <div class="details">
    预警详情：{{details}}
  </div>
  <div class="typecheckbox" *ngIf="isAnxin && selectedType == 'img'"
    [ngClass]="{'typecheckboxmargin': isShowAxOtherRegion}">
    <ng-container *ngIf="isShowAxOtherRegion">
      <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>
    </ng-container>


    <!-- <button nz-button nzType="primary" (click)="downImg()">导出图片</button> -->
  </div>
  <div class="content">
    <div [hidden]="!(selectedType == 'img')" class="imgbox" [ngClass]="{'imgboxAX': isAnxin}">
      <ng-container *ngIf="imgUrl; else elseTemplate">
        <ng-container *ngIf="isImage; else elseTemplate2">
          <img id="img" [src]="imgUrl" alt="">
          <canvas *ngIf="isAnxin" [width]="canvasWidth" [height]="canvasHeight"
            [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas"></canvas>
        </ng-container>
        <ng-template #elseTemplate2>
          <iframe style="margin-bottom: 12px;" width="100%" height="100%" [src]="fileUrl" frameborder="0"></iframe>
        </ng-template>
      </ng-container>
      <ng-template #elseTemplate>
        暂无图片
      </ng-template>
    </div>
    <div [hidden]="!(selectedType == 'video')" class="vediobox">
      <ng-container *ngIf="vedioUrl; else elseTemplate3">
        <video crossorign="anonymous" controls [src]="vedioUrl"></video>
      </ng-container>
      <ng-template #elseTemplate3>
        暂无视频
      </ng-template>
    </div>
  </div>
  <p style="margin-bottom: 0px;margin-top: 3px;box-sizing: border-box;padding: 0 12px;"
    *ngIf="data.appealStatus == 3 && data.handleStateStr != '已处置'">
    <span style="margin-right: 10px;">驳回人:{{data.appealLog.auditUser.name}}</span>
    <span style="margin-right: 10px;">驳回时间:{{data.appealLog.auditTime | date:"yyyy-MM-dd HH:mm:ss"}}</span>
    <span>驳回说明:{{data.appealLog.rejectReason}}</span>
  </p>
  <!-- 只有非证照预警才可以处置 或者 申诉-->
  <div class="disposebox" *ngIf="!isLicenseWarning">
    <div class="title">
      <span>处置内容</span>
      <ng-container *ngIf="!data.positive; else elseTemplate">
        <span *ngIf="data.appealStatus == 5" style="color: #4BFFD4;">申诉成功 ( 处理人 : {{data.handleUserName}}&nbsp;
          处理时间 : {{data.lastModificationTime |
          date:"yyyy-MM-dd HH:mm:ss"}} ) </span>
        <span style="color: #4BFFD4;cursor: default;">已进行误报处置</span>
      </ng-container>
      <ng-template #elseTemplate>
        <div class="btn">
          <span *ngIf="!data.handleTime && data.appealStatus ==1 && isSubmit"
            style="color: #FF4B65;cursor: pointer;margin-right: 20px;" (click)="Unappeal()">申诉撤销</span>
          <span
            *ngIf="!data.handleTime && (data.appealStatus == 0 || data.appealStatus == 3 || data.appealStatus == 4) && isSubmit"
            style="color: #FF4B65;cursor: pointer;margin-right: 20px;" (click)="appeal()">申诉</span>
          <nz-modal [(nzVisible)]="isAppeal" nzTitle="申诉原因" (nzOnOk)="handleOk()" (nzOnCancel)="handleCancel()">

            <ng-container *nzModalContent>
              <textarea nz-input rows="2" placeholder="请输入申诉原因" name="appeal" [(ngModel)]="appealValue"></textarea>
              <div class="appealUploadbox">
                <div class="title">
                  上传附件:
                </div>
                <div class="btn">
                  <button nz-button [nzLoading]="isLoadingSave">
                    <span nz-icon nzType="upload"></span>上传
                  </button>
                  <input type="file" name="" id="" (change)="filechange($event)" *ngIf="!isLoadingSave">
                  <ul>
                    <li *ngFor="let item of fileList;let key = index">
                      <span class="filename" (click)="lookfile(item)">{{item | fileName}}</span>
                      <span (click)="delete(fileList,key)">x</span>
                    </li>
                  </ul>
                </div>
              </div>
            </ng-container>

          </nz-modal>
          <span
            *ngIf="isMisinformation &&  (data.appealStatus == 0 || data.appealStatus == 3 || data.appealStatus == 4)"
            style="color: #FF4B65;cursor: pointer;margin-right: 20px;" (click)="misinformation()">误报</span>
          <span
            *ngIf="!data.handleTime && isSubmit && (data.appealStatus == 0 || data.appealStatus == 3 || data.appealStatus == 4)"
            style="color: #36A2FF;cursor: pointer;" (click)="submit()">提交</span>
          <span *ngIf="data.handleTime" style="color: #4BFFD4;cursor: default;">已处置</span>
          <span *ngIf="data.appealStatus == 1" style="color: #4BFFD4;cursor: default;">申诉中</span>
        </div>
      </ng-template>
    </div>

    <div class="disposeContent">
      <textarea
        *ngIf="!data.handleTime && isSubmit && (data.appealStatus == 0 || data.appealStatus == 3 || data.appealStatus == 4)"
        [(ngModel)]="content"></textarea>
      <span *ngIf="data.handleTime && content">{{content}}</span>
    </div>
    <div class="disposeTime" *ngIf="data.handleTime">
      <span style="margin-right: 12px;">
        处置人：{{data.handleUserName}}
      </span>
      <span>
        处置时间：{{data.handleTime|date:"yyyy-MM-dd HH:mm:ss"}}
      </span>
    </div>
    <div class="disposeTime" *ngIf="data.appealStatus == 1">
      <span style="color: #4BFFD4;cursor: default;">
        <span>申诉人:</span>
        <span style="margin-right: 12px;">{{data.appealLog.creatorUser.name}}</span>
        <span>申诉时间:</span>
        <span>{{data.appealLog.committedTime | date:"yyyy-MM-dd HH:mm:ss"}}</span>
      </span>
    </div>
  </div>
</div>