首页小补了一下，补充了报警详情页

src/app/app-routing.module.ts

@@ -50,7 +50,7 @@ const routes: Routes = [
     },
     {path: 'env-alarmDetail', component: EnvAlarmDetailPage},
     {path: 'tabs', loadChildren: './envCtrl/tabs/tabs.module#TabsPageModule'},
-    {path: 'd', component: EnvHomePage},
+    // {path: 'd', component: EnvHomePage},
   { path: 'env-alarm-detail', loadChildren: './envCtrl/env-alarm-detail/env-alarm-detail.module#EnvAlarmDetailPageModule' },
 
 ];

src/app/app.module.ts

@@ -82,7 +82,7 @@ import {EnvAlarmDetailPage} from './envCtrl/env-alarm-detail/env-alarm-detail.pa
         // EnvAlarmPage,
         EnvAlarmDetailPage,
         //EnvCfgPage,
-        EnvHomePage,
+        // EnvHomePage,
     ],
     entryComponents: [],
     imports: [

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

 <div class="kanban">
   <div class="title" style="">
-      {{name}}
+    <p style="margin-top:7px">{{name}}</p>
   </div>
-  <div class="sub" style="text-align: left;margin-top: 5px;">
-    <div class="sub-left" style="">
-      <ion-icon name="ios-heart" style="padding: auto"></ion-icon>
-    </div>
-    <div class="sub-right" style="">
-      <span style="padding-bottom: 20px">32</span>
-    </div>
+  <div class="sub" style="text-align: center;margin-top: 15px;">
+    <!--<ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
+    <ion-row>
+      <ion-col>
+        <i ngClass={{iconClass}} [ngStyle]="{'color': iconColor, 'font-size': iconSize}" ></i>
+      </ion-col>
+      <ion-col size="1" style="width:1px">
+        <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>
+      </ion-col>
+    </ion-row>
   </div>
 </div>

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

 .kanban{
   // border: #1e2023 1px solid;
   width:100%;
-  height: auto;
+  //height: auto;
+  height: 100px;
   align-items:center;
   justify-content:
   center;text-align: center;
@@ -11,7 +12,6 @@
 }
 
 .title{
-  margin-top: 5px;
   margin-bottom: 5px;
   padding-top: 5px;
   align-items:center;

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

@@ -10,8 +10,22 @@ export class KanbanComponent implements OnInit {
   @Input()
   name = '';
 
+  @Input()
+  iconClass = '';
+
+  @Input()
+  iconColor = "";
+
+  @Input()
+  fontColor = "";
+
+  @Input()
+  iconSize = "";
+
   constructor() { }
 
-  ngOnInit() {}
+  ngOnInit() {
+      this.fontColor = this.iconColor;
+  }
 
 }

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

@@ -4,7 +4,7 @@
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
     </ion-buttons>
-    <ion-title style="text-align: center">{{fieldRegionName}}告警详情页</ion-title>
+    <ion-title class="title">{{fieldRegionName}}告警详情页</ion-title>
   </ion-toolbar>
 
 </ion-header>

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

@@ -16,3 +16,8 @@
   //margin-bottom: 90px;
 }
 
+.title{
+  text-align: center;
+  padding-left: 0px
+}
+

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

 <ion-header>
   <ion-toolbar>
-    <ion-title>牛舍环境质量分析</ion-title>
+    <ion-title class="title">牛舍环境质量分析</ion-title>
   </ion-toolbar>
 </ion-header>
 

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

@@ -38,4 +38,9 @@
 .demo-chart{
   width: 100%;
   height: 230px;
-}
+}
\ No newline at end of file
+
+.title{
+  text-align: center;
+  padding-left: 0px
+}

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

-<ion-header mode="ios" color="light" translucent="false" style="background-color: white">
+<ion-header mode="ios" color="light" translucent="false" style="background-color: #F0F0F0">
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
     </ion-buttons>
     <ion-title mode="ios" class="title">{{fieldRegionName}}详情页</ion-title>
   </ion-toolbar>
-  <div style="margin-top: 10px;margin-bottom: 10px;background-color: white">
+  <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>
   </div>
