<ion-header>
  <ion-toolbar>
    <ion-title class="title">牛舍告警一览</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="light">

  <ion-card *ngFor="let item of alarmItems" style="margin-top:10px; margin-bottom:0px;">
    <ion-card-header style="padding-top: 3px; padding-bottom: 3px;">
      <ion-card-title style="display: inline-block" style="width:100%">
        <div class="cardTitle">
          <i class="vo v-fangzi"></i>
          <span style="margin-left:10px">{{item.fieldRegionName}}</span>
          <span class="alarmNum">{{item.total}}</span>
          <span style="float:right; padding-right: 5px;">
            <!--<ion-popover-controller></ion-popover-controller>-->
            <a (click)="presentPopover(item)" [id]="item.fieldRegionNo">近一年</a>
          </span>
        </div>
      </ion-card-title>
    </ion-card-header>
    <ion-card-content style="padding-top: 5px; padding-bottom: 5px;">
      <div class="sub" style="text-align: center; " style="width:100%">
        <!--<ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
        <ion-row style="width:100%">
          <ion-col style="padding: 5px; width:50%; border-right:1px solid lightgray" (click)="toControl(item, 'trouble')">
            <div>
              <div style="height: 60px; width: 100%">
                <div style="height: 35px; float:left;width: 100%">
                  <span class="label">未解决故障数</span><span style="color:#d33939; font-size:24px;">{{item.devErr}}</span>
                </div>
                <div style="height: 25px; float:left;width: 100%">
                  <span class="label">总数</span><span>{{item.devErrTotal}}</span>
                </div>
              </div>
            </div>
          </ion-col>

          <ion-col style="padding: 5px; width:50%" (click)="toControl(item, 'alarm')">
            <div>
              <div style="height: 60px; width: 100%">
                <div style="height: 35px; float:left;width: 100%">
                  <span class="label">未解决预警数</span><span style="color:#f0ca45; font-size:24px;">{{item.alarm}}</span>
                </div>
                <div style="height: 25px; float:left;width: 100%">
                  <span class="label">总数</span><span>{{item.alarmTotal}}</span>
                </div>
              </div>
            </div>
          </ion-col>
        </ion-row>
      </div>
    </ion-card-content>

  </ion-card>

</ion-content>
