Commit 5f576385 authored by van.chen's avatar van.chen

Merge branch 'push-dev' into 'master'

Push dev

See merge request !1
parents 928a1b05 a7fc8453
...@@ -43,6 +43,9 @@ ...@@ -43,6 +43,9 @@
}, },
{ {
"input": "src/global.scss" "input": "src/global.scss"
},
{
"input": "src/assets/icon/iconfont.css"
} }
], ],
"scripts": [], "scripts": [],
......
<?xml version='1.0' encoding='utf-8'?> <?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"> <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> <description>一个通用模板app.</description>
<author email="1005100328@qq.com">Van.Chen</author> <author email="1005100328@qq.com">Van.Chen</author>
<content src="index.html" /> <content src="index.html" />
...@@ -83,6 +83,7 @@ ...@@ -83,6 +83,7 @@
<plugin name="cordova-plugin-ionic-webview" spec="^3.0.0" /> <plugin name="cordova-plugin-ionic-webview" spec="^3.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" /> <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-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="android" spec="7.1.4" />
<engine name="ios" spec="4.5.5" /> <engine name="ios" spec="4.5.5" />
</widget> </widget>
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
"@angular/platform-browser": "^7.2.2", "@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2", "@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2", "@angular/router": "^7.2.2",
"@ionic-native/app-minimize": "^5.0.0",
"@ionic-native/core": "^5.0.0", "@ionic-native/core": "^5.0.0",
"@ionic-native/local-notifications": "^5.3.0", "@ionic-native/local-notifications": "^5.3.0",
"@ionic-native/splash-screen": "^5.0.0", "@ionic-native/splash-screen": "^5.0.0",
...@@ -28,14 +29,18 @@ ...@@ -28,14 +29,18 @@
"@ionic/angular": "^4.1.0", "@ionic/angular": "^4.1.0",
"cordova-android": "7.1.4", "cordova-android": "7.1.4",
"cordova-ios": "4.5.5", "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-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3", "cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^3.1.2", "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-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3", "cordova-plugin-whitelist": "^1.3.3",
"core-js": "^2.5.4", "core-js": "^2.5.4",
"echarts": "^4.2.1",
"ngx-echarts": "^4.1.0",
"rxjs": "~6.3.3", "rxjs": "~6.3.3",
"web-animations-js": "^2.3.1", "web-animations-js": "^2.3.1",
"zone.js": "~0.8.29" "zone.js": "~0.8.29"
...@@ -77,7 +82,8 @@ ...@@ -77,7 +82,8 @@
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+" "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
}, },
"cordova-plugin-ionic-keyboard": {}, "cordova-plugin-ionic-keyboard": {},
"cordova-plugin-local-notification": {} "cordova-plugin-local-notification": {},
"cordova-plugin-appminimize": {}
}, },
"platforms": [ "platforms": [
"android", "android",
......
...@@ -3,7 +3,7 @@ import {Routes, RouterModule, PreloadAllModules} from '@angular/router'; ...@@ -3,7 +3,7 @@ import {Routes, RouterModule, PreloadAllModules} from '@angular/router';
import { AuthService } from './service/auth.service'; import { AuthService } from './service/auth.service';
const routes: Routes = [ const routes: Routes = [
{ path: '', redirectTo: 'extra', pathMatch: 'full' }, { path: '', redirectTo: 'main', pathMatch: 'full' },
{ path: 'main', canActivateChild: [AuthService], loadChildren: './home/home.module#HomePageModule'}, { path: 'main', canActivateChild: [AuthService], loadChildren: './home/home.module#HomePageModule'},
{ path: 'extra', loadChildren: './extra/extra.module#ExtraPageModule'}, { path: 'extra', loadChildren: './extra/extra.module#ExtraPageModule'},
]; ];
......
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/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({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: 'app.component.html', templateUrl: 'app.component.html',
styles: [] styles: [],
providers: [AppMinimize]
}) })
export class AppComponent { export class AppComponent {
backBtnPressed = false; // 用于判断返回键是否触发
url;
dom;
constructor( constructor(
private platform: Platform, private platform: Platform,
private splashScreen: SplashScreen, private splashScreen: SplashScreen,
private statusBar: StatusBar private statusBar: StatusBar,
private appMinimize: AppMinimize,
private router: Router
) { ) {
this.initializeApp(); this.initializeApp();
this.initEvent(); this.initEvent();
this.initRouterListen();
} }
initializeApp() { initializeApp() {
this.platform.ready().then(() => { this.platform.ready().then(() => {
this.statusBar.styleDefault(); this.statusBar.styleDefault();
this.statusBar.backgroundColorByHexString('#ffffffff');
this.splashScreen.hide(); this.splashScreen.hide();
this.registerBackButtonAction(); // 注册返回按键事件
this.platform.resume.subscribe(); // 弹出框
}); });
} }
...@@ -37,4 +51,34 @@ export class AppComponent { ...@@ -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;
}
});
}
} }
...@@ -5,9 +5,11 @@ import { HttpClientModule } from '@angular/common/http'; ...@@ -5,9 +5,11 @@ import { HttpClientModule } from '@angular/common/http';
import { RouteReuseStrategy } from '@angular/router'; import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx';
import { LocalNotifications } from '@ionic-native/local-notifications/ngx'; import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
import { AppMinimize } from '@ionic-native/app-minimize/ngx';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
...@@ -15,20 +17,35 @@ import { ApiService } from './service/api.service'; ...@@ -15,20 +17,35 @@ import { ApiService } from './service/api.service';
import { AuthService } from './service/auth.service'; import { AuthService } from './service/auth.service';
import { HttpService } from './service/http.service'; import { HttpService } from './service/http.service';
import { TransferService } from './service/transfer.service'; import { TransferService } from './service/transfer.service';
import { AuthInterceptor } from './service/token.service';
import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({ @NgModule({
declarations: [AppComponent], declarations: [AppComponent],
entryComponents: [], entryComponents: [],
imports: [BrowserModule, BrowserAnimationsModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule], imports: [
BrowserModule,
BrowserAnimationsModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
NgxEchartsModule
],
providers: [ providers: [
StatusBar, StatusBar,
SplashScreen, SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true,
},
ApiService, ApiService,
HttpService, HttpService,
AuthService, AuthService,
TransferService, TransferService,
LocalNotifications LocalNotifications,
AppMinimize
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
......
<div class="loginPage" @fade> <div class="loginPage" @fade>
<div class="topBar"> <div class="topBar">
<img class="imgPart" src="../../../assets/icon/favicon.png"> <img class="imgPart" src="../../../assets/icon/favicon.png">
<div class="title">上海辉度智能科技有限公司</div> <div class="title"> 上海辉度智能科技有限公司</div>
</div> </div>
<div class="mainBar"> <div class="mainBar">
<div class="inputLine"> <div class="inputLine">
...@@ -12,6 +12,6 @@ ...@@ -12,6 +12,6 @@
<div class="labelForInput">密码</div> <div class="labelForInput">密码</div>
<ion-input type="password" [(ngModel)]="req.ps" mode="ios" class="input"></ion-input> <ion-input type="password" [(ngModel)]="req.ps" mode="ios" class="input"></ion-input>
</div> </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>
</div> </div>
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
.inputLine { .inputLine {
padding-top: 8%; padding-top: 8%;
border-bottom: 2px solid #1890ff; border-bottom: 2px solid #1890ff;
margin: 0 1%;
} }
.labelForInput { .labelForInput {
......
...@@ -29,12 +29,12 @@ export class LoginComponent implements OnInit { ...@@ -29,12 +29,12 @@ export class LoginComponent implements OnInit {
this.tf.transfer({ this.tf.transfer({
from: 'app-extra', from: 'app-extra',
to: 'app-home', to: 'app-home',
url: '/main/index', url: '/main',
query: '', query: '',
hash: '' hash: ''
}); });
} else { } else {
// message this.api.presentMsgToast(data && data.message ? data.message : '登录失败');
} }
}]); }]);
} }
......
...@@ -3,21 +3,26 @@ import {CommonModule} from '@angular/common'; ...@@ -3,21 +3,26 @@ import {CommonModule} from '@angular/common';
import {IonicModule} from '@ionic/angular'; import {IonicModule} from '@ionic/angular';
import {FormsModule} from '@angular/forms'; import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router'; import {RouterModule} from '@angular/router';
import {NgxEchartsModule} from 'ngx-echarts';
import {HomePage} from './home.page'; import {HomePage} from './home.page';
import {PageOneComponent} from '../main/page-one/page-one.component'; import {PageOneComponent} from '../main/page-one/page-one.component';
import {PageTwoComponent} from '../main/page-two/page-two.component'; import {PageTwoComponent} from '../main/page-two/page-two.component';
import {PageThreeComponent} from '../main/page-three/page-three.component'; import {PageThreeComponent} from '../main/page-three/page-three.component';
import {PageFourComponent} from '../main/page-four/page-four.component'; import {PageFourComponent} from '../main/page-four/page-four.component';
import {PageDetailComponent} from '../main/page-detail/page-detail.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({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
FormsModule, FormsModule,
IonicModule, IonicModule,
NgxEchartsModule,
RouterModule.forChild([ RouterModule.forChild([
{ {
path: 'index', path: '',
component: HomePage component: HomePage
}, },
{ {
...@@ -32,7 +37,10 @@ import {PageDetailComponent} from '../main/page-detail/page-detail.component'; ...@@ -32,7 +37,10 @@ import {PageDetailComponent} from '../main/page-detail/page-detail.component';
PageTwoComponent, PageTwoComponent,
PageThreeComponent, PageThreeComponent,
PageFourComponent, PageFourComponent,
PageDetailComponent PageDetailComponent,
SearchListComponent,
SearchHistoryComponent,
AlarmListComponent
] ]
}) })
export class HomePageModule { export class HomePageModule {
......
<ion-slides @fade id="slideComponent" style="width: 100%;height: 100%;" <ion-slides @fade id="slideComponent" style="width: 100%;height: 100%;"
mode="ios" [options]="options" [@toLeft]="toLeft" [@toRight]="toRight" (ionSlideDidChange)="slideOnChange()"> mode="ios" [options]="options" [@toLeft]="toLeft" [@toRight]="toRight" (ionSlideDidChange)="slideOnChange()">
<ion-slide> <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>
<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>
<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>
<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-slide>
</ion-slides> </ion-slides>
<ion-row class="bottomPart"> <div class="bottomPart">
<ion-col [ngClass]="{'activeBar': active[0]}" (click)="goActive(0)">首页</ion-col> <div class="bottomItem" [ngClass]="{'activeBarLeft': active[0]}" (click)="goActive(0)">
<ion-col class="padLeft" [ngClass]="{'activeBar': active[1]}" (click)="goActive(1)">第二页</ion-col> <div class="icoPart"><i class="icofo ioshouye"></i></div>
<ion-col class="padLeft" [ngClass]="{'activeBar': active[2]}" (click)="goActive(2)">第三页</ion-col> 首页</div>
<ion-col class="padLeft" [ngClass]="{'activeBar': active[3]}" (click)="goActive(3)">我的</ion-col> <div class="bottomItem padLeft" [ngClass]="{'activeBarLeft': active[1]}" (click)="goActive(1)">
</ion-row> <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>
.bottomPart { .bottomPart {
height: 55px; height: 55px;
line-height: 35px;
text-align: center; text-align: center;
border-top: 1px solid #ccc; color: #1890ff;
color: cornflowerblue; z-index: 11;
font-size: 14px;
} }
.padLeft { .activeBarLeft {
border-left: 1px solid #cccccc; 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 { .activeBarRight {
background-color: #f25454; background-color: #1890ff;
color: #ffffff; color: #ffffff;
font-size: 15px;
border-bottom-right-radius: 37px;
border-top-left-radius: 50px;
} }
.box { .box {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#slideComponent {
z-index: 10;
}
.icoPart {
font-size: 25px;
}
.bottomItem {
width: 25%;
display: inline-block;
height: 100%;
}
.padLeft {
}
...@@ -21,9 +21,7 @@ export class HomePage implements OnInit { ...@@ -21,9 +21,7 @@ export class HomePage implements OnInit {
index; index;
active = [true, false, false, false]; active = [true, false, false, false];
startX; startX;
startY;
X; X;
Y;
toLeft = 'backLeft'; toLeft = 'backLeft';
toRight = 'backRight'; toRight = 'backRight';
...@@ -32,13 +30,10 @@ export class HomePage implements OnInit { ...@@ -32,13 +30,10 @@ export class HomePage implements OnInit {
ngOnInit() { ngOnInit() {
document.getElementById('slideComponent').addEventListener('touchstart', <TouchEvent>(e) => { document.getElementById('slideComponent').addEventListener('touchstart', <TouchEvent>(e) => {
this.startX = e.touches[0].pageX; this.startX = e.touches[0].pageX;
this.startY = e.touches[0].pageY;
}); });
document.getElementById('slideComponent').addEventListener('touchmove', <TouchEvent>(e) => { document.getElementById('slideComponent').addEventListener('touchmove', <TouchEvent>(e) => {
const moveEndX = e.touches[0].pageX; const moveEndX = e.touches[0].pageX;
const moveEndY = e.touches[0].pageY;
this.X = moveEndX - this.startX; this.X = moveEndX - this.startX;
this.Y = moveEndY - this.startY;
}); });
document.getElementById('slideComponent').addEventListener('touchend', <TouchEvent>(e) => { document.getElementById('slideComponent').addEventListener('touchend', <TouchEvent>(e) => {
if ( this.X > 100 ) { if ( this.X > 100 ) {
...@@ -46,6 +41,7 @@ export class HomePage implements OnInit { ...@@ -46,6 +41,7 @@ export class HomePage implements OnInit {
} else if ( this.X < -100 ) { } else if ( this.X < -100 ) {
this.slideNext(); this.slideNext();
} }
this.X = 0;
}); });
} }
......
<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>
.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;
}
}
}
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() {}
}
<div @fade> <ion-toolbar mode="ios" style="--color: #1890ff;padding: 0 15px;border-bottom: 2px solid #1890ff;">
<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="toList()">List</ion-button> <ion-buttons slot="start">
</div> <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>
.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;
}
}
import {Component, OnInit} from '@angular/core'; import {Component, ViewChild, OnInit, ElementRef, AfterViewInit} from '@angular/core';
import {fadeIn} from '../../animations/fade-in'; import {fadeIn} from '../../animations/fade-in';
import {TransferService} from '../../service/transfer.service'; import {TransferService} from '../../service/transfer.service';
import {ActivatedRoute} from '@angular/router';
@Component({ @Component({
selector: 'app-page-detail', selector: 'app-page-detail',
...@@ -9,20 +11,208 @@ import {TransferService} from '../../service/transfer.service'; ...@@ -9,20 +11,208 @@ import {TransferService} from '../../service/transfer.service';
animations: [fadeIn] animations: [fadeIn]
}) })
export class PageDetailComponent implements OnInit { export class PageDetailComponent implements OnInit {
pie1 = {};
pie2 = {};
pie3 = {};
line1 = {};
line2 = {};
line3 = {};
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
}
}
constructor(private tf: TransferService) {
} }
]
};
ngOnInit() { 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() { toList() {
this.tf.transfer({ this.tf.transfer({
from: 'app-page-detail', from: 'app-page-detail',
to: 'app-home', to: 'app-home',
url: '/main/index', url: '/main',
query: '', query: '',
hash: 'page_two' hash: 'page_one'
}); });
} }
......
<div class="personSet"> <div class="mainContent">
<div class="topBar"> <div class="topBar">
<img class="imgPart" src="../../../assets/icon/favicon.png"> <div class="top">
<div class="topRight">1111111</div> <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>
</div> </div>
.personSet {
width: 100%;
height: 100%;
}
.topBar { .topBar {
height: 30%; height: 30%;
padding: 10% 0; padding: 13% 0 7% 0;
background-color: lavender; 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;
}
}
}
} }
.imgPart { .middleCon {
.line {
padding-top: 8%;
border-bottom: 2px solid #1890ff;
margin: 0 1%;
.label {
width: 35%; width: 35%;
display: inline-block; display: inline-block;
height: 40px;
line-height: 40px;
}
.text {
width: 65%;
display: inline-block;
text-align: left;
height: 40px;
line-height: 30px;
}
}
} }
.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%;
}
}
}
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../service/api.service';
import { TransferService } from '../../service/transfer.service';
@Component({ @Component({
selector: 'app-page-four', selector: 'app-page-four',
...@@ -7,8 +9,37 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,8 +9,37 @@ import { Component, OnInit } from '@angular/core';
}) })
export class PageFourComponent implements OnInit { 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 : '登录失败');
}
}]);
}
} }
<ion-slides style="width: 100%;height: 200px;" <div class="mainContent">
mode="ios" [options]="options"> <ion-slides #slide style="width: 100%;height: 200px;"
<ion-slide> mode="ios" [options]="options" (ionSlideTouchEnd)="slideDidChange()">
<div class="inBox" style="color: #ffd31a"><h1>这是首页轮播图1</h1></div> <ion-slide class="slideCon" *ngFor="let one of imgs">
<div class="inBox">
<img [src]="'../../../assets/imgs/' + one">
</div>
</ion-slide> </ion-slide>
<ion-slide> </ion-slides>
<div class="inBox" style="color: #f04141"><h1>这是首页轮播图2</h1></div> <div class="partCard">
</ion-slide> <div class="partTitle">
<ion-slide> <i class="icofo iostate"></i>
<div class="inBox" style="color: #7e57ff"><h1>这是首页轮播图3</h1></div> <label>设备状态</label>
</ion-slide> </div>
<ion-slide> <div class="partCon">
<div class="inBox" style="color: #cccccc"><h1>这是首页轮播图4</h1></div> <div class="item" *ngFor="let one of items">
</ion-slide> <div class="top">
</ion-slides> {{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>
.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;
}
}
import { Component, OnInit } from '@angular/core'; import {Component, OnInit, ViewChild} from '@angular/core';
import {TransferService} from '../../service/transfer.service';
@Component({ @Component({
selector: 'app-page-one', selector: 'app-page-one',
...@@ -7,12 +8,130 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,12 +8,130 @@ import { Component, OnInit } from '@angular/core';
}) })
export class PageOneComponent implements OnInit { export class PageOneComponent implements OnInit {
@ViewChild('slide') slide;
options = { options = {
speed: 1000, speed: 1000,
allowTouchMove: true allowTouchMove: true,
effect: 'flip',
autoplay: {
delay: 2000,
},
loop: true,
spaceBetween: 0
}; };
constructor() { } 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);
}
} }
<p> <div class="mainContent" style="text-align: left">
page-three works! <div class="searchBar">
</p> <div class="inputPart" [ngClass]="{'showBtn': showSearchBtn}">
<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="show()">Detail</ion-button> <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>
.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;
}
}
}
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {LocalNotifications} from '@ionic-native/local-notifications/ngx';
@Component({ @Component({
selector: 'app-page-three', selector: 'app-page-three',
...@@ -8,20 +7,45 @@ import {LocalNotifications} from '@ionic-native/local-notifications/ngx'; ...@@ -8,20 +7,45 @@ import {LocalNotifications} from '@ionic-native/local-notifications/ngx';
}) })
export class PageThreeComponent implements OnInit { export class PageThreeComponent implements OnInit {
index = 0; searchText = '';
showHistory = false;
constructor(private localNotifications: LocalNotifications) { showSearchBtn = false;
history: Array<String> = JSON.parse(window.localStorage.getItem('history.three')) || [];
constructor() {
} }
ngOnInit() { ngOnInit() {
} }
show() { // 查询框
this.localNotifications.schedule({ cancel() {
id: 1, this.searchText = '';
text: 'Single ' + this.index, this.showHistory = false;
sound: null this.showSearchBtn = false;
}); }
this.index++;
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();
}
} }
} }
<p> <div id="pageTwo" class="mainContent" style="text-align: left">
page-two works! <div class="searchBar">
</p> <div class="inputPart" [ngClass]="{'showBtn': showSearchBtn}">
<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="toDetail()">Detail</ion-button> <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>
.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;
}
}
}
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {TransferService} from '../../service/transfer.service';
@Component({ @Component({
selector: 'app-page-two', selector: 'app-page-two',
...@@ -8,19 +7,45 @@ import {TransferService} from '../../service/transfer.service'; ...@@ -8,19 +7,45 @@ import {TransferService} from '../../service/transfer.service';
}) })
export class PageTwoComponent implements OnInit { 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() { ngOnInit() {
} }
toDetail() { // 下面为查询框对应的方法
this.tf.transfer({ cancel() {
from: 'app-home', this.searchText = '';
to: 'app-page-detail', this.showHistory = false;
url: '/main/detail', this.showSearchBtn = false;
query: '', }
hash: ''
}); 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();
}
} }
} }
<div class="historyList">
<div class="title">
历史搜索记录
</div>
<div class="one" *ngFor="let one of history" (click)="click(one)">{{one}}</div>
</div>
.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;
}
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);
}
}
<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>
.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;
}
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);
}
}
...@@ -2,10 +2,11 @@ import { HttpService } from './http.service'; ...@@ -2,10 +2,11 @@ import { HttpService } from './http.service';
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { environment } from '../../environments/environment'; import { environment } from '../../environments/environment';
import { ToastController } from '@ionic/angular';
@Injectable() @Injectable()
export class ApiService { export class ApiService {
constructor(private http: HttpService, private router: Router) { constructor(private http: HttpService, private router: Router, private toast: ToastController) {
} }
tokenLoseflag = 0; tokenLoseflag = 0;
...@@ -16,6 +17,17 @@ export class ApiService { ...@@ -16,6 +17,17 @@ export class ApiService {
logout: (data) => this.trans('get', '/login/logout', data), 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) { private trans(type, addr, data) {
this.sendHttpReq(type, addr, data[0], data[1], data[2], data[3]); this.sendHttpReq(type, addr, data[0], data[1], data[2], data[3]);
} }
...@@ -32,7 +44,7 @@ export class ApiService { ...@@ -32,7 +44,7 @@ export class ApiService {
next(data); next(data);
} else { } else {
if (!this.tokenLoseflag) { if (!this.tokenLoseflag) {
// this.message.error(this.translate.instant('loginOutValidityTips')); this.presentMsgToast('登录失效,请重新登陆');
this.http.toLoginPage(2000); this.http.toLoginPage(2000);
this.tokenLoseflag = 1; this.tokenLoseflag = 1;
setTimeout(() => { setTimeout(() => {
...@@ -44,18 +56,18 @@ export class ApiService { ...@@ -44,18 +56,18 @@ export class ApiService {
} }
if (!error) { if (!error) {
error = (err) => { error = (err) => {
// const data; let data;
if (err && err.error && err.error.status) { if (err && err.error && err.error.status) {
if (err.error.status === 401) { if (err.error.status === 401) {
// data = {code: 0, message: this.translate.instant('noLoginTips')}; data = {code: 0, message: '用户尚未登录'};
this.router.navigate(['/extra']); this.router.navigate(['/extra']);
} else { } else {
// data = {code: 0, message: this.translate.instant('wrongServerWithCode') + err.error.status}; data = {code: 0, message: '服务器异常'};
} }
} else { } else {
// data = {code: 0, message: this.translate.instant('wrongServer')}; data = {code: 0, message: '服务器异常'};
} }
// next(data); next(data);
}; };
} }
if (type === 'get') { if (type === 'get') {
...@@ -64,4 +76,26 @@ export class ApiService { ...@@ -64,4 +76,26 @@ export class ApiService {
this.http.post(this.url + addr, reqB, nextFunc, error, complete); 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();
}
} }
import { Injectable, OnInit } from '@angular/core'; import { Injectable, OnInit } from '@angular/core';
import { CanActivateChild, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { CanActivateChild, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
// import { PermissionService } from './permission.service';
// import { MenuService } from './menu.service';
@Injectable() @Injectable()
export class AuthService implements CanActivateChild, OnInit { export class AuthService implements CanActivateChild, OnInit {
// public login = false;
// private permissionR = '';
constructor(private router: Router) { constructor(private router: Router) {
} }
...@@ -15,45 +11,11 @@ export class AuthService implements CanActivateChild, OnInit { ...@@ -15,45 +11,11 @@ export class AuthService implements CanActivateChild, OnInit {
} }
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
// const layoutCon = document.getElementById('layoutCon'); if (window.localStorage.getItem('token')) {
// if (layoutCon) {
// layoutCon.scrollTop = 0;
// }
// return this.checkLogin() && this.permissionCheck(state.url);
// // return this.checkLogin();
return true; 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;
// }
// }
} }
...@@ -2,12 +2,12 @@ import { Injectable } from '@angular/core'; ...@@ -2,12 +2,12 @@ import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Http, RequestOptions, Response } from '@angular/http'; import { Http, RequestOptions, Response } from '@angular/http';
import { Subscription } from 'rxjs/index'; import { Subscription } from 'rxjs/index';
import { Router } from '@angular/router'; import { TransferService } from './transfer.service';
@Injectable() @Injectable()
export class HttpService { export class HttpService {
constructor(private http: HttpClient, private router: Router) { constructor(private http: HttpClient, private tf: TransferService) {
this.subs = new Array<Subscription>(); this.subs = new Array<Subscription>();
} }
private subs: Subscription[]; private subs: Subscription[];
...@@ -63,7 +63,7 @@ export class HttpService { ...@@ -63,7 +63,7 @@ export class HttpService {
// 跳转登录页面 // 跳转登录页面
toLoginPage(time) { toLoginPage(time) {
window.setTimeout(() => { window.setTimeout(() => {
this.router.navigate(['/extra/login']); this.tf.transfer({to: 'app-extra', from: 'app-home', url: '/extra'});
}, time); }, time);
} }
......
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);
}
}
...@@ -11,12 +11,16 @@ export class TransferService { ...@@ -11,12 +11,16 @@ export class TransferService {
// 我没有找到相关的api以及解决办法,如果后面的人找到了的话麻烦将这个麻烦的方法给解决掉 // 我没有找到相关的api以及解决办法,如果后面的人找到了的话麻烦将这个麻烦的方法给解决掉
if (document.getElementsByTagName(req.to).length > 0) { if (document.getElementsByTagName(req.to).length > 0) {
const y = <HTMLBodyElement>document.getElementsByTagName(req.to)[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}); this.router.navigate([req.url], {queryParams: req.query, fragment: req.hash});
if (document.getElementsByTagName(req.from).length > 0) { if (document.getElementsByTagName(req.from).length > 0) {
const x = <HTMLBodyElement>document.getElementsByTagName(req.from)[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);
} }
} }
} }
@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,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') 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";
}
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="icofo" horiz-adv-x="1024" >
<font-face
font-family="icofo"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="fanhui" unicode="&#59075;" d="M407.19181657 564.53261631l0 207.50511368-363.26838666-363.1802104 363.26838666-363.33420786 0 212.82422906c259.42330694 0 441.09041087-83.00825563 570.77350036-264.66418204C926.12288087 253.17124536999995 770.44902571 512.5386658699999 407.19181657 564.53261631" horiz-adv-x="1024" />
<glyph glyph-name="lixian" unicode="&#59270;" d="M759.53749653 501.262704l141.95303574 68.37650133 47.31986133-48.3502624-141.95958507-68.38305066L759.53749653 501.262704zM664.91087147 597.97632747l189.27289706 193.41414933 47.30676374-48.3502624L712.2176352 549.6129664 664.91087147 597.97632747zM570.27878933 694.67685333l66.90949014 145.08462614 47.32641066-48.3710016-66.9367776-145.06388694L570.27878933 694.67685333zM642.04666347 93.19329706999997l37.527776-45.70986027c27.13644267-27.6549184 70.90775147-27.51847787 97.82588906 0.3754848l73.4390016 75.54783147c26.9181376 27.8251968 26.70638187 73.09844587-0.396224 100.61692266l-37.6107328 45.72295787c-19.2075936 19.55579093-46.862512 29.5585408-71.01690453 21.21381973l-76.1961984 78.8911776c53.9312384 55.6645824 141.69325227 55.91672533 195.83624747 0.63417707l86.76545066-95.87424c54.21176107-55.3982496 54.4770016-145.4328224 0.5665024-201.16617173L826.74060693-52.75800106999998C772.89123307-108.29378347 685.17615467-108.61360000000002 630.88362133-53.276475730000016l-86.73816213 95.88188053c-54.14299413 55.46701653-54.38858773 145.4328224-0.62762773 201.09085653l76.43524266-77.3292032C613.68880213 142.58050987000001 623.7122912 111.92280213000004 642.04666347 93.19329706999997zM404.99655467 605.44127787c7.710544 24.30502293-1.74644267 52.1444096-20.5654528 71.37165013l-28.20723094 46.24907413c-26.7882464 27.19756907-69.78238827 27.068768-96.1951488-0.32745813l-71.94579306-74.3133152c-26.4476896-27.38203627-26.330896-71.43386773 0.2794304-98.69256213l28.20723093-46.32329814 56.38826453-39.9848032c17.88357227-18.22522027-9.11642987 11.76993173 13.65390614 18.18374187l74.401728-76.38066667c-52.92921707-54.7029472-138.9840832-54.9485408-192.24730774-0.57305173l-76.38066666 95.4452704c-53.35163733 54.37549013-53.56339413 142.74439253-0.59379094 197.37202453L211.58240533 821.441296c53.02418027 54.573056 139.14781227 54.95509013 192.2822368 0.6418176l76.57823254-95.6286464c53.18790827-54.2521472 53.37237653-142.75094187 0.4911872-197.3305472L404.99655467 605.44127787zM224.21900907 267.78188693000004l-141.95303574-68.38305066-47.31986133 48.35681173 141.95958507 68.38305067L224.21900907 267.78188693000004zM318.84563413 183.52694827000005L129.57928533-9.90794027000004l-47.313312 48.3502624 189.27289707 193.43488854L318.84563413 183.52694827000005zM413.47771627 86.8067744l-63.55304534-145.07043627-47.29912213 48.35681174 63.51811627 145.0780768L413.47771627 86.8067744z" horiz-adv-x="1024" />
<glyph glyph-name="xihuan1" unicode="&#58889;" d="M936.038 750.874c-109.38 118.519-286.737 118.519-396.083 0l-27.9296-30.2763-27.9467 30.2763c-109.363 118.519-286.703 118.519-396.066 0-109.38-118.511-109.38-310.647 0-429.158l27.9296-30.2507 396.083-365.414 396.066 365.414 27.9467 30.2507C1045.4 440.226 1045.4 632.363 936.038 750.874L936.038 750.874Z" horiz-adv-x="1024" />
<glyph glyph-name="jiankong" unicode="&#58907;" d="M1024.512 194.55999999999995c-2.56-5.12-5.632-10.24-7.68-15.872-19.968-53.248-64-86.016-120.832-86.528-256-0.512-511.488-0.512-767.488 0-56.832 0-100.864 33.28-120.832 86.528-2.048 5.632-5.12 10.24-7.68 15.872v496.64c21.504 66.048 64.512 104.96 136.704 104.96 250.368 0 500.736 0.512 751.104 0 68.608 0 107.52-29.696 132.096-95.744 1.024-3.072 3.072-6.144 4.608-9.216v-496.64z m-511.488 537.6h-371.2c-56.832 0-77.312-20.48-77.824-76.8-0.512-140.8-0.512-281.6 0-421.888 0-56.832 20.48-76.8 77.312-76.8h741.888c55.808 0 76.288 20.48 76.288 75.776 0.512 141.312 0.512 283.136 0 424.448 0 54.784-21.504 75.776-76.288 75.776-122.88-0.512-246.272-0.512-370.176-0.512zM193.536-97.79200000000003v60.928h190.464v62.976h255.488v-60.928h191.488v-62.976h-637.44zM574.464 220.67200000000003h-123.904v381.952h123.904v-381.952zM830.976 474.624v-252.416h-124.416v252.416h124.416zM318.464 220.67200000000003H195.072v189.44h123.392v-189.44z" horiz-adv-x="1024" />
<glyph glyph-name="xihuan" unicode="&#58899;" d="M511.952-61.511999999999944a30.848 30.848 0 0 0-21.872 9.064L79.624 357.99199999999996c-106.16 106.16-106.16 278.896-0.016 385.024l6.752 6.768c51.464 51.416 119.832 79.72 192.56 79.72s141.096-28.304 192.512-79.72l40.512-40.488 40.496 40.488c51.392 51.416 119.76 79.72 192.504 79.72 72.752 0 141.12-28.304 192.528-79.72l6.8-6.8c51.424-51.392 79.76-119.752 79.728-192.504 0-72.712-28.304-141.08-79.728-192.496l-410.456-410.448a30.832 30.832 0 0 0-21.864-9.048zM278.92 767.64c-56.208 0-109.048-21.872-148.784-61.6l-6.752-6.768C41.336 617.256 41.344 483.784 123.368 401.736l388.584-388.568 388.584 388.568c39.728 39.728 61.6 92.56 61.6 148.752 0 56.224-21.872 109.032-61.6 148.728l-6.8 6.832c-39.728 39.728-92.56 61.6-148.792 61.6-56.216 0-109.024-21.872-148.752-61.6l-62.376-62.352a30.928 30.928 0 0 0-43.744 0l-62.384 62.328c-39.72 39.744-92.56 61.616-148.768 61.616z" horiz-adv-x="1024" />
<glyph glyph-name="shaixuan" unicode="&#58952;" d="M900.3614811 845.17925888c14.56355555 0 24.27259221-9.70903666 24.27259335-24.27259221v-43.69066667c0-4.8545189-2.42725888-12.13629667-4.8545189-14.56355555L599.38133333 468.95407445c-24.27259221-21.84533333-38.83614777-55.82696334-38.83614776-89.80859335v-436.90666667L475.59111111-4.361481099999992c-7.28177778 4.8545189-12.13629667 12.13629667-12.13629668 19.41807331v364.08888889c0 33.98163001-14.56355555 65.536-38.83614776 89.80859335L104.22044445 762.65244445C101.79318557 767.50696334 99.36592555 772.3614811 99.36592555 777.216V820.90666667c0 12.13629667 9.70903666 24.27259221 24.27259335 24.27259221h776.7229622m0 48.54518557H123.6385189C82.37511111 893.72444445 50.82074112 862.17007445 50.82074112 820.90666667v-43.69066667c0-19.41807445 7.28177778-36.40888889 19.41807331-48.54518557L390.63703666 432.54518557c14.56355555-14.56355555 24.27259221-33.98163001 24.27259335-53.39970447v-361.66162887c0-24.27259221 12.13629667-48.54518557 33.98162887-60.68148224l123.79022222-75.24503666c2.42725888-7.28177778 7.28177778-7.28177778 12.13629668-7.28177778 12.13629667 0 24.27259221 9.70903666 24.27259221 24.27259222V379.1454811c0 19.41807445 9.70903666 38.83614777 24.27259335 53.39970447L953.76118557 728.6708144300001c12.13629667 14.56355555 19.41807445 31.55436999 19.41807331 48.54518557V820.90666667c0 41.26340779-31.55436999 72.81777778-72.81777778 72.81777778z" horiz-adv-x="1024" />
<glyph glyph-name="zongshu" unicode="&#58936;" d="M998.28682903 409.17189215C998.28440178 670.0440083 787.49392592 882.48016592 525.34992592 882.79935052V385.21362963h473.17841541c0.36530252 8.49540741-0.2415123 16.23715082-0.2415123 23.95826252zM506.13816889-58.069447110000056c-232.99140267-0.00970903-422.01421748 188.53008118-422.00572207 421.52027022C84.12637867 577.5399443 243.78785185 754.00290608 450.10488889 781.28165925v60.0795212C209.80622222 813.7256201499999 24.4983277 610.15988148 24.4983277 363.10129778c0-265.9244563 215.64863525-480.81214578 481.56702341-480.8170003C749.78645333-117.70963437 951.2429037 63.60177778000002 983.171072 299.04592591999995H922.8985837c-31.43786192-202.67614815-206.02697955-357.12022755-416.76041481-357.11537303z" horiz-adv-x="1024" />
<glyph glyph-name="wode" unicode="&#59035;" d="M545.901727 902.34913734a300.183426 300.183426 0 0 1-185.834452-536.106341A552.015159 552.015159 0 0 1 0.625237-65.44889765999994a48.629576 48.629576 0 0 1 40.154136-55.576659 49.602168 49.602168 0 0 1 7.850203-0.625237 48.629576 48.629576 0 0 1 47.795926 40.779373 453.088707 453.088707 0 0 0 449.545696 382.089526A300.391839 300.391839 0 0 1 545.901727 902.34913734z m0-503.802409a203.41057 203.41057 0 1 0 203.41057 203.41057 203.618982 203.618982 0 0 0-203.41057-203.41057zM1091.178216-65.44889765999994A551.459393 551.459393 0 0 1 833.649876 317.75216134000004a48.629576 48.629576 0 1 1-50.57476-82.670279 454.686536 454.686536 0 0 0 212.441777-315.953303 48.629576 48.629576 0 0 1 47.795926-40.779373 49.602168 49.602168 0 0 1 7.780732 0.625237 48.629576 48.629576 0 0 1 40.084665 55.576659z" horiz-adv-x="1091" />
<glyph glyph-name="baojing" unicode="&#58999;" d="M831.937316 70.58178299999997H191.059745a40.117532 40.117532 0 0 0-40.117531 40.117531V362.436827a361.057786 361.057786 0 1 0 721.112634 0v-251.737513a40.117532 40.117532 0 0 0-40.117532-40.117531z m-600.760039 80.235063h560.642508V362.436827c0 154.452498-125.367287 280.822723-280.822723 280.822722S231.177277 517.8922620000001 231.177277 362.436827zM872.054848-128H151.945152a94.2762 94.2762 0 0 0 0 188.5524h720.109696a94.2762 94.2762 0 0 0 0-188.5524zM151.945152-19.682664000000045a14.041136 14.041136 0 0 1 0-28.082272h720.109696a14.041136 14.041136 0 0 1 0 28.082272zM512 737.535749a40.117532 40.117532 0 0 0-40.117532 40.117532V855.882468a40.117532 40.117532 0 0 0 80.235064 0v-78.229187a40.117532 40.117532 0 0 0-40.117532-40.117532zM701.555338 700.427032a40.117532 40.117532 0 0 0-35.10284 59.17336l37.108716 69.202742a40.38331 40.38331 0 1 0 71.208619-38.111655l-37.108716-69.202742a40.117532 40.117532 0 0 0-36.105779-21.061705zM841.966699 582.0803129999999a40.117532 40.117532 0 0 0-29.08521 67.196866l53.155729 57.167483a40.117532 40.117532 0 0 0 59.17336-54.158668l-53.15573-57.167483a40.117532 40.117532 0 0 0-30.088149-13.038198zM323.4476 700.427032a40.117532 40.117532 0 0 0-35.10284 21.061705l-37.108717 69.202742a40.38331 40.38331 0 0 0 71.208619 38.111655l37.108717-69.202742a40.117532 40.117532 0 0 0-35.10284-59.17336zM182.033301 582.0803129999999a40.117532 40.117532 0 0 0-29.085211 13.038198l-53.15573 57.167483a40.117532 40.117532 0 0 0 59.17336 54.158668l53.15573-57.167483a40.117532 40.117532 0 0 0-29.085211-67.196866zM438.785504 169.87267399999996a40.117532 40.117532 0 0 0-28.082272 68.199804l134.393732 135.39667H381.618022a40.117532 40.117532 0 0 0-28.082273 68.199804l153.44956 153.449559a40.423428 40.423428 0 0 0 57.167482-57.167483l-85.249755-85.249755h162.476004a40.117532 40.117532 0 0 0 28.082272-68.199804L466.867777 181.90793299999996a40.117532 40.117532 0 0 0-28.082273-12.035259z" horiz-adv-x="1024" />
<glyph glyph-name="shouye" unicode="&#58887;" d="M1005.190301 391.147686l-437.137399 443.90889-29.34313 30.095518c-6.771492 6.771492-15.800147 10.533431-24.828802 10.533431-9.781043 0-18.809699-3.76194-24.828802-10.533431L22.571639 391.900073C1.504776 370.833211-4.514328 339.23291700000004 6.771492 311.39456299999995c11.285819-27.085966 38.371785-45.143277 67.714915-45.143277h48.152829v-373.936811h783.235856V265.49889800000005h48.905217c19.562087 0 37.619398 7.52388 51.16238 21.066862 27.085966 29.34313 27.085966 75.238795-0.752388 104.581926z m-428.861131-416.822925H449.927994V208.31741399999999h127.153564v-233.992653z m246.783247 373.936811v-373.936811H649.310801V236.15576799999997c0 12.038207-4.514328 24.076414-12.790595 32.352682-8.276267 8.276267-20.314475 13.542983-32.352682 13.542983H422.842028c-12.038207 0-23.324026-5.266716-32.352682-13.542983-8.276267-8.276267-13.542983-20.314475-12.790595-32.352682v-261.831007H203.144747V348.261572H94.048494l419.080088 424.346804 26.333578-27.085966 392.74651-398.013226-109.096253 0.752388z m0 0" horiz-adv-x="1026" />
<glyph glyph-name="state" unicode="&#58965;" d="M1015.89902222 696.24263111c0 68.73998222-64.66218667 124.66403555-143.88792889 124.66403556H151.98890667c-79.80828445 0-143.88792889-55.92405333-143.88792889-124.66403556v-623.90272c0-68.73998222 64.66218667-124.66403555 143.88792889-124.66403556h720.02218666c79.80828445 0 143.88792889 55.92405333 143.88792889 124.66403556V696.24263111z m-914.59128889 32.03982222c13.39847111 11.65084445 32.03982222 18.64135111 51.26371556 18.05880889h720.02218666c39.61287111 0 72.23523555-16.31118222 72.23523556-50.68117333v-280.78535111h-57.08913778l-61.74947555 53.59388444c-13.98101333 12.23338667-36.70016 12.23338667-50.68117333 0-4.07779555-3.49525333-6.99050667-7.57304889-8.73813334-12.23338667l-44.27320889-115.92590222L616.8576 522.64504889c-8.73813333 15.14609778-30.29219555 21.55406222-48.35100445 13.98101333-8.15559111-3.49525333-13.98101333-9.32067555-17.47626666-16.31118222l-104.8576-227.19146667-115.34336 349.52533334c-5.24288 16.31118222-25.63185778 26.2144-44.27320889 21.55406222-9.90321778-2.33016889-18.05880889-8.15559111-22.13660445-16.31118222l-133.9847111-232.43434667H80.91875555V684.59178667c-1.16508445 16.31118222 6.99050667 32.03982222 20.38897778 43.69066666z m825.46232889-696.13795555c-8.73813333-8.73813333-35.53507555-11.06830222-54.75896889-11.06830223H151.98890667c-19.22389333 0-37.28270222 6.40796445-51.26371556 18.0588089s-20.97152 27.37948445-20.97152 44.27320888v269.13450667h72.23523556c13.39847111 0 26.2144 6.40796445 32.03982222 17.47626667l102.52743111 177.67537778 118.83861333-360.01109334c4.07779555-12.81592889 17.47626667-22.13660445 32.62236445-22.71914666h1.74762667c14.56355555 0 27.96202667 7.57304889 33.20490666 19.80643555L587.73048889 432.93354667l108.35285333-187.57859556c8.73813333-15.14609778 30.29219555-21.55406222 48.35100445-13.98101333 8.73813333 3.49525333 15.14609778 9.90321778 18.05880888 18.05880889l53.59388445 139.22759111 30.87473778-26.79694223c6.99050667-5.82542222 15.72864-9.32067555 25.63185777-9.32067555h71.65269334v-269.13450667c0-16.31118222-11.06830222-46.02083555-16.31118222-50.68117333l-1.16508445-0.58254222z" horiz-adv-x="1024" />
<glyph glyph-name="gantan" unicode="&#59246;" d="M512 896C229.376 896 0 666.624 0 384s229.376-512 512-512 512 229.376 512 512S794.624 896 512 896z m0-819.2c-29.184 0-52.224 23.552-52.224 52.224 0 29.184 23.552 52.224 52.224 52.224 29.184 0 52.224-23.552 52.224-52.224S541.184 76.79999999999995 512 76.79999999999995z m56.832 584.192l-10.752-372.736c-0.512-19.456-20.48-34.816-44.032-34.816h-8.192c-23.552 0-43.52 15.36-44.032 34.816L450.56 660.992c-1.024 29.696 23.04 54.784 53.76 54.784h10.752c30.72 0 54.784-25.088 53.76-54.784z" horiz-adv-x="1024" />
<glyph glyph-name="search" unicode="&#58901;" d="M650.75148231 196.29131889999996l48.24309305 48.24309305 321.62061653-321.62061768-48.24309191-48.2430919zM400.22193949 824.85812907c44.5747712 0 87.67129714-8.75575865 128.37988806-25.92614173 39.23034681-16.60182755 74.48080384-40.36745785 104.84168136-70.72833536 30.36087751-30.36087751 54.12650781-65.61133341 70.72833536-104.84168135 17.17038421-40.59488029 25.92614173-83.80511801 25.92614172-128.37988807s-8.75575865-87.67129714-25.92614172-128.37988807C687.45630493 327.48555833 663.69067463 292.2351013 633.32979712 261.87422492999997c-30.36087751-30.36087751-65.61133341-54.12650781-104.84168021-70.72833536-40.59488029-17.17038421-83.80511801-25.92614173-128.37988921-25.92614287S312.4369317 173.97550535000005 271.72833963 191.14588957c-39.23034681 16.60182755-74.48080384 40.36745785-104.84168022 70.72833536-30.36087751 30.36087751-54.12650781 65.61133341-70.72833536 104.84168021-17.17038421 40.59488029-25.92614173 83.80511801-25.92614286 128.37988807s8.75575865 87.67129714 25.92614286 128.37988921c16.60182755 39.23034681 40.36745785 74.48080384 70.72833536 104.84168021s65.61133341 54.12650781 104.84168022 70.72833536c40.70859207 17.05667243 83.91882866 25.81243107 128.49359986 25.81243108m0 68.2266897c-219.80365369 0-397.98902557-178.18537187-397.98902557-397.98902556s178.18537187-397.98902557 397.98902557-397.98902556 397.98902557 178.18537187 397.98902556 397.98902556-178.18537187 397.98902557-397.98902556 397.98902556z" horiz-adv-x="1024" />
<glyph glyph-name="dui" unicode="&#58948;" d="M512 896C229.229 896 0 666.77 0 384s229.229-512 512-512c282.77 0 512 229.23 512 512S794.77 896 512 896zM388.256 108.08000000000004L140.769 355.568l56.864 56.863 190.623-190.623L826.368 659.92l56.862-56.864L388.256 108.08000000000004z" horiz-adv-x="1024" />
</font>
</defs></svg>
...@@ -3,9 +3,207 @@ ...@@ -3,9 +3,207 @@
@import '~@ionic/angular/css/normalize.css'; @import '~@ionic/angular/css/normalize.css';
@import '~@ionic/angular/css/structure.css'; @import '~@ionic/angular/css/structure.css';
@import '~@ionic/angular/css/typography.css'; @import '~@ionic/angular/css/typography.css';
@import '~@ionic/angular/css/padding.css'; @import '~@ionic/angular/css/padding.css';
@import '~@ionic/angular/css/float-elements.css'; @import '~@ionic/angular/css/float-elements.css';
@import '~@ionic/angular/css/text-alignment.css'; @import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css'; @import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.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;
}
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
/** Ionic CSS Variables **/ /** Ionic CSS Variables **/
:root { :root {
/** primary **/ /** primary **/
--ion-color-primary: #3880ff; --ion-color-primary: #1890ff;
--ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-rgb: 24, 144, 255;
--ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3171e0; --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