更新一版

src/app/app.component.ts

-import {Component, AfterViewInit} from '@angular/core';
+import {Component, AfterViewInit, OnDestroy} from '@angular/core';
 
 import {Platform} from '@ionic/angular';
 import {SplashScreen} from '@ionic-native/splash-screen/ngx';
 import {StatusBar} from '@ionic-native/status-bar/ngx';
 import {Router, NavigationEnd} from '@angular/router';
 import { AppMinimize } from '@ionic-native/app-minimize/ngx';
+
 declare var screen: any;
+declare var mqtt: any;
 
 @Component({
     selector: 'app-root',
@@ -82,7 +84,7 @@ declare var screen: any;
         }
     `]
 })
-export class AppComponent implements AfterViewInit {
+export class AppComponent implements AfterViewInit, OnDestroy {
     constructor(
         private platform: Platform,
         private splashScreen: SplashScreen,
@@ -96,6 +98,19 @@ export class AppComponent implements AfterViewInit {
     private backBtnPressed;
     private url;
     private flag = 0;
+    client;
+    topic;
+    msg;
+    private options = {
+        keepalive: 10,
+        clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
+        protocolId: 'MQTT',
+        protocolVersion: 4,
+        clean: false,
+        connectTimeout: 60000,
+        username: 'pasture',
+        password: 'Pasture37774020',
+    };
 
     initializeApp() {
         this.platform.ready().then(() => {
@@ -123,6 +138,11 @@ export class AppComponent implements AfterViewInit {
             this.statusBar.overlaysWebView(false);
             this.splashScreen.hide();
         }
+        this.initMqtt();
+    }
+
+    ngOnDestroy(): void {
+        this.endMqtt();
     }
 
     initRouterListen() {
@@ -153,4 +173,22 @@ export class AppComponent implements AfterViewInit {
             }
         });
     }
+
+    initMqtt() {
+        this.client = mqtt.connect('ws://172.16.1.24:8083/mqtt', this.options);
+        this.topic = 'Pasture/cy/Alarm';
+
+        this.client.on('connect', () => {
+            this.msg = 'mqtt连接成功';
+            this.client.subscribe(this.topic);
+            this.client.on('message', (a, b) => {
+                console.log(a, JSON.parse(b.toString()));
+            });
+        });
+    }
+
+    endMqtt() {
+        this.client.unsubscribe(this.topic);
+        this.client.disconnect();
+    }
 }

src/app/home/home.page.ts

@@ -4,8 +4,6 @@ import {ActivatedRoute} from '@angular/router';
 import {Api} from '../service/api';
 import {Load} from '../service/load';
 
-declare var mqtt: any;
-
 @Component({
     selector: 'v-home',
     templateUrl: 'home.page.html',
@@ -17,18 +15,6 @@ export class HomePage implements OnInit, OnDestroy {
                 private api: Api, private load: Load) {}
 
     @ViewChild('slide') slide;
-    // client;
-    // topic;
-    // private options = {
-    //     keepalive: 10,
-    //     clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
-    //     protocolId: 'MQTT',
-    //     protocolVersion: 4,
-    //     clean: false,
-    //     connectTimeout: 60000,
-    //     username: 'pasture',
-    //     password: 'Pasture37774020',
-    // };
 
     imgs = ['1.jpg', '2.jpg', '3.jpg'];
 
@@ -124,11 +110,9 @@ export class HomePage implements OnInit, OnDestroy {
     }
 
     ngOnDestroy(): void {
-        this.endMqtt();
     }
 
     init() {
-        this.initMqtt();
         this.getData(1);
     }
 
@@ -214,24 +198,6 @@ export class HomePage implements OnInit, OnDestroy {
         }]);
     }
 
-    initMqtt() {
-        // this.client = mqtt.connect('ws://120.27.235.39:8083/mqtt', this.options);
-        // this.topic = 'topic/hello';
-        //
-        // this.client.on('connect', () => {
-        //     this.msg = 'mqtt连接成功';
-        //     this.client.subscribe(this.topic);
-        //     this.client.on('message', (a, b) => {
-        //         console.log(a, b);
-        //     });
-        // });
-    }
-
-    endMqtt() {
-        // this.client.unsubscribe(this.topic);
-        // this.client.disconnect();
-    }
-
     slideDidChange() {
         this.slide.startAutoplay();
     }

src/app/index/index.page.html

-<div class="mainCon" style="background: url('../../assets/bg/index.jpg') 100% 100%;background-size: cover;">
+<div class="mainCon" style="background: url('../../assets/bg/index.png') 100% 100%;background-size: cover;">
     <div class="mainTop">
         <div class="imgTop">
-            <img style="width: auto !important;" src="../../assets/icon/favicon.png">
+            <img style="width: auto !important;" src="../../assets/icon/cow.png">
         </div>
         <div style="font-size: 35px;line-height: 55px;height: 20%;border-bottom: 2px solid #ccc;width: 65%;display: inline-block;margin-bottom: 3%;">
             Welcome!

src/app/index/index.page.scss

@@ -12,7 +12,7 @@
 
 .mainContent {
   height: calc(50% - 60px);
-  padding: 15px 40px 45px 40px;
+  padding: 15px 20px 45px 20px;
 }
 
 .contentPart {
@@ -22,22 +22,23 @@
 }
 
 .leftPart {
-  background-color: #ffcc99;
+  background: url("../../assets/index/left.png");
+  background-size: 110% 100%;
   height: 100%;
   width: calc(50% - 0.5px);
   margin-right: 1px;
   display: inline-block;
   border-radius: 65px 0 0 65px;
-  box-shadow: #aaaaaa 2px 2px 10px;
 }
 
 .rightPart {
-  background-color: #e58380;
+  background: url("../../assets/index/right.png");
   height: 100%;
   width: calc(50% - 0.5px);
+  background-size: 100% 100%;
+  margin-left: -10px;
   display: inline-block;
   border-radius: 0 65px 65px 0;
-  box-shadow: #aaaaaa 2px 2px 10px;
 }
 
 .rightPart:active, .leftPart:active {
@@ -46,14 +47,14 @@
 }
 
 .centerPart {
+  background: url("../../assets/index/center.png") center;
+  background-size: 110%;
   position: absolute;
   top: calc(50% - 75px);
   height: 150px;
   width: 150px;
-  background-color: #66cccc;
   left: calc(50% - 75px);
   border-radius: 100%;
-  box-shadow: #FFFFFF 2px 2px 10px;
 }
 .centerPart:active {
   background-color: #ff9933;

src/app/service/load.ts

@@ -7,19 +7,18 @@ export class Load {
 
     private isLoad = false;
     private time = 0;
-    private _nFlag = false;
+    // private _nFlag = false;
 
     toLoad(msg, type) {
         this.isLoad = true;
         document.getElementById('v-loading').style.display = 'block';
         document.getElementById('loading-inner').innerText = msg;
-        if (!this._nFlag && type) {
+        if (type) {
             this.time = 0;
             // @ts-ignore
             document.getElementsByClassName('circle_process')[0].style.display = 'block';
             document.getElementById('innerNum').innerText = this.time.toString() + 's';
             this.addNum();
-            this._nFlag = true;
         }
     }
 
@@ -35,12 +34,12 @@ export class Load {
 
     offLoad() {
         this.isLoad = false;
-        if (this._nFlag) {
-            this._nFlag = false;
-            // @ts-ignore
-            document.getElementsByClassName('circle_process')[0].style.display = 'none';
-            document.getElementById('innerNum').style.display = 'none';
-        }
+        // if (this._nFlag) {
+        //     this._nFlag = false;
+        //     // @ts-ignore
+        //     document.getElementsByClassName('circle_process')[0].style.display = 'none';
+        //     document.getElementById('innerNum').style.display = 'none';
+        // }
         document.getElementById('v-loading').style.display = 'none';
         document.getElementById('loading-inner').innerText = '';
         document.getElementById('innerNum').innerText = '0s';

src/app/service/transfer.ts

 import { Router } from '@angular/router';
 import { Injectable } from '@angular/core';
+import {NavController} from '@ionic/angular';
 
 @Injectable()
 export class Transfer {
-    constructor(private router: Router) {}
+    constructor(private router: Router, private nc: NavController) {}
 
     transfer(req) {
         // 此处为ionic4路由跳转的时候不清空之前的页面组件造成的页面短暂交叠
         // ionic4在发生路由跳转的时候是先进行新组件的加载再进行旧组件的隐藏
         // 我没有找到相关的api以及解决办法,如果后面的人找到了的话麻烦将这个麻烦的方法给解决掉
-        if (document.getElementsByTagName('v' + req.url.replace(/\//, '-')).length > 0) {
-            const y = <HTMLBodyElement>document.getElementsByTagName('v' + req.url.replace(/\//, '-'))[0];
-            y.style.visibility = 'visible';
-        }
-        req.query = req.query ? req.query : {};
-        req.query.refresh = + new Date();
-        this.router.navigate([req.url], {queryParams: req.query, fragment: req.hash});
-        if (document.getElementsByTagName('v' + window.location.pathname.replace(/\//, '-')).length > 0) {
-            const x = <HTMLBodyElement>document.getElementsByTagName('v' + window.location.pathname.replace(/\//, '-'))[0];
-            x.style.visibility = 'hidden';
-            setTimeout(() => {
-                // 此处是防止移动端自己的back button跳转导致页面空白
-                x.style.visibility = 'visible';
-            }, 1000);
-        }
+        // if (document.getElementsByTagName('v' + req.url.replace(/\//, '-')).length > 0) {
+        //     const y = <HTMLBodyElement>document.getElementsByTagName('v' + req.url.replace(/\//, '-'))[0];
+        //     y.style.visibility = 'visible';
+        // }
+        // req.query = req.query ? req.query : {};
+        // req.query.refresh = + new Date();
+        // this.router.navigate([req.url], {queryParams: req.query, fragment: req.hash});
+        // if (document.getElementsByTagName('v' + window.location.pathname.replace(/\//, '-')).length > 0) {
+        //     const x = <HTMLBodyElement>document.getElementsByTagName('v' + window.location.pathname.replace(/\//, '-'))[0];
+        //     x.style.visibility = 'hidden';
+        //     setTimeout(() => {
+        //         // 此处是防止移动端自己的back button跳转导致页面空白
+        //         x.style.visibility = 'visible';
+        //     }, 1000);
+        // }
+        if (!req.query) { req.query = ''; }
+        this.nc.navigateRoot(req.url + req.query);
     }
 }