Skip to content

M
muChangApp
Commit 53d5cb24 authored by yating.lin's avatar yating.lin
Browse files
Options

修改loading效果

parent 2ea83299
Show whitespace changes
Inline Side-by-side
Showing with 188 additions and 43 deletions
src/app/app.component.ts
View file @ 53d5cb24
......@@ -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
View file @ 53d5cb24
......@@ -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
View file @ 53d5cb24
......@@ -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
View file @ 53d5cb24
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,13 +202,15 @@ export class EnvAlarmDetailPage implements OnInit {
}
segmentChanged(ev: any) {
this.waiting();
this.troubleList = [];
setTimeout(async () => {
console.log('segment changed');
console.log(this.infiniteScroll.disabled);
this.page = 1;
this.disposeState = '';
this.fieldDeviceType = '';
this.detailInfo = {};
this.troubleList = [];
this.infiniteScroll.disabled = false;
console.log(this.infiniteScroll.disabled);
document.getElementById('infiniteScroll').removeAttribute('disabled');
......@@ -216,6 +221,8 @@ export class EnvAlarmDetailPage implements OnInit {
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
View file @ 53d5cb24
......@@ -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
View file @ 53d5cb24
......@@ -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
View file @ 53d5cb24
......@@ -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
View file @ 53d5cb24
......@@ -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
View file @ 53d5cb24
......@@ -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
View file @ 53d5cb24
......@@ -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
View file @ 53d5cb24
......@@ -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
View file @ 53d5cb24
......@@ -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 0 → 100644
View file @ 53d5cb24
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
View file @ 53d5cb24
......@@ -171,3 +171,12 @@ img {
font-size: 12px;
color: #a5a5a5;
}
.main-color {
color:#61C7CC;
}
.spinnerColor {
--spinner-color: #61C7CC;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment