mirror of
https://github.com/nezhahq/nezha.git
synced 2025-01-23 05:08:13 -05:00
60ada33ee9
1. 首页通过在后台配置PublicNote字段，实现agent账单信息展示 2. 优化顶部导航，增加当前位置标识 3. 优化network页移动端样式 4. 优化后台server页展示，隐藏掉一些不重要的信息 5. 一些其他小优化 使用说明：https://github.com/naiba/nezha/pull/424#issuecomment-2386837658
1076 lines
49 KiB
HTML
Vendored
1076 lines
49 KiB
HTML
Vendored
{{define "theme-server-status/home"}}
|
||
{{template "theme-server-status/header" .}}
|
||
{{template "theme-server-status/menu" .}}
|
||
<!-- showGroup true -->
|
||
<template v-if="showGroup">
|
||
<div class="container-fluid table-responsive content" v-for="group in nodesTag">
|
||
{{template "theme-server-status/home-group-true" .}}
|
||
</div>
|
||
</template>
|
||
<!-- showGroup false -->
|
||
<template v-else>
|
||
<div class="container-fluid table-responsive content">
|
||
{{template "theme-server-status/home-group-false" .}}
|
||
</div>
|
||
</template>
|
||
<div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true" style="padding-left:0">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="mapChartTitle">
|
||
<i class="bi bi-geo-alt"></i>
|
||
<span>{{tr "ServersOnWorldMap"}}</span>
|
||
</h4>
|
||
<i class="bi bi-x xclose" data-dismiss="modal" aria-label="Close"></i>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="mapChart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{template "theme-server-status/footer" .}}
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
delimiters: ['@#', '#@'],
|
||
data: {
|
||
page: 'index',
|
||
defaultTemplate: {{.Conf.Site.Theme}},
|
||
templates: {{.Themes}},
|
||
cache: [],
|
||
servers: [],
|
||
nodesTag: [],
|
||
nodesNoTag: [],
|
||
additional: {},
|
||
chartDataList: [],
|
||
ws: null,
|
||
language: {{.Conf.Language}},
|
||
countryMap: {},
|
||
countryServer: [],
|
||
countryNameMap: {},
|
||
countryMapChartData: [],
|
||
countryMapGeoFile: localStorage.getItem("countryMapGeoFile") ? localStorage.getItem("countryMapGeoFile") : 'nezha.world.geo.json',
|
||
sensorList: [
|
||
'TC0D', //CPU Die 温度，代表 CPU 内部的温度
|
||
'TC0H', //CPU Heatsink 温度，代表 CPU 散热器的温度
|
||
'TC0P', //CPU Proximity 温度，代表 CPU 附近的温度
|
||
'k10temp', //AMD K10（Phenom、Athlon、Sempron 等）系列处理器的温度监测
|
||
'k10temp_tctl', //AMD K10 (Athlon II、Phenom II 等）系列处理器的温度监测
|
||
'coretemp_package_id_0', //整个封装处理器温度
|
||
'cpu_thermal_zone', //全志
|
||
'cpu-thermal', //树莓派(博通)
|
||
'soc_thermal', //新瑞芯微
|
||
'cpu_thermal', //老瑞芯微
|
||
'ACPI\\ThermalZone\\TZ0__0', //Windows
|
||
'ACPI\\ThermalZone\\CPUZ_0', //Windows
|
||
'ACPI\\ThermalZone\\TZ00_0', //Windows
|
||
'ACPI\\ThermalZone\\TZ001_0', //Windows
|
||
'ACPI\\ThermalZone\\THM0_0' //Windows
|
||
]
|
||
},
|
||
mixins: [mixinsVue],
|
||
created() {
|
||
this.servers = JSON.parse('{{.Servers}}').servers;
|
||
if(this.showGroup) {
|
||
this.nodesTag = this.groupingData(this.handleNodes(this.servers),"Tag");
|
||
} else {
|
||
this.nodesNoTag = this.handleNodes(this.servers);
|
||
}
|
||
this.initCountryMap().then(countryMap => {
|
||
this.countryMap = countryMap;
|
||
this.countryNameMap = this.initCountryNameMap();
|
||
this.countryServer = this.initCountryServer();
|
||
this.countryMapChartData = this.initCountryMapChartData();
|
||
});
|
||
this.additional = this.initAdditional(this.servers);
|
||
},
|
||
mounted() {
|
||
// 初始化时建立WebSocket连接
|
||
this.connect();
|
||
// 监听页面可见性变化
|
||
document.addEventListener("visibilitychange", () => {
|
||
if (document.visibilityState === "visible") {
|
||
setTimeout(() => {
|
||
if (document.hasFocus()) {
|
||
this.connect();
|
||
}
|
||
}, 200);
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
initAdditional(servers) {
|
||
let nodes = {};
|
||
servers?.forEach(server => {
|
||
if(server.PublicNote) {
|
||
nodes[server.ID] = {
|
||
"remaining": {
|
||
format: this.getRemainingFormat(server.live, server.PublicNote),
|
||
days: this.getRemainingDays(this.getNoteElementValue(server.PublicNote, "billingDataMod", "endDate"),server.PublicNote),
|
||
percent: this.toFixed2(100 - this.getRemainingPercent(this.getNoteElementValue(server.PublicNote, "billingDataMod", "startDate"), this.getNoteElementValue(server.PublicNote, "billingDataMod", "endDate"), server.PublicNote))
|
||
},
|
||
"price": {
|
||
amount: this.getNoteElementValue(server.PublicNote, "billingDataMod", "amount"),
|
||
cycle: this.getNoteElementValue(server.PublicNote, "billingDataMod", "cycle")
|
||
}
|
||
};
|
||
}
|
||
});
|
||
return nodes;
|
||
},
|
||
initCountryMap() {
|
||
return fetch(this.staticUrl + '/maps/nezha.countrymap.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
return data;
|
||
})
|
||
},
|
||
initCountryNameMap(){
|
||
const result = {};
|
||
for (const item in this.countryMap) {
|
||
result[this.countryMap[item].en] = this.language=='zh-CN' ? this.countryMap[item].zh : this.countryMap[item].en;
|
||
}
|
||
return result;
|
||
},
|
||
initCountryServer() {
|
||
let count = {};
|
||
let result = [];
|
||
let exist = {};
|
||
this.servers.forEach(item => {
|
||
if (item.Host.CountryCode) {
|
||
if(this.countryMapGeoFile == 'nezha.world.geo.json' || this.countryMapGeoFile == 'nezha.world.antarctica.geo.json') {
|
||
if(item.Host.CountryCode.toLowerCase() == 'tw' || item.Host.CountryCode.toLowerCase() == 'hk' || item.Host.CountryCode.toLowerCase() == 'mo') item.Host.CountryCode = 'cn';
|
||
}
|
||
if (!exist[item.Host.CountryCode]) {
|
||
exist[item.Host.CountryCode] = true;
|
||
count[item.Host.CountryCode] = 1;
|
||
const obj = {
|
||
'countryCode': item.Host.CountryCode,
|
||
'count': count[item.Host.CountryCode]
|
||
};
|
||
result.push(obj);
|
||
} else {
|
||
count[item.Host.CountryCode]++;
|
||
result.find(obj => obj.countryCode === item.Host.CountryCode).count = count[item.Host.CountryCode];
|
||
}
|
||
}
|
||
});
|
||
return result;
|
||
},
|
||
initCountryMapChartData(){
|
||
let result = [];
|
||
this.countryServer.forEach(item => {
|
||
var obj = {
|
||
"name": this.language=='zh-CN' ? this.countryMap[item.countryCode].zh : this.countryMap[item.countryCode].en,
|
||
"value": item.count
|
||
}
|
||
result.push(obj);
|
||
});
|
||
return result;
|
||
},
|
||
showMapChart(){
|
||
// 处理异常
|
||
if( this.countryMapChartData.length == 0 ) {
|
||
console.log('init countryMapChartData not complete');
|
||
return;
|
||
}
|
||
const unit = this.language=='zh-CN' ? '台' : 'servers';
|
||
const width = window.innerWidth;
|
||
const height = 0.95 * window.innerHeight;
|
||
const backgroundColor = this.theme == "dark" ? '' : '';
|
||
const inRangeColor = this.theme == "dark" ? '#D2B206' : '#FFDF32';
|
||
const tooltipBackgroundColor = this.theme == "dark" ? "#ffffff" : '#ffffff';
|
||
const tooltipBorderColor = this.theme == "dark" ? "#ffffff" : "#ffffff";
|
||
const fontSize = this.isMobile ? 10 : 12;
|
||
const fontColor = this.theme == "dark" ? "#000000" : "#000000";
|
||
const showLoadingMaskColor = this.theme == "dark" ? 'rgba(28, 29, 38, 1)' : 'rgba(249, 249, 249, 1)';
|
||
const showLoadingTextColor = this.theme == "dark" ? 'rgba(241, 241, 241, 1)' : 'rgba(0, 0, 0, 1)';
|
||
const showLoadingColor = inRangeColor;
|
||
const chartContainer = document.getElementById('mapChart');
|
||
const mapChart = echarts.init(chartContainer, '', { // init图表
|
||
renderer: 'canvas',
|
||
useDirtyRect: false,
|
||
width: width,
|
||
height: height,
|
||
});
|
||
mapChart.showLoading({
|
||
text: 'loading',
|
||
textColor: showLoadingTextColor,
|
||
color: showLoadingColor,
|
||
maskColor: showLoadingMaskColor,
|
||
zlevel: 2
|
||
});
|
||
fetch(this.staticUrl + '/maps/' + this.countryMapGeoFile)
|
||
.then(response => response.json())
|
||
.then(worldMap => {
|
||
echarts.registerMap('nezha-world-map', worldMap);
|
||
const option = {
|
||
title: {
|
||
show: false,
|
||
},
|
||
backgroundColor: backgroundColor,
|
||
grid: {
|
||
top: 0,
|
||
left: 10,
|
||
right: 10
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function (params) {
|
||
if (params.data && params.data.value > 0) {
|
||
return params.name + ' ' + params.data.value + ' ' + unit;
|
||
} else {
|
||
return '';
|
||
}
|
||
},
|
||
backgroundColor: tooltipBackgroundColor,
|
||
borderColor: tooltipBorderColor,
|
||
padding: [4,10],
|
||
textStyle: {
|
||
fontSize: fontSize,
|
||
color: fontColor
|
||
}
|
||
},
|
||
visualMap: {
|
||
show: false,
|
||
min: 0,
|
||
max: 1000,
|
||
calculable: false,
|
||
inRange: {
|
||
color: inRangeColor
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'map',
|
||
map: 'nezha-world-map',
|
||
roam: true,
|
||
label: {
|
||
show: false,
|
||
fontSize: 8
|
||
},
|
||
data: this.countryMapChartData,
|
||
nameMap: this.countryNameMap,
|
||
}
|
||
]
|
||
};
|
||
setTimeout(() => {
|
||
mapChart.hideLoading();
|
||
mapChart.setOption(option);
|
||
}, 1000);
|
||
});
|
||
},
|
||
isWindowsPlatform(str) {
|
||
return str.includes('Windows')
|
||
},
|
||
getPlatformName(str){
|
||
if (str.toLowerCase().includes('opensuse')) {
|
||
return 'openSUSE';
|
||
}
|
||
return str;
|
||
},
|
||
getFontLogoClass(str) {
|
||
if (["almalinux",
|
||
"alpine",
|
||
"aosc",
|
||
"apple",
|
||
"archlinux",
|
||
"archlabs",
|
||
"artix",
|
||
"budgie",
|
||
"centos",
|
||
"coreos",
|
||
"debian",
|
||
"deepin",
|
||
"devuan",
|
||
"docker",
|
||
"elementary",
|
||
"fedora",
|
||
"ferris",
|
||
"flathub",
|
||
"freebsd",
|
||
"gentoo",
|
||
"gnu-guix",
|
||
"illumos",
|
||
"kali-linux",
|
||
"linuxmint",
|
||
"mageia",
|
||
"mandriva",
|
||
"manjaro",
|
||
"nixos",
|
||
"openbsd",
|
||
"opensuse",
|
||
"pop-os",
|
||
"raspberry-pi",
|
||
"redhat",
|
||
"rocky-linux",
|
||
"sabayon",
|
||
"slackware",
|
||
"snappy",
|
||
"solus",
|
||
"tux",
|
||
"ubuntu",
|
||
"void",
|
||
"zorin"].indexOf(str)
|
||
> -1) {
|
||
return str;
|
||
}
|
||
if (str == 'darwin') {
|
||
return 'apple';
|
||
}
|
||
if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) {
|
||
return 'tux';
|
||
}
|
||
if (str == 'amazon') {
|
||
return 'redhat';
|
||
}
|
||
if (str == 'arch') {
|
||
return 'archlinux';
|
||
}
|
||
if (str.toLowerCase().includes('opensuse')) {
|
||
return 'opensuse';
|
||
}
|
||
return '';
|
||
},
|
||
secondToDate(s) {
|
||
const d = Math.floor(s / 3600 / 24);
|
||
if (d > 0) {
|
||
return d + ' {{tr "Day"}}'
|
||
}
|
||
const h = Math.floor(s / 3600 % 24);
|
||
const m = Math.floor(s / 60 % 60);
|
||
const second = Math.floor(s % 60);
|
||
return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + second).slice(-2);
|
||
},
|
||
formatTimestamp(t) {
|
||
return new Date(t * 1000).toLocaleString()
|
||
},
|
||
formatByteSize(bs) {
|
||
const x = this.readableBytes(bs)
|
||
return x !== "NaN undefined" ? x : '0B'
|
||
},
|
||
formatPercent(live, used, total) {
|
||
//const percent = live ? (this.toFixed2(used / total * 100) || 0) : 0
|
||
const percent = (this.toFixed2(used / total * 100) || 0)
|
||
return this.formatPercents(live,percent)
|
||
},
|
||
formatPercents(live,percent) {
|
||
//if(!live) { percent = 0; }
|
||
if (isNaN(percent)) {
|
||
percent = 0;
|
||
}
|
||
if (percent <= 0) {
|
||
percent = 0;
|
||
}
|
||
if (percent >= 100) {
|
||
percent = 100;
|
||
}
|
||
if (!this.cache[percent]) {
|
||
this.cache[percent] = {
|
||
class: 'progress-bar progress-bar-success',
|
||
style: `width: ${parseInt(percent)+1}%`,
|
||
percent,
|
||
}
|
||
if (percent < 80) {
|
||
this.cache[percent].class = 'progress-bar progress-bar-success'
|
||
} else if (percent < 90) {
|
||
this.cache[percent].class = 'progress-bar progress-bar-warning'
|
||
} else {
|
||
this.cache[percent].class = 'progress-bar progress-bar-danger'
|
||
}
|
||
}
|
||
return this.cache[percent]
|
||
},
|
||
readableBytes(bytes) {
|
||
if (!bytes) {
|
||
return '0B'
|
||
}
|
||
const i = Math.floor(Math.log(bytes) / Math.log(1024)),
|
||
sizes = ["B", "K", "M", "G", "T", "P", "E", "Z", "Y"];
|
||
return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
|
||
},
|
||
connect() {
|
||
// 如果已经存在 WebSocket 连接并且处于开启状态，则不重复建立连接
|
||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||
console.log('Closing old WebSocket connection...');
|
||
this.ws.close();
|
||
}
|
||
const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
|
||
this.ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
|
||
|
||
this.ws.onopen = function () {
|
||
console.log("Connection open ...")
|
||
}
|
||
this.ws.onmessage = (evt) => {
|
||
let jsonData = evt.data
|
||
const data = JSON.parse(jsonData)
|
||
for (let i = 0; i < data.servers?.length; i++) {
|
||
const ns = data.servers[i];
|
||
if (!ns.Host) {
|
||
data.servers[i].live = false
|
||
} else {
|
||
const lastActive = new Date(ns.LastActive).getTime()
|
||
data.servers[i].live = data.now - lastActive <= 10 * 1000;
|
||
}
|
||
}
|
||
if(this.showGroup) {
|
||
this.nodesTag = this.groupingData(this.handleNodes(data.servers),"Tag");
|
||
} else {
|
||
this.nodesNoTag = this.handleNodes(data.servers);
|
||
}
|
||
}
|
||
this.ws.onclose = () => {
|
||
setTimeout(() => {
|
||
this.connect();
|
||
}, 5000);
|
||
};
|
||
this.ws.onerror = () => {
|
||
this.ws.close()
|
||
}
|
||
},
|
||
handleNodes(servers) {
|
||
let nodes = []
|
||
servers?.forEach(server => {
|
||
let platform = server.Host.Platform;
|
||
if (this.isWindowsPlatform(platform)) {
|
||
platform = "windows"
|
||
}else if (platform === "immortalwrt") {
|
||
platform = "openwrt"
|
||
}
|
||
let node = {
|
||
ID: server.ID,
|
||
name: server.Name,
|
||
os: platform,
|
||
location: server.Host.CountryCode,
|
||
stateuptime: server.State.Uptime,
|
||
uptime: this.secondToDate(server.State.Uptime),
|
||
load: this.toFixed2(server.State.Load1),
|
||
network: this.getNetworkSpeed(server.State.NetInSpeed, server.State.NetOutSpeed),
|
||
traffic: this.formatByteSize(server.State.NetInTransfer) + ' | ' + this.formatByteSize(server.State.NetOutTransfer),
|
||
cpu: this.formatPercents(server.live, this.toFixed2(server.State.CPU)),
|
||
memory: this.formatPercent(server.live, server.State.MemUsed, server.Host.MemTotal),
|
||
hdd: this.formatPercent(server.live, server.State.DiskUsed, server.Host.DiskTotal),
|
||
online: server.live,
|
||
state: server.State,
|
||
host: server.Host,
|
||
lastActive: server.LastActive,
|
||
Tag: server.Tag,
|
||
}
|
||
nodes.push(node)
|
||
})
|
||
return nodes;
|
||
},
|
||
getNetworkSpeed(netInSpeed, netOutSpeed) {
|
||
return this.formatByteSize(netInSpeed) + ' | ' + this.formatByteSize(netOutSpeed)
|
||
},
|
||
toggleDetailedTemp(id){
|
||
const tempDom = document.getElementById(`temp-${id}`);
|
||
const tempDetailShow = tempDom.getAttribute('temp-detail-show');
|
||
const tempMain = document.getElementById(`temp-main-${id}`);
|
||
const tempDetail = document.getElementById(`temp-detail-${id}`);
|
||
if (tempDetailShow == 0){
|
||
tempMain.style.display = 'none';
|
||
tempDetail.style.display = 'inline';
|
||
tempDom.setAttribute('temp-detail-show', 1);
|
||
} else {
|
||
tempMain.style.display = 'inline';
|
||
tempDetail.style.display = 'none';
|
||
tempDom.setAttribute('temp-detail-show', 0);
|
||
}
|
||
},
|
||
getTemperature(temperatureList, sensorList) {
|
||
// 将 sensorList 中的所有项转换为小写
|
||
const lowerCaseSensorList = sensorList.map(sensor => sensor.toLowerCase());
|
||
|
||
// 合并过滤逻辑：过滤出 Temperature 不为 0 且 Name 在 sensorList 中的元素（忽略大小写）
|
||
const filtered = temperatureList.filter(item => item.Temperature !== 0 && lowerCaseSensorList.includes(item.Name.toLowerCase()));
|
||
|
||
// 如果有匹配的元素，则计算这些元素的 Temperature 的最大值
|
||
if (filtered.length > 0) {
|
||
return filtered.reduce((max, current) => {
|
||
return current.Temperature > max ? current.Temperature : max;
|
||
}, filtered[0].Temperature);
|
||
}
|
||
|
||
// 如果没有匹配的元素，则计算 temperatureList 中所有 Temperature 不为 0 的元素的最大值
|
||
const nonZeroTemps = temperatureList.filter(item => item.Temperature !== 0);
|
||
if (nonZeroTemps.length > 0) {
|
||
return nonZeroTemps.reduce((max, current) => {
|
||
return current.Temperature > max ? current.Temperature : max;
|
||
}, nonZeroTemps[0].Temperature);
|
||
}
|
||
|
||
// 如果所有元素的 Temperature 都为 0，则返回一个默认值 0
|
||
return 0;
|
||
},
|
||
showCharts(id,changeChartboxShow=true) {
|
||
const chartContainer = document.getElementById(`chart-${id}`);
|
||
if(changeChartboxShow){
|
||
const chartboxShow = chartContainer.getAttribute('chartbox-show');
|
||
chartContainer.setAttribute('chartbox-show', chartboxShow === '0' ? '1' : '0');
|
||
const collapseContainer = document.getElementById(`r${id}`);
|
||
const isAriaExpandedFalse = collapseContainer.getAttribute('aria-expanded') === 'false';
|
||
if (!isAriaExpandedFalse) return;
|
||
}
|
||
// 发起数据请求
|
||
const url = `/api/v1/monitor/${id}`;
|
||
fetch(url)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.result) { // 数据请求成功，更新数据并渲染图表
|
||
this.chartDataList[id] = data.result;
|
||
this.$nextTick(() => {
|
||
this.renderCharts(id);
|
||
});
|
||
} else {
|
||
console.log('this server (id:'+ id + ') has no monitor.');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error fetching data:', error);
|
||
});
|
||
},
|
||
renderCharts(id, reload = false) {
|
||
if (!this.chartDataList[id]) return;
|
||
const chartData = this.chartDataList[id];
|
||
const chartContainer = document.getElementById(`chart-${id}`);
|
||
if (reload) {
|
||
const existingChart = echarts.getInstanceByDom(chartContainer);
|
||
if (existingChart) existingChart.dispose();
|
||
const chartboxShow = chartContainer.getAttribute('chartbox-show');
|
||
if ( chartboxShow === '0' ) return;
|
||
}
|
||
const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
|
||
const fontSize = this.isMobile ? 10 : 14;
|
||
const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 36 : 42) : (this.isMobile ? 25 : 36);
|
||
const gridRight = this.isMobile ? 5 : 20;
|
||
const legendLeft = this.isMobile ? 'center' : 'center';
|
||
const legendTop = this.isMobile ? 5 : 5;
|
||
const legendPadding= this.isMobile ? [5,0,5,0] : [5,0,5,0];
|
||
const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||
const theme = localStorage.getItem("theme") ? localStorage.getItem("theme") : systemDarkMode;
|
||
const chartTheme = this.theme == "dark" ? "dark" : "default";
|
||
const fontColor = this.theme == "dark" ? "#f1f1f1" : "#000000";
|
||
const backgroundColor = theme == "dark" ? '' : '';
|
||
const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)");
|
||
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 markLineItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
|
||
const markLineLineStyleWidth = this.isMobile ? 0.15 : 0.3;
|
||
const chart = echarts.init(chartContainer, chartTheme, { // init图表
|
||
renderer: 'canvas',
|
||
useDirtyRect: false,
|
||
width: 'auto',
|
||
height: 300
|
||
});
|
||
let legendData = [];
|
||
let seriesData = [];
|
||
chartData.forEach((item,key)=> {
|
||
let loss = 0;
|
||
let totalLossRate = 0;
|
||
let legendName = '';
|
||
let data = { main: [], markLine: []};
|
||
item.avg_delay.forEach((avgDelay, index) => {
|
||
const threshold = 0.9 * MaxTCPPingValue; // 定义阀值,用于判断是否丢包
|
||
// 定义丢包 1. avgDelay==0 2. avgDelay>=MaxTCPPingValue 3. avgDelay>=threshold
|
||
if(avgDelay == 0 || avgDelay >= MaxTCPPingValue){ //绝对丢包
|
||
loss += 1;
|
||
const lossrate = 100 * loss / (index + 1);
|
||
if(lossrate != 100) {
|
||
data['markLine'].push({
|
||
xAxis: item.created_at[index],
|
||
label: { show: false },
|
||
emphasis: { disabled: true },
|
||
lineStyle: { type: "solid" }
|
||
});
|
||
}
|
||
} else if (avgDelay >= threshold && avgDelay < MaxTCPPingValue){ // 相对丢包
|
||
loss += 1;
|
||
const lossrate = 100 * loss / (index + 1);
|
||
if(lossrate != 100) {
|
||
data['main'].push(
|
||
[item.created_at[index], avgDelay, lossrate]
|
||
);
|
||
data['markLine'].push({
|
||
xAxis: item.created_at[index],
|
||
label: { show: false },
|
||
emphasis: { disabled: true },
|
||
lineStyle: { type: "solid" }
|
||
});
|
||
}
|
||
} else { // 未丢包
|
||
const lossrate = 100 * loss / (index + 1);
|
||
data['main'].push(
|
||
[item.created_at[index], avgDelay, lossrate]
|
||
);
|
||
}
|
||
});
|
||
totalLossRate = ((loss / item.created_at.length) * 100).toFixed(1);
|
||
legendName = `${item.monitor_name} ${totalLossRate}%`;
|
||
legendData.push(legendName);
|
||
seriesData.push(
|
||
{
|
||
name: legendName,
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'none',
|
||
connectNulls: true,
|
||
legendHoverLink: false,
|
||
emphasis: {
|
||
disabled: true
|
||
},
|
||
lineStyle: {
|
||
width: lineStyleWidth
|
||
},
|
||
data: data['main'],
|
||
markLine: {
|
||
symbol: "none",
|
||
symbolSize :0,
|
||
data: data['markLine'],
|
||
itemStyle: {
|
||
opacity: markLineItemStyleOpacity
|
||
},
|
||
lineStyle:{
|
||
width: markLineLineStyleWidth
|
||
}
|
||
}
|
||
}
|
||
);
|
||
});
|
||
const maxLegendsPerRowMobile = localStorage.getItem("maxLegendsPerRowMobile") ? localStorage.getItem("maxLegendsPerRowMobile") : 3;
|
||
const maxLegendsPerRowPc = localStorage.getItem("maxLegendsPerRowPc") ? localStorage.getItem("maxLegendsPerRowPc") : 6;
|
||
const autoIncrement = Math.floor((legendData.length - 1) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 20 : 28);
|
||
const height = 300 + autoIncrement;
|
||
const gridTop = 40 + autoIncrement;
|
||
const legendIcon = this.isMobile ? 'rect' : "";
|
||
const itemWidth = this.isMobile ? 10 : 25;
|
||
const itemHeight = this.isMobile ? 10 : 14;
|
||
chart.resize({
|
||
width: 'auto',
|
||
height: height
|
||
});
|
||
const option = {
|
||
color: this.colors,
|
||
backgroundColor: backgroundColor,
|
||
textStyle: {
|
||
fontSize: fontSize,
|
||
color: fontColor
|
||
},
|
||
grid: {
|
||
top: gridTop,
|
||
left: gridLeft,
|
||
right: gridRight,
|
||
},
|
||
title: {
|
||
show: false,
|
||
},
|
||
series: seriesData.flat(),
|
||
xAxis: {
|
||
type: 'time',
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontSize: fontSize
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontSize: fontSize
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
width: splitLineWidth
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: legendData,
|
||
show: true,
|
||
icon: legendIcon,
|
||
textStyle: {
|
||
fontSize: fontSize,
|
||
color: fontColor
|
||
},
|
||
top: legendTop,
|
||
bottom: 0,
|
||
left: legendLeft,
|
||
padding: legendPadding,
|
||
itemWidth: itemWidth,
|
||
itemHeight: itemHeight,
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: tooltipBackgroundColor,
|
||
borderColor: tooltipBorderColor,
|
||
textStyle: {
|
||
fontSize: fontSize,
|
||
color: fontColor
|
||
},
|
||
formatter: function (params) {
|
||
let tooltipContent = '';
|
||
const formattedTime = new Date(params[0].value[0]).toLocaleString();
|
||
tooltipContent += `<span style="line-height:2em">${formattedTime}</span><br>`;
|
||
params.forEach(param => {
|
||
const formattedTime = new Date(param.value[0]).toLocaleString();
|
||
if (!param.seriesName.includes('stack')) {
|
||
const name = param.seriesName.replace(/\s\d+(\.\d+)?%$/, '');
|
||
tooltipContent += `<span style="line-height:2em">${param.marker} ${name} ${param.value[2].toFixed(1)}% ${param.value[1].toFixed(2)}</span><br>`;
|
||
}
|
||
});
|
||
return tooltipContent;
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
start: 0,
|
||
end: 100
|
||
}
|
||
]
|
||
};
|
||
chart.setOption(option);
|
||
},
|
||
reloadCharts() {
|
||
this.servers.forEach(node => {
|
||
const id = node.ID;
|
||
const chartData = this.chartDataList[id];
|
||
if (chartData) {
|
||
this.renderCharts(id,true);
|
||
}
|
||
});
|
||
},
|
||
getNoteElementValue(string, elementName, childElementName) {
|
||
let obj;
|
||
|
||
try {
|
||
obj = JSON.parse(string);
|
||
} catch (e) {
|
||
return null;
|
||
}
|
||
|
||
if (!elementName) return null;
|
||
|
||
if (childElementName) {
|
||
return obj[elementName] && childElementName in obj[elementName] ? obj[elementName][childElementName] : null;
|
||
} else {
|
||
return elementName in obj ? obj[elementName] : null;
|
||
}
|
||
},
|
||
getBillingCycle(billingCycle) {
|
||
// 统一转换为小写进行比较
|
||
const cycle = billingCycle.toLowerCase();
|
||
|
||
switch (cycle) {
|
||
case '月':
|
||
case 'month':
|
||
case 'monthly':
|
||
case 'm':
|
||
return "M";
|
||
case '季':
|
||
case 'quarterly':
|
||
case 'q':
|
||
return "Q";
|
||
case '半':
|
||
case '半年':
|
||
case 'half':
|
||
case 'semi-annually':
|
||
case 'h':
|
||
return "H";
|
||
case '年':
|
||
case 'year':
|
||
case 'annually':
|
||
case 'y':
|
||
return "Y";
|
||
default:
|
||
return null;
|
||
}
|
||
},
|
||
getAdjustTimezone(reference, target) {
|
||
// 获取时区
|
||
const referenceTimezoneOffset = reference.getTimezoneOffset();
|
||
const targetTimezoneOffset = target.getTimezoneOffset();
|
||
|
||
// 计算时区差异
|
||
const timezoneDifference = (referenceTimezoneOffset - targetTimezoneOffset) * 60 * 1000;
|
||
|
||
// 将 target 日期调整到 reference 时区
|
||
return new Date(target.getTime() + timezoneDifference);
|
||
},
|
||
getAutoRenewalEndDate(endDate, billingCycle) {
|
||
const expiration = new Date(endDate);
|
||
const current = this.getAdjustTimezone(new Date(endDate), new Date());
|
||
|
||
// 如果 expiration 无效，返回 null 并记录日志
|
||
if (isNaN(expiration.getTime())) {
|
||
console.error("getAutoRenewalEndDate: Invalid expiration format");
|
||
}
|
||
|
||
const result = {
|
||
flag: 1, // 1表示需要更新
|
||
check: 0, // 判断逻辑标记
|
||
count: 0 // 周期累计计数
|
||
};
|
||
|
||
// 如果当前时间还没到到期时间，直接返回到期时间
|
||
if (current < expiration) {
|
||
result.flag = 0;
|
||
result.date = expiration;
|
||
return result;
|
||
}
|
||
|
||
let nextExpiration = new Date(expiration); // 初始化为原到期时间
|
||
let newExpirationMonth = expiration.getMonth(); // 获取expiration初始月份
|
||
|
||
switch (billingCycle.toUpperCase()) {
|
||
case 'M': // 月度
|
||
nextExpiration.setFullYear(current.getFullYear());
|
||
|
||
const monthCheck = current < new Date(current.getFullYear(), current.getMonth(), expiration.getDate());
|
||
|
||
// 检查当前月是否在有效期内
|
||
if (monthCheck) {
|
||
nextExpiration.setMonth(current.getMonth());
|
||
result.check = 1;
|
||
} else {
|
||
nextExpiration.setMonth(current.getMonth() + 1);
|
||
result.check = 2;
|
||
}
|
||
break;
|
||
|
||
case 'Q': // 季度
|
||
nextExpiration.setFullYear(current.getFullYear());
|
||
|
||
// 每次增加 3 个月，直到新的月份大于当前月份
|
||
while (newExpirationMonth < current.getMonth()) {
|
||
newExpirationMonth += 3;
|
||
result.count += 1;
|
||
}
|
||
|
||
// nextExpiration设置获取到的新月份
|
||
nextExpiration.setMonth(newExpirationMonth);
|
||
|
||
const quarterlyCheck = current < nextExpiration;
|
||
|
||
// 检查新月份是否在有效期内
|
||
if (quarterlyCheck) {
|
||
result.check = 3;
|
||
} else {
|
||
nextExpiration.setMonth(current.getMonth() + 3);
|
||
result.check = 4;
|
||
result.count += 1;
|
||
}
|
||
break;
|
||
|
||
case 'H': // 半年
|
||
nextExpiration.setFullYear(current.getFullYear());
|
||
|
||
// 每次增加 6 个月，直到新的月份大于当前月份
|
||
while (newExpirationMonth < current.getMonth()) {
|
||
newExpirationMonth += 6;
|
||
result.count += 1;
|
||
}
|
||
|
||
// nextExpiration设置获取到的新月份
|
||
nextExpiration.setMonth(newExpirationMonth);
|
||
|
||
const halfCheck = current < nextExpiration;
|
||
|
||
// 检查新月份是否在有效期内
|
||
if (halfCheck) {
|
||
result.check = 5;
|
||
} else {
|
||
nextExpiration.setMonth(current.getMonth() + 6);
|
||
result.check = 6;
|
||
result.count += 1;
|
||
}
|
||
break;
|
||
|
||
case 'Y': // 年度
|
||
const yearCheck = current < new Date(current.getFullYear(), expiration.getMonth(), expiration.getDate());
|
||
|
||
// 如果当前时间比这一年有效期早，则到期为本年
|
||
if (yearCheck) {
|
||
nextExpiration.setFullYear(current.getFullYear());
|
||
result.check = 7;
|
||
} else {
|
||
// 否则推到下一年
|
||
nextExpiration.setFullYear(current.getFullYear() + 1);
|
||
result.check = 8;
|
||
}
|
||
break;
|
||
|
||
default:
|
||
throw new Error("Invalid billing cycle");
|
||
}
|
||
|
||
// 保持原到期时间的时分秒
|
||
nextExpiration.setHours(expiration.getHours());
|
||
nextExpiration.setMinutes(expiration.getMinutes());
|
||
nextExpiration.setSeconds(expiration.getSeconds());
|
||
|
||
result.date = nextExpiration;
|
||
|
||
return result;
|
||
},
|
||
getAutoRenewalStartDate(flag, startDate, check, count) {
|
||
//1.判断什么时候改变 2.如何改变
|
||
const start = new Date(startDate);
|
||
const current = this.getAdjustTimezone(start, new Date());
|
||
|
||
// 检查 startDate 格式是否有效，若无效返回 null
|
||
if (isNaN(start.getTime())) {
|
||
console.error("getAutoRenewalStartDate: Invalid startDate format");
|
||
}
|
||
|
||
// 如果 flag 为 0，直接返回开始日期
|
||
if (flag === 0) {
|
||
return start;
|
||
}
|
||
|
||
// 初始化新的开始日期
|
||
const newStart = new Date(start);
|
||
|
||
switch (check) {
|
||
case 1: // 处理月份：设置为上个月
|
||
newStart.setFullYear(current.getFullYear());
|
||
newStart.setMonth(current.getMonth() - 1);
|
||
break;
|
||
|
||
case 2: // 处理月份：设置为当前月
|
||
newStart.setFullYear(current.getFullYear());
|
||
newStart.setMonth(current.getMonth());
|
||
break;
|
||
|
||
case 3:
|
||
case 4: // 处理季度
|
||
newStart.setFullYear(current.getFullYear());
|
||
newStart.setMonth(start.getMonth() + 3 * count);
|
||
break;
|
||
|
||
case 5:
|
||
case 6: // 处理半年
|
||
newStart.setFullYear(current.getFullYear());
|
||
newStart.setMonth(start.getMonth() + 6 * count);
|
||
break;
|
||
|
||
case 7: // 处理年份：设置为上一年
|
||
newStart.setFullYear(current.getFullYear() - 1);
|
||
break;
|
||
|
||
case 8: // 处理年份：保持当前年份
|
||
newStart.setFullYear(current.getFullYear());
|
||
break;
|
||
|
||
default: // 默认处理：直接返回
|
||
return;
|
||
}
|
||
|
||
return newStart;
|
||
},
|
||
getRemainingFormat(online, note) {
|
||
if (!note) return null;
|
||
const startDate = this.getNoteElementValue(note, "billingDataMod", "startDate");
|
||
const endDate = this.getNoteElementValue(note, "billingDataMod", "endDate");
|
||
|
||
// 检查 startDate 和 endDate 是否有效
|
||
if (!startDate || !endDate || typeof startDate !== 'string' || typeof endDate !== 'string') {
|
||
console.error("getRemainingFormat: Invalid startDate or endDate in note");
|
||
return null; // 如果无效，返回 null 或其他错误处理逻辑
|
||
}
|
||
|
||
//处理特殊时间格式
|
||
if (startDate.includes('0000-00-00') || endDate.includes("0000-00-00")) {
|
||
return this.formatPercents(online, this.toFixed2(100));
|
||
} else {
|
||
const percent = this.getRemainingPercent(startDate, endDate, note);
|
||
return this.formatPercents(online, this.toFixed2(percent));
|
||
}
|
||
},
|
||
getRemainingDays(endDate, note) {
|
||
// 检查 endDate 是否有效
|
||
if (!endDate || typeof endDate !== 'string') {
|
||
console.error("getRemainingDays: Invalid endDate format");
|
||
return null;
|
||
}
|
||
|
||
// 处理特殊时间格式
|
||
if (endDate.includes("0000-00-00")) return "lifetime";
|
||
|
||
// 获取当前时间，并调整时区
|
||
const currentTime = this.getAdjustTimezone(new Date(endDate), new Date());
|
||
|
||
// 获取计费周期和自动续订日期
|
||
const billingCycle = this.getNoteElementValue(note, "billingDataMod", "cycle") || "月";
|
||
const autoEndDate = this.getAutoRenewalEndDate(
|
||
this.getNoteElementValue(note, "billingDataMod", "endDate"),
|
||
this.getBillingCycle(billingCycle)
|
||
);
|
||
|
||
// 检查 autoRenewal 状态
|
||
const autoRenewal = this.getNoteElementValue(note, "billingDataMod", "autoRenewal") == 1;
|
||
|
||
// 确定到期时间
|
||
const end = autoRenewal ? autoEndDate.date : new Date(endDate);
|
||
|
||
// 计算剩余天数
|
||
const timeDiff = end - currentTime;
|
||
const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
|
||
|
||
return daysDiff;
|
||
},
|
||
getRemainingPercent(startDate, endDate, note) {
|
||
// 检查 startDate 和 endDate 是否为有效字符串并处理特殊格式
|
||
if (typeof startDate !== 'string' || typeof endDate !== 'string') {
|
||
console.error("getRemainingPercent: Invalid startDate or endDate format");
|
||
return null;
|
||
}
|
||
|
||
if (startDate.includes("0000-00-00") || endDate.includes("0000-00-00")) return 100;
|
||
|
||
// 获取当前时间并调整时区
|
||
const now = this.getAdjustTimezone(new Date(endDate), new Date());
|
||
|
||
// 获取计费周期
|
||
const billingCycle = this.getNoteElementValue(note, "billingDataMod", "cycle") || "月";
|
||
|
||
// 自动获取结束日期
|
||
const autoEndDate = this.getAutoRenewalEndDate(
|
||
this.getNoteElementValue(note, "billingDataMod", "endDate"),
|
||
this.getBillingCycle(billingCycle)
|
||
);
|
||
|
||
// 自动获取开始日期
|
||
const autoStartDate = autoEndDate.flag == 1
|
||
? this.getAutoRenewalStartDate(autoEndDate.flag, this.getNoteElementValue(note, "billingDataMod", "startDate"), autoEndDate.check, autoEndDate.count)
|
||
: new Date(startDate);
|
||
|
||
// 计算开始和结束时间
|
||
const autoRenewal = this.getNoteElementValue(note, "billingDataMod", "autoRenewal") == 1;
|
||
const start = autoRenewal ? autoStartDate : new Date(startDate);
|
||
const end = autoRenewal ? autoEndDate.date : new Date(endDate);
|
||
|
||
// 计算剩余百分比
|
||
if (now < start) {
|
||
return 0;
|
||
}
|
||
if (now >= end) {
|
||
return 100;
|
||
}
|
||
|
||
const totalDuration = end - start;
|
||
const elapsedDuration = now - start;
|
||
const percent = (elapsedDuration / totalDuration) * 100;
|
||
|
||
// 确保百分比在 0-100 之间
|
||
return Math.min(Math.max(percent, 0), 100);
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
{{end}}
|