Edge-host-maintenance/src/app/system-management/image-label/image-label.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 *ngIf="markType === 0 || markType === 2 " nz-button [ngClass]="{selectBtn: selectedBtn === '停车区'}"
      (click)="selectedBtn = '停车区'">停车区
      <span class="deleteItem" (click)="clearCanvasItem($event,'carStopROI')">删除</span>
    </button>

    <button *ngIf="markType === 1" nz-button [ngClass]="{selectBtn: selectedBtn === '散装油'}"
      (click)="selectedBtn = '散装油'">散装油
      <span class="deleteItem" (click)="clearCanvasItem($event,'bulkoilROI')">删除</span>
    </button>

    <button *ngIf="markType === 2" nz-button [ngClass]="{selectBtn: selectedBtn === '闯入区'}"
      (click)="selectedBtn = '闯入区'">闯入区
      <span class="deleteItem" (click)="clearCanvasItem($event,'intrusionROI')">删除</span>
    </button>


    <!-- 矩形 -->
    <button *ngIf="markType === 2" nz-button [ngClass]="{selectBtn: selectedBtn === '卸油区'}"
      (click)="selectedBtn = '卸油区'">卸油区
      <span class="deleteItem" (click)="clearCanvasItem($event,'unloadingROI')">删除</span>
    </button>
    <button *ngIf="markType === 2" nz-button [ngClass]="{selectBtn: selectedBtn === '人'}"
      (click)="selectedBtn = '人'">人,灭火器,隔离椎
      <span class="deleteItem" (click)="clearCanvasItem($event,'xxxROI')">删除</span>
    </button>


    <button *ngIf="markType === 3" nz-button [ngClass]="{selectBtn: selectedBtn === '收银区'}"
      (click)="selectedBtn = '收银区'">收银区
      <span class="deleteItem" (click)="clearCanvasItem($event,'cashierROI')">删除</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>