牛舍详情页:追加 在离舍开关

牛舍配置页:着手修改

src/app/app-routing.module.ts

@@ -39,6 +39,17 @@ const routes: Routes = [
         ]
     },
     {path: 'login', component: LoginPage},
+    // {path: 'env-detail',
+    //     component: EnvDetailPage,
+    //     children: [
+    //         {path: 'fan', component: EnvFanPage},
+    //         {path: 'shower/:fieldRegionNo', component: EnvShowerPage},
+    //         {path: 'light/:fieldRegionNo', component: EnvLightPage},
+    //         {path: 'waterchannel/:fieldRegionNo', component: EnvWaterchannelPage},
+    //         {path: '', redirectTo: 'fan', pathMatch : 'prefix'},
+    //     ]
+    // },
+
     {path: 'env-detail',
         component: EnvDetailPage,
         children: [
@@ -49,6 +60,7 @@ const routes: Routes = [
             {path: '', redirectTo: 'fan', pathMatch : 'prefix'},
         ]
     },
+
     // { path: 'env-detail', loadChildren: './envCtrl/env-detail/env-detail.module#EnvDetailPageModule' },
     // {path: 'env-history', component: EnvHistoryPage},
     { path: 'env-history', loadChildren: './envCtrl/env-history/env-history.module#EnvHistoryPageModule' },

src/app/app.module.ts

@@ -82,7 +82,7 @@ import {EnvAlarmDetailPage} from './envCtrl/env-alarm-detail/env-alarm-detail.pa
         // EnvAnalPage,
         // EnvAlarmPage,
         EnvAlarmDetailPage,
-        //EnvCfgPage,
+        // EnvCfgPage,
         // EnvHomePage,
     ],
     entryComponents: [],
@@ -115,7 +115,7 @@ import {EnvAlarmDetailPage} from './envCtrl/env-alarm-detail/env-alarm-detail.pa
         Http,
         Mqtt,
         Transfer,
-        Load
+        Load,
     ],
     bootstrap: [AppComponent]
 })

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

@@ -5,14 +5,14 @@
   <div class="sub" style="text-align: center;margin-top: 15px;">
     <!--<ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
     <ion-row>
-      <ion-col>
+      <ion-col style="padding-right: 0px;">
         <i ngClass={{iconClass}} [ngStyle]="{'color': iconColor, 'font-size': iconSize}" ></i>
       </ion-col>
-      <ion-col size="1" style="width:1px">
+      <ion-col size="1" style="width:1px; padding-left:0px; padding-right: 0px">
         <span style="border-right: 1px solid #E0E0E0; font-size:13px;vertical-align: center"></span>
       </ion-col>
-      <ion-col>
-        <span style="padding-bottom: 20px" [ngStyle]="{'color':fontColor, 'font-size': iconSize}">{{inData}}</span>
+      <ion-col style="padding-left: 0px;">
+        <span style="padding-bottom: 10px" [ngStyle]="{'color':fontColor, 'font-size': fontSize}">{{inData}}</span>
       </ion-col>
     </ion-row>
   </div>

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

