Commit a12bc76f authored by van.chen's avatar van.chen

中转池和其他池子改版

parent 524b9d31
...@@ -4,10 +4,10 @@ import {HomePage} from './home/home.page'; ...@@ -4,10 +4,10 @@ import {HomePage} from './home/home.page';
import {EastPage} from './east/east.page'; import {EastPage} from './east/east.page';
import {LoginPage} from './login/login.page'; import {LoginPage} from './login/login.page';
import {Auth} from './service/auth'; import {Auth} from './service/auth';
import {WestPage} from './west/west.component';
import {AlarmPage} from './alarm/alarm.page'; import {AlarmPage} from './alarm/alarm.page';
import {RowPage} from './row/row.page'; import {RowPage} from './row/row.page';
import {IndexPage} from './index/index.page'; import {IndexPage} from './index/index.page';
import {OtherPage} from './other/other.page';
const routes: Routes = [ const routes: Routes = [
{ {
...@@ -17,7 +17,7 @@ const routes: Routes = [ ...@@ -17,7 +17,7 @@ const routes: Routes = [
{path: '', redirectTo: 'index', pathMatch: 'full'}, {path: '', redirectTo: 'index', pathMatch: 'full'},
{path: 'home', component: HomePage}, {path: 'home', component: HomePage},
{path: 'east', component: EastPage}, {path: 'east', component: EastPage},
{path: 'west', component: WestPage}, {path: 'other', component: OtherPage},
{path: 'alarm', component: AlarmPage}, {path: 'alarm', component: AlarmPage},
{path: 'row', component: RowPage}, {path: 'row', component: RowPage},
{path: 'index', component: IndexPage} {path: 'index', component: IndexPage}
......
...@@ -23,10 +23,10 @@ import {AppMinimize} from '@ionic-native/app-minimize/ngx'; ...@@ -23,10 +23,10 @@ import {AppMinimize} from '@ionic-native/app-minimize/ngx';
import {HomePage} from './home/home.page'; import {HomePage} from './home/home.page';
import {EastPage} from './east/east.page'; import {EastPage} from './east/east.page';
import {LoginPage} from './login/login.page'; import {LoginPage} from './login/login.page';
import {WestPage} from './west/west.component';
import {AlarmPage} from './alarm/alarm.page'; import {AlarmPage} from './alarm/alarm.page';
import {RowPage} from './row/row.page'; import {RowPage} from './row/row.page';
import {IndexPage} from './index/index.page'; import {IndexPage} from './index/index.page';
import {OtherPage} from './other/other.page';
import {Api} from './service/api'; import {Api} from './service/api';
import {Auth} from './service/auth'; import {Auth} from './service/auth';
...@@ -45,10 +45,10 @@ import {Load} from './service/load'; ...@@ -45,10 +45,10 @@ import {Load} from './service/load';
HomePage, HomePage,
EastPage, EastPage,
LoginPage, LoginPage,
WestPage,
AlarmPage, AlarmPage,
RowPage, RowPage,
IndexPage IndexPage,
OtherPage
], ],
entryComponents: [], entryComponents: [],
imports: [ imports: [
......
...@@ -10,7 +10,7 @@ import {ActivatedRoute} from '@angular/router'; ...@@ -10,7 +10,7 @@ import {ActivatedRoute} from '@angular/router';
styleUrls: ['./east.page.scss'], styleUrls: ['./east.page.scss'],
}) })
export class EastPage implements OnInit { export class EastPage implements OnInit {
value = [false, false, false, false, false, false, false]; value = [];
yewei = 0; yewei = 0;
temp = 0; temp = 0;
proc = 0; proc = 0;
......
...@@ -29,17 +29,6 @@ ...@@ -29,17 +29,6 @@
<!--<div class="block4">设备状态 <span [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></span></div>--> <!--<div class="block4">设备状态 <span [ngClass]="{'sucCir': item.state, 'errCir': !item.state}"></span></div>-->
</div> </div>
</div> </div>
<!--counts: 1-->
<!--factoryName: "一厂"-->
<!--factoryNo: "FN108050436279648256"-->
<!--fieldRegionDataVos: Array(1)-->
<!--0:-->
<!--fieldRegionName: "test"-->
<!--fieldRegionNo: "123"-->
<!--liquidLevel: "6.2"-->
<!--state: 1-->
<!--temp: "26.5"-->
<Accordion [accordion]="true" [defaultActiveKey]="'0'"> <Accordion [accordion]="true" [defaultActiveKey]="'0'">
<AccordionPanel *ngFor="let one of data; let i = index;" <AccordionPanel *ngFor="let one of data; let i = index;"
[key]="i" [header]="one.factoryName"> [key]="i" [header]="one.factoryName">
......
...@@ -45,7 +45,7 @@ export class HomePage implements OnInit, OnDestroy { ...@@ -45,7 +45,7 @@ export class HomePage implements OnInit, OnDestroy {
nan: false, nan: false,
bei: false, bei: false,
isNB: 1, isNB: 1,
url: 'west' url: 'other'
}]; }];
state = { state = {
refreshState: { refreshState: {
......
<div class="mainCon">
<Navbar [leftContent]="icon"
(onLeftClick)="onLeftClick()"
style="background-color: #28c9bd"
>
{{fieldRegionName}}控制
</Navbar>
<div class="topPart">
<ListItem multipleLine *ngIf="this.yewei">
当前液位:
<div class="process">
<div [class]="'inlineProcess ' + color" [ngStyle]="{width: proc + '%'}">
</div>
</div>
{{yewei.toFixed(2)}}m
</ListItem>
<ListItem multipleLine *ngIf="this.temp">
当前温度:
<div style="display: inline-block;margin-left: calc(100% - 145px);vertical-align: middle">
{{temp.toFixed(2)}}℃
</div>
</ListItem>
</div>
<div class="bottomPart">
<ListItem multipleLine *ngFor="let a of devices;let i = index">
{{a.fieldDeviceName}}
<v-switch [value]="a.value" (click)="toggle(a)" [loading]="a.loading"></v-switch>
</ListItem>
</div>
</div>
<ng-template #icon>
<span class="vo v-back"></span>
</ng-template>
...@@ -16,12 +16,19 @@ ...@@ -16,12 +16,19 @@
height: 20px; height: 20px;
} }
.orange {
background-color: #ffa847;
}
.red { .red {
background-color: #f04844; background-color: #f04844;
} }
.stepClass {
display: inline-block;
width: calc(100% - 209px);
margin-left: 60px;
margin-right: 5px;
}
.btn {
width: 64px;
height: 32px;
font-size: 16px;
}
import { Component, OnInit } from '@angular/core';
import {Transfer} from '../service/transfer';
import {Api} from '../service/api';
import {Load} from '../service/load';
import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'v-other',
templateUrl: './other.page.html',
styleUrls: ['./other.page.scss'],
})
export class OtherPage implements OnInit {
value = [false, false, false, false, false, false, false];
yewei = 0;
temp = 0;
proc = 0;
duration = 23;
nanClicked = false;
beiClicked = false;
nanLoading = false;
beiLoading = false;
_inv;
color;
nb = [];
devices = [];
fieldRegionNo = '';
fieldRegionName = '';
constructor(private tf: Transfer, private api: Api, private load: Load, private ac: ActivatedRoute) {
}
ngOnInit() {
this.ac.queryParams.subscribe((data) => {
this.fieldRegionNo = data.fieldRegionNo || 'FRN108122347982438400';
this.fieldRegionName = data.fieldRegionName || '东中转池';
});
}
// ionic的生命周期函数
ionViewWillEnter() {
this.nanClicked = false;
this.beiClicked = false;
this.nanLoading = false;
this.beiLoading = false;
this.getData(1);
}
ionViewWillLeave() {
clearTimeout(this._inv);
}
toggle(a) {
a.loading = true;
const req = {
fieldDeviceNo: a.fieldDeviceNo,
op: a.value ? 0 : 1,
ts: new Date().getTime()
};
this.load.toLoad('指令已发送, 等待处理结果', true);
this.api.control.controlSwitch([req, (data) => {
if (data && data.code === 1) {
this.getData(1);
this.api.presentMsgToast(data.message);
} else {
a.loading = false;
this.api.presentMsgToast(data.message);
}
this.load.offLoad();
}]);
}
cancel() {
this.nanClicked = false;
this.beiClicked = false;
this.nanLoading = false;
this.beiLoading = false;
}
onLeftClick() {
this.tf.transfer({url: '/home'});
}
getData(time) {
if (time) {this.load.toLoad('加载中...', false); }
this.api.app.getDeviceData([{fieldRegionNo: this.fieldRegionNo}, (data) => {
if (data.constructor === Array) {
this.devices = data;
} else {
this.api.presentMsgToast(data.message || '获取数据失败');
}
this.load.offLoad();
this._inv = setTimeout(() => {
this.getData(0);
}, 30000);
}]);
this.api.app.getLiquidLevelData([{fieldRegionNo: this.fieldRegionNo}, (data) => {
if (data.liquidLevel) {
this.yewei = Number(data.liquidLevel);
this.proc = (Number(data.liquidLevel) / (Number(data.liquidLevelMax) * 1.5)) * 100;
this.color = Number(data.liquidLevel) > Number(data.liquidLevelMax) ||
Number(data.liquidLevel) < Number(data.liquidLevelMin) ? 'red' : '';
}
if (data.temp) {
this.temp = Number(data.temp);
}
}]);
}
}
...@@ -103,12 +103,13 @@ export class Api { ...@@ -103,12 +103,13 @@ export class Api {
} }
} }
async presentMsgToast(msg) { async presentMsgToast(msg, wz?) {
const toast = await this.toast.create({ const toast = await this.toast.create({
message: msg, message: msg,
duration: 2000, duration: 2000,
mode: 'ios', mode: 'ios',
cssClass: 'msgToast' cssClass: 'msgToast',
position: wz ? wz : 'bottom'
}); });
toast.present(); toast.present();
} }
......
...@@ -49,6 +49,7 @@ export class Mqtt { ...@@ -49,6 +49,7 @@ export class Mqtt {
vibrate: true, vibrate: true,
led: '#ff0000' led: '#ff0000'
}]); }]);
this.api.presentMsgToast(JSON.parse(b.toString())[0].description, 'bottom');
}); });
}); });
} }
......
<div class="mainCon">
<Navbar [leftContent]="icon"
(onLeftClick)="onLeftClick()"
style="background-color: #28c9bd"
>
西中转池控制
</Navbar>
<div class="topPart">
<!--<div class="online" *ngFor="let one of items">-->
<!--<div class="label">{{one.label}}</div>-->
<!--<div class="btn">-->
<!--<ion-toggle mode="md" color="primary" (ionChange)="toggle(one.type, $event)"></ion-toggle>-->
<!--</div>-->
<!--</div>-->
<ListItem multipleLine>
当前液位:
<div class="process">
<div class="inlineProcess" [ngStyle]="{width: proc + '%'}"
[ngClass]="{'orange': yewei < 3 && yewei > 2.5, 'red': yewei >= 3}">
</div>
</div>
{{yewei.toFixed(2)}}m
</ListItem>
<!--<ListItem multipleLine>-->
<!--当前温度:-->
<!--<div style="display: inline-block;margin-left: calc(100% - 145px);vertical-align: middle">-->
<!--{{temp.value}}℃-->
<!--</div>-->
<!--</ListItem>-->
<!--<ListItem multipleLine [extra]="s1">-->
<!--南水-->
<!--</ListItem>-->
<!--<ListItem multipleLine *ngIf="nanClicked">-->
<!--选择开启时间-->
<!--<Stepper class="stepClass" [(ngModel)]="duration" [min]="1" [max]="60" [showNumber]="true"></Stepper>-->
<!--<div style="text-align: right;padding-top: 10px">-->
<!--<div Button style="margin-right: 10px" class="btn" (click)="cancel()" [inline]="true" [size]="'small'" [type]="'default'">取消</div>-->
<!--<div Button (click)="confirm(0)" class="btn" [inline]="true" [size]="'small'" [type]="'primary'">确认</div>-->
<!--</div>-->
<!--</ListItem>-->
<!--<ListItem multipleLine [extra]="s2">-->
<!--北水-->
<!--</ListItem>-->
<!--<ListItem multipleLine *ngIf="beiClicked">-->
<!--选择开启时间-->
<!--<Stepper class="stepClass" [(ngModel)]="duration" [min]="1" [max]="60" [showNumber]="true"></Stepper>-->
<!--<div style="text-align: right;padding-top: 10px">-->
<!--<div Button style="margin-right: 20px" class="btn" (click)="cancel()" [inline]="true" [size]="'small'" [type]="'default'">取消</div>-->
<!--<div Button (click)="confirm(1)" class="btn" [inline]="true" [size]="'small'" [type]="'primary'">确认</div>-->
<!--</div>-->
<!--</ListItem>-->
</div>
<div class="bottomPart">
<ListItem multipleLine [extra]="s3">
一号搅拌器
</ListItem>
<ListItem multipleLine [extra]="s4">
二号搅拌器
</ListItem>
<!--<ListItem multipleLine [extra]="s5">-->
<!--三号搅拌器-->
<!--</ListItem>-->
<!--<ListItem multipleLine [extra]="s6">-->
<!--四号搅拌器-->
<!--</ListItem>-->
<!--<ListItem multipleLine [extra]="s7">-->
<!--一号泵-->
<!--</ListItem>-->
<!--<ListItem multipleLine [extra]="s8">-->
<!--二号泵-->
<!--</ListItem>-->
</div>
</div>
<ng-template #icon>
<span class="vo v-back"></span>
</ng-template>
<ng-template #s1>
<v-switch [value]="value[0]" [disabled]="beiLoading || value[0] || value[1]" (click)="toggle(0)" [loading]="nanLoading"></v-switch>
</ng-template>
<ng-template #s2>
<v-switch [value]="value[1]" [disabled]="nanLoading || value[0] || value[1]" (click)="toggle(1)" [loading]="beiLoading"></v-switch>
</ng-template>
<ng-template #s3>
<v-switch [value]="value[2]" [disabled]="true"></v-switch>
</ng-template>
<ng-template #s4>
<v-switch [value]="value[3]" [disabled]="true"></v-switch>
</ng-template>
<ng-template #s5>
<v-switch [value]="value[4]" [disabled]="true"></v-switch>
</ng-template>
<ng-template #s6>
<v-switch [value]="value[5]" [disabled]="true"></v-switch>
</ng-template>
<ng-template #s7>
<v-switch [value]="value[6]" [disabled]="true"></v-switch>
</ng-template>
<ng-template #s8>
<v-switch [value]="value[7]" [disabled]="true"></v-switch>
</ng-template>
import { Component, OnInit } from '@angular/core';
import {Transfer} from '../service/transfer';
import {Api} from '../service/api';
import {Load} from '../service/load';
@Component({
selector: 'v-west',
templateUrl: './west.component.html',
styleUrls: ['./west.component.scss'],
})
export class WestPage implements OnInit {
value = [false, false, false, false, false, false, false];
yewei = 0;
temp: any = '';
proc = 0;
duration = 15;
nanClicked = false;
beiClicked = false;
nanLoading = false;
beiLoading = false;
_inv;
constructor(private tf: Transfer, private api: Api, private load: Load) {
}
ngOnInit() {
}
// ionic的生命周期函数
ionViewWillEnter() {
this.cancel();
this.getData(1);
}
ionViewWillLeave() {
// 清掉计数器
clearTimeout(this._inv);
}
toggle(index) {
if (!(this.beiLoading || this.nanLoading || this.value[0] || this.value[1])) {
if (index === 0) {
this.nanClicked = true;
this.nanLoading = true;
} else if (index === 1) {
this.beiClicked = true;
this.beiLoading = true;
}
}
}
cancel() {
this.nanClicked = false;
this.beiClicked = false;
this.nanLoading = false;
this.beiLoading = false;
}
confirm(index) {
let req;
if (index) {
req = [{
data: {
d2: 1,
duration: this.duration,
startTime: +new Date(),
ts: +new Date()
},
sn: '19041004',
type: 'WTDR66C'
}];
} else {
req = [{
data: {
d0: 1,
duration: this.duration,
startTime: +new Date(),
ts: +new Date()
},
sn: '19041004',
type: 'WTDR66C'
}];
}
this.nanClicked = false;
this.beiClicked = false;
this.api.presentMsgToast('已成功发送指令,请耐心等待');
this.api.data.updateControl([req, (data) => {
if (data && data.code === 1) {
this.getData(1);
this.api.presentMsgToast(data.message);
} else {
this.api.presentMsgToast(data.message);
}
this.nanLoading = false;
this.beiLoading = false;
}]);
}
onLeftClick() {
this.tf.transfer({url: '/home'});
}
getData(time) {
if (time) {this.load.toLoad('加载中...', false); }
// 西中转池 19041006 0号通道为液位
this.api.data.getRealData([{sn: '19041006', type: 'WTDR18X'}, (data) => {
if (data && data.constructor === Array) {
if (data[0].value) {
if (data.length > 0) {
data[0].value = Number(data[0].value) > 0 ? data[0].value : '0';
data[0].value = Number(data[0].value) <= 6.5 ? data[0].value : '6.5';
this.yewei = 6.5 - Number(data[0].value);
this.proc = 100 - (Number(data[0].value) * 100 / 6.5);
}
}
} else {
this.api.presentMsgToast('获取数据失败');
}
}]);
// 西中转池 19041004 0,1号通道为南水 2,3号通道为北水
// this.api.data.getRealData([{deviceNo: '92489787927302144'}, (data) => {
// if (data && data.constructor === Array) {
// if (data[0] && data[1]) {
// this.value[0] = !!(data[0].value === '1.0' && data[1].value === '1.0');
// this.color[0] = (data[0].value === '1.0' && data[1].value === '1.0') ? '#28c9bd' : this.color[0];
// }
// if (data[2] && data[3]) {
// this.value[1] = !!(data[2].value === '1.0' && data[3].value === '1.0');
// this.color[1] = (data[2].value === '1.0' && data[3].value === '1.0') ? '#28c9bd' : this.color[1];
// }
// this.value = [...this.value];
// } else {
// this.api.presentMsgToast('获取数据失败');
// }
// }]);
// 西中转池 19041008 0,1号通道为1号搅拌池 2,3号通道为2号搅拌池
this.api.data.getRealData([{sn: '19041008', type: 'WTDR66C'}, (data) => {
if (data && data.constructor === Array) {
if (data.length > 0) {
if (data[0]) {
this.value[2] = !!(data[0].value === '1.0');
}
if (data[2]) {
this.value[3] = !!(data[2].value === '1.0');
}
}
this.value = [...this.value];
} else {
this.api.presentMsgToast('获取数据失败');
}
if (time) {this.load.offLoad()}
this._inv = setTimeout(() => {
this.getData(0);
}, 10000);
}]);
}
}
...@@ -123,3 +123,8 @@ img { ...@@ -123,3 +123,8 @@ img {
text-align: center; text-align: center;
} }
} }
.msgToast {
--background: #444444;
--color: #ffffff;
}
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