-  <div style="background-color: white">
-    <v-kanban class="home-bar" name="温度"></v-kanban>
-    <v-kanban class="home-bar" name="湿度"></v-kanban>
-    <v-kanban class="home-bar" name="热应激"></v-kanban>
-    <v-kanban class="home-bar" name="在舍状态"></v-kanban>
+  <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>
 </ion-header>
 

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

 <ion-header style="background-color: #F3F4F4;">
-  <div class="topIcon" (click)="toIndex()">
-    <i class="vo v-back"></i>
-  </div>
+  <!--<div class="topIcon" (click)="toIndex()">-->
+    <!--<i class="vo v-back"></i>-->
+  <!--</div>-->
+  <!--<div class="topSearch">-->
+    <!--<SearchBar [placeholder]="'点击此处进行搜索'" [(ngModel)]="searchText"-->
+               <!--(onCancel)="searchText ='';toggleFocus(false);"-->
+               <!--[setFocus]="false" (onFocus)="toggleFocus(true)" (onBlur)="toggleFocus(false)"-->
+               <!--(onClear)="searchText ='';toggleFocus(false);"></SearchBar>-->
+  <!--</div>-->
+  <ion-toolbar>
+    <ion-button [routerLink]="['/index']" slot="start" size ="small" color="light">Home</ion-button>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
   <ion-slides style="width: 100%;height: 125px;" mode="ios"
               [options]="lunbo" #slide (ionSlideTouchEnd)="slideDidChange()">
     <ion-slide class="slideCon" *ngFor="let one of imgs">
@@ -19,9 +29,11 @@
             border-left: 5px solid #28c9bd;
             line-height: 25px;
             margin-bottom: 5px;">故障统计</h1>
-  <v-kanban class="home-bar" name="热应激"></v-kanban>
-  <v-kanban class="home-bar" name="热应激"></v-kanban>
-  <v-kanban class="home-bar" name="故障总数"></v-kanban>
+  <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>
+  </div>
   <h1 style="
             font-size: 16px;
             padding-left: 5px;
@@ -35,8 +47,8 @@
           <i class="vo v-tixing"></i> {{item.name}}
         </div>
         <div class="content">
-          <span class="block2" *ngIf="item.temp">温度: &nbsp;&nbsp;{{item.temp}} ℃      </span>
-          <span class="block1" *ngIf="item.humi">湿度: &nbsp;&nbsp;{{item.humi}} %       </span>
+          <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.thi">热应激等级: &nbsp;&nbsp;{{item.thi}}</span>
         </div>
         <div class="bottom">

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

@@ -197,4 +197,8 @@ export class EnvHomePage implements OnInit {
         this.slide.startAutoplay();
     }
 
+    toggleFocus(a){
+
+    }
+
 }

src/app/envCtrl/tabs/tabs.page.html

@@ -13,17 +13,17 @@
 
     <ion-tab-button tab="tab-anal">
       <ion-label>分析</ion-label>
-      <ion-icon name="settings"></ion-icon>
+      <ion-icon name="stats"></ion-icon>
     </ion-tab-button>
 
     <ion-tab-button tab="tab-alarm">
       <ion-label>告警</ion-label>
-      <ion-icon name="settings"></ion-icon>
+      <ion-icon name="hammer"></ion-icon>
     </ion-tab-button>
 
     <ion-tab-button tab="tab-cfg">
       <ion-label>配置</ion-label>
-      <ion-icon name="settings"></ion-icon>
+      <ion-icon name="construct"></ion-icon>
     </ion-tab-button>
 
   </ion-tab-bar>

src/app/index/index.page.ts

@@ -19,7 +19,7 @@ export class IndexPage implements OnInit {
     //   this.nav.navigateRoot('/' + e);
     // }, 300);
 
-    this.nav.navigateRoot('/' + e);
+    this.nav.navigateForward('/' + e);
   }
 
 }

src/assets/icon/iconfont.svg

