服务看板增加区域地图

internal/web/actions/default/servers/server/boards/index.go

@@ -1,7 +1,9 @@
 package boards
 
 import (
+	"fmt"
 	teaconst "github.com/TeaOSLab/EdgeAdmin/internal/const"
+	"github.com/TeaOSLab/EdgeAdmin/internal/utils/numberutils"
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
 	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
 	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
@@ -120,6 +122,22 @@ func (this *IndexAction) RunPost(params struct {
 		this.Data["topDomainStats"] = statMaps
 	}
 
+	// 地区排行
+	{
+		var countryMaps = []maps.Map{}
+		for _, stat := range resp.TopCountryStats {
+			countryMaps = append(countryMaps, maps.Map{
+				"name":                stat.CountryName,
+				"bytes":               stat.Bytes,
+				"formattedBytes":      numberutils.FormatBytes(stat.Bytes),
+				"countRequests":       stat.CountRequests,
+				"countAttackRequests": stat.CountAttackRequests,
+				"percent":             fmt.Sprintf("%.2f", stat.Percent),
+			})
+		}
+		this.Data["topCountryStats"] = countryMaps
+	}
+
 	// 指标
 	{
 		var chartMaps = []maps.Map{}
@@ -157,5 +175,6 @@ func (this *IndexAction) RunPost(params struct {
 		}
 		this.Data["metricCharts"] = chartMaps
 	}
+
 	this.Success()
 }

web/views/@default/servers/server/boards/index.css

@@ -25,6 +25,12 @@
 .chart-box {
   height: 14em;
 }
+.traffic-map-box {
+  height: 16em;
+}
+.traffic-map-box div::-webkit-scrollbar {
+  width: 4px;
+}
 h4 span {
   font-size: 0.8em;
   color: grey;

web/views/@default/servers/server/boards/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA;;AAGD,EACC;EACC,gBAAA;EACA,WAAA","file":"index.css"}
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA;;AAGD;EACC,YAAA;;AADD,gBAGC,IAAG;EACF,UAAA;;AAIF,EACC;EACC,gBAAA;EACA,WAAA","file":"index.css"}

web/views/@default/servers/server/boards/index.html

@@ -1,5 +1,11 @@
 {$layout}
-{$template "/echarts"}
+
+{$var "header"}
+<!-- world map -->
+<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
+<script type="text/javascript" src="/js/world.js"></script>
+<script type="text/javascript" src="/js/world-countries-map.js"></script>
+{$end}
 
 <first-menu>
     <menu-item href="/servers">服务列表</menu-item>
@@ -18,6 +24,12 @@
     </div>
 </div>
 
+<!-- 流量地图 -->
+<div v-if="!isLoading">
+    <traffic-map-box :v-stats="topCountryStats"></traffic-map-box>
+</div>
+<div class="ui divider"></div>
+
 <div class="ui menu tabular" v-show="!isLoading">
     <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
     <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>

web/views/@default/servers/server/boards/index.less

@@ -37,6 +37,14 @@
 	height: 14em;
 }
 
+.traffic-map-box {
+	height: 16em;
+
+	div::-webkit-scrollbar {
+		width: 4px;
+	}
+}
+
 h4 {
 	span {
 		font-size: 0.8em;