调整layout

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

@@ -10,7 +10,7 @@
           <img [src]="iconImg1" [ngStyle]="{'width': iconWidth, 'margin-left': '5px', 'height': 'auto'}" >
         </ion-col>
         <ion-col style="padding-left: 0px;">
-          <div style="padding-left: 5px;">
+          <div style="padding-left: 5px; padding-top: 2px;">
             <span style="padding-bottom: 10px" [ngStyle]="{'color':fontColor1, 'font-size': fontSize}">{{inData1}}</span>
           </div>
         </ion-col>
@@ -21,7 +21,7 @@
           <img [src]="iconImg2" [ngStyle]="{'width': iconWidth, 'height': 'auto'}">
         </ion-col>
         <ion-col style="padding-left: 0px;">
-          <div>
+          <div style="padding-top: 2px;">
             <span style="padding-bottom: 10px" [ngStyle]="{'color':fontColor2, 'font-size': fontSize}">{{inData2}}</span>
           </div>
         </ion-col>
@@ -43,7 +43,7 @@
           <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;">
+          <div style="padding-left: 5px; padding-top: 2px;">
             <span style="padding-bottom: 10px" [ngStyle]="{'color':fontColor3, 'font-size': fontSize}">{{inData3}}</span>
           </div>
         </ion-col>

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

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

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

@@ -8,11 +8,11 @@
   </ion-toolbar>
 
   <div>
-    <ion-segment scrollable style="position: sticky; margin-top:10px;" color="secondary" (click)="segmentChanged($event)">
-      <ion-segment-button value="trouble" [checked]="isTroubleDis">
+    <ion-segment mode="ios" style="position: sticky;" color="secondary" (ionChange)="segmentChanged($event)">
+      <ion-segment-button  mode="ios" value="trouble" [checked]="isTroubleDis" class="ion-segment-button">
         <ion-label>故障</ion-label>
       </ion-segment-button>
-      <ion-segment-button value="alarm" [checked]="isAlarmDis">
+      <ion-segment-button  mode="ios" value="alarm" [checked]="isAlarmDis" class="ion-segment-button">
         <ion-label>预警</ion-label>
       </ion-segment-button>
     </ion-segment>
@@ -33,26 +33,34 @@
       </ion-select>
     </ion-item>
 
-    <ion-item lines="full" class="ionItem" style="height: 45px;">
+    <ion-item lines="full" class="ionItem" color="gray" style="height: 45px; --inner-padding-end: 0px;">
       <div style="width: 28%">
-        <ion-datetime style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="startTime" (click)="refresh()" id="selectStartTime"></ion-datetime>
+        <ion-datetime class="content-text-color" style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="startTime" (click)="refresh()" id="selectStartTime"></ion-datetime>
       </div>
       <div style="width: 2%">
         <span>~</span>
       </div>
       <div style="width: 30%">
-        <ion-datetime style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="stopTime" style="margin-left: 3px;" (click)="refresh()" id="selectStopTime"></ion-datetime>
+        <ion-datetime class="content-text-color" style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="stopTime" style="margin-left: 3px;" (click)="refresh()" id="selectStopTime"></ion-datetime>
       </div>
-      <div style="width: 40%">
+      <div style="width: 40%; padding-right: 10px;">
         <div class="note" style="margin-bottom: 5px;">
-          <span style="text-align: right; padding-right:5px; width:60%;">未解决数</span>
-          <span style="width:40%" *ngIf="isTroubleDis">{{detailInfo.devErr}}</span>
-          <span style="width:40%" *ngIf="isAlarmDis">{{detailInfo.alarm}}</span>
+          <div style="width:80%; display:inline-block">
+            <span class="font-note" style="text-align: right; padding-right:5px;">未解决数</span>
+          </div>
+          <div style="width:20%; display:inline-block;">
+            <span class="main-color" style="font-size: 13px" *ngIf="isTroubleDis">{{detailInfo.devErr}}</span>
+            <span class="main-color" style="font-size: 13px" *ngIf="isAlarmDis">{{detailInfo.alarm}}</span>
+          </div>
         </div>
         <div class="note">
