Buriburizaemon/nezha_domains
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha_domains.git synced 2026-02-04 20:50:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve: status-server主题network页 (#422)

Browse Source
This commit is contained in:
nap0o
2024-09-11 09:50:40 -04:00
committed by GitHub
parent f78ba281fb
commit f32f127dfc
10 changed files with 203 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
resource/template/theme-server-status/network.html vendored
View File

@@ -15,7 +15,7 @@
</li>
</ul>
</div>
<div class="chartTitle"><i class="chartCountryCode" :class="'fi fi-' + chartCountryCode"></i> @#chartTitle#@</div>
<div class="chartTitle" @click="showCharts(nextServerId)"><i class="chartCountryCode" :class="'fi fi-' + chartCountryCode"></i> @#chartTitle#@</div>
<div id="chartbox" style="width:100%;height:auto;"></div>
</div>
{{template "theme-server-status/footer" .}}
@@ -32,7 +32,8 @@
chartTitle: '',
chartCountryCode: '',
chart: null,
currentServerId: ''
currentServerId: '',
nextServerId: '',
},
mixins: [mixinsVue],
created() {
@@ -66,13 +67,13 @@
if(!this.chartDataList[id]) return;
if(this.chart) this.disposeCharts(this.chart);
this.currentServerId = id;
this.nextServerId = this.getNextServerId(id);
this.chartCountryCode = this.getServerCountryCode(id);
this.chartTitle = this.chartDataList[id][0].server_name;
const chartData = this.chartDataList[id];
const chartContainer = document.getElementById('chartbox');
// 定义图表参数值
const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
const autoheight = this.isMobile ? (window.innerHeight - 200) : (window.innerHeight - 250);
const autoheight = this.isMobile ? (window.innerHeight - 180) : (window.innerHeight - 250);
const fontSize = this.isMobile ? 10 : 14;
const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 36 : 42) : (this.isMobile ? 30 : 36);
const gridRight = this.isMobile ? 12 : 20;
@@ -86,18 +87,27 @@
const tooltipBorderColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.9)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,1)");
const lineStyleWidth = this.isMobile ? 1 : 2;
const splitLineWidth = this.isMobile ? 0.5 : 1;
const markPointSymbolSize = this.isMobile ? 30 : 42;
const markPointItemStyleOpacity = this.semiTransparent ? 1 : 0.9;
const markPointSymbolSize = this.isMobile ? 36 : 42;
const markPointItemStyleOpacity = this.semiTransparent ? 1 : 1;
const markPointFontSize = this.isMobile ? 8 : 10;
const markLineItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
const markLineLineStyleWidth = this.isMobile ? 0.15 : 0.3;
const showLoadingMaskColor = this.theme == "dark" ? 'rgba(0, 0, 0, 0)' : 'rgba(255, 255, 255, 0)';
const showLoadingTextColor = this.theme == "dark" ? 'rgba(241, 241, 241, 1)' : 'rgba(0, 0, 0, 1)';
const showLoadingColor = this.theme == "dark" ? '#D2B206' : '#FFDF32';
this.chart = echarts.init(chartContainer, chartTheme, { // init图表
renderer: 'canvas',
useDirtyRect: false,
width: 'auto',
height: autoheight,
});
// 获取图表数据
this.chart.showLoading({
text: 'loading',
textColor: showLoadingTextColor,
color: showLoadingColor,
maskColor: showLoadingMaskColor,
zlevel: 2
});
let legendData = [];
let seriesData = [];
chartData.forEach((item,key)=> {
@@ -112,9 +122,6 @@
loss += 1;
const lossrate = 100 * loss / (index + 1);
if(lossrate != 100) {
data['main'].push(
[item.created_at[index], MaxTCPPingValue, lossrate]
);
data['markLine'].push({
xAxis: item.created_at[index],
label: { show: false },
@@ -143,11 +150,9 @@
);
}
});
// 处理legendData
totalLossRate = ((loss / item.created_at.length) * 100).toFixed(1);
legendName = `${item.monitor_name} ${totalLossRate}%`;
legendData.push(legendName);
// 处理seriesData
seriesData.push(
{
name: legendName,
@@ -228,29 +233,22 @@
});
// 设置图表配置项
const option = {
// 全局调色盘
color: this.colors,
// 背景颜色
backgroundColor: backgroundColor,
// 文字样式
textStyle: {
fontSize: fontSize,
color: fontColor
},
// 图表网格设置
grid: {
top: gridTop,
left: gridLeft,
right: gridRight,
bottom: gridBottom
},
// 图表标题设置
title: {
show: false,
},
// 图表系列数据设置
series: seriesData.flat(),
// X轴设置
xAxis: {
type: 'time',
axisLabel: {
@@ -259,7 +257,6 @@
}
}
},
// Y轴设置
yAxis: {
type: 'value',
axisLabel: {
@@ -273,7 +270,6 @@
}
}
},
// 图例设置
legend: {
data: legendData,
show: true,
@@ -289,7 +285,6 @@
itemWidth: itemWidth,
itemHeight: itemHeight,
},
// 提示框设置
tooltip: {
trigger: 'axis',
backgroundColor: tooltipBackgroundColor,
@@ -312,7 +307,6 @@
return tooltipContent;
}
},
// 数据缩放设置
dataZoom: [
{
type: 'slider',
@@ -321,17 +315,16 @@
}
]
};
// 设置图表的配置选项
this.chart.setOption(option);
setTimeout(() => {
this.chart.hideLoading();
this.chart.setOption(option);
}, 1000);
},
reloadCharts() { // 重新加载所有图表
this.servers.forEach(node => {
const id = node.ID;
const chartData = this.chartDataList[id];
if (chartData) {
this.renderCharts(id,true);
}
});
reloadCharts() {
const chartData = this.chartDataList[this.currentServerId];
if (chartData) {
this.renderCharts(this.currentServerId,true);
}
},
disposeCharts(chart){
chart.dispose();
@@ -341,6 +334,16 @@
const result = this.servers.find(item => item.ID == id);
return result.Host.CountryCode ? result.Host.CountryCode : 'rb';
},
getNextServerId(id) {
const currentIndex = this.servers.findIndex(item => item.ID === id);
if (currentIndex === -1) {
return this.servers[0].ID;
}
// 判断是否有下一个元素
const nextIndex = currentIndex + 1;
// 如果有下一个元素，返回下一个元素的 ID；否则返回第一个元素的 ID
return nextIndex < this.servers.length ? this.servers[nextIndex].ID : this.servers[0].ID;
},
initSearch() {
$('#dropdown-search').on('keyup', function() {
var searchTerm = $(this).val().toLowerCase();