Skip to content

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

加了点动画 

增加了运行模式切换
parent c6c5549e
Show 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';
export const toLeft = trigger('toLeft', [
state('toLeft', style({
'transform': 'translateX(-80px)'
'transform': 'translateX(-100%)'
})),
state('backLeft', style({
'transform': 'translateX(0)'
'transform': 'translateX(100%)'
})),
transition('toLeft => backLeft', animate('150ms')),
transition('backLeft => toLeft', animate('150ms'))
transition('toLeft => backLeft', animate('1050ms')),
transition('backLeft => toLeft', animate('1050ms'))
]);
src/app/components/alarm-bar/alarm-bar.component.scss
View file @ 997e3bd3
.alarmBar {
min-height: 40px;
min-height: 20px;
width: 100%;
background-color: #fefcec;
}
......@@ -18,7 +18,7 @@
width: calc(100% - 50px);
display: inline-flex;
font-size: 15px;
min-height: 40px;
min-height: 20px;
padding: 10px 5px;
line-height: 20px;
vertical-align: middle;
......@@ -26,7 +26,7 @@
.alarmItem {
width: 100%;
height: 60px;
height: 40px;
color: #ff0000;
font-size: 12px;
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"
(onLeftClick)="onLeftClick()"
[rightContent]="r"
......@@ -43,6 +43,16 @@
</ListItem>
</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">
<ListItem multipleLine *ngFor="let a of devices;let i = index">
{{a.fieldDeviceName}}
......
src/app/east/east.page.scss
View file @ 997e3bd3
......@@ -32,3 +32,8 @@
height: 32px;
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';
import {Api} from '../service/api';
import {Load} from '../service/load';
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({
selector: 'v-east',
templateUrl: './east.page.html',
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 {
value = [];
......@@ -25,8 +43,11 @@ export class EastPage implements OnInit {
devices = [];
fieldRegionNo = '';
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() {
......@@ -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的生命周期函数
ionViewWillEnter() {
this.nanClicked = false;
this.beiClicked = false;
this.nanLoading = false;
this.beiLoading = false;
this.getData(1);
this.getData(0);
}
ionViewWillLeave() {
......@@ -113,7 +148,8 @@ export class EastPage implements OnInit {
}
onLeftClick() {
this.tf.transfer({url: '/home'});
// this.tf.transfer({url: '/home'});
this.nav.navigateBack('/home');
}
getData(time) {
......@@ -123,6 +159,15 @@ export class EastPage implements OnInit {
this.api.app.getDeviceData([{fieldRegionNo: this.fieldRegionNo}, (data) => {
if (data.constructor === Array) {
this.devices = data;
debugger
this.devices.forEach((value, i) => {
if ( value.fieldDeviceType === '配置' ) {
this.workModeSetting.workMode = value.value;
this.workModeSetting.DeviceNo = value.fieldDeviceNo;
}
}
)
} else {
this.api.presentMsgToast(data.message || '获取数据失败');
}
......
src/app/home/home.page.html
View file @ 997e3bd3
<div class="mainCon">
<!--<div class="mainCon">-->
<ion-header>
<div class="topIcon" (click)="toIndex()">
<i class="vo v-back"></i>
</div>
......@@ -8,9 +10,8 @@
[setFocus]="false" (onFocus)="toggleFocus(true)" (onBlur)="toggleFocus(false)"
(onClear)="searchText ='';toggleFocus(false);"></SearchBar>
</div>
<v-search *ngIf="ifFocus" [(value)]="searchText"></v-search>
<div>
<ion-slides style="width: 100%;height: 200px;" mode="ios"
<!--<v-search *ngIf="ifFocus" [(value)]="searchText"></v-search>-->
<ion-slides style="width: 100%;height: 125px;" mode="ios"
[options]="lunbo" #slide (ionSlideTouchEnd)="slideDidChange()">
<ion-slide class="slideCon" *ngFor="let one of imgs">
<div class="inBox">
......@@ -18,10 +19,20 @@
</div>
</ion-slide>
</ion-slides>
<v-alarm-bar></v-alarm-bar>
<div class="seePart">
<v-sub-title title="监测信息"></v-sub-title>
<div style="background-color: #efeff4">
<!--<v-alarm-bar></v-alarm-bar>-->
<!--<v-sub-title title="监测信息" style="background-color: #ffffff"></v-sub-title>-->
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">监测信息</h1>
</ion-header>
<!--<div class="seePart">-->
<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" >
<div style="background-color: #efeff4; width: 100%;" class="bigbk">
<div class="out" *ngIf="items.length === 0 && !isError">
<i class="vo v-none"></i>
<div class="in">暂无数据</div>
......@@ -30,9 +41,11 @@
<i class="vo v-no-signal"></i>
<div class="in">网络连接失败</div>
</div>
<!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->
<ion-list mode="ios">
<ion-item *ngFor="let item of items" (click)="toControl(item)">
<!--The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->
<!--<ion-infinite-scroll>-->
<ion-list mode="md" class="listview" insert = "false" line="none">
<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>
......@@ -54,28 +67,30 @@
</div>
</ion-item>
</ion-list>
<!--<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>-->
<!--</ion-infinite-scroll>-->
</div>
</div>
</div>
</div>
</ion-content>
<!--</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 {
width: 100%;
height: 100%;
......@@ -25,7 +29,7 @@
.item {
margin-bottom: 10px;
padding: 3px 3px 0px;
padding: 0px 3px 0px;
background-color: #ffffff;
display:block;
width: calc(100%);
......@@ -37,16 +41,17 @@
padding-bottom: 5px;
font-size: 15px;
display: block;
width: 100%;
}
.right {
float: right;
//float: right;
color: #aaa;
}
.left {
width: 80px;
height: 80px;
width: 60px;
height: 60px;
padding: 5px;
display: inline-block;
}
......@@ -63,7 +68,7 @@
.bottom {
border-top: 1px solid #ccc;
padding: 6px;
padding: 3px;
color: #aaa;
}
......@@ -105,3 +110,14 @@
width: calc(100% - 30px);
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 {
// ionic的生命周期函数
ionViewWillEnter() {
this.slideDidChange();
this.getData(1);
//this.getData(0);
}
ngOnDestroy(): void {
}
init() {
this.getData(1);
this.getData(0);
}
getData(time) {
......@@ -106,11 +106,13 @@ export class HomePage implements OnInit, OnDestroy {
toControl(one) {
const query = '?name=' + one.name + '&no=' + one.no + '&group=' + one.group;
this.tf.transfer({
url: '/' + one.url,
query: query,
hash: ''
});
// this.tf.transfer({
// url: '/' + one.url,
// query: query,
// hash: ''
// });
this.nav.navigateForward(one.url + query);
//this.nav.navigateRoot(one.url + query);
}
toIndex() {
......
src/app/index/index.page.scss
View file @ 997e3bd3
.mainCon{
height: 100%;
background-color: white;
}
.mainTop {
height: 50%;
max-height: 50%;
......
src/app/index/index.page.ts
View file @ 997e3bd3
import { Component, OnInit } from '@angular/core';
import {Transfer} from '../service/transfer';
import {NavController} from '@ionic/angular';
@Component({
selector: 'v-index',
......@@ -8,14 +9,17 @@ import {Transfer} from '../service/transfer';
})
export class IndexPage implements OnInit {
constructor(private tf: Transfer) { }
constructor(private tf: Transfer, public nav: NavController) { }
ngOnInit() {}
ngOnInit() { }
goTo(e) {
setTimeout(() => {
this.tf.transfer({url: '/' + e});
}, 300);
// setTimeout(() => {
// // this.tf.transfer({url: '/' + e});
// 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{
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