修改loading效果

src/app/app.component.ts

@@ -6,6 +6,7 @@ import {Router, NavigationEnd} from '@angular/router';
 import {AppMinimize} from '@ionic-native/app-minimize/ngx';
 import {Mqtt} from './service/mqtt';
 import {Load} from './service/load';
+import {Loading} from './service/loading';
 
 declare var screen: any;
 
@@ -102,6 +103,7 @@ export class AppComponent implements AfterViewInit, OnDestroy {
         private router: Router,
         private mqtt: Mqtt,
         public load: Load,
+        public loading: Loading,
         private nav: NavController
     ) {
         this.initializeApp();

src/app/app.module.ts

@@ -40,6 +40,7 @@ import {Transfer} from './service/transfer';
 import {AuthInterceptor} from './service/token';
 import {Mqtt} from './service/mqtt';
 import {Load} from './service/load';
+import {Loading} from './service/loading';
 import {LoadingBumpComponent} from './components/loading-bump/loading-bump.component';
 import {KanbanComponent} from './components/kanban/kanban.component';
 import {WtModule} from './components/wt/wt.module';
@@ -123,6 +124,7 @@ import {DatePipe} from '@angular/common';
         Mqtt,
         Transfer,
         Load,
+        Loading,
         Network,
         DatePipe
     ],

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

@@ -18,7 +18,7 @@
     </ion-segment>
 
     <ion-item lines="full" class="ionItem" color="gray">
-      <ion-select interface="popover" placeholder="状态" [(ngModel)]="disposeState" (click)="refresh()" id="selectState">
+      <ion-select interface="popover" placeholder="状态" [(ngModel)]="disposeState" (onClick)="refresh()" id="selectState">
         <ion-select-option value="全部" class="popLabel">全部</ion-select-option>
         <ion-select-option value="0" class="popLabel">待修复</ion-select-option>
         <ion-select-option value="1" class="popLabel">已修复</ion-select-option>

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

 import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {Api} from '../../service/api';
-import {AlertController} from '@ionic/angular';
+import {AlertController, LoadingController} from '@ionic/angular';
 import {DatePipe} from '@angular/common';
 import { IonInfiniteScroll } from '@ionic/angular';
+import {Loading} from '../../service/loading';
+import {Load} from '../../service/load';
 
 @Component({
     selector: 'v-env-alarm-detail',
@@ -46,8 +48,8 @@ export class EnvAlarmDetailPage implements OnInit {
     @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
     // @ViewChild('currentItem') currentItem;
 
-    constructor(private ac: ActivatedRoute, private api: Api,
-                private alterContoller: AlertController, private datePipe: DatePipe) {
+    constructor(private ac: ActivatedRoute, private api: Api, public load: Load, public loadingController: LoadingController,
+                private alterContoller: AlertController, private datePipe: DatePipe, public loading: Loading) {
     }
 
     ngOnInit() {
@@ -181,6 +183,7 @@ export class EnvAlarmDetailPage implements OnInit {
             document.getElementById('infiniteScroll').setAttribute('disabled', 'disabled');
             // this.infiniteScroll.disabled = true;
         }
+        this.load.offLoad();
     }
 
     async loadData(event) {
@@ -199,23 +202,27 @@ export class EnvAlarmDetailPage implements OnInit {
     }
 
     segmentChanged(ev: any) {
-        console.log('segment changed');
-        console.log(this.infiniteScroll.disabled);
-        this.page = 1;
-        this.disposeState = '';
-        this.fieldDeviceType = '';
-        this.detailInfo = {};
+        this.waiting();
         this.troubleList = [];
-        this.infiniteScroll.disabled = false;
-        console.log(this.infiniteScroll.disabled);
-        document.getElementById('infiniteScroll').removeAttribute('disabled');
-        if (ev.target.value === 'alarm') {
-            this.displayArea = 'alarm';
-            this.getAlarmList(true);
-        } else {
-            this.displayArea = 'trouble';
-            this.getTroubleList(true);
-        }
+        setTimeout(async () => {
+            console.log('segment changed');
+            console.log(this.infiniteScroll.disabled);
+            this.page = 1;
+            this.disposeState = '';
+            this.fieldDeviceType = '';
+            this.detailInfo = {};
+            this.infiniteScroll.disabled = false;
+            console.log(this.infiniteScroll.disabled);
+            document.getElementById('infiniteScroll').removeAttribute('disabled');
+            if (ev.target.value === 'alarm') {
+                this.displayArea = 'alarm';
+                this.getAlarmList(true);
+            } else {
+                this.displayArea = 'trouble';
+                this.getTroubleList(true);
+            }
+        }, 1000);
+
     }
 
     // 确认修复
@@ -257,6 +264,7 @@ export class EnvAlarmDetailPage implements OnInit {
             disposeState: 1,
             isReal: real === 1 ? 1 : 0
         };
+        this.loading.presentLoading(60);
         this.api.troubleLog.processingFailure([req, (data) => {
             if (data && data.code === 1) {
                 this.api.presentMsgToast(data.message);
@@ -264,6 +272,7 @@ export class EnvAlarmDetailPage implements OnInit {
                 this.api.presentMsgToast(data.message);
             }
             this.refresh();
+            this.loading.closeLoading();
         }]);
     }
 
@@ -306,4 +315,19 @@ export class EnvAlarmDetailPage implements OnInit {
             }, time);
         });
     }
+
+    async waiting() {
+        const loading = await this.loadingController.create({
+            spinner: 'circles',
+            cssClass: 'main-color',
+            mode: 'ios',
+            message: '',
+            duration: 1000
+        });
+        await loading.present();
+
+        const { role, data } = await loading.onDidDismiss();
+
+        console.log('Loading dismissed!');
+    }
 }

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

