牛舍首页,详情页整理layout修改基本完毕

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

@@ -7,7 +7,7 @@
       <!--<ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
       <ion-row>
         <ion-col style="padding: 0px 0px 0px 10px;">
-          <img [src]="iconImg1" [ngStyle]="{'width': iconWidth, 'margin-left': '5px'}" >
+          <img [src]="iconImg1" [ngStyle]="{'width': iconWidth, 'margin-left': '5px', 'height': 'auto'}" >
         </ion-col>
         <ion-col style="padding-left: 0px;">
           <div style="padding-left: 5px;">
@@ -18,7 +18,7 @@
           <span style="border-right: 1px solid #E0E0E0; font-size:30px;vertical-align: center"></span>
         </ion-col>
         <ion-col style="padding: 0px 0px 0px 10px;">
-          <img [src]="iconImg2" [ngStyle]="{'width': iconWidth}">
+          <img [src]="iconImg2" [ngStyle]="{'width': iconWidth, 'height': 'auto'}">
         </ion-col>
         <ion-col style="padding-left: 0px;">
           <div>
@@ -40,7 +40,7 @@
           <span style="border-right: 1px solid #E0E0E0; font-size:30px;vertical-align: center"></span>
         </ion-col>
         <ion-col style="padding: 0px 0px 0px 10px;">
-          <img [src]="iconImg3" style="width: 90% !important; height: 90%; padding-top: 3px;">
+          <img [src]="iconImg3" style="width: 90% !important; height: auto; padding-top: 3px;">
         </ion-col>
         <ion-col style="padding-left: 0px;">
           <div style="padding-left: 5px;">

src/app/components/kanban-double/kanban-double.component.scss

 .kanban {
   width: 99%;
-  height: 100px;
+  height: 95px;
   align-items:center;
   justify-content:
           center;text-align: center;

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

@@ -16,9 +16,9 @@
         <span *ngIf="item.ts" class="right font-ts">{{item.ts | date: 'yyyy-MM-dd HH:mm'}}</span>
     </div>
     <div style="background-color: #F0F0F0;" align="center">
-          <v-kanban-small class="home-bar" name="温度" [inData]="item.temp" iconWidth="50%" unit="℃" [iconImg]="'../../assets/img/icon-temp.png'" iconColor="#61C7CC" fontSize="14px"></v-kanban-small>
-          <v-kanban-small class="home-bar" name="湿度" [inData]="item.humi" iconWidth="50%" unit="% rH" [iconImg]="'../../assets/img/icon-humi.png'" iconColor="#61C7CC"  fontSize="14px"></v-kanban-small>
-          <v-kanban-small class="home-bar" name="热应激" [inData]="item.heatStressLevelName" iconWidth="35%" [iconImg]="'../../assets/img/icon-heat.png'" [iconColor]="item.heatStressColor" fontSize="14px"></v-kanban-small>
+          <v-kanban-small class="home-bar" name="温度" [inData]="item.temp" iconWidth="50%" unit="℃" [iconImg]="'../../assets/img/icon-temp.png'" [fontColor]="item.tempColor" fontSize="14px"></v-kanban-small>
+          <v-kanban-small class="home-bar" name="湿度" [inData]="item.humi" iconWidth="50%" unit="% rH" [iconImg]="'../../assets/img/icon-humi.png'" [fontColor]="item.humiColor"  fontSize="14px"></v-kanban-small>
+          <v-kanban-small class="home-bar" name="热应激" [inData]="item.heatStressLevelName" iconWidth="35%" [iconImg]="'../../assets/img/icon-heat.png'" [fontColor]="item.heatStressColor" fontSize="14px"></v-kanban-small>
           <v-kanban-small class="home-bar" name="在离舍" [inData]="inHouseName" iconWidth="35%" [iconImg]="'../../assets/img/icon-house.png'" iconColor="#61C7CC" fontSize="14px"></v-kanban-small>
     </div>
     <div class="inHouseDiv font-content-title">

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

@@ -24,15 +24,17 @@ export class EnvDetailPage implements OnInit {
         });
     }
 
