Skip to content

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

牛舍告警一览页面：修改告警时间段为可选（1年 6个月 3个月 1个月）

parent aa6fed30
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 33 deletions
src/app/envCtrl/env-alarm/env-alarm.page.html
View file @ b93536c7
......@@ -15,7 +15,7 @@
<span class="alarmNum">{{item.total}}</span>
<span style="float:right; padding-right: 20px;">
<!--<ion-popover-controller></ion-popover-controller>-->
<a (click)="presentPopover($event)">近一年</a>
<a (click)="presentPopover(item)">近一年</a>
</span>
</div>
</ion-card-title>
......@@ -24,14 +24,11 @@
<div class="sub" style="text-align: center; " style="width:100%">
<!--<ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
<ion-row style="width:100%">
<ion-col style="padding: 5px; width:51%; border-right:1px solid lightgray">
<ion-col style="padding: 5px; width:50%; border-right:1px solid lightgray">
<div>
<div style="height: 60px; float:left; width: 40%">
<ion-icon name="ios-heart" style="padding: auto"></ion-icon>
</div>
<div style="height: 60px; float:left; width: 60%">
<div style="height: 60px; width: 100%">
<div style="height: 35px; float:left;width: 100%">
<span class="label">未解决</span><span style="color:#d33939; font-size:24px;">{{item.devErr}}</span>
<span class="label">未解决故障数</span><span style="color:#d33939; font-size:24px;">{{item.devErr}}</span>
</div>
<div style="height: 25px; float:left;width: 100%">
<span class="label">总数</span><span>{{item.devErrTotal}}</span>
......@@ -40,14 +37,11 @@
</div>
</ion-col>
<ion-col style="padding: 5px; width:48%">
<ion-col style="padding: 5px; width:50%">
<div>
<div style="height: 60px; float:left; width: 40%">
<ion-icon name="ios-heart" style="padding: auto"></ion-icon>
</div>
<div style="height: 60px; float:left; width: 60%">
<div style="height: 60px; width: 100%">
<div style="height: 35px; float:left;width: 100%">
<span class="label">未解决</span><span style="color:#f0ca45; font-size:24px;">{{item.alarm}}</span>
<span class="label">未解决预警数</span><span style="color:#f0ca45; font-size:24px;">{{item.alarm}}</span>
</div>
<div style="height: 25px; float:left;width: 100%">
<span class="label">总数</span><span>{{item.alarmTotal}}</span>
......@@ -58,6 +52,46 @@
</ion-row>
</div>
</ion-card-content>
<!-- <ion-card-content style="padding-top: 5px; padding-bottom: 5px;">-->
<!-- <div class="sub" style="text-align: center; " style="width:100%">-->
<!-- &lt;!&ndash;<ion-icon name="ios-heart" style="padding: auto"></ion-icon>&ndash;&gt;-->
<!-- <ion-row style="width:100%">-->
<!-- <ion-col style="padding: 5px; width:51%; border-right:1px solid lightgray">-->
<!-- <div>-->
<!-- <div style="height: 60px; float:left; width: 40%">-->
<!-- <ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
<!-- </div>-->
<!-- <div style="height: 60px; float:left; width: 60%">-->
<!-- <div style="height: 35px; float:left;width: 100%">-->
<!-- <span class="label">未解决</span><span style="color:#d33939; font-size:24px;">{{item.devErr}}</span>-->
<!-- </div>-->
<!-- <div style="height: 25px; float:left;width: 100%">-->
<!-- <span class="label">总数</span><span>{{item.devErrTotal}}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </ion-col>-->
<!-- <ion-col style="padding: 5px; width:48%">-->
<!-- <div>-->
<!-- <div style="height: 60px; float:left; width: 40%">-->
<!-- <ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
<!-- </div>-->
<!-- <div style="height: 60px; float:left; width: 60%">-->
<!-- <div style="height: 35px; float:left;width: 100%">-->
<!-- <span class="label">未解决</span><span style="color:#f0ca45; font-size:24px;">{{item.alarm}}</span>-->
<!-- </div>-->
<!-- <div style="height: 25px; float:left;width: 100%">-->
<!-- <span class="label">总数</span><span>{{item.alarmTotal}}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </ion-col>-->
<!-- </ion-row>-->
<!-- </div>-->
<!-- </ion-card-content>-->
</ion-card>
</ion-content>
src/app/envCtrl/env-alarm/env-alarm.page.scss
View file @ b93536c7
......@@ -79,8 +79,11 @@
}
.label {
width: 55px;
width: 90px;
display: inline-block;
font-size: 14px;
text-align: right;
margin-right: 10px;
}
.cardTitle {
......
src/app/envCtrl/env-alarm/env-alarm.page.ts
View file @ b93536c7
import { Component, OnInit } from '@angular/core';
import {Api} from '../../service/api';
import {NavController} from '@ionic/angular';
import {Load} from '../../service/load';
@Component({
......@@ -52,38 +53,61 @@ export class EnvAlarmPage implements OnInit {
total: 56
}];
constructor(private api: Api, public nav: NavController) {
curFieldRegion = {factoryNo: '',
factoryName: '',
fieldRegionNo: '',
fieldRegionName: '',
devErr: 0,
devErrTotal: 0,
alarm: 0,
alarmTotal: 0,
total: 0};
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>
<ion-list-header>Ionic</ion-list-header>
<ion-item button>Learn Ionic</ion-item>
<ion-item button>Documentation</ion-item>
<ion-item button>Showcase</ion-item>
<ion-item button>GitHub Repo</ion-item>
</ion-list>
<ion-button expand="block" onClick="dismissPopover()">确认</ion-button>
<ion-list>
<ion-radio-group>
<ion-item>
<ion-label>近一年</ion-label>
<ion-radio slot="start" value="12" checked id="popSelect1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>近六个月</ion-label>
<ion-radio slot="start" value="6" id="popSelect2"></ion-radio>
</ion-item>
<ion-item>
<ion-label>近三个月</ion-label>
<ion-radio slot="start" value="3" id="popSelect3"></ion-radio>
</ion-item>
<ion-item>
<ion-label>近一个月</ion-label>
<ion-radio slot="start" value="1" id="popSelect4"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
`;
}
});
}
ngOnInit() {
this.init();
}
init () {
this.api.alert.getAll([{fieldRegionType: '牛舍'}, (data) => {
if (data.total > 0) {
if (data.rows && data.rows.constructor === Array) {
this.alarmItems = data.rows;
// rows.map((value, index) => {
// // this.totalAlert = this.totalAlert + value.devErr + value.alarm;
//
// });
}
}
}]);
}
toControl(one) {
const query = '/env-alarmDetail?name=' + one.fieldRegionName + '&no=' + one.fieldRegionNo;
// this.tf.transfer({
......@@ -95,12 +119,56 @@ export class EnvAlarmPage implements OnInit {
this.nav.navigateForward(query);
}
async presentPopover(ev) {
const popoverElement = Object.assign(document.createElement('ion-popover'), {
async presentPopover(fieldRegionInfo) {
this.curFieldRegion = fieldRegionInfo;
this.popoverElement = Object.assign(document.createElement('ion-popover'), {
component: 'popover-page',
event: event
});
document.body.appendChild(popoverElement);
return await popoverElement.present();
document.body.appendChild(this.popoverElement);
return await this.popoverElement.present().then( (res) => {
document.getElementById('popSelect1').onclick = () => {
this.dismissPopover(12);
};
document.getElementById('popSelect2').onclick = () => {
this.dismissPopover(6);
};
document.getElementById('popSelect3').onclick = () => {
this.dismissPopover(3);
};
document.getElementById('popSelect4').onclick = () => {
this.dismissPopover(1);
};
});
}
dismissPopover(interval) {
this.load.toLoad('加载中...', false);
const condition = {fieldRegionNo: this.curFieldRegion.fieldRegionNo,
startTime: this.getStartTime(interval),
stopTime: new Date().valueOf()
};
console.log(condition.startTime);
console.log(condition.stopTime);
this.api.alarm.getAlarmByTerm([condition, (data) => {
if (data && data.fieldRegionNo) {
this.curFieldRegion = data;
this.alarmItems.forEach(item => {
if (item.fieldRegionNo === this.curFieldRegion.fieldRegionNo) {
item = this.curFieldRegion;
}
});
}
this.load.offLoad();
}]);
if (this.popoverElement) {
this.popoverElement.dismiss().then(() => { this.popoverElement = null; });
}
}
getStartTime(interval) {
const time = new Date().getTime() - ( 1000 * 3600 * 24 * interval );
return time;
}
}
src/app/service/api.ts
View file @ b93536c7
......@@ -56,6 +56,7 @@ export class Api {
getAll: (data) => this.trans('post', '/alert/getAll', data),
// 获取告警列表的数据
getByTerm: (data) => this.trans('post', '/alert/getByTerm', data),
getAlarmByTerm: (data) => this.trans('post', '/alert/getAlarmByTerm', data),
}
......
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