@@ -264,7 +264,7 @@
             <ion-col>牛群回舍时需恢复上述的设备</ion-col>
           </ion-row>
           <ion-row>
-            <ion-col *ngFor="let device of curCowshed.leave">
+            <ion-col *ngFor="let device of curCowshed.back">
               <ion-item lines="none" class="cow">
                 <ion-checkbox color="primary" class="cowCheckBox" slot="start" [(ngModel)]="device.flag"></ion-checkbox>
                 <ion-label>{{device.type}}</ion-label>
@@ -275,7 +275,7 @@
           <ion-col>牛群离舍时需完全关闭的设备</ion-col>
           </ion-row>
           <ion-row>
-            <ion-col *ngFor="let device of curCowshed.back">
+            <ion-col *ngFor="let device of curCowshed.leave">
               <ion-item lines="none" class="cow">
                 <ion-checkbox color="primary" class="cowCheckBox" slot="start" [(ngModel)]="device.flag"></ion-checkbox>
                 <ion-label>{{device.type}}</ion-label>
@@ -363,5 +363,5 @@
       </ion-item>
     </div>
 
-  <v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>
+  <!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>-->
 </ion-content>

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

@@ -8,6 +8,7 @@ import {ActivatedRoute} from '@angular/router';
 import {DatePipe} from '@angular/common';
 import {Constants} from '../../service/constants';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {Loading} from '../../service/loading';
 
 @Component({
     selector: 'v-env-cfg',
@@ -36,7 +37,7 @@ export class EnvCfgPage implements OnInit {
 
     constructor(public alertCtrl: AlertController, private pickerController: PickerController, private alertController: AlertController,
                 private api: Api, private load: Load, public nav: NavController, private tf: Transfer, private ac: ActivatedRoute,
-                private datePipe: DatePipe) {
+                private datePipe: DatePipe, public loading: Loading) {
     }
 
     isError = false;
@@ -385,7 +386,8 @@ export class EnvCfgPage implements OnInit {
         if (this.validate()) {
             this.updateModels();
             // this.load.toLoad('加载中...', false);
-            this.comm.remain = 150;
+            // this.comm.remain = 150;
+            this.loading.presentLoading(150);
             this.curCowshed.isWisdomModel = this.curCowshed.isWisdomModelChecked ? 1 : 0;
             this.api.config.updateConfig([this.curCowshed, (data) => {
                 if (data && data.code !== 0) {
@@ -394,6 +396,8 @@ export class EnvCfgPage implements OnInit {
                     this.api.presentMsgToast('获取数据失败');
                     this.isError = true;
                 }
+                this.selectCowshed();
+                this.loading.closeLoading();
                 this.comm.remain = 0;
                 this.load.offLoad();
             }]);
@@ -444,6 +448,14 @@ export class EnvCfgPage implements OnInit {
             this.api.presentMsgToast('请输入偏差湿度');
             return false;
         }
+        if (!this.isNumber(this.curCowshed.propertyConfig.toft)) {
+            this.api.presentMsgToast('请输入正确的偏差温度');
+            return false;
+        }
+        if (!this.isNumber(this.curCowshed.propertyConfig.hoft)) {
+            this.api.presentMsgToast('请输入正确的偏差湿度');
+            return false;
+        }
         if (this.fan.controlModel === Constants.CONTROLL_SELF) {
             if (this.isEmpty(this.fan.controlConfig.config.TU) || this.isEmpty(this.fan.controlConfig.config.TL)) {
                 this.api.presentMsgToast('请完成风机配置');
@@ -547,6 +559,14 @@ export class EnvCfgPage implements OnInit {
             this.api.presentMsgToast('请完成环境参数预警配置');
             return false;
         }
+        if (!this.isNumber(this.curCowshed.environmentConfigJson.NH3U)) {
+            this.api.presentMsgToast('请输入正确的氨气上限值');
+            return false;
+        }
+        if (!this.isNumber(this.curCowshed.environmentConfigJson.NH3L)) {
+            this.api.presentMsgToast('请输入正确的氨气下限值');
+            return false;
+        }
         return true;
     }
 
@@ -558,6 +578,10 @@ export class EnvCfgPage implements OnInit {
         return hasError;
     }
 
+    isNumber(item) {
+        // return typeof (item) !== 'number';
+        return /(^[\-0-9][0-9]*(.[0-9]+)?)$/.test(item);
+    }
     validateDate(date) {
         // let hasError = false;
         // const month = parseInt(date.slice(0, 2), 10);

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

@@ -45,5 +45,5 @@
     </ion-card>
   </div>
 
-  <v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>
+  <!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>-->
 </ion-content>

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

@@ -5,6 +5,8 @@ import {Load} from '../../service/load';
 import { AlertController } from '@ionic/angular';
 import {Constants} from '../../service/constants';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {Loading} from '../../service/loading';
+
 
 @Component({
   selector: 'v-env-fan',
@@ -40,7 +42,8 @@ export class EnvFanPage implements OnInit {
 
     commTmr: any;
 
-    constructor(private api: Api, private ac: ActivatedRoute, private load: Load, private alertController: AlertController) { }
+    constructor(private api: Api, private ac: ActivatedRoute, private load: Load, private alertController: AlertController,
+                public loading: Loading) { }
 
     ngOnInit() {
         // this.ionViewWillEnter();
@@ -155,8 +158,8 @@ export class EnvFanPage implements OnInit {
             op: btn.op ? 1 : 0,
             ts: parseInt((new Date().getTime() / 1000).toString(), 10)
         };
-        this.comm.remain = 120;
-
+        // this.comm.remain = 150;
+        this.loading.presentLoading(150);
         // 一键开启设备
         this.api.control.controlCowedBatchSwitch([req, (data) => {
             // if (data.code === 1) {
@@ -168,12 +171,13 @@ export class EnvFanPage implements OnInit {
             // this.api.presentMsgToast(data.message);
             // this.getData(1);
             if (data.code === 1) {
-                this.getData(1);
+                this.getData(0);
                 this.api.presentMsgToast(data.message);
             } else {
                 this.getData(0);
                 this.api.presentMsgToast(data.message);
             }
+            this.loading.closeLoading();
             this.comm.remain = 0;
             btn.load = false;
         }]);
@@ -194,17 +198,50 @@ export class EnvFanPage implements OnInit {
             op: btn.op ? 0 : 1,
             ts: new Date().valueOf()
         };
-        this.comm.remain = 60;
+        // this.comm.remain = 60;
+
+        this.loading.presentLoading(60);
+
         this.api.control.controlCowedSwitch([req, (data) => {
             if (data && data.code === 1) {
                 this.comm.remain = 0;
                 this.api.presentMsgToast(data.message);
             } else {
-                this.comm.remain = 0;
+                // this.comm.remain = 0;
                 this.api.presentMsgToast(data.message);
             }
-            this.getData(1);
-            this.comm.remain = 0;
+            this.getData(0);
+            this.loading.closeLoading();
+            // this.comm.remain = 0;
         }]);
     }
+
+
+    // async presentLoading() {
+    //     const loading = await this.loadingController.create({
+    //         message: '通信中，还剩60秒',
+    //         duration: 60000
+    //     });
+    //     await loading.present();
+    //     let item = 60;
+    //     setInterval(() => {
+    //         item--;
+    //         loading.message = '通信中，还剩' + item + '秒';
+    //     }, 1000)
+    //
+    //     const { role, data } = await loading.onDidDismiss();
+    //
+    //     console.log('Loading dismissed!');
+    // }
+
+    // async presentLoadingWithOptions() {
+    //     const loading = await this.loadingController.create({
+    //         spinner: null,
+    //         duration: 5000,
+    //         message: '加载中...',
+    //         translucent: true,
+    //         cssClass: 'custom-class custom-loading'
+    //     });
+    //     return await loading.present();
+    // }
 }

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

@@ -54,5 +54,5 @@
     </ion-card>
   </div>
 
-  <v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>
+  <!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>-->
 </ion-content>

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

@@ -5,6 +5,7 @@ import {Load} from '../../service/load';
 import {AlertController} from '@ionic/angular';
 import {Constants} from '../../service/constants';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {Loading} from '../../service/loading';
 
 @Component({
     selector: 'v-env-light',
@@ -50,7 +51,7 @@ export class EnvLightPage implements OnInit {
     commTmr: any;
 
     constructor(private api: Api, private ac: ActivatedRoute, private load: Load, private route: ActivatedRoute,
-                private alertControlle: AlertController) {
+                private alertControlle: AlertController, public loading: Loading) {
     }
 
     ngOnInit() {
@@ -219,7 +220,8 @@ export class EnvLightPage implements OnInit {
             fieldDeviceType: this.fieldDeviceType,
             ts: parseInt((new Date().getTime() / 1000).toString(), 10)
         };
-        this.comm.remain = 120;
+        // this.comm.remain = 150;
+        this.loading.presentLoading(150);
 
         // 一键开启设备
         this.api.control.controlCowedBatchSwitch([req, (data) => {
@@ -230,6 +232,7 @@ export class EnvLightPage implements OnInit {
                 this.getData(0);
                 this.api.presentMsgToast(data.message);
             }
+            this.loading.closeLoading();
             this.comm.remain = 0;
             // this.getData(0);
             // this.api.presentMsgToast(data.message);
@@ -255,7 +258,8 @@ export class EnvLightPage implements OnInit {
             op: btn.op ? 0 : 1,
             ts: parseInt((new Date().getTime() / 1000).toString(), 10)
         };
-        this.comm.remain = 60;
+        // this.comm.remain = 60;
+        this.loading.presentLoading(60);
         this.api.control.controlCowedSwitch([req, (data) => {
             if (data && data.code === 1) {
                 this.comm.remain = 0;
@@ -264,7 +268,8 @@ export class EnvLightPage implements OnInit {
                 this.comm.remain = 0;
                 this.api.presentMsgToast(data.message);
             }
-            this.getData(1);
+            this.getData(0);
+            this.loading.closeLoading();
             this.comm.remain = 0;
             btn.loading = false;
         }]);

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

@@ -74,5 +74,5 @@
     </ion-card>
   </div>
 
-  <v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>
+  <!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>-->
 </ion-content>

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

@@ -3,6 +3,7 @@ import {Api} from '../../service/api';
 import {ActivatedRoute} from '@angular/router';
 import {Load} from '../../service/load';
 import {Constants} from '../../service/constants';
+import {Loading} from '../../service/loading';
 
 @Component({
   selector: 'v-env-shower',
@@ -68,7 +69,8 @@ export class EnvShowerPage implements OnInit {
         {modelId: 2, modelValue: '自控模式'},
         {modelId: 3, modelValue: '智控模式'}];
 
-    constructor(private api: Api, private ac: ActivatedRoute, private load: Load, private route: ActivatedRoute) {
+    constructor(private api: Api, private ac: ActivatedRoute, private load: Load, private route: ActivatedRoute,
+                public loading: Loading) {
         this.param[0].fieldDeviceName = 'A区';
         this.param[1].fieldDeviceName = 'B区';
         this.route.paramMap.subscribe(params => {
@@ -153,7 +155,8 @@ export class EnvShowerPage implements OnInit {
             op: btn.op ? 0 : 1,
             ts: parseInt((new Date().getTime() / 1000).toString(), 10)
         };
-        this.comm.remain = 60;
+        // this.comm.remain = 60;
+        this.loading.presentLoading(60);
         this.api.control.controlCowedSwitch([req, (data) => {
             if (data && data.code === 1) {
                 this.comm.remain = 0;
@@ -162,7 +165,8 @@ export class EnvShowerPage implements OnInit {
                 this.comm.remain = 0;
                 this.api.presentMsgToast(data.message);
             }
-            this.getData(1);
+            this.getData(0);
+            this.loading.closeLoading();
             // this.comm.remain = 0;
             // this.api.presentMsgToast(data.message);
             btn.loading = false;

src/app/service/loading.ts

+import {Injectable} from '@angular/core';
+import {LoadingController} from '@ionic/angular';
+
+@Injectable()
+export class Loading {
+    constructor(public loadingController: LoadingController) {
+    }
+
+    loading: any;
+    countdown = 0;
+    interval: any;
+    async presentLoading(time) {
+        this.countdown = time;
+        this.loading = await this.loadingController.create({
+            mode: 'ios',
+            // spinner: 'circles',
+            message: '通信中，还剩' + time + '秒',
+            cssClass: 'main-color',
+            duration: time * 1000
+        });
+        this.loading.present();
+        this.interval = window.setInterval(() => {
+            this.countdown--;
+            this.loading.message = '通信中，还剩' + this.countdown + '秒';
+        }, 1000)
+
+        const { role, data } = await this.loading.onDidDismiss();
+
+        console.log('Loading dismissed!');
+    }
+
+    async closeLoading() {
+        if (this.loading !== undefined || this.loading !== null) {
+            this.loading.dismiss();
+            clearInterval(this.interval);
+        }
+    }
+}

src/global.scss

@@ -171,3 +171,12 @@ img {
   font-size: 12px;
   color: #a5a5a5;
 }
+
+.main-color {
+  color:#61C7CC;
+}
+
+
+.spinnerColor {
+  --spinner-color: #61C7CC;
+}