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

2024-04-08 22:31:28 +08:00
1 parent d38f611d66
commit 8ef5dfb8f8
@@ -639,3 +639,6 @@ other = "Asset"

 [DisableSwitchTemplateInFrontend]
 other = "Disable Switch Template in Frontend"
+
+[ServersOnWorldMap]
+other = "Servers On World Map"
@@ -638,4 +638,7 @@ other = "Plantilla"
 other = "Stat"

 [DisableSwitchTemplateInFrontend]
-other = "Deshabilitar Cambio de Plantilla en Frontend"
+other = "Deshabilitar Cambio de Plantilla en Frontend"
+
+[ServersOnWorldMap]
+other = "Servidores en el mapa mundial"
@@ -639,3 +639,6 @@ other = "信息"

 [DisableSwitchTemplateInFrontend]
 other = "禁止前台切换模板"
+
+[ServersOnWorldMap]
+other = "服务器世界分布图"
@@ -639,3 +639,6 @@ other = "信息"

 [DisableSwitchTemplateInFrontend]
 other = "禁止前台切換主題"
+
+[ServersOnWorldMap]
+other = "伺服器世界分布圖"
@@ -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;
+}
@@ -131,4 +131,17 @@ body[theme="light"] footer p a,
 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);
 }
@@ -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) {
@@ -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>
@@ -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,7 +28,8 @@
    <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>
-{{end}}
+{{end}}
@@ -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}}
-