修改预警页显示数据个数（分页）

src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.html

@@ -94,6 +94,13 @@
         </div>
       </div>
     </div>
+    <ion-list id="list"></ion-list>
+    <ion-infinite-scroll threshold="100px" id="infinite-scroll">
+      <ion-infinite-scroll-content loading-spinner="bubbles" loading-text="">
+      </ion-infinite-scroll-content>
+    </ion-infinite-scroll>
+
+
   </div>
 
 </ion-content>

src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.ts

@@ -26,6 +26,10 @@ export class EnvAlarmDetailPage implements OnInit {
     stopTime = null;
     curInterval = 12;
 
+    page = 0;
+    rows = 10;
+    displayLength = 0;
+
     // 工作模式
     workModeSetting = {
         'workMode': '风机',
@@ -33,7 +37,7 @@ export class EnvAlarmDetailPage implements OnInit {
         'workModeOld': '1'
     };
 
-    // commTmr: any;
+    infiniteScroll = document.getElementById('infinite-scroll');
 
     constructor(private ac: ActivatedRoute, private api: Api,
                 private alterContoller: AlertController, private datePipe: DatePipe) {
@@ -41,15 +45,6 @@ export class EnvAlarmDetailPage implements OnInit {
 
     ngOnInit() {
         this.init();
-        // this.commTmr = window.setInterval(() => {
-        //     console.log(1);
-        //     if (this.displayArea  === 'trouble') {
-        //         this.showAlarmList = this.troubleList;
-        //     } else {
-        //         this.showAlarmList = this.alarmList;
-        //     }
-        //
-        // }, 1000) ;
     }
 
     init() {
@@ -60,11 +55,79 @@ export class EnvAlarmDetailPage implements OnInit {
 
             this.setDateInterval(this.curInterval);
             this.showArea(data.displayArea);
-            this.getTroubleList();
-            this.getAlarmList();
+
+            this.getData();
+        });
+    }
+
+    getData() {
+        this.infiniteScroll.addEventListener('ionInfinite', async function () {
+            if (this.displayLength < this.detailInfoLength) {
+                console.log('Loading data...');
+                await this.wait(500);
+                this.infiniteScroll.complete();
+                this.appendPage();
+                console.log('Done');
+            } else {
+                console.log('No More Data');
+                this.infiniteScroll.disabled = true;
+            }
         });
     }
 
+    appendPage() {
+        this.page = this.page + 1;
+
+        this.getTroubleList();
+        this.getAlarmList();
+    }
+
+    appendItems() {
+        const originalLength = length;
+        for (let i = 0; i < 10; i++) {
+            const el = document.createElement('div');
+            el.innerHTML = `
+              <div class="title">
+                <div><img [src]="'../../assets/img/' + item.fieldDeviceType + '.png'" class="deviceIcon"></div>
+                <p style="font-size: 14px">{{item.troubleTime}}</p>
+              </div>
+              <div class="body">
+                <h3 style="margin-bottom: 5px;">{{item.description}}</h3>
+                <div>
+                  <div style="width:65%; float: left">
+                    <div *ngIf="item.data !== null && item.data.temp !== undefined && item.data.temp !== null && item.data.temp !== ''"
+                    class="warnContent">温度: {{item.data.temp}} ℃</div>
+                    <div *ngIf="item.data !== null && item.data.humi !== undefined && item.data.humi !== null && item.data.humi !== ''"
+                    class="warnContent">湿度: {{item.data.humi}} %</div>
+                    <div *ngIf="item.data !== null && item.data.heatStressLevel !== undefined && item.data.heatStressLevel !== null && item.data.heatStressLevel !== ''"
+                    class="warnContent">热应激等级: {{item.data.heatStressLevel}}</div>
+                    <div *ngIf="item.data !== null && item.data.liquidPump !== undefined && item.data.liquidPump !== null  && item.data.liquidPump !== ''"
+                    class="warnContent">供液泵压力: {{item.data.liquidPump}} MPa</div>
+                    <div *ngIf="item.data !== null && item.data.press !== undefined && item.data.press !== null && item.data.press !== ''"
+                    class="warnContent">电磁阀压力: {{item.data.press}} MPa</div>
+                    <div *ngIf="item.data !== null && item.data.NH3 !== undefined && item.data.NH3 !== null && item.data.NH3 !== ''"
+                    class="warnContent">氨气: {{item.data.NH3}} ppm</div>
+                  </div>
+                  <div style="width:35%; float: left">
+                    <div *ngIf="displayArea === 'trouble' && item.disposeState === 0" >
+                      <ion-button color="secondary" style="display: inline-block; width: 55px; height: 30px; font-size: 12px; border-radius: 20px;"
+                      (click)="onRecvClick(item)">确认修复</ion-button>
+                    </div>
+                    <img *ngIf="displayArea === 'trouble' && item.disposeState === 1"
+                    [src]="'../../assets/img/troubleDisposeState' + item.disposeState + '.png'" class="warnIcon">
+
+                    <img *ngIf="displayArea === 'alarm'"
+                    [src]="'../../assets/img/disposeState' + item.disposeState + '.png'" class="warnIcon">
+                  </div>
+                </div>
+
+              </div>
+            `;
+            list.appendChild(el);
+            length++;
+        }
+    }
+
     setDateInterval(interval) {
         this.startTime = this.datePipe.transform(this.getStartTime(interval), 'yyyy-MM');
         this.stopTime = this.datePipe.transform(new Date(), 'yyyy-MM');
@@ -92,14 +155,16 @@ export class EnvAlarmDetailPage implements OnInit {
             if (this.fieldDeviceType !== null && this.fieldDeviceType !== '' && this.fieldDeviceType !== '全部') {
                 req.fieldDeviceType = this.fieldDeviceType;
             }
-            this.api.troubleLog.getByTerm([req, (data) => {
+            this.api.troubleLog.getByTerm(this.page, this.rows, [req, (data) => {
                 this.detailInfo = data;
-                if (data.trouble && data.trouble.constructor === Array) {
-                    data.trouble.forEach((value) => {
-                        value.troubleTime = this.api.formatTime('yyyy-MM-dd hh:mm:ss', new Date(value.troubleTime));
-                    });
-                    this.setTrouble(data);
-                }
+                // if (data.trouble && data.trouble.constructor === Array) {
+                //     data.trouble.forEach((value) => {
+                //         value.troubleTime = this.api.formatTime('yyyy-MM-dd hh:mm:ss', new Date(value.troubleTime));
+                //     });
+                //     this.setTrouble(data);
+                // }
+                this.appendItems();
+
             }]);
         }
     }
@@ -121,7 +186,7 @@ export class EnvAlarmDetailPage implements OnInit {
             if (this.fieldDeviceType !== null && this.fieldDeviceType !== '' && this.fieldDeviceType !== '全部') {
                 req.fieldDeviceType = this.fieldDeviceType;
             }
-            this.api.alarm.getCowshedAlarm([req, (data) => {
+            this.api.alarm.getCowshedAlarm(this.page, this.rows, [req, (data) => {
                 this.detailInfo = data;
                 if (data.trouble && data.trouble.constructor === Array) {
                     data.trouble.forEach((value) => {
@@ -232,4 +297,12 @@ export class EnvAlarmDetailPage implements OnInit {
         this.getTroubleList();
         this.getAlarmList();
     }
+
+    wait(time) {
+        return new Promise(resolve => {
+            setTimeout(() => {
+                resolve();
+            }, time);
+        });
+    }
 }

src/app/service/api.ts

@@ -62,7 +62,7 @@ export class Api {
 
     public troubleLog = {
         // 根据条件获取所有的故障信息
-        getByTerm: (data) => this.trans('post', '/troubleLog/getByTerm', data),
+        getByTerm: (page, rows, data) => this.trans('post', '/troubleLog/getByTerm?page=' + page + '&rows=' + rows, data),
         // 处理故障
         processingFailure: (data) => this.trans('post', '/troubleLog/processingFailure', data),
     }
@@ -82,7 +82,7 @@ export class Api {
         getAlarmByTerm: (data) => this.trans('post', '/alarm/getAlarmByTerm', data),
         getAllAlarm: (data) => this.trans('get', '/alarm/getAllAlarm', data),
         getByTerm: (data) =>  this.trans('post', '/alarm/getByTerm', data),
-        getCowshedAlarm: (data) =>  this.trans('post', '/alarm/getCowshedAlarm', data),
+        getCowshedAlarm: (page, rows, data) =>  this.trans('post', '/alarm/getCowshedAlarm?page=' + page + '&rows=' + rows, data),
         getLatestAlarm: (data) => this.trans('get', '/alarm/getLatestAlarm', data)
     };
 

tslint.json

@@ -29,7 +29,7 @@
     "label-position": true,
     "max-line-length": [
       true,
-      140
+      200
     ],
     "member-access": false,
     "member-ordering": [