-          <span style="text-align: right; padding-right:5px; width:60%;">总数</span>
-          <span style="width:40%" *ngIf="isTroubleDis">{{detailInfo.devErrTotal}}</span>
-          <span style="width:40%" *ngIf="isAlarmDis">{{detailInfo.alarmTotal}}</span>
+          <div style="width:80%; display:inline-block">
+            <span class="font-note" style="text-align: right; padding-right:5px;">总数</span>
+          </div>
+          <div style="width:20%; display:inline-block;">
+            <span class="main-color" style="font-size: 13px" *ngIf="isTroubleDis">{{detailInfo.devErrTotal}}</span>
+            <span class="main-color" style="font-size: 13px" *ngIf="isAlarmDis">{{detailInfo.alarmTotal}}</span>
+          </div>
         </div>
       </div>
     </ion-item>
@@ -60,7 +68,7 @@
 
 </ion-header>
 
-<ion-content color="light" style="background-color: #F3F4F4;" scroll="false">
+<ion-content color="gray" style="background-color: #F3F4F4;" scroll="false">
 
   <div style="padding:5px;">
     <div class="detailContent">
@@ -69,18 +77,18 @@
         <div class="entry" *ngFor="let item of troubleList">
           <div class="title">
             <div><img [src]="'../../assets/img/' + item.fieldDeviceType + '.png'" class="deviceIcon"></div>
-            <p style="font-size: 14px">{{item.troubleTime}}</p>
+            <p class="font-ts" style="font-size:13px !important">{{item.troubleTime}}</p>
           </div>
           <div class="body">
-            <h3 style="margin-bottom: 5px;">{{item.description}}</h3>
+            <h3 style="margin-bottom: 5px;" class="font-content-title">{{item.description}}</h3>
             <div>
               <div style="width:65%; float: left">
-                <div *ngIf="item.data !== null && item.data.temp !== undefined && item.data.temp !== null && item.data.temp !== ''" class="warnContent">温度: {{item.data.temp}} ℃</div>
-                <div *ngIf="item.data !== null && item.data.humi !== undefined && item.data.humi !== null && item.data.humi !== ''" class="warnContent">湿度: {{item.data.humi}} %</div>
-                <div *ngIf="item.data !== null && item.data.heatStressLevel !== undefined && item.data.heatStressLevel !== null && item.data.heatStressLevel !== ''" class="warnContent">热应激等级: {{item.data.heatStressLevel}}</div>
-                <div *ngIf="item.data !== null && item.data.liquidPump !== undefined && item.data.liquidPump !== null  && item.data.liquidPump !== ''" class="warnContent">供液泵压力: {{item.data.liquidPump}} MPa</div>
-                <div *ngIf="item.data !== null && item.data.press !== undefined && item.data.press !== null && item.data.press !== ''" class="warnContent">电磁阀压力: {{item.data.press}} MPa</div>
-                <div *ngIf="item.data !== null && item.data.NH3 !== undefined && item.data.NH3 !== null && item.data.NH3 !== ''" class="warnContent">氨气: {{item.data.NH3}} ppm</div>
+                <div *ngIf="item.data !== null && item.data.temp !== undefined && item.data.temp !== null && item.data.temp !== ''" class="warnContent font-content">温度: {{item.data.temp}} ℃</div>
+                <div *ngIf="item.data !== null && item.data.humi !== undefined && item.data.humi !== null && item.data.humi !== ''" class="warnContent font-content">湿度: {{item.data.humi}} %</div>
+                <div *ngIf="item.data !== null && item.data.heatStressLevel !== undefined && item.data.heatStressLevel !== null && item.data.heatStressLevel !== ''" class="warnContent font-content">热应激等级: {{item.data.heatStressLevel}}</div>
+                <div *ngIf="item.data !== null && item.data.liquidPump !== undefined && item.data.liquidPump !== null  && item.data.liquidPump !== ''" class="warnContent font-content">供液泵压力: {{item.data.liquidPump}} MPa</div>
+                <div *ngIf="item.data !== null && item.data.press !== undefined && item.data.press !== null && item.data.press !== ''" class="warnContent font-content">电磁阀压力: {{item.data.press}} MPa</div>
+                <div *ngIf="item.data !== null && item.data.NH3 !== undefined && item.data.NH3 !== null && item.data.NH3 !== ''" class="warnContent font-content">氨气: {{item.data.NH3}} ppm</div>
               </div>
               <div style="width:35%; float: left">
                 <div *ngIf="displayArea === 'trouble' && item.disposeState === 0" >

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

