KJZH001/nezha-2024
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ServerStatus主题首页增加服务器世界分布图功能 (#344)

Browse Source
This commit is contained in:
nap0o authored and GitHub committed 2024-04-08 22:31:28 +08:00
1 parent d38f611d66
commit 8ef5dfb8f8
10 files changed
+228 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resource/l10n/en-US.toml
Vendored
+3
View File
@@ -639,3 +639,6 @@ other = "Asset"
[DisableSwitchTemplateInFrontend]
other = "Disable Switch Template in Frontend"
[ServersOnWorldMap]
other = "Servers On World Map"
resource/l10n/es-ES.toml
Vendored
+3
View File
@@ -639,3 +639,6 @@ other = "Stat"
[DisableSwitchTemplateInFrontend]
other = "Deshabilitar Cambio de Plantilla en Frontend"
[ServersOnWorldMap]
other = "Servidores en el mapa mundial"
resource/l10n/zh-CN.toml
Vendored
+3
View File
@@ -639,3 +639,6 @@ other = "信息"
[DisableSwitchTemplateInFrontend]
other = "禁止前台切换模板"
[ServersOnWorldMap]
other = "服务器世界分布图"
resource/l10n/zh-TW.toml
Vendored
+3
View File
@@ -639,3 +639,6 @@ other = "信息"
[DisableSwitchTemplateInFrontend]
other = "禁止前台切換主題"
[ServersOnWorldMap]
other = "伺服器世界分布圖"
resource/static/theme-server-status/css/dark.css
Vendored
+13
View File
@@ -157,3 +157,16 @@ body[theme="dark"] footer p a:hover {
color: #f1f1f1;
text-decoration: none;
}
body[theme="dark"] .modal-content{
background-color: #1c1d26;
color: #f1f1f1;
}
body[theme="dark"] .modal-header{
border-bottom-color:#080808;
}
body[theme="dark"] .modal-header i{
color: #f1f1f1;
}
resource/static/theme-server-status/css/light.css
Vendored
+13
View File
@@ -132,3 +132,16 @@ body[theme="light"] footer p a:hover {
color: #333333;
text-decoration: none;
}
body[theme="light"] .modal-content{
background-color: #ffffff;
color: rgba(0, 0, 0, 0.87);
}
body[theme="light"] .modal-header{
border-bottom-color:#f1f1f1;
}
body[theme="light"] .modal-header i{
color: rgba(0, 0, 0, 0.87);
}
resource/static/theme-server-status/css/main.css
Vendored
+45 -3
View File
@@ -281,10 +281,42 @@ body {
.service-status .tooltip-inner {
max-width: 500px;
}
/* 服务页 正文结束 */
/* 服务器分布图 */
#mapChartBox{
z-index: 999999999;
}
.modal-content{
display: flex;
flex-direction: column;
pointer-events: auto;
}
.modal-dialog-centered{
margin: 0 auto;
width: 1134px;
max-width: 1134px;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
min-height: calc(100%) /* 确保模态框占据整个视口高度 */
}
.modal-header{
position: relative;
}
.modal-header i{
cursor: pointer;
position: absolute;
font-size: 2em;
top: 13px;
right: 13px;
}
@media only screen and (max-width: 1200px) {
.accordian-body{
margin: 5px 0px 5px 10px;
@@ -365,6 +397,16 @@ body {
.toolbox {
right: 18px;
}
.modal-dialog-centered{
width: 95%;
}
.modal-title{
line-height: 0.5;
}
.modal-header i{
top: 8px;
right: 8px;
}
}
@media only screen and (min-width: 768px) {
resource/template/theme-server-status/content-footer.html
Vendored
+3
View File
@@ -5,6 +5,9 @@
</p>
</footer>
<aside class="toolbox">
<span v-if="page=='index' && countryMapChartData.length!=0" class="showMapChart">
<i @click="showMapChart" data-toggle="modal" data-target="#mapChartBox" class="bi bi-geo-alt"></i>
</span>
<span class="toggleView">
<i v-if="showGroup" @click="toggleView" class="show-nogroup bi bi-justify"></i>
<i v-else @click="toggleView" class="show-group bi bi-view-stacked"></i>
resource/template/theme-server-status/header.html
Vendored
+4 -3
View File
@@ -8,9 +8,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/theme-server-status/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240225">
<link rel="stylesheet" href="/static/theme-server-status/css/dark.css">
<link rel="stylesheet" href="/static/theme-server-status/css/light.css">
<link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240407">
<link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240407">
<link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240407">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/font-logos.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css">
@@ -28,6 +28,7 @@
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js" integrity="md5-ZmUzMzZlOGQyYzk2NTgwNGRlMzRlNTliZDgyYTY1OGUgIC0=" crossorigin="anonymous"></script>
<script src="/static/theme-server-status/js/mixin.js?v20240302"></script>
</head>
<body>
resource/template/theme-server-status/home.html
Vendored
+138 -2
View File
@@ -14,6 +14,19 @@
{{template "theme-server-status/home-group-false" .}}
</section>
</template>
<div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="mapChartTitle">{{tr "ServersOnWorldMap"}}</h4>
<i class="bi bi-x" data-dismiss="modal" aria-label="Close"></i>
</div>
<div class="modal-body">
<div id="mapChart" style="width:100%;height:auto;"></div>
</div>
</div>
</div>
</div>
{{template "theme-server-status/content-footer" .}}
</div>
<script>
@@ -29,7 +42,12 @@
nodesTag: [],
nodesNoTag: [],
chartDataList: [],
ws: null
ws: null,
language: {{.Conf.Language}},
countryMap: {"ad":{"flag":"🇦🇩","en":"Andorra","zh":"安道尔"},"ae":{"flag":"🇦🇪","en":"United Arab Emirates","zh":"阿联酋"},"af":{"flag":"🇦🇫","en":"Afghanistan","zh":"阿富汗"},"ag":{"flag":"🇦🇬","en":"Antigua and Barb.","zh":"安提瓜和巴布达"},"ai":{"flag":"🇦🇮","en":"Anguilla","zh":"安圭拉"},"al":{"flag":"🇦🇱","en":"Albania","zh":"阿尔巴尼亚"},"am":{"flag":"🇦🇲","en":"Armenia","zh":"亚美尼亚"},"ao":{"flag":"🇦🇴","en":"Angola","zh":"安哥拉"},"aq":{"flag":"🇦🇶","en":"Antarctica","zh":"南极洲"},"ar":{"flag":"🇦🇷","en":"Argentina","zh":"阿根廷"},"as":{"flag":"🇦🇸","en":"American Samoa","zh":"美属萨摩亚"},"Ashmore and Cartier Is.":{"flag":"","en":"Ashmore and Cartier Is.","zh":"阿什莫尔和卡捷群岛"},"at":{"flag":"🇦🇹","en":"Austria","zh":"奥地利"},"au":{"flag":"🇦🇺","en":"Australia","zh":"澳大利亚"},"aw":{"flag":"🇦🇼","en":"Aruba","zh":"阿鲁巴"},"ax":{"flag":"🇦🇽","en":"Åland","zh":"奥兰"},"az":{"flag":"🇦🇿","en":"Azerbaijan","zh":"阿塞拜疆"},"ba":{"flag":"🇧🇦","en":"Bosnia and Herz.","zh":"波黑"},"bb":{"flag":"🇧🇧","en":"Barbados","zh":"巴巴多斯"},"bd":{"flag":"🇧🇩","en":"Bangladesh","zh":"孟加拉国"},"be":{"flag":"🇧🇪","en":"Belgium","zh":"比利时"},"bf":{"flag":"🇧🇫","en":"Burkina Faso","zh":"布基纳法索"},"bg":{"flag":"🇧🇬","en":"Bulgaria","zh":"保加利亚"},"bh":{"flag":"🇧🇭","en":"Bahrain","zh":"巴林"},"bi":{"flag":"🇧🇮","en":"Burundi","zh":"布隆迪"},"bj":{"flag":"🇧🇯","en":"Benin","zh":"贝宁"},"bl":{"flag":"🇧🇱","en":"St-Barthélemy","zh":"圣巴泰勒米"},"bm":{"flag":"🇧🇲","en":"Bermuda","zh":"百慕大"},"bn":{"flag":"🇧🇳","en":"Brunei","zh":"文莱"},"bo":{"flag":"🇧🇴","en":"Bolivia","zh":"玻利维亚"},"bq":{"flag":"🇧🇶","en":"Bonaire, Sint Eustatius and Saba","zh":"荷兰加勒比区"},"br":{"flag":"🇧🇷","en":"Brazil","zh":"巴西"},"bs":{"flag":"🇧🇸","en":"Bahamas","zh":"巴哈马"},"bt":{"flag":"🇧🇹","en":"Bhutan","zh":"不丹"},"bv":{"flag":"🇧🇻","en":"Bouvet Island","zh":"布韦岛"},"bw":{"flag":"🇧🇼","en":"Botswana","zh":"博茨瓦纳"},"by":{"flag":"🇧🇾","en":"Belarus","zh":"白俄罗斯"},"bz":{"flag":"🇧🇿","en":"Belize","zh":"伯利兹"},"ca":{"flag":"🇨🇦","en":"Canada","zh":"加拿大"},"cc":{"flag":"🇨🇨","en":"Cocos (Keeling) Islands","zh":"科科斯（基林）群岛"},"cd":{"flag":"🇨🇩","en":"Dem. Rep. Congo","zh":"刚果民主共和国"},"cf":{"flag":"🇨🇫","en":"Central African Rep.","zh":"中非"},"cg":{"flag":"🇨🇬","en":"Congo","zh":"刚果共和国"},"ch":{"flag":"🇨🇭","en":"Switzerland","zh":"瑞士"},"ci":{"flag":"🇨🇮","en":"Côte d'Ivoire","zh":"科特迪瓦"},"ck":{"flag":"🇨🇰","en":"Cook Is.","zh":"库克群岛"},"cl":{"flag":"🇨🇱","en":"Chile","zh":"智利"},"cm":{"flag":"🇨🇲","en":"Cameroon","zh":"喀麦隆"},"cn":{"flag":"🇨🇳","en":"China","zh":"中国"},"co":{"flag":"🇨🇴","en":"Colombia","zh":"哥伦比亚"},"cr":{"flag":"🇨🇷","en":"Costa Rica","zh":"哥斯达黎加"},"cu":{"flag":"🇨🇺","en":"Cuba","zh":"古巴"},"cv":{"flag":"🇨🇻","en":"Cabo Verde","zh":"佛得角"},"cw":{"flag":"🇨🇼","en":"Curaçao","zh":"库拉索"},"cx":{"flag":"🇨🇽","en":"Christmas Island","zh":"圣诞岛"},"cy":{"flag":"🇨🇾","en":"Cyprus","zh":"塞浦路斯"},"cz":{"flag":"🇨🇿","en":"Czech Rep.","zh":"捷克"},"de":{"flag":"🇩🇪","en":"Germany","zh":"德国"},"dj":{"flag":"🇩🇯","en":"Djibouti","zh":"吉布提"},"dk":{"flag":"🇩🇰","en":"Denmark","zh":"丹麦"},"dm":{"flag":"🇩🇲","en":"Dominica","zh":"多米尼克"},"do":{"flag":"🇩🇴","en":"Dominican Rep.","zh":"多米尼加"},"dz":{"flag":"🇩🇿","en":"Algeria","zh":"阿尔及利亚"},"ec":{"flag":"🇪🇨","en":"Ecuador","zh":"厄瓜多尔"},"ee":{"flag":"🇪🇪","en":"Estonia","zh":"爱沙尼亚"},"eg":{"flag":"🇪🇬","en":"Egypt","zh":"埃及"},"eh":{"flag":"🇪🇭","en":"W. Sahara","zh":"西撒哈拉"},"er":{"flag":"🇪🇷","en":"Eritrea","zh":"厄立特里亚"},"es":{"flag":"🇪🇸","en":"Spain","zh":"西班牙"},"et":{"flag":"🇪🇹","en":"Ethiopia","zh":"埃塞俄比亚"},"fi":{"flag":"🇫🇮","en":"Finland","zh":"芬兰"},"fj":{"flag":"🇫🇯","en":"Fiji","zh":"斐济"},"fk":{"flag":"🇫🇰","en":"Falkland Is.","zh":"福克兰群岛"},"fm":{"flag":"🇫🇲","en":"Micronesia","zh":"密克罗尼西亚联邦"},"fo":{"flag":"🇫🇴","en":"Faeroe Is.","zh":"法罗群岛"},"fr":{"flag":"🇫🇷","en":"France","zh":"法国"},"ga":{"flag":"🇬🇦","en":"Gabon","zh":"加蓬"},"gb":{"flag":"🇬🇧","en":"United Kingdom","zh":"英国"},"gd":{"flag":"🇬🇩","en":"Grenada","zh":"格林纳达"},"ge":{"flag":"🇬🇪","en":"Georgia","zh":"格鲁吉亚"},"gf":{"flag":"🇬🇫","en":"French Guiana","zh":"法属圭亚那"},Line truncated
countryServer: [],
countryNameMap: {},
countryMapChartData: []
},
mixins: [mixinsVue],
created() {
@@ -39,6 +57,9 @@
} else {
this.nodesNoTag = this.handleNodes(this.servers);
}
this.countryNameMap = this.initCountryNameMap();
this.countryServer = this.initCountryServer();
this.countryMapChartData = this.initCountryMapChartData();
},
mounted() {
// 初始化时建立WebSocket连接
@@ -55,6 +76,122 @@
});
},
methods: {
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(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 isMobile = this.checkIsMobile();
const width = isMobile ? 338 : 1102;
const height = isMobile ? 200 : 500;
const backgroundColor = this.theme == "dark" ? '#1C1D26' : '#ffffff';
const inRangeColor = this.theme == "dark" ? '#D2B206' : '#FFDF32';
const tooltipBackgroundColor = this.theme == "dark" ? "#ffffff" : '#ffffff';
const tooltipBorderColor = this.theme == "dark" ? "#ffffff" : "#ffffff";
const fontSize = isMobile ? 10 : 12;
const fontColor = this.theme == "dark" ? "#000000" : "#000000";
const chartContainer = document.getElementById('mapChart');
const mapChart = echarts.init(chartContainer, '', { // init图表
renderer: 'canvas',
useDirtyRect: false,
width: width,
height: height,
});
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) {
const unit = this.language=='zh-CN' ? '台' : ' Servers';
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',
mapType: 'world',
roam: true,
label: {
show: false,
fontSize: 8
},
data: this.countryMapChartData,
nameMap: this.countryNameMap,
}
]
};
mapChart.setOption(option);
},
isWindowsPlatform(str) {
return str.includes('Windows')
},
@@ -401,4 +538,3 @@
</script>
{{template "theme-server-status/footer" .}}
{{end}}