Skip to content

M
muChangApp
Commit 1f868fe3 authored by yating.lin's avatar yating.lin
Browse files
Options

修改layout

parent 787020b5
Hide whitespace changes
Inline Side-by-side
Showing with 207 additions and 130 deletions
src/app/envCtrl/env-add-model/env-add-model.page.html
View file @ 1f868fe3
<ion-header>
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-back-button text=""></ion-back-button>
<ion-back-button mode="ios" text=""></ion-back-button>
</ion-buttons>
<ion-title mode="ios" class="title">喷淋模式填写</ion-title>
</ion-toolbar>
......
src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.html
View file @ 1f868fe3
......@@ -2,7 +2,7 @@
<ion-header translucent="false">
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-back-button text="" ></ion-back-button>
<ion-back-button mode="ios" text="" ></ion-back-button>
</ion-buttons>
<ion-title class="appTitle">{{fieldRegionName}}告警详情</ion-title>
</ion-toolbar>
......
src/app/envCtrl/env-anal-detail/env-anal-detail.page.html
View file @ 1f868fe3
<ion-header>
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-back-button text="" id="back"></ion-back-button>
<ion-back-button mode="ios" text="" id="back"></ion-back-button>
</ion-buttons>
<ion-title mode="ios" class="title">单产奶量输入</ion-title>
</ion-toolbar>
......
src/app/envCtrl/env-cfg/env-cfg.page.html
View file @ 1f868fe3
......@@ -15,7 +15,7 @@
<div *ngIf="curCowshed.fieldRegionName">
<ion-item lines="full" class="subTitle">
<ion-label>智慧模式选择</ion-label>
<ion-toggle slot="end" color="secondary" style="width:50px" [disabled]="true" [(checked)]="curCowshed.isWisdomModelChecked" (click)="toggle(curCowshed.isWisdomModelChecked)"></ion-toggle>
<ion-toggle mode="ios" slot="end" color="secondary" style="width:50px" [disabled]="true" [(checked)]="curCowshed.isWisdomModelChecked" (click)="toggle(curCowshed.isWisdomModelChecked)"></ion-toggle>
</ion-item>
<div style="margin-left: 10px; margin-right: 10px;">
<ion-label text-wrap color="danger" style="margin-left: 20px">选择智慧模式时，风机/喷淋/照明的控制将强制进入有环境条件影响的自控模式</ion-label>
......
src/app/envCtrl/env-change-model/env-change-model.page.html
View file @ 1f868fe3
<ion-header>
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-back-button text="" id="back"></ion-back-button>
<ion-back-button mode="ios" text="" id="back"></ion-back-button>
</ion-buttons>
<ion-title mode="ios" class="title">照明模式填写</ion-title>
</ion-toolbar>
......
src/app/envCtrl/env-detail/env-detail.page.html
View file @ 1f868fe3
<ion-header>
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-back-button text="" ></ion-back-button>
<ion-back-button mode="ios" text="" ></ion-back-button>
</ion-buttons>
<ion-title mode="ios" class="title">{{item.fieldRegionName}}详情</ion-title>
<ion-buttons slot="end">
......@@ -23,11 +23,11 @@
</div>
<div class="inHouseDiv">
<ion-label class="inHouseLabel">在离舍开关控制</ion-label>
<ion-toggle [(ngModel)]="inHouseState" [checked]="inHouseState" (click)="inHouseControl(inHouseState)"></ion-toggle>
<ion-toggle mode="ios" [(ngModel)]="inHouseState" [checked]="inHouseState" (click)="inHouseControl(inHouseState)"></ion-toggle>
<!--<v-switch (click)="inHouseControl(item.inHouse)" [value]="item.inHouse.inHouse" [loading]="loading"></v-switch>-->
</div>
</ion-header>
<ion-content style="background-color: #F3F4F4;">
<ion-content color="light">
<ion-router-outlet></ion-router-outlet>
<ion-tabs>
<ion-tab-bar slot="top">
......
src/app/envCtrl/env-fan/env-fan.page.html
View file @ 1f868fe3
......@@ -2,48 +2,75 @@
</ion-header>
<ion-content color='light' style="height: 100%">
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">模式状态</h1>
<ion-item lines="full">
<ion-label>运行模式</ion-label>
<ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="controlModel" disabled="true">
<ion-select-option *ngFor="let option of controlModelOptions" [value]="option.modelId">{{option.modelValue}}</ion-select-option>
</ion-select>
</ion-item>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">控制/状态</h1>
<ion-item *ngIf="batchSwitch" lines="full" insert="false">
<ion-label>一键控制</ion-label>
<ion-toggle slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
[(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle>
<!--<v-switch (click)="allCheck(batchSwitch)" [value]="batchSwitch.op" [disabled]="batchSwitch.disabled" [loading]="batchSwitch.load"></v-switch>-->
</ion-item>
<div>
<ion-card *ngFor="let device of devices" class="card" color="white">
<ion-card-header class="cardHeader">
<ion-card-subtitle align="center">{{device.fieldDeviceName}}</ion-card-subtitle>
</ion-card-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%;">
<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-card-content class="cardContent">
<!--<ion-toggle slot="middle" [checked]="device.state"></ion-toggle>-->
<ion-toggle class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled"
[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
<ion-toggle class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"
[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
<!--<v-switch *ngIf="device.alarm === 0" class="btn-switch" (click)="deviceCheck(device)" [value]="device.state" [disabled]="device.disabled" [loading]="device.load"></v-switch>-->
<!--<v-switch *ngIf="device.alarm === 1" class="btn-switch" color="danger" (click)="deviceCheck(device)" [value]="device.state" [disabled]="device.disabled" [loading]="device.load"></v-switch>-->
</ion-card-content>
</ion-card>
</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:20%; display: inline-block; float:left;">
<img src="../../assets/img/batchSwitch.png" class="icon-batch-switch">
</div>
<div class="label-batch-switch font-content">
一键控制
</div>
</div>
<ion-toggle 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>
<!--<v-switch (click)="allCheck(batchSwitch)" [value]="batchSwitch.op" [disabled]="batchSwitch.disabled" [loading]="batchSwitch.load"></v-switch>-->
</ion-item>
<div>
<ion-card *ngFor="let device of devices" class="card" color="white">
<ion-card-header class="cardHeader">
<ion-card-subtitle align="center">{{device.fieldDeviceName}}</ion-card-subtitle>
</ion-card-header>
<!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>-->
<ion-card-content class="cardContent">
<!--<ion-toggle slot="middle" [checked]="device.state"></ion-toggle>-->
<ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled"
[(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>
<!--<v-switch *ngIf="device.alarm === 0" class="btn-switch" (click)="deviceCheck(device)" [value]="device.state" [disabled]="device.disabled" [loading]="device.load"></v-switch>-->
<!--<v-switch *ngIf="device.alarm === 1" class="btn-switch" color="danger" (click)="deviceCheck(device)" [value]="device.state" [disabled]="device.disabled" [loading]="device.load"></v-switch>-->
</ion-card-content>
</ion-card>
</div>
<!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>-->
</div>
</ion-content>
src/app/envCtrl/env-fan/env-fan.page.scss
View file @ 1f868fe3
......@@ -25,3 +25,10 @@
padding: 5px;
text-align: center;
}
.modelState {
display: inline-block;
margin-right: 10px;
width:23px !important
}
src/app/envCtrl/env-history/env-history.page.html
View file @ 1f868fe3
<ion-header>
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-back-button text="" ></ion-back-button>
<ion-back-button mode="ios" text="" ></ion-back-button>
</ion-buttons>
<ion-title mode="ios" class="title">{{fieldRegionName}}历史数据</ion-title>
</ion-toolbar>
......
src/app/envCtrl/env-home/env-home.page.html
View file @ 1f868fe3
<ion-header mode="ios">
<ion-toolbar color="gray">
<ion-buttons slot="start">
<ion-back-button color="secondary" defaultHref="/index" text=""></ion-back-button>
<ion-back-button mode="ios" color="secondary" defaultHref="/index" text=""></ion-back-button>
</ion-buttons>
<ion-searchbar (ionInput)="getItems($event)" debounce="1000" style="height: 40px;"></ion-searchbar>
</ion-toolbar>
......@@ -27,23 +27,13 @@
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">故障统计</h1>
<h1 class="main-title">故障统计</h1>
<div style="margin-left:1%">
<v-kanban class="home-bar" name="热应激" [inData]="thiGood" iconClass="vo v-youxuan" iconColor="#3e9058" iconSize="25px" fontSize="25px"></v-kanban>
<v-kanban class="home-bar" name="热应激" [inData]="thiBad" iconClass="vo v-yujing" iconColor="#FAB139" iconSize="25px" fontSize="25px"></v-kanban>
<v-kanban class="home-bar" name="故障总数" [inData]="alarmTotal" iconClass="vo v-guzhang2" iconColor="#B23706" iconSize="25px" fontSize="25px"></v-kanban>
</div>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">牛舍列表</h1>
<h1 class="main-title">牛舍列表</h1>
<ion-list *ngIf="items.length > 0" mode="md" class="listview" insert = "false" line="none" style="width:96%;margin-left: 2%">
<ion-item *ngFor="let item of items" (click)="toControl(item)" class="ion-item" style="width: 100%; --padding-start: 0px">
<div class="item">
......
src/app/envCtrl/env-light/env-light.page.html
View file @ 1f868fe3
......@@ -34,7 +34,7 @@
margin-bottom: 5px;">控制/状态</h1>
<ion-item *ngIf="devices" lines="full" insert="false">
<ion-label>一键控制</ion-label>
<ion-toggle slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
<ion-toggle mode="ios" slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
[(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle>
<!--<v-switch (click)="allCheck(batchSwitch)" [value]="batchSwitch.op" [disabled]="batchSwitch.disabled" [loading]="batchSwitch.load"></v-switch>-->
</ion-item>
......@@ -45,9 +45,9 @@
</ion-card-header>
<ion-card-content class="cardContent">
<ion-toggle class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled"
<ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled"
[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
<ion-toggle class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"
<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>
<!--<v-switch class="btn-switch" (click)="deviceCheck(device)" [value]="device.state" [disabled]="device.disabled" [loading]="device.load"></v-switch>-->
</ion-card-content>
......
src/app/envCtrl/env-shower/env-shower.page.html
View file @ 1f868fe3
......@@ -2,77 +2,85 @@
</ion-header>
<ion-content color='light' style="height: 100%">
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">模式状态</h1>
<ion-item lines="full">
<ion-label>运行模式</ion-label>
<ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="controlModel" disabled="true">
<ion-select-option *ngFor="let option of controlModelOptions" [value]="option.modelId">{{option.modelValue}}</ion-select-option>
</ion-select>
</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%;">
<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 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">供液泵状态</h1>
<ion-item lines="full">
<h1 class="main-title-detail">供液泵状态</h1>
<ion-item lines="none" style="width: 98%;">
<div [ngClass]="{'sucCir': bump.alarm === 0, 'errCir': bump.alarm === 0}"></div>&nbsp;
<span class="content">{{bump.alarm === 1 ? '异常' : '运行'}}</span>
<span class="content" style="margin-left: 30px">压力: {{bump.press}} Mpa</span>
</ion-item>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">时间参数</h1>
<ion-item lines="full" insert="false">
<span class="content">{{fieldDeviceNameA}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.A}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
</ion-item>
<ion-item lines="full" insert="false">
<span class="content">{{fieldDeviceNameB}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.B}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
</ion-item>
<ion-item lines="full" insert="false">
<span class="content">间隔时间 &nbsp;&nbsp;&nbsp;&nbsp; {{controlConfig.interval}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
</ion-item>
<h1 class="main-title-detail">时间参数</h1>
<ion-item lines="full" insert="false">
<span class="content">{{fieldDeviceNameA}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.A}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
</ion-item>
<ion-item lines="full" insert="false">
<span class="content">{{fieldDeviceNameB}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.B}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
</ion-item>
<ion-item lines="full" insert="false">
<span class="content">间隔时间 &nbsp;&nbsp;&nbsp;&nbsp; {{controlConfig.interval}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
</ion-item>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">控制/状态</h1>
<div>
<ion-card *ngFor="let device of param" class="card" color="white">
<ion-card-header class="cardHeader">
<ion-card-title class="card-title">
<div style="width:100%;text-align:center;">
<div style="width:48%;display: inline-block; height: 40px;float: left; text-align: center; padding-top: 10px;">
<div style="text-align: center;margin:auto">{{device.fieldDeviceName}}</div>
<h1 class="main-title-detail">控制状态</h1>
<div>
<ion-card *ngFor="let device of param" class="card" color="white">
<ion-card-header class="cardHeader">
<ion-card-title class="card-title">
<div style="width:100%;text-align:center;">
<div style="width:48%;display: inline-block; height: 40px;float: left; text-align: center; padding-top: 10px;">
<div style="text-align: center;margin:auto">{{device.fieldDeviceName}}</div>
</div>
<div style="width:48%;display: inline-block"><img [src]="'../../assets/img/shower-' + device.state + '.png'" style="width:50px !important; margin: auto;"></div>
</div>
<div style="width:48%;display: inline-block"><img [src]="'../../assets/img/shower-' + device.state + '.png'" style="width:50px !important; margin: auto;"></div>
</div>
</ion-card-title>
</ion-card-header>
</ion-card-title>
</ion-card-header>
<ion-card-content class="cardContent">
<span class="content">压力 {{device.press}} MPa</span><br>
<!-- <ion-toggle [checked]="a.state"></ion-toggle>-->
<ion-toggle class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled"
[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
<ion-toggle class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"
[(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
<!--<v-switch class="btn-switch" (click)="deviceCheck(a)" [value]="a.state" [loading]="a.load"></v-switch>-->
</ion-card-content>
</ion-card>
<ion-card-content class="cardContent">
<span class="content">压力 {{device.press}} MPa</span><br>
<!-- <ion-toggle [checked]="a.state"></ion-toggle>-->
<ion-toggle mode="ios" class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled"
[(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>
<!--<v-switch class="btn-switch" (click)="deviceCheck(a)" [value]="a.state" [loading]="a.load"></v-switch>-->
</ion-card-content>
</ion-card>
</div>
</div>
<!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>-->
</ion-content>
src/global.scss
View file @ 1f868fe3
......@@ -180,3 +180,48 @@ img {
.spinnerColor {
--spinner-color: #61C7CC;
}
.main-title {
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #61C7CC;
line-height: 25px;
margin-bottom: 5px;
margin-left: 5px;
margin-top: 5px;
}
.main-title-detail {
background-color: #ffffff;
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #61C7CC;
line-height: 25px;
margin-bottom: 5px;
margin-left: 5px;
margin-top: 5px;
}
.env-detail-content {
padding: 5px;
margin: 5px;
background-color: #ffffff;
border-radius: 5px;
}
.icon-batch-switch {
width: 30px !important;
padding: 5px;
margin: 5px;
background-color: #ffffff;
border-radius: 5px;
}
.label-batch-switch {
float: left;
width: 60%;
display: inline-block;
align-content: center;
padding-top: 18px;
}
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