Skip to content

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

修改牛舍告警详情页

parent 5fa8b162
Hide whitespace changes
Inline Side-by-side
Showing with 4713 additions and 172 deletions
src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.html
View file @ cc1ea61c
<ion-header style="background-color: #F3F4F4;" translucent="false"> <ion-header translucent="false">
<ion-toolbar> <ion-toolbar color="secondary">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button text="" ></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title class="title">{{fieldRegionName}}告警详情页</ion-title> <ion-title class="appTitle">{{fieldRegionName}}告警详情</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<!--<div class="mainCon">-->
<!--</div>-->
<ion-content color="light" style="background-color: #F3F4F4;"> <ion-content color="light" style="background-color: #F3F4F4;">
<ion-segment scrollable style="position: sticky;" (ionChange)="segmentChanged($event)"> <ion-segment scrollable style="position: sticky; margin-top:10px;" color="secondary" (ionChange)="segmentChanged($event)">
<ion-segment-button value="trouble"> <ion-segment-button value="trouble" [checked]="isTroubleDis">
<ion-label>故障</ion-label> <ion-label>故障</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button checked value="alarm"> <ion-segment-button value="alarm" [checked]="isAlarmDis">
<ion-label>预警</ion-label> <ion-label>预警</ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<ion-item lines="full">
<ion-label>预警数量</ion-label> <ion-label>2/3</ion-label> <ion-item lines="full" class="ionItem" color="gray">
<ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="workModeSetting.workMode" [(value)]="workModeSetting.workMode" (ionChange)="workModeEvent()"> <ion-select interface="popover" placeholder="状态">
<ion-select-option value="全部">全部</ion-select-option> <ion-select-option value="waitFix" class="popLabel">待修复</ion-select-option>
<ion-select-option value="风机">风机</ion-select-option> <ion-select-option value="fixed" class="popLabel">已修复</ion-select-option>
<ion-select-option value="卷帘">卷帘</ion-select-option> </ion-select>
<ion-select-option value="照明">照明</ion-select-option> <ion-select interface="popover" placeholder="类型">
<ion-select-option value="environments" class="popLabel">环境</ion-select-option>
<ion-select-option value="fan" class="popLabel">风机</ion-select-option>
<ion-select-option value="shower" class="popLabel">喷淋</ion-select-option>
<ion-select-option value="light" class="popLabel">照明</ion-select-option>
<ion-select-option value="waterChannel" class="popLabel">水槽</ion-select-option>
</ion-select> </ion-select>
</ion-item> </ion-item>
<div class="jazz-timeline-wrapper"> <ion-item lines="full" class="ionItem" style="height: 45px;">
<div class="jazz-timeline thin-timeline"> <div style="width: 20%">
<ion-datetime displayFormat="YYYY/MM" [(ngModel)]="startTime"></ion-datetime>
</div>
<div style="width: 2%">
<span>~</span>
</div>
<div style="width: 38%">
<ion-datetime displayFormat="YYYY/MM" [(ngModel)]="stopTime" style="margin-left: 3px;"></ion-datetime>
</div>
<div style="width: 40%">
<div class="note" style="margin-bottom: 5px;">
<span style="text-align: right; padding-right:5px; width:60%;">未解决数</span>
<span style="width:40%" *ngIf="isTroubleDis">{{detailInfo.devErr}}</span>
<span style="width:40%" *ngIf="isAlarmDis">{{detailInfo.alarm}}</span>
</div>
<div class="note">
<span style="text-align: right; padding-right:5px; width:60%;">总数</span>
<span style="width:40%" *ngIf="isTroubleDis">{{detailInfo.devErrTotal}}</span>
<span style="width:40%" *ngIf="isAlarmDis">{{detailInfo.alarmTotal}}</span>
</div>
</div>
</ion-item>
<div class="timeline-post" *ngFor="let a of showAlarmList;">
<div class="timeline-icon icon-larger iconbg-turqoise icon-color-white"> <div style="padding:5px;">
<div class="icon-placeholder">Dec <span>25</span></div> <div class="detailContent">
<div class="timeline-bar"></div> <div class="timeline">
</div> <div class="entry" *ngFor="let item of detailInfo.trouble">
<div class="timeline-content"> <div class="title">
<h1 class="content-title"> {{a.description}} </h1> <h3>2014 - Present</h3>
<div class="content-details"> <p>{{item.troubleTime}}</p>
<p> {{a.troubleTime}} </p>
<ion-button color="primary" size="small" style="display: inline-block" *ngIf="a.disposeState === 0" (click)='onRecvClick(a)'>确认修复</ion-button>
<i class="vo v-yichuli" *ngIf="a.disposeState === 1"></i>
</div> </div>
</div><!-- timeline content --> <div class="body">
</div><!-- .timeline-post --> <h3>{{item.description}}</h3>
<p>
<span *ngIf="item.data.temp">温度: {{item.data.temp}} ℃</span>
<span *ngIf="item.data.humi">湿度: {{item.data.humi}} %</span>
<span *ngIf="item.data.heatStressLevel">热应激等级: {{item.data.heatStressLevel}}</span>
<span *ngIf="item.data.liquidPump">供液泵压力: {{item.data.liquidPump}} MPa</span>
<span *ngIf="item.data.press">电磁阀压力: {{item.data.press}} MPa</span>
<span *ngIf="item.data.NH3">氨气: {{item.data.NH3}} ppm</span>
</p>
</div>
</div>
</div>
</div> </div>
</div> </div>
<!--<div class="jazz-timeline-wrapper">-->
<!--<div class="jazz-timeline multiline-timeline thin-timeline">-->
<!--<div class="timeline-post opal-post opal-trail" >-->
<!--<div class="timeline-meta">-->
<!--<div class="meta-details"></div>-->
<!--</div>-->
<!--<div class="timeline-icon icon-dot-full">-->
<!--<div class="timeline-bar"></div>-->
<!--</div>-->
<!--<div class="timeline-content">-->
<!--<div style="width: 60%">-->
<!--<h2 class="content-title"> {{item.description}} </h2>-->
<!--<div class="content-details">-->
<!--<p> {{item.troubleTime}} </p>-->
<!--</div>-->
<!--</div>-->
<!--<div style="width: 40%">-->
<!--<i class="vo v-yichuli" *ngIf="item.disposeState === 1"></i>-->
<!--</div>-->
<!--</div>&lt;!&ndash; timeline content &ndash;&gt;-->
<!--</div>&lt;!&ndash; .timeline-post &ndash;&gt;-->
<!--</div>-->
<!--</div>-->
</ion-content> </ion-content>
src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.scss
View file @ cc1ea61c
...@@ -16,8 +16,128 @@ ...@@ -16,8 +16,128 @@
//margin-bottom: 90px; //margin-bottom: 90px;
} }
.title{ .appTitle{
text-align: center; text-align: center;
padding-left: 0px padding-left: 0px
} }
.note {
width: 100%;
text-align: right;
font-size:14px;
padding-right: 5px;
}
.ionItem{
font-size: 13px;
--padding-start: 5px;
--padding-end: 5px;
height: 35px;
}
.popLabel {
width: 120px;
font-size: 15px;
--padding-start: 5px;
--padding-end: 5px;
margin-bottom:5px;
margin-right:5px;
}
.popContent {
width: 135px !important;
margin-bottom:5px;
margin-right:5px;
--padding-start: 5px;
--padding-end: 5px;
}
.detailContent {
// background: linear-gradient(55deg, #4E75B9 30%, #5CBF98 90%);
background: #efeff4;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
// padding: 12vh 100px;
// font-family: 'Source Sans Pro', arial, sans-serif;
// font-weight: 300;
color: #333;
box-sizing: border-box;
}
.detailContent * {
box-sizing: border-box;
}
.timeline {
width: 100%;
background: #fff;
padding-top: 25px;
// padding: 100px 50px;
position: relative;
box-shadow: 0.5rem 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
}
.timeline:before {
content: '';
position: absolute;
top: 0px;
left: calc(37% + 15px);
bottom: 0px;
width: 4px;
background: #ddd;
}
.timeline:after {
content: "";
display: table;
clear: both;
}
.entry {
clear: both;
text-align: left;
position: relative;
}
.entry .title {
margin-bottom: .5em;
float: left;
width: 37%;
padding-right: 30px;
text-align: right;
position: relative;
}
.entry .title:before {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 4px solid #28C0C6;
background-color: #28C0C6;
border-radius: 100%;
top: 15%;
right: -24px;
z-index: 99;
}
.entry .title h3 {
margin: 0;
font-size: 120%;
}
.entry .title p {
margin: 0;
font-size: 100%;
}
.entry .body {
margin: 0 0 20px;
float: right;
width: 60%;
padding-left: 30px;
}
.entry .body p {
line-height: 1.4em;
}
.entry .body p:first-child {
margin-top: 0;
font-weight: 400;
}
src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.ts
View file @ cc1ea61c
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} 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';
@Component({ @Component({
selector: 'v-env-alarm-detail', selector: 'v-env-alarm-detail',
templateUrl: './env-alarm-detail.page.html', templateUrl: './env-alarm-detail.page.html',
styleUrls: ['./env-alarm-detail.page.scss'], styleUrls: ['./env-alarm-detail.page.scss'],
}) })
export class EnvAlarmDetailPage implements OnInit { export class EnvAlarmDetailPage implements OnInit {
fieldRegionNo = ''; displayArea = 'trouble';
fieldRegionName = ''; isTroubleDis = false;
fieldRegionGroup = ''; isAlarmDis = false;
fieldRegionNo = '';
fieldRegionName = '';
fieldRegionGroup = '';
mSelAlarm; detailInfo: any = {};
showAlarmList = []; startTime = null;
alarmList = []; stopTime = null;
troubleList = []; curInterval = 12;
// 工作模式 // 工作模式
workModeSetting = { 'workMode' : '风机', workModeSetting = {
'DeviceNo' : '', 'workMode': '风机',
'workModeOld' : '1'}; 'DeviceNo': '',
'workModeOld': '1'
reqDummy = { };
"fieldRegionNo":"FRN110268534764224512",
"fieldRegionName":"1号牛舍", // commTmr: any;
"startTime":1565165000000,
"stopTime":156516501230000, constructor(private ac: ActivatedRoute, private api: Api,
"devErr":36, private alterContoller: AlertController, private datePipe: DatePipe) {
"devErrTotal":55, }
"trouble":[{
"troubleLogNo":"123415646196875456", ngOnInit() {
"fieldDeviceName":"一号风机组", this.init();
"fieldDeviceType":"风机", // this.commTmr = window.setInterval(() => {
"description":"一号风机组故障", // console.log(1);
"troubleTime":1565165000000, // if (this.displayArea === 'trouble') {
"disposeState":0, // this.showAlarmList = this.troubleList;
"isReal":0 // } else {
}] // this.showAlarmList = this.alarmList;
// }
//
// }, 1000) ;
}
init() {
this.ac.queryParams.subscribe((data) => {
this.fieldRegionNo = data.no;
this.displayArea = data.displayArea;
this.curInterval = data.interval;
this.setDateInterval(this.curInterval);
this.showArea(data.displayArea);
this.getTroubleList();
this.getAlarmList();
});
}
setDateInterval(interval) {
this.startTime = this.datePipe.transform(this.getStartTime(interval), 'yyyy-MM');
this.stopTime = this.datePipe.transform(new Date(), 'yyyy-MM');
}
showArea(displayArea) {
this.isTroubleDis = displayArea === 'trouble' ? true : false;
this.isAlarmDis = displayArea === 'alarm' ? true : false;
} }
commTmr: any; getTroubleList() {
if (this.displayArea === 'trouble') {
constructor(private ac: ActivatedRoute, private api: Api, private alterContoller: AlertController) { } this.detailInfo = {};
const req = {
ngOnInit() { fieldRegionNo: this.fieldRegionNo,
this.ac.queryParams.subscribe((data) => { startTime: this.startTime,
this.fieldRegionNo = data.no; stopTime: this.stopTime
this.fieldRegionName = data.name; };
}); this.api.troubleLog.getByTerm([req, (data) => {
// ---------------------------------------------------------
this.mSelAlarm = 'trouble'; // TODO 测试用数据
data = {
this.getTroubletList(); fieldRegionNo: 'FRN110268534764224512',
this.getAlarmList(); fieldRegionName: '1号牛舍',
startTime: 1565165000000,
this.commTmr = window.setInterval(() => { stopTime: 156516501230000,
console.log(1); devErr: 11,
if(this.mSelAlarm === 'trouble'){ devErrTotal: 33,
this.showAlarmList = this.troubleList; trouble: [{
} else { troubleLogNo: '123415646196875456',
this.showAlarmList = this.alarmList; fieldDeviceName: '一号风机组',
} fieldDeviceType: '风机',
description: '一号风机组故障',
}, 1000) ; troubleTime: 1565165000000,
} data: {liquidPump: 25, press: 50},
disposeState: 0
getTroubletList(){ },{
const req = {'fieldRegionNo': this.fieldRegionNo, troubleLogNo: '123415646196875456',
'startTime':new Date().getTime(), fieldDeviceName: '一号风机组',
'stopTime' : new Date().getTime() - 7 * 24 * 3600 * 1000}; fieldDeviceType: '风机',
this.api.troubleLog.getByTerm([req,(data)=> { description: '一号风机组故障',
console.log(data); troubleTime: 1565165000000,
data = this.reqDummy; data: {liquidPump: 25, press: 50},
disposeState: 0
if(data.trouble && data.trouble.constructor === Array){ }, {
this.troubleList = []; troubleLogNo: '123415646196875456',
data.trouble.map((value, index) => { fieldDeviceName: '一号风机组',
let val = value; fieldDeviceType: '风机',
val.troubleTime = this.api.formatTime('yyyy-MM-dd hh:mm:ss', new Date(value.troubleTime)) description: '一号风机组故障',
this.troubleList.push(val); troubleTime: 1565165000000,
}) data: {liquidPump: 25, press: 50},
} disposeState: 0
}]); }, {
} troubleLogNo: '123415646196875456',
fieldDeviceName: '一号风机组',
getAlarmList(){ fieldDeviceType: '风机',
const req = {'fieldRegionNo': this.fieldRegionNo, description: '一号风机组故障',
'startTime':new Date().getTime(), troubleTime: 1565165000000,
'stopTime' : new Date().getTime() - 7 * 24 * 3600 * 1000}; data: {liquidPump: 25, press: 50},
this.api.alarm.getCowshedAlarm([req,(data)=> { disposeState: 0
console.log(data); }, {
data = this.reqDummy; troubleLogNo: '123415646196875456',
fieldDeviceName: '一号风机组',
if(data.trouble && data.trouble.constructor === Array){ fieldDeviceType: '风机',
this.alarmList = []; description: '一号风机组故障',
data.trouble.map((value, index) => { troubleTime: 1565165000000,
let val = value; data: {liquidPump: 25, press: 50},
val.troubleTime = this.api.formatTime('yyyy-MM-dd hh:mm:ss', new Date(value.alarmTime)) disposeState: 0
this.alarmList.push(val); }]
}) };
} // --------------------------------------------------------
}]);
} 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.detailInfo.trouble = data.trouble;
}
}]);
}
}
getAlarmList() {
if (this.displayArea === 'alarm') {
this.detailInfo = {};
const req = {
fieldRegionNo: this.fieldRegionNo,
startTime: this.startTime,
stopTime: this.stopTime
};
this.api.alarm.getCowshedAlarm([req, (data) => {
// ---------------------------------------------------------
// TODO 测试用数据
data = {
fieldRegionNo: 'FRN110268534764224512',
fieldRegionName: '1号牛舍',
startTime: 1565165000000,
stopTime: 156516501230000,
alarm: 22,
alarmTotal: 44,
trouble: [{
alarmLogNo: '123415646196875456',
fieldDeviceName: '一号风机组',
fieldDeviceType: '风机',
description: '温度偏高',
data: {temp: 25, humid: 50, heatStressLevel: '轻度', liquidPump: 25, press: 50, NH3: 50},
alarmTime: 1565165000000,
disposeState: 0
}, {
alarmLogNo: '123415646196875456',
fieldDeviceName: '一号风机组',
fieldDeviceType: '风机',
description: '温度偏高',
data: {temp: 25, humid: 50, heatStressLevel: '轻度', liquidPump: 25, press: 50, NH3: 50},
alarmTime: 1565165000000,
disposeState: 0
}, {
alarmLogNo: '123415646196875456',
fieldDeviceName: '一号风机组',
fieldDeviceType: '风机',
description: '温度偏高',
data: {temp: 25, humid: 50, heatStressLevel: '轻度', liquidPump: 25, press: 50, NH3: 50},
alarmTime: 1565165000000,
disposeState: 0
}, {
alarmLogNo: '123415646196875456',
fieldDeviceName: '一号风机组',
fieldDeviceType: '风机',
description: '温度偏高',
data: {temp: 25, humid: 50, heatStressLevel: '轻度', liquidPump: 25, press: 50, NH3: 50},
alarmTime: 1565165000000,
disposeState: 0
}, {
alarmLogNo: '123415646196875456',
fieldDeviceName: '一号风机组',
fieldDeviceType: '风机',
description: '温度偏高',
data: {temp: 25, humid: 50, heatStressLevel: '轻度', liquidPump: 25, press: 50, NH3: 50},
alarmTime: 1565165000000,
disposeState: 0
}]
};
// ---------------------------------------------------------
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));
});
this.detailInfo.trouble = data.trouble;
}
}]);
}
}
ionViewWillLeave() { ionViewWillLeave() {
clearInterval(this.commTmr); // clearInterval(this.commTmr);
} }
segmentChanged(ev: any) { segmentChanged(ev: any) {
console.log('Segment changed', ev); if (ev === 'alarm') {
if(ev === 'alarm') { this.getAlarmList();
this.showAlarmList = this.alarmList;
this.mSelAlarm = 'alarm';
} else { } else {
this.showAlarmList = this.troubleList; this.getTroubleList();
this.mSelAlarm = 'trouble';
} }
} }
// 确认修复 // 确认修复
async onRecvClick(alarm){ async onRecvClick(alarm) {
console.log(alarm); console.log(alarm);
const alert = await this.alterContoller.create({ const alert = await this.alterContoller.create({
...@@ -134,18 +243,18 @@ export class EnvAlarmDetailPage implements OnInit { ...@@ -134,18 +243,18 @@ export class EnvAlarmDetailPage implements OnInit {
text: '取消', text: '取消',
role: 'cancel', role: 'cancel',
cssClass: 'secondary', cssClass: 'secondary',
//cssClass: 'width: 30%', // cssClass: 'width: 30%',
}, { }, {
text: '是', text: '是',
//cssClass: 'width: 40%', // cssClass: 'width: 40%',
handler: () => { handler: () => {
this.processingFailure(1, alarm); this.processingFailure(1, alarm);
} }
}, { }, {
text: '不是', text: '不是',
//cssClass: 'width: 30%', // cssClass: 'width: 30%',
handler: () => { handler: () => {
this.processingFailure(0,alarm); this.processingFailure(0, alarm);
} }
} }
] ]
...@@ -155,14 +264,22 @@ export class EnvAlarmDetailPage implements OnInit { ...@@ -155,14 +264,22 @@ export class EnvAlarmDetailPage implements OnInit {
} }
processingFailure(real, alarm) { processingFailure(real, alarm) {
let req = { const req = {
"troubleLogNo": this.mSelAlarm === 'alarm'? alarm.alarmLogNo : alarm.troubleLogNo, troubleLogNo: this.displayArea === 'alarm' ? alarm.alarmLogNo : alarm.troubleLogNo,
"disposeState": 1, disposeState: 1,
"isReal": real === 1 ? 1 : 0 isReal: real === 1 ? 1 : 0
}; };
this.api.troubleLog.processingFailure([req, (data) => { this.api.troubleLog.processingFailure([req, (data) => {
;
}]); }]);
} }
getStartTime(interval) {
const now = new Date;
const year = now.getFullYear();
const month = now.getMonth() - interval;
const day = now.getDate();
const time = new Date(year, month, day, 0, 0, 0);
return time;
}
} }
src/app/envCtrl/env-alarm/env-alarm.page.html
View file @ cc1ea61c
<ion-header style="background-color: #F3F4F4" translucent="false"> <ion-header> <!-- style="background-color: #F3F4F4" translucent="false" -->
<ion-toolbar> <ion-toolbar>
<ion-title class="title">牛舍告警一览</ion-title> <ion-title class="title">牛舍告警一览</ion-title>
</ion-toolbar> </ion-toolbar>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<div class="sub" style="text-align: center; " style="width:100%"> <div class="sub" style="text-align: center; " style="width:100%">
<!--<ion-icon name="ios-heart" style="padding: auto"></ion-icon>--> <!--<ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
<ion-row style="width:100%"> <ion-row style="width:100%">
<ion-col style="padding: 5px; width:50%; border-right:1px solid lightgray"> <ion-col style="padding: 5px; width:50%; border-right:1px solid lightgray" (click)="toControl(item, 'trouble')">
<div> <div>
<div style="height: 60px; width: 100%"> <div style="height: 60px; width: 100%">
<div style="height: 35px; float:left;width: 100%"> <div style="height: 35px; float:left;width: 100%">
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
</ion-col> </ion-col>
<ion-col style="padding: 5px; width:50%"> <ion-col style="padding: 5px; width:50%" (click)="toControl(item, 'alarm')">
<div> <div>
<div style="height: 60px; width: 100%"> <div style="height: 60px; width: 100%">
<div style="height: 35px; float:left;width: 100%"> <div style="height: 35px; float:left;width: 100%">
......
src/app/envCtrl/env-alarm/env-alarm.page.scss
View file @ cc1ea61c
...@@ -93,3 +93,18 @@ ...@@ -93,3 +93,18 @@
font-weight: normal; font-weight: normal;
border-bottom: 1px solid lightgray; border-bottom: 1px solid lightgray;
} }
.popLabel {
width: 120px;
font-size: 15px;
--padding-start: 5px;
--padding-end: 5px;
}
.popContent {
width: 135px !important;
margin-bottom:5px;
margin-right:5px;
--padding-start: 5px;
--padding-end: 5px;
}
src/app/envCtrl/env-alarm/env-alarm.page.ts
View file @ cc1ea61c
...@@ -63,28 +63,29 @@ export class EnvAlarmPage implements OnInit { ...@@ -63,28 +63,29 @@ export class EnvAlarmPage implements OnInit {
alarmTotal: 0, alarmTotal: 0,
total: 0}; total: 0};
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> <ion-list class="popContent">
<ion-radio-group> <ion-radio-group style="width: 135px;">
<ion-item> <ion-item style="width: 135px;">
<ion-label>近一年</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> <ion-item style="width: 135px;">
<ion-label>近六个月</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> <ion-item style="width: 135px;">
<ion-label>近三个月</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> <ion-item style="width: 135px;">
<ion-label>近一个月</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>
...@@ -108,8 +109,9 @@ export class EnvAlarmPage implements OnInit { ...@@ -108,8 +109,9 @@ export class EnvAlarmPage implements OnInit {
} }
}]); }]);
} }
toControl(one) { toControl(one, displayArea) {
const query = '/env-alarmDetail?name=' + one.fieldRegionName + '&no=' + one.fieldRegionNo; const query = '/env-alarmDetail?no=' + one.fieldRegionNo
+ '&displayArea=' + displayArea + '&interval=' + this.curInterval;
// this.tf.transfer({ // this.tf.transfer({
// url: '/' + one.url, // url: '/' + one.url,
// query: query, // query: query,
...@@ -123,21 +125,26 @@ export class EnvAlarmPage implements OnInit { ...@@ -123,21 +125,26 @@ export class EnvAlarmPage implements OnInit {
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']
}); });
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;
}; };
document.getElementById('popSelect2').onclick = () => { document.getElementById('popSelect2').onclick = () => {
this.dismissPopover(6); this.dismissPopover(6);
this.curInterval = 6;
}; };
document.getElementById('popSelect3').onclick = () => { document.getElementById('popSelect3').onclick = () => {
this.dismissPopover(3); this.dismissPopover(3);
this.curInterval = 3;
}; };
document.getElementById('popSelect4').onclick = () => { document.getElementById('popSelect4').onclick = () => {
this.dismissPopover(1); this.dismissPopover(1);
this.curInterval = 1;
}; };
}); });
} }
...@@ -151,7 +158,7 @@ export class EnvAlarmPage implements OnInit { ...@@ -151,7 +158,7 @@ export class EnvAlarmPage implements OnInit {
console.log(condition.startTime); console.log(condition.startTime);
console.log(condition.stopTime); console.log(condition.stopTime);
this.api.alarm.getAlarmByTerm([condition, (data) => { this.api.alert.getByTerm([condition, (data) => {
if (data && data.fieldRegionNo) { if (data && data.fieldRegionNo) {
this.curFieldRegion = data; this.curFieldRegion = data;
this.alarmItems.forEach(item => { this.alarmItems.forEach(item => {
...@@ -169,7 +176,11 @@ export class EnvAlarmPage implements OnInit { ...@@ -169,7 +176,11 @@ export class EnvAlarmPage implements OnInit {
} }
getStartTime(interval) { getStartTime(interval) {
const time = new Date().getTime() - ( 1000 * 3600 * 24 * interval ); const now = new Date;
const year = now.getFullYear();
const month = now.getMonth() - interval;
const day = now.getDate();
const time = new Date(year, month, day, 0, 0, 0);
return time; return time;
} }
......
src/app/envCtrl/env-change-model/env-change-model.page.ts
View file @ cc1ea61c
...@@ -19,7 +19,7 @@ export class EnvChangeModelPage implements OnInit { ...@@ -19,7 +19,7 @@ export class EnvChangeModelPage implements OnInit {
private load: Load, private load: Load,
private tf: Transfer, private tf: Transfer,
private router: Router, private router: Router,
private datepipe: DatePipe) {} private datePipe: DatePipe) {}
controlConfig = []; controlConfig = [];
ngOnInit() { ngOnInit() {
...@@ -61,10 +61,10 @@ export class EnvChangeModelPage implements OnInit { ...@@ -61,10 +61,10 @@ export class EnvChangeModelPage implements OnInit {
} }
formatTime(time) { formatTime(time) {
return this.datepipe.transform(time, 'HH:mm'); return this.datePipe.transform(time, 'HH:mm');
} }
formatDate(date) { formatDate(date) {
return this.datepipe.transform(date, 'MM-dd'); return this.datePipe.transform(date, 'MM-dd');
} }
} }
src/app/service/api.ts
View file @ cc1ea61c
...@@ -54,16 +54,14 @@ export class Api { ...@@ -54,16 +54,14 @@ export class Api {
public alert = { public alert = {
// 获取告警列表的数据 // 获取告警列表的数据
getAll: (data) => this.trans('post', '/alert/getAll', data), getAll: (data) => this.trans('post', '/alert/getAll', data),
// 获取告警列表的数据 // 根据条件获取告警数据
getByTerm: (data) => this.trans('post', '/alert/getByTerm', data), getByTerm: (data) => this.trans('post', '/alert/getByTerm', data),
getAlarmByTerm: (data) => this.trans('post', '/alert/getAlarmByTerm', data),
} }
public troubleLog = { public troubleLog = {
// 根据条件获取所有的故障信息 // 根据条件获取所有的故障信息
getByTerm: (data) => this.trans('post', '/troubleLog/getByTerm', data), getByTerm: (data) => this.trans('post', '/troubleLog/getByTerm', data),
// /处理故障 // 处理故障
processingFailure: (data) => this.trans('post', '/troubleLog/processingFailure', data), processingFailure: (data) => this.trans('post', '/troubleLog/processingFailure', data),
} }
......
src/theme/css/jazz-timeline.css
View file @ cc1ea61c
This source diff could not be displayed because it is too large. You can view the blob instead.
src/theme/css/timeline.css 0 → 100644
View file @ cc1ea61c
@charset "UTF-8";
body {
background: linear-gradient(55deg, #4E75B9 30%, #5CBF98 90%);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100vw;
margin: 0;
padding: 12vh 100px;
font-family: 'Source Sans Pro', arial, sans-serif;
font-weight: 300;
color: #333;
box-sizing: border-box;
}
body * {
box-sizing: border-box;
}
.timeline {
width: 100%;
max-width: 800px;
background: #fff;
padding: 100px 50px;
position: relative;
box-shadow: 0.5rem 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
}
.timeline:before {
content: '';
position: absolute;
top: 0px;
left: calc(33% + 15px);
bottom: 0px;
width: 4px;
background: #ddd;
}
.timeline:after {
content: "";
display: table;
clear: both;
}
.entry {
clear: both;
text-align: left;
position: relative;
}
.entry .title {
margin-bottom: .5em;
float: left;
width: 33%;
padding-right: 30px;
text-align: right;
position: relative;
}
.entry .title:before {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 4px solid salmon;
background-color: #fff;
border-radius: 100%;
top: 15%;
right: -8px;
z-index: 99;
}
.entry .title h3 {
margin: 0;
font-size: 120%;
}
.entry .title p {
margin: 0;
font-size: 100%;
}
.entry .body {
margin: 0 0 3em;
float: right;
width: 66%;
padding-left: 30px;
}
.entry .body p {
line-height: 1.4em;
}
.entry .body p:first-child {
margin-top: 0;
font-weight: 400;
}
.entry .body ul {
color: #aaa;
padding-left: 0;
list-style-type: none;
}
.entry .body ul li:before {
content: "–";
margin-right: .5em;
}
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