
<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
      <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
        <div nz-col nzSpan="12" class="p-md text-white">
          <div class="h2 mt0">{{data.device.count}}</div>
          <p class="text-nowrap mb0">设备总量</p>
        </div>
        <div nz-col nzSpan="12">
          <g2-mini-bar
            *ngIf="data.device.count"
            height="35"
            color="#fff"
            borderWidth="3"
            [padding]="[5, 30]"
            [data]="data.device.data"
            tooltipType="mini"
          ></g2-mini-bar>
        </div>
      </div>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
      <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
        <div nz-col nzSpan="12" class="p-md text-white">
          <div class="h2 mt0">{{data.onlinedevice.count}}</div>
          <p class="text-nowrap mb0">在线设备</p>
        </div>
        <div nz-col nzSpan="12">
          <g2-mini-bar
            *ngIf="data.onlinedevice.count"
            height="35"
            color="#fff"
            borderWidth="3"
            [padding]="[5, 30]"
            [data]="data.onlinedevice.data"
            tooltipType="mini"
          ></g2-mini-bar>
        </div>
      </div>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
      <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
        <div nz-col nzSpan="12" class="p-md text-white">
          <div class="h2 mt0">最新遥测</div>
          <p class="text-nowrap mb0">{{data.telemetrydata.count}} </p>
        </div>
        <div nz-col nzSpan="12">
          <g2-mini-bar
            *ngIf="data.telemetrydata.count"
            height="35"
            color="#fff"
            borderWidth="3"
            [padding]="[5, 30]"
            [data]="data.telemetrydata.data"
            tooltipType="mini"
          ></g2-mini-bar>
        </div>
      </div>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
      <div nz-row nzType="flex" nzAlign="middle" class="bg-magenta rounded-md">
        <div nz-col nzSpan="12" class="p-md text-white">
          <div class="h2 mt0">事件</div>
          <p class="text-nowrap mb0">{{data.events.count}}</p>
        </div>
        <div nz-col nzSpan="12">
          <g2-mini-bar
            *ngIf="data.events.count"
            height="35"
            color="#fff"
            borderWidth="3"
            [padding]="[5, 30]"
            [data]="data.events.data"
            tooltipType="mini"
          ></g2-mini-bar>
        </div>
      </div>
    </div>
  </div>
