修改[一键控制]按钮的表示, 追加牛舍历史数据页(另:为统一按钮式样,由ion-toggle改为v-switch)

src/app/app-routing.module.ts

@@ -21,6 +21,7 @@ import {EnvAlarmDetailPage} from './envCtrl/env-alarm-detail/env-alarm-detail.pa
 import {EnvCfgPageModule} from './envCtrl/env-cfg/env-cfg.module';
 import {EnvCfgPage} from './envCtrl/env-cfg/env-cfg.page';
 import {EnvHomePage} from './envCtrl/env-home/env-home.page';
+import {EnvHistoryPage} from './envCtrl/env-history/env-history.page';
 
 const routes: Routes = [
     {
@@ -49,6 +50,8 @@ const routes: Routes = [
         ]
     },
     // { path: 'env-detail', loadChildren: './envCtrl/env-detail/env-detail.module#EnvDetailPageModule' },
+    // {path: 'env-history', component: EnvHistoryPage},
+    { path: 'env-history', loadChildren: './envCtrl/env-history/env-history.module#EnvHistoryPageModule' },
     {path: 'env-alarmDetail', component: EnvAlarmDetailPage},
     { path: 'env-alarm-detail', loadChildren: './envCtrl/env-alarm-detail/env-alarm-detail.module#EnvAlarmDetailPageModule' },
     {path: 'tabs', loadChildren: './envCtrl/tabs/tabs.module#TabsPageModule'},

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

@@ -41,7 +41,6 @@ const routes: Routes = [
       EnvLightPage,
       EnvFanPage,
       EnvShowerPage,
-
   ]
 })
 export class EnvDetailPageModule {}

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

@@ -4,6 +4,9 @@
       <ion-back-button text="" ></ion-back-button>
     </ion-buttons>
     <ion-title mode="ios" class="title">{{item.fieldRegionName}}详情</ion-title>
+    <ion-buttons slot="end">
+      <ion-button style="font-size: medium" (click)="toHistory(item)">历史</ion-button>
+    </ion-buttons>
   </ion-toolbar>
   <div class="top">
     <span [ngClass]="{'online': item.online, 'offline': !item.online}">{{item.online ? '在线' : '离线'}}    </span>
@@ -25,20 +28,19 @@
       <ion-tab-button tab="fan">
         <ion-label>风机</ion-label>
       </ion-tab-button>
-      <ion-tab-button tab="shower" routerLink="/env-detail/shower/{{fieldRegionNo}}">  <!--[rootParams]="fieldRegionNo"-->
+      <ion-tab-button tab="shower" [routerLink]="['/env-detail/shower', item.fieldRegionNo]">  <!--[rootParams]="fieldRegionNo"-->
         <ion-label>喷淋</ion-label>
       </ion-tab-button>
-      <ion-tab-button tab="light" routerLink="/env-detail/light/{{fieldRegionNo}}">
+      <ion-tab-button tab="light" [routerLink]="['/env-detail/light', item.fieldRegionNo]">
         <ion-label>照明</ion-label>
       </ion-tab-button>
-      <ion-tab-button tab="waterchannel" routerLink="/env-detail/waterchannel/{{fieldRegionNo}}">
+      <ion-tab-button tab="waterchannel" [routerLink]="['/env-detail/waterchannel', item.fieldRegionNo]">
         <ion-label>水槽</ion-label>
       </ion-tab-button>
     </ion-tab-bar>
   </ion-tabs>
 </ion-content>
 
-
 <!--<ion-tabs>-->
   <!--<ion-tab [root]="fan" [rootParams]="fieldRegionNo" tabTitle="风机">-->
   <!--</ion-tab>-->

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

@@ -3,6 +3,7 @@ import {Api} from '../../service/api';
 import {NavController} from '@ionic/angular';
 import {ActivatedRoute} from '@angular/router';
 import {Load} from '../../service/load';