@@ -137,6 +137,9 @@ Created by iconfont
     <glyph glyph-name="ban" unicode="&#58961;" d="M19.3536 875.776l18.688 17.5104 684.3392-730.5216-18.688-17.4848zM701.44 171.52h724.48v-25.6H701.44zM3402.24-115.2H1528.32c-56.32 0-102.4 46.08-102.4 102.4V330.24c0 56.32 46.08 102.4 102.4 102.4H3404.8c56.32 0 102.4-46.08 102.4-102.4v-343.04c-2.56-56.32-48.64-102.4-104.96-102.4z"  horiz-adv-x="3532" />
 
     
+    <glyph glyph-name="youxuan" unicode="&#58894;" d="M843.1 400.1c30.9 0 55.9 25 55.9 55.9 0 28.9-21.9 52.7-50 55.6l0.1 0.6s-153.5 2.8-277.1 0c0 0 68 140.8 46.9 214.8-21.8 76.3-82.5 91-111.9 0-33.9-104.7-45.3-142.3-98-183-18.4-14.2-37.8-19.8-52.2-26.5-42.1-19.7-36.8-62.2-36.8-62.2v-322.7s-3.1-29.8 19.9-53.3c13.3-13.5 35.5-14.3 35.5-14.3l411.5-0.6 0.1 0.8c2.6-0.4 5.3-0.6 8-0.6 30.9 0 55.9 25 55.9 55.9 0 28.4-21.2 51.9-48.6 55.4l0.1 0.9c2.1-0.3 4.3-0.4 6.5-0.4 30.9 0 55.9 25 55.9 55.9 0 27.9-20.4 51-47.1 55.2l0.2 1.2c2.3-0.3 4.6-0.5 7-0.5 30.9 0 55.9 25 55.9 55.9 0 28.1-20.7 51.3-47.6 55.3l0.2 1.4c3.4-0.4 6.5-0.7 9.7-0.7zM126.6 512.2h159v-447.9h-159z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="xuanze1" unicode="&#59381;" d="M704 345.6V802.133333H102.4v-601.6h430.933333M430.933333-29.866667H81.066667c-12.8 0-21.333333 8.533333-21.333334 21.333334V823.466667c0 12.8 12.8 21.333333 21.333334 21.333333h827.733333c12.8 0 21.333333-8.533333 21.333333-21.333333v-418.133334c0-12.8-12.8-21.333333-21.333333-21.333333s-21.333333 8.533333-21.333333 21.333333V802.133333H102.4v-785.066666H426.666667c12.8 0 21.333333-8.533333 21.333333-21.333334 4.266667-12.8-4.266667-25.6-17.066667-25.6zM439.466667 554.666667l110.933333-618.666667 140.8 162.133333 123.733333-149.333333 25.6-25.6 64 55.466667-115.2 179.2L981.333333 256zM541.866667-102.4h-8.533334c-8.533333 4.266667-17.066667 8.533333-17.066666 17.066667L396.8 567.466667c0 8.533333 4.266667 17.066667 12.8 21.333333 8.533333 4.266667 17.066667 8.533333 25.6 0l563.2-320c8.533333-4.266667 12.8-12.8 12.8-25.6s-8.533333-17.066667-12.8-21.333333l-174.933333-72.533334 106.666666-162.133333c8.533333-12.8 4.266667-25.6-8.533333-34.133333l-72.533333-55.466667c-4.266667-4.266667-12.8-4.266667-17.066667-4.266667-8.533333 0-12.8 4.266667-17.066667 8.533334l-119.466666 162.133333-132.266667-162.133333c-4.266667 0-12.8-4.266667-21.333333-4.266667z m153.6 238.933333c8.533333 0 12.8-4.266667 17.066666-8.533333l123.733334-166.4 34.133333 25.6-110.933333 166.4c-4.266667 8.533333-4.266667 12.8-4.266667 21.333333s8.533333 12.8 12.8 17.066667l157.866667 64-469.333334 268.8L554.666667-21.333333l115.2 145.066666c8.533333 8.533333 17.066667 12.8 25.6 12.8z"  horiz-adv-x="1024" />
 
     
@@ -155,6 +158,9 @@ Created by iconfont
     <glyph glyph-name="tixing" unicode="&#58904;" d="M511.7 831.8C264.4 831.8 64 631.3 64 384.1s200.4-447.6 447.7-447.6c247.2 0 447.6 200.4 447.6 447.6 0 247.2-200.4 447.7-447.6 447.7z m69.7-716.3H445.7v96.7h135.7v-96.7z m19.7 367L573 252H450.4l-28.2 230.5V608h178.9v-125.5z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="yujing" unicode="&#58881;" d="M273.02626953 21.567187500000045h-63.43769531V315.35742187000005c0 166.71972656 135.12216797 301.93769531 301.93769531 301.93769532 166.79267578 0 301.91308594-135.24257812 301.91308594-301.93769531v-293.78935547H273.05175781z m260.34345703 474.0328125L384.43203125 250.31308593999995h119.11640625l-29.82128906-183.96386719 148.93769531 245.28515625H503.5484375l29.82128906 183.965625zM761.77636719 765.06474609a29.4328125 29.4328125 0 0 0 10.7024414-40.08691406l-53.53769531-93.08847656-50.59423828 29.28603515L721.85908203 754.265625a29.11640625 29.11640625 0 0 0 39.74589844 10.8h0.17050781zM511.42871094 834c17.51308594 0 31.66962891-13.18359375 31.6696289-29.55410156v-105.49511719h-63.34013671V804.51972656C479.75908203 820.81640625 493.915625 834 511.42958984 834zM261.25332031 765.06474609a29.18847656 29.18847656 0 0 0 39.91640625-10.7024414l53.53769532-93.08935547-50.59423829-29.31152344-53.58691406 93.11396484a29.33525391 29.33525391 0 0 0 10.70332031 39.99023438zM78.09277344 581.1a29.11640625 29.11640625 0 0 0 39.89179687 10.70244141l92.74833985-53.80488282-29.18847657-50.78935546L88.76884766 541.08691406a29.33525391 29.33525391 0 0 0-10.70244141 40.01308594z m866.84589843 0a29.4328125 29.4328125 0 0 0-10.70332031-40.08691406l-92.72460937-53.7319336-29.18847657 50.81308594 92.72460938 53.78115235a29.18847656 29.18847656 0 0 0 39.81884766-10.60488282c0-0.09755859 0.07294922-0.09755859 0.07294921-0.17050781zM106.13779297 21.567187500000045h810.85078125c17.51396484 0 31.76806641-14.25410156 31.76806641-31.7671875s-14.25410156-31.7671875-31.76806641-31.7671875H106.13867187c-17.51396484 0-31.76806641 14.22949219-31.7680664 31.7671875a31.69423828 31.69423828 0 0 0 31.76806641 31.7671875z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="yue" unicode="&#59102;" d="M512 600.998175c57.876959 0 104.795322-48.918456 104.795322-109.262596 0-60.34414-46.918363-109.256608-104.795322-109.256608S407.204678 431.391439 407.204678 491.729591c0 47.361497 28.899556 87.680749 69.31462 102.837146a143.168374 143.168374 0 0 0-47.187836 22.072889C390.527251 588.500585 366.783626 542.258901 366.783626 491.735579c0-84.009918 65.128795-151.911298 145.216374-151.911298s145.216374 67.907368 145.216374 151.911298c0 84.015906-65.128795 151.917287-145.216374 151.917286v11.976609c86.812444 0 157.192982-73.380678 157.192982-163.893895S598.812444 327.847673 512 327.847673 354.807018 401.222363 354.807018 491.729591c0 54.475602 25.492211 102.741333 64.715602 132.545122a151.540023 151.540023 0 0 0-27.893521 31.276913C343.39331 616.795322 314.385965 556.840421 314.385965 491.729591 314.385965 377.556585 402.976936 285.192982 512 285.192982s197.614035 92.363602 197.614035 206.542597-88.590971 206.542596-197.614035 206.542596v1.053942c-23.150784 0-41.918129 19.563789-41.918129 43.702643 0 24.132865 18.767345 43.702643 41.918129 43.702644s41.918129-19.563789 41.918129-43.702644c0-13.976702-6.287719-26.420398-16.084585-34.420772a201.207018 201.207018 0 0 0 44.27752-10.880748 89.034105 89.034105 0 0 1 12.228117 45.30152c0 47.804632-36.977778 86.357333-82.339181 86.357334s-82.339181-38.552702-82.339181-86.351345c0-47.81062 36.977778-86.363322 82.339181-86.363322v-11.976608c-52.086269 0-94.315789 44.026012-94.315789 98.333941 0 54.313918 42.22952 98.333942 94.315789 98.333942s94.315789-44.026012 94.315789-98.327953c0-18.192468-4.73076-35.229193-12.994619-49.840655a206.548585 206.548585 0 0 0 35.678315-20.132679c11.551439 21.084819 17.737357 45.032047 17.737357 69.967345C646.736842 821.008468 586.296889 884.023392 512 884.023392S377.263158 821.008468 377.263158 743.03476 437.703111 602.046129 512 602.046129v-1.047954z m126.682573 64.835369C689.062175 625.927485 721.590643 562.792795 721.590643 491.735579 721.590643 371.053287 627.753918 273.216374 512 273.216374S302.409357 371.053287 302.409357 491.735579c0 71.057216 32.528468 134.191906 82.90807 174.097965-12.731135 22.665731-20.030877 49.044211-20.030877 77.201216C365.28655 827.517754 430.972257 896 512 896s146.71345-68.482246 146.71345-152.96524c0-28.157006-7.299743-54.535485-20.030877-77.201216zM512 394.455579c51.146105 0 92.818713 43.445146 92.818713 97.28 0 53.834854-41.672608 97.285988-92.818713 97.285988S419.181287 545.576421 419.181287 491.729591c0-53.834854 41.672608-97.28 92.818713-97.28z m0 316.853146c16.41993 0 29.94152 14.096468 29.94152 31.726035 0 17.635556-13.521591 31.726035-29.94152 31.726035s-29.94152-14.09048-29.94152-31.726035c0-17.629567 13.521591-31.726035 29.94152-31.726035zM289.845895-6.149988h43.744561l-21.521965 67.835508-22.216608-67.835508z m2.221661 107.250526h40.702502l61.056749-172.403275h-39.067696l-11.108304 35.444772H280.132865l-11.928701-35.438784H230.549708l61.517848 172.397287z m147.581754 0h36.606503v-105.969029c0-11.850854 1.407251-20.503953 4.209778-25.959298 4.371462-9.671111 13.880889-14.503673 28.540257-14.503673 14.58152 0 24.055018 4.832561 28.420491 14.503673 2.808515 5.455345 4.209778 14.108444 4.209778 25.959298v105.969029h36.612491v-105.969029c0-18.324211-2.850433-32.588351-8.539321-42.804398-10.605287-18.71345-30.839766-28.067181-60.703439-28.067181s-50.134082 9.353731-60.817216 28.067181c-5.688889 10.216047-8.539322 24.486175-8.539322 42.810386v105.963041z m312.840982-53.804912c-2.730667 11.778994-9.395649 20.000936-20.000935 24.683789-5.928421 2.574971-12.515556 3.856468-19.761404 3.856468-13.880889 0-25.28262-5.245754-34.211181-15.731275-8.928561-10.48552-13.395836-26.258713-13.395836-47.307602 0-21.210573 4.83855-36.217263 14.503672-45.032047 9.671111-8.808795 20.659649-13.216187 32.983579-13.216187 12.084398 0 21.989053 3.491181 29.701988 10.467555 7.724912 6.982363 12.479626 16.120515 14.276117 27.426433h-39.882105v28.773801h71.811743v-92.519298h-23.863392l-3.622924 21.527953c-6.940444-8.192-13.174269-13.958737-18.71345-17.312187-9.515415-5.850573-21.210573-8.772865-35.091462-8.772865-22.84538 0-41.55883 7.916538-56.134363 23.743625-15.210292 15.904936-22.80945 37.660444-22.80945 65.260538 0 27.917474 7.682994 50.295766 23.042994 67.134878C666.677895 97.124304 686.996211 105.54386 712.248889 105.54386c21.917193 0 39.516819-5.557146 52.810854-16.665451 13.294035-11.114292 20.917146-24.971228 22.863345-41.582783h-35.438784z"  horiz-adv-x="1024" />