开始设计看板

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

+<div class="kanban" style="border: #1e2023 1px solid">
+  <div class="title" >
+    <p style="align-items:center;justify-content: center;">
+      风机
+    </p>
+  </div>
+  <div class="sub">
+    <ion-icon name="ios-heart" style=""></ion-icon>
+    <span>321 个</span>
+  </div>
+</div>
\ No newline at end of file

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

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KanbanComponent } from './kanban.component';
+
+describe('KanbanComponent', () => {
+  let component: KanbanComponent;
+  let fixture: ComponentFixture<KanbanComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KanbanComponent ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KanbanComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'v-kanban',
+  templateUrl: './kanban.component.html',
+  styleUrls: ['./kanban.component.scss'],
+})
+export class KanbanComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/components/loading-bump/loading-bump.component.html

+<div class="wt-loader">
+  <div class="loader">
+    <div class="loader-inner line-scale">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+  <div class="tooltip"><p>通信中,还剩{{remain}}秒</p></div>
+</div>

src/app/components/loading-bump/loading-bump.component.scss

+:host{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(32,23,23,.5);
+}
+
+.loader{
+  box-sizing: border-box;
+  display: flex;
+  flex:0 1 auto;
+  width: 100%;
+  align-items:center;
+  justify-content: center;
+  perspective: 500px;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.wt-loader{
+  width: 60%;
+  align-items:center;
+  background-color: #ffffff;
+  border-radius: 3%;
+  height: 130px;
+}
+
+.tooltip{
+  box-sizing: border-box;
+  display: flex;
+  max-width: 100%;
+  justify-content: center;
+  align-items:center;
+  color:#222428;
+  font-size: 18px;
+}
+
+.line-scale > div{
+  background: #28c9bd;
+}
\ No newline at end of file

src/app/components/loading-bump/loading-bump.component.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadingBumpComponent } from './loading-bump.component';
+
+describe('LoadingBumpComponent', () => {
+  let component: LoadingBumpComponent;
+  let fixture: ComponentFixture<LoadingBumpComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoadingBumpComponent ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoadingBumpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/loading-bump/loading-bump.component.ts

+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'v-loading-bump',
+  templateUrl: './loading-bump.component.html',
+  styleUrls: ['./loading-bump.component.scss'],
+})
+export class LoadingBumpComponent implements OnInit {
+
+  constructor() { }
+
+  @Input()
+  remain = 0;
+
+  ngOnInit() {
+    window.setInterval( () => {
+      this.changeRamainTime();
+    } , 1000 );
+  }
+
+  changeRamainTime() {
+    // if (this.remain > 0) {
+    //     this.remain = this.remain - 1;
+    // }
+  }
+
+}

src/app/components/wt/wt.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {KanbanComponent} from '../kanban/kanban.component';
+import {IonicModule} from '@ionic/angular';
+
+@NgModule({
+  declarations: [KanbanComponent, ],
+  imports: [
+    CommonModule,
+    IonicModule,
+  ],
+  exports: [
+      KanbanComponent,
+  ]
+})
+export class WtModule { }

src/app/envCtrl/env-alarm/env-alarm.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EnvAlarmPage } from './env-alarm.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EnvAlarmPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [EnvAlarmPage]
+})
+export class EnvAlarmPageModule {}

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

+<ion-header>
+  <ion-toolbar>
+    <ion-title>envAlarm</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

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

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EnvAlarmPage } from './env-alarm.page';
+
+describe('EnvAlarmPage', () => {
+  let component: EnvAlarmPage;
+  let fixture: ComponentFixture<EnvAlarmPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EnvAlarmPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EnvAlarmPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'v-env-alarm',
+  templateUrl: './env-alarm.page.html',
+  styleUrls: ['./env-alarm.page.scss'],
+})
+export class EnvAlarmPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/envCtrl/env-anal/env-anal.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EnvAnalPage } from './env-anal.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EnvAnalPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [EnvAnalPage]
+})
+export class EnvAnalPageModule {}

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

+<ion-header>
+  <ion-toolbar>
+    <ion-title>envAnal</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/envCtrl/env-anal/env-anal.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EnvAnalPage } from './env-anal.page';
+
+describe('EnvAnalPage', () => {
+  let component: EnvAnalPage;
+  let fixture: ComponentFixture<EnvAnalPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EnvAnalPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EnvAnalPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'v-env-anal',
+  templateUrl: './env-anal.page.html',
+  styleUrls: ['./env-anal.page.scss'],
+})
+export class EnvAnalPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/envCtrl/env-cfg/env-cfg.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EnvCfgPage } from './env-cfg.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EnvCfgPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [EnvCfgPage]
+})
+export class EnvCfgPageModule {}

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

+<ion-header>
+  <ion-toolbar>
+    <ion-title>envCfg</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/envCtrl/env-cfg/env-cfg.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EnvCfgPage } from './env-cfg.page';
+
+describe('EnvCfgPage', () => {
+  let component: EnvCfgPage;
+  let fixture: ComponentFixture<EnvCfgPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EnvCfgPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EnvCfgPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'v-env-cfg',
+  templateUrl: './env-cfg.page.html',
+  styleUrls: ['./env-cfg.page.scss'],
+})
+export class EnvCfgPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EnvDetailPage } from './env-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EnvDetailPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [EnvDetailPage]
+})
+export class EnvDetailPageModule {}

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

+<ion-header>
+  <ion-toolbar>
+    <ion-title>envDetail</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

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

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EnvDetailPage } from './env-detail.page';
+
+describe('EnvDetailPage', () => {
+  let component: EnvDetailPage;
+  let fixture: ComponentFixture<EnvDetailPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EnvDetailPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EnvDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'v-env-detail',
+  templateUrl: './env-detail.page.html',
+  styleUrls: ['./env-detail.page.scss'],
+})
+export class EnvDetailPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EnvHomePage } from './env-home.page';
+import {KanbanComponent} from '../../components/kanban/kanban.component';
+import {WtModule} from '../../components/wt/wt.module';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EnvHomePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+      WtModule, // for test
+    RouterModule.forChild(routes)
+  ],
+  declarations: [EnvHomePage,
+  ]
+})
+export class EnvHomePageModule {}

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

+<ion-header>
+  <div class="topIcon" (click)="toIndex()">
+    <i class="vo v-back"></i>
+  </div>
+</ion-header>
+
+<ion-content>
+  <h1 style="
+            font-size: 16px;
+            padding-left: 5px;
+            border-left: 5px solid #28c9bd;
+            line-height: 25px;
+            margin-bottom: 5px;">故障统计</h1>
+  <v-kanban></v-kanban><v-kanban></v-kanban><v-kanban></v-kanban>
+  <h1 style="
+            font-size: 16px;
+            padding-left: 5px;
+            border-left: 5px solid #28c9bd;
+            line-height: 25px;
+            margin-bottom: 5px;">牛舍列表</h1>
+</ion-content>

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

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EnvHomePage } from './env-home.page';
+
+describe('EnvHomePage', () => {
+  let component: EnvHomePage;
+  let fixture: ComponentFixture<EnvHomePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EnvHomePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EnvHomePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {Transfer} from '../../service/transfer';
+import {Api} from '../../service/api';
+import {Load} from '../../service/load';
+import {NavController} from '@ionic/angular';
+
+@Component({
+  selector: 'v-env-home',
+  templateUrl: './env-home.page.html',
+  styleUrls: ['./env-home.page.scss'],
+})
+export class EnvHomePage implements OnInit {
+
+  constructor(private tf: Transfer, private ac: ActivatedRoute,
+              private api: Api, private load: Load, public nav: NavController) { }
+
+  ifFocus = false;
+
+  ngOnInit() {
+  }
+
+  toIndex() {
+      if (this.ifFocus) {
+          this.ifFocus = false;
+      } else {
+          this.tf.transfer({url: '/index'});
+      }
+  }
+
+}

src/app/envCtrl/tabs/tabs.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { TabsPage } from './tabs.page';
+import {EnvHomePage} from '../env-home/env-home.page';
+import {EnvAnalPage} from '../env-anal/env-anal.page';
+import {EnvDetailPage} from '../env-detail/env-detail.page';
+import {EnvAlarmPage} from '../env-alarm/env-alarm.page';
+import {EnvCfgPage} from '../env-cfg/env-cfg.page';
+import {KanbanComponent} from '../../components/kanban/kanban.component';
+import {AppModule} from '../../app.module';
+import {WtModule} from '../../components/wt/wt.module';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TabsPage,
+      children: [
+          {
+              path: 'tab-home',
+              component: EnvHomePage
+          },
+          {
+              path: 'tab-detail',
+              component: EnvDetailPage
+          },
+          {
+              path: 'tab-anal',
+              component: EnvAnalPage
+          },
+          {
+              path: 'tab-alarm',
+              component: EnvAlarmPage
+          },
+          {
+              path: 'tab-cfg',
+              component: EnvCfgPage
+          },
+          {
+              path: '',
+              redirectTo: '/tabs/tab-home',
+              pathMatch: 'full'
+          }
+      ]
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    WtModule,
+    RouterModule.forChild(routes),
+  ],
+  declarations: [TabsPage,
+      EnvHomePage,
+      EnvAnalPage,
+      EnvDetailPage,
+      EnvAlarmPage,
+      EnvCfgPage,
+      ]
+})
+export class TabsPageModule {}

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

+<ion-tabs>
+  <!--<ion-tab tab="home">Home Content</ion-tab>-->
+  <!--<ion-tab tab="settings">Settings Content</ion-tab>-->
+
+  <ion-tab-bar slot="bottom">
+
+    <ion-tab-button tab="tab-home">
+      <ion-label>首页</ion-label>
+      <ion-icon name="home"></ion-icon>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab-detail">
+      <ion-label>详情</ion-label>
+      <ion-icon name="settings"></ion-icon>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab-anal">
+      <ion-label>分析</ion-label>
+      <ion-icon name="settings"></ion-icon>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab-alarm">
+      <ion-label>告警</ion-label>
+      <ion-icon name="settings"></ion-icon>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab-cfg">
+      <ion-label>配置</ion-label>
+      <ion-icon name="settings"></ion-icon>
+    </ion-tab-button>
+
+  </ion-tab-bar>
+</ion-tabs>

src/app/envCtrl/tabs/tabs.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TabsPage } from './tabs.page';
+
+describe('TabsPage', () => {
+  let component: TabsPage;
+  let fixture: ComponentFixture<TabsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TabsPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TabsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/envCtrl/tabs/tabs.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'v-tabs',
+  templateUrl: './tabs.page.html',
+  styleUrls: ['./tabs.page.scss'],
+})
+export class TabsPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}