首页小补了一下，补充了报警详情页

config.xml

 <?xml version='1.0' encoding='utf-8'?>
 <widget id="com.witium.muchang" version="2.9.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>牧场云</name>
-    <description>牧场物业管理系统</description>
-    <author email="frank.feng@witium.com" href="http://muchang.witium.com/">Van.chen&frank.feng</author>
+    <description>test</description>
+    <author email="frank.feng@witium.com" href="http://muchang.witium.com/">Van.chen - frank.feng</author>
     <content src="index.html" />
     <access origin="*" />
     <allow-intent href="http://*/*" />

src/app/app-routing.module.ts

@@ -18,6 +18,9 @@ import {EnvWaterchannelPage} from './envCtrl/env-waterchannel/env-waterchannel.p
 import {EnvAnalPage} from './envCtrl/env-anal/env-anal.page';
 import {EnvAlarmPage} from './envCtrl/env-alarm/env-alarm.page';
 import {EnvAlarmDetailPage} from './envCtrl/env-alarm-detail/env-alarm-detail.page';
+import {EnvCfgPageModule} from './envCtrl/env-cfg/env-cfg.module';
+import {EnvCfgPage} from './envCtrl/env-cfg/env-cfg.page';
+import {EnvHomePage} from './envCtrl/env-home/env-home.page';
 
 const routes: Routes = [
     {
@@ -45,8 +48,9 @@ const routes: Routes = [
             {path: '', redirectTo: 'fan',pathMatch:'prefix'},
         ]
     },
+    {path: 'env-alarmDetail', component: EnvAlarmDetailPage},
     {path: 'tabs', loadChildren: './envCtrl/tabs/tabs.module#TabsPageModule'},
-    //{path: 'd', component: EnvAlarmDetailPage},
+    {path: 'd', component: EnvHomePage},
   { path: 'env-alarm-detail', loadChildren: './envCtrl/env-alarm-detail/env-alarm-detail.module#EnvAlarmDetailPageModule' },
 
 ];

src/app/app.module.ts

@@ -80,7 +80,9 @@ import {EnvAlarmDetailPage} from './envCtrl/env-alarm-detail/env-alarm-detail.pa
         EnvWaterchannelPage,
         // EnvAnalPage,
         // EnvAlarmPage,
