<ion-header style="background-color: #F3F4F4" translucent="false">
  <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">
            <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%">
            <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-content style="padding-top: 5px; padding-bottom: 5px;">-->
<!--      <div class="sub" style="text-align: center; " style="width:100%">-->
<!--        &lt;!&ndash;<ion-icon name="ios-heart" style="padding: auto"></ion-icon>&ndash;&gt;-->
<!--        <ion-row style="width:100%">-->
<!--          <ion-col style="padding: 5px; width:51%; border-right:1px solid lightgray">-->
<!--            <div>-->
<!--              <div style="height: 60px; float:left; width: 40%">-->
<!--                <ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
<!--              </div>-->
<!--              <div style="height: 60px; float:left; width: 60%">-->
<!--                <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:48%">-->
<!--            <div>-->
<!--              <div style="height: 60px; float:left; width: 40%">-->
<!--                <ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
<!--              </div>-->
<!--              <div style="height: 60px; float:left; width: 60%">-->
<!--                <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>
