Skip to content

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

修改牛舍告警详情页

parent 5fa8b162
Expand all 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-toolbar>
<ion-header translucent="false">
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
<ion-back-button text="" ></ion-back-button>
</ion-buttons>
<ion-title class="title">{{fieldRegionName}}告警详情页</ion-title>
<ion-title class="appTitle">{{fieldRegionName}}告警详情</ion-title>
</ion-toolbar>
</ion-header>
<!--<div class="mainCon">-->
<!--</div>-->
<ion-content color="light" style="background-color: #F3F4F4;">
<ion-segment scrollable style="position: sticky;" (ionChange)="segmentChanged($event)">
<ion-segment-button value="trouble">
<ion-segment scrollable style="position: sticky; margin-top:10px;" color="secondary" (ionChange)="segmentChanged($event)">
<ion-segment-button value="trouble" [checked]="isTroubleDis">
<ion-label>故障</ion-label>
</ion-segment-button>
<ion-segment-button checked value="alarm">
<ion-segment-button value="alarm" [checked]="isAlarmDis">
<ion-label>预警</ion-label>
</ion-segment-button>
</ion-segment>
<ion-item lines="full">
<ion-label>预警数量</ion-label> <ion-label>2/3</ion-label>
<ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="workModeSetting.workMode" [(value)]="workModeSetting.workMode" (ionChange)="workModeEvent()">
<ion-select-option value="全部">全部</ion-select-option>
<ion-select-option value="风机">风机</ion-select-option>
<ion-select-option value="卷帘">卷帘</ion-select-option>
<ion-select-option value="照明">照明</ion-select-option>
<ion-item lines="full" class="ionItem" color="gray">
<ion-select interface="popover" placeholder="状态">
<ion-select-option value="waitFix" class="popLabel">待修复</ion-select-option>
<ion-select-option value="fixed" class="popLabel">已修复</ion-select-option>
</ion-select>
<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-item>
<div class="jazz-timeline-wrapper">
<div class="jazz-timeline thin-timeline">
<ion-item lines="full" class="ionItem" style="height: 45px;">
<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 class="icon-placeholder">Dec <span>25</span></div>
<div class="timeline-bar"></div>
</div>
<div class="timeline-content">
<h1 class="content-title"> {{a.description}} </h1>
<div class="content-details">
<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 style="padding:5px;">
<div class="detailContent">
<div class="timeline">
<div class="entry" *ngFor="let item of detailInfo.trouble">
<div class="title">
<h3>2014 - Present</h3>
<p>{{item.troubleTime}}</p>
</div>
</div><!-- timeline content -->
</div><!-- .timeline-post -->
<div class="body">
<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 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>
src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.scss
View file @ cc1ea61c
......@@ -16,8 +16,128 @@
//margin-bottom: 90px;
}
.title{
.appTitle{
text-align: center;
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/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-title class="title">牛舍告警一览</ion-title>
</ion-toolbar>
......@@ -24,7 +24,7 @@
<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:50%; border-right:1px solid lightgray">
<ion-col style="padding: 5px; width:50%; border-right:1px solid lightgray" (click)="toControl(item, 'trouble')">
<div>
<div style="height: 60px; width: 100%">
<div style="height: 35px; float:left;width: 100%">
......@@ -37,7 +37,7 @@
</div>
</ion-col>
<ion-col style="padding: 5px; width:50%">
<ion-col style="padding: 5px; width:50%" (click)="toControl(item, 'alarm')">
<div>
<div style="height: 60px; 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 @@
font-weight: normal;
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 {
alarmTotal: 0,
total: 0};
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>
<ion-radio-group>
<ion-item>
<ion-label>近一年</ion-label>
<ion-list class="popContent">
<ion-radio-group style="width: 135px;">
<ion-item style="width: 135px;">
<ion-label class="popLabel">近一年</ion-label>
<ion-radio slot="start" value="12" checked id="popSelect1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>近六个月</ion-label>
<ion-item style="width: 135px;">
<ion-label class="popLabel">近六个月</ion-label>
<ion-radio slot="start" value="6" id="popSelect2"></ion-radio>
</ion-item>
<ion-item>
<ion-label>近三个月</ion-label>
<ion-item style="width: 135px;">
<ion-label class="popLabel">近三个月</ion-label>
<ion-radio slot="start" value="3" id="popSelect3"></ion-radio>
</ion-item>
<ion-item>
<ion-label>近一个月</ion-label>
<ion-item style="width: 135px;">
<ion-label class="popLabel">近一个月</ion-label>
<ion-radio slot="start" value="1" id="popSelect4"></ion-radio>
</ion-item>
</ion-radio-group>
......@@ -108,8 +109,9 @@ export class EnvAlarmPage implements OnInit {
}
}]);
}
toControl(one) {
const query = '/env-alarmDetail?name=' + one.fieldRegionName + '&no=' + one.fieldRegionNo;
toControl(one, displayArea) {
const query = '/env-alarmDetail?no=' + one.fieldRegionNo
+ '&displayArea=' + displayArea + '&interval=' + this.curInterval;
// this.tf.transfer({
// url: '/' + one.url,
// query: query,
......@@ -123,21 +125,26 @@ export class EnvAlarmPage implements OnInit {
this.curFieldRegion = fieldRegionInfo;
this.popoverElement = Object.assign(document.createElement('ion-popover'), {
component: 'popover-page',
event: event
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;
};
});
}
......@@ -151,7 +158,7 @@ export class EnvAlarmPage implements OnInit {
console.log(condition.startTime);
console.log(condition.stopTime);
this.api.alarm.getAlarmByTerm([condition, (data) => {
this.api.alert.getByTerm([condition, (data) => {
if (data && data.fieldRegionNo) {
this.curFieldRegion = data;
this.alarmItems.forEach(item => {
......@@ -169,7 +176,11 @@ export class EnvAlarmPage implements OnInit {
}
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;
}
......
src/app/envCtrl/env-change-model/env-change-model.page.ts
View file @ cc1ea61c
......@@ -19,7 +19,7 @@ export class EnvChangeModelPage implements OnInit {
private load: Load,
private tf: Transfer,
private router: Router,
private datepipe: DatePipe) {}
private datePipe: DatePipe) {}
controlConfig = [];
ngOnInit() {
......@@ -61,10 +61,10 @@ export class EnvChangeModelPage implements OnInit {
}
formatTime(time) {
return this.datepipe.transform(time, 'HH:mm');
return this.datePipe.transform(time, 'HH:mm');
}
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 {
public alert = {
// 获取告警列表的数据
getAll: (data) => this.trans('post', '/alert/getAll', 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),
// /处理故障
// 处理故障
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