Skip to content

M
muChangApp
Commit 997e3bd3 authored by aymen.du's avatar aymen.du
Browse files
Options

加了点动画 

增加了运行模式切换
parent c6c5549e
Hide whitespace changes
Inline Side-by-side
Showing with 224 additions and 105 deletions
src/app/animations/flyIn.ts 0 → 100644
View file @ 997e3bd3
// 引入 angular 动画组件
import {trigger, style, state, transition, animate} from '@angular/animations';
export const flyIn = trigger('EnterLeave', [
state('flyIn', style({transform: 'translateX(0)'})),
transition(':enter', [
style({transform: 'translateX(100%)'}), animate('300ms ease-in')
]),
// transition(':leave', [
// animate('0.3s ease-out', style({transform: 'translateX(-100%)'}))
// ])
]
);
src/app/animations/toLeftAndBack.ts
View file @ 997e3bd3
...@@ -2,11 +2,11 @@ import {trigger, style, state, transition, animate} from '@angular/animations'; ...@@ -2,11 +2,11 @@ import {trigger, style, state, transition, animate} from '@angular/animations';
export const toLeft = trigger('toLeft', [ export const toLeft = trigger('toLeft', [
state('toLeft', style({ state('toLeft', style({
'transform': 'translateX(-80px)' 'transform': 'translateX(-100%)'
})), })),
state('backLeft', style({ state('backLeft', style({
'transform': 'translateX(0)' 'transform': 'translateX(100%)'
})), })),
transition('toLeft => backLeft', animate('150ms')), transition('toLeft => backLeft', animate('1050ms')),
transition('backLeft => toLeft', animate('150ms')) transition('backLeft => toLeft', animate('1050ms'))
]); ]);
src/app/components/alarm-bar/alarm-bar.component.scss
View file @ 997e3bd3
.alarmBar { .alarmBar {
min-height: 40px; min-height: 20px;
width: 100%; width: 100%;
background-color: #fefcec; background-color: #fefcec;
} }
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
width: calc(100% - 50px); width: calc(100% - 50px);
display: inline-flex; display: inline-flex;
font-size: 15px; font-size: 15px;
min-height: 40px; min-height: 20px;
padding: 10px 5px; padding: 10px 5px;
line-height: 20px; line-height: 20px;
vertical-align: middle; vertical-align: middle;
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
.alarmItem { .alarmItem {
width: 100%; width: 100%;
height: 60px; height: 40px;
color: #ff0000; color: #ff0000;
font-size: 12px; font-size: 12px;
position: relative; position: relative;
......
src/app/east/east.page.html
View file @ 997e3bd3
<div class="mainCon" style="padding-top: 45px;"> <div class="mainCon" style="padding-top: 45px;" @EnterLeave>
<Navbar [leftContent]="icon" <Navbar [leftContent]="icon"
(onLeftClick)="onLeftClick()" (onLeftClick)="onLeftClick()"
[rightContent]="r" [rightContent]="r"
...@@ -43,6 +43,16 @@ ...@@ -43,6 +43,16 @@
</ListItem> </ListItem>
</div> </div>
</div> </div>
<div class="middlePart">
<ion-item>
<ion-label>运行模式</ion-label>
<ion-select multiple="false" cancelText="取消" okText="确认" [value]="workModeSetting.workMode" (ionChange)="workModeEvent()">
<ion-select-option value="0">手动模式</ion-select-option>
<ion-select-option value="1">半自动</ion-select-option>
<ion-select-option value="2">全自动</ion-select-option>
</ion-select>
</ion-item>
</div>
<div class="bottomPart"> <div class="bottomPart">
<ListItem multipleLine *ngFor="let a of devices;let i = index"> <ListItem multipleLine *ngFor="let a of devices;let i = index">
{{a.fieldDeviceName}} {{a.fieldDeviceName}}
......
src/app/east/east.page.scss
View file @ 997e3bd3
...@@ -32,3 +32,8 @@ ...@@ -32,3 +32,8 @@
height: 32px; height: 32px;
font-size: 16px; font-size: 16px;
} }
.mainCon{
height: 100%;
background-color: white;
}
\ No newline at end of file
src/app/east/east.page.ts
View file @ 997e3bd3
...@@ -3,11 +3,29 @@ import {Transfer} from '../service/transfer'; ...@@ -3,11 +3,29 @@ import {Transfer} from '../service/transfer';
import {Api} from '../service/api'; import {Api} from '../service/api';
import {Load} from '../service/load'; import {Load} from '../service/load';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {animate, state, style, transition, trigger} from '@angular/animations';
import {fadeIn} from '../animations/fade-in';
import {toLeft} from '../animations/toLeftAndBack';
import {flyIn} from '../animations/flyIn';
import {NavController} from '@ionic/angular';
@Component({ @Component({
selector: 'v-east', selector: 'v-east',
templateUrl: './east.page.html', templateUrl: './east.page.html',
styleUrls: ['./east.page.scss'], styleUrls: ['./east.page.scss'],
animations: [
// trigger('toLeft', [
// state('toLeft', style({
// 'transform': 'translateX(-80px)'
// })),
// state('backLeft', style({
// 'transform': 'translateX(0)'
// })),
// transition('toLeft => backLeft', animate('1150ms')),
// transition('backLeft => toLeft', animate('1150ms'))
// ] )
flyIn
]
}) })
export class EastPage implements OnInit { export class EastPage implements OnInit {
value = []; value = [];
...@@ -25,8 +43,11 @@ export class EastPage implements OnInit { ...@@ -25,8 +43,11 @@ export class EastPage implements OnInit {
devices = []; devices = [];
fieldRegionNo = ''; fieldRegionNo = '';
fieldRegionName = ''; fieldRegionName = '';
workMode = '1';
workModeSetting = {'workMode' : '1',
'DeviceNo' : '' };
constructor(private tf: Transfer, private api: Api, private load: Load, private ac: ActivatedRoute) { constructor(private tf: Transfer, private api: Api, private load: Load, private ac: ActivatedRoute, private nav: NavController) {
} }
ngOnInit() { ngOnInit() {
...@@ -36,13 +57,27 @@ export class EastPage implements OnInit { ...@@ -36,13 +57,27 @@ export class EastPage implements OnInit {
}); });
} }
workModeEvent() {
let opt = {fieldDeviceNo : this.workModeSetting.DeviceNo ,
op : this.workModeSetting.workMode ,
startTime: parseInt((new Date().getTime() / 1000).toString(), 10),
ts: parseInt((new Date().getTime() / 1000).toString(), 10)
};
opt.startTime = opt.ts;
this.api.control.controlSwitch([opt, (data) => {
;
}]);
}
// ionic的生命周期函数 // ionic的生命周期函数
ionViewWillEnter() { ionViewWillEnter() {
this.nanClicked = false; this.nanClicked = false;
this.beiClicked = false; this.beiClicked = false;
this.nanLoading = false; this.nanLoading = false;
this.beiLoading = false; this.beiLoading = false;
this.getData(1); this.getData(0);
} }
ionViewWillLeave() { ionViewWillLeave() {
...@@ -113,7 +148,8 @@ export class EastPage implements OnInit { ...@@ -113,7 +148,8 @@ export class EastPage implements OnInit {
} }
onLeftClick() { onLeftClick() {
this.tf.transfer({url: '/home'}); // this.tf.transfer({url: '/home'});
this.nav.navigateBack('/home');
} }
getData(time) { getData(time) {
...@@ -123,6 +159,15 @@ export class EastPage implements OnInit { ...@@ -123,6 +159,15 @@ export class EastPage implements OnInit {
this.api.app.getDeviceData([{fieldRegionNo: this.fieldRegionNo}, (data) => { this.api.app.getDeviceData([{fieldRegionNo: this.fieldRegionNo}, (data) => {
if (data.constructor === Array) { if (data.constructor === Array) {
this.devices = data; this.devices = data;
debugger
this.devices.forEach((value, i) => {
if ( value.fieldDeviceType === '配置' ) {
this.workModeSetting.workMode = value.value;
this.workModeSetting.DeviceNo = value.fieldDeviceNo;
}
}
)
} else { } else {
this.api.presentMsgToast(data.message || '获取数据失败'); this.api.presentMsgToast(data.message || '获取数据失败');
} }
......
src/app/home/home.page.html
View file @ 997e3bd3
<div class="mainCon">
<div class="topIcon" (click)="toIndex()"> <!--<div class="mainCon">-->
<i class="vo v-back"></i> <ion-header>
</div> <div class="topIcon" (click)="toIndex()">
<div class="topSearch"> <i class="vo v-back"></i>
<SearchBar [placeholder]="'点击此处进行搜索'" [(ngModel)]="searchText" </div>
(onCancel)="searchText ='';toggleFocus(false);" <div class="topSearch">
[setFocus]="false" (onFocus)="toggleFocus(true)" (onBlur)="toggleFocus(false)" <SearchBar [placeholder]="'点击此处进行搜索'" [(ngModel)]="searchText"
(onClear)="searchText ='';toggleFocus(false);"></SearchBar> (onCancel)="searchText ='';toggleFocus(false);"
</div> [setFocus]="false" (onFocus)="toggleFocus(true)" (onBlur)="toggleFocus(false)"
<v-search *ngIf="ifFocus" [(value)]="searchText"></v-search> (onClear)="searchText ='';toggleFocus(false);"></SearchBar>
<div> </div>
<ion-slides style="width: 100%;height: 200px;" mode="ios" <!--<v-search *ngIf="ifFocus" [(value)]="searchText"></v-search>-->
[options]="lunbo" #slide (ionSlideTouchEnd)="slideDidChange()"> <ion-slides style="width: 100%;height: 125px;" mode="ios"
<ion-slide class="slideCon" *ngFor="let one of imgs"> [options]="lunbo" #slide (ionSlideTouchEnd)="slideDidChange()">
<div class="inBox"> <ion-slide class="slideCon" *ngFor="let one of imgs">
<img [src]="'../../../assets/lunbo/' + one"> <div class="inBox">
</div> <img [src]="'../../../assets/lunbo/' + one">
</ion-slide> </div>
</ion-slides> </ion-slide>
<v-alarm-bar></v-alarm-bar> </ion-slides>
<div class="seePart"> <!--<v-alarm-bar></v-alarm-bar>-->
<v-sub-title title="监测信息"></v-sub-title> <!--<v-sub-title title="监测信息" style="background-color: #ffffff"></v-sub-title>-->
<div style="background-color: #efeff4"> <h1 style="
<div class="out" *ngIf="items.length === 0 && !isError"> font-size: 16px;
<i class="vo v-none"></i> padding-left: 5px;
<div class="in">暂无数据</div> border-left: 5px solid #28c9bd;
</div> line-height: 25px;
<div class="out" *ngIf="isError"> margin-bottom: 5px;">监测信息</h1>
<i class="vo v-no-signal"></i> </ion-header>
<div class="in">网络连接失败</div> <!--<div class="seePart">-->
</div>
<!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists --> <ion-content fullscreen="true" style="--padding-start:0px;--padding-end:0px;height: 5000px; overflow-y: auto;overflow-x: hidden;-webkit-overflow-scrolling: touch;" scroll="true" >
<ion-list mode="ios">
<ion-item *ngFor="let item of items" (click)="toControl(item)"> <div style="background-color: #efeff4; width: 100%;" class="bigbk">
<div class="item"> <div class="out" *ngIf="items.length === 0 && !isError">
<div class="top">{{item.name}} <i class="vo v-none"></i>
<div class="right">{{item.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div> <div class="in">暂无数据</div>
</div> </div>
<div class="content"> <div class="out" *ngIf="isError">
<div class="left"> <i class="vo v-no-signal"></i>
<img [src]="'../../assets/img/' + item.img"> <div class="in">网络连接失败</div>
</div> </div>
<div class="rightCon"> <!--The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->
<div class="block1" *ngIf="item.yewei || item.yewei === 0">池体液位: &nbsp;&nbsp;{{item.yewei}} m</div> <!--<ion-infinite-scroll>-->
<div class="block2" *ngIf="item.temp || item.temp === 0">液体温度: &nbsp;&nbsp;{{item.temp}} ℃</div>
<div class="block2">运行状态: &nbsp;&nbsp;{{item.state ? '工作中' : '未运行'}} </div> <ion-list mode="md" class="listview" insert = "false" line="none">
</div> <ion-item *ngFor="let item of items" (click)="toControl(item)" class="ion-item" style="width: 100%; --padding-start: 0px">
<div class="item">
<div class="top">{{item.name}}
<div class="right">{{item.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div>
</div>
<div class="content">
<div class="left">
<img [src]="'../../assets/img/' + item.img">
</div> </div>
<div class="bottom"> <div class="rightCon">
<div [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></div>&nbsp; <div class="block1" *ngIf="item.yewei || item.yewei === 0">池体液位: &nbsp;&nbsp;{{item.yewei}} m</div>
<span style="font-size: 13px">{{item.online ? '在线' : '离线'}}</span> <div class="block2" *ngIf="item.temp || item.temp === 0">液体温度: &nbsp;&nbsp;{{item.temp}} ℃</div>
<div class="block2">运行状态: &nbsp;&nbsp;{{item.state ? '工作中' : '未运行'}} </div>
</div> </div>
</div> </div>
</ion-item> <div class="bottom">
</ion-list> <div [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></div>&nbsp;
<!--<div class="item" *ngFor="let item of items" (click)="toControl(item)">--> <span style="font-size: 13px">{{item.online ? '在线' : '离线'}}</span>
<!--<div>--> </div>
<!--<div class="top">{{item.name}}--> </div>
<!--<div class="right">{{item.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div>--> </ion-item>
<!--</div>--> </ion-list>
<!--<div class="content">--> <!--</ion-infinite-scroll>-->
<!--<div class="left">-->
<!--<img [src]="'../../assets/img/' + item.img">-->
<!--</div>-->
<!--<div class="rightCon">-->
<!--<div class="block1" *ngIf="item.yewei || item.yewei === 0">池体液位: &nbsp;&nbsp;{{item.yewei}} m</div>-->
<!--<div class="block2" *ngIf="item.temp || item.temp === 0">液体温度: &nbsp;&nbsp;{{item.temp}} ℃</div>-->
<!--<div class="block2">运行状态: &nbsp;&nbsp;{{item.state ? '工作中' : '未运行'}} </div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="bottom">-->
<!--<div [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></div>&nbsp;-->
<!--<span style="font-size: 13px">{{item.online ? '在线' : '离线'}}</span>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
</div> </div>
</div> </ion-content>
</div> <!--</div>-->
<!--<div class="item" *ngFor="let item of items" (click)="toControl(item)">-->
<!--<div>-->
<!--<div class="top">{{item.name}}-->
<!--<div class="right">{{item.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div>-->
<!--</div>-->
<!--<div class="content">-->
<!--<div class="left">-->
<!--<img [src]="'../../assets/img/' + item.img">-->
<!--</div>-->
<!--<div class="rightCon">-->
<!--<div class="block1" *ngIf="item.yewei || item.yewei === 0">池体液位: &nbsp;&nbsp;{{item.yewei}} m</div>-->
<!--<div class="block2" *ngIf="item.temp || item.temp === 0">液体温度: &nbsp;&nbsp;{{item.temp}} ℃</div>-->
<!--<div class="block2">运行状态: &nbsp;&nbsp;{{item.state ? '工作中' : '未运行'}} </div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="bottom">-->
<!--<div [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></div>&nbsp;-->
<!--<span style="font-size: 13px">{{item.online ? '在线' : '离线'}}</span>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
\ No newline at end of file
src/app/home/home.page.scss
View file @ 997e3bd3
.mainCon{
//overflow-y: auto;overflow-x: hidden;-webkit-overflow-scrolling: touch;
}
.inBox { .inBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -25,7 +29,7 @@ ...@@ -25,7 +29,7 @@
.item { .item {
margin-bottom: 10px; margin-bottom: 10px;
padding: 3px 3px 0px; padding: 0px 3px 0px;
background-color: #ffffff; background-color: #ffffff;
display:block; display:block;
width: calc(100%); width: calc(100%);
...@@ -37,16 +41,17 @@ ...@@ -37,16 +41,17 @@
padding-bottom: 5px; padding-bottom: 5px;
font-size: 15px; font-size: 15px;
display: block; display: block;
width: 100%;
} }
.right { .right {
float: right; //float: right;
color: #aaa; color: #aaa;
} }
.left { .left {
width: 80px; width: 60px;
height: 80px; height: 60px;
padding: 5px; padding: 5px;
display: inline-block; display: inline-block;
} }
...@@ -63,7 +68,7 @@ ...@@ -63,7 +68,7 @@
.bottom { .bottom {
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
padding: 6px; padding: 3px;
color: #aaa; color: #aaa;
} }
...@@ -105,3 +110,14 @@ ...@@ -105,3 +110,14 @@
width: calc(100% - 30px); width: calc(100% - 30px);
vertical-align: top; vertical-align: top;
} }
.listview{
width: 100%;
padding: 0px 0px 0px 0px !important;
margin: 0px 0px 0px 0px !important;
}
.ino-item{
padding: 0px 0px 0px 0px !important;
margin: 0px 0px 0px 0px !important;
}
\ No newline at end of file
src/app/home/home.page.ts
View file @ 997e3bd3
...@@ -59,14 +59,14 @@ export class HomePage implements OnInit, OnDestroy { ...@@ -59,14 +59,14 @@ export class HomePage implements OnInit, OnDestroy {
// ionic的生命周期函数 // ionic的生命周期函数
ionViewWillEnter() { ionViewWillEnter() {
this.slideDidChange(); this.slideDidChange();
this.getData(1); //this.getData(0);
} }
ngOnDestroy(): void { ngOnDestroy(): void {
} }
init() { init() {
this.getData(1); this.getData(0);
} }
getData(time) { getData(time) {
...@@ -106,11 +106,13 @@ export class HomePage implements OnInit, OnDestroy { ...@@ -106,11 +106,13 @@ export class HomePage implements OnInit, OnDestroy {
toControl(one) { toControl(one) {
const query = '?name=' + one.name + '&no=' + one.no + '&group=' + one.group; const query = '?name=' + one.name + '&no=' + one.no + '&group=' + one.group;
this.tf.transfer({ // this.tf.transfer({
url: '/' + one.url, // url: '/' + one.url,
query: query, // query: query,
hash: '' // hash: ''
}); // });
this.nav.navigateForward(one.url + query);
//this.nav.navigateRoot(one.url + query);
} }
toIndex() { toIndex() {
......
src/app/index/index.page.scss
View file @ 997e3bd3
.mainCon{
height: 100%;
background-color: white;
}
.mainTop { .mainTop {
height: 50%; height: 50%;
max-height: 50%; max-height: 50%;
......
src/app/index/index.page.ts
View file @ 997e3bd3
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {Transfer} from '../service/transfer'; import {Transfer} from '../service/transfer';
import {NavController} from '@ionic/angular';
@Component({ @Component({
selector: 'v-index', selector: 'v-index',
...@@ -8,14 +9,17 @@ import {Transfer} from '../service/transfer'; ...@@ -8,14 +9,17 @@ import {Transfer} from '../service/transfer';
}) })
export class IndexPage implements OnInit { export class IndexPage implements OnInit {
constructor(private tf: Transfer) { } constructor(private tf: Transfer, public nav: NavController) { }
ngOnInit() {} ngOnInit() { }
goTo(e) { goTo(e) {
setTimeout(() => { // setTimeout(() => {
this.tf.transfer({url: '/' + e}); // // this.tf.transfer({url: '/' + e});
}, 300); // this.nav.navigateRoot('/' + e);
// }, 300);
this.nav.navigateRoot('/' + e);
} }
} }
src/app/login/login.page.scss
View file @ 997e3bd3
.mainCon{
height: 100%;
background-color: white;
}
.loginPage{ .loginPage{
width: 100%; width: 100%;
......
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