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" style="color: red;">交大盒子标记</label>
    <label class="leftTitle" *ngIf="markType === 0">进出口</label>
    <label class="leftTitle" *ngIf="markType === 1">加油区</label>
    <label class="leftTitle" *ngIf="markType === 2">卸油区</label>
    <label class="leftTitle" *ngIf="markType === 3">便利店</label>

    <!-- <button nz-button *ngIf="markType === 0" [ngClass]="{selectBtn: isPolygon}"
      (click)="isPolygon = true;isAllMonitoring = false">
      进出口监控区域
      <span class="deleteItem" (click)="clearCanvasItem($event,'polygon')">删除</span>
    </button> -->

    <button nz-button *ngIf="markType === 3" [ngClass]="{selectBtn: isConvenienceStore && isDrawArrow}"
      (click)="isConvenienceStore = true;isAllMonitoring = false">
      便利店箭头标绘
      <span class="deleteItem" (click)="clearCanvasItem($event,'arrow')">删除</span>
    </button>


    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: isDrawArrow && !arrowDirection && !isAllMonitoring}"
      (click)="isDrawArrow = true;arrowDirection=null;isAllMonitoring = false">
      箭头方向标绘1
      <span class="deleteItem" (click)="clearCanvasItem($event,'arrow')">删除</span>
    </button>
    <button nz-button *ngIf="markType === 2"
      [ngClass]="{selectBtn: isDrawArrow && arrowDirection=='West'  && !isAllMonitoring}"
      (click)="isDrawArrow = true;arrowDirection='West';isAllMonitoring = false">箭头方向标绘2
      <span class="deleteItem" (click)="clearCanvasItem($event,'arrowOfWest')">删除</span>
    </button>
    <button nz-button *ngIf="markType === 2"
      [ngClass]="{selectBtn: !isDrawArrow && oilUnloadingArea && !isAllMonitoring}"
      (click)="isDrawArrow = false; oilUnloadingArea = true;isAllMonitoring = false">泄油管区域
      <span class="deleteItem" (click)="clearCanvasItem($event,'oilUnloadingAreaTrue')">删除</span>
    </button>
    <button nz-button *ngIf="markType === 2"
      [ngClass]="{selectBtn: !isDrawArrow && !oilUnloadingArea && !isAllMonitoring}"
      (click)="isDrawArrow = false; oilUnloadingArea = false;isAllMonitoring = false">静电接地仪
      <span class="deleteItem" (click)="clearCanvasItem($event,'oilUnloadingAreaFalse')">删除</span>
    </button>


    <button *ngIf="markType !== 0" nz-button [ngClass]="{selectBtn: isAllMonitoring}"
      (click)="isAllMonitoring = true;isPolygon = false;isConvenienceStore = false;">全局监控区域
      <span class="deleteItem" (click)="clearCanvasItem($event,'isAllMonitoring')">删除</span>
    </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>
  </div>


  <div class="imgbox">
    <div class="content">
      <div class="center" id="canvasCenter"><canvas id="canvas" [width]="canvasWidth" [height]="canvasHeight"></canvas>
      </div>
    </div>
  </div>
</div>