牛舍详情页-30%

src/app/app-routing.module.ts

@@ -25,7 +25,7 @@ import {EnvHomePage} from './envCtrl/env-home/env-home.page';
 const routes: Routes = [
     {
         path: '',
-        //canActivateChild: [Auth],
+        // canActivateChild: [Auth],
         children: [
             {path: '', redirectTo: 'index', pathMatch: 'full'},
             {path: 'home', component: HomePage},
@@ -41,11 +41,11 @@ const routes: Routes = [
     {path: 'env-detail',
         component: EnvDetailPage,
         children: [
-            {path:'fan', component: EnvFanPage},
-            {path:'shower', component: EnvShowerPage},
-            {path:'light', component: EnvLightPage},
-            {path:'waterchannel', component: EnvWaterchannelPage},
-            {path: '', redirectTo: 'fan',pathMatch:'prefix'},
+            {path: 'fan', component: EnvFanPage},
+            {path: 'shower', component: EnvShowerPage},
+            {path: 'light', component: EnvLightPage},
+            {path: 'waterchannel', component: EnvWaterchannelPage},
+            {path: '', redirectTo: 'fan', pathMatch : 'prefix'},
         ]
     },
     // { path: 'env-detail', loadChildren: './envCtrl/env-detail/env-detail.module#EnvDetailPageModule' },
@@ -56,7 +56,7 @@ const routes: Routes = [
 
 @NgModule({
     imports: [
-        RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules,enableTracing: true})
+        RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules, enableTracing: true})
     ],
     exports: [RouterModule]
 })

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

@@ -12,7 +12,7 @@
         <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}">32</span>
+        <span style="padding-bottom: 20px" [ngStyle]="{'color':fontColor, 'font-size': iconSize}">{{inData}}</span>
       </ion-col>
     </ion-row>
   </div>

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

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

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

@@ -3,29 +3,21 @@
     <ion-buttons slot="start">
       <ion-back-button text="" ></ion-back-button>
     </ion-buttons>
-    <ion-title mode="ios" class="title">{{fieldRegionName}}详情页</ion-title>
+    <ion-title mode="ios" class="title">{{item.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>
+    <span *ngIf="item.operationModel" class="online">{{item.operationModel ? '平控' :'现控'}}    </span>
+    <span *ngIf="item.operationModel" [ngClass]="{'online': item.isWisdomModel, 'offline': !item.isWisdomModel}" 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>
+      <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>
+   </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 -->
@@ -42,12 +34,6 @@
       <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>
 

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

@@ -28,11 +28,25 @@
 }
 
 .offline {
-  border-radius: 17px;
+  border-radius: 2px;
   background-color: #9ea7b4;
   display: inline-block;
   vertical-align: middle;
   box-shadow: #ccc 0.5px 0.5px 3px;
   padding: 1px 1px 1px 1px;
   color: white;
+  margin-left: 5px;
+}
+
+.warmColor1 {
+  color: #71fa1d;
+}
+.warmColor2 {
+  color: #FAB139;
+}
+.warmColor3 {
+  color: #ff6a1f;
+}
+.warmColor4 {
+  color: #b22222;
 }

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

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Api} from '../../service/api';
 import {NavController} from '@ionic/angular';
 import {ActivatedRoute} from '@angular/router';
