修改layout

src/app/envCtrl/env-add-model/env-add-model.page.html

 <ion-header>
     <ion-toolbar color="secondary">
         <ion-buttons slot="start">
-          <ion-back-button text=""></ion-back-button>
+          <ion-back-button mode="ios" text=""></ion-back-button>
         </ion-buttons>
         <ion-title mode="ios" class="title">喷淋模式填写</ion-title>
     </ion-toolbar>

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

@@ -2,7 +2,7 @@
 <ion-header translucent="false">
   <ion-toolbar color="secondary">
     <ion-buttons slot="start">
-      <ion-back-button text="" ></ion-back-button>
+      <ion-back-button mode="ios" text="" ></ion-back-button>
     </ion-buttons>
     <ion-title class="appTitle">{{fieldRegionName}}告警详情</ion-title>
   </ion-toolbar>

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

 <ion-header>
   <ion-toolbar color="secondary">
     <ion-buttons slot="start">
-      <ion-back-button text="" id="back"></ion-back-button>
+      <ion-back-button mode="ios" text="" id="back"></ion-back-button>
     </ion-buttons>
     <ion-title mode="ios" class="title">单产奶量输入</ion-title>
   </ion-toolbar>

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

@@ -15,7 +15,7 @@
     <div *ngIf="curCowshed.fieldRegionName">
       <ion-item lines="full" class="subTitle">
         <ion-label>智慧模式选择</ion-label>
-        <ion-toggle slot="end" color="secondary" style="width:50px" [disabled]="true" [(checked)]="curCowshed.isWisdomModelChecked" (click)="toggle(curCowshed.isWisdomModelChecked)"></ion-toggle>
+        <ion-toggle mode="ios" slot="end" color="secondary" style="width:50px" [disabled]="true" [(checked)]="curCowshed.isWisdomModelChecked" (click)="toggle(curCowshed.isWisdomModelChecked)"></ion-toggle>
       </ion-item>
       <div style="margin-left: 10px; margin-right: 10px;">
         <ion-label text-wrap color="danger" style="margin-left: 20px">选择智慧模式时，风机/喷淋/照明的控制将强制进入有环境条件影响的自控模式</ion-label>

src/app/envCtrl/env-change-model/env-change-model.page.html

 <ion-header>
     <ion-toolbar color="secondary">
         <ion-buttons slot="start">
-            <ion-back-button text="" id="back"></ion-back-button>
+            <ion-back-button mode="ios" text="" id="back"></ion-back-button>
         </ion-buttons>
         <ion-title mode="ios" class="title">照明模式填写</ion-title>
     </ion-toolbar>

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

 <ion-header>
     <ion-toolbar color="secondary">
         <ion-buttons slot="start">
-          <ion-back-button text="" ></ion-back-button>
+          <ion-back-button mode="ios" text="" ></ion-back-button>
         </ion-buttons>
         <ion-title mode="ios" class="title">{{item.fieldRegionName}}详情</ion-title>
         <ion-buttons slot="end">
@@ -23,11 +23,11 @@
     </div>
     <div class="inHouseDiv">
            <ion-label class="inHouseLabel">在离舍开关控制</ion-label>
