Skip to content

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

修改牛舍分析页 分析详情页(接口无)

parent f7b6c675
Hide whitespace changes
Inline Side-by-side
Showing with 574 additions and 194 deletions
src/app/app-routing.module.ts
View file @ cbab3c11
......@@ -24,6 +24,7 @@ import {EnvHomePage} from './envCtrl/env-home/env-home.page';
import {EnvHistoryPage} from './envCtrl/env-history/env-history.page';
import {EnvAddModelPage} from './envCtrl/env-add-model/env-add-model.page';
import {EnvChangeModelPage} from './envCtrl/env-change-model/env-change-model.page';
import {EnvAnalDetailPage} from './envCtrl/env-anal-detail/env-anal-detail.page';
const routes: Routes = [
{
......@@ -71,6 +72,7 @@ const routes: Routes = [
{path: 'tabs', loadChildren: './envCtrl/tabs/tabs.module#TabsPageModule'},
{path: 'env-add-model', component: EnvAddModelPage},
{path: 'env-change-model', component: EnvChangeModelPage},
{path: 'env-anal-detail', component: EnvAnalDetailPage},
];
@NgModule({
......
src/app/app.module.ts
View file @ cbab3c11
......@@ -58,6 +58,7 @@ import {NgxDatatableModule} from '@swimlane/ngx-datatable';
import {EnvAlarmDetailPage} from './envCtrl/env-alarm-detail/env-alarm-detail.page';
import {EnvAddModelPage} from './envCtrl/env-add-model/env-add-model.page';
import {EnvChangeModelPage} from './envCtrl/env-change-model/env-change-model.page';
import {EnvAnalDetailPage} from './envCtrl/env-anal-detail/env-anal-detail.page';
import {DatePipe} from '@angular/common';
@NgModule({
......@@ -90,6 +91,7 @@ import {DatePipe} from '@angular/common';
// EnvHomePage,
EnvAddModelPage,
EnvChangeModelPage,
EnvAnalDetailPage
],
entryComponents: [],
imports: [
......
src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.html
View file @ cbab3c11
......@@ -92,36 +92,5 @@
</div>
</div>
<!--<div class="jazz-timeline-wrapper">-->
<!--<div class="jazz-timeline multiline-timeline thin-timeline">-->
<!--<div class="timeline-post opal-post opal-trail" >-->
<!--<div class="timeline-meta">-->
<!--<div class="meta-details"></div>-->
<!--</div>-->
<!--<div class="timeline-icon icon-dot-full">-->
<!--<div class="timeline-bar"></div>-->
<!--</div>-->
<!--<div class="timeline-content">-->
<!--<div style="width: 60%">-->
<!--<h2 class="content-title"> {{item.description}} </h2>-->
<!--<div class="content-details">-->
<!--<p> {{item.troubleTime}} </p>-->
<!--</div>-->
<!--</div>-->
<!--<div style="width: 40%">-->
<!--<i class="vo v-yichuli" *ngIf="item.disposeState === 1"></i>-->
<!--</div>-->
<!--</div>&lt;!&ndash; timeline content &ndash;&gt;-->
<!--</div>&lt;!&ndash; .timeline-post &ndash;&gt;-->
<!--</div>-->
<!--</div>-->
</ion-content>
src/app/envCtrl/env-alarm/env-alarm.page.html
View file @ cbab3c11
......@@ -53,45 +53,6 @@
</div>
</ion-card-content>
<!-- <ion-card-content style="padding-top: 5px; padding-bottom: 5px;">-->
<!-- <div class="sub" style="text-align: center; " style="width:100%">-->
<!-- &lt;!&ndash;<ion-icon name="ios-heart" style="padding: auto"></ion-icon>&ndash;&gt;-->
<!-- <ion-row style="width:100%">-->
<!-- <ion-col style="padding: 5px; width:51%; border-right:1px solid lightgray">-->
<!-- <div>-->
<!-- <div style="height: 60px; float:left; width: 40%">-->
<!-- <ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
<!-- </div>-->
<!-- <div style="height: 60px; float:left; width: 60%">-->
<!-- <div style="height: 35px; float:left;width: 100%">-->
<!-- <span class="label">未解决</span><span style="color:#d33939; font-size:24px;">{{item.devErr}}</span>-->
<!-- </div>-->
<!-- <div style="height: 25px; float:left;width: 100%">-->
<!-- <span class="label">总数</span><span>{{item.devErrTotal}}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </ion-col>-->
<!-- <ion-col style="padding: 5px; width:48%">-->
<!-- <div>-->
<!-- <div style="height: 60px; float:left; width: 40%">-->
<!-- <ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
<!-- </div>-->
<!-- <div style="height: 60px; float:left; width: 60%">-->
<!-- <div style="height: 35px; float:left;width: 100%">-->
<!-- <span class="label">未解决</span><span style="color:#f0ca45; font-size:24px;">{{item.alarm}}</span>-->
<!-- </div>-->
<!-- <div style="height: 25px; float:left;width: 100%">-->
<!-- <span class="label">总数</span><span>{{item.alarmTotal}}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </ion-col>-->
<!-- </ion-row>-->
<!-- </div>-->
<!-- </ion-card-content>-->
</ion-card>
</ion-content>
src/app/envCtrl/env-anal/env-anal.page.html
View file @ cbab3c11
......@@ -4,19 +4,149 @@
</ion-toolbar>
</ion-header>
<ion-content color='light' style="height: 100%">
<ion-content color='light'>
<ion-item lines="full">
<div>
<ion-button color="primary" style="display: inline-block">输入牛舍单产奶量并分析 >></ion-button>
<div style="width:50%">
<ion-button color="secondary" style="display: inline-block" (click)="toDetail($event)">输入牛舍单产奶量并分析 >></ion-button>
</div>
<div style="width:50%; text-align: right;padding-right: 20px;">
<ion-datetime displayFormat="YYYY-MM-DD" cancelText="取消" doneText="确认" [(ngModel)]="today" style="font-size:16px; position: relative;"></ion-datetime>
</div>
</ion-item>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">温湿度曲线图</h1>
<div echarts [options]="chartOption" class="demo-chart"></div>
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">牛舍单产奶量排名</h1>
<div style="width:100%; padding-left:10px; padding-right:10px;">
<ion-item lines="full" class="rankItem">
<div class="rankIcon">
<img [src]="'../../assets/img/rank1.png'">
</div>
<div style="width:20%">
5号牛舍
</div>
<div style="width:50%">
<ion-progress-bar color="secondary" value="0.95"></ion-progress-bar>
</div>
<div class="rankValue">
140
</div>
</ion-item>
<ion-item lines="full" class="rankItem">
<div class="rankIcon">
<img [src]="'../../assets/img/rank2.png'">
</div>
<div style="width:20%">
8号牛舍
</div>
<div style="width:50%">
<ion-progress-bar color="secondary" value="0.80"></ion-progress-bar>
</div>
<div class="rankValue">
125
</div>
</ion-item>
<ion-item lines="full" class="rankItem">
<div class="rankIcon">
<img [src]="'../../assets/img/rank3.png'">
</div>
<div style="width:20%">
1号牛舍
</div>
<div style="width:50%">
<ion-progress-bar color="secondary" value="0.75"></ion-progress-bar>
</div>
<div class="rankValue">
105
</div>
</ion-item>
<ion-item lines="full" class="rankItem">
<div class="rankIcon">
24
</div>
<div style="width:20%">
24号牛舍
</div>
<div style="width:50%">
<ion-progress-bar color="secondary" value="0.50"></ion-progress-bar>
</div>
<div class="rankValue">
55
</div>
</ion-item>
<ion-item lines="full" class="rankItem">
<div class="rankIcon">
23
</div>
<div style="width:20%">
23号牛舍
</div>
<div style="width:50%">
<ion-progress-bar color="secondary" value="0.3"></ion-progress-bar>
</div>
<div class="rankValue">
35
</div>
</ion-item>
<ion-item lines="full" class="rankItem">
<div class="rankIcon">
26
</div>
<div style="width:20%">
26号牛舍
</div>
<div style="width:50%">
<ion-progress-bar color="secondary" value="0.2"></ion-progress-bar>
</div>
<div class="rankValue">
20
</div>
</ion-item>
</div>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">风机参数比较</h1>
<div style="width:100%; padding-left:10px; padding-right:10px; height: 300px">
<div #fanChartsContent id="fanChartsContent" class="echart-pie"></div>
</div>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">喷淋参数比较</h1>
<div style="width:100%; padding-left:10px; padding-right:10px; height: 300px">
<div #showerChartsContent id="showerChartsContent" class="echart-pie"></div>
</div>
<h1 style="
font-size: 16px;
padding-left: 5px;
border-left: 5px solid #28c9bd;
line-height: 25px;
margin-bottom: 5px;">温湿度曲线图</h1>
<div style="width:100%; padding-left:10px; padding-right:10px; height: 300px">
<div style="width:95%; background-color: #fff; border-radius: 10px 10px 0px 0px">
<div style="width:85%; margin:auto; padding-top: 10px">
<ion-segment scrollable style="position: sticky; margin-top:10px;" color="secondary" (ionChange)="segmentChanged($event)">
<ion-segment-button style="border-radius: 20px; margin-right:5px" *ngFor="let item of fieldRegionNameList" [value]="item.name" [checked]="item.checked">
<ion-label style="font-size:10px">{{item.name}}</ion-label>
</ion-segment-button>
</ion-segment>
</div>
</div>
<div #tempAndHumiChartsContent id="tempAndHumiChartsContent" class="echart-pie" style="border-radius: 0px 0px 10px 10px"></div>
</div>
</ion-content>
src/app/envCtrl/env-anal/env-anal.page.scss
View file @ cbab3c11
......@@ -65,8 +65,10 @@
position: fixed;
padding: 10px;
width: 95%;
height: 380px;
height: 270px;
margin-bottom: 15px;
border-radius: 10px;
background-color: #fff;
}
.subItem{
......@@ -74,3 +76,21 @@
--padding-start: 0px;
padding-left:5px;
}
.rankItem {
font-size: 16px;
--padding-start: 0px;
--padding-end: 0px;
height: 45px;
}
.rankIcon {
width:10%;
text-align:center
}
.rankValue {
width:20%;
padding-left:5px;
font-size: 14px
}
src/app/envCtrl/env-anal/env-anal.page.ts
View file @ cbab3c11
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import * as echarts from 'echarts';
import {DateFormatter} from '@angular/common/src/pipes/deprecated/intl';
import {NavController} from '@ionic/angular';
import {Transfer} from '../../service/transfer';
@Component({
selector: 'v-env-anal',
templateUrl: './env-anal.page.html',
styleUrls: ['./env-anal.page.scss'],
selector: 'v-env-anal',
templateUrl: './env-anal.page.html',
styleUrls: ['./env-anal.page.scss'],
})
export class EnvAnalPage implements OnInit {
@ViewChild('fanChartsContent') container1: ElementRef;
@ViewChild('showerChartsContent') container2: ElementRef;
@ViewChild('tempAndHumiChartsContent') container3: ElementRef;
fanOptions: any = {};
showerOptions: any = {};
tempAndHumiOptions: any = {};
fieldRegionNameList = [];
today = '';
// cowFarm :[{
// name : '1号牛舍',
// value : '1';
// },{
// name : '2号牛舍',
// value : '2';
// }];
chartData = [{sensorSN: '', unit: '', dataList: []}];
hasChartData = false;
analResult = '优';
chartOption = {
backgroundColor: '#F0F8FF',
visualMap: [{
show: false,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 400
}, {
show: false,
type: 'continuous',
seriesIndex: 1,
dimension: 0,
min: 0,
max: 400
}],
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: [{
name: '温度(℃)',
type: 'value',
splitLine: {show: false}
},
{
name: '湿度(%)',
type: 'value',
max: 100,
splitLine: {show: false}
}],
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}, {
data: [15, 13, 12, 11, 12, 11, 87],
yAxisIndex: 1,
type: 'line'
}, {
data: [76, 45, 43, 23, 34, 54, 23],
yAxisIndex: 1,
type: 'line'
}]
};
constructor() { }
ngOnInit() {
this.fanChart();
this.showerChart();
this.environmentChart();
}
hasChartData = false;
constructor(public nav: NavController, private tf: Transfer) {
}
ngOnInit() {
this.init();
}
init() {
this.today = '2019-11-10';
this.fieldRegionNameList = [{name: '1号牛舍', checked: true}, {name: '2号牛舍', checked: false},
{name: '3号牛舍', checked: false}, {name: '4号牛舍', checked: false},
{name: '5号牛舍', checked: false}, {name: '6号牛舍', checked: false}];
this.fanChart();
this.showerChart();
this.environmentChart();
}
fanChart() {
this.fanOptions = {
backgroundColor: '#fff',
color: ['#B2E8E8', '#cb595c'],
// title: {
// text: '动态数据',
// subtext: '纯属虚构'
// },
tooltip: {
trigger: 'axis',
// axisPointer: {
// type: 'cross',
// label: {
// backgroundColor: '#72efff'
// }
// }
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
label: 'cross',
show: true
},
},
legend: {
data: ['运行时长/小时', '平均压力/兆帕']
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data: ['1号牛舍', '2号牛舍', '3号牛舍', '4号牛舍', '5号牛舍', '6号牛舍'],
axisLabel: {
interval: 0,
rotate: 40
}
}
,
{
type: 'category',
boundaryGap: true,
// data: ['1号牛舍', '2号牛舍', '3号牛舍', '4号牛舍', '5号牛舍', '6号牛舍']
}
],
yAxis: [
{
type: 'value',
scale: true,
name: '运行时长',
// max: 1200,
// min: 0,
boundaryGap: [0.1, 0.1]
},
{
type: 'value',
scale: true,
name: '平均压力',
// max: 1200,
// min: 0,
boundaryGap: [0.1, 0.1]
}
],
series: [
{
name: '运行时长',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
barWidth: 20,
data: [100, 80, 90, 95, 85, 70]
},
{
name: '平均压力',
type: 'line',
data: [80, 70, 60, 66, 85, 90]
}
],
grid : {
left : '1%', // 组件离容器左侧的距离
right : '1%',
bottom : '0%',
top : '15%',
containLabel : true // grid 区域是否包含坐标轴的刻度标签
}
};
// const fieldRegionNameList = ['1号牛舍', '2号牛舍', '3号牛舍', '4号牛舍', '5号牛舍', '6号牛舍'];
// const runTimeList = [100, 80, 90, 95, 85, 70];
// const pressList = [10, 8, 9, 5, 8, 7];
// this.fanOptions.xAxis.data = fieldRegionNameList;
// this.fanOptions.series[0].data = runTimeList;
// this.fanOptions.series[1].data = pressList;
const charts = document.getElementById('fanChartsContent');
charts.style.width = window.innerWidth * 0.95 - 20 + 'px';
echarts.init(this.container1.nativeElement).setOption(this.fanOptions);
echarts.init(this.container1.nativeElement).resize();
}
showerChart() {
this.showerOptions = {
backgroundColor: '#fff',
color: ['#B2E8E8', '#cb595c'],
// title: {
// text: '动态数据',
// subtext: '纯属虚构'
// },
tooltip: {
trigger: 'axis',
// axisPointer: {
// type: 'cross',
// label: {
// backgroundColor: '#72efff'
// }
// }
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
label: 'cross',
show: true
},
},
legend: {
data: ['运行时长/小时', '平均压力/兆帕']
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data: ['1号牛舍', '2号牛舍', '3号牛舍', '4号牛舍', '5号牛舍', '6号牛舍'],
axisLabel: {
interval: 0,
rotate: 40
}
}
,
{
type: 'category',
boundaryGap: true,
// data: ['1号牛舍', '2号牛舍', '3号牛舍', '4号牛舍', '5号牛舍', '6号牛舍']
}
],
yAxis: [
{
type: 'value',
scale: true,
name: '运行时长',
// max: 1200,
// min: 0,
boundaryGap: [0.1, 0.1]
},
{
type: 'value',
scale: true,
name: '平均压力',
// max: 1200,
// min: 0,
boundaryGap: [0.1, 0.1]
}
],
series: [
{
name: '运行时长',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
barWidth: 20,
data: [100, 80, 90, 95, 85, 70]
},
{
name: '平均压力',
type: 'line',
data: [80, 70, 60, 66, 85, 90]
}
],
grid : {
left : '1%', // 组件离容器左侧的距离
right : '1%',
bottom : '0%',
top : '15%',
containLabel : true // grid 区域是否包含坐标轴的刻度标签
}
};
// const fieldRegionNameList = ['1号牛舍', '2号牛舍', '3号牛舍', '4号牛舍', '5号牛舍', '6号牛舍'];
// const runTimeList = [100, 80, 90, 95, 85, 70];
// const pressList = [10, 8, 9, 5, 8, 7];
// this.fanOptions.xAxis.data = fieldRegionNameList;
// this.fanOptions.series[0].data = runTimeList;
// this.fanOptions.series[1].data = pressList;
const charts = document.getElementById('showerChartsContent');
charts.style.width = window.innerWidth * 0.95 - 20 + 'px';
echarts.init(this.container2.nativeElement).setOption(this.showerOptions);
echarts.init(this.container2.nativeElement).resize();
}
environmentChart() {
this.chartOption = {
backgroundColor: '#F0F8FF',
visualMap: [{
show: false,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 400
}, {
show: false,
type: 'continuous',
seriesIndex: 1,
dimension: 0,
min: 0,
max: 400
}],
xAxis: {
type: 'category',
data: ['8', '7', '6', '5', '4', '3', '2', '1']
},
yAxis: [{
name: '温度(℃)',
type: 'value',
splitLine: {show: false}
},
{
name: '湿度(%)',
type: 'value',
max: 100,
splitLine: {show: false}
}],
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}, {
data: [15, 13, 12, 11, 12, 11, 87],
yAxisIndex: 1,
type: 'line'
}, {
data: [76, 45, 43, 23, 34, 54, 23],
yAxisIndex: 1,
type: 'line'
}]
};
// TODO 等待接口
// if (this.chartData && this.chartData[0] && this.chartData[0].dataList && this.chartData[0].dataList.length > 0) {
this.hasChartData = true;
// @ts-ignore
// this.tempAndHumiOptions = {
// backgroundColor: '#fff',
// tooltip: {
// // 鼠标悬停提示内容
// trigger: 'axis', // 触发类型，默认数据触发，可选为：'axis' item
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: 'line', // 默认为直线，可选为：'line' | 'shadow'
// label: 'cross',
// show: true
// },
// },
// xAxis: {
// type: 'category',
// axisTick: {
// show: false,
// },
// boundaryGap: false,
// axisLabel: {
// color: '#424242',
// // formatter:function(value) {
// // return value.substring();
// // }
// },
// axisLine: {
// lineStyle: {
// color: 'rgba(136,136,136,0.5)',
// width: 2,
// }
// },
// },
// yAxis: {
// type: 'value',
// axisTick: {
// show: true, // 显示刻度线
// },
// axisLabel: {
// color: '#424242' // y轴上的字体颜色
// },
// axisLine: {
// lineStyle: {
// width: 2,
// color: 'rgba(136,136,136,0.5)', // y轴的轴线的宽度和颜色
// }
// },
// splitLine: {
// show: true
// }
// },
// grid : {
// left : '1%', // 组件离容器左侧的距离
// right : '1%',
// bottom : '0%',
// top : '5%',
// containLabel : true // grid 区域是否包含坐标轴的刻度标签
// },
// series: [
// {
// name: '温度',
// type: 'line',
// symbol: 'none',
// smooth: false,
// itemStyle: {
// normal: {
// color: '#72efff',
// }
// },
// },
// {
// name: '湿度',
// type: 'line',
// symbol: 'none',
// smooth: false,
// itemStyle: {
// normal: {
// color: '#4f73ff',
// }
// },
// }
// ],
// };
this.tempAndHumiOptions = {
backgroundColor: '#fff',
tooltip: {
trigger: 'axis'
},
legend: {
data: ['温度(℃)', '湿度(% rH)']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
},
yAxis: [
{
type: 'value',
scale: true,
name: '温度(℃)',
// max: 1200,
// min: 0,
boundaryGap: [0.1, 0.1]
},
{
type: 'value',
scale: true,
name: '湿度(% rH)',
// max: 1200,
// min: 0,
boundaryGap: [0.1, 0.1]
}
],
series: [
{
name: '温度',
type: 'line',
yAxisIndex: 1,
data: [11, 12, 15, 16, 18, 21, 22, 25, 26, 26, 27, 29],
itemStyle: {
normal: {
color: '#B2E6E8',
}
},
},
{
name: '湿度',
type: 'line',
data: [78, 80, 76, 78, 70, 66, 68, 66, 70, 60, 64, 60],
itemStyle: {
normal: {
color: '#3C91AB',
}
},
}
],
grid : {
left : '5%', // 组件离容器左侧的距离
right : '5%',
bottom : '0%',
top : '15%',
containLabel : true // grid 区域是否包含坐标轴的刻度标签
},
};
const timeData = [1, 2, 3, 4, 5, 6, 7, 8];
const tempvalueData = [15, 18, 20, 22, 24, 26, 27, 29];
const humivalueData = [80, 82, 85, 81, 75, 70, 68, 65];
// this.chartData[0].dataList.forEach((item) => {
// // timeData.push(new Date(item.time).getHours());
// timeData.push( (new Date(item.time).getHours().toString()) );
// valueData.push(item.value);
// });
// this.tempAndHumiOptions.xAxis.data = timeData;
// this.tempAndHumiOptions.series[0].data = tempvalueData;
// this.tempAndHumiOptions.series[1].data = humivalueData;
const charts = document.getElementById('tempAndHumiChartsContent');
charts.style.width = window.innerWidth * 0.95 - 20 + 'px';
echarts.init(this.container3.nativeElement).setOption(this.tempAndHumiOptions);
echarts.init(this.container3.nativeElement).resize();
// }
}
segmentChanged(ev) {
}
toDetail(ev) {
const query = '/env-anal-detail';
this.tf.transfer({
url: '/' + ev.url,
query: query,
hash: ''
});
this.nav.navigateForward(query);
}
}
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