+import {Load} from '../../service/load';
 
 @Component({
-  selector: 'v-env-detail',
-  templateUrl: './env-detail.page.html',
-  styleUrls: ['./env-detail.page.scss'],
+    selector: 'v-env-detail',
+    templateUrl: './env-detail.page.html',
+    styleUrls: ['./env-detail.page.scss'],
 })
 export class EnvDetailPage implements OnInit {
 
-  constructor(private api: Api,public nav: NavController,private ac: ActivatedRoute,) { }
-
-    item = {
-        name : '1号牛舍',
-        temp : '23.5',
-        humi : '82',
-        thi: '轻',
-        time : '2019-08-05 23:44',
-        online : true,
-        remoteMode: true,  //true 平控  false 现控
-        wokeMode: 1,  //0 手控  1 自控  2 智控
-        ctrl: 0,
-        alarm: true,
-    };
+    constructor(private api: Api, public nav: NavController, private ac: ActivatedRoute, private load: Load) {
+    }
+
+    item = {};
 
     fieldRegionNo = '';
-    fieldRegionName = '';
-    fieldRegionGroup = '';
 
     // 发送指令延时判断
     comm = {
-        remain : 20,
-        isLoading : true
+        remain: 20,
+        isLoading: true
     };
 
-  ngOnInit() {
-      // console.log('+ogOnInit');
-      this.comm.isLoading = false;
-      this.comm.remain = 0;
-      this.ac.queryParams.subscribe((data) => {
-          // console.log(data);
-          if(data.no)
-          {
-              this.fieldRegionNo = data.no;
-              this.fieldRegionName = data.name;
-              this.fieldRegionGroup = data.group;
-          }
-      });
-      // console.log('-ogOnInit');
-  }
+    ngOnInit() {
+        this.comm.isLoading = false;
+        this.comm.remain = 0;
+        this.ac.queryParams.subscribe((data) => {
+            this.fieldRegionNo = data.no;
+        });
+        this.getData(0);
+    }
+
+    getData(time) {
+        if (time) {
+            this.load.toLoad('加载中...', false);
+        }
+        this.api.cowshedApp.getRealDataByFieldRegionNo([{'fieldRegionNo' : this.fieldRegionNo}, (data) => {
+
+            if (data) {
+                this.item = data;
+                // TODO 测试用准备数据
+                this.item = {
+                    // 3-重度热应激 在线 平控 非智控(自控) 有报警
+                    fieldRegionName: '测试用4号牛舍',
+                    temp: '23.5',
+                    humi: '82.8',
+                    heatStressLevel: '3',
+                    heatStressLevelName: this.getHeatStressLevelName('3'),
+                    online: 1, // 0-离线，1-在线
+                    operationModel: 1,  // 0-现控，1-平控
+                    isWisdomModel: 0,  // 0-非智控(自控)，1-智控
+                    alarm: 1,
+                    inHouse : this.getInHouseState(1), // 0-离舍，1-在舍
+                    ts: '2019-08-05 23:44',
+                };
+            }
+        }]);
+    }
+
+    getHeatStressLevelName(id) {
+        let levelName = '';
+        switch (id) {
+            case '0':
+                levelName = '无';
+                break;
+            case '1' :
+                levelName = '轻';
+                break;
+            case '2' :
+                levelName = '中';
+                break;
+            case '3' :
+                levelName = '重';
+                break;
+            case '4' :
+                levelName = 'II重';
+                break;
+            default:
+                break;
+        }
+        return levelName;
+    }
 
+    getInHouseState(id) {
+        let stateName = '';
+        switch (id) {
+            case 0:
+                stateName = '离舍 ';
+                break;
+            case 1:
+                stateName = '在舍';
+            default:
+                break;
+        }
+        return stateName;
+    }
 }

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

@@ -26,7 +26,6 @@
   <ion-item *ngFor="let a of allBtns" lines="full" insert="false"  >
     <!--<v-switch [value]="a.value" (click)="toggle(a)" [loading]="a.loading"></v-switch>-->
     <ion-label>一键控制{{a.l}}</ion-label>
-    <ion-button>朱旻大帅哥</ion-button>
     <v-switch [value]="a.v" (click)="allCheck(a)" [loading]="a.d"></v-switch>
   </ion-item>
   <div>

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

 import { Component, OnInit } from '@angular/core';
 import {Api} from '../../service/api';
