tcjlj/nezha
1
0
Fork 0
mirror of https://github.com/nezhahq/nezha.git synced 2025-02-02 09:38:13 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update network.html

Browse Source 
美化了三网延迟界面：
1. 将Marker缩小降低曲线遮挡
2. 设置为曲线对应的颜色使其更加直观
3. 设置Marker透明度降低对画面的影响
4. 将延迟极小值的Marker倒置显示以快速区别极大值
5. 将超过MaxTCPPingValue的点删除
6. 显示丢包分布（细线），以及服务器断流区间（粗线）
This commit is contained in:
xykt 2024-03-24 01:04:03 +08:00 committed by GitHub
parent 20a10ac6b8
commit a7d1bd7487
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
resource/template/theme-default/network.html vendored
View File

@ -185,19 +185,37 @@
parseMonitorInfo(monitorInfo) { parseMonitorInfo(monitorInfo) {
let tSeries = []; let tSeries = [];
let tLegendData = []; let tLegendData = [];
var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
let maxPing = 0;
for (let i = 0; i < monitorInfo.result.length; i++) { for (let i = 0; i < monitorInfo.result.length; i++) {
for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
maxPing = avgDelay;
}
}
}
for (let i = 0; i < monitorInfo.result.length; i++) {
var lcolor = lcolors[i % lcolors.length];
var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
let loss = 0; let loss = 0;
let data = []; let data = [];
let datal = [];
for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) { for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]); avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
if (avgDelay > 0.9 * MaxTCPPingValue) { if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
loss += 1
}
if (avgDelay > 0) {
data.push([monitorInfo.result[i].created_at[j], avgDelay]); data.push([monitorInfo.result[i].created_at[j], avgDelay]);
} }
else {
loss += 1;
datal.push([monitorInfo.result[i].created_at[j], maxPing]);
}
} }
lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1); lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
if (lossRate > 99) {
datal = [];
}
legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%"; legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
tLegendData.push(legendName); tLegendData.push(legendName);
tSeries.push({ tSeries.push({
@ -208,17 +226,31 @@
data: data, data: data,
markPoint: { markPoint: {
data: [ data: [
{ type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: '#f00' } }, { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
{ type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: '#0f0' } } { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
] ]
} }
}); });
tSeries.push({
name: legendName,
type: 'bar',
smooth: true,
symbol: 'none',
data: datal,
itemStyle: { color: rgbaColorBar }
});
} }
this.option.title.text = monitorInfo.result[0].server_name; this.option.title.text = monitorInfo.result[0].server_name;
this.option.series = tSeries; this.option.series = tSeries;
this.option.legend.data = tLegendData; this.option.legend.data = tLegendData;
this.myChart.clear(); this.myChart.clear();
this.myChart.setOption(this.option); this.myChart.setOption(this.option);
},
this.option.title.text = monitorInfo.result[0].server_name;
this.option.series = tSeries;
this.option.legend.data = tLegendData;
this.myChart.clear();
this.myChart.setOption(this.option);
}, },
isWindowsPlatform(str) { isWindowsPlatform(str) {
return str.includes('Windows') return str.includes('Windows')