Skip to content

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

调整layout

parent 6011ef3c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 892 additions and 136 deletions
src/app/envCtrl/env-add-model/env-add-model.page.html
View file @ 3f220d94
......@@ -16,47 +16,48 @@
<div class="top-line">
</div>
</div>
<div style="max-height: calc(100% - 100px);overflow-y:auto;" class="parentDiv">
<div style="max-height: calc(100% - 130px);overflow-y:auto;" class="parentDiv">
<ion-item-sliding *ngFor="let allCfg of controlConfig">
<ion-item class="fanItem">
<ion-grid>
<ion-row style="width: 100%">
<ion-col size="auto" style="font-size: 13px;">
<ion-item class="fanItem" lines="none">
<ion-label style="width:80px">模式名</ion-label>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">模式名</ion-label>
<ion-input class="inputText" [(ngModel)]="allCfg.config.name" style="width:80px;"></ion-input>
</ion-item>
</ion-col>
<ion-col size="auto" style="font-size: 13px;">
<ion-item class="fanItem" lines="none">
<ion-label style="width:80px">间隔时间</ion-label>
<ion-input class="inputText" style="width:50px;" [(ngModel)]="allCfg.config.interval"></ion-input>
<ion-label>秒</ion-label>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">设置温度</ion-label>
<ion-input class="inputText" style="width:50px;" [(ngModel)]="allCfg.config.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
<ion-label class="font-smaller">℃</ion-label>
</ion-item>
</ion-col>
</ion-row>
<ion-row style="width: 100%">
<ion-col size="auto" style="font-size: 13px;">
<ion-item class="fanItem" lines="none">
<ion-label style="width:80px">设置温度</ion-label>
<ion-input class="inputText" style="width:50px;" [(ngModel)]="allCfg.config.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
<ion-label>℃</ion-label>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">间隔时间</ion-label>
<ion-input class="inputText" style="width:50px;" [(ngModel)]="allCfg.config.interval"></ion-input>
<ion-label class="font-smaller">秒</ion-label>
</ion-item>
</ion-col>
</ion-row>
<ion-row style="width: 100%">
<ion-col size="auto" style="font-size: 13px;">
<ion-item class="fanItem" lines="none">
<ion-label style="width:80px">A区喷淋时间</ion-label>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">A区喷淋时间</ion-label>
<ion-input class="inputText" style="width:50px;" [(ngModel)]="allCfg.config.A"></ion-input>
<ion-label>秒</ion-label>
<ion-label class="font-smaller">秒</ion-label>
</ion-item>
</ion-col>
<ion-col size="auto" style="font-size: 13px;">
<ion-item class="fanItem" lines="none">
<ion-label style="width:80px">B区喷淋时间</ion-label>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">B区喷淋时间</ion-label>
<ion-input class="inputText" style="width:50px;" [(ngModel)]="allCfg.config.B"></ion-input>
<ion-label>秒</ion-label>
<ion-label class="font-smaller">秒</ion-label>
</ion-item>
</ion-col>
</ion-row>
......@@ -74,7 +75,7 @@
</div>
<div style="text-align: center; width:100%; position: absolute; bottom: 10px;">
<ion-button (click)="goBack()" class="btn" color="light" slot="start" style="margin-right: 20px;">取消</ion-button>
<ion-button (click)="saveModels()" class="btn" color="secondary" slot="end">确认</ion-button>
<ion-button (click)="goBack()" class="btn btn-large" color="light" slot="start" style="margin-right: 20px;">取消</ion-button>
<ion-button (click)="saveModels()" class="btn btn-large" color="secondary" slot="end">确认</ion-button>
</div>
</ion-content>
src/app/envCtrl/env-add-model/env-add-model.page.scss
View file @ 3f220d94
......@@ -5,7 +5,7 @@
.fanItem{
font-size: 13px;
--padding-start: 5px;
--padding-start: 15px;
}
.addIcon {
......@@ -49,3 +49,18 @@
margin: 15px 1% 14px 1%;;
float: left;
}
.sliding-item {
--inner-padding-top: 0px;
--inner-padding-bottom: 0px;
--padding-top: 0px;
--padding-bottom: 0px;
--min-height: 30px;
}
.sliding-col {
font-size: 13px;
flex: 0 0 auto;
width: auto;
--ion-grid-column-padding: 0px;
}
src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.html
View file @ 3f220d94
......@@ -53,19 +53,19 @@
</div>
<div style="width: 40%; padding-right: 15px;">
<div class="note" style="margin-bottom: 5px;">
<div style="width:85%; display:inline-block">
<div style="width:80%; display:inline-block">
<span class="font-note" style="text-align: right; padding-right:5px;">未解决数</span>
</div>
<div style="width:15%; display:inline-block;">
<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">
<div style="width:85%; display:inline-block">
<div style="width:80%; display:inline-block">
<span class="font-note" style="text-align: right; padding-right:5px;">总数</span>
</div>
<div style="width:15%; display:inline-block;">
<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>
......
src/app/envCtrl/env-anal-detail/env-anal-detail.page.html
View file @ 3f220d94
......@@ -11,12 +11,12 @@
<div style="width:100%; background-color: unset">
<div style="width: 100%">
<div style="width:20%; display: inline-block; float: left; padding-top: 8px; padding-left: 20px;">
<div style="width:20%; display: inline-block; float: left; padding-top: 13px; padding-left: 20px;">
<span class="font-sub-title" style="display: inline-block; ">选择日期</span>
</div>
<div style="width:60%; text-align: left;padding-left: 20px; display: inline-block;">
<div style=" padding-right: 5px; display: inline-block;">
<ion-datetime displayFormat="YYYY-MM-DD" cancelText="取消" doneText="确认" [(ngModel)]="today" class="font-input" style="display: inline-block;"></ion-datetime>
<div style=" padding-right: 5px; display: inline-block; padding-top:10px; padding-bottom: 10px">
<ion-datetime displayFormat="YYYY-MM-DD" cancelText="取消" doneText="确认" [(ngModel)]="today" class="font-input dateTime" style="display: inline-block;"></ion-datetime>
</div>
<!--<div style="float:left; display: inline-block;">-->
<!--&lt;!&ndash;<img src="../../assets/img/calendar-small.png" style="width: 25px !important; display: inline-block;">&ndash;&gt;-->
......
src/app/envCtrl/env-anal-detail/env-anal-detail.page.scss
View file @ 3f220d94
......@@ -89,3 +89,10 @@
.saveBtn {
width: 100%;
}
.dateTime {
border: 1px solid lightgray;
border-radius: 3px;
text-align: center;
padding: 5px 10px 0px 10px;
}
src/app/envCtrl/env-cfg/env-cfg.page.html
View file @ 3f220d94
......@@ -112,44 +112,45 @@
<ion-icon name="arrow-down" color="secondary" mode="ios" slot="end" class="iconOpen" *ngIf="isOpenShower && isShowerDisplay" (click)="openItem('showerCfg')"></ion-icon>
</div>
</div>
<div class="item-content-div font-content" style="height: unset" *ngIf="isOpenShower && isShowerDisplay" @shrink @stretch>
<div class="item-content-div font-content" style="height: unset; padding-top: unset;" *ngIf="isOpenShower && isShowerDisplay" @shrink @stretch>
<ion-item-sliding *ngFor="let allCfg of shower.controlConfig">
<ion-item class="fanItem">
<ion-grid class="sliding-grid">
<ion-row style="width: 100%">
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem" lines="none">
<ion-col size="auto" style="font-size: 13px;margin-top:5px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">模式名</ion-label>
<ion-input class="inputText font-input" [(ngModel)]="allCfg.config.name" style="width:100px;"></ion-input>
<ion-input class="inputText font-input" [(ngModel)]="allCfg.config.name" style="width:80px;"></ion-input>
</ion-item>
</ion-col>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem" lines="none">
<ion-label style="width:80px" class="font-content">间隔时间</ion-label>
<ion-input class="inputText font-input" style="width:50px;" [(ngModel)]="allCfg.config.interval"></ion-input>
<ion-label class="font-smaller">秒</ion-label>
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">设置温度</ion-label>
<ion-input class="inputText font-input" style="width:50px;" [(ngModel)]="allCfg.config.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
<ion-label class="font-smaller">℃</ion-label>
</ion-item>
</ion-col>
</ion-row>
<ion-row style="width: 100%">
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem" lines="none">
<ion-label style="width:80px" class="font-content">设置温度</ion-label>
<ion-input class="inputText font-input" style="width:50px;" [(ngModel)]="allCfg.config.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
<ion-label class="font-smaller">℃</ion-label>
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">间隔时间</ion-label>
<ion-input class="inputText font-input" style="width:50px;" [(ngModel)]="allCfg.config.interval"></ion-input>
<ion-label class="font-smaller">秒</ion-label>
</ion-item>
</ion-col>
</ion-row>
<ion-row style="width: 100%">
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem" lines="none">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">A区喷淋时间</ion-label>
<ion-input class="inputText font-input" style="width:50px;" [(ngModel)]="allCfg.config.A"></ion-input>
<ion-label class="font-smaller">秒</ion-label>
</ion-item>
</ion-col>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem" lines="none" style="margin-bottom: 5px">
<ion-item class="fanItem sliding-item" lines="none" style="margin-bottom: 5px">
<ion-label style="width:80px" class="font-content">B区喷淋时间</ion-label>
<ion-input class="inputText font-input" style="width:50px;" [(ngModel)]="allCfg.config.B"></ion-input>
<ion-label class="font-smaller">秒</ion-label>
......@@ -158,6 +159,8 @@
</ion-row>
</ion-grid>
</ion-item>
<ion-item-options side="end">
<!--<ion-button color='danger' expand="full" style="width:15%;height:90%" (click)="deleteShowerModel(cfg)">删除</ion-button>-->
<div style="text-content: center; background-color: lightgray;">
......@@ -184,13 +187,13 @@
<ion-icon name="arrow-down" color="secondary" mode="ios" slot="end" class="iconOpen" *ngIf="isOpenLight && isLightDisplay" (click)="openItem('lightCfg')"></ion-icon>
</div>
</div>
<div class="item-content-div font-content" style="height: auto" *ngIf="isOpenLight && isLightDisplay" @shrink @stretch >
<div class="item-content-div font-content" style="height: auto; padding-top: unset;" *ngIf="isOpenLight && isLightDisplay" @shrink @stretch >
<ion-item-sliding *ngFor="let allCfg of light.controlConfig" lines="none">
<ion-item class="fanItem">
<ion-grid class="sliding-grid">
<ion-row style="width: 100%">
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem" lines="none">
<ion-col size="auto" style="font-size: 13px;margin-top:5px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">模式名</ion-label>
<ion-input class="inputText font-input" style="width:80px;" [(ngModel)]="allCfg.config.name"></ion-input>
</ion-item>
......@@ -198,14 +201,14 @@
</ion-row>
<ion-row style="width: 100%">
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem" lines="none">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">日期范围</ion-label>
<!--<ion-input placeholder={{cfg.startTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
<ion-datetime class="inputDateTime timepicker font-input" [(ngModel)]="allCfg.config.startDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
</ion-item>
</ion-col>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem" lines="none">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:15px" class="font-content">~</ion-label>
<!--<ion-input placeholder={{cfg.endTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
<ion-datetime class="inputDateTime timepicker font-input" [(ngModel)]="allCfg.config.stopDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
......@@ -214,14 +217,14 @@
</ion-row>
<ion-row style="width: 100%">
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem" lines="none">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">开灯时间</ion-label>
<ion-datetime class="inputDateTime timepicker font-input" [(ngModel)]="allCfg.config.on" displayFormat="HH:mm" cancelText="取消" doneText="确认"></ion-datetime>
<!--<ion-input style="width:50px;" [(ngModel)]="cfg.on" (ionFocus)="tempHaveTouch()"></ion-input>-->
</ion-item>
</ion-col>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem" lines="none">
<ion-col size="auto" style="font-size: 13px;margin-bottom:10px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">关灯时间</ion-label>
<ion-datetime class="inputDateTime timepicker font-input" [(ngModel)]="allCfg.config.off" displayFormat="HH:mm" cancelText="取消" doneText="确认"></ion-datetime>
<!--<ion-input style="width:50px;" [(ngModel)]="cfg.off" (ionFocus)="tempHaveTouch()"></ion-input>-->
......@@ -251,7 +254,7 @@
<ion-icon name="arrow-down" color="secondary" mode="ios" slot="end" class="iconOpen" *ngIf="isOpenWaterChannel" (click)="openItem('waterChannelCfg')"></ion-icon>
</div>
</div>
<div class="item-content-div font-content" style="height: auto" *ngIf="isOpenWaterChannel" @shrink @stretch >
<div class="item-content-div font-content" style="height: auto;padding-top: unset;" *ngIf="isOpenWaterChannel" @shrink @stretch >
<ion-item class="fanItem" lines="none">
<ion-grid class="sliding-grid">
<ion-row style="width: 100%">
......@@ -376,7 +379,7 @@
<ion-item class="fanItem" lines="none">
<ion-grid class="sliding-grid">
<ion-row>
<ion-item lines="none" class="thiItem font-smaller">计算公式 0.81* 温度 +（0.99*温度-14.3）* 湿度+46.3</ion-item>
<ion-item lines="none" class="thiItem font-smaller">计算公式 0.81* 温度 +(0.99*温度-14.3)* 湿度+46.3</ion-item>
</ion-row>
<ion-row>
<ion-item lines="none" class="thiItem font-content">等级临界值</ion-item>
......
src/app/envCtrl/env-cfg/env-cfg.page.scss
View file @ 3f220d94
......@@ -155,8 +155,14 @@
--inner-padding-bottom: 0px;
--padding-top: 0px;
--padding-bottom: 0px;
--min-height: 30px;
}
.sliding-div {
margin-top:10px;
}
.input-tb-text {
color: black;
}
src/app/envCtrl/env-change-model/env-change-model.page.html
View file @ 3f220d94
......@@ -16,45 +16,45 @@
<div class="top-line">
</div>
</div>
<div style="max-height: calc(100% - 100px);overflow-y:auto;" class="parentDiv">
<div style="max-height: calc(100% - 130px);overflow-y:auto;" class="parentDiv">
<ion-item-sliding *ngFor="let allCfg of controlConfig" >
<ion-item class="fanItem">
<ion-grid>
<ion-row style="width: 100%">
<ion-col size="auto" style="font-size: 13px;">
<ion-item class="fanItem" lines="none">
<ion-label style="width:80px">模式名</ion-label>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">模式名</ion-label>
<ion-input class="inputText" style="width:80px;" [(ngModel)]="allCfg.config.name"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row style="width: 100%">
<ion-col size="auto" style="font-size: 13px;">
<ion-item class="fanItem" lines="none">
<ion-label style="width:80px">日期范围</ion-label>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">日期范围</ion-label>
<!--<ion-input placeholder={{cfg.startTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
<ion-datetime class="inputDateTime timepicker" [(ngModel)]="allCfg.config.startDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
</ion-item>
</ion-col>
<ion-col size="auto" style="font-size: 13px;">
<ion-item class="fanItem" lines="none">
<ion-label style="width:15px">~</ion-label>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none" style="--padding-start:0px;">
<ion-label style="width:10px" class="font-content">~</ion-label>
<!--<ion-input placeholder={{cfg.endTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
<ion-datetime class="inputDateTime timepicker" [(ngModel)]="allCfg.config.stopDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
</ion-item>
</ion-col>
</ion-row>
<ion-row style="width: 100%">
<ion-col size="auto" style="font-size: 13px;">
<ion-item class="fanItem" lines="none">
<ion-label style="width:80px">开灯时间</ion-label>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">开灯时间</ion-label>
<ion-datetime class="inputDateTime timepicker" [(ngModel)]="allCfg.config.on" displayFormat="HH:mm" cancelText="取消" doneText="确认"></ion-datetime>
<!--<ion-input style="width:50px;" [(ngModel)]="cfg.on" (ionFocus)="tempHaveTouch()"></ion-input>-->
</ion-item>
</ion-col>
<ion-col size="auto" style="font-size: 13px;">
<ion-item class="fanItem" lines="none">
<ion-label style="width:80px">关灯时间</ion-label>
<ion-col size="auto" style="font-size: 13px;" class="sliding-col">
<ion-item class="fanItem sliding-item" lines="none">
<ion-label style="width:80px" class="font-content">关灯时间</ion-label>
<ion-datetime class="inputDateTime timepicker" [(ngModel)]="allCfg.config.off" displayFormat="HH:mm" cancelText="取消" doneText="确认"></ion-datetime>
<!--<ion-input style="width:50px;" [(ngModel)]="cfg.off" (ionFocus)="tempHaveTouch()"></ion-input>-->
</ion-item>
......@@ -74,7 +74,7 @@
</ion-item>
</div>
<div style="text-align: center; width:100%; position: absolute; bottom: 10px;">
<ion-button (click)="goBack()" class="btn" color="light" slot="start" style="margin-right: 20px;">取消</ion-button>
<ion-button (click)="saveModels()" class="btn" color="secondary" slot="end">确认</ion-button>
<ion-button (click)="goBack()" class="btn btn-large" color="light" slot="start" style="margin-right: 20px;">取消</ion-button>
<ion-button (click)="saveModels()" class="btn btn-large" color="secondary" slot="end">确认</ion-button>
</div>
</ion-content>
src/app/envCtrl/env-change-model/env-change-model.page.scss
View file @ 3f220d94
......@@ -5,7 +5,7 @@
.fanItem{
font-size: 13px;
--padding-start: 5px;
--padding-start: 15px;
}
.timepicker{
......@@ -53,3 +53,18 @@
margin: 15px 1% 14px 1%;;
float: left;
}
.sliding-item {
--inner-padding-top: 0px;
--inner-padding-bottom: 0px;
--padding-top: 0px;
--padding-bottom: 0px;
--min-height: 30px;
}
.sliding-col {
font-size: 13px;
flex: 0 0 auto;
width: auto;
--ion-grid-column-padding: 0px;
}
src/app/envCtrl/env-detail/env-detail.page.html
View file @ 3f220d94
......@@ -31,7 +31,7 @@
<ion-content color="light">
<ion-router-outlet></ion-router-outlet>
<ion-tabs>
<ion-tab-bar slot="top" mode="ios">
<ion-tab-bar slot="top" mode="ios" style="--border: 0px;">
<ion-tab-button tab="fan" class="tabSelected ion-segment-button">
<ion-label>风机</ion-label>
</ion-tab-button>
......
src/app/envCtrl/env-detail/env-detail.page.scss
View file @ 3f220d94
......@@ -68,6 +68,7 @@
height: 35px;
padding-right: 10px;
text-align: right;
padding-bottom:5px;
}
.inHouseLabel {
......
src/app/envCtrl/env-history/env-history.page.html
View file @ 3f220d94
......@@ -18,55 +18,26 @@
<div echarts [options]="chartOption" class="demo-chart"></div>
<h1 class="main-title">近8个小时环境参数表</h1>
<div class="div-table">
<!--<ngx-datatable class="material" [rows]="tableRows" [columnMode]="'force'" [scrollbarH]="true" [scrollbarV]="true" style="text-align: center; font-size:14px">-->
<!--<ngx-datatable-column name="时间" prop="ts" [width]="80">-->
<!--</ngx-datatable-column>-->
<!--<ngx-datatable-column name="热应激" prop="thi" [width]="80">-->
<!--</ngx-datatable-column>-->
<!--<ngx-datatable-column name="温度" prop="temp" [width]="80">-->
<!--</ngx-datatable-column>-->
<!--<ngx-datatable-column name="湿度" prop="humi" [width]="80">-->
<!--</ngx-datatable-column>-->
<!--<ngx-datatable-column name="氨气浓度" prop="NH3" [width]="90">-->
<!--</ngx-datatable-column>-->
<!--</ngx-datatable>-->
<!--<ngx-datatable class="material"-->
<!--[rows]="tableRows"-->
<!--[columnMode]="'force'"-->
<!--[scrollbarH]="true"-->
<!--[scrollbarV]="true"-->
<!--[headerHeight]="60"-->
<!--[rowHeight]="'auto'"-->
<!--style="text-align: center; font-size:14px">-->
<!--<ngx-datatable-column name="时间" prop="ts" [width]="70">-->
<!--</ngx-datatable-column>-->
<!--<ngx-datatable-column name="热应激" prop="thi" [width]="80">-->
<!--</ngx-datatable-column>-->
<!--<ngx-datatable-column [name]="'温度 <br>℃'" prop="temp" [width]="60">-->
<!--</ngx-datatable-column>-->
<!--<ngx-datatable-column [name]="'湿度 <br>% RH'" prop="humi" [width]="60">-->
<!--</ngx-datatable-column>-->
<!--<ngx-datatable-column [name]="'氨气浓度 <br>ppm'" prop="NH3" [width]="90">-->
<!--</ngx-datatable-column>-->
<!--</ngx-datatable>-->
<ngx-datatable class="material"
[messages]="{emptyMessage: '<br>暂无数据'}"
[rows]="tableRows"
[columnMode]="ColumnMode.force"
[scrollbarH]="true"
[scrollbarV]="true"
[headerHeight]="50"
[headerHeight]="48"
[rowClass]="getRowClass"
[cssClasses]="'font-content'"
style="text-align: center; background-color: #ffffff;" class="font-content">
<ngx-datatable-column name="时间" prop="ts" [width]="70" [headerClass]="getHeaderClass">
<ngx-datatable-column name="时间" prop="ts" [width]="70">
</ngx-datatable-column>
<ngx-datatable-column name="热应激" prop="thi" [width]="70" [headerClass]="getHeaderClass">
<ngx-datatable-column name="热应激" prop="thi" [width]="70">
</ngx-datatable-column>
<ngx-datatable-column name="温度<br>℃" prop="temp" [width]="60" [headerClass]="getHeaderClass">
<ngx-datatable-column name="温度<br>℃" prop="temp" [width]="60">
</ngx-datatable-column>
<ngx-datatable-column name="湿度<br>% RH" prop="humi" [width]="60" [headerClass]="getHeaderClass">
<ngx-datatable-column name="湿度<br>% RH" prop="humi" [width]="60">
</ngx-datatable-column>
<ngx-datatable-column name="氨气浓度<br>ppm" prop="NH3" [width]="90" [headerClass]="getHeaderClass">
<ngx-datatable-column name="氨气浓度<br>ppm" prop="NH3" [width]="90">
</ngx-datatable-column>
</ngx-datatable>
</div>
......
src/app/envCtrl/env-history/env-history.page.scss
View file @ 3f220d94
......@@ -36,10 +36,10 @@
}
.demo-chart {
width: 96%;
width: 94%;
height: 230px;
margin-left: 2%;
margin-right: 2%;
margin-left: 3%;
margin-right: 3%;
margin-bottom: 15px;
}
......@@ -59,9 +59,9 @@
}
.div-table {
width: 96%;
margin-left: 2%;
margin-right: 2%;
width: 94%;
margin-left: 3%;
margin-right: 3%;
margin-bottom: 10px;
}
......
src/app/envCtrl/env-history/env-history.page.ts
View file @ 3f220d94
......@@ -120,28 +120,100 @@ export class EnvHistoryPage implements OnInit {
legend: {
data: ['温度', '湿度', '热应激']
},
visualMap: [
{show: false, type: 'continuous', seriesIndex: 0, min: 0, max: 400},
{show: false, type: 'continuous', seriesIndex: 1, dimension: 0, min: 0, max: 400}],
// visualMap: [
// {show: false, type: 'continuous', seriesIndex: 0, min: 0, max: 400},
// {show: false, type: 'continuous', seriesIndex: 1, dimension: 0, min: 0, max: 400}],
xAxis: {
name: '', type: 'category',
data: times,
axisLine: {
lineStyle: {
color: 'rgba(136,136,136, 1)', // X轴的宽度和颜色
width: 1,
}
},
},
yAxis: [
{name: '温度(℃)', type: 'value', splitLine: {show: false}},
{name: '湿度(%)', type: 'value', max: 100, splitLine: {show: false}}
{
name: '温度(℃)',
type: 'value',
splitLine: {show: false},
position: 'left',
axisLine: {
lineStyle: {
width: 2,
color: 'rgba(97, 199, 204, 0.8)', // y轴的轴线的宽度和颜色
}
},
},
{
name: '湿度(%)',
type: 'value',
max: 100,
splitLine: {show: false},
position: 'right',
axisLine: {
lineStyle: {
width: 2,
color: 'rgba(22, 95, 175, 0.8)', // y轴的轴线的宽度和颜色 #2598D6
}
}
}
// {
// name: '热应激',
// type: 'value',
// min: 0,
// max: 5,
// splitLine: {show: false},
// position: 'right',
// offset: -20,
// axisLine: {
// lineStyle: {
// width: 0,
// color: 'rgba(239, 184, 39,0.5)', // y轴的轴线的宽度和颜色
// }
// }
// },
],
series: [
{name: '温度', data: temp, type: 'line'},
{name: '湿度', data: humi, yAxisIndex: 1, type: 'line'},
{name: '热应激', data: thi, yAxisIndex: 1, type: 'line'}
{
name: '温度',
data: temp,
type: 'line',
itemStyle: {
normal: {
color: 'rgba(97, 199, 204, 0.8)', // '#D71F8B' rgba(215, 31, 139, 0.8)
}
},
},
{
name: '湿度',
data: humi,
yAxisIndex: 1,
type: 'line',
itemStyle: {
normal: {
color: 'rgba(22, 95, 175, 0.8)', // rgba(37, 152, 214,0.5)
}
},
},
{
name: '热应激',
data: thi,
yAxisIndex: 1,
type: 'line',
itemStyle: {
normal: {
color: '#EFB827',
}
},
}
]
};
}
paintTable(param) {
this.tableRows = [];
param.map((item, index) => {
this.tableRows.push({
id: index + 1,
......
src/app/envCtrl/env-home/env-home.page.html
View file @ 3f220d94
......@@ -50,7 +50,7 @@
<div style="width:60%; float:left; padding-top: 4px;">
<span style="text-align: center" class="font-sub-title">{{item.fieldRegionName}}</span><span style="text-align: center; font-size:12px; padding-left:10px; color:red;" *ngIf="item.operationModel === 4">(部分设备处于现控状态)</span>
</div>
<div style="width:25%; float:left; padding-top: 4px; text-align:right;">
<div style="width:25%; float:left; padding-top: 2px; text-align:right;">
<img *ngIf="item.alarm" src="../../../assets/img/alarm-small.png" style="display: inline-block; width:25px !important">
</div>
</div>
......
src/app/envCtrl/tabs/tabs.page.html
View file @ 3f220d94
<router-outlet name='tabs' (activate)='onActivate($event)'></router-outlet>
<ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom" colo="secondary">
<ion-tab-bar slot="bottom" >
<ion-tab-button tab="tab-home" selected="true" color="">
<ion-tab-button tab="tab-home" selected="true" class="tab-btn-color">
<ion-label>首页</ion-label>
<ion-icon name="home"></ion-icon>
</ion-tab-button>
......@@ -13,18 +13,18 @@
<!--<ion-icon name="settings"></ion-icon>-->
<!--</ion-tab-button>-->
<ion-tab-button tab="tab-anal">
<ion-tab-button tab="tab-anal" class="tab-btn-color">
<ion-label>分析</ion-label>
<ion-icon name="stats"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab-alarm">
<ion-tab-button tab="tab-alarm" class="tab-btn-color">
<ion-label>告警</ion-label>
<ion-icon name="hammer"></ion-icon>
<ion-badge color="danger" *ngIf="totalAlert > 0">{{totalAlert}}</ion-badge>
</ion-tab-button>
<ion-tab-button tab="tab-cfg">
<ion-tab-button tab="tab-cfg" class="tab-btn-color">
<ion-label>配置</ion-label>
<ion-icon name="construct"></ion-icon>
</ion-tab-button>
......
src/global.scss
View file @ 3f220d94
......@@ -209,7 +209,7 @@ img {
.light-color {
// color: #828282;
// background-color: rgba(119, 249, 254, 0.8);
background-color: rgba(225,255,255, 0.8);
}
.spinnerColor {
......@@ -247,7 +247,7 @@ img {
.env-detail-content {
padding: 5px;
margin: 5px;
margin: 8px 5px 5px 5px;
background-color: #ffffff;
border-radius: 5px;
}
......@@ -334,3 +334,34 @@ img {
.ion-segment-button {
font-size: 15px;
}
.btn-large {
height: 35px;
}
.ngx-datatable .datatable-header {
display: block;
overflow: hidden;
background-color: #424242;
color: #ffffff;
height: unset !important;
}
.ngx-datatable .datatable-body-cell {
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
.ngx-datatable .datatable-header .datatable-header-cell {
position: relative;
display: inline-block;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
.tab-btn-color {
// --color:#62C7CC;
--color-selected: #62C7CC;
}
src/theme/ngx-datatable/bootstrap.css 0 → 100644
View file @ 3f220d94
/*
bootstrap table theme
*/
.ngx-datatable.bootstrap {
box-shadow: none;
font-size: 13px; }
.ngx-datatable.bootstrap .datatable-header {
height: unset !important; }
.ngx-datatable.bootstrap .datatable-header .datatable-header-cell {
vertical-align: bottom;
padding: 0.75rem;
border-bottom: 1px solid #d1d4d7; }
.ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
line-height: 24px; }
.ngx-datatable.bootstrap .datatable-body .datatable-body-row {
vertical-align: top;
border-top: 1px solid #d1d4d7; }
.ngx-datatable.bootstrap .datatable-body .datatable-body-row.datatable-row-even {
background-color: rgba(0, 0, 0, 0.05); }
.ngx-datatable.bootstrap .datatable-body .datatable-body-row.active {
background-color: #1483ff;
color: #FFF; }
.ngx-datatable.bootstrap .datatable-body .datatable-body-row .datatable-body-cell {
padding: 0.75rem;
text-align: left;
vertical-align: top; }
.ngx-datatable.bootstrap .datatable-body .empty-row {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 0; }
.ngx-datatable.bootstrap .datatable-footer {
background: #424242;
color: #ededed;
margin-top: -1px; }
.ngx-datatable.bootstrap .datatable-footer .page-count {
line-height: 50px;
height: 50px;
padding: 0 1.2rem; }
.ngx-datatable.bootstrap .datatable-footer .datatable-pager {
margin: 0 10px;
vertical-align: top; }
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li {
margin: 10px 0px; }
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a, .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
background-color: #545454;
font-weight: bold; }
.ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
height: 22px;
min-width: 24px;
line-height: 22px;
padding: 0;
border-radius: 3px;
margin: 0 3px;
text-align: center;
vertical-align: top;
text-decoration: none;
vertical-align: bottom;
color: #ededed; }
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
font-size: 18px;
line-height: 27px;
padding: 0 3px; }
.ngx-datatable.bootstrap .datatable-summary-row .datatable-body-row .datatable-body-cell {
font-weight: bold; }
src/theme/ngx-datatable/dark.css 0 → 100644
View file @ 3f220d94
.ngx-datatable.dark {
box-shadow: none;
background: #1b1e27;
border: 1px solid #2f3646;
color: #fff;
font-size: 13px; }
.ngx-datatable.dark .datatable-header {
background: #181b24;
color: #72809b; }
.ngx-datatable.dark .datatable-header .datatable-header-cell {
text-align: left;
padding: .5rem 1.2rem;
font-weight: bold; }
.ngx-datatable.dark .datatable-header .datatable-header-cell .datatable-header-cell-label {
line-height: 24px; }
.ngx-datatable.dark .datatable-body {
background: #1a1e28; }
.ngx-datatable.dark .datatable-body .datatable-body-row {
border-top: 1px solid #2f3646; }
.ngx-datatable.dark .datatable-body .datatable-body-row .datatable-body-cell {
text-align: left;
padding: .5rem 1.2rem;
vertical-align: top; }
.ngx-datatable.dark .datatable-body .datatable-body-row:hover {
background: #171b24;
transition-property: background;
transition-duration: .3s;
transition-timing-function: linear; }
.ngx-datatable.dark .datatable-body .datatable-body-row:focus {
background-color: #232837; }
.ngx-datatable.dark .datatable-body .datatable-body-row.active {
background-color: #1483ff;
color: #FFF; }
.ngx-datatable.dark .datatable-footer {
background: #232837;
color: #72809b;
margin-top: -1px; }
.ngx-datatable.dark .datatable-footer .page-count {
line-height: 50px;
height: 50px;
padding: 0 1.2rem; }
.ngx-datatable.dark .datatable-footer .datatable-pager {
margin: 0 10px;
vertical-align: top; }
.ngx-datatable.dark .datatable-footer .datatable-pager ul li {
margin: 10px 0px; }
.ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled).active a,
.ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
background-color: #455066;
font-weight: bold; }
.ngx-datatable.dark .datatable-footer .datatable-pager a {
height: 22px;
min-width: 24px;
line-height: 22px;
padding: 0;
border-radius: 3px;
margin: 0 3px;
text-align: center;
vertical-align: top;
text-decoration: none;
vertical-align: bottom;
color: #72809b; }
.ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-left,
.ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-skip,
.ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-right,
.ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-prev {
font-size: 18px;
line-height: 27px;
padding: 0 3px; }
.ngx-datatable.dark .datatable-summary-row .datatable-body-row {
background-color: #14171f; }
.ngx-datatable.dark .datatable-summary-row .datatable-body-row:hover {
background-color: #14171f; }
.ngx-datatable.dark .datatable-summary-row .datatable-body-row .datatable-body-cell {
font-weight: bold; }
src/theme/ngx-datatable/index.css 0 → 100644
View file @ 3f220d94
/**
* ngx-datatable v"15.0.2" (https://github.com/swimlane/ngx-datatable)
* Copyright 2019
* Licensed under MIT
*/
.ngx-datatable {
display: block;
overflow: hidden;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
-webkit-transform: translate3d(0, 0, 0);
/**
* Vertical Scrolling Adjustments
*/
/**
* Horizontal Scrolling Adjustments
*/
/**
* Fixed Header Height Adjustments
*/
/**
* Fixed row height adjustments
*/
/**
* Shared Styles
*/
/**
* Header Styles
*/
/**
* Body Styles
*/
/**
* Footer Styles
*/ }
.ngx-datatable [hidden] {
display: none !important; }
.ngx-datatable *, .ngx-datatable *:before, .ngx-datatable *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.ngx-datatable.scroll-vertical .datatable-body {
overflow-y: auto; }
.ngx-datatable.scroll-vertical.virtualized .datatable-body .datatable-row-wrapper {
position: absolute; }
.ngx-datatable.scroll-horz .datatable-body {
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.ngx-datatable.fixed-header .datatable-header .datatable-header-inner {
white-space: nowrap; }
.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.ngx-datatable.fixed-row .datatable-scroll {
white-space: nowrap; }
.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row {
white-space: nowrap; }
.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-cell {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-group-cell {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.ngx-datatable .datatable-body-row,
.ngx-datatable .datatable-row-center,
.ngx-datatable .datatable-header-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-flow: row;
-o-flex-flow: row;
flex-flow: row; }
.ngx-datatable .datatable-body-cell,
.ngx-datatable .datatable-header-cell {
overflow-x: hidden;
vertical-align: top;
display: inline-block;
line-height: 1.625; }
.ngx-datatable .datatable-body-cell:focus,
.ngx-datatable .datatable-header-cell:focus {
outline: none; }
.ngx-datatable .datatable-row-left,
.ngx-datatable .datatable-row-right {
z-index: 9; }
.ngx-datatable .datatable-row-left,
.ngx-datatable .datatable-row-center,
.ngx-datatable .datatable-row-group,
.ngx-datatable .datatable-row-right {
position: relative; }
.ngx-datatable .datatable-header {
display: block;
overflow: hidden; }
.ngx-datatable .datatable-header .datatable-header-inner {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-align-items: stretch; }
.ngx-datatable .datatable-header .datatable-header-cell {
position: relative;
display: inline-block; }
.ngx-datatable .datatable-header .datatable-header-cell.sortable .datatable-header-cell-wrapper {
cursor: pointer; }
.ngx-datatable .datatable-header .datatable-header-cell.longpress .datatable-header-cell-wrapper {
cursor: move; }
.ngx-datatable .datatable-header .datatable-header-cell .sort-btn {
line-height: 100%;
vertical-align: middle;
display: inline-block;
cursor: pointer; }
.ngx-datatable .datatable-header .datatable-header-cell .resize-handle, .ngx-datatable .datatable-header .datatable-header-cell .resize-handle--not-resizable {
display: inline-block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 5px;
padding: 0 4px;
visibility: hidden; }
.ngx-datatable .datatable-header .datatable-header-cell .resize-handle {
cursor: ew-resize; }
.ngx-datatable .datatable-header .datatable-header-cell.resizeable:hover .resize-handle {
visibility: visible; }
.ngx-datatable .datatable-header .datatable-header-cell:hover .resize-handle--not-resizable {
visibility: visible; }
.ngx-datatable .datatable-header .datatable-header-cell .targetMarker {
position: absolute;
top: 0;
bottom: 0; }
.ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromLeft {
right: 0; }
.ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromRight {
left: 0; }
.ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap {
height: inherit; }
.ngx-datatable .datatable-body {
position: relative;
z-index: 10;
display: block; }
.ngx-datatable .datatable-body .datatable-scroll {
display: inline-block; }
.ngx-datatable .datatable-body .datatable-row-detail {
overflow-y: hidden; }
.ngx-datatable .datatable-body .datatable-row-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.ngx-datatable .datatable-body .datatable-body-row {
outline: none; }
.ngx-datatable .datatable-body .datatable-body-row > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.ngx-datatable .datatable-footer {
display: block;
width: 100%; }
.ngx-datatable .datatable-footer .datatable-footer-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%; }
.ngx-datatable .datatable-footer .selected-count .page-count {
-webkit-box-flex: 1;
-ms-flex: 1 1 40%;
flex: 1 1 40%; }
.ngx-datatable .datatable-footer .selected-count .datatable-pager {
-webkit-box-flex: 1;
-ms-flex: 1 1 60%;
flex: 1 1 60%; }
.ngx-datatable .datatable-footer .page-count {
-webkit-box-flex: 1;
-ms-flex: 1 1 20%;
flex: 1 1 20%; }
.ngx-datatable .datatable-footer .datatable-pager {
-webkit-box-flex: 1;
-ms-flex: 1 1 80%;
flex: 1 1 80%;
text-align: right; }
.ngx-datatable .datatable-footer .datatable-pager .pager,
.ngx-datatable .datatable-footer .datatable-pager .pager li {
padding: 0;
margin: 0;
display: inline-block;
list-style: none; }
.ngx-datatable .datatable-footer .datatable-pager .pager li, .ngx-datatable .datatable-footer .datatable-pager .pager li a {
outline: none; }
.ngx-datatable .datatable-footer .datatable-pager .pager li a {
cursor: pointer;
display: inline-block; }
.ngx-datatable .datatable-footer .datatable-pager .pager li.disabled a {
cursor: not-allowed; }
/*# sourceMappingURL=index.map*/
\ No newline at end of file
src/theme/ngx-datatable/material.css 0 → 100644
View file @ 3f220d94
This diff is collapsed.
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