Skip to content

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

加入两个页面

parent 7996d8e6
Show whitespace changes
Inline Side-by-side
Showing with 470 additions and 32 deletions
config.xml
View file @ a5ac3be8
<?xml version='1.0' encoding='utf-8'?>
<widget id="online.hubeidiyi" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<widget id="online.hubeidiyi" version="1.0.1" 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 0 → 100644
View file @ a5ac3be8
<div class="mainCon">
<Navbar [leftContent]="icon"
(onLeftClick)="onLeftClick()"
style="background-color: #28c9bd"
>报警信息</Navbar>
<SegmentedControl style="height: 40px" [values]="['今日报警信息', '近一周报警信息']"
(onChange)="choose($event)"></SegmentedControl>
<div class="alarmCon">
<div class="alarmItem" *ngFor="let one of data">
{{one.con}}
<div class="right">
{{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}
</div>
</div>
</div>
</div>
<ng-template #icon>
<span class="vo v-back"></span>
</ng-template>
src/app/alarm/alarm.page.scss 0 → 100644
View file @ a5ac3be8
.alarmItem {
min-height: 40px;
line-height: 40px;
padding: 0 10px;
margin: 0 10px;
border-bottom: 1px solid #ccc;
font-size: 14px;
}
.right {
text-align: right;
font-size: 13px;
color: #aaa;
line-height: 25px;
}
src/app/alarm/alarm.page.ts 0 → 100644
View file @ a5ac3be8
import {Component, OnInit} from '@angular/core';
import {Transfer} from '../service/transfer';
@Component({
selector: 'v-alarm',
templateUrl: './alarm.page.html',
styleUrls: ['./alarm.page.scss'],
})
export class AlarmPage implements OnInit {
constructor(private tf: Transfer) {
}
data = [
{time: 1506743279334, con: '11111111111111111111111'},
{time: 1506743273434, con: '22222222222222222222222'},
{time: 1506743212334, con: '33333333333333333333333'},
{time: 1506743314334, con: '44444444444444444444444'}
];
ngOnInit() {
}
choose(e) {
if (e.selectedIndex) {
this.data = [
{time: 1506743279334, con: '123412345678901234567890'},
{time: 1506743273434, con: '234512345678901234567890'},
{time: 1506743212334, con: '345612345678901234567890'},
{time: 1506743314334, con: '456712345678901234567890'}
];
} else {
this.data = [
{time: 1506743279334, con: '11111111111111111111111'},
{time: 1506743273434, con: '22222222222222222222222'},
{time: 1506743212334, con: '33333333333333333333333'},
{time: 1506743314334, con: '44444444444444444444444'}
];
}
}
onLeftClick() {
this.tf.transfer({url: '/index'});
}
}
src/app/app-routing.module.ts
View file @ a5ac3be8
......@@ -5,16 +5,22 @@ import {EastPage} from './east/east.page';
import {LoginPage} from './login/login.page';
import {Auth} from './service/auth';
import {WestPage} from './west/west.component';
import {AlarmPage} from './alarm/alarm.page';
import {RowPage} from './row/row.page';
import {IndexPage} from './index/index.page';
const routes: Routes = [
{
path: '',
canActivateChild: [Auth],
children: [
{path: '', redirectTo: 'home', pathMatch: 'full'},
{path: '', redirectTo: 'index', pathMatch: 'full'},
{path: 'home', component: HomePage},
{path: 'east', component: EastPage},
{path: 'west', component: WestPage}
{path: 'west', component: WestPage},
{path: 'alarm', component: AlarmPage},
{path: 'row', component: RowPage},
{path: 'index', component: IndexPage}
]
},
{path: 'login', component: LoginPage}
......
src/app/app.component.html
View file @ a5ac3be8
<div id="v-loading">
<div class="loading-inner">
<div class="circle_process">
<div id="innerNum"></div>
<div class="wrapper right">
<div class="circle rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circle leftcircle" id="leftcircle"></div>
</div>
</div>
<div id="loading-inner"></div>
</div>
</div>
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
src/app/app.component.ts
View file @ a5ac3be8
......@@ -9,7 +9,78 @@ declare var screen: any;
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
templateUrl: 'app.component.html',
styles: [`
.circle_process{
width: 100px;
height : 100px;
margin: 0 auto;
display: none;
}
.circle_process .wrapper{
width: 50px;
height: 100px;
position: absolute;
top:0;
overflow: hidden;
}
.circle_process .right{
right:0;
position: relative;
left: 50px;
}
.circle_process .left{
position: relative;
top: -100px;
}
.circle_process .circle{
width: 80px;
height: 80px;
border:10px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
transform : rotate(-135deg);
}
.circle_process .rightcircle{
border-top:10px solid green;
border-right:10px solid green;
right:0;
animation: circle_right 120s linear infinite;
-webkit-animation: circle_right 120s linear infinite;
}
.circle_process .leftcircle{
border-bottom:10px solid green;
border-left:10px solid green;
left:0;
animation: circle_left 120s linear infinite;
-webkit-animation: circle_left 120s linear infinite;
}
@-webkit-keyframes circle_right{
0%{
-webkit-transform: rotate(-135deg);
}
50%,100%{
-webkit-transform: rotate(45deg);
}
}
@-webkit-keyframes circle_left{
0%,50%{
-webkit-transform: rotate(-135deg);
}
100%{
-webkit-transform: rotate(45deg);
}
}
#innerNum {
font-size: 20px;
font-weight: 600;
position: absolute;
width: 100px;
height: 100px;
line-height: 90px;
}
`]
})
export class AppComponent implements AfterViewInit {
constructor(
......@@ -64,7 +135,7 @@ export class AppComponent implements AfterViewInit {
registerBackButtonAction() {
this.platform.backButton.subscribe(() => {
if (this.url === '/home' || this.url === '/login') {
if (this.url === '/index' || this.url === '/login') {
if (this.backBtnPressed) {
this.appMinimize.minimize();
this.backBtnPressed = false;
......
src/app/app.module.ts
View file @ a5ac3be8
......@@ -22,12 +22,16 @@ import {HomePage} from './home/home.page';
import {EastPage} from './east/east.page';
import {LoginPage} from './login/login.page';
import {WestPage} from './west/west.component';
import {AlarmPage} from './alarm/alarm.page';
import {RowPage} from './row/row.page';
import {IndexPage} from './index/index.page';
import {Api} from './service/api';
import {Auth} from './service/auth';
import {Http} from './service/http';
import {Transfer} from './service/transfer';
import {AuthInterceptor} from './service/token';
import {Load} from './service/load';
@NgModule({
declarations: [
......@@ -37,6 +41,9 @@ import {AuthInterceptor} from './service/token';
EastPage,
LoginPage,
WestPage,
AlarmPage,
RowPage,
IndexPage,
SwitchComponent
],
entryComponents: [],
......@@ -62,7 +69,8 @@ import {AuthInterceptor} from './service/token';
Api,
Auth,
Http,
Transfer
Transfer,
Load
],
bootstrap: [AppComponent]
})
......
src/app/east/east.page.html
View file @ a5ac3be8
......@@ -32,7 +32,7 @@
</ListItem>
<ListItem multipleLine *ngIf="nanClicked">
选择开启时间
<Stepper class="stepClass" [(ngModel)]="duration" [min]="1" [showNumber]="true"></Stepper>
<Stepper class="stepClass" [(ngModel)]="duration" [min]="1" [showNumber]="true"></Stepper>分钟
<div style="text-align: right;padding-top: 10px">
<div Button style="margin-right: 10px" class="btn" (click)="cancel()" [inline]="true" [size]="'small'" [type]="'default'">取消</div>
<div Button (click)="confirm(0)" class="btn" [inline]="true" [size]="'small'" [type]="'primary'">确认</div>
......@@ -43,7 +43,7 @@
</ListItem>
<ListItem multipleLine *ngIf="beiClicked">
选择开启时间
<Stepper class="stepClass" [(ngModel)]="duration" [min]="1" [showNumber]="true"></Stepper>
<Stepper class="stepClass" [(ngModel)]="duration" [min]="1" [showNumber]="true"></Stepper>分钟
<div style="text-align: right;padding-top: 10px">
<div Button style="margin-right: 20px" class="btn" (click)="cancel()" [inline]="true" [size]="'small'" [type]="'default'">取消</div>
<div Button (click)="confirm(1)" class="btn" [inline]="true" [size]="'small'" [type]="'primary'">确认</div>
......
src/app/east/east.page.scss
View file @ a5ac3be8
......@@ -27,7 +27,8 @@
.stepClass {
display: inline-block;
width: calc(100% - 209px);
margin-left: 100px;
margin-left: 60px;
margin-right: 5px;
}
.btn {
......
src/app/east/east.page.ts
View file @ a5ac3be8
import {Component, OnInit} from '@angular/core';
import {Transfer} from '../service/transfer';
import {Api} from '../service/api';
import {Load} from '../service/load';
@Component({
selector: 'v-east',
......@@ -17,8 +18,9 @@ export class EastPage implements OnInit {
beiClicked = false;
nanLoading = false;
beiLoading = false;
_inv;
constructor(private tf: Transfer, private api: Api) {
constructor(private tf: Transfer, private api: Api, private load: Load) {
}
ngOnInit() {
......@@ -30,7 +32,12 @@ export class EastPage implements OnInit {
this.beiClicked = false;
this.nanLoading = false;
this.beiLoading = false;
this.getData();
this.getData(1);
}
ionViewWillLeave() {
// 清掉计数器
clearTimeout(this._inv);
}
toggle(index) {
......@@ -53,6 +60,7 @@ export class EastPage implements OnInit {
}
confirm(index) {
this.load.toLoad('发送指令中,等待指令返回...', true);
let req;
if (index) {
req = [{
......@@ -79,16 +87,16 @@ export class EastPage implements OnInit {
}
this.nanClicked = false;
this.beiClicked = false;
this.api.presentMsgToast('已成功发送指令,请耐心等待');
this.api.data.updateControl([req, (data) => {
if (data && data.code === 1) {
this.getData();
this.getData(1);
this.api.presentMsgToast(data.message);
} else {
this.api.presentMsgToast(data.message);
}
this.nanLoading = false;
this.beiLoading = false;
this.load.offLoad();
}]);
}
......@@ -96,7 +104,8 @@ export class EastPage implements OnInit {
this.tf.transfer({url: '/home'});
}
getData() {
getData(time) {
if (time) {this.load.toLoad('加载中...', false); }
// 东中转池 19041001 0号通道为温度
this.api.data.getRealData([{sn: '19041001', type: 'WTDR14P'}, (data) => {
if (data && data.constructor === Array) {
......@@ -137,6 +146,10 @@ export class EastPage implements OnInit {
} else {
this.api.presentMsgToast('获取数据失败');
}
if (time) {this.load.offLoad(); }
this._inv = setTimeout(() => {
this.getData(0);
}, 10000);
}]);
// 东中转池 19041005 0,1号通道为1号搅拌池 2,3号通道为2号搅拌池
this.api.data.getRealData([{sn: '19041005', type: 'WTDR66C'}, (data) => {
......
src/app/home/home.page.ts
View file @ a5ac3be8
......@@ -2,6 +2,7 @@ import {Component, OnInit, OnDestroy, ViewChild} from '@angular/core';
import {Transfer} from '../service/transfer';
import {ActivatedRoute} from '@angular/router';
import {Api} from '../service/api';
import {Load} from '../service/load';
declare var mqtt: any;
......@@ -12,7 +13,8 @@ declare var mqtt: any;
})
export class HomePage implements OnInit, OnDestroy {
constructor(private tf: Transfer, private ac: ActivatedRoute, private api: Api) {}
constructor(private tf: Transfer, private ac: ActivatedRoute,
private api: Api, private load: Load) {}
@ViewChild('slide') slide;
// client;
......@@ -118,7 +120,7 @@ export class HomePage implements OnInit, OnDestroy {
// ionic的生命周期函数
ionViewWillEnter () {
this.slideDidChange();
this.getData();
this.getData(1);
}
ngOnDestroy(): void {
......@@ -127,10 +129,13 @@ export class HomePage implements OnInit, OnDestroy {
init() {
this.initMqtt();
this.getData();
this.getData(1);
}
getData() {
getData(time) {
if (time) {
this.load.toLoad('加载中...', false);
}
const dong = {
name: '东中转池',
yewei: '',
......@@ -152,6 +157,9 @@ export class HomePage implements OnInit, OnDestroy {
// 东中转池 19041003 0号通道为液位
this.api.data.getRealData([{sn: '19041003', type: 'WTDR18X'}, (data) => {
flagd ++;
if (time) {
this.load.offLoad();
}
if (data && data.constructor === Array) {
if (data.length > 0) {
if (data[0].value) {
......
src/app/index/index.page.html 0 → 100644
View file @ a5ac3be8
<div class="mainCon" style="background: url('../../assets/bg/index.jpg') 100% 100%;background-size: cover;">
<div class="mainTop">
<div class="imgTop">
<img style="width: auto !important;" src="../../assets/icon/favicon.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!
</div>
<div style="margin-bottom: 2%;">欢迎来到牧场云</div>
<div style="letter-spacing: 1px;font-size: 13px;">智能 便捷 高效</div>
</div>
<div class="mainContent">
<div class="contentPart">
<div class="leftPart" (click)="goTo('home')">
<div class="left_inner"></div>
</div>
<div class="rightPart" (click)="goTo('row')">
<div class="right_inner"></div>
</div>
<div class="centerPart" (click)="goTo('alarm')">
<div class="center_inner"></div>
</div>
</div>
</div>
</div>
src/app/index/index.page.scss 0 → 100644
View file @ a5ac3be8
.mainTop {
height: 50%;
max-height: 50%;
color: #fff;
text-align: center;
}
.imgTop {
height: 40%;
padding-top: 20%;
}
.mainContent {
height: calc(50% - 60px);
padding: 15px 40px 45px 40px;
}
.contentPart {
width: 100%;
height: 100%;
position: relative;
}
.leftPart {
background-color: #ffcc99;
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;
height: 100%;
width: calc(50% - 0.5px);
display: inline-block;
border-radius: 0 65px 65px 0;
box-shadow: #aaaaaa 2px 2px 10px;
}
.rightPart:active, .leftPart:active {
transform:rotateY(180deg);
transition: 0.5s all;
}
.centerPart {
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/index/index.page.ts 0 → 100644
View file @ a5ac3be8
import { Component, OnInit } from '@angular/core';
import {Transfer} from '../service/transfer';
@Component({
selector: 'v-index',
templateUrl: './index.page.html',
styleUrls: ['./index.page.scss'],
})
export class IndexPage implements OnInit {
constructor(private tf: Transfer) { }
ngOnInit() {}
goTo(e) {
this.tf.transfer({url: '/' + e});
}
}
src/app/login/login.page.ts
View file @ a5ac3be8
......@@ -28,7 +28,7 @@ export class LoginPage implements OnInit {
window.localStorage.setItem('token', data.message);
const query = {refresh: new Date().getTime()};
this.tf.transfer({
url: '/home',
url: '/index',
query: query,
hash: ''
});
......
src/app/row/row.page.html 0 → 100644
View file @ a5ac3be8
<p>
row-peng works!
</p>
src/app/row/row.page.ts 0 → 100644
View file @ a5ac3be8
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'v-row-peng',
templateUrl: './row.page.html',
styleUrls: ['./row.page.scss'],
})
export class RowPage implements OnInit {
constructor() { }
ngOnInit() {}
}
src/app/service/api.ts
View file @ a5ac3be8
import { Http } from './http';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { environment } from '../../environments/environment';
import { ToastController } from '@ionic/angular';
import {Http} from './http';
import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
import {environment} from '../../environments/environment';
import {LoadingController, ToastController} from '@ionic/angular';
@Injectable()
export class Api {
constructor(private http: Http, private router: Router, private toast: ToastController) {}
constructor(private http: Http, private router: Router, private toast: ToastController, private loading: LoadingController) {
}
tokenLoseflag = 0;
public url = environment.url;
private load;
private loadFlag = 1;
public login = {
loginForToken: (data) => this.trans('post', '/system/login/loginForToken', data),
......@@ -33,6 +36,7 @@ export class Api {
};
} else {
nextFunc = (data: any) => {
// this.offLoading();
if (this.http.handleToken(data)) {
next(data);
} else {
......@@ -50,6 +54,7 @@ export class Api {
if (!error) {
error = (err) => {
let data;
// this.offLoading();
if (err && err.error && err.error.status) {
if (err.error.status === 401) {
data = {code: 0, message: '用户尚未登录'};
......@@ -91,4 +96,30 @@ export class Api {
});
toast.present();
}
// MMP因为提前加载了内部的component,结果把里面的loading全加载出来了
// 简直阿西了个巴巴, 老规矩,标志位,只能出现一个,出现多的但是还没有消失就不给
async doLoading(msg) {
if (this.loadFlag) {
this.loadFlag = 0;
this.load = await this.loading.create({
spinner: 'circles',
mode: 'ios',
message: msg,
duration: 90000
});
await this.load.present();
}
}
async offLoading() {
if (!this.loadFlag) {
this.loadFlag = 1;
await this.load.dismiss();
} else {
setTimeout(() => {
this.offLoading();
}, 3000);
}
}
}
src/app/service/auth.ts
View file @ a5ac3be8
import {Injectable, OnInit} from '@angular/core';
import {CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
import {Transfer} from './transfer';
import {Load} from './load';
@Injectable()
export class Auth implements CanActivateChild, OnInit {
public login = false;
constructor(private transfer: Transfer) {
constructor(private transfer: Transfer, private load: Load) {
}
ngOnInit() {
......@@ -16,6 +17,7 @@ export class Auth implements CanActivateChild, OnInit {
if (window.localStorage.getItem('token')) {
return true;
} else {
this.load.offLoad();
this.transfer.transfer({
url: '/login',
query: '',
......
src/app/service/load.ts 0 → 100644
View file @ a5ac3be8
import {Injectable} from '@angular/core';
@Injectable()
export class Load {
constructor() {
}
private isLoad = false;
private time = 0;
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) {
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;
}
}
addNum() {
setTimeout(() => {
if (this.isLoad) {
this.time ++;
document.getElementById('innerNum').innerText = this.time.toString() + 's';
this.addNum();
}
}, 1000);
}
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';
}
document.getElementById('v-loading').style.display = 'none';
document.getElementById('loading-inner').innerText = '';
document.getElementById('innerNum').innerText = '0s';
}
}
src/app/west/west.component.ts
View file @ a5ac3be8
import { Component, OnInit } from '@angular/core';
import {Transfer} from '../service/transfer';
import {Api} from '../service/api';
import {Load} from '../service/load';
@Component({
selector: 'v-west',
......@@ -17,8 +18,9 @@ export class WestPage implements OnInit {
beiClicked = false;
nanLoading = false;
beiLoading = false;
_inv;
constructor(private tf: Transfer, private api: Api) {
constructor(private tf: Transfer, private api: Api, private load: Load) {
}
ngOnInit() {
......@@ -27,7 +29,12 @@ export class WestPage implements OnInit {
// ionic的生命周期函数
ionViewWillEnter () {
this.cancel();
this.getData();
this.getData(1);
}
ionViewWillLeave() {
// 清掉计数器
clearTimeout(this._inv);
}
toggle(index) {
......@@ -50,7 +57,6 @@ export class WestPage implements OnInit {
}
confirm(index) {
// TODO:这个地方的参数需要进行修改,这个地方写的是东中转池的内容
let req;
if (index) {
req = [{
......@@ -80,7 +86,7 @@ export class WestPage implements OnInit {
this.api.presentMsgToast('已成功发送指令,请耐心等待');
this.api.data.updateControl([req, (data) => {
if (data && data.code === 1) {
this.getData();
this.getData(1);
this.api.presentMsgToast(data.message);
} else {
this.api.presentMsgToast(data.message);
......@@ -94,7 +100,8 @@ export class WestPage implements OnInit {
this.tf.transfer({url: '/home'});
}
getData() {
getData(time) {
if (time) {this.load.toLoad('加载中...', false); }
// 西中转池 19041006 0号通道为液位
this.api.data.getRealData([{sn: '19041006', type: 'WTDR18X'}, (data) => {
if (data && data.constructor === Array) {
......@@ -141,6 +148,10 @@ export class WestPage implements OnInit {
} else {
this.api.presentMsgToast('获取数据失败');
}
if (time) {this.load.offLoad()}
this._inv = setTimeout(() => {
this.getData(0);
}, 10000);
}]);
}
......
src/environments/environment.ts
View file @ a5ac3be8
......@@ -5,7 +5,8 @@
export const environment = {
production: false,
// url: 'http://cloud-test.witium.com/api', // 对外访问witiumCloud2地址
url: 'http://172.16.1.52:8094', // 测试
url: 'http://172.16.1.13:8094', // 测试
// url: 'http://172.16.1.52:8094', // zz
};
/*
......
src/global.scss
View file @ a5ac3be8
......@@ -100,3 +100,26 @@ img {
height: 100%;
}
#v-loading {
height: 100%;
width: 100%;
background-color: rgba(80, 80, 80, 0.5);
z-index: 9999999999999;
position: relative;
text-align: center;
display: none;
.loading-inner {
min-height: 30px;
min-width: 150px;
max-width: 55%;
display: inline-block;
margin-top: 50%;
border-radius: 5px;
background-color: #fff;
padding: 20px 30px;
font-size: 18px;
position: relative;
line-height: 30px;
text-align: center;
}
}
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