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

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

@@ -23,7 +23,7 @@
     </div>
     <div class="inHouseDiv font-content-title">
            <ion-label class="inHouseLabel">在离舍开关控制</ion-label>
-           <ion-toggle mode="ios" [(ngModel)]="inHouseState" [checked]="inHouseState" (click)="inHouseControl(inHouseState)"></ion-toggle>
+           <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>
 </ion-header>

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

@@ -50,7 +50,7 @@
         </div>
       </div>
 
-      <ion-toggle mode="ios" style="display:inline-block" slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
+      <ion-toggle color="secondary" mode="ios" style="display:inline-block" slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
                   [(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle>
       <!--<v-switch (click)="allCheck(batchSwitch)" [value]="batchSwitch.op" [disabled]="batchSwitch.disabled" [loading]="batchSwitch.load"></v-switch>-->
     </ion-item>
@@ -62,7 +62,7 @@
 
         <ion-card-content mode="ios" class="cardContent">
           <!--<ion-toggle slot="middle" [checked]="device.state"></ion-toggle>-->
-          <ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled"
+          <ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled" color="secondary"
                       [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
           <ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"
                       [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>

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

@@ -40,9 +40,20 @@
     </ion-item>
 
     <h1 class="main-title-detail">时间模式</h1>
-    <ion-item lines="full">
-      <i class="vo v-yue{{curDate}}"></i>
-      <span style="margin-left: 100px; font-size:15px"> 开启时间     <span class="main-color">{{on}}</span><br><br>关闭时间     <span class="main-color">{{off}}</span></span>
+    <ion-item lines="none">
+      <div style="width:100%">
+        <div class="div-calender bk-calender">
+          <div class="font-sub-title div-calender-value">{{name}}</div>
+        </div>
+        <div style="width:35%; display: inline-block; float:left; margin-top:35px">
+          <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>
+        </div>
+      </div>
+      <!--<i class="vo v-yue{{curDate}}"></i>-->
+
     </ion-item>
     <h1 class="main-title-detail">控制状态</h1>
     <ion-item *ngIf="devices" lines="none" insert="false">
@@ -54,7 +65,7 @@
           一键控制
         </div>
       </div>
-      <ion-toggle mode="ios" style="display:inline-block" slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
+      <ion-toggle color="secondary" mode="ios" style="display:inline-block" slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
                   [(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle>
       <!--<v-switch (click)="allCheck(batchSwitch)" [value]="batchSwitch.op" [disabled]="batchSwitch.disabled" [loading]="batchSwitch.load"></v-switch>-->
     </ion-item>
@@ -65,7 +76,7 @@
         </ion-card-header>
 
         <ion-card-content class="cardContent">
-          <ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled"
+          <ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled" color="secondary"
                       [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
           <ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"
                       [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>

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

@@ -28,4 +28,23 @@ i.vo {
   margin-top: 5px;
 }
 
+.div-calender {
+  height: 70px;
+  width: 30%;
+  display: inline-block;
+  float: left;
+}
+
+.bk-calender {
+  background-image: url("../../../assets/img/calender-bk.png");
+  background-size: 100% 100%;
+  background-position: center;
+}
 
+.div-calender-value {
+  background-color: rgba(0,0,0,0);
+  margin-top: 35px;
+  text-align: center;
+  font-weight: bold;
+  color: #565050;
+}

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

@@ -28,6 +28,8 @@ export class EnvLightPage implements OnInit {
     on = '';
     // 关闭时间
     off = '';
+    // 模式名
+    name = '';
     // 当前月份
     curDate = 0;
 
@@ -102,6 +104,7 @@ export class EnvLightPage implements OnInit {
                 this.stopDate = data.controlConfig.stopDate;
                 this.on = data.controlConfig.on;
                 this.off = data.controlConfig.off;
+                this.name = data.controlConfig.name;
                 this.devices = data.param;
                 this.devices.forEach(device => {
                     device.op = device.state === 1 ? true : false;

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

@@ -41,9 +41,13 @@
 
     <h1 class="main-title-detail">供液泵状态</h1>
     <ion-item lines="none" class="item-content">
-      <div [ngClass]="{'sucCir': bump.alarm === 0, 'errCir': bump.alarm === 0}"></div>&nbsp;
-      <span class="content">{{bump.alarm === 1 ? '异常' : '运行'}}</span>
-      <span class="content" style="margin-left: 30px">压力:  {{bump.press}} Mpa</span>
+      <div>
+        <!-- 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;
+      <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>
     </ion-item>
     <h1 class="main-title-detail">时间参数</h1>
     <ion-item lines="none" insert="false">
@@ -51,44 +55,24 @@
         <ion-row>
           <ion-col>
             <div style="width:100%">
-              <span class="content">{{fieldDeviceNameA}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.a}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
+              <span class="font-content">{{fieldDeviceNameA}}喷淋时间:&nbsp;<span class="main-color">{{controlConfig.a}}  秒</span></span>
             </div>
           </ion-col>
-        </ion-row>
-        <ion-row>
           <ion-col>
             <div style="width:100%">
-              <span class="content">{{fieldDeviceNameB}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.b}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
+              <span class="font-content">{{fieldDeviceNameB}}喷淋时间:&nbsp;<span class="main-color">{{controlConfig.b}}  秒</span></span>
             </div>
           </ion-col>
         </ion-row>
         <ion-row>
           <ion-col>
             <div style="width:100%">
-              <span class="content">间隔时间 &nbsp;&nbsp;&nbsp;&nbsp; {{controlConfig.interval}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
+              <span class="font-content">间隔时间:&nbsp;<span class="main-color">{{controlConfig.interval}}  秒</span></span>
             </div>
           </ion-col>
         </ion-row>
       </ion-grid>
-
-
-      <!--<div style="width:100%">-->
-        <!--<span class="content">{{fieldDeviceNameA}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.a}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>-->
-      <!--</div>-->
-      <!--<div style="width:100%">-->
-        <!--<span class="content">{{fieldDeviceNameB}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.b}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>-->
-      <!--</div>-->
-      <!--<div style="width:100%">-->
-        <!--<span class="content">间隔时间 &nbsp;&nbsp;&nbsp;&nbsp; {{controlConfig.interval}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>-->
-      <!--</div>-->
-
     </ion-item>
-    <!--<ion-item lines="none" insert="false" class="item-content">-->
-      <!--<span class="content">{{fieldDeviceNameB}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.b}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>-->
-    <!--</ion-item>-->
-    <!--<ion-item lines="none" insert="false" class="item-content">-->
-      <!--<span class="content">间隔时间 &nbsp;&nbsp;&nbsp;&nbsp; {{controlConfig.interval}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>-->
-    <!--</ion-item>-->
 
     <h1 class="main-title-detail">控制状态</h1>
     <div class="card-div">
@@ -110,9 +94,9 @@
         </ion-card-header>
 
         <ion-card-content class="cardContent">
-          <span  class="content">压力  {{device.press}} MPa</span><br>
+          <span  class="font-content">压力:&nbsp;<span class="main-color">{{device.press}} MPa</span></span><br>
           <!--  <ion-toggle [checked]="a.state"></ion-toggle>-->
-          <ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled"
+          <ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled" color="secondary"
                       [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
           <ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"
                       [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>

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

@@ -60,5 +60,5 @@
 }
 
 .item-content {
-  padding-left: 12px;
+  padding-left: 8px;
 }

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

@@ -9,7 +9,7 @@
         <ion-card-header class="cardTitle">
           <ion-card-title class="cardHeader">
             <div style="width: 100%">
-              <div style="width:10%; float:left; display: inline-block"><img src="../../assets/img/model-on.png" class="modelState-large"></div>
+              <div style="width:10%; float:left; display: inline-block"><img src="../../assets/img/model-on.png" class="modelState"></div>
               <div style="width:88%; float:left; display: inline-block;padding-top: 2px;" class="font-sub-title">{{device .fieldDeviceName}}</div>
             </div>
           </ion-card-title>

src/theme/variables.scss

@@ -13,12 +13,12 @@
 
   /** secondary **/
   // --ion-color-secondary: #0cd1e8;
-  --ion-color-secondary: #28c9bd;
+  --ion-color-secondary: #61C7CC;
   --ion-color-secondary-rgb: 12, 209, 232;
   --ion-color-secondary-contrast: #ffffff;
   --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #0bb8cc;
-  --ion-color-secondary-tint: #24d6ea;
+  --ion-color-secondary-shade: #61C7CC;
+  --ion-color-secondary-tint: #61C7CC;
 
   /** tertiary **/
   --ion-color-tertiary: #7044ff;