+import {ActivatedRoute} from '@angular/router';
+import {Load} from '../../service/load';
 
 @Component({
   selector: 'v-env-fan',
@@ -7,6 +9,12 @@ import {Api} from '../../service/api';
   styleUrls: ['./env-fan.page.scss'],
 })
 export class EnvFanPage implements OnInit {
+    /* 风机 */
+    // 模式状态
+    controlModel = '';
+    // 设备信息
+    devices = [];
+
 
   // 工作模式
   workModeSetting = {  'workMode' : '1',
@@ -27,7 +35,7 @@ export class EnvFanPage implements OnInit {
         param: [
         {
             name: '1号风机组',
-            runningState:true,  //是否开启
+            runningState:true,  // 是否开启
         },
         {
             name: '2号风机组',
@@ -36,13 +44,30 @@ export class EnvFanPage implements OnInit {
         ]
     };
 
-    constructor(private api: Api,) { }
+    constructor(private api: Api, private ac: ActivatedRoute, private load: Load) { }
 
     ngOnInit() {
+        this.ac.queryParams.subscribe((data) => {
+            this.fieldRegionNo = data.no;
+        });
+        this.getData(0);
+    }
+
+    getData(time) {
+        if (time) {
+            this.load.toLoad('加载中...', false);
+        }
+        this.api.cowshedApp.getFengJiData([{'fieldRegionNo' : this.fieldRegionNo}, (data) => {
+
+            if (data) {
+                this.controlModel = data.controlModel;
+                this.devices = data.param;
+            }
+        }]);
     }
 
     toggle(a) {
-        console.log("123");
+        // console.log("123");
     }
 
     allCheck(a) {
@@ -66,7 +91,4 @@ export class EnvFanPage implements OnInit {
         }]);
     }
 
-    getData(a){
-
-    }
 }

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

@@ -30,9 +30,9 @@
             line-height: 25px;
             margin-bottom: 5px;">故障统计</h1>
   <div style="margin-left:1%">
-  <v-kanban class="home-bar" name="热应激" iconClass="vo v-youxuan" iconColor="#285B90" iconSize="30px"></v-kanban>
-  <v-kanban class="home-bar" name="热应激" iconClass="vo v-yujing" iconColor="#D27440" iconSize="30px"></v-kanban>
-  <v-kanban class="home-bar" name="故障总数"  iconClass="vo v-guzhang2" iconColor="#FAB139" iconSize="30px"></v-kanban>
+  <v-kanban class="home-bar" name="热应激" [inData]="thiGood" iconClass="vo v-youxuan" iconColor="#3e9058" iconSize="30px"></v-kanban>
+  <v-kanban class="home-bar" name="热应激" [inData]="thiBad" iconClass="vo v-yujing" iconColor="#FAB139" iconSize="30px"></v-kanban>
+  <v-kanban class="home-bar" name="故障总数" [inData]="alarmTotal" iconClass="vo v-guzhang2" iconColor="#B23706" iconSize="30px"></v-kanban>
   </div>
   <h1 style="
             font-size: 16px;
@@ -44,23 +44,18 @@
     <ion-item *ngFor="let item of items" (click)="toControl(item)" class="ion-item" style="width: 100%; --padding-start: 0px">
       <div class="item">
         <div class="top">
-          <i class="vo v-tixing"></i> {{item.name}}
+          <i *ngIf="item.alarm" class="vo v-tixing"></i> {{item.fieldRegionName}}
         </div>
         <div class="content">
-          <span class="block2" *ngIf="item.temp">温度: &nbsp;&nbsp;{{item.temp}} ℃ &nbsp;&nbsp;</span>
-          <span class="block1" *ngIf="item.humi">湿度: &nbsp;&nbsp;{{item.humi}} %  &nbsp;&nbsp;</span>
-          <span class="block1" *ngIf="item.heatStressLevel">热应激等级: &nbsp;&nbsp;{{item.heatStressLevel}}</span>
+          <span *ngIf="item.temp">温度: &nbsp;&nbsp;{{item.temp}} ℃ &nbsp;&nbsp;</span>
+          <span *ngIf="item.humi">湿度: &nbsp;&nbsp;{{item.humi}} %  &nbsp;&nbsp;</span>
+          <span *ngIf="item.heatStressLevel">热应激等级: &nbsp;&nbsp;<span class="warmColor{{item.heatStressLevel}}">{{item.heatStressLevelName}}</span></span>
         </div>
         <div class="bottom">
           <span [ngClass]="{'online': item.online, 'offline': !item.online}">{{item.online ? '在线' : '离线'}}    </span>
-          <span *ngIf="item.online" class="online">{{item.operationModel ? '平控' :'现控'}}    </span>
-          <span *ngIf="item.online && item.operationModel && item.isWisdomModel === 2" class="online">智控    </span>
-          <span *ngIf="item.online && item.operationModel && item.isWisdomModel === 1" class="online">自控    </span>
-          <span *ngIf="item.online && item.operationModel && item.isWisdomModel === 0" class="online">手控    </span>
-          <!--<div class="block1" *ngIf="item.yewei || item.yewei === 0">池体液位: &nbsp;&nbsp;{{item.yewei}} m</div>-->
-          <!--<div class="block2" *ngIf="item.temp || item.temp === 0">液体温度: &nbsp;&nbsp;{{item.temp}} ℃</div>-->
-          <!--<div class="block2">运行状态: &nbsp;&nbsp;{{item.state ? '工作中' : '未运行'}} </div>-->
-          <!--<span class="right">{{item.ts | date: 'yyyy-MM-dd HH:mm:ss'}}</span>-->
+          <span *ngIf="item.operationModel" class="online">{{item.operationModel ? '平控' :'现控'}}    </span>
+          <span *ngIf="item.operationModel" [ngClass]="{'online': item.isWisdomModel, 'offline': !item.isWisdomModel}" class="online">智控    </span>
+          <span *ngIf="item.ts" class="right">{{item.ts}}</span>
         </div>
       </div>
     </ion-item>

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

@@ -67,13 +67,14 @@
 }
 
 .offline {
-  border-radius: 17px;
+  border-radius: 2px;
   background-color: #9ea7b4;
   display: inline-block;
   vertical-align: middle;
   box-shadow: #ccc 0.5px 0.5px 3px;
-  padding: 2px 2px 2px 2px;
+  padding: 4px 4px 4px 4px;
   color: white;
+  margin-left: 5px;
   font-size: 14px;
 }
 