-        // EnvAlarmDetailPage,
+        EnvAlarmDetailPage,
+        //EnvCfgPage,
+        EnvHomePage,
     ],
     entryComponents: [],
     imports: [

src/app/components/kanban/kanban.component.html

 <div class="kanban">
   <div class="title" style="">
-      风机
+      {{name}}
   </div>
   <div class="sub" style="text-align: left;margin-top: 5px;">
     <div class="sub-left" style="">

src/app/components/kanban/kanban.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 
 @Component({
   selector: 'v-kanban',
@@ -7,6 +7,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class KanbanComponent implements OnInit {
 
+  @Input()
+  name = '';
+
   constructor() { }
 
   ngOnInit() {}

src/app/envCtrl/env-alarm-detail/env-alarm-detail.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EnvAlarmDetailPage } from './env-alarm-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EnvAlarmDetailPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [EnvAlarmDetailPage]
+})
+export class EnvAlarmDetailPageModule {}

src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.html

+
+<ion-header style="background-color: #F3F4F4;" translucent="false">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title style="text-align: center">{{fieldRegionName}}告警详情页</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+<!--<div class="mainCon">-->
+
+<!--</div>-->
+
+<ion-content color="light" style="background-color: #F3F4F4;">
+  <ion-segment scrollable style="position: sticky;">
+    <ion-segment-button>
+      <ion-label>故障</ion-label>
+    </ion-segment-button>
+    <ion-segment-button checked>
+      <ion-label>预警</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+  <h1 style="
+              font-size: 16px;
+              padding-left: 5px;
+              border-left: 5px solid #28c9bd;
+              line-height: 25px;
+              margin-bottom: 5px;">全部预警</h1>
+
+  <div class="jazz-timeline-wrapper">
+    <div class="jazz-timeline thin-timeline">
+
+      <div class="timeline-post">
+        <div class="timeline-icon icon-larger iconbg-turqoise icon-color-white">
+          <div class="icon-placeholder">Dec <span>25</span></div>
+          <div class="timeline-bar"></div>
+        </div>
+        <div class="timeline-content">
+          <h1 class="content-title"> 一号组风机故障 </h1>
+          <div class="content-details">
+            <p>2019-08-16 </p> <ion-button color="primary" size="small" style="display: inline-block">确认修复</ion-button>
+          </div>
+        </div><!-- timeline content -->
+      </div><!-- .timeline-post -->
+
+      <div class="timeline-post">
+        <div class="timeline-icon icon-larger iconbg-black icon-color-white">
+          <div class="icon-placeholder">Nov <span>24</span></div>
+          <div class="timeline-bar"></div>
+        </div>
+        <div class="timeline-content">
+          <h2 class="content-title"> 二号组风机故障 </h2>
+          <div class="content-details">
+            <p>2019-08-16 </p> <ion-button color="primary" size="small" style="display: inline-block">确认修复</ion-button>
+          </div>
+        </div><!-- timeline content -->
+      </div><!-- .timeline-post -->
+
+      <div class="timeline-post">
+        <div class="timeline-icon icon-larger iconbg-brown icon-color-white">
+          <div class="icon-placeholder">Oct <span>12</span></div>
+          <div class="timeline-bar"></div>
+        </div>
+        <div class="timeline-content">
+          <h2 class="content-title"> 二号水槽故障 </h2>
+          <div class="content-details">
+            <p>2019-08-16 </p> <ion-button color="primary" size="small" style="display: inline-block">确认修复</ion-button>
+          </div>
+        </div><!-- timeline content -->
+      </div><!-- .timeline-post -->
+
+    </div>
+  </div>
+</ion-content>
+

src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.scss

+.jazz-timeline-wrapper{
+  margin-top: 0px;
+  padding-top: 5px;
+  padding-bottom: 3px;
+
+  .content-title{
+    font-size: 20px;
+  }
+}
+
+.mainCon{
+  //height: 100%;
+  background-color: white;
+  //overflow-x: hidden;-webkit-overflow-scrolling: touch;
+  //padding-top: 45px;
+  //margin-bottom: 90px;
+}
+

src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EnvAlarmDetailPage } from './env-alarm-detail.page';
+
+describe('EnvAlarmDetailPage', () => {
+  let component: EnvAlarmDetailPage;
+  let fixture: ComponentFixture<EnvAlarmDetailPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EnvAlarmDetailPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EnvAlarmDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'v-env-alarm-detail',
+  templateUrl: './env-alarm-detail.page.html',
+  styleUrls: ['./env-alarm-detail.page.scss'],
+})
+export class EnvAlarmDetailPage implements OnInit {
+
+  fieldRegionNo = '';
+  fieldRegionName = '';
+  fieldRegionGroup = '';
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/envCtrl/env-alarm/env-alarm.page.html

-<ion-header style="background-color: #F3F4F4">
+<ion-header style="background-color: #F3F4F4" translucent="false">
   <ion-toolbar>
-    <ion-title>牛舍告警一览</ion-title>
+    <ion-title class="title">牛舍告警一览</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content color="light">
-  <div class="alarmItem" *ngFor="let a of alarm">
-    <div class="title">
+<ion-content color="light" style="height: 100%">
+  <div class="alarmItem" *ngFor="let a of alarm" (click)="toControl(a)">
+    <div class="listTitle">
       <span>{{a.farm}}</span>
       <span style="float:right;">近一年</span>
     </div>

src/app/envCtrl/env-alarm/env-alarm.page.scss

 .alarmItem{
   // background: url("../../../assets/bg/alarm-banner.png");
   background-color: white;
-  .title{
+  .listTitle{
     padding: 10px;
   }
   .alarmContent{
@@ -17,3 +17,8 @@
 .v-guzhang{
   color: #ffd31a;
 }
+
+.title{
+  text-align: center;
+  padding-left: 0px
+}

src/app/envCtrl/env-alarm/env-alarm.page.ts

 import { Component, OnInit } from '@angular/core';
+import {Api} from '../../service/api';
+import {NavController} from '@ionic/angular';
 
 @Component({
   selector: 'v-env-alarm',
@@ -27,9 +29,19 @@ export class EnvAlarmPage implements OnInit {
       alarmTotal:13
   },];
 
-  constructor() { }
+  constructor(private api: Api,public nav: NavController) { }
 
   ngOnInit() {
   }
 
+    toControl(one){
+        const query = '/env-alarmDetail?name=' + one.farm;
+        // this.tf.transfer({
+        //     url: '/' + one.url,
+        //     query: query,
+        //     hash: ''
+        // });
+        console.log(query);
+        this.nav.navigateForward(query);
+    }
 }

src/app/envCtrl/env-cfg/env-cfg.page.html

 <ion-header>
   <ion-toolbar>
-    <ion-title>envCfg</ion-title>
+    <ion-title class="title">配置</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
+  <ion-item lines="full">
+    <ion-label>请选择牛舍</ion-label>
+    <ion-select multiple="false" cancelText="取消" okText="确认" (ionChange)="selFarmEvent()">
+      <ion-select-option *ngFor="let a of cowFarm" value="a.value">{{a.name}}</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <ion-item lines="full">
+    <ion-label>智慧模式选择</ion-label>
+    <ion-toggle slot="end" name="apple" color="secondary" checked style="width:50px"></ion-toggle>
+  </ion-item>
+  <ion-label text-wrap color="danger" style="margin-left: 20px">选择智慧模式时，风机/喷淋/照明的控制将强制进入有环境条件影响的自控模式</ion-label>
+  <ion-item-divider>
+    <ion-label>风机模式配置</ion-label>
+    <ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="workModeSetting.workMode" [(value)]="workModeSetting.workMode"  (ionChange)="workModeEvent()">
+      <ion-select-option value="0">自控模式</ion-select-option>
+      <ion-select-option value="1">手控模式</ion-select-option>
+    </ion-select>
+  </ion-item-divider>
+  <ion-item class="fanItem" lines="none">
+    <ion-grid>
+      <ion-row>
+        <ion-col>
+          <ion-item class="fanItem">
+            <ion-label>风机模式</ion-label>
+            <ion-input slot="end" placeholder="模式一"></ion-input>
+          </ion-item>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <ion-item class="fanItem">
+            <ion-label position="fixed">开启温度</ion-label>
+            <ion-input placeholder="25" (ionFocus)="fanTempHaveFouch()"></ion-input>
+            <ion-label position="fixed">℃</ion-label>
+          </ion-item>
+        </ion-col>
+        <ion-col>
+          <ion-item class="fanItem">
+            <ion-label position="fixed">关闭温度</ion-label>
+            <ion-input placeholder="25" (ionFocus)="fanTempHaveFouch()"></ion-input>
+            <ion-label position="fixed">℃</ion-label>
+          </ion-item>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ion-item>
 
+  <ion-item-divider>
+    <ion-label>喷淋模式配置</ion-label>
+    <ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="workModeSetting.workMode" [(value)]="workModeSetting.workMode"  (ionChange)="workModeEvent()">
+      <ion-select-option value="0">自控模式</ion-select-option>
+      <ion-select-option value="1">手控模式</ion-select-option>
+    </ion-select>
+  </ion-item-divider>
+    <ion-item-sliding *ngFor="let cfg of fanCfg">
+      <ion-item class="fanItem">
+        <ion-grid>
+        <ion-row style="width: 100%">
+          <ion-col size="auto" style="font-size: 13px;">
+            <ion-item class="fanItem" lines="none">
+          <ion-label style="width:80px">模式名</ion-label>
+          <ion-input placeholder={{cfg.name}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>
+        </ion-item>
+          </ion-col>
+          <ion-col size="auto" style="font-size: 13px;">
+            <ion-item class="timepickerItem" lines="none">
+              <ion-label style="width:80px">间隔时间</ion-label>
+              <ion-input placeholder={{cfg.timeInterval}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>
+            </ion-item>
+          </ion-col>
+        </ion-row>
+        <ion-row style="width: 100%">
+          <ion-col size="auto" style="font-size: 13px;">
+            <ion-item class="fanItem" lines="none">
+              <ion-label style="width:80px">设置温度</ion-label>
+              <ion-input placeholder={{cfg.tempSet}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>
+            </ion-item>
+          </ion-col>
+          <ion-col size="auto" style="font-size: 13px;">
+            <ion-item class="fanItem" lines="none">
+              <ion-label style="width:80px">偏差温度</ion-label>
+              <ion-input placeholder={{cfg.tempOffset}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>
+            </ion-item>
+          </ion-col>
+        </ion-row>
+          <ion-row style="width: 100%">
+            <ion-col size="auto" style="font-size: 13px;">
+              <ion-item class="fanItem" lines="none">
+                <ion-label style="width:80px">A区喷水时间</ion-label>
+                <ion-input placeholder={{cfg.ATmr}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>
+              </ion-item>
+            </ion-col>
+            <ion-col size="auto" style="font-size: 13px;">
+              <ion-item class="fanItem" lines="none">
+                <ion-label style="width:80px">B区喷水时间</ion-label>
+                <ion-input placeholder={{cfg.BTmr}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </ion-item>
+      <ion-item-options side="end">
+        <ion-button color='danger' expand="full" style="width:15%;height:90%" >删除</ion-button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+  <ion-item-divider>
+    <ion-label>照明配置</ion-label>
+    <ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="workModeSetting.workMode" [(value)]="workModeSetting.workMode"  (ionChange)="workModeEvent()">
+      <ion-select-option value="0">自控模式</ion-select-option>
+      <ion-select-option value="1">手控模式</ion-select-option>
+    </ion-select>
+  </ion-item-divider>
+  <ion-item-sliding *ngFor="let cfg of lightCfg">
+    <ion-item style="--padding-start: 0px">
+      <ion-grid>
+        <ion-row style="width: 100%">
+          <ion-col size="auto" style="font-size: 13px;">
+            <ion-item style="font-size: 13px;--padding-start: 0px" lines="none">
+              <ion-label style="width:80px">模式名</ion-label>
+              <ion-input placeholder={{cfg.name}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>
+            </ion-item>
+          </ion-col>
+        </ion-row>
+        <ion-row style="width: 100%">
+          <ion-col size="auto" style="font-size: 13px;">
+            <ion-item class="timepickerItem" lines="none">
+              <ion-label style="width:80px">日期范围</ion-label>
+              <!--<ion-input placeholder={{cfg.startTime}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>-->
+              <ion-datetime displayFormat="MM-DD" placeholder="Date" class="timepicker"></ion-datetime>
+            </ion-item>
+          </ion-col>
+          <ion-col size="auto" style="font-size: 13px;">
+            <ion-item class="timepickerItem" lines="none">
+              <ion-label style="width:80px">~</ion-label>
+              <!--<ion-input placeholder={{cfg.endTime}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>-->
+              <ion-datetime displayFormat="MM-DD" placeholder="Date" class="timepicker"></ion-datetime>
+            </ion-item>
+          </ion-col>
+        </ion-row>
+        <ion-row style="width: 100%">
+          <ion-col size="auto" style="font-size: 13px;">
+            <ion-item style="font-size: 13px;--padding-start: 0px" lines="none">
+              <ion-label style="width:80px">开灯时间</ion-label>
+              <ion-input placeholder={{cfg.onTime}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>
+            </ion-item>
+          </ion-col>
+          <ion-col size="auto" style="font-size: 13px;">
+            <ion-item style="font-size: 13px;--padding-start: 0px" lines="none">
+              <ion-label style="width:80px">关灯时间</ion-label>
+              <ion-input placeholder={{cfg.offTime}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>
+            </ion-item>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-item>
+    <ion-item-options side="end">
+      <ion-button color='danger' expand="full" style="width:15%;height:90%" >删除</ion-button>
+    </ion-item-options>
+  </ion-item-sliding>
+
+
+  <ion-item-divider>
+    <ion-label>水槽预警时间段配置</ion-label>
+  </ion-item-divider>
+  <ion-item-sliding>
+    <ion-item style="--padding-start: 0px">
+      <ion-grid>
+        <ion-row style="width: 100%">
+          <ion-col size="auto" style="font-size: 13px;">
+            <ion-item class="timepickerItem" lines="none">
+              <ion-label style="width:80px">日期范围</ion-label>
+              <!--<ion-input placeholder={{cfg.startTime}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>-->
+              <ion-datetime displayFormat="MM-DD" placeholder="Date" class="timepicker"></ion-datetime>
+            </ion-item>
+          </ion-col>
+          <ion-col size="auto" style="font-size: 13px;">
+            <ion-item class="timepickerItem" lines="none">
+              <ion-label style="width:80px">~</ion-label>
+              <!--<ion-input placeholder={{cfg.endTime}} (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>-->
+              <ion-datetime displayFormat="MM-DD" placeholder="Date" class="timepicker"></ion-datetime>
+            </ion-item>
+          </ion-col>
+        </ion-row>
+        <ion-row style="width: 100%">
+          <ion-label text-wrap color="danger">上述时间段内，加热设备电流过低时，系统将会发出预警信息</ion-label>
+        </ion-row>
+      </ion-grid>
+    </ion-item>
+    <ion-item-options side="end">
+      <ion-button color='danger' expand="full" style="width:15%;height:90%" >删除</ion-button>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-divider>
+    <ion-label>牛群在/离舍配置</ion-label>
+  </ion-item-divider>
+  <ion-item class="cow">
+    <ion-grid>
+      <ion-row>
+        <ion-col>牛群回舍时需恢复上述的设备</ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col><ion-item lines="none" class="cow"><ion-label>风机</ion-label><ion-checkbox color="primary" class="cowCheckBox" slot="start"></ion-checkbox></ion-item></ion-col>
+        <ion-col><ion-item lines="none" class="cow"><ion-label>喷淋</ion-label><ion-checkbox color="primary" class="cowCheckBox" slot="start"></ion-checkbox></ion-item></ion-col>
+        <ion-col><ion-item lines="none" class="cow"><ion-label>照明</ion-label><ion-checkbox color="primary" class="cowCheckBox" slot="start"></ion-checkbox></ion-item></ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>牛群离舍时需完全关闭的设备</ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col><ion-item lines="none" class="cow"><ion-label>风机</ion-label><ion-checkbox color="primary" class="cowCheckBox" slot="start"></ion-checkbox></ion-item></ion-col>
+        <ion-col><ion-item lines="none" class="cow"><ion-label>喷淋</ion-label><ion-checkbox color="primary" class="cowCheckBox" slot="start"></ion-checkbox></ion-item></ion-col>
+        <ion-col><ion-item lines="none" class="cow"><ion-label>照明</ion-label><ion-checkbox color="primary" class="cowCheckBox" slot="start"></ion-checkbox></ion-item></ion-col>
+      </ion-row>
+    </ion-grid>
+  </ion-item>
+
+  <ion-item-divider>
+    <ion-label>环境参数配置</ion-label>
+  </ion-item-divider>
+
+  <ion-item class="thi">
+    <ion-grid>
+      <ion-row>
+        <ion-item lines="none" class="thiItem">热应激配置</ion-item>
+      </ion-row>
+      <ion-row>
+        <ion-item lines="none" class="thiItem">计算公式 0.81* 温度 +（0.99*温度-14.3）*湿度+46.3</ion-item>
+      </ion-row>
+      <ion-row>
+        <ion-item lines="none" class="thiItem">等级临界值</ion-item>
+      </ion-row>
+      <ion-row>
+        <ion-col class="thiItem">应激等级</ion-col>
+        <ion-col class="thiItem">THI值（<）</ion-col>
+        <ion-col class="thiItem">预警要否</ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col class="thiItem"><ion-label>无应激</ion-label></ion-col>
+        <ion-col class="thiItem"><ion-input placeholder="25" (ionFocus)="fanTempHaveFouch()"></ion-input></ion-col>
+        <ion-col class="thiItem">
+          <ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="workModeSetting.workMode" [(value)]="workModeSetting.workMode"  (ionChange)="workModeEvent()">
+            <ion-select-option value="0">无</ion-select-option>
+            <ion-select-option value="1">高</ion-select-option>
+            <ion-select-option value="1">中</ion-select-option>
+            <ion-select-option value="1">低</ion-select-option>
+          </ion-select>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col class="thiItem"><ion-label>轻度应激</ion-label></ion-col>
+        <ion-col class="thiItem"><ion-input placeholder="25" (ionFocus)="fanTempHaveFouch()"></ion-input></ion-col>
+        <ion-col class="thiItem">
+          <ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="workModeSetting.workMode" [(value)]="workModeSetting.workMode"  (ionChange)="workModeEvent()">
+            <ion-select-option value="0">无</ion-select-option>
+            <ion-select-option value="1">高</ion-select-option>
+            <ion-select-option value="1">中</ion-select-option>
+            <ion-select-option value="1">低</ion-select-option>
+          </ion-select>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col class="thiItem"><ion-label>中度应激</ion-label></ion-col>
+        <ion-col class="thiItem"><ion-input placeholder="25" (ionFocus)="fanTempHaveFouch()"></ion-input></ion-col>
+        <ion-col class="thiItem">
+          <ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="workModeSetting.workMode" [(value)]="workModeSetting.workMode"  (ionChange)="workModeEvent()">
+            <ion-select-option value="0">无</ion-select-option>
+            <ion-select-option value="1">高</ion-select-option>
+            <ion-select-option value="1">中</ion-select-option>
+            <ion-select-option value="1">低</ion-select-option>
+          </ion-select>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col class="thiItem"><ion-label>重度应激</ion-label></ion-col>
+        <ion-col class="thiItem"><ion-input placeholder="25" (ionFocus)="fanTempHaveFouch()"></ion-input></ion-col>
+        <ion-col class="thiItem">
+          <ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="workModeSetting.workMode" [(value)]="workModeSetting.workMode"  (ionChange)="workModeEvent()">
+            <ion-select-option value="0">无</ion-select-option>
+            <ion-select-option value="1">高</ion-select-option>
+            <ion-select-option value="1">中</ion-select-option>
+            <ion-select-option value="1">低</ion-select-option>
+          </ion-select>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col class="thiItem"><ion-label>II重度应激</ion-label></ion-col>
+        <ion-col class="thiItem"><ion-input placeholder="25" (ionFocus)="fanTempHaveFouch()"></ion-input></ion-col>
+        <ion-col class="thiItem">
+          <ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="workModeSetting.workMode" [(value)]="workModeSetting.workMode"  (ionChange)="workModeEvent()">
+            <ion-select-option value="0">无</ion-select-option>
+            <ion-select-option value="1">高</ion-select-option>
+            <ion-select-option value="1">中</ion-select-option>
+            <ion-select-option value="1">低</ion-select-option>
+          </ion-select>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ion-item>
 </ion-content>

src/app/envCtrl/env-cfg/env-cfg.page.scss

+.fan-mode{
+  display: inline-block;
+  margin-left: 16px;
+  margin-top: 10px;
+}
+
+.timepicker{
+  width:40px;
+}
+
+.timepickerItem{
+  font-size: 13px;
+  --padding-start: 0px
+}
+
+.fanItem{
+  font-size: 13px;
+  --padding-start: 0px
+}
+
+.cow{
+  font-size: 13px;
+}
+
+.cowCheckBox{
+  font-size: 13px;
+}
+
+.thi{
+  font-size: 13px;
+}
+
+.thiItem{
+  font-size: 13px;
+  --padding-start: 0px;
+  text-align : center;
+  vertical-align: center;
+}
+
+.title{
+  text-align: center;
+  padding-left: 0px
+}
\ No newline at end of file

src/app/envCtrl/env-cfg/env-cfg.page.ts

 import { Component, OnInit } from '@angular/core';
+import {PickerController} from '@ionic/angular';
 
 @Component({
   selector: 'v-env-cfg',
@@ -7,9 +8,182 @@ import { Component, OnInit } from '@angular/core';
 })
 export class EnvCfgPage implements OnInit {
 
-  constructor() { }
+    // 工作模式
+    workModeSetting = {  'workMode' : '1',
+        'DeviceNo' : '',
+        'workModeOld' : '1'};
+
+    defaultColumnOptions = [];
+
+    fanMode = {
+        'selecting' : false,
+        }
+
+    light = {
+        'selecting' : false,
+    }
+
+    fanCfg = [{
+        'name':'模式一',
+        'timeInterval':25,
+        'tempSet':25,
+        'tempOffset':3,
+        'ATmr':20,
+        'BTmr':20,
+    },{
+        'name':'模式二',
+        'timeInterval':25,
+        'tempSet':30,
+        'tempOffset':3,
+        'ATmr':20,
+        'BTmr':20,
+    },{
+        'name':'模式三',
+        'timeInterval':25,
+        'tempSet':20,
+        'tempOffset':3,
+        'ATmr':20,
+        'BTmr':20,
+    },]
+
+    lightCfg= [{
+        'name':'模式一',
+        'timeInterval':25,
+        'startTime':25,
+        'endTime':3,
+        'onTime':20,
+        'offTime':20,
+    },{
+        'name':'模式二',
+        'timeInterval':25,
+        'startTime':30,
+        'endTime':3,
+        'onTime':20,
+        'offTime':20,
+    },]
+
+  constructor(private pickerController:PickerController) { }
+
+    async openPicker(numColumns = 1, numOptions = 5, columnOptions = this.defaultColumnOptions){
+        const picker = await this.pickerController.create({
+            columns: this.getColumns(numColumns, numOptions, columnOptions),
+            buttons: [
+                {
+                    text: 'Cancel',
+                    role: 'cancel',
+                    handler: ()=> {
+                        this.fanMode.selecting = false;
+                    }
+                },
+                {
+                    text: 'Confirm',
+                    handler: (value) => {
+                        console.log(`Got Value ${value}`);
+                        this.fanMode.selecting = false;
+                    }
+                }
+            ]
+        });
+        await picker.present();
+    }
+
+    getColumns(numColumns, numOptions, columnOptions) {
+        let columns = [];
+        for (let i = 0; i < numColumns; i++) {
+            columns.push({
+                name: `col-${i}`,
+                options: this.getColumnOptions(i, numOptions, columnOptions)
+            });
+        }
+        return columns;
+    }
+
+    getColumnOptions(columnIndex, numOptions, columnOptions) {
+        let options = [];
+        for (let i = 0; i < numOptions; i++) {
+            options.push({
+                text: columnOptions[columnIndex][i % numOptions],
+                value: i
+            })
+        }
+        return options;
+    }
 
     ngOnInit() {
+        // this.pickerController = document.querySelector('ion-picker-controller');
+        this.defaultColumnOptions = [
+            [
+                '1',
+                '2',
+                '3',
+                '4',
+                '5'
+            ]
+        ];
+  }
+
+    workModeEvent() {
+        // if ( this.workModeSetting.workModeOld === this.workModeSetting.workMode ) {
+        //     return;
+        // }
+        //
+        // const opt = {fieldDeviceNo : this.workModeSetting.DeviceNo ,
+        //     op : this.workModeSetting.workMode ,
+        //     startTime: parseInt((new Date().getTime() / 1000).toString(), 10),
+        //     ts: parseInt((new Date().getTime() / 1000).toString(), 10)
+        // };
+        //
+        // opt.startTime = opt.ts;
+        //
+        // this.api.control.controlSwitch([opt, (data) => {
+        //     if (data && data.code === 1) {
+        //         this.getData(1);
+        //         this.api.presentMsgToast(data.message);
+        //     } else {
+        //         this.api.presentMsgToast(data.message);
+        //     }
+        // }]);
+    }
+
+    async openCalendarPicker(numColumns = 1, numOptions = 5, columnOptions = this.defaultColumnOptions){
+        const picker = await this.pickerController.create({
+            columns: this.getColumns(numColumns, numOptions, columnOptions),
+            buttons: [
+                {
+                    text: 'Cancel',
+                    role: 'cancel',
+                    handler: ()=> {
+                        this.fanMode.selecting = false;
+                    }
+                },
+                {
+                    text: 'Confirm',
+                    handler: (value) => {
+                        console.log(`Got Value ${value}`);
+                        this.fanMode.selecting = false;
+                    }
+                }
+            ]
+        });
+        await picker.present();
+    }
+
+    fanTempHaveFouch(){
+      console.log('fanTempHaveFouch');
+      if(this.fanMode.selecting === false)
+      {
+          this.fanMode.selecting = true;
+          this.openPicker();
+      }
+    }
+
+    lightTimeHaveFouch(){
+        console.log('lightTimeHaveFouch');
+        if(this.light.selecting === false)
+        {
+            this.light.selecting = true;
+            this.openPicker();
+        }
     }
 
 }

src/app/envCtrl/env-detail/env-detail.page.html

-<ion-header style="background-color: #F3F4F4;">
+<ion-header mode="ios" color="light" translucent="false" style="background-color: white">
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
     </ion-buttons>
-    <ion-title style="text-align: center">{{fieldRegionName}}详情页</ion-title>
+    <ion-title mode="ios" class="title">{{fieldRegionName}}详情页</ion-title>
   </ion-toolbar>
-  <div style="margin-top: 10px;margin-bottom: 10px">
+  <div style="margin-top: 10px;margin-bottom: 10px;background-color: white">
     <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>
-    <v-kanban class="home-bar"></v-kanban>
-    <v-kanban class="home-bar"></v-kanban>
-    <v-kanban class="home-bar"></v-kanban>
-    <v-kanban class="home-bar"></v-kanban>
+  <div style="background-color: white">
+    <v-kanban class="home-bar" name="温度"></v-kanban>
+    <v-kanban class="home-bar" name="湿度"></v-kanban>
+    <v-kanban class="home-bar" name="热应激"></v-kanban>
+    <v-kanban class="home-bar" name="在舍状态"></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-tabs>
     <!-- Tab bar -->
     <ion-tab-bar slot="top">

src/app/envCtrl/env-detail/env-detail.page.scss

@@ -3,6 +3,11 @@
   color: #aaa;
 }
 
+.title{
+  text-align: center;
+  padding-left: 0px
+}
+
 .home-bar{
   display: inline-block;
   margin-right: 3px;

src/app/envCtrl/env-home/env-home.page.html

@@ -19,9 +19,9 @@
             border-left: 5px solid #28c9bd;
             line-height: 25px;
             margin-bottom: 5px;">故障统计</h1>
-  <v-kanban class="home-bar"></v-kanban>
-  <v-kanban class="home-bar"></v-kanban>
-  <v-kanban class="home-bar"></v-kanban>
+  <v-kanban class="home-bar" name="热应激"></v-kanban>
+  <v-kanban class="home-bar" name="热应激"></v-kanban>
+  <v-kanban class="home-bar" name="故障总数"></v-kanban>
   <h1 style="
             font-size: 16px;
             padding-left: 5px;

src/app/envCtrl/env-home/env-home.page.scss

@@ -16,7 +16,7 @@
   line-height: 25px;
   //border-bottom: 1px solid #cccc;
   padding-bottom: 5px;
-  font-size: 22px;
+  font-size: 17px;
   display: block;
   width: 100%;
 
@@ -45,6 +45,9 @@
 }
 .content{
   margin-top: 10px;
+  font-size: 14px;
+  color: #aaa;
+  text-align: center;
 }
 
 .online {
@@ -53,9 +56,10 @@
   display: inline-block;
   vertical-align: middle;
   box-shadow: #ccc 0.5px 0.5px 3px;
-  padding: 1px 1px 1px 1px;
+  padding: 4px 4px 4px 4px;
   color: white;
   margin-left: 5px;
+  font-size: 14px;
 }
 
 .offline {
@@ -64,12 +68,14 @@
   display: inline-block;
   vertical-align: middle;
   box-shadow: #ccc 0.5px 0.5px 3px;
-  padding: 1px 1px 1px 1px;
+  padding: 2px 2px 2px 2px;
   color: white;
+  font-size: 14px;
 }
 
 .right {
   float: right;
   color: #aaa;
+  font-size: 14px;
 }
 

src/app/envCtrl/tabs/tabs.module.ts

@@ -127,6 +127,7 @@ const routes: Routes = [
       // EnvShowerPage,
       // EnvLightPage,
       // EnvWaterchannelPage,
+      EnvCfgPage,
       ]
 })
 export class TabsPageModule {}