Commit 4fa13901 authored by yating.lin's avatar yating.lin

修改详情页tab页面跳转

parent 6fb4b693
......@@ -42,15 +42,15 @@ const routes: Routes = [
]
},
{path: 'login', component: LoginPage},
{path: 'env-detail',
component: EnvDetailPage,
children: [
{path: 'fan', component: EnvFanPage},
{path: 'shower/:fieldRegionNo/:operationModel/:online', component: EnvShowerPage},
{path: 'light/:fieldRegionNo/:operationModel/:online', component: EnvLightPage},
{path: 'waterchannel/:fieldRegionNo/:operationModel/:online', component: EnvWaterchannelPage},
{path: '', redirectTo: 'fan', pathMatch : 'prefix'},
]
{path: 'env-detail', loadChildren: './envCtrl/env-detail/env-detail.module#EnvDetailPageModule'
// component: EnvDetailPage,
// children: [
// {path: 'fan', component: EnvFanPage},
// {path: 'shower/:fieldRegionNo/:operationModel/:online', component: EnvShowerPage},
// {path: 'light/:fieldRegionNo/:operationModel/:online', component: EnvLightPage},
// {path: 'waterchannel/:fieldRegionNo/:operationModel/:online', component: EnvWaterchannelPage},
// {path: '', redirectTo: 'fan', pathMatch : 'prefix'},
// ]
},
......
......@@ -78,11 +78,11 @@ import {DatePipe} from '@angular/common';
OtherPage,
SearchPage,
MinePage,
EnvFanPage,
EnvShowerPage,
EnvLightPage,
EnvWaterchannelPage,
EnvDetailPage,
// EnvFanPage,
// EnvShowerPage,
// EnvLightPage,
// EnvWaterchannelPage,
// EnvDetailPage,
// EnvAnalPage,
// EnvAlarmPage,
......
......@@ -17,13 +17,18 @@ const routes: Routes = [
{
path: '',
component: EnvDetailPage,
// children: [
// {path: 'fan', component: EnvFanPage},
// {path: 'shower', component: EnvShowerPage},
// {path: 'light', component: EnvLightPage},
// {path: 'waterchannel', component: EnvWaterchannelPage},
// {path: '', redirectTo: 'fan', pathMatch: 'prefix'},
// ]
children: [
// {path: 'fan', component: EnvFanPage},
// {path: 'shower', component: EnvShowerPage},
// {path: 'light', component: EnvLightPage},
// {path: 'waterchannel', component: EnvWaterchannelPage},
// {path: '', redirectTo: 'fan', pathMatch: 'prefix'},
// {path: 'fan', component: EnvFanPage},
// {path: 'shower/:fieldRegionNo/:operationModel/:online', component: EnvShowerPage},
// {path: 'light/:fieldRegionNo/:operationModel/:online', component: EnvLightPage},
// {path: 'waterchannel/:fieldRegionNo/:operationModel/:online', component: EnvWaterchannelPage},
// {path: '', redirectTo: 'fan', pathMatch : 'prefix'},
]
}
];
......
......@@ -29,39 +29,50 @@
</div>
</ion-header>
<ion-content color="light">
<ion-router-outlet></ion-router-outlet>
<ion-tabs>
<ion-tab-bar slot="top" mode="ios" style="--border: 0px;height: 30px;" color="light-gray">
<ion-tab-button tab="fan" class="tabBtn ion-segment-button">
<ion-label>风机</ion-label>
</ion-tab-button>
<ion-tab-button tab="shower" class="tabBtn ion-segment-button" [routerLink]="showerLink"> <!--[rootParams]="fieldRegionNo"-->
<ion-label>喷淋</ion-label>
</ion-tab-button>
<ion-tab-button tab="light" class="tabBtn ion-segment-button" [routerLink]="lightLink">
<ion-label>照明</ion-label>
</ion-tab-button>
<ion-tab-button tab="waterchannel" class="tabBtn ion-segment-button" [routerLink]="waterchannelLink">
<ion-label>水槽</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<!--<ion-router-outlet></ion-router-outlet>-->
<!--<ion-tabs>-->
<!--<ion-tab-bar slot="top">-->
<!--<ion-tab-button tab="fan" class="tabSelected">-->
<!--<ion-tab-bar slot="top" mode="ios" style="&#45;&#45;border: 0px;height: 30px;" color="light-gray">-->
<!--<ion-tab-button tab="fan" class="tabBtn ion-segment-button">-->
<!--<ion-label>风机</ion-label>-->
<!--</ion-tab-button>-->
<!--&lt;!&ndash;<ion-tab-button tab="shower" class="tabSelected"> &lt;!&ndash;[rootParams]="fieldRegionNo"&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;<ion-label>喷淋</ion-label>&ndash;&gt;-->
<!--&lt;!&ndash;</ion-tab-button>&ndash;&gt;-->
<!--<ion-tab-button tab="light" class="tabSelected">-->
<!--<ion-tab-button tab="shower" class="tabBtn ion-segment-button" [routerLink]="showerLink"> &lt;!&ndash;[rootParams]="fieldRegionNo"&ndash;&gt;-->
<!--<ion-label>喷淋</ion-label>-->
<!--</ion-tab-button>-->
<!--<ion-tab-button tab="light" class="tabBtn ion-segment-button" [routerLink]="lightLink">-->
<!--<ion-label>照明</ion-label>-->
<!--</ion-tab-button>-->
<!--<ion-tab-button tab="waterchannel" class="tabSelected">-->
<!--<ion-tab-button tab="waterchannel" class="tabBtn ion-segment-button" [routerLink]="waterchannelLink">-->
<!--<ion-label>水槽</ion-label>-->
<!--</ion-tab-button>-->
<!--</ion-tab-bar>-->
<!--</ion-tabs>-->
<!--<ion-router-outlet></ion-router-outlet>-->
<ion-segment mode="ios" scrollable style="position: sticky;" color="secondary" [value]="selectedTab"
(ionChange)="segmentChanged($event)">
<ion-segment-button mode="ios" style="border-radius: 0px 5px 0px 0px;" value="fan" s>
<ion-label style="font-size:10px">风机</ion-label>
</ion-segment-button>
<ion-segment-button mode="ios" style="border-radius: 0px 5px 0px 0px;" value="shower">
<ion-label style="font-size:10px">喷淋</ion-label>
</ion-segment-button>
<ion-segment-button mode="ios" style="border-radius: 0px 5px 0px 0px;" value="light">
<ion-label style="font-size:10px">照明</ion-label>
</ion-segment-button>
<ion-segment-button mode="ios" style="border-radius: 0px 5px 0px 0px;" value="water">
<ion-label style="font-size:10px">水槽</ion-label>
</ion-segment-button>
</ion-segment>
<div *ngIf="selectedTab === 'fan'">
<v-env-fan></v-env-fan>
</div>
<div *ngIf="selectedTab === 'shower'">
<v-env-shower></v-env-shower>
</div>
<div *ngIf="selectedTab === 'light'">
<v-env-light></v-env-light>
</div><div *ngIf="selectedTab === 'water'">
<v-env-waterchannel></v-env-waterchannel>
</div>
</ion-content>
......@@ -29,6 +29,8 @@ export class EnvDetailPage implements OnInit {
});
}
selectedTab = '';
item: any = {
factoryNo: '',
factoryName: '',
......@@ -117,6 +119,8 @@ export class EnvDetailPage implements OnInit {
this.getData(0);
}
});
this.selectedTab = 'fan';
// this.showerLink = '/shower?fieldRegionNo=' + this.fieldRegionNo + '&operationModel=' + this.item.operationModel + '&online=' + this.item.online;
}
getData(time) {
......@@ -312,4 +316,23 @@ export class EnvDetailPage implements OnInit {
this.inHouseDisabled = false;
}
}
segmentChanged(e) {
const tab = e.target.value;
this.selectedTab = tab;
let query = '?fieldRegionNo=' + this.fieldRegionNo + '&operationModel=' + this.item.operationModel + '&online=' + this.item.online;
if (tab === 'fan') {
query = '/env-detail/fan' + query;
} else if (tab === 'light') {
query = '/env-detail/light' + query;
} else if (tab === 'shower') {
query = '/env-detail/shower' + query;
} else if (tab === 'water') {
query = '/env-detail/water' + query;
} else {
query = '/env-detail/fan' + query;
}
// this.nav.navigateForward(query);
}
}
<ion-header style="background-color: #F3F4F4;">
<div class="env-detail-content">
<h1 class="main-title-detail">模式状态</h1>
<ion-item lines="none" style="width: 98%;" class="item-height">
<ion-grid>
<ion-row>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 1" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 1" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">手控模式</span>
</div>
</ion-col>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 2" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 2" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">自控模式</span>
</div>
</ion-col>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 3" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 3" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">智控模式</span>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-header>
<ion-content color="light" style="height: 100%;">
<div class="env-detail-content">
<h1 class="main-title-detail">模式状态</h1>
<ion-item lines="none" style="width: 98%;" class="item-height">
<ion-grid>
<ion-row>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 1" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 1" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">手控模式</span>
</div>
</ion-col>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 2" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 2" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">自控模式</span>
</div>
</ion-col>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 3" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 3" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">智控模式</span>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
<h1 class="main-title-detail">控制状态</h1>
<ion-item *ngIf="batchSwitch" lines="none" insert="false" style="width: 98%;">
<div style="width:100%">
<div style="width:15%; display: inline-block; float:left;">
<img src="../../assets/img/batchSwitch.png" class="icon-batch-switch">
</div>
<div class="label-batch-switch font-content" style="width:20%; display: inline-block; float:left;">
一键控制
</div>
<div style="width:30%; display: inline-block; float:left;">
<ion-toggle color="secondary" mode="ios" style="display:inline-block" slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
[(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle>
</div>
<h1 class="main-title-detail">控制状态</h1>
<ion-item *ngIf="batchSwitch" lines="none" insert="false" style="width: 98%;">
<div style="width:100%">
<div style="width:15%; display: inline-block; float:left;">
<img src="../../assets/img/batchSwitch.png" class="icon-batch-switch">
</div>
<div class="label-batch-switch font-content" style="width:20%; display: inline-block; float:left;">
一键控制
</div>
<div style="width:30%; display: inline-block; float:left;">
<ion-toggle color="secondary" mode="ios" style="display:inline-block" slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
[(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle>
</div>
</div>
</ion-item>
<div class="card-div">
<ion-card mode="ios" *ngFor="let device of devices" class="card" color="white">
<ion-card-header mode="ios" class="cardHeader">
<ion-card-subtitle *ngIf="device.alarm === 0" mode="ios" align="center" class="font-mini" style="color: #828282 !important;">{{device.fieldDeviceName}}</ion-card-subtitle>
<ion-card-subtitle *ngIf="device.alarm === 1" mode="ios" align="center" class="font-mini" style="color: #F2401C !important;">{{device.fieldDeviceName}}</ion-card-subtitle>
</ion-card-header>
</ion-item>
<div class="card-div">
<ion-card mode="ios" *ngFor="let device of devices" class="card" color="white">
<ion-card-header mode="ios" class="cardHeader">
<ion-card-subtitle *ngIf="device.alarm === 0" mode="ios" align="center" class="font-mini" style="color: #828282 !important;">{{device.fieldDeviceName}}</ion-card-subtitle>
<ion-card-subtitle *ngIf="device.alarm === 1" mode="ios" align="center" class="font-mini" style="color: #F2401C !important;">{{device.fieldDeviceName}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content mode="ios" class="cardContent">
<ion-card-content mode="ios" class="cardContent">
<ion-toggle mode="ios" class="btn-switch" [checked]="device.op" [disabled]="device.disabled" color="secondary"
[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
<!--<ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"-->
<!--[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>-->
</ion-card-content>
</ion-card>
</div>
<ion-toggle mode="ios" class="btn-switch" [checked]="device.op" [disabled]="device.disabled" color="secondary"
[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
<!--<ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"-->
<!--[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>-->
</ion-card-content>
</ion-card>
</div>
</ion-content>
</div>
<ion-header style="background-color: #F3F4F4;">
</ion-header>
<div class="env-detail-content">
<h1 class="main-title-detail">模式状态</h1>
<ion-item lines="none" style="width: 98%;" class="item-height">
<ion-grid>
<ion-row>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 1" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 1" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">手控模式</span>
</div>
</ion-col>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 2" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 2" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">自控模式</span>
</div>
</ion-col>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 3" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 3" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">智控模式</span>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
<ion-content color="light" style="height: 100%;">
<div class="env-detail-content">
<h1 class="main-title-detail">模式状态</h1>
<ion-item lines="none" style="width: 98%;" class="item-height">
<ion-grid>
<ion-row>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 1" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 1" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">手控模式</span>
</div>
</ion-col>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 2" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 2" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">自控模式</span>
</div>
</ion-col>
<ion-col>
<div style="width:30%; float:left">
<img *ngIf="controlModel === 3" src="../../assets/img/model-on.png" class="modelState">
<img *ngIf="controlModel !== 3" src="../../assets/img/model-off.png" class="modelState">
</div>
<div style="width:70%; float:left">
<span class="font-content" style="display: inline-block; padding-top: 5px;">智控模式</span>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
<h1 class="main-title-detail" *ngIf="controlModel === 2">时间模式</h1>
<ion-item lines="none" *ngIf="controlModel === 2 || controlModel === 3">
<div style="width:100%">
<div class="div-calender bk-calender">
<div class="font-sub-title div-calender-value content-text-color">{{name}}</div>
</div>
<div style="width:35%; display: inline-block; float:left; margin-top:35px">
<span class="font-content"> 开启时间:&nbsp;<span class="main-color">{{on}}</span></span>
</div>
<div style="width:35%; display: inline-block; float:left; margin-top:35px">
<span class="font-content"> 关闭时间:&nbsp;<span class="main-color">{{off}}</span></span>
</div>
<h1 class="main-title-detail" *ngIf="controlModel === 2">时间模式</h1>
<ion-item lines="none" *ngIf="controlModel === 2 || controlModel === 3">
<div style="width:100%">
<div class="div-calender bk-calender">
<div class="font-sub-title div-calender-value content-text-color">{{name}}</div>
</div>
<div style="width:35%; display: inline-block; float:left; margin-top:35px">
<span class="font-content"> 开启时间:&nbsp;<span class="main-color">{{on}}</span></span>
</div>
<div style="width:35%; display: inline-block; float:left; margin-top:35px">
<span class="font-content"> 关闭时间:&nbsp;<span class="main-color">{{off}}</span></span>
</div>
<!--<i class="vo v-yue{{curDate}}"></i>-->
</div>
<!--<i class="vo v-yue{{curDate}}"></i>-->
</ion-item>
<h1 class="main-title-detail">控制状态</h1>
<ion-item *ngIf="devices" lines="none" insert="false">
<div style="width:100%">
<div style="width:15%; display: inline-block; float:left;">
<img src="../../assets/img/batchSwitch.png" class="icon-batch-switch">
</div>
<div class="label-batch-switch font-content" style="width:20%; display: inline-block; float:left;">
一键控制
</div>
<div style="width:30%; display: inline-block; float:left;">
<ion-toggle color="secondary" mode="ios" style="display:inline-block" slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
[(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle>
</div>
</ion-item>
<h1 class="main-title-detail">控制状态</h1>
<ion-item *ngIf="devices" lines="none" insert="false">
<div style="width:100%">
<div style="width:15%; display: inline-block; float:left;">
<img src="../../assets/img/batchSwitch.png" class="icon-batch-switch">
</div>
<div class="label-batch-switch font-content" style="width:20%; display: inline-block; float:left;">
一键控制
</div>
<div style="width:30%; display: inline-block; float:left;">
<ion-toggle color="secondary" mode="ios" style="display:inline-block" slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
[(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle>
</div>
</div>
</ion-item>
<div class="card-div">
<ion-card *ngFor="let device of devices" class="card" color="white">
<ion-card-header class="cardHeader">
<ion-card-subtitle *ngIf="device.alarm === 0" align="center" class="font-mini" style="color: #828282 !important;">{{device.fieldDeviceName}}</ion-card-subtitle>
<ion-card-subtitle *ngIf="device.alarm === 1" align="center" class="font-mini" style="color: #F2401C !important;">{{device.fieldDeviceName}}</ion-card-subtitle>
</ion-card-header>
</ion-item>
<div class="card-div">
<ion-card *ngFor="let device of devices" class="card" color="white">
<ion-card-header class="cardHeader">
<ion-card-subtitle *ngIf="device.alarm === 0" align="center" class="font-mini" style="color: #828282 !important;">{{device.fieldDeviceName}}</ion-card-subtitle>
<ion-card-subtitle *ngIf="device.alarm === 1" align="center" class="font-mini" style="color: #F2401C !important;">{{device.fieldDeviceName}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content class="cardContent">
<ion-toggle mode="ios" class="btn-switch" [checked]="device.op" [disabled]="device.disabled" color="secondary"
[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
<!--<ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"-->
<!--[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>-->
<ion-card-content class="cardContent">
<ion-toggle mode="ios" class="btn-switch" [checked]="device.op" [disabled]="device.disabled" color="secondary"
[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
<!--<ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"-->
<!--[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>-->
</ion-card-content>
</ion-card>
</div>
</ion-card-content>
</ion-card>
</div>
<!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>-->
</ion-content>
</div>
......@@ -14,7 +14,7 @@ export class Mqtt {
topic;
msg;
private options = {
keepalive: 10,
keepalive: 100,
clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
protocolId: 'MQTT',
protocolVersion: 4,
......
......@@ -5,4 +5,8 @@ export const environment = {
url: 'http://pasture.witium.com.cn/api/v2',
mqttUrl: '211.161.200.169:48083',
// url: 'http://pasture.witium.com/api', // 粪污生产环境
// mqttUrl: '120.27.235.39:8083', // 粪污生产环境
};
......@@ -3,12 +3,9 @@
// The list of file replacements can be found in `angular.json`.
export const environment = {
url: 'http://pasture.witium.com.cn/api/v2',
// url: 'http://172.16.1.52:8096', // zz 52
url: 'http://172.16.1.51:8096', // zz 52
// url: 'http://pasture.witium.com.cn/api/v2', // 牛舍测试环境
mqttUrl: '211.161.200.169:48083',
// mqttUrl: '172.16.1.24',
production: true,
};
......
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