@@ -25,6 +25,9 @@ export class KanbanComponent implements OnInit {
   @Input()
   inData = '';
 
+  @Input()
+  fontSize = '';
+
   constructor() { }
 
   ngOnInit() {

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

@@ -54,14 +54,14 @@
             <ion-col>
               <ion-item class="fanItem">
                 <ion-label position="fixed">开启温度</ion-label>
-                <ion-input (ionFocus)="fanTempHaveFouch()" [(ngModel)]="fengJi.controlConfig.TU" (ionBlur)="updateCowshed()"></ion-input>
+                <ion-input (ionFocus)="tempHaveFouch()" [(ngModel)]="fengJi.controlConfig.TU" (ionBlur)="updateCowshed()"></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 (ionFocus)="fanTempHaveFouch()" [(ngModel)]="fengJi.controlConfig.TL" (ionBlur)="updateCowshed()"></ion-input>
+                <ion-input (ionFocus)="tempHaveFouch()" [(ngModel)]="fengJi.controlConfig.TL" (ionBlur)="updateCowshed()"></ion-input>
                 <ion-label position="fixed">℃</ion-label>
               </ion-item>
             </ion-col>
@@ -88,13 +88,13 @@
             <ion-col size="auto" style="font-size: 13px;">
               <ion-item class="fanItem" lines="none">
                 <ion-label style="width:80px">模式名</ion-label>
-                <ion-input [(ngModel)]="cfg.name" (ionFocus)="fanTempHaveFouch()" style="width:80px;" (ionBlur)="updateCowshed()"></ion-input>
+                <ion-input [(ngModel)]="cfg.name" (ionFocus)="tempHaveFouch()" style="width:80px;" (ionBlur)="updateCowshed()"></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 style="width:50px;" [(ngModel)]="cfg.intverval" (ionFocus)="fanTempHaveFouch()" (ionBlur)="updateCowshed()"></ion-input>
+                <ion-input style="width:50px;" [(ngModel)]="cfg.intverval" (ionFocus)="tempHaveFouch()" (ionBlur)="updateCowshed()"></ion-input>
                 <ion-label>秒</ion-label>
               </ion-item>
             </ion-col>
@@ -103,14 +103,14 @@
             <ion-col size="auto" style="font-size: 13px;">
               <ion-item class="fanItem" lines="none">
                 <ion-label style="width:80px">设置温度</ion-label>
-                <ion-input style="width:50px;" [(ngModel)]="cfg.T" (ionFocus)="fanTempHaveFouch()" (ionBlur)="updateCowshed()"></ion-input>
+                <ion-input style="width:50px;" [(ngModel)]="cfg.T" (ionFocus)="tempHaveFouch()" (ionBlur)="updateCowshed()"></ion-input>
                 <ion-label>℃</ion-label>
               </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 [(ngModel)]="penLinCfg.A" (ionFocus)="fanTempHaveFouch()" style="width:50px;"></ion-input>-->
+<!--                <ion-input [(ngModel)]="penLinCfg.A" (ionFocus)="tempHaveFouch()" style="width:50px;"></ion-input>-->
 <!--              </ion-item>-->
 <!--            </ion-col>-->
           </ion-row>
@@ -118,14 +118,14 @@
               <ion-col size="auto" style="font-size: 13px;">
                 <ion-item class="fanItem" lines="none">
                   <ion-label style="width:80px">A区喷水时间</ion-label>
-                  <ion-input style="width:50px;" [(ngModel)]="cfg.A" (ionFocus)="fanTempHaveFouch()" (ionBlur)="updateCowshed()"></ion-input>
+                  <ion-input style="width:50px;" [(ngModel)]="cfg.A" (ionFocus)="tempHaveFouch()" (ionBlur)="updateCowshed()"></ion-input>
                   <ion-label>秒</ion-label>
                 </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 style="width:50px;" [(ngModel)]="cfg.B" (ionFocus)="fanTempHaveFouch()" (ionBlur)="updateCowshed()"></ion-input>
+                  <ion-input style="width:50px;" [(ngModel)]="cfg.B" (ionFocus)="tempHaveFouch()" (ionBlur)="updateCowshed()"></ion-input>
                   <ion-label>秒</ion-label>
                 </ion-item>
               </ion-col>
@@ -156,7 +156,7 @@
               <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 style="width:50px;" [(ngModel)]="cfg.name" (ionFocus)="fanTempHaveFouch()" (ionBlur)="updateCowshed()"></ion-input>
+                  <ion-input style="width:50px;" [(ngModel)]="cfg.name" (ionFocus)="tempHaveFouch()" (ionBlur)="updateCowshed()"></ion-input>
                 </ion-item>
               </ion-col>
             </ion-row>
@@ -164,14 +164,14 @@
               <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-input placeholder={{cfg.startTime}} (ionFocus)="tempHaveFouch()" style="width:50px;"></ion-input>-->
                   <ion-datetime [(ngModel)]="cfg.startDate" displayFormat="MM-DD" class="timepicker" (blur)="updateCowshed()"></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-input placeholder={{cfg.endTime}} (ionFocus)="tempHaveFouch()" style="width:50px;"></ion-input>-->
                   <ion-datetime [(ngModel)]="cfg.stopDate" displayFormat="MM-DD" class="timepicker" (blur)="updateCowshed()"></ion-datetime>
                 </ion-item>
               </ion-col>
@@ -180,13 +180,13 @@
               <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 style="width:50px;" [(ngModel)]="cfg.on" (ionFocus)="fanTempHaveFouch()" (onBlur)="updateCowshed()"></ion-input>
+                  <ion-input style="width:50px;" [(ngModel)]="cfg.on" (ionFocus)="tempHaveFouch()" (onBlur)="updateCowshed()"></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 style="width:50px;" [(ngModel)]="cfg.off"  (ionFocus)="fanTempHaveFouch()" (onBlur)="updateCowshed()"></ion-input>
+                  <ion-input style="width:50px;" [(ngModel)]="cfg.off"  (ionFocus)="tempHaveFouch()" (onBlur)="updateCowshed()"></ion-input>
                 </ion-item>
               </ion-col>
             </ion-row>
@@ -212,14 +212,14 @@
               <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-input placeholder={{cfg.startTime}} (ionFocus)="tempHaveFouch()" style="width:50px;"></ion-input>-->
                   <ion-datetime [(ngModel)]="shuiCao.controlConfig.startDate" displayFormat="MM-DD" class="timepicker" (change)="updateCowshed()"></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-input placeholder={{cfg.endTime}} (ionFocus)="tempHaveFouch()" style="width:50px;"></ion-input>-->
                   <ion-datetime [(ngModel)]="shuiCao.controlConfig.stopDate" displayFormat="MM-DD" class="timepicker" (change)="updateCowshed()"></ion-datetime>
                 </ion-item>
               </ion-col>

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

@@ -54,16 +54,16 @@ export class EnvCfgPage implements OnInit {
             columns: this.getColumns(numColumns, numOptions, columnOptions),
             buttons: [
                 {
-                    text: 'Cancel',
+                    text: '取消',
                     role: 'cancel',
                     handler: () => {
                         this.fanMode.selecting = false;
                     }
                 },
                 {
-                    text: 'Confirm',
+                    text: '确认',
                     handler: (value) => {
-                        console.log(`Got Value ${value}`);
+                        // console.log(`Got Value ${value}`);
                         this.fanMode.selecting = false;
                     }
                 }
@@ -201,7 +201,6 @@ export class EnvCfgPage implements OnInit {
     }
 
     workModeEvent(item) {
-        console.log('更新牛舍配置信息');
         this.updateCowshed();
     }
 
@@ -228,7 +227,7 @@ export class EnvCfgPage implements OnInit {
         await picker.present();
     }
 
-    fanTempHaveFouch() {
+    tempHaveFouch() {
         console.log('fanTempHaveFouch');
         if (this.fanMode.selecting === false) {
             this.fanMode.selecting = true;

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

@@ -15,37 +15,32 @@
     <span *ngIf="item.ts" class="right">{{item.ts | date: 'yyyy-MM-dd HH:mm'}}</span>
   </div>
   <div style="background-color: #F0F0F0;" align="center">
-      <v-kanban class="home-bar" name="温度" [inData]="item.temp" iconClass="vo v-wendu" iconColor="#285B90" iconSize="14px"></v-kanban>
-      <v-kanban class="home-bar" name="湿度" [inData]="item.humi" iconClass="vo v-shidu" iconColor="#285B90" iconSize="14px"></v-kanban>
-      <v-kanban class="home-bar" name="热应激" [inData]="item.heatStressLevelName" iconClass="vo v-nav-ico" iconColor="#285B90" iconSize="14px"></v-kanban>
-      <v-kanban class="home-bar" name="在舍状态" [inData]="item.inHouse" iconClass="vo v-dapeng-" iconColor="#285B90" iconSize="14px"></v-kanban>
+      <v-kanban class="home-bar" name="温度" [inData]="item.temp" iconClass="vo v-wendu" iconColor="#285B90" iconSize="20px" fontSize="14px"></v-kanban>
+      <v-kanban class="home-bar" name="湿度" [inData]="item.humi" iconClass="vo v-shidu" iconColor="#285B90" iconSize="20px"  fontSize="14px"></v-kanban>
+      <v-kanban class="home-bar" name="热应激" [inData]="item.heatStressLevelName" iconClass="vo v-nav-ico" [iconColor]="item.heatStressColor" iconSize="20px" fontSize="14px"></v-kanban>
+      <v-kanban class="home-bar" name="在舍状态" [inData]="item.inHouse" iconClass="vo v-dapeng-" iconColor="#285B90" iconSize="20px" fontSize="14px"></v-kanban>
+   </div>
+   <div style="background-color: #F0F0F0; height: 30px; padding-right: 10px; padding-top: 5px;">
+       <ion-label style="margin-left:15px; height: 30px; vertical-align: middle;">在离舍开关控制</ion-label>
+       <v-switch (click)="setInHouse(item.inHouse)" [value]="item.inHouse" [loading]="loading"></v-switch>
    </div>
 </ion-header>
 <ion-content style="background-color: #F3F4F4;">
-  <ion-router-outlet></ion-router-outlet>
+  <!--<ion-router-outlet></ion-router-outlet>-->
   <ion-tabs>
-    <ion-tab-bar slot="top">
-      <ion-tab-button tab="fan">
-        <ion-label>风机</ion-label>
-      </ion-tab-button>
-      <ion-tab-button tab="shower" [routerLink]="['/env-detail/shower', item.fieldRegionNo]">  <!--[rootParams]="fieldRegionNo"-->
-        <ion-label>喷淋</ion-label>
-      </ion-tab-button>
-      <ion-tab-button tab="light" [routerLink]="['/env-detail/light', item.fieldRegionNo]">
-        <ion-label>照明</ion-label>
-      </ion-tab-button>
-      <ion-tab-button tab="waterchannel" [routerLink]="['/env-detail/waterchannel', item.fieldRegionNo]">
-        <ion-label>水槽</ion-label>
-      </ion-tab-button>
-    </ion-tab-bar>
+      <ion-tab-bar slot="top">
+          <ion-tab-button tab="fan">
+              <ion-label>风机</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="shower" [routerLink]="showerLink">  <!--[rootParams]="fieldRegionNo"-->
+              <ion-label>喷淋</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="light"  [routerLink]="lightLink">
+              <ion-label>照明</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="waterchannel" [routerLink]="waterchannelLink">
+              <ion-label>水槽</ion-label>
+          </ion-tab-button>
+      </ion-tab-bar>
   </ion-tabs>
 </ion-content>
-
-<!--<ion-tabs>-->
-  <!--<ion-tab [root]="fan" [rootParams]="fieldRegionNo" tabTitle="风机">-->
-  <!--</ion-tab>-->
-  <!--<ion-tab [root]="shower" [rootParams]="fieldRegionNo" tabTitle="风机">-->
-  <!--</ion-tab>-->
-  <!--<ion-tab [root]="light" [rootParams]="fieldRegionNo" tabTitle="风机">-->
-  <!--</ion-tab>-->
-<!--</ion-tabs>-->

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

@@ -18,9 +18,11 @@ export class EnvDetailPage implements OnInit {
                 private load: Load,
                 private tf: Transfer) {}
 
-    item = {};
+    item: any = {};
 
     fieldRegionNo = '';
+    loading = false;
+
 
     // 发送指令延时判断
     comm = {
@@ -29,28 +31,46 @@ export class EnvDetailPage implements OnInit {
     };
 
     // fan = '/env-detail/fan';
-    // shower = '/env-detail/shower';
-    // light = '/env-detail/light';
+    showerLink = '';
+    lightLink = '';
+    waterchannelLink = '';
 
     ngOnInit() {
+        this.init();
+    }
+
+    init() {
         this.comm.isLoading = false;
         this.comm.remain = 0;
         this.ac.queryParams.subscribe((data) => {
             this.fieldRegionNo = data.no;
+
+            this.showerLink = '/env-detail/shower/' + this.fieldRegionNo;
+            this.lightLink = '/env-detail/light/' + this.fieldRegionNo;
+            this.waterchannelLink = '/env-detail/waterchannel/' + this.fieldRegionNo;
         });
         this.getData(0);
     }
 
+    initLayout() {
+        if (this.item && this.item.heatStressLevel && this.item.heatStressLevel !== '') {
+            this.item.heatStressColor = this.item.heatStressLevel === '0' ? '#71fa1d' :
+                this.item.heatStressLevel === '1' ? '#71fa1d' :
+                    this.item.heatStressLevel === '2' ? '#FAB139' :
+                        this.item.heatStressLevel === '3' ? '#ff6a1f' : '#b22222';
+        }
+    }
+
     getData(time) {
         if (time) {
             this.load.toLoad('加载中...', false);
         }
-        this.api.cowshedApp.getRealDataByFieldRegionNo([{'fieldRegionNo' : this.fieldRegionNo}, (data) => {
-
-            if (data) {
-                this.item = data;
-            }
-        }]);
+        // this.api.cowshedApp.getRealDataByFieldRegionNo([{'fieldRegionNo' : this.fieldRegionNo}, (data) => {
+        //     if (data) {
+        //         this.item = data;
+        //         this.initLayout();
+        //     }
+        // }]);
         // ----------------------------------------------
         // TODO 测试用准备数据
         this.item = {
@@ -68,6 +88,7 @@ export class EnvDetailPage implements OnInit {
             inHouse : this.getInHouseState(1), // 0-离舍，1-在舍
             ts: '2019-08-05 23:44',
         };
+        this.initLayout();
         // ----------------------------------------------
     }
 
@@ -114,4 +135,10 @@ export class EnvDetailPage implements OnInit {
         const query = 'env-history?no=' + item.fieldRegionNo;
         this.nav.navigateForward(query);
     }
+
+    setInHouse() {
+        this.loading = true;
+        // TODO
+        this.loading = false;
+    }
 }