-    item = {
+    item: any = {
         factoryNo: '',
         factoryName: '',
         fieldRegionNo: '',
         fieldRegionName: '',
         temp: 0,
         humi: 0,
+        // tempColor: '#61C7CC',
+        // humiColor: '#61C7CC',
         heatStressLevel: 0,
-        heatStressColor: '#61C7CC',
+        // heatStressColor: '#61C7CC',
         heatStressLevelName: '无',
         online: 0,
         operationModel: 1,
@@ -91,18 +93,19 @@ export class EnvDetailPage implements OnInit {
         }
         this.api.cowshedApp.getRealDataByFieldRegionNo([{fieldRegionNo: this.fieldRegionNo}, (data) => {
             if (data) {
+                const environmentConfigJson = JSON.parse(data.environmentConfigJson.toString());
                 this.item = data;
                 this.item.heatStressLevelName = this.getHeatStressLevelName(data.heatStressLevel);
                 this.item.inHouse.inHouseName = this.getInHouseState(data.inHouse.inHouse);
                 this.item.inHouse.inHouseState = data.inHouse.inHouse === 1 ? true : false;
                 this.inHouseName = this.getInHouseState(data.inHouse.inHouse);
                 this.inHouseState = data.inHouse.inHouse === 1 ? true : false;
-                this.initLayout();
+                this.initLayout(environmentConfigJson);
             }
         }]);
     }
 
-    initLayout() {
+    initLayout(environmentConfigJson) {
         // this.showerLink = '/env-detail/shower/' + this.fieldRegionNo;
         // this.lightLink = '/env-detail/light/' + this.fieldRegionNo;
         // this.waterchannelLink = '/env-detail/waterchannel/' + this.fieldRegionNo;
@@ -116,9 +119,31 @@ export class EnvDetailPage implements OnInit {
                 this.item.heatStressLevel === 1 ? '#61C7CC' :
                     this.item.heatStressLevel === 2 ? '#F8B72D' :
                         this.item.heatStressLevel === 3 ? '#F2401C' : '#F2401C';
+
+            this.item.tempColor = this.getColor(this.item.temp, environmentConfigJson.TU, environmentConfigJson.TL);
+            this.item.humiColor = this.getColor(this.item.humi, environmentConfigJson.HU, environmentConfigJson.HL);
+
         }
     }
 
+    getColor(value, maxValue, minValue?) {
+        if (value !== undefined && value !== null && value !== '' && maxValue !== undefined && maxValue !== null && maxValue !== '') {
+            if (value > maxValue) {
+                return '#F2401C';
+            } else {
+                if (minValue !== undefined && minValue !== null) {
+                    if (value < minValue) {
+                        return '#F2401C';
+                    } else {
+                        return '#61C7CC';
+                    }
+                }
+            }
+        }
+
+        return '#61C7CC';
+    }
+
     getHeatStressLevelName(level) {
         let levelName = '';
         switch (level) {

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

@@ -5,7 +5,7 @@
 <ion-content color="light" style="height: 100%;">
   <div class="env-detail-content">
     <h1 class="main-title-detail">模式状态</h1>
-    <ion-item lines="none" style="width: 98%;">
+    <ion-item lines="none" style="width: 98%;" class="item-height">
       <ion-grid>
         <ion-row>
           <ion-col>

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

@@ -35,7 +35,7 @@
                      [iconImg2]="'../../assets/img/level-bad.png'"
                      [iconImg3]="'../../assets/img/alarm.png'"
                      iconColor1="#61C7CC"  iconColor2="#F8B72D" iconColor3="#F2401C"
-                     fontSize="35px" ></v-kanban-double>
+                     fontSize="30px" ></v-kanban-double>
     <!--<v-kanban-large class="home-bar" name="热应激" [inData]="thiBad" [iconImg]="'../../assets/img/level-bad.png'" iconColor="#FAB139" fontSize="25px" iconWidth="45px !important"></v-kanban-large>-->
     <!--<v-kanban-large class="kanban-large" name="故障总数" [inData]="alarmTotal" [iconImg]="'../../assets/img/alarm.png'" iconColor="#F2401C" fontSize="25px" iconWidth="45px !important"></v-kanban-large>-->
   </div>
@@ -50,11 +50,11 @@
         </div>
         <div class="content font-content">
           <div class="detailInfo" style="width: 40%">热应激: &nbsp;<span class="warmColor{{item.heatStressLevel}}">{{item.heatStressLevelName}}</span></div>
-          <div *ngIf="item.NH3 !== '--'" class="detailInfo" style="width: 40%">氨气: &nbsp;{{item.NH3 | number:'0.0-2'}}ppm</div>
+          <div *ngIf="item.NH3 !== '--'" class="detailInfo" style="width: 40%">氨气: &nbsp;<span class="{{item.NH3Color}}Color">{{item.NH3 | number:'0.0-2'}}ppm</span></div>
           <div *ngIf="item.NH3 === '--'" class="detailInfo" style="width: 40%">氨气: &nbsp;{{'--'}}ppm</div>
-          <div *ngIf="item.temp !== '--'" class="detailInfo" style="width: 40%">温度: &nbsp;{{item.temp | number:'0.1-1'}}℃</div>
+          <div *ngIf="item.temp !== '--'" class="detailInfo" style="width: 40%">温度: &nbsp;<span class="{{item.NH3Color}}Color">{{item.temp | number:'0.1-1'}}℃</span></div>
           <div *ngIf="item.temp === '--'" class="detailInfo" style="width: 40%">温度: &nbsp;{{'--'}}℃</div>
-          <div *ngIf="item.humi !== '--'" class="detailInfo" style="width: 40%">湿度: &nbsp;{{item.humi | number:'0.0-0'}}% rH</div>
+          <div *ngIf="item.humi !== '--'" class="detailInfo" style="width: 40%">湿度: &nbsp;<span class="{{item.NH3Color}}Color">{{item.humi | number:'0.0-0'}}% rH</span></div>
           <div *ngIf="item.humi === '--'" class="detailInfo" style="width: 40%">湿度: &nbsp;{{'--'}}% rH</div>
         </div>
         <div class="bottom">

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

@@ -99,11 +99,15 @@
   padding-left: 5px;
 }
 
+
+.warmColor0, .warmColor1 {
+}
+
 .warmColor2 {
-  color: #FAB139;
+  color: #F8B72D;
 }
 .warmColor3, .warmColor4 {
-  color: #B22222;
+  color: #F2401C;
 }
 
 .kanban-double {

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

@@ -98,7 +98,7 @@ export class EnvHomePage implements OnInit {
                         this.isError = false;
                         this.items = [];
                         data.resultIndexDataListForAppVos.map((value, index) => {
-                            const environmentConfigJson = value.environmentConfigJson;
+                            const environmentConfigJson = JSON.parse(value.environmentConfigJson.toString());
                             const itemInfo = {
                                 factoryNo: value.factoryNo,
                                 factoryName: value.factoryName,
@@ -107,6 +107,9 @@ export class EnvHomePage implements OnInit {
                                 temp: this.getParam(value.temp),
                                 humi: this.getParam(value.humi),
                                 NH3: this.getParam(value.NH3),
+                                tempColor: this.getColor(value.temp, environmentConfigJson.TU, environmentConfigJson.TL),
+                                humiColor: this.getColor(value.humi, environmentConfigJson.HU, environmentConfigJson.HL),
+                                NH3Color: this.getColor(value.NH3, environmentConfigJson.NH3U),
                                 heatStressLevel: value.heatStressLevel,
                                 heatStressLevelName: this.getHeatStressLevelName(value.heatStressLevel),
                                 online: value.online,
@@ -115,7 +118,6 @@ export class EnvHomePage implements OnInit {
                                 alarm: value.alarm,
                                 ts: value.ts
                             };
-
                             this.items.push(itemInfo);
                         });
                     } else {
@@ -147,6 +149,24 @@ export class EnvHomePage implements OnInit {
         return result;
     }
 
+    getColor(value, maxValue, minValue?) {
+        if (value !== undefined && value !== null && value !== '' && maxValue !== undefined && maxValue !== null && maxValue !== '') {
+            if (value > maxValue) {
+                return 'alarm';
+            } else {
+                if (minValue !== undefined && minValue !== null) {
+                    if (value < minValue) {
+                        return 'alarm';
+                    } else {
+                        return 'normal';
+                    }
+                }
+            }
+        }
+
+        return 'normal';
+    }
+
     getHeatStressLevelName(codeId) {
         let levelName = '';
         switch (codeId) {

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

@@ -5,7 +5,7 @@
 <ion-content color="light" style="height: 100%;">
   <div class="env-detail-content">
     <h1 class="main-title-detail">模式状态</h1>
-    <ion-item lines="none" style="width: 98%;">
+    <ion-item lines="none" style="width: 98%;" class="item-height">
       <ion-grid>
         <ion-row>
           <ion-col>

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

@@ -5,7 +5,7 @@
 <ion-content color="light" style="height: 100%;">
   <div class="env-detail-content">
     <h1 class="main-title-detail">模式状态</h1>
-    <ion-item lines="none" style="width: 98%;">
+    <ion-item lines="none" style="width: 98%;" class="item-height">
       <ion-grid>
         <ion-row>
           <ion-col>
@@ -40,7 +40,7 @@
     </ion-item>
 
     <h1 class="main-title-detail">供液泵状态</h1>
-    <ion-item lines="none" class="item-content">
+    <ion-item lines="none" class="item-content" class="item-height">
       <div>
         <!-- 1-异常，0-正常 -->
         <img *ngIf="bump.alarm === 0" src="../../assets/img/model-on.png" class="modelState" style="margin-right: 0px;">

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

@@ -122,11 +122,12 @@ export class EnvShowerPage implements OnInit {
                 this.fieldDeviceType = data.fieldDeviceType;
                 this.controlModel = data.controlModel;
                 this.bump = data.bump;
+                this.bump.press = this.getPress(data.bump.press);
                 this.controlConfig = data.controlConfig;
                 this.param = data.param;
                 this.param.forEach(device => {
                     device.op = device.cycle === 1 ? true : false;
-                    device.press = device.press < 0 ? 0 : device.press;
+                    device.press = this.getPress(device.press);
                 });
 
                 if (this.param[0]) {
@@ -141,6 +142,13 @@ export class EnvShowerPage implements OnInit {
         }]);
     }
 
+    getPress(param) {
+        if (param === undefined || param === null || param < 0) {
+            return 0;
+        }
+        return param;
+    }
+
     initButtons() {
         this.param.forEach((device) => {
             // 远控的场合  小按钮活性(disabled = false)

src/global.scss

@@ -198,6 +198,10 @@ img {
   color: #F2401C;
 }
 
+.normalColor {
+  color: #a5a5a5;
+}
+
 .main-title {
   font-size: 16px;
   padding-left: 5px;
@@ -286,3 +290,7 @@ img {
   border-radius: 7px;
   padding: 5px;
 }
+
+.item-height {
+  height: 38px;
+}