OpenSource/hertzbeat
Public Access
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[webapp]小端页面自适应优化

Browse Source
This commit is contained in:
tomsun28
2022-01-30 10:16:23 +08:00
parent 5219474653
commit 4b57dcc970
8 changed files with 200 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
web-app/src/app/routes/dashboard/dashboard.component.ts
View File

@@ -4,6 +4,7 @@ import { I18NService } from '@core';
import { ALAIN_I18N_TOKEN } from '@delon/theme';
import { EChartsOption } from 'echarts';
import { NzMessageService } from 'ng-zorro-antd/message';
import { fromEvent } from 'rxjs';
import { MonitorService } from '../../service/monitor.service';
@@ -26,24 +27,112 @@ export class DashboardComponent implements OnInit, OnDestroy {
appsCountLoading: boolean = true;
appsCountTableData: any[] = [];
appsCountEChartOption!: EChartsOption;
appsCountTheme!: EChartsOption;
echartsInstance!: any;
pageResize$!: any;
ngOnInit(): void {
this.appsCountLoading = true;
this.appsCountTheme = {
title: {
text: '监控总览',
subtext: '监控类型纳管数量分布',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}个监控 占比({d}%)'
},
legend: {
show: false,
itemWidth: 80,
itemHeight: 20,
right: 0,
orient: 'vertical'
},
calculable: true,
series: [
{
name: '总量',
type: 'pie',
selectedMode: 'single',
color: '#722ED1',
radius: [0, '30%'],
label: {
position: 'center',
fontSize: 15,
color: '#ffffff',
fontStyle: 'oblique',
formatter: '{a}:{c}'
},
labelLine: {
show: false
},
data: [{ value: 0, name: '监控总量' }]
},
{
name: '纳管数量分布',
type: 'pie',
radius: ['45%', '65%'],
labelLine: {
length: 30
},
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
}
}
]
};
this.refresh();
this.appsCountLoading = false;
// https://stackoverflow.com/questions/43908009/why-is-setinterval-in-an-angular-service-only-firing-one-time
this.interval$ = setInterval(this.refresh.bind(this), 30000);
this.pageResize$ = fromEvent(window, 'resize').subscribe(event => {
this.resizeChart();
});
}
ngOnDestroy(): void {
clearInterval(this.interval$);
if (this.pageResize$) {
this.pageResize$.unsubscribe();
}
}
refresh(): void {
let dashboard$ = this.monitorSvc.getAppsMonitorSummary().subscribe(
message => {
dashboard$.unsubscribe();
if (message.code === 0) {
if (message.code === 0 && message.data.apps != undefined) {
// {app:'linux',size: 12}
let apps: any[] = message.data.apps;
this.appsCountTableData = [];
@@ -57,88 +146,16 @@ export class DashboardComponent implements OnInit, OnDestroy {
name: appName,
value: app.size
});
total = total + app.size ? app.size : 0;
total = total + (app.size ? app.size : 0);
});
this.appsCountEChartOption = {
title: {
text: '监控总览',
subtext: '监控类型纳管数量分布',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}个监控 占比({d}%)'
},
legend: {
itemWidth: 80,
itemHeight: 20,
right: 0,
orient: 'vertical'
},
calculable: true,
series: [
{
name: '总量',
type: 'pie',
selectedMode: 'single',
color: '#722ED1',
radius: [0, '30%'],
label: {
position: 'center',
fontSize: 15,
color: '#ffffff',
fontStyle: 'oblique',
formatter: '{a}:{c}'
},
labelLine: {
show: false
},
data: [{ value: total, name: '监控总量' }]
},
{
name: '纳管数量分布',
type: 'pie',
radius: ['45%', '65%'],
labelLine: {
length: 30
},
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
},
data: this.appsCountTableData
}
]
};
// @ts-ignore
this.appsCountTheme.series[0].data = [{ value: total, name: '监控总量' }];
// @ts-ignore
this.appsCountTheme.series[1].data = this.appsCountTableData;
this.appsCountEChartOption = this.appsCountTheme;
this.cdr.detectChanges();
} else {
this.appsCountEChartOption = this.appsCountTheme;
this.cdr.detectChanges();
}
},
@@ -157,4 +174,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
}
}
}
onChartInit(ec: any) {
this.echartsInstance = ec;
}
resizeChart() {
if (this.echartsInstance) {
this.echartsInstance.resize();
}
}
}