Skip to content

A
appPasture
Commit 5f576385 authored by van.chen's avatar van.chen
Browse files
Options

Merge branch 'push-dev' into 'master' 

Push dev

See merge request !1
parents 928a1b05 a7fc8453
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1919 additions and 172 deletions
angular.json
View file @ 5f576385
......@@ -43,6 +43,9 @@
},
{
"input": "src/global.scss"
},
{
"input": "src/assets/icon/iconfont.css"
}
],
"scripts": [],
......
config.xml
View file @ 5f576385
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyApp</name>
<name>啦啦啦</name>
<description>一个通用模板app.</description>
<author email="1005100328@qq.com">Van.Chen</author>
<content src="index.html" />
......@@ -83,6 +83,7 @@
<plugin name="cordova-plugin-ionic-webview" spec="^3.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-plugin-local-notification" spec="0.9.0-beta.2" />
<plugin name="cordova-plugin-appminimize" spec="1.0.1" />
<engine name="android" spec="7.1.4" />
<engine name="ios" spec="4.5.5" />
</widget>
package.json
View file @ 5f576385
......@@ -21,6 +21,7 @@
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
"@ionic-native/app-minimize": "^5.0.0",
"@ionic-native/core": "^5.0.0",
"@ionic-native/local-notifications": "^5.3.0",
"@ionic-native/splash-screen": "^5.0.0",
......@@ -28,14 +29,18 @@
"@ionic/angular": "^4.1.0",
"cordova-android": "7.1.4",
"cordova-ios": "4.5.5",
"cordova-plugin-appminimize": "1.0.1",
"cordova-plugin-badge": "^0.8.8",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^3.1.2",
"cordova-plugin-local-notification": "0.9.0-beta.2",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"core-js": "^2.5.4",
"echarts": "^4.2.1",
"ngx-echarts": "^4.1.0",
"rxjs": "~6.3.3",
"web-animations-js": "^2.3.1",
"zone.js": "~0.8.29"
......@@ -77,11 +82,12 @@
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-local-notification": {}
"cordova-plugin-local-notification": {},
"cordova-plugin-appminimize": {}
},
"platforms": [
"android",
"ios"
]
}
}
\ No newline at end of file
}
src/app/app-routing.module.ts
View file @ 5f576385
......@@ -3,7 +3,7 @@ import {Routes, RouterModule, PreloadAllModules} from '@angular/router';
import { AuthService } from './service/auth.service';
const routes: Routes = [
{ path: '', redirectTo: 'extra', pathMatch: 'full' },
{ path: '', redirectTo: 'main', pathMatch: 'full' },
{ path: 'main', canActivateChild: [AuthService], loadChildren: './home/home.module#HomePageModule'},
{ path: 'extra', loadChildren: './extra/extra.module#ExtraPageModule'},
];
......
src/app/app.component.ts
View file @ 5f576385
import { Component } 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 { AppMinimize } from '@ionic-native/app-minimize/ngx';
import { Router, NavigationEnd } from '@angular/router';
import { Platform } from '@ionic/angular';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styles: []
styles: [],
providers: [AppMinimize]
})
export class AppComponent {
backBtnPressed = false; // 用于判断返回键是否触发
url;
dom;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
private statusBar: StatusBar,
private appMinimize: AppMinimize,
private router: Router
) {
this.initializeApp();
this.initEvent();
this.initRouterListen();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.statusBar.backgroundColorByHexString('#ffffffff');
this.splashScreen.hide();
this.registerBackButtonAction(); // 注册返回按键事件
this.platform.resume.subscribe(); // 弹出框
});
}
......@@ -37,4 +51,34 @@ export class AppComponent {
}
});
}
initRouterListen() {
this.router.events.subscribe(event => { // 需要放到最后一个执行
if (event instanceof NavigationEnd) {
this.url = window.location.pathname;
}
});
}
registerBackButtonAction() {
this.platform.backButton.subscribe((event) => {
if (this.url === '/main' || this.url === '/extra') {
if (this.backBtnPressed) {
this.appMinimize.minimize();
this.backBtnPressed = false;
window.history.pushState('forward', null, this.url);
// window.history.forward();
return;
} else {
this.backBtnPressed = true;
setTimeout(() => this.backBtnPressed = false, 2000);
return;
}
} else {
this.backBtnPressed = true;
setTimeout(() => this.backBtnPressed = false, 2000);
return;
}
});
}
}
src/app/app.module.ts
View file @ 5f576385
......@@ -5,9 +5,11 @@ import { HttpClientModule } from '@angular/common/http';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
import { AppMinimize } from '@ionic-native/app-minimize/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
......@@ -15,20 +17,35 @@ import { ApiService } from './service/api.service';
import { AuthService } from './service/auth.service';
import { HttpService } from './service/http.service';
import { TransferService } from './service/transfer.service';
import { AuthInterceptor } from './service/token.service';
import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, BrowserAnimationsModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
imports: [
BrowserModule,
BrowserAnimationsModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
NgxEchartsModule
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true,
},
ApiService,
HttpService,
AuthService,
TransferService,
LocalNotifications
LocalNotifications,
AppMinimize
],
bootstrap: [AppComponent]
})
......
src/app/extra/login/login.component.html
View file @ 5f576385
<div class="loginPage" @fade>
<div class="topBar">
<img class="imgPart" src="../../../assets/icon/favicon.png">
<div class="title">上海辉度智能科技有限公司</div>
<div class="title"> 上海辉度智能科技有限公司</div>
</div>
<div class="mainBar">
<div class="inputLine">
......@@ -12,6 +12,6 @@
<div class="labelForInput">密码</div>
<ion-input type="password" [(ngModel)]="req.ps" mode="ios" class="input"></ion-input>
</div>
<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="login()">Login</ion-button>
<ion-button mode="ios" color="primary" expand="block" class="loginBtn" (click)="login()">Login</ion-button>
</div>
</div>
src/app/extra/login/login.component.scss
View file @ 5f576385
......@@ -34,6 +34,7 @@
.inputLine {
padding-top: 8%;
border-bottom: 2px solid #1890ff;
margin: 0 1%;
}
.labelForInput {
......
src/app/extra/login/login.component.ts
View file @ 5f576385
......@@ -29,12 +29,12 @@ export class LoginComponent implements OnInit {
this.tf.transfer({
from: 'app-extra',
to: 'app-home',
url: '/main/index',
url: '/main',
query: '',
hash: ''
});
} else {
// message
this.api.presentMsgToast(data && data.message ? data.message : '登录失败');
}
}]);
}
......
src/app/home/home.module.ts
View file @ 5f576385
......@@ -3,21 +3,26 @@ import {CommonModule} from '@angular/common';
import {IonicModule} from '@ionic/angular';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {NgxEchartsModule} from 'ngx-echarts';
import {HomePage} from './home.page';
import {PageOneComponent} from '../main/page-one/page-one.component';
import {PageTwoComponent} from '../main/page-two/page-two.component';
import {PageThreeComponent} from '../main/page-three/page-three.component';
import {PageFourComponent} from '../main/page-four/page-four.component';
import {PageDetailComponent} from '../main/page-detail/page-detail.component';
import {SearchListComponent} from '../main/search-list/search-list.component';
import {SearchHistoryComponent} from '../main/search-history/search-history.component';
import {AlarmListComponent} from '../main/alarm-list/alarm-list.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
NgxEchartsModule,
RouterModule.forChild([
{
path: 'index',
path: '',
component: HomePage
},
{
......@@ -32,7 +37,10 @@ import {PageDetailComponent} from '../main/page-detail/page-detail.component';
PageTwoComponent,
PageThreeComponent,
PageFourComponent,
PageDetailComponent
PageDetailComponent,
SearchListComponent,
SearchHistoryComponent,
AlarmListComponent
]
})
export class HomePageModule {
......
src/app/home/home.page.html
View file @ 5f576385
<ion-slides @fade id="slideComponent" style="width: 100%;height: 100%;"
mode="ios" [options]="options" [@toLeft]="toLeft" [@toRight]="toRight" (ionSlideDidChange)="slideOnChange()">
<ion-slide>
<div class="box" style="color: #ffd31a"><app-page-one></app-page-one></div>
<div class="box"><app-page-one></app-page-one></div>
</ion-slide>
<ion-slide>
<div class="box" id="page_two" style="color: #f04141"><app-page-two></app-page-two></div>
<div class="box"><app-page-two></app-page-two></div>
</ion-slide>
<ion-slide>
<div class="box" style="color: #7e57ff"><app-page-three></app-page-three></div>
<div class="box"><app-page-three></app-page-three></div>
</ion-slide>
<ion-slide>
<div class="box" style="color: #cccccc"><app-page-four></app-page-four></div>
<div class="box"><app-page-four></app-page-four></div>
</ion-slide>
</ion-slides>
<ion-row class="bottomPart">
<ion-col [ngClass]="{'activeBar': active[0]}" (click)="goActive(0)">首页</ion-col>
<ion-col class="padLeft" [ngClass]="{'activeBar': active[1]}" (click)="goActive(1)">第二页</ion-col>
<ion-col class="padLeft" [ngClass]="{'activeBar': active[2]}" (click)="goActive(2)">第三页</ion-col>
<ion-col class="padLeft" [ngClass]="{'activeBar': active[3]}" (click)="goActive(3)">我的</ion-col>
</ion-row>
<div class="bottomPart">
<div class="bottomItem" [ngClass]="{'activeBarLeft': active[0]}" (click)="goActive(0)">
<div class="icoPart"><i class="icofo ioshouye"></i></div>
首页</div>
<div class="bottomItem padLeft" [ngClass]="{'activeBarLeft': active[1]}" (click)="goActive(1)">
<div class="icoPart"><i class="icofo iojiankong"></i></div>
监控</div>
<div class="bottomItem padLeft" [ngClass]="{'activeBarRight': active[2]}" (click)="goActive(2)">
<div class="icoPart"><i class="icofo iobaojing"></i></div>
报警</div>
<div class="bottomItem padLeft" [ngClass]="{'activeBarRight': active[3]}" (click)="goActive(3)">
<div class="icoPart"><i class="icofo iowode"></i></div>
我的</div>
</div>
src/app/home/home.page.scss
View file @ 5f576385
.bottomPart {
height: 55px;
line-height: 35px;
text-align: center;
border-top: 1px solid #ccc;
color: cornflowerblue;
color: #1890ff;
z-index: 11;
font-size: 14px;
}
.padLeft {
border-left: 1px solid #cccccc;
.activeBarLeft {
background-color: #1890ff;
color: #ffffff;
font-size: 15px;
//border-top-left-radius: 50px;
//border-top-right-radius: 50px;
border-bottom-left-radius: 37px;
border-top-right-radius: 50px;
}
.activeBar {
background-color: #f25454;
.activeBarRight {
background-color: #1890ff;
color: #ffffff;
font-size: 15px;
border-bottom-right-radius: 37px;
border-top-left-radius: 50px;
}
.box {
width: 100%;
height: 100%;
}
#slideComponent {
z-index: 10;
}
.icoPart {
font-size: 25px;
}
.bottomItem {
width: 25%;
display: inline-block;
height: 100%;
}
.padLeft {
}
src/app/home/home.page.ts
View file @ 5f576385
......@@ -21,9 +21,7 @@ export class HomePage implements OnInit {
index;
active = [true, false, false, false];
startX;
startY;
X;
Y;
toLeft = 'backLeft';
toRight = 'backRight';
......@@ -32,13 +30,10 @@ export class HomePage implements OnInit {
ngOnInit() {
document.getElementById('slideComponent').addEventListener('touchstart', <TouchEvent>(e) => {
this.startX = e.touches[0].pageX;
this.startY = e.touches[0].pageY;
});
document.getElementById('slideComponent').addEventListener('touchmove', <TouchEvent>(e) => {
const moveEndX = e.touches[0].pageX;
const moveEndY = e.touches[0].pageY;
this.X = moveEndX - this.startX;
this.Y = moveEndY - this.startY;
});
document.getElementById('slideComponent').addEventListener('touchend', <TouchEvent>(e) => {
if ( this.X > 100 ) {
......@@ -46,6 +41,7 @@ export class HomePage implements OnInit {
} else if ( this.X < -100 ) {
this.slideNext();
}
this.X = 0;
});
}
......
src/app/main/alarm-list/alarm-list.component.html 0 → 100644
View file @ 5f576385
<div class="alarmList">
<div class="list">
<div class="one" *ngFor="let one of list">
<div class="item">
名称: {{one.name}}
</div>
<div class="item">
归属单位: {{one.company}}
</div>
<div class="item">
报警参数: {{one.company}}
</div>
<div class="item">
<i class="hong icofo iobaojing"></i> {{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}
</div>
<div class="bottom">
<i class="hong icofo iogantan"></i> {{one.message}}
</div>
</div>
</div>
</div>
src/app/main/alarm-list/alarm-list.component.scss 0 → 100644
View file @ 5f576385
.alarmList {
background-color: #f4f4f4;
height: calc(100% - 60px);
overflow-y: auto;
padding: 10px;
.list {
.one {
width: 100%;
height: 100%;
line-height: 25px;
padding: 5px 0;
.item {
display: inline-block;
width: 50%;
vertical-align: text-top;
}
}
.one:not(:last-child) {
border-bottom: 1px solid #ccc;
}
}
}
src/app/main/alarm-list/alarm-list.component.ts 0 → 100644
View file @ 5f576385
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-alarm-list',
templateUrl: './alarm-list.component.html',
styleUrls: ['./alarm-list.component.scss'],
})
export class AlarmListComponent implements OnInit {
list = [{
name: '设备一',
company: '上海辉度',
params: '压力',
time: new Date().getTime(),
message: '压力为：72MPa，超过了压力50MPa的预警上限'
}, {
name: '设备一',
company: '上海辉度',
params: '压力',
time: new Date().getTime(),
message: '压力为：72MPa，超过了压力50MPa的预警上限'
}, {
name: '设备一',
company: '上海辉度',
params: '压力',
time: new Date().getTime(),
message: '压力为：72MPa，超过了压力50MPa的预警上限'
}, {
name: '设备二',
company: '上海辉度',
params: '压力',
time: new Date().getTime(),
message: '压力为：72MPa，超过了压力50MPa的预警上限'
}, {
name: '设备三',
company: '上海辉度',
params: '压力',
time: new Date().getTime(),
message: '压力为：72MPa，超过了压力50MPa的预警上限'
}, {
name: '设备四',
company: '上海辉度',
params: '压力',
time: new Date().getTime(),
message: '压力为：72MPa，超过了压力50MPa的预警上限'
}, {
name: '设备四',
company: '上海辉度',
params: '压力',
time: new Date().getTime(),
message: '压力为：72MPa，超过了压力50MPa的预警上限'
}, {
name: '设备四',
company: '上海辉度',
params: '压力',
time: new Date().getTime(),
message: '压力为：72MPa，超过了压力50MPa的预警上限'
}, {
name: '设备四',
company: '上海辉度',
params: '压力',
time: new Date().getTime(),
message: '压力为：72MPa，超过了压力50MPa的预警上限'
}];
constructor() { }
ngOnInit() {}
}
src/app/main/page-detail/page-detail.component.html
View file @ 5f576385
<div @fade>
<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="toList()">List</ion-button>
</div>
<ion-toolbar mode="ios" style="--color: #1890ff;padding: 0 15px;border-bottom: 2px solid #1890ff;">
<ion-buttons slot="start">
<i class="icofo iofanhui" style="font-size: 22px" (click)="toList()"></i>
</ion-buttons>
<ion-title>
{{item.name}} - 详情
</ion-title>
</ion-toolbar>
<ion-content style="font-size: 14px">
<div class="header">
<div class="card">
<div class="middle">
<i class="icofo ioxihuan icon"></i>
<div class="left">
<img src="../../../assets/icon/favicon.png">
</div>
<div class="right">
<div class="item">
设备名称: {{item.x}}
</div>
<div class="item">
设备编号: {{item.y}}
</div>
<div class="item">
报警次数: {{item.z}}
</div>
</div>
<div class="rightBtn">
<div [class]="item.online === 1 ? 'tag online' : 'tag offline'">
{{item.online === 1 ? '在线' : '离线'}}
</div>
<div class="tag error" *ngIf="item.error === 1" style="margin-top: 5px">
故障
</div>
</div>
</div>
</div>
</div>
<div class="divideDiv"></div>
<div class="pieCharts">
<div echarts [options]="pie1" class="pieChart"></div>
<div echarts [options]="pie2" class="pieChart"></div>
<div echarts [options]="pie3" class="pieChart"></div>
</div>
<div class="divideDiv"></div>
<div class="lineCharts">
<div echarts [options]="line1" class="lineChart"></div>
<div echarts [options]="line2" class="lineChart"></div>
<div echarts [options]="line3" class="lineChart"></div>
</div>
</ion-content>
src/app/main/page-detail/page-detail.component.scss
View file @ 5f576385
.header {
width: 100%;
overflow-y: auto;
padding: 5px 10px;
.card {
.top {
line-height: 25px;
position: relative;
border-bottom: 1px solid #ccc;
.right {
position: absolute;
right: 10px;
top: 0;
}
}
.middle {
padding: 5px 0;
min-height: 90px;
position: relative;
.icon {
position: absolute;
top: 5px;
right: 9px;
font-size: 22px;
color: #f5222d;
}
.left {
width: 90px;
height: 100%;
display: inline-block;
vertical-align: top;
img {
height: 100%;
width: 80px;
}
}
.right {
display: inline-block;
width: calc(100% - 90px);
line-height: 26px;
padding-left: 20px;
}
.rightBtn {
width: 50px;
position: absolute;
right: 0;
bottom: 12px;
}
}
}
}
.pieCharts {
width: 100%;
.pieChart {
height: 125px;
width: 33.33%;
display: inline-block;
}
}
.lineCharts {
text-align: center;
.lineChart {
height: 200px;
width: 100%;
margin-bottom: 3px;
}
}
src/app/main/page-detail/page-detail.component.ts
View file @ 5f576385
import {Component, OnInit} from '@angular/core';
import {Component, ViewChild, OnInit, ElementRef, AfterViewInit} from '@angular/core';
import {fadeIn} from '../../animations/fade-in';
import {TransferService} from '../../service/transfer.service';
import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-page-detail',
......@@ -9,20 +11,208 @@ import {TransferService} from '../../service/transfer.service';
animations: [fadeIn]
})
export class PageDetailComponent implements OnInit {
pie1 = {};
pie2 = {};
pie3 = {};
line1 = {};
line2 = {};
line3 = {};
constructor(private tf: TransferService) {
constructor(private tf: TransferService, private ar: ActivatedRoute) {
}
item = {};
pieOption = {
title: {
text: '温度',
x: 'center',
y: 'center',
textStyle: {
color: '#555555',
fontSize: 16,
fontWeight: 'normal'
},
},
series: [{
type: 'pie',
radius: ['65%', '85%'],
avoidLabelOverlap: false,
startAngle: 270,
color: ['#9f8fc1'],
hoverAnimation: false,
legendHoverLink: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 20,
itemStyle: {
normal: {
color: '#1890ff'
}
}
}, {
value: 20,
itemStyle: {
normal: {
color: '#cccccc'
}
}
}]
}]
};
lineOption = {
backgroundColor: '#293042',
grid: {
left: 10,
top: '10%',
bottom: 20,
right: 40,
containLabel: true
},
title: {
text: '温度',
x: 'center',
top: '0',
textStyle: {
color: '#cccccc'
}
},
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
boundaryGap: false,
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#cccccc'
}
},
axisTick: {
show: false
}
},
yAxis: {
ayisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#cccccc'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#cccccc'
}
},
axisLine: {
lineStyle: {
color: '#cccccc'
}
}
},
series: [{
type: 'line',
smooth: true,
symbolSize: 10,
animation: false,
lineWidth: 1.2,
hoverAnimation: false,
data: [22.20, 16.82, 27.91, 30.00, 40.90, 32.30, 29.10],
symbol: 'circle',
itemStyle: {
normal: {
color: '#f17a52',
shadowBlur: 40,
label: {
show: true,
position: 'top',
textStyle: {
color: '#f17a52',
}
}
}
},
areaStyle: {
normal: {
color: '#f17a52',
opacity: 0.08
}
}
}
]
};
ngOnInit() {
this.ar.queryParams.subscribe((params) => {
if (params) {
this.item = {
name: params.name,
online: 1,
error: 1,
time: 111,
x: 1,
y: 2,
z: 3
};
}
});
this.initPieCharts();
this.initLineCharts();
}
initPieCharts() {
const option = JSON.parse(JSON.stringify(this.pieOption));
option.title.text = '温度';
option.series[0].data[0].value = 75;
option.series[0].data[1].value = 25;
this.pie1 = JSON.parse(JSON.stringify(option));
option.title.text = '湿度';
option.series[0].data[0].value = 50;
option.series[0].data[1].value = 50;
this.pie2 = JSON.parse(JSON.stringify(option));
option.title.text = '压力';
option.series[0].data[0].value = 25;
option.series[0].data[1].value = 75;
this.pie3 = JSON.parse(JSON.stringify(option));
}
initLineCharts() {
const option = JSON.parse(JSON.stringify(this.lineOption));
option.title.text = '温度';
this.line1 = JSON.parse(JSON.stringify(option));
option.title.text = '湿度';
this.line2 = JSON.parse(JSON.stringify(option));
option.title.text = '压力';
this.line3 = JSON.parse(JSON.stringify(option));
}
toList() {
this.tf.transfer({
from: 'app-page-detail',
to: 'app-home',
url: '/main/index',
url: '/main',
query: '',
hash: 'page_two'
hash: 'page_one'
});
}
......
src/app/main/page-four/page-four.component.html
View file @ 5f576385
<div class="personSet">
<div class="mainContent">
<div class="topBar">
<img class="imgPart" src="../../../assets/icon/favicon.png">
<div class="topRight">1111111</div>
<div class="top">
<div class="imgPart">
<img style="height: 100%" src="../../../assets/icon/favicon.png">
</div>
<div class="topRight">
<div class="rightTop">{{user.userName}}</div>
<div class="rightBottom">{{user.factoryName}}</div>
</div>
</div>
</div>
<div class="middleCon">
<div class="line">
<div class="label">昵称</div>
<div class="text">{{user.nickName}}</div>
</div>
<div class="line">
<div class="label">邮箱</div>
<div class="text">{{user.email}}</div>
</div>
<div class="line">
<div class="label">手机号</div>
<div class="text">{{user.phone}}</div>
</div>
</div>
<div class="bottomBtn">
<ion-button mode="ios" color="primary" expand="block" class="button" (click)="loginOut()">退出登录</ion-button>
</div>
</div>
src/app/main/page-four/page-four.component.scss
View file @ 5f576385
.personSet {
width: 100%;
height: 100%;
}
.topBar {
height: 30%;
padding: 10% 0;
padding: 13% 0 7% 0;
background-color: lavender;
.top {
height: 100%;
padding: 5% 10%;
.imgPart {
width: 35%;
height: 80px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.topRight {
width: calc(62% - 2px);
display: inline-block;
height: 80px;
line-height: 40px;
font-size: 16px;
font-weight: 600;
text-align: center;
.rightTop {
border-bottom: 2px solid #cccccc;
}
}
}
}
.middleCon {
.line {
padding-top: 8%;
border-bottom: 2px solid #1890ff;
margin: 0 1%;
.label {
width: 35%;
display: inline-block;
height: 40px;
line-height: 40px;
}
.text {
width: 65%;
display: inline-block;
text-align: left;
height: 40px;
line-height: 30px;
}
}
}
.imgPart {
width: 35%;
display: inline-block;
.bottomBtn {
margin-top: 8%;
.button {
padding: 0;
margin: 0;
border-radius: 0;
background-color: #1890ff;
}
}
@media all and (orientation : landscape) {
.middleCon .line {
padding-top: 2%;
}
.bottomBtn {
margin-top: 2%;
}
.topBar {
height: 35%;
padding: 3% 0 0 0;
.top {
padding: 0 3%;
}
}
}
src/app/main/page-four/page-four.component.ts
View file @ 5f576385
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../service/api.service';
import { TransferService } from '../../service/transfer.service';
@Component({
selector: 'app-page-four',
......@@ -7,8 +9,37 @@ import { Component, OnInit } from '@angular/core';
})
export class PageFourComponent implements OnInit {
constructor() { }
user: any = {};
constructor(private api: ApiService, private tf: TransferService) { }
ngOnInit() {}
ngOnInit() {
this.getSelfInfo();
}
getSelfInfo() {
this.api.user.getSelfInfo(['', (data) => {
if (data) {
this.user = data;
} else {
this.api.presentMsgToast(data && data.message ? data.message : '登录失败');
}
}]);
}
loginOut() {
this.api.login.logout(['', (data) => {
if (data) {
window.localStorage.removeItem('token');
this.tf.transfer({
to: 'app-extra',
from: 'app-home',
url: '/extra',
hash: '',
query: ''
});
} else {
this.api.presentMsgToast(data && data.message ? data.message : '登录失败');
}
}]);
}
}
src/app/main/page-one/page-one.component.html
View file @ 5f576385
<ion-slides style="width: 100%;height: 200px;"
mode="ios" [options]="options">
<ion-slide>
<div class="inBox" style="color: #ffd31a"><h1>这是首页轮播图1</h1></div>
</ion-slide>
<ion-slide>
<div class="inBox" style="color: #f04141"><h1>这是首页轮播图2</h1></div>
</ion-slide>
<ion-slide>
<div class="inBox" style="color: #7e57ff"><h1>这是首页轮播图3</h1></div>
</ion-slide>
<ion-slide>
<div class="inBox" style="color: #cccccc"><h1>这是首页轮播图4</h1></div>
</ion-slide>
</ion-slides>
<div class="mainContent">
<ion-slides #slide style="width: 100%;height: 200px;"
mode="ios" [options]="options" (ionSlideTouchEnd)="slideDidChange()">
<ion-slide class="slideCon" *ngFor="let one of imgs">
<div class="inBox">
<img [src]="'../../../assets/imgs/' + one">
</div>
</ion-slide>
</ion-slides>
<div class="partCard">
<div class="partTitle">
<i class="icofo iostate"></i>
<label>设备状态</label>
</div>
<div class="partCon">
<div class="item" *ngFor="let one of items">
<div class="top">
{{one.name}}
</div>
<div [class]="'bottom ' + one.color">
<div class="left">
<i [class]="'icofo ' + one.icon"></i>
</div>
<div class="right">{{one.num}}</div>
</div>
</div>
</div>
</div>
<div class="partCard">
<div class="partTitle">
<i class="icofo ioxihuan1"></i>
<label>关注列表</label>
</div>
<div class="partCon">
<div class="list" *ngFor="let one of list" (click)="toDetail(one)">
<div class="top">
<div class="left">
<div class="title">
设备名称:
</div>
<div class="name">
{{one.name}}
</div>
</div>
<div class="right">
{{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}
</div>
</div>
<div class="middle">
<div class="one" *ngFor="let two of params">
<div class="label">{{two.label}}</div>
<div class="value">{{one[two.value]}}</div>
</div>
</div>
<div class="bottom">
<div [class]="one.online === 1 ? 'tag online' : 'tag offline'">
{{one.online === 1 ? '在线' : '离线'}}
</div>
<div class="tag error" *ngIf="one.error === 1">
故障
</div>
</div>
</div>
</div>
</div>
</div>
src/app/main/page-one/page-one.component.scss
View file @ 5f576385
.item {
width: calc(25% - 6px);
display: inline-block;
margin: 2px;
border: 1px solid #ccc;
border-radius: 8px;
.top {
font-size: 15px;
border-bottom: 1px solid #cccccc;
height: 30px;
line-height: 30px;
}
.left {
border-right: 1px solid #cccc;
}
.left, .right {
display: inline-block;
width: 50%;
line-height: 30px;
}
}
.list {
font-size: 14px;
.top {
text-align: left;
position: relative;
border-bottom: 1px solid #cccc;
line-height: 25px;
.left {
.title, .name {
display: inline-block;
padding: 0 5px;
}
}
.right {
display: inline-block;
position: absolute;
right: 5px;
bottom: 0;
}
}
.middle {
.one {
width: 33%;
display: inline-block;
line-height: 30px;
}
}
.bottom {
border-bottom: 1px solid #ccc;
text-align: left;
padding-bottom: 3px;
}
}
src/app/main/page-one/page-one.component.ts
View file @ 5f576385
import { Component, OnInit } from '@angular/core';
import {Component, OnInit, ViewChild} from '@angular/core';
import {TransferService} from '../../service/transfer.service';
@Component({
selector: 'app-page-one',
templateUrl: './page-one.component.html',
styleUrls: ['./page-one.component.scss'],
selector: 'app-page-one',
templateUrl: './page-one.component.html',
styleUrls: ['./page-one.component.scss'],
})
export class PageOneComponent implements OnInit {
options = {
speed: 1000,
allowTouchMove: true
};
constructor() { }
@ViewChild('slide') slide;
options = {
speed: 1000,
allowTouchMove: true,
effect: 'flip',
autoplay: {
delay: 2000,
},
loop: true,
spaceBetween: 0
};
items = [{
name: '总数',
icon: 'iozongshu',
num: 20,
color: 'zi'
}, {
name: '在线',
icon: 'iodui',
num: 12,
color: 'lv'
}, {
name: '故障',
icon: 'iogantan',
num: 3,
color: 'hong'
}, {
name: '离线',
icon: 'iolixian',
num: 5,
color: 'hui'
}];
ngOnInit() {}
list = [{
name: '设备一',
time: new Date().getTime(),
temp: '20℃',
humid: '25%rH',
press: '1003kpa',
online: 1,
error: 1
}, {
name: '设备二',
time: new Date().getTime() - 24 * 3600 * 1000,
temp: '21℃',
humid: '29%rH',
press: '1005kpa',
online: 0,
error: 1
}, {
name: '设备三',
time: new Date().getTime() + 24 * 3600 * 1000,
temp: '25℃',
humid: '22%rH',
press: '1010kpa',
online: 1,
error: 0
}, {
name: '设备三',
time: new Date().getTime() + 24 * 3600 * 1000,
temp: '25℃',
humid: '22%rH',
press: '1010kpa',
online: 1,
error: 0
}, {
name: '设备三',
time: new Date().getTime() + 24 * 3600 * 1000,
temp: '25℃',
humid: '22%rH',
press: '1010kpa',
online: 1,
error: 0
}, {
name: '设备三',
time: new Date().getTime() + 24 * 3600 * 1000,
temp: '25℃',
humid: '22%rH',
press: '1010kpa',
online: 1,
error: 0
}, {
name: '设备三',
time: new Date().getTime() + 24 * 3600 * 1000,
temp: '25℃',
humid: '22%rH',
press: '1010kpa',
online: 1,
error: 0
}, {
name: '设备三',
time: new Date().getTime() + 24 * 3600 * 1000,
temp: '25℃',
humid: '22%rH',
press: '1010kpa',
online: 1,
error: 0
}];
imgs = ['1.png', '2.png', '3.png', '4.png'];
params = [{label: '温度', value: 'temp'},
{label: '湿度', value: 'humid'},
{label: '压力', value: 'press'}];
constructor(private tf: TransferService) {
}
ngOnInit() {
}
slideDidChange() {
this.slide.startAutoplay();
}
toDetail(one) {
const req = {
to: 'app-page-detail',
from: 'app-page-one',
url: '/main/detail',
query: {name: one.name},
hash: ''
};
this.tf.transfer(req);
}
}
src/app/main/page-three/page-three.component.html
View file @ 5f576385
<p>
page-three works!
</p>
<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="show()">Detail</ion-button>
<div class="mainContent" style="text-align: left">
<div class="searchBar">
<div class="inputPart" [ngClass]="{'showBtn': showSearchBtn}">
<i class="icofo iosearch searchBarSearchIco"></i>
<input type="text" class="searchBarText" (click)="showHistory = true;showSearchBtn = true;"
[(ngModel)]="searchText" placeholder="请输入设备名称" (keyup)="keyup($event)">
</div>
<div class="buttonPart" *ngIf="showSearchBtn">
<span class="cancel" (click)="cancel()">取消</span>
<span class="search" style="color: #1890ff" (click)="search()">搜索</span>
</div>
</div>
<app-alarm-list *ngIf="!showHistory"></app-alarm-list>
<app-search-history *ngIf="showHistory" [history]="history" (oneClick)="historyClick($event)"></app-search-history>
</div>
src/app/main/page-three/page-three.component.scss
View file @ 5f576385
.list {
font-size: 14px;
.top {
text-align: left;
position: relative;
border-bottom: 1px solid #cccc;
line-height: 25px;
.left {
.title, .name {
display: inline-block;
padding: 0 5px;
}
}
.right {
display: inline-block;
position: absolute;
right: 5px;
bottom: 0;
}
}
.middle {
.one {
width: 33%;
display: inline-block;
line-height: 30px;
}
}
.bottom {
border-bottom: 1px solid #ccc;
text-align: left;
padding-bottom: 3px;
.tag {
text-align: center;
display: inline-block;
margin: 0 3px;
width: 40px;
line-height: 20px;
height: 20px;
border-radius: 10px;
}
}
}
src/app/main/page-three/page-three.component.ts
View file @ 5f576385
import {Component, OnInit} from '@angular/core';
import {LocalNotifications} from '@ionic-native/local-notifications/ngx';
@Component({
selector: 'app-page-three',
......@@ -8,20 +7,45 @@ import {LocalNotifications} from '@ionic-native/local-notifications/ngx';
})
export class PageThreeComponent implements OnInit {
index = 0;
constructor(private localNotifications: LocalNotifications) {
searchText = '';
showHistory = false;
showSearchBtn = false;
history: Array<String> = JSON.parse(window.localStorage.getItem('history.three')) || [];
constructor() {
}
ngOnInit() {
}
show() {
this.localNotifications.schedule({
id: 1,
text: 'Single ' + this.index,
sound: null
});
this.index++;
// 查询框
cancel() {
this.searchText = '';
this.showHistory = false;
this.showSearchBtn = false;
}
search() {
if (this.searchText) {
if (this.history.length >= 10) {
this.history.pop();
}
if (this.history.filter(item => { return item === this.searchText; }).length === 0) {
this.history.push(this.searchText);
window.localStorage.setItem('history.three', JSON.stringify(this.history));
}
console.log('此处进行查询操作');
this.showHistory = false;
this.showSearchBtn = false;
}
}
historyClick(e) {
this.searchText = e;
}
keyup(e) {
if (e.which === 13) {
this.search();
}
}
}
src/app/main/page-two/page-two.component.html
View file @ 5f576385
<p>
page-two works!
</p>
<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="toDetail()">Detail</ion-button>
<div id="pageTwo" class="mainContent" style="text-align: left">
<div class="searchBar">
<div class="inputPart" [ngClass]="{'showBtn': showSearchBtn}">
<i class="icofo iosearch searchBarSearchIco"></i>
<input type="text" class="searchBarText" (click)="showHistory = true;showSearchBtn = true;"
[(ngModel)]="searchText" placeholder="请输入设备名称" (keyup)="keyup($event)">
</div>
<div class="buttonPart" *ngIf="showSearchBtn">
<span class="cancel" (click)="cancel()">取消</span>
<span class="search" style="color: #1890ff" (click)="search()">搜索</span>
</div>
</div>
<app-search-list *ngIf="!showHistory"></app-search-list>
<app-search-history *ngIf="showHistory" [history]="history" (oneClick)="historyClick($event)"></app-search-history>
</div>
src/app/main/page-two/page-two.component.scss
View file @ 5f576385
.list {
font-size: 14px;
.top {
text-align: left;
position: relative;
border-bottom: 1px solid #cccc;
line-height: 25px;
.left {
.title, .name {
display: inline-block;
padding: 0 5px;
}
}
.right {
display: inline-block;
position: absolute;
right: 5px;
bottom: 0;
}
}
.middle {
.one {
width: 33%;
display: inline-block;
line-height: 30px;
}
}
.bottom {
border-bottom: 1px solid #ccc;
text-align: left;
padding-bottom: 3px;
.tag {
text-align: center;
display: inline-block;
margin: 0 3px;
width: 40px;
line-height: 20px;
height: 20px;
border-radius: 10px;
}
}
}
src/app/main/page-two/page-two.component.ts
View file @ 5f576385
import {Component, OnInit} from '@angular/core';
import {TransferService} from '../../service/transfer.service';
@Component({
selector: 'app-page-two',
......@@ -8,19 +7,45 @@ import {TransferService} from '../../service/transfer.service';
})
export class PageTwoComponent implements OnInit {
constructor(private tf: TransferService) {
searchText = '';
showHistory = false;
showSearchBtn = false;
history: Array<String> = JSON.parse(window.localStorage.getItem('history.two')) || [];
constructor() {
}
ngOnInit() {
}
toDetail() {
this.tf.transfer({
from: 'app-home',
to: 'app-page-detail',
url: '/main/detail',
query: '',
hash: ''
});
// 下面为查询框对应的方法
cancel() {
this.searchText = '';
this.showHistory = false;
this.showSearchBtn = false;
}
search() {
if (this.searchText) {
if (this.history.length >= 10) {
this.history.pop();
}
if (this.history.filter(item => { return item === this.searchText; }).length === 0) {
this.history.push(this.searchText);
window.localStorage.setItem('history.two', JSON.stringify(this.history));
}
console.log('此处进行查询操作');
this.showHistory = false;
this.showSearchBtn = false;
}
}
historyClick(e) {
this.searchText = e;
}
keyup(e) {
if (e.which === 13) {
this.search();
}
}
}
src/app/main/search-history/search-history.component.html 0 → 100644
View file @ 5f576385
<div class="historyList">
<div class="title">
历史搜索记录
</div>
<div class="one" *ngFor="let one of history" (click)="click(one)">{{one}}</div>
</div>
src/app/main/search-history/search-history.component.scss 0 → 100644
View file @ 5f576385
.one {
display: inline-block;
padding: 5px 10px 5px 5px;
}
.title {
font-size: 15px;
line-height: 40px;
border-bottom: 1px solid #cccccc;
text-indent: 5px;
margin-top: -10px;
margin-bottom: 10px;
}
.historyList {
padding: 0 10px;
}
src/app/main/search-history/search-history.component.ts 0 → 100644
View file @ 5f576385
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-search-history',
templateUrl: './search-history.component.html',
styleUrls: ['./search-history.component.scss'],
})
export class SearchHistoryComponent implements OnInit {
@Input() history = [];
@Output() oneClick = new EventEmitter<String>();
constructor() { }
ngOnInit() {}
click(one) {
this.oneClick.emit(one);
}
}
src/app/main/search-list/search-list.component.html 0 → 100644
View file @ 5f576385
<div class="listTop">共 7 台
<div class="topRight" (click)="filter()">
<i class="icofo ioshaixuan"></i> 筛选
</div>
</div>
<div class="filterPart" *ngIf="showFilter">
<div class="filterTitle">设备状态</div>
<div class="filterCon">
<div class="filterItem" [ngClass]="{'active': req.state === 0}" (click)="req.state = 0;">全部</div>
<div class="filterItem" [ngClass]="{'active': req.state === 1}" (click)="req.state = 1;">在线</div>
<div class="filterItem" [ngClass]="{'active': req.state === 2}" (click)="req.state = 2;">离线</div>
<div class="filterItem" [ngClass]="{'active': req.state === 3}" (click)="req.state = 3;">故障</div>
</div>
<div class="filterTitle">是否关注</div>
<div class="filterCon">
<div class="filterItem" [ngClass]="{'active': req.focus === 0}" (click)="req.focus = 0;">全部</div>
<div class="filterItem" [ngClass]="{'active': req.focus === 1}" (click)="req.focus = 1;">已关注</div>
<div class="filterItem" [ngClass]="{'active': req.focus === 2}" (click)="req.focus = 2;">未关注</div>
</div>
<div class="filterBottom">
<ion-button mode="ios" color="light" style="border-radius: 5px;" size="small" (click)="cancel()">取消</ion-button>
<ion-button mode="ios" style="background-color: #1890ff;border-radius: 5px;" size="small" (click)="confirm()">确定</ion-button>
</div>
</div>
<div class="list" [ngClass]="{'heightWithFilter': showFilter, 'heightWithoutFilter': !showFilter}">
<div class="one" *ngFor="let one of list" (click)="toDetail(one)">
<div class="top">
<div class="left">
设备名称: {{one.name}}
</div>
<div class="right">
{{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}
</div>
</div>
<div class="middle">
<i class="icofo ioxihuan icon"></i>
<div class="left">
<img src="../../../assets/icon/favicon.png">
</div>
<div class="right">
<div class="item">
温度: {{one.temp}}
</div>
<div class="item">
湿度: {{one.humid}}
</div>
<div class="item">
压力: {{one.press}}
</div>
</div>
<div class="rightBtn">
<div [class]="one.online === 1 ? 'tag online' : 'tag offline'">
{{one.online === 1 ? '在线' : '离线'}}
</div>
<div class="tag error" *ngIf="one.error === 1" style="margin-top: 5px">
故障
</div>
</div>
</div>
</div>
</div>
src/app/main/search-list/search-list.component.scss 0 → 100644
View file @ 5f576385
.listTop {
position: relative;
padding: 0 15px;
line-height: 30px;
margin-top: -8px;
.topRight {
position: absolute;
right: 15px;
top: 0;
}
}
.filterPart {
padding: 7px 15px;
.filterTitle {
line-height: 25px;
font-size: 15px;
color: #1890ff;
}
.filterTitle {
line-height: 25px;
font-size: 15px;
color: #555555;
font-weight: 600;
}
.filterItem {
display: inline-block;
width: 25%;
line-height: 30px;
text-align: center;
}
.filterItem.active {
color: #1890ff;
}
}
.heightWithFilter {
height: calc(100% - 206px);
}
.heightWithoutFilter {
height: calc(100% - 82px);
}
.list {
width: 100%;
background-color: #f4f4f4;
overflow-y: auto;
padding: 5px 10px;
.one {
.top {
line-height: 25px;
position: relative;
border-bottom: 1px solid #ccc;
.right {
position: absolute;
right: 10px;
top: 0;
}
}
.middle {
padding: 5px 0;
min-height: 90px;
position: relative;
.icon {
position: absolute;
top: 5px;
right: 9px;
font-size: 22px;
color: #f5222d;
}
.left {
width: 90px;
height: 100%;
display: inline-block;
vertical-align: top;
img {
height: 100%;
width: 80px;
}
}
.right {
display: inline-block;
width: calc(100% - 90px);
line-height: 26px;
padding-left: 20px;
}
.rightBtn {
width: 50px;
position: absolute;
right: 0;
bottom: 12px;
}
}
}
}
.filterBottom {
text-align: right;
margin: -5px;
}
src/app/main/search-list/search-list.component.ts 0 → 100644
View file @ 5f576385
import { Component, OnInit } from '@angular/core';
import {TransferService} from '../../service/transfer.service';
@Component({
selector: 'app-search-list',
templateUrl: './search-list.component.html',
styleUrls: ['./search-list.component.scss'],
})
export class SearchListComponent implements OnInit {
showFilter = false;
query = {
state: 0,
focus: 0
};
req = {
state: 0,
focus: 0
};
list = [{
name: '设备一',
time: new Date().getTime(),
temp: '20℃',
humid: '25%rH',
press: '1003kpa',
online: 1,
error: 1
}, {
name: '设备二',
time: new Date().getTime() - 24 * 3600 * 1000,
temp: '21℃',
humid: '29%rH',
press: '1005kpa',
online: 0,
error: 1
}, {
name: '设备三',
time: new Date().getTime() + 24 * 3600 * 1000,
temp: '25℃',
humid: '22%rH',
press: '1010kpa',
online: 1,
error: 0
}, {
name: '设备三',
time: new Date().getTime() + 24 * 3600 * 1000,
temp: '25℃',
humid: '22%rH',
press: '1010kpa',
online: 1,
error: 0
}, {
name: '设备三',
time: new Date().getTime() + 24 * 3600 * 1000,
temp: '25℃',
humid: '22%rH',
press: '1010kpa',
online: 1,
error: 0
}, {
name: '设备三',
time: new Date().getTime() + 24 * 3600 * 1000,
temp: '25℃',
humid: '22%rH',
press: '1010kpa',
online: 1,
error: 0
}, {
name: '设备三',
time: new Date().getTime() + 24 * 3600 * 1000,
temp: '25℃',
humid: '22%rH',
press: '1010kpa',
online: 1,
error: 0
}, {
name: '设备三',
time: new Date().getTime() + 24 * 3600 * 1000,
temp: '25℃',
humid: '22%rH',
press: '1010kpa',
online: 1,
error: 0
}];
constructor(private tf: TransferService) { }
ngOnInit() {}
filter() {
this.req = JSON.parse(JSON.stringify(this.query));
this.showFilter = !this.showFilter;
}
cancel() {
this.showFilter = !this.showFilter;
}
confirm() {
this.query = this.req;
this.showFilter = !this.showFilter;
}
toDetail(one) {
const req = {
to: 'app-page-detail',
from: 'app-search-list',
url: '/main/detail',
query: {name: one.name},
hash: ''
};
this.tf.transfer(req);
}
}
src/app/service/api.service.ts
View file @ 5f576385
......@@ -2,10 +2,11 @@ import { HttpService } from './http.service';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { environment } from '../../environments/environment';
import { ToastController } from '@ionic/angular';
@Injectable()
export class ApiService {
constructor(private http: HttpService, private router: Router) {
constructor(private http: HttpService, private router: Router, private toast: ToastController) {
}
tokenLoseflag = 0;
......@@ -16,6 +17,17 @@ export class ApiService {
logout: (data) => this.trans('get', '/login/logout', data),
};
public user = {
addUser: (data) => this.trans('post', '/user/addUser', data),
deleteUser: (data) => this.trans('post', '/user/deleteUser', data),
getAll: (data) => this.trans('get', '/user/getAll', data),
getByUserNameForLike: (data) => this.trans('post', '/user/getByUserNameForLike', data),
getSelfInfo: (data) => this.trans('get', '/user/getSelfInfo', data),
updateSelfPassword: (data) => this.trans('post', '/user/updateSelfPassword', data),
updateSelfUser: (data) => this.trans('post', '/user/updateSelfUser', data),
updateUser: (data) => this.trans('post', '/user/updateUser', data),
};
private trans(type, addr, data) {
this.sendHttpReq(type, addr, data[0], data[1], data[2], data[3]);
}
......@@ -32,7 +44,7 @@ export class ApiService {
next(data);
} else {
if (!this.tokenLoseflag) {
// this.message.error(this.translate.instant('loginOutValidityTips'));
this.presentMsgToast('登录失效,请重新登陆');
this.http.toLoginPage(2000);
this.tokenLoseflag = 1;
setTimeout(() => {
......@@ -44,18 +56,18 @@ export class ApiService {
}
if (!error) {
error = (err) => {
// const data;
let data;
if (err && err.error && err.error.status) {
if (err.error.status === 401) {
// data = {code: 0, message: this.translate.instant('noLoginTips')};
data = {code: 0, message: '用户尚未登录'};
this.router.navigate(['/extra']);
} else {
// data = {code: 0, message: this.translate.instant('wrongServerWithCode') + err.error.status};
data = {code: 0, message: '服务器异常'};
}
} else {
// data = {code: 0, message: this.translate.instant('wrongServer')};
data = {code: 0, message: '服务器异常'};
}
// next(data);
next(data);
};
}
if (type === 'get') {
......@@ -64,4 +76,26 @@ export class ApiService {
this.http.post(this.url + addr, reqB, nextFunc, error, complete);
}
}
async presentMsgToast(msg) {
const toast = await this.toast.create({
message: msg,
duration: 2000,
mode: 'ios',
cssClass: 'msgToast'
});
toast.present();
}
async presentBtnToast(msg, btn, position) {
const toast = await this.toast.create({
message: msg,
showCloseButton: true,
position: position,
closeButtonText: btn,
mode: 'ios',
cssClass: 'btnToast'
});
toast.present();
}
}
src/app/service/auth.service.ts
View file @ 5f576385
import { Injectable, OnInit } from '@angular/core';
import { CanActivateChild, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
// import { PermissionService } from './permission.service';
// import { MenuService } from './menu.service';
@Injectable()
export class AuthService implements CanActivateChild, OnInit {
// public login = false;
// private permissionR = '';
constructor(private router: Router) {
}
......@@ -15,45 +11,11 @@ export class AuthService implements CanActivateChild, OnInit {
}
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
// const layoutCon = document.getElementById('layoutCon');
// if (layoutCon) {
// layoutCon.scrollTop = 0;
// }
// return this.checkLogin() && this.permissionCheck(state.url);
// // return this.checkLogin();
return true;
if (window.localStorage.getItem('token')) {
return true;
} else {
this.router.navigate(['/extra']);
return false;
}
}
// // 登录验证,如果有值就返回true.没有就跳转登录
// checkLogin() {
// if (window.sessionStorage.getItem('_AMap_AMap.MapInner')) {
// return true;
// }
// this.router.navigate(['/extra/login']);
// return false;
// }
//
// // 路由跳转权限检测
// permissionCheck(routerUrl) {
// clearInterval(parseInt(window.sessionStorage.getItem('_inv'), 10));
// let routerReq;
// if (routerUrl.indexOf('?') > -1) {
// routerReq = routerUrl.slice(0, routerUrl.indexOf('?'));
// } else {
// routerReq = routerUrl;
// }
// routerReq = routerReq.split('/');
// if (routerReq[routerReq.length - 1] === 'xdkDetail' || routerReq[routerReq.length - 1] === 'cissDetail'
// || routerReq[routerReq.length - 1] === 'warnEdit' || routerReq[routerReq.length - 1] === 'warnNew') {
// this.permissionR = routerReq[routerReq.length - 2];
// } else {
// this.permissionR = routerReq[routerReq.length - 1];
// }
// const permissions = JSON.stringify(this.permission.getTiny());
// if (permissions.indexOf(this.permissionR) > -1) {
// return true;
// } else {
// return false;
// }
// }
}
src/app/service/http.service.ts
View file @ 5f576385
......@@ -2,12 +2,12 @@ import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Http, RequestOptions, Response } from '@angular/http';
import { Subscription } from 'rxjs/index';
import { Router } from '@angular/router';
import { TransferService } from './transfer.service';
@Injectable()
export class HttpService {
constructor(private http: HttpClient, private router: Router) {
constructor(private http: HttpClient, private tf: TransferService) {
this.subs = new Array<Subscription>();
}
private subs: Subscription[];
......@@ -63,7 +63,7 @@ export class HttpService {
// 跳转登录页面
toLoginPage(time) {
window.setTimeout(() => {
this.router.navigate(['/extra/login']);
this.tf.transfer({to: 'app-extra', from: 'app-home', url: '/extra'});
}, time);
}
......
src/app/service/token.service.ts 0 → 100644
View file @ 5f576385
import { Injectable, OnInit } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
@Injectable()
export class AuthInterceptor implements HttpInterceptor, OnInit {
constructor() {
}
token: string;
ngOnInit() {
}
intercept(req: HttpRequest<any>, next: HttpHandler) {
// 这里的拦截了所有的请求,并且加上了token
// 每次都获取最新的token
this.token = window.localStorage.getItem('token') || '';
const authReq = req.clone({headers: req.headers.set('AccountToken', this.token)});
return next.handle(authReq);
}
}
src/app/service/transfer.service.ts
View file @ 5f576385
......@@ -11,12 +11,16 @@ export class TransferService {
// 我没有找到相关的api以及解决办法,如果后面的人找到了的话麻烦将这个麻烦的方法给解决掉
if (document.getElementsByTagName(req.to).length > 0) {
const y = <HTMLBodyElement>document.getElementsByTagName(req.to)[0];
y.style.opacity = '1';
y.style.visibility = 'visible';
}
this.router.navigate([req.url], {queryParams: req.query, fragment: req.hash});
if (document.getElementsByTagName(req.from).length > 0) {
const x = <HTMLBodyElement>document.getElementsByTagName(req.from)[0];
x.style.opacity = '0';
x.style.visibility = 'hidden';
setTimeout(() => {
// 此处是防止移动端自己的back button跳转导致页面空白
x.style.visibility = 'visible';
}, 2000);
}
}
}
src/assets/icon/iconfont.css 0 → 100644
View file @ 5f576385
@font-face {font-family: "icofo";
src: url('iconfont.eot?t=1553842525715'); /* IE9 */
src: url('iconfont.eot?t=1553842525715#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAo4AAsAAAAAEaQAAAnpAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFDgqTcI9eATYCJAM8CyAABCAFhEkHgSYbqA4jESacFEX2Vwmm3A01IqObZV8izINapgws9dTnHuOryW+Ca/p53LSX/ISmoUjFWFW4ukFVYOZUxGhvpcy5udKpMSaqnGUikgDg+fdv53ffgha3ZRJFHAUWcAqJBJgkgbXvmj8CY6Imj+TcZw+sCikd5F6bjoQ1f0gvzH3K3L+DSt7qoMKjdJbLmqx4AFshJ5eO0FwGThjulfPt56pbSLZ5o5e772e8f5h6IkQeJRDixFBrE20LESmZmtAxmA5fAdqPjpcBBoDmAGLA1pSsIqAQGGNYs5cWjwWqrxkxpRJDNXLG3FgkpgES1U3GLwDAzPj72AtBGAWAIwP8qjxF8gRIYIyeqJCSVRqB+kG5vk4AKDkDQADEAECU2D1WvwIgWKMaoTcT1gCAAwjp7+I/RowxY85YMoOYCEbKpDEypplZzBx/UvVExbIw7aR8XoyDPA+AhpB4CEb4OLiMz1KnCbz4z+tBExPP9vVh/pWQrB3QgDG2AwQYczsgAWNpBzzADLIDAjARGJanUojro2ngwAGVgQMXtBkYtkEXgwMFehx2gIEnVRxMIlWhC3BMBP4GBwAIAsA/ICYAmxCVZ4LgYovQCKgDHwjNa2rUaDcYGkQPCKkYNmzo6H70EDfjH+h2e9xer28Y0zcA/CPHuwf6+wx2u/sdB+EIcH4I+O95aTUvSsstiCnZu7ypTZXaypQV5o1x4kNtuXAfLePvWSvEB3ilkMjuSufYGS11Et9Ak6dvNFKccE8dP6mslB468223l4X5NZLAr9CLZKzyk6a45FlImByJTXUUUdbpzLt53w/d+DDCZMmyA38d1N7PNphD7hv3CEtA9xf6rj8c4Yj5B5R1BUDJIDaaScKDBAUOGBCvMdkoViTuoaPZy5evLHyCuW8ja1lYv6Zak+hPaGsk1nYUPIVt4YGJLbrKbsuXyJrBEEinw40O4RI3O6D0pkR10kE8DmV/5d4gAk2OGEnChbrjBcOAWhyQSpqLtQFIPZDxX9HlCWMsOo4ErG+8/UdwfkmUZclmkLdswW9KNMcbsN4eOhVSD8Y75sT2BBTpLjZrlQRKMv2XJZvjNa7elr1qCwDs7PwmmydQ45QPzALXsuis98YX5espuPIz+nRK1ZEBfVpcMalj804qba1JlIIn1HpDpfTN7iBerwhqLZXmtsfrzSS9RT9l1ljRTNerjJDsjON7MrZltJdvNZKJCrWz1S1RZnAU15qI5qFRTSbUY3U5OsVU6bCe6d4eD10BEtantpXw6XZK/AVFKq0JVKUxOD+SikUouYQ3eJ9Zo/oU7fW+l87Ya+0dRLenoG2Ld+k0f6jAZ+9aSJGpq3qFgtsHgIRanZN2GlUmZQiQ3E02IHShDC1bv0/q0n8S/ntFbR1lyFFj/w69MY6qtdhdqfZEWG3aabVkYlbb1PSzNwO3KwO23Ug7MyXj3K2gHT3BO29nnh985uDJFc/94TVtlhfKivPnhVwu4wffOAo2PaNVrmeMJfDl4zTp2+mS6ZqDR94YEDqSNG+RdtZeIyXh0vSM0Mjk7NfDLTNzFlYvlI+aWtfe2qmthAH56DaonZqZHbj30dvX3a/1kjBJakZIRMil5kXrmPSsBRULska1Vbc1t6srYEHm6FboTgJxSg2bcPTnwaPs/WuaJk7zhswhqveNbIihWa8PG/JHvs8fcWhqhWiHIqgGbyQkCI+nej59uaIbumDFy6fh4W//J4WFNUEzBL8yNXdjJ9Vrgn3gGoXQx0XDaFwouAHXqSDvveA4Oy72UDy7/Eg8xLV3tUP3r45fk37J+nYYXqBeuDC38K5xIVeM86wa66lQtyQAM7lC4TWu8lLFwoVqwfhY30zHh4rLA5cn8cBFx0wZFl1UPMxylI2afKgWqR92Hw0RkmzuBVpMeJomuAvjRLuLQvfSFaLYcnDCOGLqEjdAGUi9bRaIHZwTPDeeE5SZAXVkWOYTxi9NDIJzG0c82F0kFjRD3NiFxBlj+iz5/t7LAzvQq1eES5c15/9bah2z1+Ylh9CT5/mCC8QBRD4ZtCtGtOjfU+DiqhoLCyqchjsMD9mZGTszWP+vzTy3quAAQjjX2UH7+ctGrBvXDqBucaDVdn+QY7V1uEwBv0iOybC6OtJkCOq5q+bNk04Vx+9dOe2WHbNbFlK5Sjjeea6QCAiughBI7TFVmP4gJw7fvLnkpAEhEJr4w9SU5gZex5uWLmvGRV+y1G1QPrtSI81Lrim6S86TfinjNJs0c64oXvxpWS3HEhcKxib3MYrZ7tLVV5pmuyUP9VE2mojnhrWk6Qx9jpvSDto0rhANGfeQqhmPn3a5S2crxkxvBF3aJsc+Ay5vCZsrNmEXjzGqMHWfavURcXSxYIHOudlZV1S0qjdJ/WfP6SDuav8u3cUB+4VX77DqHJ4X2CRoDLwiDYs6OrnreffzT7lpC8d8odNupwGcs7WpcpVWHFVCfO8+i7yUI1eOON2iJmclp3eyRWSQJt/hioOaso28MWA/UGQlri/ZU7Z+Q0bJP3UjM6feKu97GsinQt7XGj8KrjjMFvHTaCpVsb2xOJK7DeeKIuq+lOvK1h+IDp36XCtI5fO2BYMTUt4hnZxIaHeKEGp3GW/2H1YPxRIsl1S6gd8rpIS9fLqB83oMt+YRTDn+9i5R4Hp8j+SudtjwKUtUS6aEZfvOqs5qh/c5njp8mPZskkSLHhsILQGvaxG4weA0LQlbLLhLaARpdwGhdh9tOV7w+Uu/Xr97txq6PwIA+y3XEBlrVuYRGr1gT36gNJYnlxWG7OH8WAFaANjeXEJdKjJT8gTVs79+VaWgfgBWmdNIyf7+5xRCFQDs+XxFofNm/pL+az1Bz/N4/mhBzKcB3N/fsTvH/xmp4XpylK1A/Qv0YOCflROSKRm/1KbCLYKqH7QlLCv3w6XEeGbH/p5PXFOdwF9Ad+IgC+UD/6f9ZvBoe8xybsEjsk8qGXBGRAaE5JxJ5HoYSFy+iAMWBkSPYdG4ncscFIBgZQwAPtCqDBjaagOObzNCzVwdIpB70kCygsuIg9z/DTQ5zP5/4N6hPe0eIgpGDfIKXtFgDOdd2m7oFW3uRNSic/eJMXkaoC6q/rkXHDAud0k62YbZgInUw/MKXoddRzBGCqi4cMzjsSzNuEsLRf1k5yGiYG+pgbw29IoG08u7IaH09Ve0uRNRH8idn9hEqSwseTGoFappmS9kmH7kNjenk22wdBqwuyP14HkvEGrUoRuM4zsD0jQX3BKT41Epp5l5SbFl1t/KjLjJjuFg+1pIsqJqumFatuN6/moTg8t+1fmLF8Pa6S6HznoTemZaGuxqYNEmOeEvia9vIy5JLi/OpHEtBQU/w+bkKF9xmfiqTaysGNi4XiUUUbm5zn4yAQAA') format('woff2'),
url('iconfont.woff?t=1553842525715') format('woff'),
url('iconfont.ttf?t=1553842525715') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1553842525715#icofo') format('svg'); /* iOS 4.1- */
}
.icofo {
font-family: "icofo" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iofanhui:before {
content: "\e6c3";
}
.iolixian:before {
content: "\e786";
}
.ioxihuan1:before {
content: "\e609";
}
.iojiankong:before {
content: "\e61b";
}
.ioxihuan:before {
content: "\e613";
}
.ioshaixuan:before {
content: "\e648";
}
.iozongshu:before {
content: "\e638";
}
.iowode:before {
content: "\e69b";
}
.iobaojing:before {
content: "\e677";
}
.ioshouye:before {
content: "\e607";
}
.iostate:before {
content: "\e655";
}
.iogantan:before {
content: "\e76e";
}
.iosearch:before {
content: "\e615";
}
.iodui:before {
content: "\e644";
}
src/assets/icon/iconfont.svg 0 → 100644
View file @ 5f576385
This diff is collapsed.
src/global.scss
View file @ 5f576385
......@@ -3,9 +3,207 @@
@import '~@ionic/angular/css/normalize.css';
@import '~@ionic/angular/css/structure.css';
@import '~@ionic/angular/css/typography.css';
@import '~@ionic/angular/css/padding.css';
@import '~@ionic/angular/css/float-elements.css';
@import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.css';
/*统一默认样式*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*制定网站字体大小颜色*/
html, body {
font-size: 14px;
color: #555555;
}
html, body {
width: 100%;
height: 100%;
}
*:focus {
outline: none;
}
img {
transform: translate3d(0px, 0px, 0px) scale(1) !important;
}
$themeColor: #1890ff;
.msgToast, .btnToast {
--background: rgba(0, 0, 0, 0.7);
--color: #ffffff;
text-align: center;
}
.partCard {
padding: 5px 10px 0 10px;
.partTitle {
text-align: left;
font-size: 16px;
padding: 5px;
border-bottom: 2px solid $themeColor;
color: $themeColor;
label {
padding-left: 8px;
}
}
.partCon {
padding: 5px 0 0 0;
}
}
.mainContent {
height: 100%;
overflow-y: auto;
font-size: 14px;
}
.inBox {
width: 100%;
height: 100%;
img {
width: 100% !important;
height: 100%;
}
}
.zi {
color: #DA45FF;
}
.lv {
color: #009966;
}
.hong {
color: #ff0000;
}
.hui {
color: #cccccc;
}
.error {
background-color: #ff0000;
color: #ffffff;
}
.online {
background-color: #009966;
color: #ffffff;
}
.offline {
background-color: #cccccc;
color: #888888;
}
.tag {
text-align: center;
display: inline-block;
margin: 0 3px;
width: 40px;
line-height: 20px;
height: 20px;
border-radius: 10px;
}
.searchBar {
height: 60px;
padding: 12px;
line-height: 36px;
width: 100%;
position: relative;
.inputPart {
position: relative;
width: 100%;
display: inline-block;
.searchBarSearchIco {
position: absolute;
top: 0;
left: 10px;
}
.searchBarText {
width: 100%;
border: none;
background-color: #ededed;
padding-left: 35px;
border-radius: 10px;
}
}
.inputPart.showBtn {
width: calc(100% - 81px);
}
.buttonPart {
display: inline-block;
.cancel, .search {
display: inline-block;
width: 40px;
text-align: center;
}
}
}
.divideDiv {
background-color: #f4f4f4;
height: 20px;
}
src/theme/variables.scss
View file @ 5f576385
......@@ -4,8 +4,8 @@
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary: #1890ff;
--ion-color-primary-rgb: 24, 144, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3171e0;
......
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