Commit 504b7e4a authored by yating.lin's avatar yating.lin

修改layout

parent 1f868fe3
<div class="kanban">
<div class="kanban-left">
<div class="title font-sub-title" >
<p style="margin-top:7px">{{name1}}</p>
</div>
<div class="sub" style="text-align: center;margin-top: 10px;">
<!--<ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
<ion-row>
<ion-col style="padding: 0px 0px 0px 10px;">
<img [src]="iconImg1" [ngStyle]="{'width': iconWidth, 'margin-left': '5px'}" >
</ion-col>
<ion-col style="padding-left: 0px;">
<div style="padding-left: 5px;">
<span style="padding-bottom: 10px" [ngStyle]="{'color':fontColor1, 'font-size': fontSize}">{{inData1}}</span>
</div>
</ion-col>
<ion-col size="1" style="width:1px; padding-left:0px; padding-right: 0px; padding-top:8px;">
<span style="border-right: 1px solid #E0E0E0; font-size:30px;vertical-align: center"></span>
</ion-col>
<ion-col style="padding: 0px 0px 0px 10px;">
<img [src]="iconImg2" [ngStyle]="{'width': iconWidth}">
</ion-col>
<ion-col style="padding-left: 0px;">
<div>
<span style="padding-bottom: 10px" [ngStyle]="{'color':fontColor2, 'font-size': fontSize}">{{inData2}}</span>
</div>
</ion-col>
</ion-row>
</div>
</div>
<div class="kanban-right">
<div class="title" style="">
<p style="margin-top:7px">{{name2}}</p>
</div>
<div class="sub" style="text-align: center;margin-top: 10px;">
<!--<ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
<ion-row>
<ion-col size="1" style="width:1px; padding-left:0px; padding-right: 0px; padding-top:8px;">
<span style="border-right: 1px solid #E0E0E0; font-size:30px;vertical-align: center"></span>
</ion-col>
<ion-col style="padding: 0px 0px 0px 10px;">
<img [src]="iconImg3" style="width: 90% !important; height: 90%; padding-top: 3px;">
</ion-col>
<ion-col style="padding-left: 0px;">
<div style="padding-left: 5px;">
<span style="padding-bottom: 10px" [ngStyle]="{'color':fontColor3, 'font-size': fontSize}">{{inData3}}</span>
</div>
</ion-col>
</ion-row>
</div>
</div>
</div>
.kanban {
width: 99%;
height: 100px;
align-items:center;
justify-content:
center;text-align: center;
background-image: url('../../../assets/bg/home_bar.png');
background-size:100% 100%;-moz-background-size:100% 100%;
}
.kanban-left{
// border: #1e2023 1px solid;
width:66%;
display: inline-block;
float: left;
//height: auto;
//height: 100px;
//align-items:center;
//justify-content:
//center;text-align: center;
//background: url('../../../assets/bg/home_bar.png') no-repeat;
//background-size:100% 100%;-moz-background-size:100% 100%;
}
.kanban-right{
// border: #1e2023 1px solid;
width:32%;
display: inline-block;
float: left;
//height: auto;
//height: 100px;
//align-items:center;
//justify-content:
// center;text-align: center;
////background: url('../../../assets/bg/home_bar.png') no-repeat;
//background-image: url('../../../assets/bg/home_bar.png');
//background-size:100% 100%;-moz-background-size:100% 100%;
}
.title{
margin-bottom: 5px;
padding-top: 5px;
align-items:center;
justify-content: center;
color: #717171;
font-size: 15px;
}
.sub{
padding-bottom: 10px;
}
.sub-left{
font-size: 20px; //30
position:relative;
// border-right: #cccccc 1px solid;
display: inline;
padding-left: 20px;
}
.sub-right{
font-size: 20px; //30
position:relative;
display: inline;
width: 50%;
padding-left: 20px;
color: #285B90;
}
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { KanbanDoubleComponent } from './kanban-double.component';
describe('KanbanDoubleComponent', () => {
let component: KanbanDoubleComponent;
let fixture: ComponentFixture<KanbanDoubleComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ KanbanDoubleComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(KanbanDoubleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'v-kanban-double',
templateUrl: './kanban-double.component.html',
styleUrls: ['./kanban-double.component.scss'],
})
export class KanbanDoubleComponent implements OnInit {
@Input()
name1 = '';
@Input()
name2 = '';
@Input()
iconImg1 = '';
@Input()
iconImg2 = '';
@Input()
iconImg3 = '';
@Input()
inData1 = '';
@Input()
inData2 = '';
@Input()
inData3 = '';
@Input()
iconColor1 = '';
@Input()
iconColor2 = '';
@Input()
iconColor3 = '';
@Input()
fontColor1 = '';
@Input()
fontColor2 = '';
@Input()
fontColor3 = '';
@Input()
iconWidth = '';
@Input()
fontSize = '';
constructor() { }
ngOnInit() {
this.fontColor1 = this.iconColor1;
this.fontColor2 = this.iconColor2;
this.fontColor3 = this.iconColor3;
}
}
<div class="kanban">
<div class="title" style="">
<p style="margin-top:7px">{{name}}</p>
<!--<p >{{unit}}</p>-->
</div>
<div class="sub" style="text-align: center;margin-top: 15px;">
<!--<ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
<ion-row>
<ion-col style="padding: 0px;">
<img [src]="iconImg" [ngStyle]="{'width': iconWidth}">
<!--<i ngClass={{iconClass}} [ngStyle]="{'color': iconColor, 'font-size': iconSize}" ></i>-->
</ion-col>
<ion-col size="1" style="width:1px; padding-left:0px; padding-right: 0px">
<span style="border-right: 1px solid #E0E0E0; font-size:13px;vertical-align: center"></span>
</ion-col>
<ion-col style="padding-left: 0px;">
<span style="padding-bottom: 10px" [ngStyle]="{'color':fontColor, 'font-size': fontSize}">{{inData}}</span>
</ion-col>
</ion-row>
</div>
</div>
.kanban{
// border: #1e2023 1px solid;
width:100%;
//height: auto;
height: 100px;
align-items:center;
justify-content:
center;text-align: center;
//background: url('../../../assets/bg/home_bar.png') no-repeat;
background-image: url('../../../assets/bg/home_bar.png');
background-size:100% 100%;-moz-background-size:100% 100%;
}
.title{
margin-bottom: 5px;
padding-top: 5px;
align-items:center;
justify-content: center;
color: #717171;
font-size: 14px;
}
.sub{
padding-bottom: 10px;
}
.sub-left{
font-size: 20px; //30
position:relative;
// border-right: #cccccc 1px solid;
display: inline;
padding-left: 20px;
}
.sub-right{
font-size: 20px; //30
position:relative;
display: inline;
width: 50%;
padding-left: 20px;
color: #285B90;
}
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { KanbanLargeComponent } from './kanban-large.component';
describe('KanbanLargeComponent', () => {
let component: KanbanLargeComponent;
let fixture: ComponentFixture<KanbanLargeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ KanbanLargeComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(KanbanLargeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'v-kanban-large',
templateUrl: './kanban-large.component.html',
styleUrls: ['./kanban-large.component.scss'],
})
export class KanbanLargeComponent implements OnInit {
@Input()
name = '';
@Input()
unit = '';
@Input()
iconImg = '';
@Input()
iconColor = '';
@Input()
fontColor = '';
@Input()
iconWidth = '';
@Input()
inData = '';
@Input()
fontSize = '';
constructor() { }
ngOnInit() {
this.fontColor = this.iconColor;
}
}
<div class="kanban">
<div class="sub" style="text-align: center;">
<ion-row style="padding-top:10px;">
<!--<ion-col style="padding: 0px;text-align: right;">-->
<!--<img [src]="iconImg" style="width: 30px!important; height: 30px;">-->
<!--</ion-col>-->
<!--<ion-col style="padding-left: 0px;text-align: left;">-->
<!--<span style="padding-bottom: 10px" [ngStyle]="{'color':fontColor, 'font-size': fontSize}">{{name}}</span>-->
<!--</ion-col>-->
<ion-col style="padding: 0px;text-align: right;">
<div style="margin: auto">
<div style="text-align: center">
<div style="display: inline-block; float:left" [ngStyle]="{'width': iconWidth}">
<img [src]="iconImg" style="width: 23px!important; height: 23px; display: inline-block; ">
</div>
<div style="display: inline-block; float:left">
<span style="display: inline-block; padding-top: 5px; font-size:14px" class="content-text-color">{{name}}</span>
</div>
</div>
</div>
</ion-col>
</ion-row>
</div>
<div class="title" style="">
<p style="margin-top:7px; font-size:15px;" [ngStyle]="{'color':fontColor}">{{inData}}{{unit}}</p>
</div>
</div>
.kanban{
// border: #1e2023 1px solid;
width:100%;
//height: auto;
height: 80px;
align-items:center;
justify-content:
center;text-align: center;
//background: url('../../../assets/bg/home_bar.png') no-repeat;
background-image: url('../../../assets/bg/home_bar.png');
background-size:100% 100%;-moz-background-size:100% 100%;
}
.title{
margin-bottom: 5px;
align-items:center;
justify-content: center;
color: #717171;
font-size: 14px;
}
.sub{
padding-bottom: 5px;
}
.sub-left{
font-size: 20px; //30
position:relative;
// border-right: #cccccc 1px solid;
display: inline;
padding-left: 20px;
}
.sub-right{
font-size: 20px; //30
position:relative;
display: inline;
width: 50%;
padding-left: 20px;
color: #285B90;
}
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { KanbanSmallComponent } from './kanban-small.component';
describe('KanbanSmallComponent', () => {
let component: KanbanSmallComponent;
let fixture: ComponentFixture<KanbanSmallComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ KanbanSmallComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(KanbanSmallComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'v-kanban-small',
templateUrl: './kanban-small.component.html',
styleUrls: ['./kanban-small.component.scss'],
})
export class KanbanSmallComponent implements OnInit {
@Input()
name = '';
@Input()
unit = '';
@Input()
iconImg = '';
@Input()
iconColor = '';
@Input()
fontColor = '';
@Input()
iconWidth = '';
@Input()
inData = '';
@Input()
fontSize = '';
@Input()
iconStyle = '';
constructor() { }
ngOnInit() {
this.fontColor = this.iconColor;
}
}
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import {KanbanComponent} from '../kanban/kanban.component'; import {KanbanComponent} from '../kanban/kanban.component';
import {KanbanLargeComponent} from '../kanban-large/kanban-large.component';
import {KanbanDoubleComponent} from '../kanban-double/kanban-double.component';
import {KanbanSmallComponent} from '../kanban-small/kanban-small.component';
import {IonicModule} from '@ionic/angular'; import {IonicModule} from '@ionic/angular';
import {SwitchComponent} from '../switch/switch.component'; import {SwitchComponent} from '../switch/switch.component';
import {LoadingBumpComponent} from '../loading-bump/loading-bump.component'; import {LoadingBumpComponent} from '../loading-bump/loading-bump.component';
...@@ -8,6 +11,9 @@ import {LoadingBumpComponent} from '../loading-bump/loading-bump.component'; ...@@ -8,6 +11,9 @@ import {LoadingBumpComponent} from '../loading-bump/loading-bump.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
KanbanComponent, KanbanComponent,
KanbanLargeComponent,
KanbanDoubleComponent,
KanbanSmallComponent,
SwitchComponent, SwitchComponent,
LoadingBumpComponent], LoadingBumpComponent],
imports: [ imports: [
...@@ -16,6 +22,9 @@ import {LoadingBumpComponent} from '../loading-bump/loading-bump.component'; ...@@ -16,6 +22,9 @@ import {LoadingBumpComponent} from '../loading-bump/loading-bump.component';
], ],
exports: [ exports: [
KanbanComponent, KanbanComponent,
KanbanLargeComponent,
KanbanDoubleComponent,
KanbanSmallComponent,
SwitchComponent, SwitchComponent,
LoadingBumpComponent LoadingBumpComponent
] ]
......
<ion-header> <ion-header>
<ion-toolbar color="secondary"> <ion-toolbar color="dark">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button mode="ios" text=""></ion-back-button> <ion-back-button mode="ios" text=""></ion-back-button>
</ion-buttons> </ion-buttons>
......
<ion-header translucent="false"> <ion-header translucent="false">
<ion-toolbar color="secondary"> <ion-toolbar color="dark">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button mode="ios" text="" ></ion-back-button> <ion-back-button mode="ios" text="" ></ion-back-button>
</ion-buttons> </ion-buttons>
......
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar color="dark">
<ion-title class="title">牛舍告警一览</ion-title> <ion-title class="title">牛舍告警一览</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
......
<ion-header> <ion-header>
<ion-toolbar color="secondary"> <ion-toolbar color="dark">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button mode="ios" text="" id="back"></ion-back-button> <ion-back-button mode="ios" text="" id="back"></ion-back-button>
</ion-buttons> </ion-buttons>
......
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar color="dark">
<ion-title class="title">牛舍环境质量分析</ion-title> <ion-title class="title">牛舍环境质量分析</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
......
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar color="dark">
<ion-title class="title">配置</ion-title> <ion-title class="title">配置</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
......
...@@ -169,6 +169,7 @@ export class EnvCfgPage implements OnInit { ...@@ -169,6 +169,7 @@ export class EnvCfgPage implements OnInit {
// 获取当前牛舍配置信息 // 获取当前牛舍配置信息
selectCowshed() { selectCowshed() {
if (this.curFieldRegionNo !== null && this.curFieldRegionNo !== '') {
this.api.config.getByFieldRegionNo([{fieldRegionNo: this.curFieldRegionNo}, (data) => { this.api.config.getByFieldRegionNo([{fieldRegionNo: this.curFieldRegionNo}, (data) => {
if (data) { if (data) {
data.environmentConfigJson = JSON.parse(data.environmentConfigJson.toString()); data.environmentConfigJson = JSON.parse(data.environmentConfigJson.toString());
...@@ -176,12 +177,14 @@ export class EnvCfgPage implements OnInit { ...@@ -176,12 +177,14 @@ export class EnvCfgPage implements OnInit {
this.curCowshed.isWisdomModelChecked = this.curCowshed.isWisdomModel ? true : false; this.curCowshed.isWisdomModelChecked = this.curCowshed.isWisdomModel ? true : false;
this.initConfig(); this.initConfig();
} else { } else {
console.log('获取牛舍配置信息失败');
this.api.presentMsgToast('获取数据失败'); this.api.presentMsgToast('获取数据失败');
this.isError = true; this.isError = true;
} }
this.load.offLoad(); this.load.offLoad();
}]); }]);
} }
}
// 显示牛舍配置信息 // 显示牛舍配置信息
// 控制模式为[手控]时,模式框非表示 // 控制模式为[手控]时,模式框非表示
...@@ -393,7 +396,9 @@ export class EnvCfgPage implements OnInit { ...@@ -393,7 +396,9 @@ export class EnvCfgPage implements OnInit {
if (data && data.code !== 0) { if (data && data.code !== 0) {
this.api.presentMsgToast(data.message); this.api.presentMsgToast(data.message);
} else { } else {
this.api.presentMsgToast('获取数据失败'); console.log('更新牛舍配置信息失败');
console.log(data.code);
this.api.presentMsgToast('更新数据失败');
this.isError = true; this.isError = true;
} }
this.selectCowshed(); this.selectCowshed();
......
<ion-header> <ion-header>
<ion-toolbar color="secondary"> <ion-toolbar color="dark">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button mode="ios" text="" id="back"></ion-back-button> <ion-back-button mode="ios" text="" id="back"></ion-back-button>
</ion-buttons> </ion-buttons>
......
<ion-header> <ion-header>
<ion-toolbar color="secondary"> <ion-toolbar color="dark">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button mode="ios" text="" ></ion-back-button> <ion-back-button mode="ios" text="" ></ion-back-button>
</ion-buttons> </ion-buttons>
...@@ -13,15 +13,15 @@ ...@@ -13,15 +13,15 @@
<span *ngIf="item.operationModel === 1 || item.operationModel === 0" class="online">{{item.operationModel ? '远控' :'现控'}} </span> <span *ngIf="item.operationModel === 1 || item.operationModel === 0" class="online">{{item.operationModel ? '远控' :'现控'}} </span>
<span *ngIf="item.operationModel === 4" class="offline">现控 </span> <span *ngIf="item.operationModel === 4" class="offline">现控 </span>
<span *ngIf="item.operationModel" [ngClass]="{'online': item.isWisdomModel, 'offline': !item.isWisdomModel}" class="online">智控 </span> <span *ngIf="item.operationModel" [ngClass]="{'online': item.isWisdomModel, 'offline': !item.isWisdomModel}" class="online">智控 </span>
<span *ngIf="item.ts" class="right" style="padding-top: 3px;">{{item.ts | date: 'yyyy-MM-dd HH:mm'}}</span> <span *ngIf="item.ts" class="right font-ts">{{item.ts | date: 'yyyy-MM-dd HH:mm'}}</span>
</div> </div>
<div style="background-color: #F0F0F0;" align="center"> <div style="background-color: #F0F0F0;" align="center">
<v-kanban class="home-bar" name="温度" [inData]="item.temp" iconClass="vo v-wendu" iconColor="#285B90" iconSize="20px" fontSize="14px"></v-kanban> <v-kanban-small class="home-bar" name="温度" [inData]="item.temp" iconWidth="50%" unit="℃" [iconImg]="'../../assets/img/icon-temp.png'" iconColor="#61C7CC" fontSize="14px"></v-kanban-small>
<v-kanban class="home-bar" name="湿度" [inData]="item.humi" iconClass="vo v-shidu" iconColor="#285B90" iconSize="20px" fontSize="14px"></v-kanban> <v-kanban-small class="home-bar" name="湿度" [inData]="item.humi" iconWidth="50%" unit="% rH" [iconImg]="'../../assets/img/icon-humi.png'" iconColor="#61C7CC" fontSize="14px"></v-kanban-small>
<v-kanban class="home-bar" name="热应激" [inData]="item.heatStressLevelName" iconClass="vo v-nav-ico" [iconColor]="item.heatStressColor" iconSize="20px" fontSize="14px"></v-kanban> <v-kanban-small class="home-bar" name="热应激" [inData]="item.heatStressLevelName" iconWidth="35%" [iconImg]="'../../assets/img/icon-heat.png'" [iconColor]="item.heatStressColor" fontSize="14px"></v-kanban-small>
<v-kanban class="home-bar" name="在舍状态" [inData]="inHouseName" iconClass="vo v-dapeng-" iconColor="#285B90" iconSize="20px" fontSize="14px"></v-kanban> <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>
<div class="inHouseDiv"> <div class="inHouseDiv font-content-title">
<ion-label class="inHouseLabel">在离舍开关控制</ion-label> <ion-label class="inHouseLabel">在离舍开关控制</ion-label>
<ion-toggle mode="ios" [(ngModel)]="inHouseState" [checked]="inHouseState" (click)="inHouseControl(inHouseState)"></ion-toggle> <ion-toggle mode="ios" [(ngModel)]="inHouseState" [checked]="inHouseState" (click)="inHouseControl(inHouseState)"></ion-toggle>
<!--<v-switch (click)="inHouseControl(item.inHouse)" [value]="item.inHouse.inHouse" [loading]="loading"></v-switch>--> <!--<v-switch (click)="inHouseControl(item.inHouse)" [value]="item.inHouse.inHouse" [loading]="loading"></v-switch>-->
......
.right { .right {
float: right; float: right;
color: #aaa; padding-top: 5px;
} }
.title{ .title{
...@@ -12,34 +12,36 @@ ...@@ -12,34 +12,36 @@
.home-bar{ .home-bar{
display: inline-block; display: inline-block;
margin-right: 3px; margin: 3px;
width: 23%; width: 23%;
} }
.online { //.online {
border-radius: 2px; // border-radius: 6px;
background-color: #61C7CC; // background-color: #61C7CC;
display: inline-block; // display: inline-block;
vertical-align: middle; // vertical-align: middle;
box-shadow: #ccc 0.5px 0.5px 3px; // box-shadow: #ccc 0.5px 0.5px 3px;
padding: 1px 1px 1px 1px; // padding: 1px 1px 1px 1px;
color: white; // color: white;
margin-left: 5px; // margin-left: 5px;
} // font-size: 13px;
//}
.offline { //
border-radius: 2px; //.offline {
background-color: #9ea7b4; // border-radius: 2px;
display: inline-block; // background-color: #9ea7b4;
vertical-align: middle; // display: inline-block;
box-shadow: #ccc 0.5px 0.5px 3px; // vertical-align: middle;
padding: 1px 1px 1px 1px; // box-shadow: #ccc 0.5px 0.5px 3px;
color: white; // padding: 1px 1px 1px 1px;
margin-left: 5px; // color: white;
} // margin-left: 5px;
// font-size: 13px;
//}
.top { .top {
padding: 7px 5px; padding: 5px;
background-color: #F0F0F0 background-color: #F0F0F0
} }
...@@ -65,7 +67,6 @@ ...@@ -65,7 +67,6 @@
background-color: rgb(240, 240, 240); background-color: rgb(240, 240, 240);
height: 40px; height: 40px;
padding-right: 10px; padding-right: 10px;
padding: 5px;
text-align: right; text-align: right;
} }
......
...@@ -32,7 +32,7 @@ export class EnvDetailPage implements OnInit { ...@@ -32,7 +32,7 @@ export class EnvDetailPage implements OnInit {
temp: 0, temp: 0,
humi: 0, humi: 0,
heatStressLevel: 0, heatStressLevel: 0,
heatStressColor: '#52fabb', heatStressColor: '#61C7CC',
heatStressLevelName: '无', heatStressLevelName: '无',
online: 0, online: 0,
operationModel: 1, operationModel: 1,
...@@ -112,10 +112,10 @@ export class EnvDetailPage implements OnInit { ...@@ -112,10 +112,10 @@ export class EnvDetailPage implements OnInit {
this.waterchannelLink = '/env-detail/waterchannel/' + this.fieldRegionNo; this.waterchannelLink = '/env-detail/waterchannel/' + this.fieldRegionNo;
if (this.item) { if (this.item) {
this.item.heatStressColor = this.item.heatStressLevel === 0 ? '#52fabb' : this.item.heatStressColor = this.item.heatStressLevel === 0 ? '#13AE67' :
this.item.heatStressLevel === 1 ? '#52fabb' : this.item.heatStressLevel === 1 ? '#61C7CC' :
this.item.heatStressLevel === 2 ? '#FAB139' : this.item.heatStressLevel === 2 ? '#F8B72D' :
this.item.heatStressLevel === 3 ? '#ff6a1f' : '#b22222'; this.item.heatStressLevel === 3 ? '#F2401C' : '#F2401C';
} }
} }
......
...@@ -54,13 +54,13 @@ ...@@ -54,13 +54,13 @@
[(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle> [(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle>
<!--<v-switch (click)="allCheck(batchSwitch)" [value]="batchSwitch.op" [disabled]="batchSwitch.disabled" [loading]="batchSwitch.load"></v-switch>--> <!--<v-switch (click)="allCheck(batchSwitch)" [value]="batchSwitch.op" [disabled]="batchSwitch.disabled" [loading]="batchSwitch.load"></v-switch>-->
</ion-item> </ion-item>
<div> <div class="card-div">
<ion-card *ngFor="let device of devices" class="card" color="white"> <ion-card mode="ios" *ngFor="let device of devices" class="card" color="white">
<ion-card-header class="cardHeader"> <ion-card-header mode="ios" class="cardHeader">
<ion-card-subtitle align="center">{{device.fieldDeviceName}}</ion-card-subtitle> <ion-card-subtitle mode="ios" align="center" class="font-mini">{{device.fieldDeviceName}}</ion-card-subtitle>
</ion-card-header> </ion-card-header>
<ion-card-content class="cardContent"> <ion-card-content mode="ios" class="cardContent">
<!--<ion-toggle slot="middle" [checked]="device.state"></ion-toggle>--> <!--<ion-toggle slot="middle" [checked]="device.state"></ion-toggle>-->
<ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled" <ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled"
[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle> [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
float: none; float: none;
display: inline-block; display: inline-block;
width:22%; width:22%;
margin: 5px; margin: 1.5%;
} }
.btn-switch { .btn-switch {
...@@ -19,16 +19,16 @@ ...@@ -19,16 +19,16 @@
.cardHeader { .cardHeader {
--padding-inline-start: 0px !important; --padding-inline-start: 0px !important;
--padding-inline-end: 0px !important; --padding-inline-end: 0px !important;
padding: 10px; padding: 10px 0px 0px 0px;
} }
.cardContent { .cardContent {
padding: 5px; padding: 3px 5px 5px 5px;
text-align: center; text-align: center;
} }
.modelState { //.modelState {
display: inline-block; // display: inline-block;
margin-right: 10px; // margin-right: 10px;
width:23px !important // width:23px !important
} //}
...@@ -200,7 +200,7 @@ export class EnvFanPage implements OnInit { ...@@ -200,7 +200,7 @@ export class EnvFanPage implements OnInit {
}; };
// this.comm.remain = 60; // this.comm.remain = 60;
this.loading.presentLoading(60); this.loading.presentLoading(80);
this.api.control.controlCowedSwitch([req, (data) => { this.api.control.controlCowedSwitch([req, (data) => {
if (data && data.code === 1) { if (data && data.code === 1) {
......
<ion-header> <ion-header>
<ion-toolbar color="secondary"> <ion-toolbar color="dark">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button mode="ios" text="" ></ion-back-button> <ion-back-button mode="ios" text="" ></ion-back-button>
</ion-buttons> </ion-buttons>
......
<ion-header mode="ios"> <ion-header mode="ios">
<ion-toolbar color="gray"> <ion-toolbar color="dark">
<ion-buttons slot="start"> <ion-buttons slot="start" >
<ion-back-button mode="ios" color="secondary" defaultHref="/index" text=""></ion-back-button> <ion-back-button mode="ios" defaultHref="/index" text=""></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-searchbar (ionInput)="getItems($event)" debounce="1000" style="height: 40px;"></ion-searchbar> <ion-searchbar mode="ios" color="light" (ionInput)="getItems($event)" debounce="1000" style="height: 40px;" placeholder="输入名称进行搜索"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<!--<ion-slides style="width: 100%; height: 125px;" mode="ios"--> <!--<ion-slides style="width: 100%; height: 125px;" mode="ios"-->
<!--[options]="lunbo" #slide (ionSlideTouchEnd)="slideDidChange()">--> <!--[options]="lunbo" #slide (ionSlideTouchEnd)="slideDidChange()">-->
...@@ -28,28 +28,37 @@ ...@@ -28,28 +28,37 @@
<ion-refresher-content></ion-refresher-content> <ion-refresher-content></ion-refresher-content>
</ion-refresher> </ion-refresher>
<h1 class="main-title">故障统计</h1> <h1 class="main-title">故障统计</h1>
<div style="margin-left:1%"> <div style="margin:1%">
<v-kanban class="home-bar" name="热应激" [inData]="thiGood" iconClass="vo v-youxuan" iconColor="#3e9058" iconSize="25px" fontSize="25px"></v-kanban> <v-kanban-double class="kanban-double" [name1]="'热应激'" [name2]="'故障'"
<v-kanban class="home-bar" name="热应激" [inData]="thiBad" iconClass="vo v-yujing" iconColor="#FAB139" iconSize="25px" fontSize="25px"></v-kanban> [inData1]="thiGood" [inData2]="thiBad" [inData3]="alarmTotal"
<v-kanban class="home-bar" name="故障总数" [inData]="alarmTotal" iconClass="vo v-guzhang2" iconColor="#B23706" iconSize="25px" fontSize="25px"></v-kanban> [iconImg1]="'../../assets/img/level-good.png'"
[iconImg2]="'../../assets/img/level-bad.png'"
[iconImg3]="'../../assets/img/alarm.png'"
iconColor1="#61C7CC" iconColor2="#F8B72D" iconColor3="#F2401C"
fontSize="35px" ></v-kanban-double>
<!--<v-kanban-large class="home-bar" name="热应激" [inData]="thiBad" [iconImg]="'../../assets/img/level-bad.png'" iconColor="#FAB139" fontSize="25px" iconWidth="45px !important"></v-kanban-large>-->
<!--<v-kanban-large class="kanban-large" name="故障总数" [inData]="alarmTotal" [iconImg]="'../../assets/img/alarm.png'" iconColor="#F2401C" fontSize="25px" iconWidth="45px !important"></v-kanban-large>-->
</div> </div>
<h1 class="main-title">牛舍列表</h1> <h1 class="main-title">牛舍列表</h1>
<ion-list *ngIf="items.length > 0" mode="md" class="listview" insert = "false" line="none" style="width:96%;margin-left: 2%"> <ion-list *ngIf="items.length > 0" mode="md" class="listview" insert = "false" line="none" style="width:96%;margin-left: 2%">
<ion-item *ngFor="let item of items" (click)="toControl(item)" class="ion-item" style="width: 100%; --padding-start: 0px"> <ion-item *ngFor="let item of items" (click)="toControl(item)" class="ion-item" style="width: 100%; --padding-start: 0px">
<div class="item"> <div class="item">
<div class="top"> <div class="top">
<div style="width:10%; float:left"><img [src]="'../../assets/img/house.png'" style="display: inline-block;margin-right: 10px; width:23px !important"> </div> <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="width:90%; float:left; padding-top: 4px;"> <div style="width:80%; float:left; padding-top: 4px;">
<span style="text-align: center">{{item.fieldRegionName}}</span><span style="text-align: center; font-size:12px; padding-left:10px; color:red;" *ngIf="item.operationModel === 4">(部分设备处于现控状态)</span></div> <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> </div>
<div class="content"> <div class="content font-content">
<span *ngIf="item.temp !== undefined && item.temp !== null" class="detailInfo" style="width: 40%">温度: &nbsp;&nbsp;{{item.temp}} ℃</span> <div class="detailInfo" style="width: 40%">热应激: &nbsp;<span class="warmColor{{item.heatStressLevel}}">{{item.heatStressLevelName}}</span></div>
<span *ngIf="item.humi !== undefined && item.humi !== null" class="detailInfo" style="width: 40%">湿度: &nbsp;&nbsp;{{item.humi}} % rH</span> <div *ngIf="item.NH3 !== '--'" class="detailInfo" style="width: 40%">氨气: &nbsp;{{item.NH3 | number:'0.0-2'}}ppm</div>
<span *ngIf="item.NH3 !== undefined && item.NH3 !== null" class="detailInfo" style="width: 40%">氨气: &nbsp;&nbsp;{{item.NH3}} ppm</span> <div *ngIf="item.NH3 === '--'" class="detailInfo" style="width: 40%">氨气: &nbsp;{{'--'}}ppm</div>
<span *ngIf="item.heatStressLevel !== undefined && item.heatStressLevel !== null" class="detailInfo" style="width: 40%">热应激: &nbsp;&nbsp;<span class="warmColor{{item.heatStressLevel}}">{{item.heatStressLevelName}}</span></span> <div *ngIf="item.temp !== '--'" class="detailInfo" style="width: 40%">温度: &nbsp;{{item.temp | number:'0.1-1'}}℃</div>
<div *ngIf="item.temp === '--'" class="detailInfo" style="width: 40%">温度: &nbsp;{{'--'}}℃</div>
<div *ngIf="item.humi !== '--'" class="detailInfo" style="width: 40%">湿度: &nbsp;{{item.humi | number:'0.0-0'}}% rH</div>
<div *ngIf="item.humi === '--'" class="detailInfo" style="width: 40%">湿度: &nbsp;{{'--'}}% rH</div>
</div> </div>
<div class="bottom"> <div class="bottom">
<div style="width:100%"> <div style="width:100%; margin-top:10px">
<!--<span [ngClass]="{'online': item.online, 'offline': !item.online}">{{item.online ? '在线' : '离线'}} </span>--> <!--<span [ngClass]="{'online': item.online, 'offline': !item.online}">{{item.online ? '在线' : '离线'}} </span>-->
<!--<span *ngIf="item.operationModel" class="online">{{item.operationModel ? '远控' :'现控'}} </span>--> <!--<span *ngIf="item.operationModel" class="online">{{item.operationModel ? '远控' :'现控'}} </span>-->
<!--<span *ngIf="item.operationModel" [ngClass]="{'online': item.isWisdomModel, 'offline': !item.isWisdomModel}" class="online">智控 </span>--> <!--<span *ngIf="item.operationModel" [ngClass]="{'online': item.isWisdomModel, 'offline': !item.isWisdomModel}" class="online">智控 </span>-->
...@@ -59,7 +68,7 @@ ...@@ -59,7 +68,7 @@
<div *ngIf="item.operationModel === 1 || item.operationModel === 0" class="online">{{item.operationModel === 1 ? '远控' :'现控'}} </div> <div *ngIf="item.operationModel === 1 || item.operationModel === 0" class="online">{{item.operationModel === 1 ? '远控' :'现控'}} </div>
<div *ngIf="item.operationModel === 4" class="offline">现控 </div> <div *ngIf="item.operationModel === 4" class="offline">现控 </div>
<div *ngIf="item.operationModel !== null" [ngClass]="{'online': item.isWisdomModel, 'offline': !item.isWisdomModel}" class="online">智控 </div> <div *ngIf="item.operationModel !== null" [ngClass]="{'online': item.isWisdomModel, 'offline': !item.isWisdomModel}" class="online">智控 </div>
<div *ngIf="item.ts !== null" class="right">{{item.ts | date: 'yyyy-MM-dd HH:mm'}}</div> <div *ngIf="item.ts !== null" class="right font-note">{{item.ts | date: 'yyyy-MM-dd HH:mm'}}</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
.top { .top {
// line-height: 25px; // line-height: 25px;
//border-bottom: 1px solid #cccc; //border-bottom: 1px solid #cccc;
padding-bottom: 5px; //padding-bottom: 5px;
font-size: 17px; //font-size: 17px;
display: block; display: block;
width: 100%; width: 100%;
...@@ -51,45 +51,44 @@ ...@@ -51,45 +51,44 @@
.content{ .content{
width:100%; width:100%;
margin-top: 25px; margin-top: 25px;
font-size: 14px;
color: #aaa; color: #aaa;
// text-align: center; // text-align: center;
} }
.detailInfo { .detailInfo {
padding-left:15px; padding-left:10px;
float: left; float: left;
margin-top: 2px; margin-top: 5px;
} }
.online { //.online {
border-radius: 2px; // border-radius: 6px;
background-color: #61C7CC; // background-color: #61C7CC;
display: inline-block; // display: inline-block;
vertical-align: middle; // vertical-align: middle;
box-shadow: #ccc 0.5px 0.5px 3px; // box-shadow: #ccc 0.5px 0.5px 3px;
padding: 4px 4px 4px 4px; // padding: 5px 5px 5px 5px;
color: white; // color: white;
margin-left: 5px; // margin-left: 5px;
font-size: 14px; // margin-right: 2px;
} // font-size: 13px;
//}
.offline { //
border-radius: 2px; //.offline {
background-color: #9ea7b4; // border-radius: 6px;
display: inline-block; // background-color: #9ea7b4;
vertical-align: middle; // display: inline-block;
box-shadow: #ccc 0.5px 0.5px 3px; // vertical-align: middle;
padding: 4px 4px 4px 4px; // box-shadow: #ccc 0.5px 0.5px 3px;
color: white; // padding: 5px 5px 5px 5px;
margin-left: 5px; // color: white;
font-size: 14px; // margin-left: 5px;
} // margin-right: 2px;
// font-size: 13px;
//}
.right { .right {
float: right; float: right;
color: #aaa;
font-size: 14px;
padding-top: 5px; padding-top: 5px;
} }
...@@ -107,5 +106,15 @@ ...@@ -107,5 +106,15 @@
color: #B22222; color: #B22222;
} }
.kanban-double {
display: inline-block;
margin: 3px;
// width: 64%;
width: 100%;
}
.kanban-large {
display: inline-block;
margin: 3px;
width: 32%;
}
...@@ -98,14 +98,15 @@ export class EnvHomePage implements OnInit { ...@@ -98,14 +98,15 @@ export class EnvHomePage implements OnInit {
this.isError = false; this.isError = false;
this.items = []; this.items = [];
data.resultIndexDataListForAppVos.map((value, index) => { data.resultIndexDataListForAppVos.map((value, index) => {
const environmentConfigJson = value.environmentConfigJson;
const itemInfo = { const itemInfo = {
factoryNo: value.factoryNo, factoryNo: value.factoryNo,
factoryName: value.factoryName, factoryName: value.factoryName,
fieldRegionNo: value.fieldRegionNo, fieldRegionNo: value.fieldRegionNo,
fieldRegionName: value.fieldRegionName, fieldRegionName: value.fieldRegionName,
temp: value.temp, temp: this.getParam(value.temp),
humi: value.humi, humi: this.getParam(value.humi),
NH3: value.NH3, NH3: this.getParam(value.NH3),
heatStressLevel: value.heatStressLevel, heatStressLevel: value.heatStressLevel,
heatStressLevelName: this.getHeatStressLevelName(value.heatStressLevel), heatStressLevelName: this.getHeatStressLevelName(value.heatStressLevel),
online: value.online, online: value.online,
...@@ -125,87 +126,6 @@ export class EnvHomePage implements OnInit { ...@@ -125,87 +126,6 @@ export class EnvHomePage implements OnInit {
} }
this.load.offLoad(); this.load.offLoad();
}]); }]);
// START--------------------------------------------------------------------
// TODO 测试用准备数据
// this.thiGood = 1;
// this.thiBad = 12;
// this.alarmTotal = 5;
// this.items = [
// {
// // 0-无热应激 离线 无报警
// fieldRegionNo: 'FRN136641006052720640',
// fieldRegionName: '1号牛舍',
// temp: 23.5,
// humi: 82,
// NH3: 76.786,
// heatStressLevel: '0',
// heatStressLevelName: this.getHeatStressLevelName(0),
// online: 0, // 0-离线,1-在线
// alarm: 0,
// ts: '2019-08-05 23:44',
// },
// {
// // 1-轻度热应激 在线 现控 无报警
// fieldRegionNo: 'FN108050436279648256',
// fieldRegionName: '2号牛舍',
// temp: 23.5,
// humi: 82,
// NH3: 10.116,
// heatStressLevel: '1',
// heatStressLevelName: this.getHeatStressLevelName(1),
// online: 1, // 0-离线,1-在线
// operationModel: 0, // 0-现控,1-平控
// alarm: 0,
// ts: '2019-08-05 23:44',
// },
// {
// // 2-中度热应激 在线 平控 非智控(手控) 有报警
// fieldRegionNo: 'FN108050436279648256',
// fieldRegionName: '3号牛舍',
// temp: 23.5,
// humi: 82,
// NH3: 60.255,
// heatStressLevel: '2',
// heatStressLevelName: this.getHeatStressLevelName(2),
// online: 1, // 0-离线,1-在线
// operationModel: 1, // 0-现控,1-平控
// isWisdomModel: 0, // 0-非智控(手控),1-智控
// alarm: 1,
// ts: '2019-08-05 23:44',
// },
// {
// // 3-重度热应激 在线 平控 非智控(自控) 有报警
// fieldRegionNo: 'FN108050436279648256',
// fieldRegionName: '4号牛舍',
// temp: 23.5,
// humi: 82,
// NH3: 80.213,
// heatStressLevel: '3',
// heatStressLevelName: this.getHeatStressLevelName(3),
// online: 1, // 0-离线,1-在线
// operationModel: 1, // 0-现控,1-平控
// isWisdomModel: 0, // 0-非智控(自控),1-智控
// alarm: 1,
// ts: '2019-08-05 23:44',
// },
// {
// // 4-II重度热应激 在线 平控 智控 有报警
// fieldRegionNo: 'FN108050436279648256',
// fieldRegionName: '测试用5号牛舍',
// temp: 23.5,
// humi: 82.9,
// NH3: 120.999,
// heatStressLevel: '4',
// heatStressLevelName: this.getHeatStressLevelName(4),
// online: 1, // 0-离线,1-在线
// operationModel: 4, // 0-现控,1-平控
// isWisdomModel: 1, // 0-非智控(自控),1-智控
// alarm: 1,
// ts: '2019-08-05 23:44',
// },
// ];
// END--------------------------------------------------------------------
} }
} }
...@@ -217,6 +137,16 @@ export class EnvHomePage implements OnInit { ...@@ -217,6 +137,16 @@ export class EnvHomePage implements OnInit {
this.ifFocus = e; this.ifFocus = e;
} }
getParam(param) {
let result = '';
if (param === undefined || param === null || param === '') {
result = '--';
} else {
result = param;
}
return result;
}
getHeatStressLevelName(codeId) { getHeatStressLevelName(codeId) {
let levelName = ''; let levelName = '';
switch (codeId) { switch (codeId) {
......
...@@ -2,46 +2,66 @@ ...@@ -2,46 +2,66 @@
</ion-header> </ion-header>
<ion-content color='light' style="height: 100%"> <ion-content color="light" style="height: 100%;">
<h1 style=" <div class="env-detail-content">
font-size: 16px; <h1 class="main-title-detail">模式状态</h1>
padding-left: 5px; <ion-item lines="none" style="width: 98%;">
border-left: 5px solid #28c9bd; <ion-grid>
line-height: 25px; <ion-row>
margin-bottom: 5px;">模式状态</h1> <ion-col>
<ion-item lines="full"> <div style="width:30%; float:left">
<ion-label>运行模式</ion-label> <img *ngIf="controlModel === 1" src="../../assets/img/model-on.png" class="modelState">
<ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="controlModel" disabled="true"> <img *ngIf="controlModel !== 1" src="../../assets/img/model-off.png" class="modelState">
<ion-select-option *ngFor="let option of controlModelOptions" [value]="option.modelId">{{option.modelValue}}</ion-select-option> </div>
</ion-select> <div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">手控模式</span>
</div>
</ion-col>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 2" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 2" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">自控模式</span>
</div>
</ion-col>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 3" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 3" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">智控模式</span>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-item> </ion-item>
<h1 style=" <h1 class="main-title-detail">时间模式</h1>
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">时间模式</h1>
<ion-item lines="full"> <ion-item lines="full">
<i class="vo v-yue{{curDate}}"></i> <i class="vo v-yue{{curDate}}"></i>
<span style="margin-left: 100px; font-size:15px"> 开启时间 {{on}}<br><br>关闭时间 {{off}}</span> <span style="margin-left: 100px; font-size:15px"> 开启时间 <span class="main-color">{{on}}</span><br><br>关闭时间 <span class="main-color">{{off}}</span></span>
</ion-item> </ion-item>
<h1 style=" <h1 class="main-title-detail">控制状态</h1>
font-size: 16px; <ion-item *ngIf="devices" lines="none" insert="false">
padding-left: 5px; <div style="width:100%">
border-left: 5px solid #28c9bd; <div style="width:20%; display: inline-block; float:left;">
line-height: 25px; <img src="../../assets/img/batchSwitch.png" class="icon-batch-switch">
margin-bottom: 5px;">控制/状态</h1> </div>
<ion-item *ngIf="devices" lines="full" insert="false"> <div class="label-batch-switch font-content">
<ion-label>一键控制</ion-label> 一键控制
<ion-toggle mode="ios" slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled" </div>
</div>
<ion-toggle mode="ios" style="display:inline-block" slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
[(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle> [(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle>
<!--<v-switch (click)="allCheck(batchSwitch)" [value]="batchSwitch.op" [disabled]="batchSwitch.disabled" [loading]="batchSwitch.load"></v-switch>--> <!--<v-switch (click)="allCheck(batchSwitch)" [value]="batchSwitch.op" [disabled]="batchSwitch.disabled" [loading]="batchSwitch.load"></v-switch>-->
</ion-item> </ion-item>
<div> <div class="card-div">
<ion-card *ngFor="let device of devices" class="card" color="white"> <ion-card *ngFor="let device of devices" class="card" color="white">
<ion-card-header class="cardHeader"> <ion-card-header class="cardHeader">
<ion-card-subtitle align="center">{{device.fieldDeviceName}}</ion-card-subtitle> <ion-card-subtitle align="center" class="font-mini">{{device.fieldDeviceName}}</ion-card-subtitle>
</ion-card-header> </ion-card-header>
<ion-card-content class="cardContent"> <ion-card-content class="cardContent">
...@@ -53,6 +73,6 @@ ...@@ -53,6 +73,6 @@
</ion-card-content> </ion-card-content>
</ion-card> </ion-card>
</div> </div>
</div>
<!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>--> <!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>-->
</ion-content> </ion-content>
...@@ -9,16 +9,16 @@ i.vo { ...@@ -9,16 +9,16 @@ i.vo {
float: none; float: none;
display: inline-block; display: inline-block;
width:22%; width:22%;
margin: 5px; margin: 1.5%;
} }
.cardHeader { .cardHeader {
--padding-inline-start: 0px !important; --padding-inline-start: 0px !important;
--padding-inline-end: 0px !important; --padding-inline-end: 0px !important;
padding: 10px; padding: 10px 0px 0px 0px;
} }
.cardContent { .cardContent {
padding: 5px; padding: 3px 5px 5px 5px;
text-align: center; text-align: center;
} }
......
...@@ -259,7 +259,7 @@ export class EnvLightPage implements OnInit { ...@@ -259,7 +259,7 @@ export class EnvLightPage implements OnInit {
ts: parseInt((new Date().getTime() / 1000).toString(), 10) ts: parseInt((new Date().getTime() / 1000).toString(), 10)
}; };
// this.comm.remain = 60; // this.comm.remain = 60;
this.loading.presentLoading(60); this.loading.presentLoading(80);
this.api.control.controlCowedSwitch([req, (data) => { this.api.control.controlCowedSwitch([req, (data) => {
if (data && data.code === 1) { if (data && data.code === 1) {
this.comm.remain = 0; this.comm.remain = 0;
......
...@@ -47,17 +47,17 @@ ...@@ -47,17 +47,17 @@
</ion-item> </ion-item>
<h1 class="main-title-detail">时间参数</h1> <h1 class="main-title-detail">时间参数</h1>
<ion-item lines="full" insert="false"> <ion-item lines="full" insert="false">
<span class="content">{{fieldDeviceNameA}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.A}} &nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="content">{{fieldDeviceNameA}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.a}} &nbsp;&nbsp;&nbsp;&nbsp;</span>
</ion-item> </ion-item>
<ion-item lines="full" insert="false"> <ion-item lines="full" insert="false">
<span class="content">{{fieldDeviceNameB}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.B}} &nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="content">{{fieldDeviceNameB}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.b}} &nbsp;&nbsp;&nbsp;&nbsp;</span>
</ion-item> </ion-item>
<ion-item lines="full" insert="false"> <ion-item lines="full" insert="false">
<span class="content">间隔时间 &nbsp;&nbsp;&nbsp;&nbsp; {{controlConfig.interval}} &nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="content">间隔时间 &nbsp;&nbsp;&nbsp;&nbsp; {{controlConfig.interval}} &nbsp;&nbsp;&nbsp;&nbsp;</span>
</ion-item> </ion-item>
<h1 class="main-title-detail">控制状态</h1> <h1 class="main-title-detail">控制状态</h1>
<div> <div class="card-div">
<ion-card *ngFor="let device of param" class="card" color="white"> <ion-card *ngFor="let device of param" class="card" color="white">
<ion-card-header class="cardHeader"> <ion-card-header class="cardHeader">
<ion-card-title class="card-title"> <ion-card-title class="card-title">
......
...@@ -36,9 +36,9 @@ export class EnvShowerPage implements OnInit { ...@@ -36,9 +36,9 @@ export class EnvShowerPage implements OnInit {
controlConfig = { controlConfig = {
name: '', name: '',
interval: 0, // 间隔时间 interval: 0, // 间隔时间
A: 0, // A区喷淋时间 a: 0, // A区喷淋时间
T: 0, t: 0,
B: 0, // A区喷淋时间 b: 0, // A区喷淋时间
offset: 0 offset: 0
}; };
// 各设备信息 // 各设备信息
...@@ -156,7 +156,7 @@ export class EnvShowerPage implements OnInit { ...@@ -156,7 +156,7 @@ export class EnvShowerPage implements OnInit {
ts: parseInt((new Date().getTime() / 1000).toString(), 10) ts: parseInt((new Date().getTime() / 1000).toString(), 10)
}; };
// this.comm.remain = 60; // this.comm.remain = 60;
this.loading.presentLoading(60); this.loading.presentLoading(80);
this.api.control.controlCowedSwitch([req, (data) => { this.api.control.controlCowedSwitch([req, (data) => {
if (data && data.code === 1) { if (data && data.code === 1) {
this.comm.remain = 0; this.comm.remain = 0;
......
<ion-header> <ion-header>
</ion-header> </ion-header>
<ion-content> <ion-content color="light" style="height: 100%;">
<h1 style=" <div class="env-detail-content">
font-size: 16px; <h1 class="main-title-detail">状态</h1>
padding-left: 5px; <div class="card-div">
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">状态</h1>
<ion-card *ngFor="let device of devices" class="card" color="white"> <ion-card *ngFor="let device of devices" class="card" color="white">
<ion-card-header class="cardTitle"> <ion-card-header class="cardTitle">
<ion-card-title class="cardHeader"> <span class="sucCir"></span>&nbsp; {{device .fieldDeviceName}}</ion-card-title> <ion-card-title class="cardHeader">
<div style="width: 100%">
<div style="width:10%; float:left; display: inline-block"><img src="../../assets/img/model-on.png" class="modelState-large"></div>
<div style="width:88%; float:left; display: inline-block;padding-top: 2px;" class="font-sub-title">{{device .fieldDeviceName}}</div>
</div>
</ion-card-title>
</ion-card-header> </ion-card-header>
<ion-card-content class="cardContent"> <ion-card-content class="cardContent font-content" style="margin-top:15px;">
<span>当前功率 : </span> <span style="color:#0bb8cc"> {{device.kw}} KW<br></span> <span>当前功率 : </span> <span style="color:#0bb8cc"> {{device.kw}} KW<br></span>
<span>估计加热设备台数 : </span> <span style="color:#0bb8cc"> {{device.deviceOnlineNum}} 台</span> <span>估计加热设备台数 : </span> <span style="color:#0bb8cc"> {{device.deviceOnlineNum}} 台</span>
</ion-card-content> </ion-card-content>
</ion-card> </ion-card>
</div>
</div>
</ion-content> </ion-content>
...@@ -20,8 +20,12 @@ export class Loading { ...@@ -20,8 +20,12 @@ export class Loading {
}); });
this.loading.present(); this.loading.present();
this.interval = window.setInterval(() => { this.interval = window.setInterval(() => {
if (this.countdown > 0) {
this.countdown--; this.countdown--;
this.loading.message = '通信中,还剩 ' + this.countdown + ' 秒'; this.loading.message = '通信中,还剩 ' + this.countdown + ' 秒';
} else {
this.loading.message = '';
}
}, 1000) }, 1000)
const { role, data } = await this.loading.onDidDismiss(); const { role, data } = await this.loading.onDidDismiss();
...@@ -32,6 +36,7 @@ export class Loading { ...@@ -32,6 +36,7 @@ export class Loading {
async closeLoading() { async closeLoading() {
if (this.loading !== undefined || this.loading !== null) { if (this.loading !== undefined || this.loading !== null) {
this.loading.dismiss(); this.loading.dismiss();
this.loading.onDidDismiss();
clearInterval(this.interval); clearInterval(this.interval);
} }
} }
......
...@@ -35,7 +35,7 @@ export class Mqtt { ...@@ -35,7 +35,7 @@ export class Mqtt {
} }
public initMqtt(name) { public initMqtt(name) {
this.client = mqtt.connect('ws://' + environment.mqttUrl + ':8083/mqtt', this.options); this.client = mqtt.connect('ws://' + environment.mqttUrl + '/mqtt', this.options);
this.topic = 'Pasture/' + name + '/Alarm'; this.topic = 'Pasture/' + name + '/Alarm';
this.client.on('connect', () => { this.client.on('connect', () => {
......
src/assets/lunbo/4.png

425 KB | W: | H:

src/assets/lunbo/4.png

166 KB | W: | H:

src/assets/lunbo/4.png
src/assets/lunbo/4.png
src/assets/lunbo/4.png
src/assets/lunbo/4.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -3,6 +3,6 @@ export const environment = { ...@@ -3,6 +3,6 @@ export const environment = {
// url: 'http://pasture.witium.com/api', // 对外访问测试网地址 // url: 'http://pasture.witium.com/api', // 对外访问测试网地址
// mqttUrl: '120.27.235.39' // mqttUrl: '120.27.235.39'
url: 'http://172.16.1.52:8096', url: 'http://pasture.witium.com.cn/api/v2',
mqttUrl: '172.16.1.24', mqttUrl: '211.161.200.169:48083',
}; };
...@@ -3,27 +3,13 @@ ...@@ -3,27 +3,13 @@
// The list of file replacements can be found in `angular.json`. // The list of file replacements can be found in `angular.json`.
export const environment = { export const environment = {
// production: false, url: 'http://pasture.witium.com.cn/api/v2',
// url: 'http://pasture.witium.com.cn/api', // 对外访问测试网地址 // url: 'http://172.16.1.52:8096', // zz
// url: 'http://172.16.1.14:8096',
// url: 'http://cloud-test.witium.com:8096', // 测试 mqttUrl: '211.161.200.169:48083',
// url: 'http://172.16.1.53:8096', // cy // mqttUrl: '172.16.1.24',
// url: 'http://172.16.1.51:8097', // lin
// url: 'http://211.161.200.169:19200', // zz
url: 'http://172.16.1.52:8096', // zz
// url: 'http://172.16.1.13:8096', // 测试
mqttUrl: '172.16.1.24', // mqttUrl: '172.16.1.24:48083',
// mqttUrl: '211.161.200.169', // 辉度外网访问mqtt地址
// mqttUrl: '120.27.235.39',
production: true,
// url: 'http://pasture.witium.com/api', // 对外访问测试网地址
// url: 'http://172.16.1.13:8096', // 测试
// mqttUrl: '120.27.235.39'
// mqttUrl: '120.27.235.31'
// url: 'http://pasture.witium.com.cn/api', // 对外访问测试网地址 production: true,
// mqttUrl: '172.16.1.24:48083',
}; };
/* /*
......
...@@ -153,7 +153,11 @@ img { ...@@ -153,7 +153,11 @@ img {
font-size: 16px; font-size: 16px;
} }
.font-subTitle { .font-sub-title {
font-size: 15px;
}
.font-content-title {
font-size: 14px; font-size: 14px;
} }
...@@ -167,8 +171,17 @@ img { ...@@ -167,8 +171,17 @@ img {
color: #a5a5a5; color: #a5a5a5;
} }
.font-mini {
font-size: 10px;
color: #a5a5a5 !important;
}
.font-ts { .font-ts {
font-size: 12px; font-size: 13px;
color: #a5a5a5;
}
.content-text-color {
color: #a5a5a5; color: #a5a5a5;
} }
...@@ -181,6 +194,9 @@ img { ...@@ -181,6 +194,9 @@ img {
--spinner-color: #61C7CC; --spinner-color: #61C7CC;
} }
.alarmColor {
color: #F2401C;
}
.main-title { .main-title {
font-size: 16px; font-size: 16px;
...@@ -188,7 +204,7 @@ img { ...@@ -188,7 +204,7 @@ img {
border-left: 5px solid #61C7CC; border-left: 5px solid #61C7CC;
line-height: 25px; line-height: 25px;
margin-bottom: 5px; margin-bottom: 5px;
margin-left: 5px; margin-left: 10px;
margin-top: 5px; margin-top: 5px;
} }
...@@ -212,7 +228,7 @@ img { ...@@ -212,7 +228,7 @@ img {
.icon-batch-switch { .icon-batch-switch {
width: 30px !important; width: 30px !important;
padding: 5px; padding: 5px 5px 5px 0px;
margin: 5px; margin: 5px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 5px; border-radius: 5px;
...@@ -220,8 +236,53 @@ img { ...@@ -220,8 +236,53 @@ img {
.label-batch-switch { .label-batch-switch {
float: left; float: left;
width: 60%; width: 40%;
display: inline-block; display: inline-block;
align-content: center; align-content: center;
padding-top: 18px; padding-top: 18px;
} }
.modelState {
display: inline-block;
margin-right: 10px;
width:23px !important
}
.modelState-large {
display: inline-block;
margin-right: 10px;
width:25px !important
}
.online {
border-radius: 6px;
background-color: #61C7CC;
display: inline-block;
vertical-align: middle;
box-shadow: #ccc 0.5px 0.5px 3px;
padding: 5px 5px 5px 5px;
color: white;
margin-left: 5px;
margin-right: 2px;
font-size: 13px;
}
.offline {
border-radius: 6px;
background-color: #9ea7b4;
display: inline-block;
vertical-align: middle;
box-shadow: #ccc 0.5px 0.5px 3px;
padding: 5px 5px 5px 5px;
color: white;
margin-left: 5px;
margin-right: 2px;
font-size: 13px;
}
.card-div {
border: solid 1px #bfbfbf;
border-radius: 7px;
padding: 5px;
}
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