Skip to content

S
smart
Commit 1fd7ce11 authored by wangqinghua's avatar wangqinghua
Browse files
Options

电压温度功率

parent 21a7c745
Show whitespace changes
Inline Side-by-side
Showing with 275 additions and 60 deletions
src/main/webapp/app/overAll/modal/server/server.component.html
View file @ 1fd7ce11
...@@ -109,37 +109,6 @@ ...@@ -109,37 +109,6 @@
</nz-col> </nz-col>
</nz-row> </nz-row>
</div> </div>
<div class="padding-10" style="height: 50%;position: relative">
<div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择指标"
(ngModelChange)="changeTrend(trendObj.type)" [(ngModel)]="trendObj.type">
<ng-container *ngFor="let flow of targetFlow">
<nz-option [nzLabel]="flow.label" [nzValue]="flow.value"></nz-option>
</ng-container>
</nz-select>
<nz-select style="width: 150px;" nzPlaceHolder="选择时间" [(ngModel)]="timeTypeTrend"
(ngModelChange)="changeTrend($event)">
<ng-container *ngFor="let time of timeList">
<nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
</ng-container>
</nz-select>
</div>
<div class="host-item-title">
风扇
</div>
<div class="host-item-content">
<ng-container *ngIf="!fanObj.noData">
<nz-spin [nzSpinning]="fanObj.isFanLoading">
<div echarts [options]="fanObj.fanOption" style="height:360px;width: 100%"></div>
</nz-spin>
</ng-container>
<ng-container *ngIf="fanObj.noData">
<div class="img-noData" style="min-height: 300px">
<div class="noData" title="暂无数据"></div>
</div>
</ng-container>
</div>
</div>
</nz-col> </nz-col>
<nz-col nzSpan="12"> <nz-col nzSpan="12">
<div class="padding-10" style="height: 50%;position: relative"> <div class="padding-10" style="height: 50%;position: relative">
...@@ -184,14 +153,43 @@ ...@@ -184,14 +153,43 @@
</nz-spin> </nz-spin>
</div> </div>
</div> </div>
<div class="padding-10" style="height: 40%;"> </nz-col>
</nz-row>
<nz-row> <nz-row>
<nz-col class="padding-right-10" nzSpan="12"> <nz-col nzSpan="8">
<div class="padding-10" style="position: relative">
<div class="host-item-title">
风扇
</div>
<div class="host-item-content" style="height: 330px;">
<ng-container *ngIf="!fanObj.noData">
<nz-spin [nzSpinning]="fanObj.isFanLoading">
<div echarts [options]="fanObj.fanOption" style="height:310px;width: 100%"></div>
</nz-spin>
</ng-container>
<ng-container *ngIf="fanObj.noData">
<div class="img-noData" style="min-height: 300px">
<div class="noData" title="暂无数据"></div>
</div>
</ng-container>
</div>
</div>
</nz-col>
<nz-col nzSpan="8">
<div class="padding-10">
<p class="host-item-title">温度</p> <p class="host-item-title">温度</p>
<div class="host-item-content" style="height: 300px;"> <div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择时间" [(ngModel)]="temObj.time"
(ngModelChange)="changeTemp($event)">
<ng-container *ngFor="let time of handware">
<nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
</ng-container>
</nz-select>
</div>
<div class="host-item-content" style="height: 330px;">
<ng-container *ngIf="!temObj.noData"> <ng-container *ngIf="!temObj.noData">
<nz-spin [nzSpinning]="temObj.isFanLoading"> <nz-spin [nzSpinning]="temObj.isTemLoading">
<div echarts [options]="temObj.fanOption" style="height:360px;width: 100%"></div> <div echarts [options]="temObj.temOption" style="height:310px;width: 100%"></div>
</nz-spin> </nz-spin>
</ng-container> </ng-container>
<ng-container *ngIf="temObj.noData"> <ng-container *ngIf="temObj.noData">
...@@ -200,13 +198,23 @@ ...@@ -200,13 +198,23 @@
</div> </div>
</ng-container> </ng-container>
</div> </div>
</div>
</nz-col> </nz-col>
<nz-col class="padding-left-10" nzSpan="12"> <nz-col nzSpan="8">
<div class="padding-10" >
<p class="host-item-title">电压与功率</p> <p class="host-item-title">电压与功率</p>
<div class="host-item-content" style="height: 300px;"> <div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择时间" [(ngModel)]="powerObj.time"
(ngModelChange)="changePower($event)">
<ng-container *ngFor="let time of handware">
<nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
</ng-container>
</nz-select>
</div>
<div class="host-item-content" style="height: 330px;">
<ng-container *ngIf="!powerObj.noData"> <ng-container *ngIf="!powerObj.noData">
<nz-spin [nzSpinning]="powerObj.isFanLoading"> <nz-spin [nzSpinning]="powerObj.isPowerLoading">
<div echarts [options]="powerObj.fanOption" style="height:360px;width: 100%"></div> <div echarts [options]="powerObj.powerOption" style="height:310px;width: 100%"></div>
</nz-spin> </nz-spin>
</ng-container> </ng-container>
<ng-container *ngIf="powerObj.noData"> <ng-container *ngIf="powerObj.noData">
...@@ -215,8 +223,6 @@ ...@@ -215,8 +223,6 @@
</div> </div>
</ng-container> </ng-container>
</div> </div>
</nz-col>
</nz-row>
</div> </div>
</nz-col> </nz-col>
</nz-row> </nz-row>
......
src/main/webapp/app/overAll/modal/server/server.component.ts
View file @ 1fd7ce11
...@@ -61,23 +61,38 @@ export class ServerComponent implements OnInit { ...@@ -61,23 +61,38 @@ export class ServerComponent implements OnInit {
fanObj = { fanObj = {
isFanLoading: false, isFanLoading: false,
fanOption: null, fanOption: null,
noData: false noData: false,
time: 2,
startTime: '',
endTime: ''
}; };
//温度 //温度
temObj = { temObj = {
isTemLoading: false, isTemLoading: false,
temOption: null, temOption: null,
noData: false noData: false,
time: '2',
startTime: '',
endTime: ''
}; };
//电压与功率 //电压与功率
powerObj = { powerObj = {
isPowerLoading: false, isPowerLoading: false,
powerOption: null, powerOption: null,
noData: false noData: false,
time: '2',
startTime: '',
endTime: ''
}; };
handware = [
{'label': '最近一天', value: '2'},
{'label': '最近7天', value: '4'},
{'label': '最近30天', value: '5'},
];
constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute, constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
private message: NzMessageService, private overAllSer: OverAllService, private message: NzMessageService, private overAllSer: OverAllService,
private hostCom: HostComponent) { private hostCom: HostComponent) {
...@@ -92,8 +107,10 @@ export class ServerComponent implements OnInit { ...@@ -92,8 +107,10 @@ export class ServerComponent implements OnInit {
this.changeHistory('0'); this.changeHistory('0');
this.changeTrend('0'); this.changeTrend('0');
this.getDisk(); this.getDisk();
this.getTep();
this.getFeng(); this.getFeng();
this.changePower('2');
this.changeTemp('2');
console.log('fang'); console.log('fang');
} }
...@@ -312,6 +329,7 @@ export class ServerComponent implements OnInit { ...@@ -312,6 +329,7 @@ export class ServerComponent implements OnInit {
this.isHistoryLoading = false; this.isHistoryLoading = false;
} }
//流量趋势时间
changeTrend(e) { changeTrend(e) {
this.isTrendLoading = true; this.isTrendLoading = true;
const timeObj = this.commonSer.getTimeByType(e); const timeObj = this.commonSer.getTimeByType(e);
...@@ -320,6 +338,7 @@ export class ServerComponent implements OnInit { ...@@ -320,6 +338,7 @@ export class ServerComponent implements OnInit {
this.getTrend(); this.getTrend();
} }
//历史时间
changeHistory(e) { changeHistory(e) {
this.isHistoryLoading = true; this.isHistoryLoading = true;
const timeObj = this.commonSer.getTimeByType(e); const timeObj = this.commonSer.getTimeByType(e);
...@@ -330,41 +349,231 @@ export class ServerComponent implements OnInit { ...@@ -330,41 +349,231 @@ export class ServerComponent implements OnInit {
//风扇 //风扇
getFeng() { getFeng() {
this.fanObj.isFanLoading = true;
const data = { const data = {
hostid: this.hostId hostid: this.hostId
}; };
this.overAllSer.getfan(data).subscribe( this.overAllSer.getfan(data).subscribe(
(res) => { (res) => {
if (res.result.length > 0) {
this.fanObj.noData = false;
this.setFanOption(res.result);
} else {
this.fanObj.noData = true;
this.fanObj.fanOption = null;
}
this.fanObj.isFanLoading = false;
} }
); );
} }
//电压与温度 //风扇图表
getTep() { setFanOption(data) {
this.fanObj.fanOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
},
yAxis: {
name: '风扇型号',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
type: 'category',
data: data.map(e => {
return e.name;
})
},
series: [
{
name: '转速',
type: 'bar',
data: data.map(e => {
return e.lastvalue;
})
}
]
};
}
//电压与功率时间
changePower(e) {
this.powerObj.isPowerLoading = true;
const timeObj = this.commonSer.getTimeByType(e);
this.powerObj.startTime = timeObj.startTime;
this.powerObj.endTime = timeObj.endTime;
this.getPower();
}
//电压与功率
getPower() {
const data = { const data = {
type: '1', type: '2',
hostid: this.hostId, hostid: this.hostId,
startTime: '2019-07-02 10:05:40', startTime: this.powerObj.startTime,
endTime: '2019-08-02 10:05:40' endTime: this.powerObj.endTime
}; };
this.overAllSer.getTemperature(data).subscribe( this.overAllSer.getTemperature(data).subscribe(
(res) => { (res1) => {
data.type = '3';
this.overAllSer.getTemperature(data).subscribe(
(res2) => {
if (res1.result.length == 0 && res2.result.length) {
this.powerObj.noData = true;
} else {
this.setPowerOption(res1.result, res2.result);
this.powerObj.noData = false;
}
this.powerObj.isPowerLoading = false;
} }
); );
data.type = '2';
this.overAllSer.getTemperature(data).subscribe(
(res) => {
} }
); );
data.type = '3';
}
setPowerOption(data1, data2) {
this.powerObj.powerOption = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['电压', '功率']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
boundaryGap: false,
data: data1.map(e => {
return e.date;
})
},
yAxis: {
name: '电压/功率',
type: 'value',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
},
series: [
{
name: '电压',
type: 'line',
stack: '总量',
data: data1.map(e => {
return e.value;
})
},
{
name: '功率',
type: 'line',
stack: '总量',
data: data2.map(e => {
return e.value;
})
}
]
};
}
//温度
changeTemp(e) {
this.temObj.isTemLoading = true;
const timeObj = this.commonSer.getTimeByType(e);
this.temObj.startTime = timeObj.startTime;
this.temObj.endTime = timeObj.endTime;
this.getTemp();
}
//温度
getTemp() {
const data = {
type: '1',
hostid: this.hostId,
startTime: this.temObj.startTime,
endTime: this.temObj.endTime
};
this.overAllSer.getTemperature(data).subscribe( this.overAllSer.getTemperature(data).subscribe(
(res) => { (res) => {
if (res.result.length > 0) {
this.temObj.noData = false;
this.setTemOption(res.result);
} else {
this.temObj.noData = true;
this.temObj.temOption = null;
}
this.temObj.isTemLoading = false;
} }
); );
}
setTemOption(data) {
this.temObj.temOption = {
xAxis: {
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
type: 'category',
data: data.map(e => {
return e.date;
})
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
name: '温度',
type: 'value',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
},
series: [{
data: data.map(e => {
return e.value;
}),
type: 'line'
}]
};
} }
......
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