数据假装懒加载 + 版本信息

config.xml

 <?xml version='1.0' encoding='utf-8'?>
-<widget id="online.hubeidiyi" version="1.1.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="online.hubeidiyi" version="1.2.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>牧场云</name>
     <description>牧场物业管理系统</description>
     <author email="van_chen@foxmail.com" href="http://hubeidiyi.online/">Van.chen</author>

src/app/alarm/alarm.page.html

-<div class="mainCon">
+<div class="mainCon" style="overflow-y: hidden">
     <Navbar [leftContent]="icon"
             (onLeftClick)="onLeftClick()"
             style="background-color: #28c9bd;position: fixed;top: 0;width: 100%;z-index: 2;"
@@ -9,15 +9,8 @@
                       (onChange)="choose($event)"
     ></SegmentedControl>
 
-    <div class="alarmCon">
-        <div class="alarmItemBefore" *ngIf="itemExit;else other_content">
-            <div class="alarmItem" *ngFor="let one of data">
-                <i class="vo v-shebeiguanli1"></i><span class="title">设备名称 : </span><span>{{one.name}}</span><br>
-                <i class="vo v-guzhang"></i><span class="title">故障内容 : </span><span>{{one.con}}</span><br>
-                <i class="vo v-rili"></i><span
-                    class="title">发生时间 : </span><span>{{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}</span><br>
-            </div>
-        </div>
+    <div class="alarmCon" style="overflow-y: hidden">
+        <v-refresh [list]="data" *ngIf="itemExit;else other_content"></v-refresh>
     </div>
 </div>
 <ng-template #icon>

src/app/app.module.ts

@@ -18,6 +18,7 @@ import {SubTitleComponent} from './components/sub-title/sub-title.component';
 import {SwitchComponent} from './components/switch/switch.component';
 import {AlarmBarComponent} from './components/alarm-bar/alarm-bar.component';
 import {SearchHistoryComponent} from './components/search-history/search-history.component';
+import {RefreshComponent} from './components/refresh/refresh.component';
 
 import {AppMinimize} from '@ionic-native/app-minimize/ngx';
 
@@ -46,6 +47,7 @@ import {Load} from './service/load';
         SwitchComponent,
         AlarmBarComponent,
         SearchHistoryComponent,
+        RefreshComponent,
         HomePage,
         EastPage,
         LoginPage,

src/app/components/refresh/refresh.component.html

+<div class="full" id="refreshPart">
+    <div class="alarmItem" *ngFor="let one of show">
+        <i class="vo v-shebeiguanli1"></i><span class="title">设备名称 : </span><span>{{one.name}}</span><br>
+        <i class="vo v-guzhang"></i><span class="title">故障内容 : </span><span>{{one.con}}</span><br>
+        <i class="vo v-rili"></i><span
+            class="title">发生时间 : </span><span>{{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}</span><br>
+    </div>
+    <div *ngIf="loading" class="refreshLoading">
+        <Icon [type]="'loading'"></Icon>
+        <span class="refreshLoadingText">加载中</span>
+    </div>
+</div>

src/app/components/refresh/refresh.component.scss

+.full {
+  width: 100%;
+  height: calc(100% - 88px);
+  overflow-y: auto;
+}
+
+.refreshLoading {
+  text-align: center;
+  padding: 10px 0;
+  line-height: 40px;
+  height: 40px;
+}
+
+.refreshLoadingText {
+  display: inline-block;
+  vertical-align: super;
+  padding: 0 10px;
+}

src/app/components/refresh/refresh.component.ts

+import {Component, OnInit, Input} from '@angular/core';
+
+@Component({
+  selector: 'v-refresh',
+  templateUrl: './refresh.component.html',
+  styleUrls: ['./refresh.component.scss', '../../alarm/alarm.page.scss'],
+})
+export class RefreshComponent implements OnInit {
+
+  loading = false;
+  data = [];
+  page = 1;
+  show = [];
+  _list;
+  @Input()
+  get list() {
+    return this._list;
+  }
+
+  set list(d) {
+    this.data = d;
+    this.initArray();
+  }
+  constructor() { }
+
+  ngOnInit() {}
+
+  initArray() {
+    this.show = [];
+    this.addArray();
+    const left = document.getElementById('refreshPart');
+    left.scrollTop = 0;
+    let flag = 0;
+    left.addEventListener('scroll', (e) => {
+      if (left.scrollTop >= left.scrollHeight - 600 && flag === 0 ) {
+        this.loading = true;
+        this.page++;
+        setTimeout(() => {
+          this.addArray();
+          this.loading = false;
+          flag = 0;
+        }, 2000);
+      }
+    });
+  }
+
+  addArray() {
+    this.show = this.show.concat(this.data.filter((one, i) => i < this.page * 10 && i >= (this.page - 1) * 10));
+  }
+}

src/app/home/home.page.html

@@ -30,7 +30,7 @@
                     <i class="vo v-no-signal"></i>
                     <div class="in">网络连接失败</div>
                 </div>
-                <div class="item" *ngFor="let item of items" (click)="toControl(item.url, item.name, item.no)">
+                <div class="item" *ngFor="let item of items" (click)="toControl(item)">
                     <div>
                         <div class="top">{{item.name}}
                             <div class="right">{{item.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div>

src/app/home/home.page.ts

@@ -86,7 +86,8 @@ export class HomePage implements OnInit, OnDestroy {
                         img: this.getImgName(value.fieldRegionName),
                         url: value.fieldRegionGroup === '中转池自动控制组' ? 'east' : 'other',
                         time: new Date().getTime(),
-                        state: value.state
+                        state: value.state,
+                        group: value.fieldRegionGroup
                     };
                     this.items.push(itemInfo);
                 });
@@ -102,10 +103,10 @@ export class HomePage implements OnInit, OnDestroy {
         this.slide.startAutoplay();
     }
 
-    toControl(url, name, no) {
-        const query = '?name=' + name + '&no=' + no;
+    toControl(one) {
+        const query = '?name=' + one.name + '&no=' + one.no + '&group=' + one.group;
         this.tf.transfer({
-            url: '/' + url,
+            url: '/' + one.url,
             query: query,
             hash: ''
         });

src/app/mine/mine.page.html

@@ -33,6 +33,9 @@
   <div class="bottomBtn">
     <div Button class="button" (click)="loginOut()" [type]="'primary'" style="letter-spacing: 2px">退出登录</div>
   </div>
+  <div style="position: fixed;bottom: 20px;display: inline-block;width: 100%;text-align: center;color: #666666;font-size: 14px;">
+    版本信息: v1.2.0
+  </div>
 </div>
 
 <ng-template #icon>

src/app/other/other.page.ts

@@ -11,7 +11,7 @@ import {ActivatedRoute} from '@angular/router';
 })
 export class OtherPage implements OnInit {
     value = [false, false, false, false, false, false, false];
-    yewei = 0;
+    yewei;
     temp;
     proc;
     duration = 23;
@@ -22,6 +22,7 @@ export class OtherPage implements OnInit {
     fieldRegionName = '';
     types = [];
     allBtns = [];
+    fieldRegionGroup = '';
 
     state = {
         refreshState: {
@@ -41,6 +42,7 @@ export class OtherPage implements OnInit {
         this.ac.queryParams.subscribe((data) => {
             this.fieldRegionNo = data.no;
             this.fieldRegionName = data.name;
+            this.fieldRegionGroup = data.group;
         });
     }
 
@@ -76,7 +78,9 @@ export class OtherPage implements OnInit {
     }
 
     initAllBtn() {
-        if (this.types.length === this.devices.length && this.devices.length === 2) {
+        if (this.fieldRegionGroup === '发酵池控制组') {
+            this.allBtns = [];
+        } else if (this.types.length === this.devices.length && this.devices.length === 2) {
             let v = 0;
             if (this.devices.filter(a => a.value).length === this.devices.length) {
                 v = 1;