Skip to content

A
appPasture
Commit 9a540fe4 authored by van.chen's avatar van.chen
Browse files
Options

历史搜索记录(待测试)和四大主页面完工

parent 32737ec8
Hide whitespace changes
Inline Side-by-side
Showing with 840 additions and 131 deletions
src/app/home/home.module.ts
View file @ 9a540fe4
...@@ -9,6 +9,9 @@ import {PageTwoComponent} from '../main/page-two/page-two.component'; ...@@ -9,6 +9,9 @@ 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: [
...@@ -32,7 +35,10 @@ import {PageDetailComponent} from '../main/page-detail/page-detail.component'; ...@@ -32,7 +35,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 {
......
src/app/home/home.page.html
View file @ 9a540fe4
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="box"><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"><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"><app-page-three></app-page-three></div> <div class="box"><app-page-three></app-page-three></div>
...@@ -13,17 +13,17 @@ ...@@ -13,17 +13,17 @@
<div class="box"><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)"> <div class="bottomItem" [ngClass]="{'activeBarLeft': active[0]}" (click)="goActive(0)">
<div class="icoPart"><i class="icofo ioshouye"></i></div> <div class="icoPart"><i class="icofo ioshouye"></i></div>
首页</ion-col> 首页</div>
<ion-col class="padLeft" [ngClass]="{'activeBar': active[1]}" (click)="goActive(1)"> <div class="bottomItem padLeft" [ngClass]="{'activeBarLeft': active[1]}" (click)="goActive(1)">
<div class="icoPart"><i class="icofo iojiankong"></i></div> <div class="icoPart"><i class="icofo iojiankong"></i></div>
监控</ion-col> 监控</div>
<ion-col class="padLeft" [ngClass]="{'activeBar': active[2]}" (click)="goActive(2)"> <div class="bottomItem padLeft" [ngClass]="{'activeBarRight': active[2]}" (click)="goActive(2)">
<div class="icoPart"><i class="icofo iobaojing"></i></div> <div class="icoPart"><i class="icofo iobaojing"></i></div>
报警</ion-col> 报警</div>
<ion-col class="padLeft" [ngClass]="{'activeBar': active[3]}" (click)="goActive(3)"> <div class="bottomItem padLeft" [ngClass]="{'activeBarRight': active[3]}" (click)="goActive(3)">
<div class="icoPart"><i class="icofo iowode"></i></div> <div class="icoPart"><i class="icofo iowode"></i></div>
我的</ion-col> 我的</div>
</ion-row> </div>
src/app/home/home.page.scss
View file @ 9a540fe4
...@@ -2,19 +2,26 @@ ...@@ -2,19 +2,26 @@
height: 55px; height: 55px;
text-align: center; text-align: center;
color: #1890ff; color: #1890ff;
z-index: 999; z-index: 11;
font-size: 14px; font-size: 14px;
} }
.padLeft { .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 { .activeBarRight {
background-color: #1890ff; background-color: #1890ff;
color: #ffffff; color: #ffffff;
font-size: 15px; font-size: 15px;
border-bottom-right-radius: 37px;
border-top-left-radius: 50px; border-top-left-radius: 50px;
border-top-right-radius: 50px;
} }
.box { .box {
...@@ -27,5 +34,14 @@ ...@@ -27,5 +34,14 @@
} }
.icoPart { .icoPart {
font-size: 20px; font-size: 25px;
}
.bottomItem {
width: 25%;
display: inline-block;
height: 100%;
}
.padLeft {
} }
src/app/main/alarm-list/alarm-list.component.html 0 → 100644
View file @ 9a540fe4
<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 @ 9a540fe4
.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 @ 9a540fe4
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 @ 9a540fe4
<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="card">
<div class="left">
<img src="../../../assets/icon/favicon.png">
</div>
<div class="right">
<div [class]="item.online === 1 ? 'tag online' : 'tag offline'">
{{item.online === 1 ? '在线' : '离线'}}
</div>
<div class="tag error" *ngIf="item.error === 1">
故障
</div>
</div>
</div>
</ion-content>
src/app/main/page-detail/page-detail.component.ts
View file @ 9a540fe4
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} 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',
...@@ -10,10 +11,21 @@ import {TransferService} from '../../service/transfer.service'; ...@@ -10,10 +11,21 @@ import {TransferService} from '../../service/transfer.service';
}) })
export class PageDetailComponent implements OnInit { export class PageDetailComponent implements OnInit {
constructor(private tf: TransferService) { constructor(private tf: TransferService, private ar: ActivatedRoute) {
} }
item;
ngOnInit() { ngOnInit() {
this.ar.queryParams.subscribe((params) => {
if (params) {
this.item = {
name: params.name,
online: 1,
error: 1
};
}
});
} }
toList() { toList() {
...@@ -22,7 +34,7 @@ export class PageDetailComponent implements OnInit { ...@@ -22,7 +34,7 @@ export class PageDetailComponent implements OnInit {
to: 'app-home', to: 'app-home',
url: '/main', url: '/main',
query: '', query: '',
hash: 'page_two' hash: 'page_one'
}); });
} }
......
src/app/main/page-four/page-four.component.html
View file @ 9a540fe4
<div class="personSet"> <div class="mainContent">
<div class="topBar"> <div class="topBar">
<div class="imgPart"> <div class="top">
<img src="../../../assets/icon/favicon.png"> <div class="imgPart">
<img style="height: 100%" src="../../../assets/icon/favicon.png">
</div>
<div class="topRight">
<div class="rightTop">陈大爷</div>
<div class="rightBottom">上海辉度</div>
</div>
</div> </div>
<div class="topRight">1111111</div>
</div> </div>
<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="getSelfInfo()">getSelfInfo</ion-button> <div class="middleCon">
{{resp}} <div class="line">
<div class="label">昵称</div>
<div class="text">李银同学</div>
</div>
<div class="line">
<div class="label">昵称</div>
<div class="text">李银同学</div>
</div>
<div class="line">
<div class="label">手机号</div>
<div class="text">13455872687</div>
</div>
</div>
<div class="bottomBtn">
<ion-button mode="ios" color="primary" expand="block" class="button" (click)="loginOut()">退出登录</ion-button>
</div>
</div> </div>
src/app/main/page-four/page-four.component.scss
View file @ 9a540fe4
.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;
}
.imgPart { .top {
width: 35%; height: 100%;
display: inline-block; padding: 5% 10%;
.imgPart {
width: 35%;
height: 100%;
display: inline-block;
vertical-align: top;
padding: 15px 0;
text-align: left;
}
.topRight {
width: calc(62% - 2px);
display: inline-block;
height: calc(100% - 30px);
margin: 15px 0;
line-height: 2.4;
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;
}
}
}
.bottomBtn {
margin-top: 8%;
.button {
padding: 0;
margin: 0;
border-radius: 0;
background-color: #1890ff;
}
}
src/app/main/page-four/page-four.component.ts
View file @ 9a540fe4
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../service/api.service'; import { ApiService } from '../../service/api.service';
import { TransferService } from '../../service/transfer.service';
@Component({ @Component({
selector: 'app-page-four', selector: 'app-page-four',
...@@ -9,24 +8,24 @@ import { TransferService } from '../../service/transfer.service'; ...@@ -9,24 +8,24 @@ import { TransferService } from '../../service/transfer.service';
}) })
export class PageFourComponent implements OnInit { export class PageFourComponent implements OnInit {
req: any = {}; user;
resp: any = ''; resp;
constructor(private api: ApiService, private tf: TransferService) { } constructor(private api: ApiService) { }
ngOnInit() {} ngOnInit() {
this.getSelfInfo();
}
getSelfInfo() { getSelfInfo() {
const req = { this.api.user.getSelfInfo(['', (data) => {
userName: this.req.name,
password: this.req.ps
};
this.api.user.getSelfInfo([req, (data) => {
if (data) { if (data) {
console.log(data); console.log(data);
this.resp = JSON.stringify(data); this.user = JSON.stringify(data);
} else { } else {
this.api.presentMsgToast(data && data.message ? data.message : '登录失败'); this.api.presentMsgToast(data && data.message ? data.message : '登录失败');
} }
}]); }]);
} }
loginOut() {}
} }
src/app/main/page-one/page-one.component.html
View file @ 9a540fe4
...@@ -6,21 +6,6 @@ ...@@ -6,21 +6,6 @@
<img [src]="'../../../assets/imgs/' + one"> <img [src]="'../../../assets/imgs/' + one">
</div> </div>
</ion-slide> </ion-slide>
<!--<ion-slide>-->
<!--<div class="inBox">-->
<!--<img src="../../../assets/imgs/2.png">-->
<!--</div>-->
<!--</ion-slide>-->
<!--<ion-slide>-->
<!--<div class="inBox">-->
<!--<img src="../../../assets/imgs/3.png">-->
<!--</div>-->
<!--</ion-slide>-->
<!--<ion-slide>-->
<!--<div class="inBox">-->
<!--<img src="../../../assets/imgs/4.png">-->
<!--</div>-->
<!--</ion-slide>-->
</ion-slides> </ion-slides>
<div class="partCard"> <div class="partCard">
<div class="partTitle"> <div class="partTitle">
...@@ -47,7 +32,7 @@ ...@@ -47,7 +32,7 @@
<label>关注列表</label> <label>关注列表</label>
</div> </div>
<div class="partCon"> <div class="partCon">
<div class="list" *ngFor="let one of list"> <div class="list" *ngFor="let one of list" (click)="toDetail(one)">
<div class="top"> <div class="top">
<div class="left"> <div class="left">
<div class="title"> <div class="title">
......
src/app/main/page-one/page-one.component.scss
View file @ 9a540fe4
...@@ -23,37 +23,6 @@ ...@@ -23,37 +23,6 @@
} }
} }
.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;
}
.list { .list {
font-size: 14px; font-size: 14px;
...@@ -90,15 +59,5 @@ ...@@ -90,15 +59,5 @@
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
text-align: left; text-align: left;
padding-bottom: 3px; 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-one/page-one.component.ts
View file @ 9a540fe4
import {Component, OnInit, ViewChild} 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',
...@@ -112,7 +113,7 @@ export class PageOneComponent implements OnInit { ...@@ -112,7 +113,7 @@ export class PageOneComponent implements OnInit {
{label: '湿度', value: 'humid'}, {label: '湿度', value: 'humid'},
{label: '压力', value: 'press'}]; {label: '压力', value: 'press'}];
constructor() { constructor(private tf: TransferService) {
} }
ngOnInit() { ngOnInit() {
...@@ -123,4 +124,15 @@ export class PageOneComponent implements OnInit { ...@@ -123,4 +124,15 @@ export class PageOneComponent implements OnInit {
this.slide.startAutoplay(); 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 @ 9a540fe4
<p> <div class="mainContent" style="text-align: left">
page-three works! <ion-searchbar placeholder="请输入设备名称" mode="ios" clearIcon="close-circle" [(ngModel)]="searchText"
</p> (click)="showHistory = true;" showCancelButton cancelButtonText="取消"
{{token}} (ionCancel)="cancel()" (ionBlur)="blur()"></ion-searchbar>
<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="show()">Detail</ion-button> <app-alarm-list *ngIf="!showHistory"></app-alarm-list>
<app-search-history *ngIf="showHistory" [history]="history"></app-search-history>
</div>
src/app/main/page-three/page-three.component.scss
View file @ 9a540fe4
.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 @ 9a540fe4
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,21 +7,32 @@ import {LocalNotifications} from '@ionic-native/local-notifications/ngx'; ...@@ -8,21 +7,32 @@ import {LocalNotifications} from '@ionic-native/local-notifications/ngx';
}) })
export class PageThreeComponent implements OnInit { export class PageThreeComponent implements OnInit {
index = 0; searchText = '';
token = window.localStorage.getItem('token') || ''; showHistory = false;
history: Array<String> = JSON.parse(window.localStorage.getItem('history.three')) || [];
constructor(private localNotifications: LocalNotifications) { constructor() {
} }
ngOnInit() { ngOnInit() {
} }
show() { cancel() {
this.localNotifications.schedule({ this.searchText = '';
id: 1, }
text: 'Single ' + this.index,
sound: null blur() {
}); if (this.searchText) {
this.index++; 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('此处进行查询操作');
} else {
console.log('取消查询');
}
this.showHistory = false;
} }
} }
src/app/main/page-two/page-two.component.html
View file @ 9a540fe4
<div class="mainContent" style="text-align: left"> <div class="mainContent" style="text-align: left">
<ion-searchbar placeholder="请输入设备名称" mode="ios" clearIcon="close-circle" <ion-searchbar placeholder="请输入设备名称" mode="ios" clearIcon="close-circle" [(ngModel)]="searchText"
(ionBlur)="historyShow()" (ionFocus)="historyShow()"></ion-searchbar> (click)="showHistory = true;" showCancelButton cancelButtonText="取消"
(ionCancel)="cancel()" (ionBlur)="blur()"></ion-searchbar>
<app-search-list *ngIf="!showHistory"></app-search-list>
<app-search-history *ngIf="showHistory" [history]="history"></app-search-history>
</div> </div>
src/app/main/page-two/page-two.component.scss
View file @ 9a540fe4
.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 @ 9a540fe4
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,13 +7,32 @@ import {TransferService} from '../../service/transfer.service'; ...@@ -8,13 +7,32 @@ import {TransferService} from '../../service/transfer.service';
}) })
export class PageTwoComponent implements OnInit { export class PageTwoComponent implements OnInit {
constructor(private tf: TransferService) { searchText = '';
showHistory = false;
history: Array<String> = JSON.parse(window.localStorage.getItem('history.two')) || [];
constructor() {
} }
ngOnInit() { ngOnInit() {
} }
historyShow() { cancel() {
this.searchText = '';
}
blur() {
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('此处进行查询操作');
} else {
console.log('取消查询');
}
this.showHistory = false;
} }
} }
src/app/main/search-history/search-history.component.html 0 → 100644
View file @ 9a540fe4
<div class="historyList">
<div class="title">
历史搜索记录
</div>
<div class="one" *ngFor="let one of history">{{one}}</div>
</div>
src/app/main/search-history/search-history.component.scss 0 → 100644
View file @ 9a540fe4
.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 @ 9a540fe4
import {Component, Input, OnInit} 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 = [];
constructor() { }
ngOnInit() {}
}
src/app/main/search-list/search-list.component.html 0 → 100644
View file @ 9a540fe4
<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">
<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">
<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>
</div>
</div>
src/app/main/search-list/search-list.component.scss 0 → 100644
View file @ 9a540fe4
.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;
.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;
}
}
}
}
.filterBottom {
text-align: right;
margin: -5px;
}
src/app/main/search-list/search-list.component.ts 0 → 100644
View file @ 9a540fe4
import { Component, OnInit } from '@angular/core';
@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() { }
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;
}
}
src/global.scss
View file @ 9a540fe4
...@@ -8,6 +8,67 @@ ...@@ -8,6 +8,67 @@
@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%;
}
$themeColor: #1890ff; $themeColor: #1890ff;
.msgToast, .btnToast { .msgToast, .btnToast {
--background: rgba(0, 0, 0, 0.7); --background: rgba(0, 0, 0, 0.7);
...@@ -34,6 +95,7 @@ $themeColor: #1890ff; ...@@ -34,6 +95,7 @@ $themeColor: #1890ff;
.mainContent { .mainContent {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
font-size: 14px;
} }
.inBox { .inBox {
...@@ -44,3 +106,45 @@ $themeColor: #1890ff; ...@@ -44,3 +106,45 @@ $themeColor: #1890ff;
height: 100%; 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;
}
src/theme/variables.scss
View file @ 9a540fe4
...@@ -2,10 +2,9 @@ ...@@ -2,10 +2,9 @@
// http://ionicframework.com/docs/theming/ // http://ionicframework.com/docs/theming/
/** Ionic CSS Variables **/ /** Ionic CSS Variables **/
$themeColor: #1890ff;
:root { :root {
/** primary **/ /** primary **/
--ion-color-primary: $themeColor; --ion-color-primary: #1890ff;
--ion-color-primary-rgb: 24, 144, 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;
......
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