Skip to content

M
muChangApp
Commit 6c74cf51 authored by yating.lin's avatar yating.lin
Browse files
Options

修改预警页显示数据个数（分页）

parent 6aae8883
Hide whitespace changes
Inline Side-by-side
Showing with 202 additions and 230 deletions
src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.html
View file @ 6c74cf51
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</ion-header> </ion-header>
<ion-content color="light" style="background-color: #F3F4F4;"> <ion-content color="light" style="background-color: #F3F4F4;">
<ion-segment scrollable style="position: sticky; margin-top:10px;" color="secondary" (ionChange)="segmentChanged($event)"> <ion-segment scrollable style="position: sticky; margin-top:10px;" color="secondary" (click)="segmentChanged($event)">
<ion-segment-button value="trouble" [checked]="isTroubleDis"> <ion-segment-button value="trouble" [checked]="isTroubleDis">
<ion-label>故障</ion-label> <ion-label>故障</ion-label>
</ion-segment-button> </ion-segment-button>
...@@ -20,12 +20,12 @@ ...@@ -20,12 +20,12 @@
</ion-segment> </ion-segment>
<ion-item lines="full" class="ionItem" color="gray"> <ion-item lines="full" class="ionItem" color="gray">
<ion-select interface="popover" placeholder="状态" [(ngModel)]="disposeState" (ionChange)="refresh()"> <ion-select interface="popover" placeholder="状态" [(ngModel)]="disposeState" (click)="refresh()" id="selectState">
<ion-select-option value="全部" class="popLabel">全部</ion-select-option> <ion-select-option value="全部" class="popLabel">全部</ion-select-option>
<ion-select-option value="0" 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> <ion-select-option value="1" class="popLabel">已修复</ion-select-option>
</ion-select> </ion-select>
<ion-select interface="popover" placeholder="类型" [(ngModel)]="fieldDeviceType" (ionChange)="refresh()"> <ion-select interface="popover" placeholder="类型" [(ngModel)]="fieldDeviceType" (click)="refresh()" id="selectType">
<ion-select-option value="全部" class="popLabel">全部</ion-select-option> <ion-select-option value="全部" class="popLabel">全部</ion-select-option>
<ion-select-option value="环境" class="popLabel">环境</ion-select-option> <ion-select-option value="环境" class="popLabel">环境</ion-select-option>
<ion-select-option value="风机" class="popLabel">风机</ion-select-option> <ion-select-option value="风机" class="popLabel">风机</ion-select-option>
...@@ -37,13 +37,13 @@ ...@@ -37,13 +37,13 @@
<ion-item lines="full" class="ionItem" style="height: 45px;"> <ion-item lines="full" class="ionItem" style="height: 45px;">
<div style="width: 28%"> <div style="width: 28%">
<ion-datetime style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="startTime" (ionChange)="refresh()"></ion-datetime> <ion-datetime style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="startTime" (click)="refresh()" id="selectStartTime"></ion-datetime>
</div> </div>
<div style="width: 2%"> <div style="width: 2%">
<span>~</span> <span>~</span>
</div> </div>
<div style="width: 30%"> <div style="width: 30%">
<ion-datetime style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="stopTime" style="margin-left: 3px;" (ionChange)="refresh()"></ion-datetime> <ion-datetime style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="stopTime" style="margin-left: 3px;" (click)="refresh()" id="selectStopTime"></ion-datetime>
</div> </div>
<div style="width: 40%"> <div style="width: 40%">
<div class="note" style="margin-bottom: 5px;"> <div class="note" style="margin-bottom: 5px;">
...@@ -61,8 +61,9 @@ ...@@ -61,8 +61,9 @@
<div style="padding:5px;"> <div style="padding:5px;">
<div class="detailContent"> <div class="detailContent">
<div class="timeline" *ngIf="detailInfoLength > 0">
<div class="entry" *ngFor="let item of detailInfo.trouble"> <div class="timeline" *ngIf="troubleList.length > 0">
<div class="entry" *ngFor="let item of troubleList">
<div class="title"> <div class="title">
<div><img [src]="'../../assets/img/' + item.fieldDeviceType + '.png'" class="deviceIcon"></div> <div><img [src]="'../../assets/img/' + item.fieldDeviceType + '.png'" class="deviceIcon"></div>
<p style="font-size: 14px">{{item.troubleTime}}</p> <p style="font-size: 14px">{{item.troubleTime}}</p>
...@@ -82,8 +83,6 @@ ...@@ -82,8 +83,6 @@
<div *ngIf="displayArea === 'trouble' && item.disposeState === 0" > <div *ngIf="displayArea === 'trouble' && item.disposeState === 0" >
<ion-button color="secondary" style="display: inline-block; width: 55px; height: 30px; font-size: 12px; border-radius: 20px;" (click)="onRecvClick(item)">确认修复</ion-button> <ion-button color="secondary" style="display: inline-block; width: 55px; height: 30px; font-size: 12px; border-radius: 20px;" (click)="onRecvClick(item)">确认修复</ion-button>
</div> </div>
<!-- <img *ngIf="displayArea === 'trouble' && item.disposeState === 0" [src]="'../../assets/img/troubleDisposeState' + item.disposeState + '.png'" class="warnIcon" (click)="onRecvClick(item)">-->
<!-- <ion-button color="primary" size="small" style="display: inline-block" *ngIf="a.disposeState === 0" (click)='onRecvClick(a)'>确认修复</ion-button>-->
<img *ngIf="displayArea === 'trouble' && item.disposeState === 1" [src]="'../../assets/img/troubleDisposeState' + item.disposeState + '.png'" class="warnIcon"> <img *ngIf="displayArea === 'trouble' && item.disposeState === 1" [src]="'../../assets/img/troubleDisposeState' + item.disposeState + '.png'" class="warnIcon">
<img *ngIf="displayArea === 'alarm'" [src]="'../../assets/img/disposeState' + item.disposeState + '.png'" class="warnIcon"> <img *ngIf="displayArea === 'alarm'" [src]="'../../assets/img/disposeState' + item.disposeState + '.png'" class="warnIcon">
...@@ -94,14 +93,17 @@ ...@@ -94,14 +93,17 @@
</div> </div>
</div> </div>
</div> </div>
<ion-list id="list"></ion-list>
<ion-infinite-scroll threshold="100px" id="infinite-scroll"> <!--<ion-list id="troubleList"></ion-list>-->
<ion-infinite-scroll-content loading-spinner="bubbles" loading-text=""> <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="加载中...">
</ion-infinite-scroll-content> </ion-infinite-scroll-content>
</ion-infinite-scroll> </ion-infinite-scroll>
</div> </div>
</ion-content> </ion-content>
src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.ts
View file @ 6c74cf51
import {Component, OnInit} from '@angular/core'; import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {Api} from '../../service/api'; import {Api} from '../../service/api';
import {AlertController} from '@ionic/angular'; import {AlertController} from '@ionic/angular';
import {DatePipe} from '@angular/common'; import {DatePipe} from '@angular/common';
import { IonInfiniteScroll } from '@ionic/angular';
@Component({ @Component({
selector: 'v-env-alarm-detail', selector: 'v-env-alarm-detail',
...@@ -11,7 +12,7 @@ import {DatePipe} from '@angular/common'; ...@@ -11,7 +12,7 @@ import {DatePipe} from '@angular/common';
}) })
export class EnvAlarmDetailPage implements OnInit { export class EnvAlarmDetailPage implements OnInit {
displayArea = 'trouble'; displayArea = '';
isTroubleDis = false; isTroubleDis = false;
isAlarmDis = false; isAlarmDis = false;
fieldRegionNo = ''; fieldRegionNo = '';
...@@ -19,17 +20,20 @@ export class EnvAlarmDetailPage implements OnInit { ...@@ -19,17 +20,20 @@ export class EnvAlarmDetailPage implements OnInit {
fieldRegionGroup = ''; fieldRegionGroup = '';
detailInfo: any = {}; detailInfo: any = {};
detailInfoLength = 0; troubleList = [];
// detailInfoLength = 0;
disposeState = ''; disposeState = '';
fieldDeviceType = ''; fieldDeviceType = '';
startTime = null; startTime = null;
stopTime = null; stopTime = null;
curInterval = 12; curInterval = 12;
item = {};
page = 0;
rows = 10;
displayLength = 0; displayLength = 0;
page = 1;
rows = 10;
// 工作模式 // 工作模式
workModeSetting = { workModeSetting = {
'workMode': '风机', 'workMode': '风机',
...@@ -37,7 +41,10 @@ export class EnvAlarmDetailPage implements OnInit { ...@@ -37,7 +41,10 @@ export class EnvAlarmDetailPage implements OnInit {
'workModeOld': '1' 'workModeOld': '1'
}; };
infiniteScroll = document.getElementById('infinite-scroll'); // commTmr: any;
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
// @ViewChild('currentItem') currentItem;
constructor(private ac: ActivatedRoute, private api: Api, constructor(private ac: ActivatedRoute, private api: Api,
private alterContoller: AlertController, private datePipe: DatePipe) { private alterContoller: AlertController, private datePipe: DatePipe) {
...@@ -45,89 +52,45 @@ export class EnvAlarmDetailPage implements OnInit { ...@@ -45,89 +52,45 @@ export class EnvAlarmDetailPage implements OnInit {
ngOnInit() { ngOnInit() {
this.init(); this.init();
// this.commTmr = window.setInterval(() => {
// console.log(1);
// if (this.displayArea === 'trouble') {
// this.showAlarmList = this.troubleList;
// } else {
// this.showAlarmList = this.alarmList;
// }
//
// }, 1000) ;
}
ionViewWillLeave() {
console.log('ionViewWillLeave');
this.page = 1;
this.disposeState = '';
this.fieldDeviceType = '';
this.detailInfo = {};
this.troubleList = [];
this.infiniteScroll.disabled = false;
} }
init() { init() {
this.page = 1;
this.displayLength = 0;
this.detailInfo = {};
this.troubleList = [];
this.ac.queryParams.subscribe((data) => { this.ac.queryParams.subscribe((data) => {
console.log('init');
this.fieldRegionNo = data.no; this.fieldRegionNo = data.no;
this.displayArea = data.displayArea; this.displayArea = data.displayArea;
this.curInterval = data.interval; this.curInterval = data.interval;
this.setDateInterval(this.curInterval); this.setDateInterval(this.curInterval);
this.showArea(data.displayArea); this.showArea(data.displayArea);
this.getTroubleList(true);
this.getData(); this.getAlarmList(true);
});
}
getData() {
this.infiniteScroll.addEventListener('ionInfinite', async function () {
if (this.displayLength < this.detailInfoLength) {
console.log('Loading data...');
await this.wait(500);
this.infiniteScroll.complete();
this.appendPage();
console.log('Done');
} else {
console.log('No More Data');
this.infiniteScroll.disabled = true;
}
}); });
} }
appendPage() {
this.page = this.page + 1;
this.getTroubleList();
this.getAlarmList();
}
appendItems() {
const originalLength = length;
for (let i = 0; i < 10; i++) {
const el = document.createElement('div');
el.innerHTML = `
<div class="title">
<div><img [src]="'../../assets/img/' + item.fieldDeviceType + '.png'" class="deviceIcon"></div>
<p style="font-size: 14px">{{item.troubleTime}}</p>
</div>
<div class="body">
<h3 style="margin-bottom: 5px;">{{item.description}}</h3>
<div>
<div style="width:65%; float: left">
<div *ngIf="item.data !== null && item.data.temp !== undefined && item.data.temp !== null && item.data.temp !== ''"
class="warnContent">温度: {{item.data.temp}} ℃</div>
<div *ngIf="item.data !== null && item.data.humi !== undefined && item.data.humi !== null && item.data.humi !== ''"
class="warnContent">湿度: {{item.data.humi}} %</div>
<div *ngIf="item.data !== null && item.data.heatStressLevel !== undefined && item.data.heatStressLevel !== null && item.data.heatStressLevel !== ''"
class="warnContent">热应激等级: {{item.data.heatStressLevel}}</div>
<div *ngIf="item.data !== null && item.data.liquidPump !== undefined && item.data.liquidPump !== null && item.data.liquidPump !== ''"
class="warnContent">供液泵压力: {{item.data.liquidPump}} MPa</div>
<div *ngIf="item.data !== null && item.data.press !== undefined && item.data.press !== null && item.data.press !== ''"
class="warnContent">电磁阀压力: {{item.data.press}} MPa</div>
<div *ngIf="item.data !== null && item.data.NH3 !== undefined && item.data.NH3 !== null && item.data.NH3 !== ''"
class="warnContent">氨气: {{item.data.NH3}} ppm</div>
</div>
<div style="width:35%; float: left">
<div *ngIf="displayArea === 'trouble' && item.disposeState === 0" >
<ion-button color="secondary" style="display: inline-block; width: 55px; height: 30px; font-size: 12px; border-radius: 20px;"
(click)="onRecvClick(item)">确认修复</ion-button>
</div>
<img *ngIf="displayArea === 'trouble' && item.disposeState === 1"
[src]="'../../assets/img/troubleDisposeState' + item.disposeState + '.png'" class="warnIcon">
<img *ngIf="displayArea === 'alarm'"
[src]="'../../assets/img/disposeState' + item.disposeState + '.png'" class="warnIcon">
</div>
</div>
</div>
`;
list.appendChild(el);
length++;
}
}
setDateInterval(interval) { setDateInterval(interval) {
this.startTime = this.datePipe.transform(this.getStartTime(interval), 'yyyy-MM'); this.startTime = this.datePipe.transform(this.getStartTime(interval), 'yyyy-MM');
this.stopTime = this.datePipe.transform(new Date(), 'yyyy-MM'); this.stopTime = this.datePipe.transform(new Date(), 'yyyy-MM');
...@@ -138,10 +101,9 @@ export class EnvAlarmDetailPage implements OnInit { ...@@ -138,10 +101,9 @@ export class EnvAlarmDetailPage implements OnInit {
this.isAlarmDis = displayArea === 'alarm' ? true : false; this.isAlarmDis = displayArea === 'alarm' ? true : false;
} }
getTroubleList() { getTroubleList(isInit) {
if (this.displayArea === 'trouble') { if (this.displayArea === 'trouble') {
this.isTroubleDis = true; this.isTroubleDis = true;
this.detailInfo = {};
const req = { const req = {
fieldRegionNo: this.fieldRegionNo, fieldRegionNo: this.fieldRegionNo,
startTime: this.parseTime(this.startTime, 'start'), startTime: this.parseTime(this.startTime, 'start'),
...@@ -156,23 +118,24 @@ export class EnvAlarmDetailPage implements OnInit { ...@@ -156,23 +118,24 @@ export class EnvAlarmDetailPage implements OnInit {
req.fieldDeviceType = this.fieldDeviceType; req.fieldDeviceType = this.fieldDeviceType;
} }
this.api.troubleLog.getByTerm(this.page, this.rows, [req, (data) => { this.api.troubleLog.getByTerm(this.page, this.rows, [req, (data) => {
this.detailInfo = data; if (data.trouble && data.trouble.constructor === Array) {
// if (data.trouble && data.trouble.constructor === Array) { data.trouble.forEach((item) => {
// data.trouble.forEach((value) => { item.data = JSON.parse(item.data);
// value.troubleTime = this.api.formatTime('yyyy-MM-dd hh:mm:ss', new Date(value.troubleTime)); item.troubleTime = this.api.formatTime('yyyy-MM-dd hh:mm:ss', new Date(item.troubleTime));
// }); });
// this.setTrouble(data); }
// } if (isInit) {
this.appendItems(); this.detailInfo = data;
}
this.appendItems(data.trouble, data.devErrTotal);
// this.detailInfoLength = data.trouble.length;
}]); }]);
} }
} }
getAlarmList() { getAlarmList(isInit) {
if (this.displayArea === 'alarm') { if (this.displayArea === 'alarm') {
this.isAlarmDis = true; this.isAlarmDis = true;
this.detailInfo = {};
const req = { const req = {
fieldRegionNo: this.fieldRegionNo, fieldRegionNo: this.fieldRegionNo,
startTime: this.parseTime(this.startTime, 'start'), startTime: this.parseTime(this.startTime, 'start'),
...@@ -187,39 +150,65 @@ export class EnvAlarmDetailPage implements OnInit { ...@@ -187,39 +150,65 @@ export class EnvAlarmDetailPage implements OnInit {
req.fieldDeviceType = this.fieldDeviceType; req.fieldDeviceType = this.fieldDeviceType;
} }
this.api.alarm.getCowshedAlarm(this.page, this.rows, [req, (data) => { this.api.alarm.getCowshedAlarm(this.page, this.rows, [req, (data) => {
this.detailInfo = data;
if (data.trouble && data.trouble.constructor === Array) { if (data.trouble && data.trouble.constructor === Array) {
data.trouble.forEach((value) => { data.trouble.forEach((item) => {
value.troubleTime = this.api.formatTime('yyyy-MM-dd hh:mm:ss', new Date(value.alarmTime)); item.data = JSON.parse(item.data);
item.troubleTime = this.api.formatTime('yyyy-MM-dd hh:mm:ss', new Date(item.alarmTime));
}); });
this.setTrouble(data);
} }
if (isInit) {
this.detailInfo = data;
}
this.appendItems(data.trouble, data.alarmTotal);
// this.detailInfoLength = data.trouble.length;
}]); }]);
} }
} }
setTrouble(data) { appendItems(trouble, allDataLength) {
if (data && data.trouble && data.trouble.constructor === Array) { // await this.wait(500);
data.trouble.forEach(item => { console.log(allDataLength);
item.data = JSON.parse(item.data); console.log(this.troubleList.length);
}); if (trouble && trouble.length > 0 ) {
for (let i = 0; i < trouble.length; i++) {
this.troubleList.push(trouble[i]);
this.displayLength = this.displayLength + 1;
}
// this.infiniteScroll.disabled = false;
this.page = this.page + 1;
} else {
// this.infiniteScroll.disabled = true;
} }
this.detailInfo.trouble = data.trouble;
this.detailInfoLength = data.trouble.length;
} }
ionViewWillLeave() {
// clearInterval(this.commTmr); loadData(event) {
setTimeout(() => {
console.log('loadData Done');
this.getTroubleList(false);
this.getAlarmList(false);
event.target.complete();
// App logic to determine if all data is loaded
// and disable the infinite scroll
// if (data.length == 1000) {
// event.target.disabled = true;
// }
}, 500);
} }
segmentChanged(ev: any) { segmentChanged(ev: any) {
console.log('segment changed');
this.page = 1;
this.disposeState = ''; this.disposeState = '';
this.fieldDeviceType = ''; this.fieldDeviceType = '';
this.detailInfo = {};
this.troubleList = [];
this.infiniteScroll.disabled = false;
if (ev.target.value === 'alarm') { if (ev.target.value === 'alarm') {
this.displayArea = 'alarm'; this.displayArea = 'alarm';
this.getAlarmList(); this.getAlarmList(true);
} else { } else {
this.displayArea = 'trouble'; this.displayArea = 'trouble';
this.getTroubleList(); this.getTroubleList(true);
} }
} }
...@@ -294,8 +283,14 @@ export class EnvAlarmDetailPage implements OnInit { ...@@ -294,8 +283,14 @@ export class EnvAlarmDetailPage implements OnInit {
} }
refresh() { refresh() {
this.getTroubleList(); console.log('refresh');
this.getAlarmList(); this.detailInfo = {};
this.troubleList = [];
this.page = 1;
this.displayLength = 0;
this.infiniteScroll.disabled = false;
this.getTroubleList(false);
this.getAlarmList(false);
} }
wait(time) { wait(time) {
......
src/app/envCtrl/env-alarm/env-alarm.page.html
View file @ 6c74cf51
...@@ -10,13 +10,25 @@ ...@@ -10,13 +10,25 @@
<ion-card-header style="padding-top: 3px; padding-bottom: 3px;"> <ion-card-header style="padding-top: 3px; padding-bottom: 3px;">
<ion-card-title style="display: inline-block" style="width:100%"> <ion-card-title style="display: inline-block" style="width:100%">
<div class="cardTitle"> <div class="cardTitle">
<i class="vo v-fangzi"></i> <div style="width: 65%; padding-right: 5px; display: inline-block">
<span style="margin-left:10px">{{item.fieldRegionName}}</span> <i class="vo v-fangzi"></i>
<span class="alarmNum">{{item.total}}</span> <span style="margin-left:10px">{{item.fieldRegionName}}</span>
<span style="float:right; padding-right: 5px;"> <span class="alarmNum">{{item.total}}</span>
<!--<ion-popover-controller></ion-popover-controller>--> </div>
<a (click)="presentPopover(item)" [id]="item.fieldRegionNo">近一年</a> <div style="width: 30%; padding-right: 5px; display: inline-block; font-size: 13px; color:#61C7CC">
</span> <ion-select interface="popover" placeholder="" [(ngModel)]="curInterval" (ionChange)="dismissPopover(curInterval, item)">
<ion-select-option value="12" class="popLabel">近一年</ion-select-option>
<ion-select-option value="6" class="popLabel">近六个月</ion-select-option>
<ion-select-option value="3" class="popLabel">近三个月</ion-select-option>
<ion-select-option value="1" class="popLabel">近一个月</ion-select-option>
</ion-select>
</div>
<!--<span style="float:right; padding-right: 5px;">-->
<!--&lt;!&ndash;<ion-popover-controller></ion-popover-controller>&ndash;&gt;-->
<!--&lt;!&ndash;<a (click)="presentPopover(item)" [id]="item.fieldRegionNo">近一年</a>&ndash;&gt;-->
<!---->
<!--</span>-->
</div> </div>
</ion-card-title> </ion-card-title>
</ion-card-header> </ion-card-header>
......
src/app/envCtrl/env-alarm/env-alarm.page.ts
View file @ 6c74cf51
...@@ -12,48 +12,6 @@ import {Load} from '../../service/load'; ...@@ -12,48 +12,6 @@ import {Load} from '../../service/load';
export class EnvAlarmPage implements OnInit { export class EnvAlarmPage implements OnInit {
alarmItems = []; alarmItems = [];
// TODO 测试用数据
// alarmItems = [{
// factoryNo: 'FN108050436279648256',
// factoryName: '一厂',
// fieldRegionNo: 'FRN110268534764224511',
// fieldRegionName: '1号牛舍',
// devErr: 36,
// devErrTotal: 55,
// alarm: 20,
// alarmTotal: 55,
// total: 56
// }, {
// factoryNo: 'FN108050436279648256',
// factoryName: '一厂',
// fieldRegionNo: 'FRN110268534764224512',
// fieldRegionName: '2号牛舍',
// devErr: 36,
// devErrTotal: 55,
// alarm: 20,
// alarmTotal: 55,
// total: 56
// }, {
// factoryNo: 'FN108050436279648256',
// factoryName: '一厂',
// fieldRegionNo: 'FRN110268534764224513',
// fieldRegionName: '3号牛舍',
// devErr: 36,
// devErrTotal: 55,
// alarm: 20,
// alarmTotal: 55,
// total: 56
// }, {
// factoryNo: 'FN108050436279648256',
// factoryName: '一厂',
// fieldRegionNo: 'FRN110268534764224514',
// fieldRegionName: '4号牛舍',
// devErr: 36,
// devErrTotal: 55,
// alarm: 20,
// alarmTotal: 55,
// total: 56
// }];
curFieldRegion = {factoryNo: '', curFieldRegion = {factoryNo: '',
factoryName: '', factoryName: '',
...@@ -65,36 +23,36 @@ export class EnvAlarmPage implements OnInit { ...@@ -65,36 +23,36 @@ export class EnvAlarmPage implements OnInit {
alarmTotal: 0, alarmTotal: 0,
total: 0}; total: 0};
curInterval = 12; curInterval = '12';
popoverElement = null; popoverElement = null;
constructor(private api: Api, public nav: NavController, private load: Load) { constructor(private api: Api, public nav: NavController, private load: Load) {
customElements.define('popover-page', class ModalContent extends HTMLElement { // customElements.define('popover-page', class ModalContent extends HTMLElement {
connectedCallback() { // connectedCallback() {
this.innerHTML = ` // this.innerHTML = `
<ion-list class="popContent"> // <ion-list class="popContent">
<ion-radio-group style=""> // <ion-radio-group style="">
<ion-item style=""> // <ion-item style="">
<ion-label class="popLabel">近一年</ion-label> // <ion-label class="popLabel">近一年</ion-label>
<ion-radio slot="start" value="12" checked id="popSelect1"></ion-radio> // <ion-radio slot="start" value="12" checked id="popSelect1"></ion-radio>
</ion-item> // </ion-item>
<ion-item style=""> // <ion-item style="">
<ion-label class="popLabel">近六个月</ion-label> // <ion-label class="popLabel">近六个月</ion-label>
<ion-radio slot="start" value="6" id="popSelect2"></ion-radio> // <ion-radio slot="start" value="6" id="popSelect2"></ion-radio>
</ion-item> // </ion-item>
<ion-item style=""> // <ion-item style="">
<ion-label class="popLabel">近三个月</ion-label> // <ion-label class="popLabel">近三个月</ion-label>
<ion-radio slot="start" value="3" id="popSelect3"></ion-radio> // <ion-radio slot="start" value="3" id="popSelect3"></ion-radio>
</ion-item> // </ion-item>
<ion-item style=""> // <ion-item style="">
<ion-label class="popLabel">近一个月</ion-label> // <ion-label class="popLabel">近一个月</ion-label>
<ion-radio slot="start" value="1" id="popSelect4"></ion-radio> // <ion-radio slot="start" value="1" id="popSelect4"></ion-radio>
</ion-item> // </ion-item>
</ion-radio-group> // </ion-radio-group>
</ion-list> // </ion-list>
`; // `;
} // }
}); // });
} }
...@@ -102,7 +60,11 @@ export class EnvAlarmPage implements OnInit { ...@@ -102,7 +60,11 @@ export class EnvAlarmPage implements OnInit {
this.init(); this.init();
} }
ionViewWillLeave() {
}
init () { init () {
this.curInterval = '12';
this.api.alert.getAll([{fieldRegionType: '牛舍'}, (data) => { this.api.alert.getAll([{fieldRegionType: '牛舍'}, (data) => {
if (data.total > 0) { if (data.total > 0) {
if (data.rows && data.rows.constructor === Array) { if (data.rows && data.rows.constructor === Array) {
...@@ -113,7 +75,7 @@ export class EnvAlarmPage implements OnInit { ...@@ -113,7 +75,7 @@ export class EnvAlarmPage implements OnInit {
} }
toControl(one, displayArea) { toControl(one, displayArea) {
const query = '/env-alarmDetail?no=' + one.fieldRegionNo const query = '/env-alarmDetail?no=' + one.fieldRegionNo
+ '&displayArea=' + displayArea + '&interval=' + this.curInterval; + '&displayArea=' + displayArea + '&interval=' + this.curInterval.toString();
// this.tf.transfer({ // this.tf.transfer({
// url: '/' + one.url, // url: '/' + one.url,
// query: query, // query: query,
...@@ -123,35 +85,36 @@ export class EnvAlarmPage implements OnInit { ...@@ -123,35 +85,36 @@ export class EnvAlarmPage implements OnInit {
this.nav.navigateForward(query); this.nav.navigateForward(query);
} }
async presentPopover(fieldRegionInfo) { // async presentPopover(fieldRegionInfo) {
this.curFieldRegion = fieldRegionInfo; // this.curFieldRegion = fieldRegionInfo;
this.popoverElement = Object.assign(document.createElement('ion-popover'), { // this.popoverElement = Object.assign(document.createElement('ion-popover'), {
component: 'popover-page', // component: 'popover-page',
event: event, // event: event,
cssClass: ['width: 150px'] // cssClass: ['width: 150px']
}); // });
document.body.appendChild(this.popoverElement); // document.body.appendChild(this.popoverElement);
return await this.popoverElement.present().then( (res) => { // return await this.popoverElement.present().then( (res) => {
document.getElementById('popSelect1').onclick = () => { // document.getElementById('popSelect1').onclick = () => {
this.dismissPopover(12); // this.dismissPopover(12);
this.curInterval = 12; // this.curInterval = 12;
}; // };
document.getElementById('popSelect2').onclick = () => { // document.getElementById('popSelect2').onclick = () => {
this.dismissPopover(6); // this.dismissPopover(6);
this.curInterval = 6; // this.curInterval = 6;
}; // };
document.getElementById('popSelect3').onclick = () => { // document.getElementById('popSelect3').onclick = () => {
this.dismissPopover(3); // this.dismissPopover(3);
this.curInterval = 3; // this.curInterval = 3;
}; // };
document.getElementById('popSelect4').onclick = () => { // document.getElementById('popSelect4').onclick = () => {
this.dismissPopover(1); // this.dismissPopover(1);
this.curInterval = 1; // this.curInterval = 1;
}; // };
}); // });
} // }
dismissPopover(interval) { dismissPopover(interval, fieldRegionInfo) {
this.curFieldRegion = fieldRegionInfo;
this.load.toLoad('加载中...', false); this.load.toLoad('加载中...', false);
const condition = { const condition = {
fieldRegionNo: this.curFieldRegion.fieldRegionNo, fieldRegionNo: this.curFieldRegion.fieldRegionNo,
...@@ -170,10 +133,10 @@ export class EnvAlarmPage implements OnInit { ...@@ -170,10 +133,10 @@ export class EnvAlarmPage implements OnInit {
} }
this.load.offLoad(); this.load.offLoad();
}]); }]);
if (this.popoverElement) { // if (this.popoverElement) {
this.popoverElement.dismiss().then(() => { this.popoverElement = null; }); // this.popoverElement.dismiss().then(() => { this.popoverElement = null; });
} // }
this.displayInterval(interval); // this.displayInterval(interval);
} }
getStartTime(interval) { getStartTime(interval) {
......
tslint.json
View file @ 6c74cf51
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
"label-position": true, "label-position": true,
"max-line-length": [ "max-line-length": [
true, true,
200 300
], ],
"member-access": false, "member-access": false,
"member-ordering": [ "member-ordering": [
......
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