+import {Transfer} from '../../service/transfer';
 
 @Component({
     selector: 'v-env-detail',
@@ -11,8 +12,11 @@ import {Load} from '../../service/load';
 })
 export class EnvDetailPage implements OnInit {
 
-    constructor(private api: Api, public nav: NavController, private ac: ActivatedRoute, private load: Load) {
-    }
+    constructor(public nav: NavController,
+                private api: Api,
+                private ac: ActivatedRoute,
+                private load: Load,
+                private tf: Transfer) {}
 
     item = {};
 
@@ -24,9 +28,9 @@ export class EnvDetailPage implements OnInit {
         isLoading: true
     };
 
-    fan = '/env-detail/fan';
-    shower = '/env-detail/shower';
-    light = '/env-detail/light';
+    // fan = '/env-detail/fan';
+    // shower = '/env-detail/shower';
+    // light = '/env-detail/light';
 
     ngOnInit() {
         this.comm.isLoading = false;
@@ -48,6 +52,7 @@ export class EnvDetailPage implements OnInit {
                 // TODO 测试用准备数据
                 this.item = {
                     // 3-重度热应激 在线 平控 非智控(自控) 有报警
+                    fieldRegionNo: 'FRN136641006052720640',
                     fieldRegionName: '1号牛舍',
                     temp: '23.5',
                     humi: '82.8',
@@ -96,9 +101,22 @@ export class EnvDetailPage implements OnInit {
                 break;
             case 1:
                 stateName = '在舍';
+                break;
             default:
                 break;
         }
         return stateName;
     }
+
+    toHistory(item) {
+        this.tf.transfer({url: '/env-history'});
+
+        const query = '?no=' + item.fieldRegionNo;
+        this.tf.transfer({
+            url: '/env-history',
+            query: query,
+            hash: ''
+        });
+        this.nav.navigateForward(query);
+    }
 }

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

@@ -23,7 +23,8 @@
             margin-bottom: 5px;">控制/状态</h1>
   <ion-item *ngIf="batchSwitch" lines="full" insert="false">
     <ion-label>一键控制</ion-label>
-    <ion-toggle slot="end" [checked]="batchSwitch.op"></ion-toggle>
+    <!--<ion-toggle slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.s"></ion-toggle>-->
+    <v-switch (click)="allCheck(batchSwitch)" [value]="batchSwitch.op" [disabled]="batchSwitch.disabled" [loading]="batchSwitch.load"></v-switch>
   </ion-item>
   <div>
     <ion-card *ngFor="let device of devices" class="card" color="white">
@@ -32,7 +33,8 @@
       </ion-card-header>
 
       <ion-card-content>
-        <ion-toggle slot="middle" [checked]="device.state"></ion-toggle>
+        <!--<ion-toggle slot="middle" [checked]="device.state"></ion-toggle>-->
+        <v-switch class="btn-switch" (click)="deviceCheck(device)" [value]="device.op" [disabled]="device.disabled" [loading]="device.load"></v-switch>
       </ion-card-content>
     </ion-card>
   </div>

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

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {Api} from '../../service/api';
 import {ActivatedRoute} from '@angular/router';
 import {Load} from '../../service/load';
+import { AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'v-env-fan',
@@ -19,8 +20,8 @@ export class EnvFanPage implements OnInit {
 
     // 各设备信息
     devices = [];
-    // 一鍵控制信息
-    batchSwitch = {op: 0, type: '风机'};
+    // 一鍵控制按钮(默认开启:1)
+    batchSwitch = {op: undefined, type: undefined, load: undefined, disabled: undefined};
 
     controlModelOptions = [
         {modelId: 0, modelValue: '手控模式'},
@@ -33,7 +34,7 @@ export class EnvFanPage implements OnInit {
         isLoading : true
     };
 
-    constructor(private api: Api, private ac: ActivatedRoute, private load: Load) { }
+    constructor(private api: Api, private ac: ActivatedRoute, private load: Load, private alertControlle: AlertController) { }
 
     ngOnInit() {
         this.ac.queryParams.subscribe((data) => {
@@ -64,35 +65,74 @@ export class EnvFanPage implements OnInit {
                 //     {fieldDeviceNo: '136641005998194688', fieldDeviceName: 'E号风机组', state: 1},
                 //     {fieldDeviceNo: '136641005998194688', fieldDeviceName: 'F号风机组', state: 1}];
 
-                // 获取一键控制信息
-                this.allCheck(this.batchSwitch);
+
+                // [手控(0)]的状态下:活性(false)  以外:非活性(true)
+                const allDisabled = this.controlModel === 0 ? false : true;
+                this.batchSwitch.disabled = allDisabled;
+                this.devices.forEach((device, i) => {
+                    device.disabled = allDisabled;
+                });
+
+                // 设置[一键控制]按钮(默认: 开启)
+                // 当任意子按钮[关闭]的状态下: 关闭  以外:开启
+                this.batchSwitch.op = 1;
+                this.devices.map((device) => {
+                    if (device.state === 0) {
+                        this.batchSwitch.op = 0;
+                    }
+                });
             }
         }]);
 
     }
-
-    allCheck(batchSwitch) {
-        batchSwitch.type = this.fieldDeviceType;
-
+    // 一键控制
+    allCheck(btn) {
+        debugger;
+        btn.load = true;
         const req = {
             fieldRegionNo: this.fieldRegionNo,
-            op: batchSwitch.op, // op: batchSwitch.op ? 0 : 1,
-            fieldDeviceType: batchSwitch.type,
+            op: btn.op ? 0 : 1,
+            type: this.fieldDeviceType,
             ts: parseInt((new Date().getTime() / 1000).toString(), 10)
         };
-
         this.comm.remain = 120;
+
+        // 一键开启设备
         this.api.control.controlBatchSwitch([req, (data) => {
             if (data.code === 1) {
-                this.batchSwitch.op = data.op;
+                this.getData(1);
                 this.api.presentMsgToast(data.message);
             } else {
                 this.api.presentMsgToast(data.message);
             }
             this.comm.remain = 0;
-            // batchSwitch.state = false;
+            btn.load = false;
+        }]);
+
+        // 子按钮状态
+        this.devices.forEach((device, i) => {
+            device.state = btn.op ? 0 : 1;
+        });
+    }
+
+    // 单个设备控制
+    deviceCheck(btn) {
+        const req = {
+            fieldDeviceNo: btn.fieldDeviceNo,
+            op: btn.op ? 0 : 1,
+            ts: parseInt((new Date().getTime() / 1000).toString(), 10)
+        };
+        this.comm.remain = 20;
+        this.api.control.controlSwitch([req, (data) => {
+            if (data && data.code === 1) {
+                this.getData(1);
+                this.comm.remain = 0;
+                this.api.presentMsgToast(data.message);
+            } else {
+                this.comm.remain = 0;
+                this.api.presentMsgToast(data.message);
+            }
+            btn.loading = false;
         }]);
-        // TODO 测试用准备数据
-        // this.batchSwitch.op = 0;
     }
 }

src/app/envCtrl/env-history/env-history.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 { EnvHistoryPage } from './env-history.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EnvHistoryPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [EnvHistoryPage]
+})
+export class EnvHistoryPageModule {}

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

+<ion-header>
+  <ion-toolbar>
+    <ion-title class="title">{{item.fieldRegionName}}历史数据</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>
+

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

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

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

+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {Api} from '../../service/api';
+import {Load} from '../../service/load';
+
+@Component({
+  selector: 'v-env-history',
+  templateUrl: './env-history.page.html',
+  styleUrls: ['./env-history.page.scss'],
+})
+export class EnvHistoryPage implements OnInit {
+
+  constructor(private api: Api, private ac: ActivatedRoute, private load: Load) { }
+  item = {fieldRegionNo: ''};
+
+  ngOnInit() {
+    this.ac.queryParams.subscribe((data) => {
+      this.item.fieldRegionNo = data.no;
+    });
+    this.getData(0);
+  }
+
+  getData(time) {
+    if (time) {
+      this.load.toLoad('加载中...', false);
+    }
+    this.api.cowshedApp.getRealDataByFieldRegionNo([{'fieldRegionNo' : this.item.fieldRegionNo}, (data) => {
+
+      if (data) {
+        this.item = data;
+      }
+    }]);
+  }
+
+}

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

@@ -3,7 +3,8 @@
     <ion-buttons slot="start">
       <ion-back-button color="secondary" defaultHref="/index" text=""></ion-back-button>
     </ion-buttons>
-    <ion-searchbar></ion-searchbar>
+    <ion-searchbar (ionInput)="getItems($event)" (ionClear)="resetItems()" debounce="1000"></ion-searchbar>
+      <!--<ion-searchbar (ionInput)="getItems($event)" [(ngModel)]="searchItem"></ion-searchbar>-->
     <!--<div class="topSearch">
       <SearchBar [placeholder]="'点击此处进行搜索'" [(ngModel)]="searchText"
                  (onCancel)="searchText ='';toggleFocus(false);"
@@ -40,7 +41,7 @@
             border-left: 5px solid #28c9bd;
             line-height: 25px;
             margin-bottom: 5px;">牛舍列表</h1>
-  <ion-list mode="md" class="listview" insert = "false" line="none" style="width:96%;margin-left: 2%">
+  <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">
         <div class="top">

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

-    import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {Transfer} from '../../service/transfer';
 import {Api} from '../../service/api';
@@ -20,6 +20,13 @@ export class EnvHomePage implements OnInit {
     isError = false;
     ifFocus = false;
     searchText = '';
+
+    // 发送指令延时判断
+    comm = {
+        remain: 20,
+        isLoading: true
+    };
+
     imgs = ['1.jpg', '2.jpg', '3.jpg'];
     lunbo = {
         speed: 1000,
@@ -42,6 +49,25 @@ export class EnvHomePage implements OnInit {
     // 牛舍列表
     items = [];
 
+    getItems(e) {
+        this.comm.isLoading = false;
+        this.comm.remain = 1000;
+        this.searchText = e.target.value;
+        if (!this.searchText.trim()) {
+            this.resetItems();
+        }
+        this.items = this.items.filter((item) => {
+            const name = item.fieldRegionName;
+            if (name.toLowerCase().indexOf(this.searchText.toLowerCase()) > -1) {
+                return true;
+            }
+            return false;
+        });
+    }
+
+    resetItems() {
+        this.init();
+    }
     ngOnInit() {
         this.init();
         this.ionViewWillEnter();
@@ -214,4 +240,5 @@ export class EnvHomePage implements OnInit {
         }
         return levelName;
     }
+
 }

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

@@ -77,7 +77,7 @@ export class EnvLightPage implements OnInit {
       // this.ac.queryParams.subscribe((data) => {
       //     this.fieldRegionNo = data.no;
       // });
-      this.fieldRegionNo = this.route.snapshot.paramMap.get('fieldRegionNo');
+      this.route.paramMap.subscribe(params => {this.fieldRegionNo = params.get('fieldRegionNo'); });
       this.getData(0);
   }
 
@@ -87,9 +87,6 @@ export class EnvLightPage implements OnInit {
 
     getData(time) {
         this.curDate = +new Date().getMonth();
-        this.ac.queryParams.subscribe((data) => {
-            this.fieldRegionNo = data.no;
-        });
         if (time) {
             this.load.toLoad('加载中...', false);
         }

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

@@ -47,7 +47,7 @@ export class EnvShowerPage implements OnInit {
     constructor(private api: Api, private ac: ActivatedRoute, private load: Load, private route: ActivatedRoute) { }
 
     ngOnInit() {
-        this.fieldRegionNo = this.route.snapshot.paramMap.get('fieldRegionNo');
+        this.route.paramMap.subscribe(params => {this.fieldRegionNo = params.get('fieldRegionNo'); });
         this.getData(0);
     }
 
@@ -57,7 +57,6 @@ export class EnvShowerPage implements OnInit {
         }
         this.api.cowshedApp.getPenLinData([{'fieldRegionNo' : this.fieldRegionNo}, (data) => {
             if (data) {
-                debugger;
                 this.fieldRegionNo = data.fieldRegionNo;
                 this.fieldDeviceType = data.fieldDeviceType;
                 this.controlModel = data.controlModel;

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

@@ -26,7 +26,7 @@ export class EnvWaterchannelPage implements OnInit {
         // this.ac.queryParams.subscribe((data) => {
         //     this.fieldRegionNo = data.no;
         // });
-        this.fieldRegionNo = this.route.snapshot.paramMap.get('fieldRegionNo');
+        this.route.paramMap.subscribe(params => {this.fieldRegionNo = params.get('fieldRegionNo'); });
         this.getData(0);
     }
 

src/app/service/api.ts

@@ -46,6 +46,9 @@ export class Api {
         getZhaoMingData: (data) => this.trans('post', '/cowshedApp/getZhaoMingData', data),
         // 获取水槽信息
         getShuiCaoData: (data) => this.trans('post', '/cowshedApp/getShuiCaoData', data),
+
+        // 获取当前牛舍历史数据信息 TODO 追加待
+        // getShuiCaoData: (data) => this.trans('post', '/cowshedApp/getShuiCaoData', data),
     };
 
     public alert = {