Edge-host-maintenance/src/app/system-management/image-label2/image-label2.component.html

<div class="canvasBox">
  <!-- <nz-page-header class="site-page-header" (nzBack)="goback()" nzBackIcon nzSubtitle="返回上一页"></nz-page-header> -->
  <div class="btnbox">
    <label class="leftTitle" *ngIf="markType === 0">进出口</label>
    <label class="leftTitle" *ngIf="markType === 2">卸油区</label>
    <label class="leftTitle" *ngIf="markType === 3">便利店</label>
    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: isDrawArrow && !arrowDirection}"
      (click)="isDrawArrow = true;arrowDirection=null">箭头方向标绘1</button>
    <!-- <button nz-button *ngIf="markType === 2"
      [ngClass]="{selectBtn:(isDrawArrow && arrowDirection=='South')}"
      (click)="isDrawArrow = true;arrowDirection='South'">South</button> -->
    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: (isDrawArrow && arrowDirection=='West')}"
      (click)="isDrawArrow = true;arrowDirection='West'">箭头方向标绘2</button>
    <!-- <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: (isDrawArrow && arrowDirection=='East')}"
      (click)="isDrawArrow = true;arrowDirection='East'">East</button>
    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: (isDrawArrow && arrowDirection=='North')}"
      (click)="isDrawArrow = true;arrowDirection='North'">North</button> -->
    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: !isDrawArrow && oilUnloadingArea}"
      (click)="isDrawArrow = false; oilUnloadingArea = true;">泄油管区域</button>
    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: !isDrawArrow && !oilUnloadingArea}"
      (click)="isDrawArrow = false; oilUnloadingArea = false;">静电接地仪</button>
    <button nz-button nzType="primary" (click)="anewgetImg()">重新捕获摄像头图片</button>
    <button nz-button nzType="primary" (click)="save()">保存</button>
    <button nz-button nzType="primary" nzDanger nz-popconfirm nzPopconfirmTitle="您确定要清空吗?"
      (nzOnConfirm)="clearCanvas()">清空</button>
    <label *ngIf="camerasData" class="rightTitle">原始分辨率： {{camerasData.originalWeight}} ×
      {{camerasData.originalHeight}}</label>

    <!-- <label *ngIf="markType === 2 && !isDrawArrow" class="rightTitle">当前矩形框高度为:{{rectangleHeight}}px,请确保低于420px</label> -->
  </div>
  <div class="imgbox">
    <div class="content">
      <div class="center" id="canvasCenter"><canvas id="canvas" [width]="canvasWidth" [height]="canvasHeight"></canvas>
      </div>
    </div>
  </div>
</div>