Skip to content

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

调整layout

parent 9f30fd1e
Hide whitespace changes
Inline Side-by-side
Showing with 252 additions and 150 deletions
src/app/components/kanban-double/kanban-double.component.html
View file @ 46c99e87
......@@ -10,7 +10,7 @@
<img [src]="iconImg1" [ngStyle]="{'width': iconWidth, 'margin-left': '5px', 'height': 'auto'}" >
</ion-col>
<ion-col style="padding-left: 0px;">
<div style="padding-left: 5px;">
<div style="padding-left: 5px; padding-top: 2px;">
<span style="padding-bottom: 10px" [ngStyle]="{'color':fontColor1, 'font-size': fontSize}">{{inData1}}</span>
</div>
</ion-col>
......@@ -21,7 +21,7 @@
<img [src]="iconImg2" [ngStyle]="{'width': iconWidth, 'height': 'auto'}">
</ion-col>
<ion-col style="padding-left: 0px;">
<div>
<div style="padding-top: 2px;">
<span style="padding-bottom: 10px" [ngStyle]="{'color':fontColor2, 'font-size': fontSize}">{{inData2}}</span>
</div>
</ion-col>
......@@ -43,7 +43,7 @@
<img [src]="iconImg3" style="width: 90% !important; height: auto; padding-top: 3px;">
</ion-col>
<ion-col style="padding-left: 0px;">
<div style="padding-left: 5px;">
<div style="padding-left: 5px; padding-top: 2px;">
<span style="padding-bottom: 10px" [ngStyle]="{'color':fontColor3, 'font-size': fontSize}">{{inData3}}</span>
</div>
</ion-col>
......
src/app/components/kanban-double/kanban-double.component.scss
View file @ 46c99e87
.kanban {
width: 99%;
height: 95px;
height: 100px;
align-items:center;
justify-content:
center;text-align: center;
......
src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.html
View file @ 46c99e87
......@@ -8,11 +8,11 @@
</ion-toolbar>
<div>
<ion-segment scrollable style="position: sticky; margin-top:10px;" color="secondary" (click)="segmentChanged($event)">
<ion-segment-button value="trouble" [checked]="isTroubleDis">
<ion-segment mode="ios" style="position: sticky;" color="secondary" (ionChange)="segmentChanged($event)">
<ion-segment-button mode="ios" value="trouble" [checked]="isTroubleDis" class="ion-segment-button">
<ion-label>故障</ion-label>
</ion-segment-button>
<ion-segment-button value="alarm" [checked]="isAlarmDis">
<ion-segment-button mode="ios" value="alarm" [checked]="isAlarmDis" class="ion-segment-button">
<ion-label>预警</ion-label>
</ion-segment-button>
</ion-segment>
......@@ -33,26 +33,34 @@
</ion-select>
</ion-item>
<ion-item lines="full" class="ionItem" style="height: 45px;">
<ion-item lines="full" class="ionItem" color="gray" style="height: 45px; --inner-padding-end: 0px;">
<div style="width: 28%">
<ion-datetime style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="startTime" (click)="refresh()" id="selectStartTime"></ion-datetime>
<ion-datetime class="content-text-color" 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;" (click)="refresh()" id="selectStopTime"></ion-datetime>
<ion-datetime class="content-text-color" 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 style="width: 40%; padding-right: 10px;">
<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 style="width:80%; display:inline-block">
<span class="font-note" style="text-align: right; padding-right:5px;">未解决数</span>
</div>
<div style="width:20%; display:inline-block;">
<span class="main-color" style="font-size: 13px" *ngIf="isTroubleDis">{{detailInfo.devErr}}</span>
<span class="main-color" style="font-size: 13px" *ngIf="isAlarmDis">{{detailInfo.alarm}}</span>
</div>
</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 style="width:80%; display:inline-block">
<span class="font-note" style="text-align: right; padding-right:5px;">总数</span>
</div>
<div style="width:20%; display:inline-block;">
<span class="main-color" style="font-size: 13px" *ngIf="isTroubleDis">{{detailInfo.devErrTotal}}</span>
<span class="main-color" style="font-size: 13px" *ngIf="isAlarmDis">{{detailInfo.alarmTotal}}</span>
</div>
</div>
</div>
</ion-item>
......@@ -60,7 +68,7 @@
</ion-header>
<ion-content color="light" style="background-color: #F3F4F4;" scroll="false">
<ion-content color="gray" style="background-color: #F3F4F4;" scroll="false">
<div style="padding:5px;">
<div class="detailContent">
......@@ -69,18 +77,18 @@
<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>
<p class="font-ts" style="font-size:13px !important">{{item.troubleTime}}</p>
</div>
<div class="body">
<h3 style="margin-bottom: 5px;">{{item.description}}</h3>
<h3 style="margin-bottom: 5px;" class="font-content-title">{{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 *ngIf="item.data !== null && item.data.temp !== undefined && item.data.temp !== null && item.data.temp !== ''" class="warnContent font-content">温度: {{item.data.temp}} ℃</div>
<div *ngIf="item.data !== null && item.data.humi !== undefined && item.data.humi !== null && item.data.humi !== ''" class="warnContent font-content">湿度: {{item.data.humi}} %</div>
<div *ngIf="item.data !== null && item.data.heatStressLevel !== undefined && item.data.heatStressLevel !== null && item.data.heatStressLevel !== ''" class="warnContent font-content">热应激等级: {{item.data.heatStressLevel}}</div>
<div *ngIf="item.data !== null && item.data.liquidPump !== undefined && item.data.liquidPump !== null && item.data.liquidPump !== ''" class="warnContent font-content">供液泵压力: {{item.data.liquidPump}} MPa</div>
<div *ngIf="item.data !== null && item.data.press !== undefined && item.data.press !== null && item.data.press !== ''" class="warnContent font-content">电磁阀压力: {{item.data.press}} MPa</div>
<div *ngIf="item.data !== null && item.data.NH3 !== undefined && item.data.NH3 !== null && item.data.NH3 !== ''" class="warnContent font-content">氨气: {{item.data.NH3}} ppm</div>
</div>
<div style="width:35%; float: left">
<div *ngIf="displayArea === 'trouble' && item.disposeState === 0" >
......
src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.scss
View file @ 46c99e87
......@@ -24,14 +24,14 @@
.note {
width: 100%;
text-align: right;
font-size:14px;
font-size:13px;
padding-right: 5px;
}
.ionItem{
font-size: 13px;
--padding-start: 5px;
--padding-end: 5px;
--padding-end: 0px;
height: 35px;
}
......@@ -54,7 +54,7 @@
.warnContent {
width: 100%;
font-size:14px;
margin-bottom:5px;
}
.warnIcon {
......@@ -151,3 +151,7 @@
margin-top: 0;
font-weight: 400;
}
.itemColor {
--background: auto;
}
src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.ts
View file @ 46c99e87
......@@ -169,8 +169,8 @@ export class EnvAlarmDetailPage implements OnInit {
appendItems(trouble, allDataLength) {
// await this.wait(500);
console.log(allDataLength);
console.log(this.troubleList.length);
// 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]);
......@@ -178,7 +178,7 @@ export class EnvAlarmDetailPage implements OnInit {
}
// this.infiniteScroll.disabled = false;
this.page = this.page + 1;
console.log(this.infiniteScroll.disabled);
// console.log(this.infiniteScroll.disabled);
} else {
document.getElementById('infiniteScroll').setAttribute('disabled', 'disabled');
// this.infiniteScroll.disabled = true;
......@@ -206,7 +206,7 @@ export class EnvAlarmDetailPage implements OnInit {
this.troubleList = [];
setTimeout(async () => {
console.log('segment changed');
console.log(this.infiniteScroll.disabled);
console.log(ev);
this.page = 1;
this.disposeState = '';
this.fieldDeviceType = '';
......
src/app/envCtrl/env-alarm/env-alarm.page.html
View file @ 46c99e87
......@@ -13,9 +13,13 @@
<ion-card-title style="display: inline-block" style="width:100%">
<div class="cardTitle">
<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 style="float:left;padding-top:3px;">
<img [src]="'../../assets/img/house.png'" style="display: inline-block;margin-left: 10px; margin-right: 10px;width:20px !important">
</div>
<div style="float:left; padding-top: 4px;">
<span style="text-align: center" class="font-sub-title">{{item.fieldRegionName}}</span>
</div>
<ion-badge color="danger" mode="ios" *ngIf="item.total > 0" class="badge">{{item.total}}</ion-badge>
</div>
<div style="width: 30%; padding-right: 5px; display: inline-block; font-size: 13px; color:#61C7CC">
<ion-select interface="popover" placeholder="" style="padding: 0px;" [(ngModel)]="item.interval" (ionChange)="dismissPopover(item)">
......@@ -26,39 +30,53 @@
</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>
<ion-card-content style="padding-top: 5px; padding-bottom: 5px;">
<ion-card-content class="cardContent">
<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" (click)="toControl(item, 'trouble')">
<ion-col style="padding: 0px 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%">
<span class="label">未解决故障数</span><span style="color:#d33939; font-size:24px;">{{item.devErr}}</span>
<div style="height: 70px; width: 100%">
<div style="height: 40px; float:left;width: 100%">
<div style="width: 75%; display: inline-block; text-align: right;">
<span class="label-large content-text-color" style="margin-top: 15px;">未解决故障数</span>
</div>
<div style="width: 25%; display: inline-block; text-align: left;">
<span style="color:#f04141; font-size:32px; ">{{item.devErr}}</span>
</div>
</div>
<div style="height: 25px; float:left;width: 100%">
<span class="label">总数</span><span>{{item.devErrTotal}}</span>
<div style="width: 75%; display: inline-block; text-align: right;">
<span class="label-small note-text-color" style="margin-top: 8px;">总数</span>
</div>
<div style="width: 25%; display: inline-block; text-align: left;">
<span style="margin-left:2px;" class="note-text-color">{{item.devErrTotal}}</span>
</div>
</div>
</div>
</div>
</ion-col>
<ion-col style="padding: 5px; width:50%" (click)="toControl(item, 'alarm')">
<ion-col style="padding: 0px 5px; width:50%" (click)="toControl(item, 'alarm')">
<div>
<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>
<div style="height: 70px; width: 100%">
<div style="height: 40px; float:left;width: 100%">
<div style="width: 75%; display: inline-block; text-align: right;">
<span class="label-large content-text-color" style="margin-top: 15px;">未解决预警数</span>
</div>
<div style="width: 25%; display: inline-block; text-align: left;">
<span style="color:#f0ca45; font-size:32px;">{{item.alarm}}</span>
</div>
</div>
<div style="height: 25px; float:left;width: 100%">
<span class="label">总数</span><span>{{item.alarmTotal}}</span>
<div style="width: 75%; display: inline-block; text-align: right;">
<span class="label-small note-text-color" style="margin-top: 8px;">总数</span>
</div>
<div style="width: 25%; display: inline-block; text-align: left;">
<span style="margin-left:2px;" class="note-text-color">{{item.alarmTotal}}</span>
</div>
</div>
</div>
</div>
......
src/app/envCtrl/env-alarm/env-alarm.page.scss
View file @ 46c99e87
......@@ -89,7 +89,7 @@
//box-shadow: #ccc 0.5px 0.5px 3px;
}
.label {
.label-large {
width: 90px;
display: inline-block;
font-size: 14px;
......@@ -97,6 +97,14 @@
margin-right: 10px;
}
.label-small {
width: 90px;
display: inline-block;
font-size: 13px;
text-align: right;
margin-right: 10px;
}
.cardTitle {
margin-top:3px;
padding-bottom:3px;
......@@ -105,6 +113,17 @@
border-bottom: 1px solid lightgray;
}
.cardContent {
padding-top: 5px;
padding-bottom: 5px;
/* --inner-padding-start: 0px; */
/* padding-inline-start: 10px; */
-webkit-padding-start: 5px;
padding-inline-start: 5px;
-webkit-padding-end: 5px;
padding-inline-end: 5px;
}
.popLabel {
width: 120px;
font-size: 15px;
......
src/app/envCtrl/env-anal/env-anal.page.html
View file @ 46c99e87
......@@ -4,46 +4,49 @@
</ion-toolbar>
</ion-header>
<ion-content color='light'>
<ion-item lines="full">
<div style="width:50%">
<ion-content color="light">
<ion-item lines="none" class="fix-item-padding itemColor">
<div style="width:60%">
<ion-button color="secondary" style="display: inline-block" (click)="toDetail($event)">输入牛舍单产奶量并分析 >></ion-button>
</div>
<div style="width:50%; text-align: right;padding-right: 20px;">
<ion-datetime displayFormat="YYYY-MM-DD" cancelText="取消" doneText="确认" [(ngModel)]="today" style="font-size:16px; position: relative;"></ion-datetime>
<div style="width:40%; text-align: right; padding-top: 2px;">
<div style="float:left; padding-right: 5px;">
<ion-datetime class="dateTime" displayFormat="YYYY-MM-DD" cancelText="取消" doneText="确认" [(ngModel)]="today" style="font-size:13px; position: relative;"></ion-datetime>
</div>
<div style="float:left;">
<img src="../../assets/img/calendar-small.png" style="width: 25px !important;">
</div>
</div>
</ion-item>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">牛舍单产奶量排名</h1>
<div>
<h1 class="main-title clearColor" style="width:45%; display: inline-block">牛舍单产奶量排名</h1>
<div style="width:45%; text-align:right; display: inline-block" class="font-smaller">单位: 公斤(kg)/头</div>
</div>
<div style="width:100%; padding-left:10px; padding-right:10px;">
<ion-item lines="full" class="rankItem">
<ion-item lines="full" class="rankItem fix-item-padding">
<div class="rankIcon">
<img [src]="'../../assets/img/rank1.png'">
</div>
<div style="width:20%">
<div class="rankName">
5号牛舍
</div>
<div style="width:50%">
<ion-progress-bar color="secondary" value="0.95"></ion-progress-bar>
<div class="rankProgress">
<ion-progress-bar color="secondary" value="1"></ion-progress-bar>
</div>
<div class="rankValue">
140
</div>
</ion-item>
<ion-item lines="full" class="rankItem">
<ion-item lines="full" class="rankItem fix-item-padding">
<div class="rankIcon">
<img [src]="'../../assets/img/rank2.png'">
</div>
<div style="width:20%">
<div class="rankName">
8号牛舍
</div>
<div style="width:50%">
<div class="rankProgress">
<ion-progress-bar color="secondary" value="0.80"></ion-progress-bar>
</div>
<div class="rankValue">
......@@ -51,57 +54,57 @@
</div>
</ion-item>
<ion-item lines="full" class="rankItem">
<ion-item lines="full" class="rankItem fix-item-padding">
<div class="rankIcon">
<img [src]="'../../assets/img/rank3.png'">
</div>
<div style="width:20%">
<div class="rankName">
1号牛舍
</div>
<div style="width:50%">
<div class="rankProgress">
<ion-progress-bar color="secondary" value="0.75"></ion-progress-bar>
</div>
<div class="rankValue">
105
</div>
</ion-item>
<ion-item lines="full" class="rankItem">
<ion-item lines="full" class="rankItem fix-item-padding">
<div class="rankIcon">
24
</div>
<div style="width:20%">
24号牛舍
<div class="rankName">
20号牛舍
</div>
<div style="width:50%">
<ion-progress-bar color="secondary" value="0.50"></ion-progress-bar>
<div class="rankProgress">
<ion-progress-bar color="medium" value="0.50"></ion-progress-bar>
</div>
<div class="rankValue">
55
</div>
</ion-item>
<ion-item lines="full" class="rankItem">
<ion-item lines="full" class="rankItem fix-item-padding">
<div class="rankIcon">
23
25
</div>
<div style="width:20%">
<div class="rankName">
23号牛舍
</div>
<div style="width:50%">
<ion-progress-bar color="secondary" value="0.3"></ion-progress-bar>
<div class="rankProgress">
<ion-progress-bar color="medium" value="0.3"></ion-progress-bar>
</div>
<div class="rankValue">
35
</div>
</ion-item>
<ion-item lines="full" class="rankItem">
<ion-item lines="full" class="rankItem fix-item-padding">
<div class="rankIcon">
26
</div>
<div style="width:20%">
26号牛舍
<div class="rankName">
11号牛舍
</div>
<div style="width:50%">
<ion-progress-bar color="secondary" value="0.2"></ion-progress-bar>
<div class="rankProgress">
<ion-progress-bar color="medium" value="0.2"></ion-progress-bar>
</div>
<div class="rankValue">
20
......@@ -109,33 +112,18 @@
</ion-item>
</div>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">风机参数比较</h1>
<h1 class="main-title clearColor">风机参数比较</h1>
<div style="width:100%; padding-left:10px; padding-right:10px; height: 300px">
<div #fanChartsContent id="fanChartsContent" class="echart-pie"></div>
</div>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">喷淋参数比较</h1>
<h1 class="main-title clearColor">喷淋参数比较</h1>
<div style="width:100%; padding-left:10px; padding-right:10px; height: 300px">
<div #showerChartsContent id="showerChartsContent" class="echart-pie"></div>
</div>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">温湿度曲线图</h1>
<h1 class="main-title clearColor">温湿度曲线图</h1>
<div style="width:100%; padding-left:10px; padding-right:10px; height: 300px">
<div style="width:95%; background-color: #fff; border-radius: 10px 10px 0px 0px">
<div style="width:85%; margin:auto; padding-top: 10px">
......
src/app/envCtrl/env-anal/env-anal.page.scss
View file @ 46c99e87
......@@ -78,6 +78,7 @@
}
.rankItem {
width: 95%;
font-size: 16px;
--padding-start: 0px;
--padding-end: 0px;
......@@ -89,8 +90,31 @@
text-align:center
}
.clearColor {
background-color: unset;
}
.itemColor {
--background: auto;
}
.dateTime {
border: 1px solid lightgray;
border-radius: 3px;
text-align: center;
padding: 5px 10px 0px 10px;
}
.rankName {
width: 25%
}
.rankProgress {
width: 50%
}
.rankValue {
width:20%;
width: 15%;
padding-left:5px;
font-size: 14px
}
src/app/envCtrl/env-detail/env-detail.page.html
View file @ 46c99e87
......@@ -22,7 +22,7 @@
<v-kanban-small class="home-bar" name="在离舍" [inData]="inHouseName" iconWidth="35%" [iconImg]="'../../assets/img/icon-house.png'" iconColor="#61C7CC" fontSize="14px"></v-kanban-small>
</div>
<div class="inHouseDiv font-content-title">
<ion-label class="inHouseLabel">在离舍开关控制</ion-label>
<ion-label class="inHouseLabel normalColor">在离舍开关控制</ion-label>
<ion-toggle mode="ios" color="secondary" [(ngModel)]="inHouseState" [checked]="inHouseState" (click)="inHouseControl(inHouseState)"></ion-toggle>
<!--<v-switch (click)="inHouseControl(item.inHouse)" [value]="item.inHouse.inHouse" [loading]="loading"></v-switch>-->
</div>
......@@ -30,17 +30,17 @@
<ion-content color="light">
<ion-router-outlet></ion-router-outlet>
<ion-tabs>
<ion-tab-bar slot="top">
<ion-tab-button tab="fan" class="tabSelected" >
<ion-tab-bar slot="top" mode="ios">
<ion-tab-button tab="fan" class="tabSelected ion-segment-button">
<ion-label>风机</ion-label>
</ion-tab-button>
<ion-tab-button tab="shower" class="tabSelected" [routerLink]="showerLink"> <!--[rootParams]="fieldRegionNo"-->
<ion-tab-button tab="shower" class="tabSelected ion-segment-button" [routerLink]="showerLink"> <!--[rootParams]="fieldRegionNo"-->
<ion-label>喷淋</ion-label>
</ion-tab-button>
<ion-tab-button tab="light" class="tabSelected" [routerLink]="lightLink">
<ion-tab-button tab="light" class="tabSelected ion-segment-button" [routerLink]="lightLink">
<ion-label>照明</ion-label>
</ion-tab-button>
<ion-tab-button tab="waterchannel" class="tabSelected" [routerLink]="waterchannelLink">
<ion-tab-button tab="waterchannel" class="tabSelected ion-segment-button" [routerLink]="waterchannelLink">
<ion-label>水槽</ion-label>
</ion-tab-button>
</ion-tab-bar>
......
src/app/envCtrl/env-detail/env-detail.page.ts
View file @ 46c99e87
......@@ -4,6 +4,7 @@ import {NavController} from '@ionic/angular';
import {ActivatedRoute} from '@angular/router';
import {Load} from '../../service/load';
import {Transfer} from '../../service/transfer';
import {Loading} from '../../service/loading';
@Component({
selector: 'v-env-detail',
......@@ -16,7 +17,8 @@ export class EnvDetailPage implements OnInit {
private api: Api,
private ac: ActivatedRoute,
private load: Load,
private tf: Transfer) {
private tf: Transfer,
public loading: Loading) {
this.ac.queryParams.subscribe((data) => {
if (data.no) {
this.fieldRegionNo = data.no;
......@@ -53,7 +55,6 @@ export class EnvDetailPage implements OnInit {
inHouseState = false;
fieldRegionNo = '';
loading = false;
// 发送指令延时判断
comm = {
......@@ -106,16 +107,13 @@ export class EnvDetailPage implements OnInit {
}
initLayout(environmentConfigJson) {
// this.showerLink = '/env-detail/shower/' + this.fieldRegionNo;
// this.lightLink = '/env-detail/light/' + this.fieldRegionNo;
// this.waterchannelLink = '/env-detail/waterchannel/' + this.fieldRegionNo;
this.fanLink = '/env-detail/fan/';
this.showerLink = '/env-detail/shower/' + this.fieldRegionNo;
this.lightLink = '/env-detail/light/' + this.fieldRegionNo;
this.waterchannelLink = '/env-detail/waterchannel/' + this.fieldRegionNo;
if (this.item) {
this.item.heatStressColor = this.item.heatStressLevel === 0 ? '#13AE67' :
this.item.heatStressColor = this.item.heatStressLevel === 0 ? '#61C7CC' :
this.item.heatStressLevel === 1 ? '#61C7CC' :
this.item.heatStressLevel === 2 ? '#F8B72D' :
this.item.heatStressLevel === 3 ? '#F2401C' : '#F2401C';
......@@ -129,10 +127,12 @@ export class EnvDetailPage implements OnInit {
getColor(value, maxValue, minValue?) {
if (value !== undefined && value !== null && value !== '' && maxValue !== undefined && maxValue !== null && maxValue !== '') {
if (value > maxValue) {
console.log('超过上限');
return '#F2401C';
} else {
if (minValue !== undefined && minValue !== null) {
if (value < minValue) {
console.log('低于下限');
return '#F2401C';
} else {
return '#61C7CC';
......@@ -140,7 +140,6 @@ export class EnvDetailPage implements OnInit {
}
}
}
return '#61C7CC';
}
......@@ -190,10 +189,11 @@ export class EnvDetailPage implements OnInit {
const opt = {fieldDeviceNo: '', fieldDeviceType: '', op: 0, ts: 0};
opt.fieldDeviceNo = this.item.inHouse.fieldDeviceNo;
opt.fieldDeviceType = this.item.inHouse.fieldDeviceType;
opt.op = inHouseState ? 1 : 0;
opt.op = inHouseState ? 0 : 1;
opt.ts = new Date().valueOf();
this.comm.remain = 20;
// this.comm.remain = 20;
this.loading.presentLoading(80);
this.api.control.controlCowedSwitch([opt, (data) => {
// if (data && data.code === 1) {
// this.getData(1);
......@@ -205,6 +205,7 @@ export class EnvDetailPage implements OnInit {
this.getData(0);
this.api.presentMsgToast(data.message);
this.comm.remain = 0;
this.loading.closeLoading();
}]);
}
}
......
src/app/envCtrl/env-home/env-home.page.html
View file @ 46c99e87
......@@ -52,9 +52,9 @@
<div class="detailInfo" style="width: 40%">热应激: &nbsp;<span class="warmColor{{item.heatStressLevel}}">{{item.heatStressLevelName}}</span></div>
<div *ngIf="item.NH3 !== '--'" class="detailInfo" style="width: 40%">氨气: &nbsp;<span class="{{item.NH3Color}}Color">{{item.NH3 | number:'0.0-2'}}ppm</span></div>
<div *ngIf="item.NH3 === '--'" class="detailInfo" style="width: 40%">氨气: &nbsp;{{'--'}}ppm</div>
<div *ngIf="item.temp !== '--'" class="detailInfo" style="width: 40%">温度: &nbsp;<span class="{{item.NH3Color}}Color">{{item.temp | number:'0.1-1'}}℃</span></div>
<div *ngIf="item.temp !== '--'" class="detailInfo" style="width: 40%">温度: &nbsp;<span class="{{item.tempColor}}Color">{{item.temp | number:'0.1-1'}}℃</span></div>
<div *ngIf="item.temp === '--'" class="detailInfo" style="width: 40%">温度: &nbsp;{{'--'}}℃</div>
<div *ngIf="item.humi !== '--'" class="detailInfo" style="width: 40%">湿度: &nbsp;<span class="{{item.NH3Color}}Color">{{item.humi | number:'0.0-0'}}% rH</span></div>
<div *ngIf="item.humi !== '--'" class="detailInfo" style="width: 40%">湿度: &nbsp;<span class="{{item.humiColor}}Color">{{item.humi | number:'0.0-0'}}% rH</span></div>
<div *ngIf="item.humi === '--'" class="detailInfo" style="width: 40%">湿度: &nbsp;{{'--'}}% rH</div>
</div>
<div class="bottom">
......
src/app/envCtrl/env-home/env-home.page.ts
View file @ 46c99e87
......@@ -152,12 +152,15 @@ export class EnvHomePage implements OnInit {
getColor(value, maxValue, minValue?) {
if (value !== undefined && value !== null && value !== '' && maxValue !== undefined && maxValue !== null && maxValue !== '') {
if (value > maxValue) {
console.log('超过上限');
return 'alarm';
} else {
if (minValue !== undefined && minValue !== null) {
if (value < minValue) {
console.log('低于下限');
return 'alarm';
} else {
console.log();
return 'normal';
}
}
......
src/app/envCtrl/env-light/env-light.page.html
View file @ 46c99e87
......@@ -49,7 +49,7 @@
<span class="font-content"> 开启时间:&nbsp;<span class="main-color">{{on}}</span></span>
</div>
<div style="width:35%; display: inline-block; float:left; margin-top:35px">
<span class="font-content"> 开启时间:&nbsp;<span class="main-color">{{off}}</span></span>
<span class="font-content"> 关闭时间:&nbsp;<span class="main-color">{{off}}</span></span>
</div>
</div>
<!--<i class="vo v-yue{{curDate}}"></i>-->
......
src/app/envCtrl/env-shower/env-shower.page.html
View file @ 46c99e87
......@@ -41,13 +41,22 @@
<h1 class="main-title-detail">供液泵状态</h1>
<ion-item lines="none" class="item-content" class="item-height">
<div>
<!-- 1-异常，0-正常 -->
<img *ngIf="bump.alarm === 0" src="../../assets/img/model-on.png" class="modelState" style="margin-right: 0px;">
<img *ngIf="bump.alarm === 1" src="../../assets/img/model-alarm.png" class="modelState" style="margin-right: 0px;">
</div>&nbsp;
<span class="font-content">{{bump.alarm === 1 ? '异常' : '运行'}}</span>
<span class="font-content" style="margin-left: 30px">压力:&nbsp;<span class="main-color">{{bump.press}} Mpa</span></span>
<ion-grid>
<ion-row>
<ion-col>
<div style="display: inline-block; float:left;">
<!-- 1-异常，0-正常 -->
<img *ngIf="bump.alarm === 0" src="../../assets/img/model-on.png" class="modelState" style="margin-right: 0px;">
<img *ngIf="bump.alarm === 1" src="../../assets/img/model-alarm.png" class="modelState" style="margin-right: 0px;">
</div>
<div style="display: inline-block; float:left; padding-top: 2px;">
<span class="font-content">{{bump.alarm === 1 ? '异常' : '运行'}}</span>
<span class="font-content" style="margin-left: 30px">压力:&nbsp;<span class="main-color">{{bump.press}} Mpa</span></span>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
<h1 class="main-title-detail">时间参数</h1>
<ion-item lines="none" insert="false">
......
src/app/service/api.ts
View file @ 46c99e87
......@@ -163,15 +163,15 @@ export class Api {
cssClass: 'msgToast',
color: 'medium',
position: wz ? wz : 'top',
buttons: [
{
role: 'cancel',
icon: 'close',
handler: () => {
console.log('Favorite clicked');
}
}
]
// buttons: [
// {
// role: 'cancel',
// icon: 'close',
// handler: () => {
// console.log('Favorite clicked');
// }
// }
// ]
});
toast.present();
}
......
src/app/service/loading.ts
View file @ 46c99e87
......@@ -10,6 +10,7 @@ export class Loading {
countdown = 0;
interval: any;
async presentLoading(time) {
clearInterval(this.interval);
this.countdown = time;
this.loading = await this.loadingController.create({
mode: 'ios',
......
src/global.scss
View file @ 46c99e87
......@@ -163,26 +163,35 @@ img {
.font-content {
font-size: 13px;
color: #a5a5a5;
color: #8e8e8e;
}
.font-note {
font-size: 13px;
color: #a5a5a5;
color: #8e8e8e;
}
.font-smaller {
font-size: 12px;
color: #8e8e8e;
}
.font-mini {
font-size: 10px;
color: #a5a5a5 !important;
color: #8e8e8e !important;
}
.font-ts {
font-size: 13px;
color: #a5a5a5;
color: #8e8e8e;
}
.content-text-color {
color: #a5a5a5;
color: #8e8e8e;
}
.note-text-color {
color: #c3bebe;
}
.main-color {
......@@ -199,7 +208,7 @@ img {
}
.normalColor {
color: #a5a5a5;
color: #8e8e8e;
}
.main-title {
......@@ -294,3 +303,21 @@ img {
.item-height {
height: 38px;
}
.fix-item-padding {
--inner-padding-start: 5px;
--inner-padding-end: 0px;
--padding-start: 0px;
--padding-end: 0px;
}
.badge {
font-size: 10px;
--padding-start: 4px;
--padding-end: 4px;
}
.ion-segment-button {
font-size: 16px;
}
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