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

src/app/home/home.page.html

@@ -15,18 +15,27 @@
                        [endReachedRefresh]="state.endReachedRefresh"
                        (onRefresh)="pullToRefresh($event)"
         >
-            <div class="item" *ngFor="let item of items" (click)="toControl(item.url)">
-                <div class="left">{{item.name}}</div>
-                <div class="right">
-                    <div class="block1">液位: {{item.yewei}}m</div>
-                    <div class="block2 canClick">控制</div>
-                    <div class="gekai"></div>
-                    <div class="block3" *ngIf="item.isNB">
-                        南水 <span [ngClass]="{'sucCir': item.nan, 'errCir': !item.nan}"></span>&nbsp;&nbsp;
-                        北水 <span [ngClass]="{'sucCir': item.bei, 'errCir': !item.bei}"></span>
-                        <!--状态: {{item.nan === 1 ? '开' : '关'}}/{{item.bei === 1 ? '开' : '关'}}-->
+            <div style="background-color: #f4f4f4">
+                <div class="item" *ngFor="let item of items" (click)="toControl(item.url, item.name)">
+                    <div>
+                        <div class="top">{{item.name}}
+                            <div class="right">{{item.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div>
+                        </div>
+                        <div class="content">
+                            <div class="left">
+                                <img [src]="'../../assets/icon/' + item.img">
+                            </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 class="block4">设备状态 <span [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></span></div>-->
                 </div>
             </div>
 
@@ -40,16 +49,6 @@
             <!--liquidLevel: "6.2"-->
             <!--state: 1-->
             <!--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>
     </div>
 </div>

src/app/home/home.page.scss

@@ -16,69 +16,60 @@
 
 .seePart {
   padding: 5px 5px 0 5px;
+  min-width: 320px;
 }
 
 .slideCon {
   background-color: lavender;
 }
 
-.redColor {
-  color: red;
+.item {
+  margin-bottom: 10px;
+  padding: 3px 10px 0px;
+  background-color: #ffffff;
+  display:block;
 }
 
-.left {
-  width: 25%;
-  text-align: center;
-  line-height: 60px;
-  font-size: 16px;
-  border-right: 1px solid #28c9bd;
-  background-color: #28c9bd;
-  color: #ffffff;
+.top {
+  line-height: 20px;
+  border-bottom: 1px solid #cccc;
+  padding-bottom: 5px;
+  font-size: 15px;
+  display: block;
 }
 
 .right {
-  font-size: 14px;
-  width: 70%;
-  padding-left: 10px;
+  float: right;
+  color: #aaa;
 }
 
-.left, .right {
+.left {
+  width: 80px;
+  height: 80px;
+  padding: 5px;
   display: inline-block;
-  vertical-align: middle;
 }
 
-.item {
-  border: 2px solid #28c9bd;
-  border-radius: 5px;
-  margin-bottom: 5px;
-}
-
-.block1, .block2, .block3, .block4 {
+.rightCon {
+  width: calc(100% - 110px);
+  line-height: 25px;
+  vertical-align: top;
   display: inline-block;
+  padding-left: 20px;
+  padding-top: 5px;
+  font-size: 12px;
 }
 
-.block1 {
-  width: calc(100% - 50px);
-  text-align: left;
-  line-height: 20px;
-}
-
-.block2 {
-  width: 50px;
-  text-align: right;
+.bottom {
+  border-top: 1px solid #ccc;
+  padding: 6px;
+  color: #aaa;
 }
 
-.block3 {
-  width: calc(100% - 78px);
-  text-align: left;
+.content {
+  display : block;
 }
 
-.block4 {
-  width: 78px;
-  text-align: right;
-}
-
-.gekai {
-  height: 18px;
-  width: 100%;
+.frank-item{
+  width : 100%;
 }

src/app/home/home.page.ts

@@ -3,6 +3,9 @@ import {Transfer} from '../service/transfer';
 import {ActivatedRoute} from '@angular/router';
 import {Api} from '../service/api';
 import {Load} from '../service/load';
+import { NavController } from '@ionic/angular';
+
+declare var mqtt: any;
 
 @Component({
     selector: 'v-home',
@@ -12,11 +15,12 @@ import {Load} from '../service/load';
 export class HomePage implements OnInit, OnDestroy {
 
     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;
 
     imgs = ['1.jpg', '2.jpg', '3.jpg'];
+    time = 0;
 
     lunbo = {
         speed: 1000,
@@ -26,27 +30,31 @@ export class HomePage implements OnInit, OnDestroy {
             delay: 2000,
         },
         loop: true,
-        spaceBetween: 0
+        spaceBetween: 0,
+        zoom : false
     };
     alarms = [1, 2, 3, 4, 5];
 
     data = [];
 
-    items = [{
-        name: '东中转池',
-        yewei: '',
-        nan: false,
-        bei: false,
-        isNB: 1,
-        url: 'east'
-    }, {
-        name: '西中转池',
-        yewei: '',
-        nan: false,
-        bei: false,
-        isNB: 1,
-        url: 'west'
-    }];
+    // items = [{
+    //     name: '东中转池',
+    //     yewei: '',
+    //     nan: false,
+    //     bei: false,
+    //     isNB: 1,
+    //     url: 'east'
+    // }, {
+    //     name: '西中转池',
+    //     yewei: '',
+    //     nan: false,
+    //     bei: false,
+    //     isNB: 1,
+    //     url: 'west'
+    // }];
+
+    items = [];
+
     state = {
         refreshState: {
             currentState: 'deactivate',
@@ -84,8 +92,28 @@ export class HomePage implements OnInit, OnDestroy {
         }
         this.api.app.getAll(['', (data) => {
             console.log(data);
-            if (data.constructor === Array) {
+            if (data && data.constructor === Array) {
                 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 {
                 this.api.presentMsgToast('获取数据失败');
             }
@@ -97,12 +125,28 @@ export class HomePage implements OnInit, OnDestroy {
         this.slide.startAutoplay();
     }
 
-    toControl(url) {
-        this.tf.transfer({
-            url: '/' + url,
-            query: '',
-            hash: ''
-        });
+    toControl(url, name) {
+        let query = '';
+        if (url === 'aaa') {
+            query = '?name=' + name;
+
+            // 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) {
@@ -112,4 +156,21 @@ export class HomePage implements OnInit, OnDestroy {
             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;
+    }
 }