<nz-card *ngIf="isTable" nzHoverable style="height: auto; margin-left: 14px" [nzBordered]="true" [nzTitle]="monitor_metrics_card_title">
  <nz-table #smallTable nzSize="small" nzNoResult="No Metrics Data" nzFrontPagination="false" [nzData]="valueRows">
    <thead>
      <tr>
        <th style="text-align: center" *ngFor="let field of fields">{{ field.name }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let valueRow of smallTable.data">
        <td *ngFor="let value of valueRow.values">{{ value.origin }}</td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>

<nz-card *ngIf="!isTable" nzHoverable style="height: auto; margin-left: 14px" [nzBordered]="true" [nzTitle]="monitor_metrics_card_title">
  <nz-table #smallTable nzSize="small" nzNoResult="No Metrics Data" nzFrontPagination="false" [nzData]="valueRows">
    <thead>
      <tr>
        <th style="text-align: center">属性</th>
        <th style="text-align: center">值</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let field of fields; let i = index">
        <td>{{ field.name }}</td>
        <td>{{ rowValues[i].origin + ' ' + (field.unit ? field.unit : '') }}</td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>

<ng-template #monitor_metrics_card_title>
  <p style="font-size: small; text-align: center; margin-bottom: 3px; color: #0c0c0c">{{ metrics }}</p>
  <div>
    <a nz-popover [nzPopoverContent]="'最近采集时间 ' + (time | _date: 'yyyy-MM-dd HH:mm:ss')">
      <i nz-icon nzType="field-time" nzTheme="outline"></i
    ></a>
    <i style="font-size: 0.3px; font-weight: normal; color: rgba(84, 83, 83, 0.89)">采集时间:{{ time | _date: 'HH:mm:ss' }}</i>
  </div>
</ng-template>

<!--<nz-card *ngIf="!isTable" nzHoverable style="height:auto;margin-left: 14px;" [nzBordered]="true"-->
<!--         [nzTitle]="monitor_metrics_card_title" >-->
<!--  <div *ngFor="let field of fields;let i = index;" nz-row nzGutter="16">-->
<!--    <div nz-col nzSpan="10"><p style="text-align: right">{{field.name}}</p></div>-->
<!--    <div nz-col nzSpan="14"><p style="text-align: left">{{rowValues[i].origin}}</p></div>-->
<!--  </div>-->
<!--</nz-card>-->
