Skip to content

M
muChangApp
Commit f1f8deab authored by van.chen's avatar van.chen
Browse files
Options

更新一版

parent 2937d719
Show whitespace changes
Inline Side-by-side
Showing with 77 additions and 70 deletions
src/app/app.component.ts
View file @ f1f8deab
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
View file @ f1f8deab
......@@ -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
View file @ f1f8deab
<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
View file @ f1f8deab
......@@ -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
View file @ f1f8deab
......@@ -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
View file @ f1f8deab
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);
}
}
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