<ion-header>
  <ion-toolbar color="secondary">
    <ion-buttons slot="start">
      <ion-back-button text="" ></ion-back-button>
    </ion-buttons>
    <ion-title mode="ios" class="title">{{fieldRegionName}}详情页</ion-title>
  </ion-toolbar>
  <div style="margin-top: 5px;margin-bottom: 7px;background-color: #F0F0F0">
    <span [ngClass]="{'online': item.online, 'offline': !item.online}">{{item.online ? '在线' : '离线'}}    </span>
    <span *ngIf="item.online" class="online">{{item.remoteMode ? '平控' :'现控'}}    </span>
    <span *ngIf="item.online && item.remoteMode && item.wokeMode === 2" class="online">智控    </span>
    <span *ngIf="item.online && item.remoteMode && item.wokeMode === 1" class="online">自控    </span>
    <span *ngIf="item.online && item.remoteMode && item.wokeMode === 0" class="online">手控    </span>
  </div>
  <div style="background-color: #F0F0F0">
    <v-kanban class="home-bar" name="温度" iconClass="vo v-wendu" iconColor="#285B90" iconSize="22px"></v-kanban>
    <v-kanban class="home-bar" name="湿度" iconClass="vo v-shidu" iconColor="#285B90" iconSize="22px"></v-kanban>
    <v-kanban class="home-bar" name="热应激" iconClass="vo v-nav-ico" iconColor="#285B90" iconSize="22px"></v-kanban>
    <v-kanban class="home-bar" name="在舍状态" iconClass="vo v-dapeng-" iconColor="#285B90" iconSize="22px"></v-kanban>
  </div>
</ion-header>

<ion-content style="background-color: #F3F4F4;">
  <ion-toolbar>
    <!--<ion-buttons slot="start">-->
    <!--<ion-back-button></ion-back-button>-->
    <!--</ion-buttons>-->
    <ion-title mode="ios" style="text-align: center;">详情页</ion-title>
  </ion-toolbar>
  <ion-router-outlet></ion-router-outlet>
  <ion-tabs>
    <!-- Tab bar -->
    <ion-tab-bar slot="top">
      <ion-tab-button tab="fan">
        <ion-label>风机</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="shower">
        <ion-label>喷淋</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="light">
        <ion-label>照明</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="waterchannel">
        <ion-label>水槽</ion-label>
      </ion-tab-button>
      <!--<ion-tab-button tab="settings">-->
        <!--<ion-icon name="settings"></ion-icon>-->
      <!--</ion-tab-button>-->
      <!--<ion-tab-button tab="settings">-->
        <!--<ion-icon name="settings"></ion-icon>-->
      <!--</ion-tab-button>-->
    </ion-tab-bar>
  </ion-tabs>

</ion-content>
