Skip to content

M
muChangApp
Commit 5d03c45b authored by frank's avatar frank 🏀
Browse files
Options

home页面样式修改，并且增加了getdata解析

parent a6970763
Show whitespace changes
Inline Side-by-side
Showing with 138 additions and 87 deletions
src/app/home/home.page.html
View file @ 5d03c45b
...@@ -15,18 +15,27 @@ ...@@ -15,18 +15,27 @@
[endReachedRefresh]="state.endReachedRefresh" [endReachedRefresh]="state.endReachedRefresh"
(onRefresh)="pullToRefresh($event)" (onRefresh)="pullToRefresh($event)"
> >
<div class="item" *ngFor="let item of items" (click)="toControl(item.url)"> <div style="background-color: #f4f4f4">
<div class="left">{{item.name}}</div> <div class="item" *ngFor="let item of items" (click)="toControl(item.url, item.name)">
<div class="right"> <div>
<div class="block1">液位: {{item.yewei}}m</div> <div class="top">{{item.name}}
<div class="block2 canClick">控制</div> <div class="right">{{item.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div>
<div class="gekai"></div> </div>
<div class="block3" *ngIf="item.isNB"> <div class="content">
南水 <span [ngClass]="{'sucCir': item.nan, 'errCir': !item.nan}"></span>&nbsp;&nbsp; <div class="left">
北水 <span [ngClass]="{'sucCir': item.bei, 'errCir': !item.bei}"></span> <img [src]="'../../assets/icon/' + item.img">
<!--状态: {{item.nan === 1 ? '开' : '关'}}/{{item.bei === 1 ? '开' : '关'}}--> </div>
<div class="rightCon">
<div class="block1">池体液位: &nbsp;&nbsp;{{item.yewei}} m</div>
<div class="block2">液体温度: &nbsp;&nbsp;{{item.temp}} ℃</div>
<div class="block2">运行状态: &nbsp;&nbsp;{{item.state ? '工作中' : '离线'}} </div>
</div>
</div>
<div class="bottom">
<div [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></div>&nbsp;
<span style="font-size: 13px">{{item.state ? '在线' : '离线'}}</span>
</div>
</div> </div>
<!--<div class="block4">设备状态 <span [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></span></div>-->
</div> </div>
</div> </div>
...@@ -40,16 +49,6 @@ ...@@ -40,16 +49,6 @@
<!--liquidLevel: "6.2"--> <!--liquidLevel: "6.2"-->
<!--state: 1--> <!--state: 1-->
<!--temp: "26.5"--> <!--temp: "26.5"-->
<Accordion [accordion]="true" [defaultActiveKey]="'0'">
<AccordionPanel *ngFor="let one of data; let i = index;"
[key]="i" [header]="one.factoryName">
<List className="my-list">
<ListItem *ngFor="let two of one.fieldRegionDataVos">
{{two.fieldRegionName}}
</ListItem>
</List>
</AccordionPanel>
</Accordion>
</PullToRefresh> </PullToRefresh>
</div> </div>
</div> </div>
src/app/home/home.page.scss
View file @ 5d03c45b
...@@ -16,69 +16,60 @@ ...@@ -16,69 +16,60 @@
.seePart { .seePart {
padding: 5px 5px 0 5px; padding: 5px 5px 0 5px;
min-width: 320px;
} }
.slideCon { .slideCon {
background-color: lavender; background-color: lavender;
} }
.redColor { .item {
color: red; margin-bottom: 10px;
padding: 3px 10px 0px;
background-color: #ffffff;
display:block;
} }
.left { .top {
width: 25%; line-height: 20px;
text-align: center; border-bottom: 1px solid #cccc;
line-height: 60px; padding-bottom: 5px;
font-size: 16px; font-size: 15px;
border-right: 1px solid #28c9bd; display: block;
background-color: #28c9bd;
color: #ffffff;
} }
.right { .right {
font-size: 14px; float: right;
width: 70%; color: #aaa;
padding-left: 10px;
} }
.left, .right { .left {
width: 80px;
height: 80px;
padding: 5px;
display: inline-block; display: inline-block;
vertical-align: middle;
} }
.item { .rightCon {
border: 2px solid #28c9bd; width: calc(100% - 110px);
border-radius: 5px; line-height: 25px;
margin-bottom: 5px; vertical-align: top;
}
.block1, .block2, .block3, .block4 {
display: inline-block; display: inline-block;
padding-left: 20px;
padding-top: 5px;
font-size: 12px;
} }
.block1 { .bottom {
width: calc(100% - 50px); border-top: 1px solid #ccc;
text-align: left; padding: 6px;
line-height: 20px; color: #aaa;
}
.block2 {
width: 50px;
text-align: right;
} }
.block3 { .content {
width: calc(100% - 78px); display : block;
text-align: left;
} }
.block4 { .frank-item{
width: 78px; width : 100%;
text-align: right;
}
.gekai {
height: 18px;
width: 100%;
} }
src/app/home/home.page.ts
View file @ 5d03c45b
...@@ -3,6 +3,9 @@ import {Transfer} from '../service/transfer'; ...@@ -3,6 +3,9 @@ import {Transfer} from '../service/transfer';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {Api} from '../service/api'; import {Api} from '../service/api';
import {Load} from '../service/load'; import {Load} from '../service/load';
import { NavController } from '@ionic/angular';
declare var mqtt: any;
@Component({ @Component({
selector: 'v-home', selector: 'v-home',
...@@ -12,11 +15,12 @@ import {Load} from '../service/load'; ...@@ -12,11 +15,12 @@ import {Load} from '../service/load';
export class HomePage implements OnInit, OnDestroy { export class HomePage implements OnInit, OnDestroy {
constructor(private tf: Transfer, private ac: ActivatedRoute, constructor(private tf: Transfer, private ac: ActivatedRoute,
private api: Api, private load: Load) {} private api: Api, private load: Load, public nav: NavController) {}
@ViewChild('slide') slide; @ViewChild('slide') slide;
imgs = ['1.jpg', '2.jpg', '3.jpg']; imgs = ['1.jpg', '2.jpg', '3.jpg'];
time = 0;
lunbo = { lunbo = {
speed: 1000, speed: 1000,
...@@ -26,27 +30,31 @@ export class HomePage implements OnInit, OnDestroy { ...@@ -26,27 +30,31 @@ export class HomePage implements OnInit, OnDestroy {
delay: 2000, delay: 2000,
}, },
loop: true, loop: true,
spaceBetween: 0 spaceBetween: 0,
zoom : false
}; };
alarms = [1, 2, 3, 4, 5]; alarms = [1, 2, 3, 4, 5];
data = []; data = [];
items = [{ // items = [{
name: '东中转池', // name: '东中转池',
yewei: '', // yewei: '',
nan: false, // nan: false,
bei: false, // bei: false,
isNB: 1, // isNB: 1,
url: 'east' // url: 'east'
}, { // }, {
name: '西中转池', // name: '西中转池',
yewei: '', // yewei: '',
nan: false, // nan: false,
bei: false, // bei: false,
isNB: 1, // isNB: 1,
url: 'west' // url: 'west'
}]; // }];
items = [];
state = { state = {
refreshState: { refreshState: {
currentState: 'deactivate', currentState: 'deactivate',
...@@ -84,8 +92,28 @@ export class HomePage implements OnInit, OnDestroy { ...@@ -84,8 +92,28 @@ export class HomePage implements OnInit, OnDestroy {
} }
this.api.app.getAll(['', (data) => { this.api.app.getAll(['', (data) => {
console.log(data); console.log(data);
if (data.constructor === Array) { if (data && data.constructor === Array) {
this.data = data; this.data = data;
this.items = [];
data.map((value, index) => {
const info = value.fieldRegionDataVos;
info.map((value2, index2) => {
const itemInfo = {name : '',
yewei : '',
temp: '',
img: 'fajiao.jpg',
url: 'east',
time: 0,
state: 0 };
itemInfo.name = value2.fieldRegionName;
itemInfo.yewei = value2.liquidLevel;
itemInfo.temp = value2.temp;
itemInfo.img = this.getImgName(value2.fieldRegionName);
itemInfo.state = value2.state;
itemInfo.time = new Date().getTime();
this.items.push(itemInfo);
});
});
} else { } else {
this.api.presentMsgToast('获取数据失败'); this.api.presentMsgToast('获取数据失败');
} }
...@@ -97,12 +125,28 @@ export class HomePage implements OnInit, OnDestroy { ...@@ -97,12 +125,28 @@ export class HomePage implements OnInit, OnDestroy {
this.slide.startAutoplay(); this.slide.startAutoplay();
} }
toControl(url) { toControl(url, name) {
this.tf.transfer({ let query = '';
url: '/' + url, if (url === 'aaa') {
query: '', query = '?name=' + name;
hash: ''
}); // this.tf.transfer({
// url: '/' + url,
// query: query,
// hash: ''
// });
url = url + query;
this.nav.navigateRoot(url);
} else {
this.nav.navigateRoot(url);
}
// this.tf.transfer({
// url: '/' + url,
// query: query,
// hash: ''
// });
} }
pullToRefresh(event) { pullToRefresh(event) {
...@@ -112,4 +156,21 @@ export class HomePage implements OnInit, OnDestroy { ...@@ -112,4 +156,21 @@ export class HomePage implements OnInit, OnDestroy {
console.log(22222222222222); console.log(22222222222222);
} }
} }
getImgName(name) {
const ret = 'fajiao.jpg';
switch (name) {
case '东中转池': ret = 'e.jpg'; break;
case '西中转池' : ret = 'w.jpg'; break;
case '发酵池' : ret = 'fajiao.jpg'; break;
case '分离池' : ret = 'fenli.jpg'; break;
case '匀浆池' : ret = 'yunjiang.jpg'; break;
case '出料池' : ret = 'chuliao.jpg'; break;
case '沉沙池' : ret = 'chensha.jpg'; break;
default: break;
}
return ret;
}
} }
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