<div style="padding: 0 15px;max-width: 1300px;">
  <div>

  </div>
  <div nz-row nzGutter="16" style="margin-top: 30px">
    <div nz-col nzSpan="5" >
      <div class="main-bk1-color titleStatic">
        <span class="main-font-title">当月设备消息量</span><br>
        <span class="main-font-content">{{device.msgNum | number:'0.0-0'}}</span>
      </div>
    </div>
    <div nz-col nzSpan="5">
      <div class="main-bk1-color titleStatic">
        <span class="main-font-title">当月设备在线时长(min)</span><br>
        <span class="main-font-content">{{device.runTime | number:'0.0-0'}}</span>
      </div>
    </div>
    <div nz-col nzSpan="5">
      <div class="main-bk1-color titleStatic">
        <span class="main-font-title">设备总数</span><br>
        <span class="main-font-content">{{device.total | number:'0.0-0'}}</span>
      </div>
    </div>
    <div nz-col nzSpan="5">
      <div class="main-bk1-color titleStatic">
        <span class="main-font-title">应用项目数</span><br>
        <span class="main-font-content">20</span>
      </div>
    </div>
    <div nz-col nzSpan="4">
      <div class="main-bk1-color titleStatic">
        <span class="main-font-title">当前设备使用率</span><br>
        <span class="main-font-content">{{device.useRate | number:'0.0-0'}}%</span>
      </div>
    </div>
  </div>
  <div nz-row nzGutter="12" style="margin-top: 30px;">
    <div nz-col nzSpan="12">
      <nz-card nzTitle="客户使用率" style="height: 550px;">
        <div nz-row [nzGutter]="16">
          <nz-col [nzSpan]="12">
            <nz-statistic [nzValue]="device.todayTime | number:'0.0-0'" [nzTitle]="'今日客户使用次数'"></nz-statistic>
            <div echarts [options] = "dailyUseRateOption" class="demo-chart"></div>
          </nz-col>
          <nz-col [nzSpan]="12">
            <nz-statistic [nzValue]="2.7 | number" [nzTitle]="'平均每日使用次数'"></nz-statistic>
            <div echarts [options] = "dailyUseTimesRateOption" class="demo-chart"></div>
          </nz-col>
        </div>
        <nz-table #basicTable [nzData]="useList" [nzPageSize]="5">
          <thead>
          <tr>
            <th>排名</th>
            <th>客户名称</th>
            <th>使用次数</th>
            <th>周涨幅</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of basicTable.data">
            <td class="main-table-content">{{data.rank}}</td>
            <td class="main-table-content">{{data.name}}</td>
            <td class="main-table-content">{{data.useTime | number:'0.0-0'}}</td>
            <td class="main-table-content">{{data.weekRaise}}%</td>
          </tr>
          </tbody>
        </nz-table>
      </nz-card>

    </div>

    <div nz-col nzSpan="12">
      <nz-card nzTitle="设备类型占比" style="height: 550px;">
        <div echarts [options] = "deviceTypeOption" class="demo-type-chart"></div>
      </nz-card>
    </div>
  </div>

  <div nz-row style="margin-top: 30px;">
    <nz-card nzTitle="应用列表" class="cardHover">
      <div class="cont-block" *ngFor="let one of useList" (click)="toDetail(one)">
        <nz-card [nzCover]="coverTemplate">
          <p>{{one.title}}</p>
          <span>{{one.description}}</span>
        </nz-card>
        <ng-template #coverTemplate>
          <img alt="example" [src]= one.img />
        </ng-template>
      </div>

    </nz-card>
  </div>

  <!--<div class="center">-->
    <!--&lt;!&ndash;<div echarts [options] = "charLineOption" class="demo-chart"></div>&ndash;&gt;-->
    <!--<div class= "Statistics"></div>-->
    <!--<div class= "Statistics"></div>-->
  <!--</div>-->

    <!--<nz-card style="width:300px;" class="flag" nzTitle="��������" [nzExtra]="extraTemplate">-->
      <!--<p>21 ��</p>-->
    <!--</nz-card>-->
  <!--<div class = "right" >-->
    <!--<div echarts [options] = "chartRadarOption" class="demo-chart"></div>-->
    <!--<p>Static</p>-->
    <!--<div class= "Statistics"></div>-->
    <!--<div class= "Statistics"></div>-->
  <!--</div>-->

</div>
