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 @@
</ion-header>
<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-label>故障</ion-label>
</ion-segment-button>
......@@ -20,12 +20,12 @@
</ion-segment>
<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="0" class="popLabel">待修复</ion-select-option>
<ion-select-option value="1" class="popLabel">已修复</ion-select-option>
</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>
......@@ -37,13 +37,13 @@
<ion-item lines="full" class="ionItem" style="height: 45px;">
<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 style="width: 2%">
<span>~</span>
</div>
<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 style="width: 40%">
<div class="note" style="margin-bottom: 5px;">
......@@ -61,8 +61,9 @@
<div style="padding:5px;">
<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><img [src]="'../../assets/img/' + item.fieldDeviceType + '.png'" class="deviceIcon"></div>
<p style="font-size: 14px">{{item.troubleTime}}</p>
......@@ -82,8 +83,6 @@
<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 === 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 === 'alarm'" [src]="'../../assets/img/disposeState' + item.disposeState + '.png'" class="warnIcon">
......@@ -94,14 +93,17 @@
</div>
</div>
</div>
<ion-list id="list"></ion-list>
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
<ion-infinite-scroll-content loading-spinner="bubbles" loading-text="">
<!--<ion-list id="troubleList"></ion-list>-->
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="加载中...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</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 {Api} from '../../service/api';
import {AlertController} from '@ionic/angular';
import {DatePipe} from '@angular/common';
import { IonInfiniteScroll } from '@ionic/angular';
@Component({
selector: 'v-env-alarm-detail',
......@@ -11,7 +12,7 @@ import {DatePipe} from '@angular/common';
})
export class EnvAlarmDetailPage implements OnInit {
displayArea = 'trouble';
displayArea = '';
isTroubleDis = false;
isAlarmDis = false;
fieldRegionNo = '';
......@@ -19,17 +20,20 @@ export class EnvAlarmDetailPage implements OnInit {
fieldRegionGroup = '';
detailInfo: any = {};
detailInfoLength = 0;
troubleList = [];
// detailInfoLength = 0;
disposeState = '';
fieldDeviceType = '';
startTime = null;
stopTime = null;
curInterval = 12;
item = {};
page = 0;
rows = 10;
displayLength = 0;
page = 1;
rows = 10;
// 工作模式
workModeSetting = {
'workMode': '风机',
......@@ -37,7 +41,10 @@ export class EnvAlarmDetailPage implements OnInit {
'workModeOld': '1'
};
infiniteScroll = document.getElementById('infinite-scroll');
// commTmr: any;
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
// @ViewChild('currentItem') currentItem;
constructor(private ac: ActivatedRoute, private api: Api,
private alterContoller: AlertController, private datePipe: DatePipe) {
......@@ -45,89 +52,45 @@ export class EnvAlarmDetailPage implements OnInit {
ngOnInit() {
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() {
this.page = 1;
this.displayLength = 0;
this.detailInfo = {};
this.troubleList = [];
this.ac.queryParams.subscribe((data) => {
console.log('init');
this.fieldRegionNo = data.no;
this.displayArea = data.displayArea;
this.curInterval = data.interval;
this.setDateInterval(this.curInterval);
this.showArea(data.displayArea);
this.getData();
});
}
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;
}
this.getTroubleList(true);
this.getAlarmList(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) {
this.startTime = this.datePipe.transform(this.getStartTime(interval), 'yyyy-MM');
this.stopTime = this.datePipe.transform(new Date(), 'yyyy-MM');
......@@ -138,10 +101,9 @@ export class EnvAlarmDetailPage implements OnInit {
this.isAlarmDis = displayArea === 'alarm' ? true : false;
}
getTroubleList() {
getTroubleList(isInit) {
if (this.displayArea === 'trouble') {
this.isTroubleDis = true;
this.detailInfo = {};
const req = {
fieldRegionNo: this.fieldRegionNo,
startTime: this.parseTime(this.startTime, 'start'),
......@@ -156,23 +118,24 @@ export class EnvAlarmDetailPage implements OnInit {
req.fieldDeviceType = this.fieldDeviceType;
}
this.api.troubleLog.getByTerm(this.page, this.rows, [req, (data) => {
this.detailInfo = data;
// if (data.trouble && data.trouble.constructor === Array) {
// data.trouble.forEach((value) => {
// value.troubleTime = this.api.formatTime('yyyy-MM-dd hh:mm:ss', new Date(value.troubleTime));
// });
// this.setTrouble(data);
// }
this.appendItems();
if (data.trouble && data.trouble.constructor === Array) {
data.trouble.forEach((item) => {
item.data = JSON.parse(item.data);
item.troubleTime = this.api.formatTime('yyyy-MM-dd hh:mm:ss', new Date(item.troubleTime));
});
}
if (isInit) {
this.detailInfo = data;
}
this.appendItems(data.trouble, data.devErrTotal);
// this.detailInfoLength = data.trouble.length;
}]);
}
}
getAlarmList() {
getAlarmList(isInit) {
if (this.displayArea === 'alarm') {
this.isAlarmDis = true;
this.detailInfo = {};
const req = {
fieldRegionNo: this.fieldRegionNo,
startTime: this.parseTime(this.startTime, 'start'),
......@@ -187,39 +150,65 @@ export class EnvAlarmDetailPage implements OnInit {
req.fieldDeviceType = this.fieldDeviceType;
}
this.api.alarm.getCowshedAlarm(this.page, this.rows, [req, (data) => {
this.detailInfo = data;
if (data.trouble && data.trouble.constructor === Array) {
data.trouble.forEach((value) => {
value.troubleTime = this.api.formatTime('yyyy-MM-dd hh:mm:ss', new Date(value.alarmTime));
data.trouble.forEach((item) => {
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) {
if (data && data.trouble && data.trouble.constructor === Array) {
data.trouble.forEach(item => {
item.data = JSON.parse(item.data);
});
appendItems(trouble, allDataLength) {
// await this.wait(500);
console.log(allDataLength);
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) {
console.log('segment changed');
this.page = 1;
this.disposeState = '';
this.fieldDeviceType = '';
this.detailInfo = {};
this.troubleList = [];
this.infiniteScroll.disabled = false;
if (ev.target.value === 'alarm') {
this.displayArea = 'alarm';
this.getAlarmList();
this.getAlarmList(true);
} else {
this.displayArea = 'trouble';
this.getTroubleList();
this.getTroubleList(true);
}
}
......@@ -294,8 +283,14 @@ export class EnvAlarmDetailPage implements OnInit {
}
refresh() {
this.getTroubleList();
this.getAlarmList();
console.log('refresh');
this.detailInfo = {};
this.troubleList = [];
this.page = 1;
this.displayLength = 0;
this.infiniteScroll.disabled = false;
this.getTroubleList(false);
this.getAlarmList(false);
}
wait(time) {
......
src/app/envCtrl/env-alarm/env-alarm.page.html
View file @ 6c74cf51
......@@ -10,13 +10,25 @@
<ion-card-header style="padding-top: 3px; padding-bottom: 3px;">
<ion-card-title style="display: inline-block" style="width:100%">
<div class="cardTitle">
<i class="vo v-fangzi"></i>
<span style="margin-left:10px">{{item.fieldRegionName}}</span>
<span class="alarmNum">{{item.total}}</span>
<span style="float:right; padding-right: 5px;">
<!--<ion-popover-controller></ion-popover-controller>-->
<a (click)="presentPopover(item)" [id]="item.fieldRegionNo">近一年</a>
</span>
<div style="width: 65%; padding-right: 5px; display: inline-block">
<i class="vo v-fangzi"></i>
<span style="margin-left:10px">{{item.fieldRegionName}}</span>
<span class="alarmNum">{{item.total}}</span>
</div>
<div style="width: 30%; padding-right: 5px; display: inline-block; font-size: 13px; color:#61C7CC">
<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>
</ion-card-title>
</ion-card-header>
......
src/app/envCtrl/env-alarm/env-alarm.page.ts
View file @ 6c74cf51
......@@ -12,48 +12,6 @@ import {Load} from '../../service/load';
export class EnvAlarmPage implements OnInit {
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: '',
factoryName: '',
......@@ -65,36 +23,36 @@ export class EnvAlarmPage implements OnInit {
alarmTotal: 0,
total: 0};
curInterval = 12;
curInterval = '12';
popoverElement = null;
constructor(private api: Api, public nav: NavController, private load: Load) {
customElements.define('popover-page', class ModalContent extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-list class="popContent">
<ion-radio-group style="">
<ion-item style="">
<ion-label class="popLabel">近一年</ion-label>
<ion-radio slot="start" value="12" checked id="popSelect1"></ion-radio>
</ion-item>
<ion-item style="">
<ion-label class="popLabel">近六个月</ion-label>
<ion-radio slot="start" value="6" id="popSelect2"></ion-radio>
</ion-item>
<ion-item style="">
<ion-label class="popLabel">近三个月</ion-label>
<ion-radio slot="start" value="3" id="popSelect3"></ion-radio>
</ion-item>
<ion-item style="">
<ion-label class="popLabel">近一个月</ion-label>
<ion-radio slot="start" value="1" id="popSelect4"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
`;
}
});
// customElements.define('popover-page', class ModalContent extends HTMLElement {
// connectedCallback() {
// this.innerHTML = `
// <ion-list class="popContent">
// <ion-radio-group style="">
// <ion-item style="">
// <ion-label class="popLabel">近一年</ion-label>
// <ion-radio slot="start" value="12" checked id="popSelect1"></ion-radio>
// </ion-item>
// <ion-item style="">
// <ion-label class="popLabel">近六个月</ion-label>
// <ion-radio slot="start" value="6" id="popSelect2"></ion-radio>
// </ion-item>
// <ion-item style="">
// <ion-label class="popLabel">近三个月</ion-label>
// <ion-radio slot="start" value="3" id="popSelect3"></ion-radio>
// </ion-item>
// <ion-item style="">
// <ion-label class="popLabel">近一个月</ion-label>
// <ion-radio slot="start" value="1" id="popSelect4"></ion-radio>
// </ion-item>
// </ion-radio-group>
// </ion-list>
// `;
// }
// });
}
......@@ -102,7 +60,11 @@ export class EnvAlarmPage implements OnInit {
this.init();
}
ionViewWillLeave() {
}
init () {
this.curInterval = '12';
this.api.alert.getAll([{fieldRegionType: '牛舍'}, (data) => {
if (data.total > 0) {
if (data.rows && data.rows.constructor === Array) {
......@@ -113,7 +75,7 @@ export class EnvAlarmPage implements OnInit {
}
toControl(one, displayArea) {
const query = '/env-alarmDetail?no=' + one.fieldRegionNo
+ '&displayArea=' + displayArea + '&interval=' + this.curInterval;
+ '&displayArea=' + displayArea + '&interval=' + this.curInterval.toString();
// this.tf.transfer({
// url: '/' + one.url,
// query: query,
......@@ -123,35 +85,36 @@ export class EnvAlarmPage implements OnInit {
this.nav.navigateForward(query);
}
async presentPopover(fieldRegionInfo) {
this.curFieldRegion = fieldRegionInfo;
this.popoverElement = Object.assign(document.createElement('ion-popover'), {
component: 'popover-page',
event: event,
cssClass: ['width: 150px']
});
document.body.appendChild(this.popoverElement);
return await this.popoverElement.present().then( (res) => {
document.getElementById('popSelect1').onclick = () => {
this.dismissPopover(12);
this.curInterval = 12;
};
document.getElementById('popSelect2').onclick = () => {
this.dismissPopover(6);
this.curInterval = 6;
};
document.getElementById('popSelect3').onclick = () => {
this.dismissPopover(3);
this.curInterval = 3;
};
document.getElementById('popSelect4').onclick = () => {
this.dismissPopover(1);
this.curInterval = 1;
};
});
}
// async presentPopover(fieldRegionInfo) {
// this.curFieldRegion = fieldRegionInfo;
// this.popoverElement = Object.assign(document.createElement('ion-popover'), {
// component: 'popover-page',
// event: event,
// cssClass: ['width: 150px']
// });
// document.body.appendChild(this.popoverElement);
// return await this.popoverElement.present().then( (res) => {
// document.getElementById('popSelect1').onclick = () => {
// this.dismissPopover(12);
// this.curInterval = 12;
// };
// document.getElementById('popSelect2').onclick = () => {
// this.dismissPopover(6);
// this.curInterval = 6;
// };
// document.getElementById('popSelect3').onclick = () => {
// this.dismissPopover(3);
// this.curInterval = 3;
// };
// document.getElementById('popSelect4').onclick = () => {
// this.dismissPopover(1);
// this.curInterval = 1;
// };
// });
// }
dismissPopover(interval) {
dismissPopover(interval, fieldRegionInfo) {
this.curFieldRegion = fieldRegionInfo;
this.load.toLoad('加载中...', false);
const condition = {
fieldRegionNo: this.curFieldRegion.fieldRegionNo,
......@@ -170,10 +133,10 @@ export class EnvAlarmPage implements OnInit {
}
this.load.offLoad();
}]);
if (this.popoverElement) {
this.popoverElement.dismiss().then(() => { this.popoverElement = null; });
}
this.displayInterval(interval);
// if (this.popoverElement) {
// this.popoverElement.dismiss().then(() => { this.popoverElement = null; });
// }
// this.displayInterval(interval);
}
getStartTime(interval) {
......
tslint.json
View file @ 6c74cf51
......@@ -29,7 +29,7 @@
"label-position": true,
"max-line-length": [
true,
200
300
],
"member-access": false,
"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