@@ -24,14 +24,14 @@
 .note {
   width: 100%;
   text-align: right;
-  font-size:14px;
+  font-size:13px;
   padding-right: 5px;
 }
 
 .ionItem{
   font-size: 13px;
   --padding-start: 5px;
-  --padding-end: 5px;
+  --padding-end: 0px;
   height: 35px;
 }
 
@@ -54,7 +54,7 @@
 
 .warnContent {
   width: 100%;
-  font-size:14px;
+  margin-bottom:5px;
 }
 
 .warnIcon {
@@ -151,3 +151,7 @@
   margin-top: 0;
   font-weight: 400;
 }
+
+.itemColor {
+  --background: auto;
+}

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

@@ -169,8 +169,8 @@ export class EnvAlarmDetailPage implements OnInit {
 
     appendItems(trouble, allDataLength) {
         // await this.wait(500);
-        console.log(allDataLength);
-        console.log(this.troubleList.length);
+        // console.log(allDataLength);
+        // console.log(this.troubleList.length);
         if (trouble && trouble.length > 0 ) {
             for (let i = 0; i < trouble.length; i++) {
                 this.troubleList.push(trouble[i]);
@@ -178,7 +178,7 @@ export class EnvAlarmDetailPage implements OnInit {
             }
             // this.infiniteScroll.disabled = false;
             this.page = this.page + 1;
-            console.log(this.infiniteScroll.disabled);
+            // console.log(this.infiniteScroll.disabled);
         } else {
             document.getElementById('infiniteScroll').setAttribute('disabled', 'disabled');
             // this.infiniteScroll.disabled = true;
@@ -206,7 +206,7 @@ export class EnvAlarmDetailPage implements OnInit {
         this.troubleList = [];
         setTimeout(async () => {
             console.log('segment changed');
-            console.log(this.infiniteScroll.disabled);
+            console.log(ev);
             this.page = 1;
             this.disposeState = '';
             this.fieldDeviceType = '';

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

@@ -13,9 +13,13 @@
       <ion-card-title style="display: inline-block" style="width:100%">
         <div class="cardTitle">
           <div style="width: 65%; padding-right: 5px; display: inline-block">
-            <i class="vo v-fangzi"></i>
-            <span style="margin-left:10px">{{item.fieldRegionName}}</span>
-            <span class="alarmNum">{{item.total}}</span>
+            <div style="float:left;padding-top:3px;">
+              <img [src]="'../../assets/img/house.png'" style="display: inline-block;margin-left: 10px; margin-right: 10px;width:20px !important">
+            </div>
+            <div style="float:left; padding-top: 4px;">
+              <span style="text-align: center" class="font-sub-title">{{item.fieldRegionName}}</span>
+            </div>
+            <ion-badge color="danger" mode="ios" *ngIf="item.total > 0" class="badge">{{item.total}}</ion-badge>
           </div>
           <div style="width: 30%; padding-right: 5px; display: inline-block; font-size: 13px; color:#61C7CC">
             <ion-select interface="popover" placeholder="" style="padding: 0px;" [(ngModel)]="item.interval" (ionChange)="dismissPopover(item)">
@@ -26,39 +30,53 @@
             </ion-select>
           </div>
 
-          <!--<span style="float:right; padding-right: 5px;">-->
-            <!--&lt;!&ndash;<ion-popover-controller></ion-popover-controller>&ndash;&gt;-->
-            <!--&lt;!&ndash;<a (click)="presentPopover(item)" [id]="item.fieldRegionNo">近一年</a>&ndash;&gt;-->
-            <!---->
-          <!--</span>-->
         </div>
       </ion-card-title>
     </ion-card-header>
-    <ion-card-content style="padding-top: 5px; padding-bottom: 5px;">
+    <ion-card-content class="cardContent">
       <div class="sub" style="text-align: center; " style="width:100%">
-        <!--<ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
         <ion-row style="width:100%">
-          <ion-col style="padding: 5px; width:50%; border-right:1px solid lightgray" (click)="toControl(item, 'trouble')">
+          <ion-col style="padding: 0px 5px; width:50%; border-right:1px solid lightgray" (click)="toControl(item, 'trouble')">
             <div>
-              <div style="height: 60px; width: 100%">
-                <div style="height: 35px; float:left;width: 100%">
-                  <span class="label">未解决故障数</span><span style="color:#d33939; font-size:24px;">{{item.devErr}}</span>
+              <div style="height: 70px; width: 100%">
+                <div style="height: 40px; float:left;width: 100%">
+                  <div style="width: 75%; display: inline-block; text-align: right;">
+                    <span class="label-large content-text-color" style="margin-top: 15px;">未解决故障数</span>
+                  </div>
+                  <div style="width: 25%; display: inline-block; text-align: left;">
+                    <span style="color:#f04141; font-size:32px; ">{{item.devErr}}</span>
+                  </div>
                 </div>
                 <div style="height: 25px; float:left;width: 100%">
-                  <span class="label">总数</span><span>{{item.devErrTotal}}</span>
+                  <div style="width: 75%; display: inline-block; text-align: right;">
+                    <span class="label-small note-text-color" style="margin-top: 8px;">总数</span>
+                  </div>
+                  <div style="width: 25%; display: inline-block; text-align: left;">
+                    <span style="margin-left:2px;" class="note-text-color">{{item.devErrTotal}}</span>
+                  </div>
                 </div>
               </div>
             </div>
           </ion-col>
 
-          <ion-col style="padding: 5px; width:50%" (click)="toControl(item, 'alarm')">
+          <ion-col style="padding: 0px 5px; width:50%" (click)="toControl(item, 'alarm')">
             <div>
-              <div style="height: 60px; width: 100%">
-                <div style="height: 35px; float:left;width: 100%">
-                  <span class="label">未解决预警数</span><span style="color:#f0ca45; font-size:24px;">{{item.alarm}}</span>
+              <div style="height: 70px; width: 100%">
+                <div style="height: 40px; float:left;width: 100%">
+                  <div style="width: 75%; display: inline-block; text-align: right;">
+                    <span class="label-large content-text-color" style="margin-top: 15px;">未解决预警数</span>
+                  </div>
+                  <div style="width: 25%; display: inline-block; text-align: left;">
+                    <span style="color:#f0ca45; font-size:32px;">{{item.alarm}}</span>
+                  </div>
                 </div>
                 <div style="height: 25px; float:left;width: 100%">
-                  <span class="label">总数</span><span>{{item.alarmTotal}}</span>
+                  <div style="width: 75%; display: inline-block; text-align: right;">
+                    <span class="label-small note-text-color" style="margin-top: 8px;">总数</span>
+                  </div>
+                  <div style="width: 25%; display: inline-block; text-align: left;">
+                    <span style="margin-left:2px;" class="note-text-color">{{item.alarmTotal}}</span>
+                  </div>
                 </div>
               </div>
             </div>

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

@@ -89,7 +89,7 @@
   //box-shadow: #ccc 0.5px 0.5px 3px;
 }
 
-.label {
+.label-large {
   width: 90px;
   display: inline-block;
   font-size: 14px;
@@ -97,6 +97,14 @@
   margin-right: 10px;
 }
 
+.label-small {
+  width: 90px;
+  display: inline-block;
+  font-size: 13px;
+  text-align: right;
+  margin-right: 10px;
+}
+
 .cardTitle {
   margin-top:3px;
   padding-bottom:3px;
@@ -105,6 +113,17 @@
   border-bottom: 1px solid lightgray;
 }
 
+.cardContent {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  /* --inner-padding-start: 0px; */
+  /* padding-inline-start: 10px; */
+  -webkit-padding-start: 5px;
+  padding-inline-start: 5px;
+  -webkit-padding-end: 5px;
+  padding-inline-end: 5px;
+}
+
 .popLabel {
   width: 120px;
   font-size: 15px;

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

@@ -4,46 +4,49 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content  color='light'>
-
-  <ion-item lines="full">
-    <div style="width:50%">
+<ion-content  color="light">
+  <ion-item lines="none" class="fix-item-padding itemColor">
+    <div style="width:60%">
       <ion-button color="secondary" style="display: inline-block" (click)="toDetail($event)">输入牛舍单产奶量并分析 >></ion-button>
     </div>
-    <div style="width:50%; text-align: right;padding-right: 20px;">
-      <ion-datetime displayFormat="YYYY-MM-DD" cancelText="取消" doneText="确认" [(ngModel)]="today" style="font-size:16px; position: relative;"></ion-datetime>
+    <div style="width:40%; text-align: right; padding-top: 2px;">
+      <div style="float:left; padding-right: 5px;">
+        <ion-datetime class="dateTime" displayFormat="YYYY-MM-DD" cancelText="取消" doneText="确认" [(ngModel)]="today" style="font-size:13px; position: relative;"></ion-datetime>
+      </div>
+      <div style="float:left;">
+        <img src="../../assets/img/calendar-small.png" style="width: 25px !important;">
+      </div>
     </div>
+
   </ion-item>
 
-  <h1 style="
-  font-size: 16px;
-  padding-left: 5px;
-  border-left: 5px solid #28c9bd;
-  line-height: 25px;
-  margin-bottom: 5px;">牛舍单产奶量排名</h1>
+  <div>
+    <h1 class="main-title clearColor" style="width:45%; display: inline-block">牛舍单产奶量排名</h1>
+    <div style="width:45%; text-align:right; display: inline-block" class="font-smaller">单位: 公斤(kg)/头</div>
+  </div>
   <div style="width:100%; padding-left:10px; padding-right:10px;">
-    <ion-item lines="full" class="rankItem">
+    <ion-item lines="full" class="rankItem fix-item-padding">
       <div class="rankIcon">
         <img [src]="'../../assets/img/rank1.png'">
       </div>
-      <div style="width:20%">
+      <div class="rankName">
         5号牛舍
       </div>
-      <div style="width:50%">
-        <ion-progress-bar color="secondary" value="0.95"></ion-progress-bar>
+      <div class="rankProgress">
+        <ion-progress-bar color="secondary" value="1"></ion-progress-bar>
       </div>
       <div class="rankValue">
         140
       </div>
     </ion-item>
-    <ion-item lines="full" class="rankItem">
+    <ion-item lines="full" class="rankItem fix-item-padding">
       <div class="rankIcon">
         <img [src]="'../../assets/img/rank2.png'">
       </div>
-      <div style="width:20%">
+      <div class="rankName">
         8号牛舍
       </div>
-      <div style="width:50%">
+      <div class="rankProgress">
         <ion-progress-bar color="secondary" value="0.80"></ion-progress-bar>
       </div>
       <div class="rankValue">
@@ -51,57 +54,57 @@
       </div>
     </ion-item>
 
-    <ion-item lines="full" class="rankItem">
+    <ion-item lines="full" class="rankItem fix-item-padding">
       <div class="rankIcon">
         <img [src]="'../../assets/img/rank3.png'">
       </div>
-      <div style="width:20%">
+      <div class="rankName">
         1号牛舍
       </div>
-      <div style="width:50%">
+      <div class="rankProgress">
         <ion-progress-bar color="secondary" value="0.75"></ion-progress-bar>
       </div>
       <div class="rankValue">
         105
       </div>
     </ion-item>
-    <ion-item lines="full" class="rankItem">
+    <ion-item lines="full" class="rankItem fix-item-padding">
       <div class="rankIcon">
         24
       </div>
-      <div style="width:20%">
-        24号牛舍
+      <div class="rankName">
+        20号牛舍
       </div>
-      <div style="width:50%">
-        <ion-progress-bar color="secondary" value="0.50"></ion-progress-bar>
+      <div class="rankProgress">
+        <ion-progress-bar color="medium" value="0.50"></ion-progress-bar>
       </div>
       <div class="rankValue">
         55
       </div>
     </ion-item>
-    <ion-item lines="full" class="rankItem">
+    <ion-item lines="full" class="rankItem fix-item-padding">
       <div class="rankIcon">
-        23
+        25
       </div>
-      <div style="width:20%">
+      <div class="rankName">
         23号牛舍
       </div>
-      <div style="width:50%">
-        <ion-progress-bar color="secondary" value="0.3"></ion-progress-bar>
+      <div class="rankProgress">
+        <ion-progress-bar color="medium" value="0.3"></ion-progress-bar>
       </div>
       <div class="rankValue">
         35
       </div>
     </ion-item>
-    <ion-item lines="full" class="rankItem">
+    <ion-item lines="full" class="rankItem fix-item-padding">
       <div class="rankIcon">
         26
       </div>
-      <div style="width:20%">
-        26号牛舍
+      <div class="rankName">
+        11号牛舍
       </div>
-      <div style="width:50%">
-        <ion-progress-bar color="secondary" value="0.2"></ion-progress-bar>
+      <div class="rankProgress">
+        <ion-progress-bar color="medium" value="0.2"></ion-progress-bar>
       </div>
       <div class="rankValue">
         20
@@ -109,33 +112,18 @@
     </ion-item>
   </div>
 
-  <h1 style="
-  font-size: 16px;
-  padding-left: 5px;
-  border-left: 5px solid #28c9bd;
-  line-height: 25px;
-  margin-bottom: 5px;">风机参数比较</h1>
+  <h1 class="main-title clearColor">风机参数比较</h1>
   <div style="width:100%; padding-left:10px; padding-right:10px; height: 300px">
     <div #fanChartsContent id="fanChartsContent" class="echart-pie"></div>
   </div>
 
-  <h1 style="
-  font-size: 16px;
-  padding-left: 5px;
-  border-left: 5px solid #28c9bd;
-  line-height: 25px;
-  margin-bottom: 5px;">喷淋参数比较</h1>
+  <h1 class="main-title clearColor">喷淋参数比较</h1>
   <div style="width:100%; padding-left:10px; padding-right:10px; height: 300px">
     <div #showerChartsContent id="showerChartsContent" class="echart-pie"></div>
   </div>
 
 
-  <h1 style="
-  font-size: 16px;
-  padding-left: 5px;
-  border-left: 5px solid #28c9bd;
-  line-height: 25px;
-  margin-bottom: 5px;">温湿度曲线图</h1>
+  <h1 class="main-title clearColor">温湿度曲线图</h1>
   <div style="width:100%; padding-left:10px; padding-right:10px; height: 300px">
     <div style="width:95%; background-color: #fff; border-radius: 10px 10px 0px 0px">
       <div style="width:85%; margin:auto; padding-top: 10px">

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

@@ -78,6 +78,7 @@
 }
 
 .rankItem {
+  width: 95%;
   font-size: 16px;
   --padding-start: 0px;
   --padding-end: 0px;
@@ -89,8 +90,31 @@
   text-align:center
 }
 
+.clearColor {
+  background-color: unset;
+}
+
+.itemColor {
+  --background: auto;
+}
+
+.dateTime {
+  border: 1px solid lightgray;
+  border-radius: 3px;
+  text-align: center;
+  padding: 5px 10px 0px 10px;
+}
+
+.rankName {
+  width: 25%
+}
+
+.rankProgress {
+  width: 50%
+}
+
 .rankValue {
-  width:20%;
+  width: 15%;
   padding-left:5px;
   font-size: 14px
 }

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

@@ -22,7 +22,7 @@
           <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">
-           <ion-label class="inHouseLabel">在离舍开关控制</ion-label>
+           <ion-label class="inHouseLabel normalColor">在离舍开关控制</ion-label>
            <ion-toggle mode="ios" color="secondary" [(ngModel)]="inHouseState" [checked]="inHouseState" (click)="inHouseControl(inHouseState)"></ion-toggle>
            <!--<v-switch (click)="inHouseControl(item.inHouse)" [value]="item.inHouse.inHouse" [loading]="loading"></v-switch>-->
     </div>
@@ -30,17 +30,17 @@
 <ion-content color="light">
   <ion-router-outlet></ion-router-outlet>
     <ion-tabs>
-        <ion-tab-bar slot="top">
-            <ion-tab-button tab="fan" class="tabSelected" >
+        <ion-tab-bar slot="top" mode="ios">
+            <ion-tab-button tab="fan" class="tabSelected ion-segment-button">
                 <ion-label>风机</ion-label>
             </ion-tab-button>
-            <ion-tab-button tab="shower" class="tabSelected" [routerLink]="showerLink">  <!--[rootParams]="fieldRegionNo"-->
+            <ion-tab-button tab="shower" class="tabSelected ion-segment-button" [routerLink]="showerLink">  <!--[rootParams]="fieldRegionNo"-->
                 <ion-label>喷淋</ion-label>
             </ion-tab-button>
-            <ion-tab-button tab="light" class="tabSelected" [routerLink]="lightLink">
+            <ion-tab-button tab="light" class="tabSelected ion-segment-button" [routerLink]="lightLink">
                 <ion-label>照明</ion-label>
             </ion-tab-button>
-            <ion-tab-button tab="waterchannel" class="tabSelected" [routerLink]="waterchannelLink">
+            <ion-tab-button tab="waterchannel" class="tabSelected ion-segment-button" [routerLink]="waterchannelLink">
                 <ion-label>水槽</ion-label>
             </ion-tab-button>
         </ion-tab-bar>

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

@@ -4,6 +4,7 @@ import {NavController} from '@ionic/angular';
 import {ActivatedRoute} from '@angular/router';
 import {Load} from '../../service/load';
 import {Transfer} from '../../service/transfer';
+import {Loading} from '../../service/loading';
 
 @Component({
     selector: 'v-env-detail',
@@ -16,7 +17,8 @@ export class EnvDetailPage implements OnInit {
                 private api: Api,
                 private ac: ActivatedRoute,
                 private load: Load,
-                private tf: Transfer) {
+                private tf: Transfer,
+                public loading: Loading) {
         this.ac.queryParams.subscribe((data) => {
             if (data.no) {
                 this.fieldRegionNo = data.no;
@@ -53,7 +55,6 @@ export class EnvDetailPage implements OnInit {
     inHouseState = false;
 
     fieldRegionNo = '';
-    loading = false;
 
     // 发送指令延时判断
     comm = {
@@ -106,16 +107,13 @@ export class EnvDetailPage implements OnInit {
     }
 
     initLayout(environmentConfigJson) {
-        // this.showerLink = '/env-detail/shower/' + this.fieldRegionNo;
-        // this.lightLink = '/env-detail/light/' + this.fieldRegionNo;
-        // this.waterchannelLink = '/env-detail/waterchannel/' + this.fieldRegionNo;
         this.fanLink = '/env-detail/fan/';
         this.showerLink = '/env-detail/shower/' + this.fieldRegionNo;
         this.lightLink = '/env-detail/light/' + this.fieldRegionNo;
         this.waterchannelLink = '/env-detail/waterchannel/' + this.fieldRegionNo;
 
         if (this.item) {
-            this.item.heatStressColor = this.item.heatStressLevel === 0 ? '#13AE67' :
+            this.item.heatStressColor = this.item.heatStressLevel === 0 ? '#61C7CC' :
                 this.item.heatStressLevel === 1 ? '#61C7CC' :
                     this.item.heatStressLevel === 2 ? '#F8B72D' :
                         this.item.heatStressLevel === 3 ? '#F2401C' : '#F2401C';
@@ -129,10 +127,12 @@ export class EnvDetailPage implements OnInit {
     getColor(value, maxValue, minValue?) {
         if (value !== undefined && value !== null && value !== '' && maxValue !== undefined && maxValue !== null && maxValue !== '') {
             if (value > maxValue) {
+                console.log('超过上限');
                 return '#F2401C';
             } else {
                 if (minValue !== undefined && minValue !== null) {
                     if (value < minValue) {
+                        console.log('低于下限');
                         return '#F2401C';
                     } else {
                         return '#61C7CC';
@@ -140,7 +140,6 @@ export class EnvDetailPage implements OnInit {
                 }
             }
         }
-
         return '#61C7CC';
     }
 
@@ -190,10 +189,11 @@ export class EnvDetailPage implements OnInit {
             const opt = {fieldDeviceNo: '', fieldDeviceType: '', op: 0, ts: 0};
             opt.fieldDeviceNo = this.item.inHouse.fieldDeviceNo;
             opt.fieldDeviceType = this.item.inHouse.fieldDeviceType;
-            opt.op = inHouseState ? 1 : 0;
+            opt.op = inHouseState ? 0 : 1;
             opt.ts = new Date().valueOf();
 
-            this.comm.remain = 20;
+            // this.comm.remain = 20;
+            this.loading.presentLoading(80);
             this.api.control.controlCowedSwitch([opt, (data) => {
                 // if (data && data.code === 1) {
                 //     this.getData(1);
@@ -205,6 +205,7 @@ export class EnvDetailPage implements OnInit {
                 this.getData(0);
                 this.api.presentMsgToast(data.message);
                 this.comm.remain = 0;
+                this.loading.closeLoading();
             }]);
         }
     }

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

@@ -52,9 +52,9 @@
           <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;<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;<span class="{{item.NH3Color}}Color">{{item.temp | number:'0.1-1'}}℃</span></div>
+          <div *ngIf="item.temp !== '--'" class="detailInfo" style="width: 40%">温度: &nbsp;<span class="{{item.tempColor}}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;<span class="{{item.NH3Color}}Color">{{item.humi | number:'0.0-0'}}% rH</span></div>
+          <div *ngIf="item.humi !== '--'" class="detailInfo" style="width: 40%">湿度: &nbsp;<span class="{{item.humiColor}}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.ts

@@ -152,12 +152,15 @@ export class EnvHomePage implements OnInit {
     getColor(value, maxValue, minValue?) {
         if (value !== undefined && value !== null && value !== '' && maxValue !== undefined && maxValue !== null && maxValue !== '') {
             if (value > maxValue) {
+                console.log('超过上限');
                 return 'alarm';
             } else {
                 if (minValue !== undefined && minValue !== null) {
                     if (value < minValue) {
+                        console.log('低于下限');
                         return 'alarm';
                     } else {
+                        console.log();
                         return 'normal';
                     }
                 }

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

@@ -49,7 +49,7 @@
           <span class="font-content"> 开启时间:&nbsp;<span class="main-color">{{on}}</span></span>
         </div>
         <div style="width:35%; display: inline-block; float:left; margin-top:35px">
-          <span class="font-content"> 开启时间:&nbsp;<span class="main-color">{{off}}</span></span>
+          <span class="font-content"> 关闭时间:&nbsp;<span class="main-color">{{off}}</span></span>
         </div>
       </div>
       <!--<i class="vo v-yue{{curDate}}"></i>-->

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

@@ -41,13 +41,22 @@
 
     <h1 class="main-title-detail">供液泵状态</h1>
     <ion-item lines="none" class="item-content" class="item-height">
-      <div>
+      <ion-grid>
+        <ion-row>
+          <ion-col>
+            <div style="display: inline-block; float:left;">
               <!-- 1-异常，0-正常 -->
               <img *ngIf="bump.alarm === 0" src="../../assets/img/model-on.png" class="modelState" style="margin-right: 0px;">
               <img *ngIf="bump.alarm === 1" src="../../assets/img/model-alarm.png" class="modelState" style="margin-right: 0px;">
-      </div>&nbsp;
+            </div>
+            <div style="display: inline-block; float:left; padding-top: 2px;">
               <span class="font-content">{{bump.alarm === 1 ? '异常' : '运行'}}</span>
               <span class="font-content" style="margin-left: 30px">压力:&nbsp;<span class="main-color">{{bump.press}} Mpa</span></span>
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+
     </ion-item>
     <h1 class="main-title-detail">时间参数</h1>
     <ion-item lines="none" insert="false">

src/app/service/api.ts

@@ -163,15 +163,15 @@ export class Api {
             cssClass: 'msgToast',
             color: 'medium',
             position: wz ? wz : 'top',
-            buttons: [
-                {
-                    role: 'cancel',
-                    icon: 'close',
-                    handler: () => {
-                        console.log('Favorite clicked');
-                    }
-                }
-            ]
+            // buttons: [
+            //     {
+            //         role: 'cancel',
+            //         icon: 'close',
+            //         handler: () => {
+            //             console.log('Favorite clicked');
+            //         }
+            //     }
+            // ]
         });
         toast.present();
     }

src/app/service/loading.ts

@@ -10,6 +10,7 @@ export class Loading {
     countdown = 0;
     interval: any;
     async presentLoading(time) {
+        clearInterval(this.interval);
         this.countdown = time;
         this.loading = await this.loadingController.create({
             mode: 'ios',

src/global.scss

@@ -163,26 +163,35 @@ img {
 
 .font-content {
   font-size: 13px;
-  color: #a5a5a5;
+  color: #8e8e8e;
 }
 
 .font-note {
   font-size: 13px;
-  color: #a5a5a5;
+  color: #8e8e8e;
+}
+
+.font-smaller {
+  font-size: 12px;
+  color: #8e8e8e;
 }
 
 .font-mini {
   font-size: 10px;
-  color: #a5a5a5 !important;
+  color: #8e8e8e !important;
 }
 
 .font-ts {
   font-size: 13px;
-  color: #a5a5a5;
+  color: #8e8e8e;
 }
 
 .content-text-color {
-  color: #a5a5a5;
+  color: #8e8e8e;
+}
+
+.note-text-color {
+  color: #c3bebe;
 }
 
 .main-color {
@@ -199,7 +208,7 @@ img {
 }
 
 .normalColor {
-  color: #a5a5a5;
+  color: #8e8e8e;
 }
 
 .main-title {
@@ -294,3 +303,21 @@ img {
 .item-height {
   height: 38px;
 }
+
+
+.fix-item-padding {
+  --inner-padding-start: 5px;
+  --inner-padding-end: 0px;
+  --padding-start: 0px;
+  --padding-end: 0px;
+}
+
+.badge {
+  font-size: 10px;
+  --padding-start: 4px;
+  --padding-end: 4px;
+}
+
+.ion-segment-button {
+  font-size: 16px;
+}