-           <ion-toggle [(ngModel)]="inHouseState" [checked]="inHouseState" (click)="inHouseControl(inHouseState)"></ion-toggle>
+           <ion-toggle mode="ios" [(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>
-<ion-content style="background-color: #F3F4F4;">
+<ion-content color="light">
   <ion-router-outlet></ion-router-outlet>
     <ion-tabs>
         <ion-tab-bar slot="top">

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

@@ -2,28 +2,55 @@
 
 </ion-header>
 
-<ion-content  color='light' style="height: 100%">
-  <h1 style="
-            font-size: 16px;
-            padding-left: 5px;
-            border-left: 5px solid #28c9bd;
-            line-height: 25px;
-            margin-bottom: 5px;">模式状态</h1>
-  <ion-item lines="full">
-    <ion-label>运行模式</ion-label>
-    <ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="controlModel" disabled="true">
-      <ion-select-option *ngFor="let option of controlModelOptions" [value]="option.modelId">{{option.modelValue}}</ion-select-option>
-    </ion-select>
+<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-grid>
+        <ion-row>
+          <ion-col>
+            <div style="width:30%; float:left">
+              <img *ngIf="controlModel === 1" src="../../assets/img/model-on.png" class="modelState">
+              <img *ngIf="controlModel !== 1" src="../../assets/img/model-off.png" class="modelState">
+            </div>
+            <div style="width:70%; float:left">
+              <span class="font-content" style="display: inline-block; padding-top: 5px;">手控模式</span>
+            </div>
+          </ion-col>
+          <ion-col>
+            <div style="width:30%; float:left">
+              <img *ngIf="controlModel === 2" src="../../assets/img/model-on.png" class="modelState">
+              <img *ngIf="controlModel !== 2" src="../../assets/img/model-off.png" class="modelState">
+            </div>
+            <div style="width:70%; float:left">
+              <span class="font-content" style="display: inline-block; padding-top: 5px;">自控模式</span>
+            </div>
+          </ion-col>
+          <ion-col>
+            <div style="width:30%; float:left">
+              <img *ngIf="controlModel === 3" src="../../assets/img/model-on.png" class="modelState">
+              <img *ngIf="controlModel !== 3" src="../../assets/img/model-off.png" class="modelState">
+            </div>
+            <div style="width:70%; float:left">
+              <span class="font-content" style="display: inline-block; padding-top: 5px;">智控模式</span>
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
     </ion-item>
-  <h1 style="
-            font-size: 16px;
-            padding-left: 5px;
-            border-left: 5px solid #28c9bd;
-            line-height: 25px;
-            margin-bottom: 5px;">控制/状态</h1>
-  <ion-item *ngIf="batchSwitch" lines="full" insert="false">
-    <ion-label>一键控制</ion-label>
-    <ion-toggle slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
+
+    <h1 class="main-title-detail">控制状态</h1>
+    <ion-item *ngIf="batchSwitch" lines="none" insert="false" style="width: 98%;">
+      <div style="width:100%">
+        <div style="width:20%; display: inline-block; float:left;">
+          <img src="../../assets/img/batchSwitch.png" class="icon-batch-switch">
+        </div>
+        <div class="label-batch-switch font-content">
+          一键控制
+        </div>
+      </div>
+
+      <ion-toggle 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>
@@ -35,15 +62,15 @@
 
         <ion-card-content class="cardContent">
           <!--<ion-toggle slot="middle" [checked]="device.state"></ion-toggle>-->
-        <ion-toggle 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"
                       [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
-        <ion-toggle class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"
+          <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>
           <!--<v-switch *ngIf="device.alarm === 0" class="btn-switch" (click)="deviceCheck(device)" [value]="device.state" [disabled]="device.disabled" [loading]="device.load"></v-switch>-->
           <!--<v-switch *ngIf="device.alarm === 1" class="btn-switch" color="danger" (click)="deviceCheck(device)" [value]="device.state" [disabled]="device.disabled" [loading]="device.load"></v-switch>-->
         </ion-card-content>
       </ion-card>
     </div>
-
     <!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>-->
+  </div>
 </ion-content>

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

@@ -25,3 +25,10 @@
   padding: 5px;
   text-align: center;
 }
+
+.modelState {
+  display: inline-block;
+  margin-right: 10px;
+  width:23px !important
+}
+

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

 <ion-header>
   <ion-toolbar color="secondary">
     <ion-buttons slot="start">
-      <ion-back-button text="" ></ion-back-button>
+      <ion-back-button mode="ios" text="" ></ion-back-button>
     </ion-buttons>
     <ion-title mode="ios" class="title">{{fieldRegionName}}历史数据</ion-title>
   </ion-toolbar>

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

 <ion-header mode="ios">
   <ion-toolbar color="gray">
     <ion-buttons slot="start">
-      <ion-back-button color="secondary" defaultHref="/index" text=""></ion-back-button>
+      <ion-back-button  mode="ios" color="secondary" defaultHref="/index" text=""></ion-back-button>
     </ion-buttons>
     <ion-searchbar (ionInput)="getItems($event)" debounce="1000" style="height: 40px;"></ion-searchbar>
   </ion-toolbar>
@@ -27,23 +27,13 @@
   <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
-  <h1 style="
-            font-size: 16px;
-            padding-left: 5px;
-            border-left: 5px solid #28c9bd;
-            line-height: 25px;
-            margin-bottom: 5px;">故障统计</h1>
+  <h1 class="main-title">故障统计</h1>
   <div style="margin-left:1%">
   <v-kanban class="home-bar" name="热应激" [inData]="thiGood" iconClass="vo v-youxuan" iconColor="#3e9058" iconSize="25px" fontSize="25px"></v-kanban>
   <v-kanban class="home-bar" name="热应激" [inData]="thiBad" iconClass="vo v-yujing" iconColor="#FAB139" iconSize="25px" fontSize="25px"></v-kanban>
   <v-kanban class="home-bar" name="故障总数" [inData]="alarmTotal" iconClass="vo v-guzhang2" iconColor="#B23706" iconSize="25px" fontSize="25px"></v-kanban>
   </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">牛舍列表</h1>
   <ion-list *ngIf="items.length > 0" mode="md" class="listview" insert = "false" line="none" style="width:96%;margin-left: 2%">
     <ion-item *ngFor="let item of items" (click)="toControl(item)" class="ion-item" style="width: 100%; --padding-start: 0px">
       <div class="item">

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

@@ -34,7 +34,7 @@
             margin-bottom: 5px;">控制/状态</h1>
   <ion-item *ngIf="devices" lines="full" insert="false">
     <ion-label>一键控制</ion-label>
-    <ion-toggle slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
+    <ion-toggle mode="ios" 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>
@@ -45,9 +45,9 @@
       </ion-card-header>
 
       <ion-card-content class="cardContent">
-        <ion-toggle 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"
                     [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
-        <ion-toggle class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"
+        <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>
         <!--<v-switch class="btn-switch" (click)="deviceCheck(device)" [value]="device.state" [disabled]="device.disabled" [loading]="device.load"></v-switch>-->
       </ion-card-content>

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

@@ -2,37 +2,50 @@
 
 </ion-header>
 
-<ion-content  color='light' style="height: 100%">
-  <h1 style="
-            font-size: 16px;
-            padding-left: 5px;
-            border-left: 5px solid #28c9bd;
-            line-height: 25px;
-            margin-bottom: 5px;">模式状态</h1>
-  <ion-item lines="full">
-    <ion-label>运行模式</ion-label>
-    <ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="controlModel" disabled="true">
-      <ion-select-option *ngFor="let option of controlModelOptions" [value]="option.modelId">{{option.modelValue}}</ion-select-option>
-    </ion-select>
+<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-grid>
+        <ion-row>
+          <ion-col>
+            <div style="width:30%; float:left">
+              <img *ngIf="controlModel === 1" src="../../assets/img/model-on.png" class="modelState">
+              <img *ngIf="controlModel !== 1" src="../../assets/img/model-off.png" class="modelState">
+            </div>
+            <div style="width:70%; float:left">
+              <span class="font-content" style="display: inline-block; padding-top: 5px;">手控模式</span>
+            </div>
+          </ion-col>
+          <ion-col>
+            <div style="width:30%; float:left">
+              <img *ngIf="controlModel === 2" src="../../assets/img/model-on.png" class="modelState">
+              <img *ngIf="controlModel !== 2" src="../../assets/img/model-off.png" class="modelState">
+            </div>
+            <div style="width:70%; float:left">
+              <span class="font-content" style="display: inline-block; padding-top: 5px;">自控模式</span>
+            </div>
+          </ion-col>
+          <ion-col>
+            <div style="width:30%; float:left">
+              <img *ngIf="controlModel === 3" src="../../assets/img/model-on.png" class="modelState">
+              <img *ngIf="controlModel !== 3" src="../../assets/img/model-off.png" class="modelState">
+            </div>
+            <div style="width:70%; float:left">
+              <span class="font-content" style="display: inline-block; padding-top: 5px;">智控模式</span>
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
     </ion-item>
 
-  <h1 style="
-            font-size: 16px;
-            padding-left: 5px;
-            border-left: 5px solid #28c9bd;
-            line-height: 25px;
-            margin-bottom: 5px;">供液泵状态</h1>
-    <ion-item lines="full">
+    <h1 class="main-title-detail">供液泵状态</h1>
+    <ion-item lines="none" style="width: 98%;">
       <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>
     </ion-item>
-  <h1 style="
-            font-size: 16px;
-            padding-left: 5px;
-            border-left: 5px solid #28c9bd;
-            line-height: 25px;
-            margin-bottom: 5px;">时间参数</h1>
+    <h1 class="main-title-detail">时间参数</h1>
     <ion-item lines="full" insert="false">
       <span class="content">{{fieldDeviceNameA}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.A}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
     </ion-item>
@@ -43,12 +56,7 @@
       <span class="content">间隔时间 &nbsp;&nbsp;&nbsp;&nbsp; {{controlConfig.interval}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
     </ion-item>
 
-  <h1 style="
-            font-size: 16px;
-            padding-left: 5px;
-            border-left: 5px solid #28c9bd;
-            line-height: 25px;
-            margin-bottom: 5px;">控制/状态</h1>
+    <h1 class="main-title-detail">控制状态</h1>
     <div>
       <ion-card *ngFor="let device of param" class="card" color="white">
         <ion-card-header class="cardHeader">
@@ -65,14 +73,14 @@
         <ion-card-content class="cardContent">
           <span  class="content">压力  {{device.press}} MPa</span><br>
           <!--  <ion-toggle [checked]="a.state"></ion-toggle>-->
-        <ion-toggle 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"
                       [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
-        <ion-toggle class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"
+          <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>
           <!--<v-switch class="btn-switch" (click)="deviceCheck(a)" [value]="a.state" [loading]="a.load"></v-switch>-->
         </ion-card-content>
       </ion-card>
     </div>
-
+  </div>
   <!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>-->
 </ion-content>

src/global.scss

@@ -180,3 +180,48 @@ img {
 .spinnerColor {
   --spinner-color: #61C7CC;
 }
+
+
+.main-title {
+  font-size: 16px;
+  padding-left: 5px;
+  border-left: 5px solid #61C7CC;
+  line-height: 25px;
+  margin-bottom: 5px;
+  margin-left: 5px;
+  margin-top: 5px;
+}
+
+.main-title-detail {
+  background-color: #ffffff;
+  font-size: 16px;
+  padding-left: 5px;
+  border-left: 5px solid #61C7CC;
+  line-height: 25px;
+  margin-bottom: 5px;
+  margin-left: 5px;
+  margin-top: 5px;
+}
+
+.env-detail-content {
+  padding: 5px;
+  margin: 5px;
+  background-color: #ffffff;
+  border-radius: 5px;
+}
+
+.icon-batch-switch {
+  width: 30px !important;
+  padding: 5px;
+  margin: 5px;
+  background-color: #ffffff;
+  border-radius: 5px;
+}
+
+.label-batch-switch {
+  float: left;
+  width: 60%;
+  display: inline-block;
+  align-content: center;
+  padding-top: 18px;
+}