@@ -90,3 +91,12 @@
   padding-left: 5px;
 }
 
+.warmColor2 {
+  color: #FAB139;
+}
+.warmColor3, .warmColor4 {
+  color: #B22222;
+}
+
+
+

src/app/home/home.page.html

@@ -3,7 +3,7 @@
     <ion-header>
         <ion-toolbar color="gray">
             <ion-buttons slot="start">
-                <ion-back-button text="" defaultHref="/index" color="secondary"></ion-back-button>
+                    <ion-back-button text="" defaultHref="/index" color="secondary"></ion-back-button>
             </ion-buttons>
             <div class="topSearch">
                 <SearchBar [placeholder]="'点击此处进行搜索'" [(ngModel)]="searchText"

src/app/service/api.ts

@@ -29,7 +29,21 @@ export class Api {
         getDeviceData: (data) => this.trans('post', '/app/getDeviceData', data),
         getLiquidLevelData: (data) => this.trans('post', '/app/getLiquidLevelData', data),
         getNorthSouthWaterData: (data) => this.trans('post', '/app/getNorthSouthWaterData', data),
+    }
+
+    public cowshedApp = {
+        // 牛舍首页查询
         getAllRegionData: (data) => this.trans('get', '/cowshedApp/getAll', data),
+        // 根据牛舍名称查询牛舍信息
+        getAllForLike: (data) => this.trans('post', '/cowshedApp/getAllForLike', data),
+        // 获取牛舍的基本信息
+        getRealDataByFieldRegionNo: (data) => this.trans('post', '/cowshedApp/getRealDataByFieldRegionNo', data),
+        // 获取风机信息
+        getFengJiData: (data) => this.trans('post', '/cowshedApp/getFengJiData', data),
+        // 获取喷淋信息
+        getPenLinData: (data) => this.trans('post', '/cowshedApp/getPenLinData', data),
+        // 获取照明信息
+        // 获取水槽信息
     };
 
     public user = {