商业版WAF看板增加地图

2025-11-04 21:50:28 +08:00 · 2021-12-05 19:38:14 +08:00
parent 90f48a1a3c
commit c3a9f15bc3
6 changed files with 68 additions and 16 deletions
--- a/web/public/js/components/maps/traffic-map-box.js
+++ b/web/public/js/components/maps/traffic-map-box.js
@@ -5,11 +5,15 @@ Vue.component("traffic-map-box", {
 	},
 	data: function () {
 		let maxPercent = 0
+		let isAttack = this.vIsAttack
 		this.vStats.forEach(function (v) {
 			let percent = parseFloat(v.percent)
 			if (percent > maxPercent) {
 				maxPercent = percent
 			}
+
+			v.formattedCountRequests = teaweb.formatCount(v.countRequests) + "次"
+			v.formattedCountAttackRequests = teaweb.formatCount(v.countAttackRequests) + "次"
 		})

 		if (maxPercent < 100) {
@@ -17,10 +21,12 @@ Vue.component("traffic-map-box", {
 		}

 		return {
+			isAttack: isAttack,
 			stats: this.vStats,
 			chart: null,
 			minOpacity: 0.2,
-			maxPercent: maxPercent
+			maxPercent: maxPercent,
+			selectedCountryName: ""
 		}
 	},
 	methods: {
@@ -29,7 +35,12 @@ Vue.component("traffic-map-box", {
 			let that = this
 			this.chart.setOption({
 				backgroundColor: "white",
-				grid: {top: 0, bottom: 0, left: 0, right: 0},
+				grid: {
+					top: 0,
+					bottom: 0,
+					left: 0,
+					right: 0
+				},
 				roam: true,
 				tooltip: {
 					trigger: "item"
@@ -50,12 +61,6 @@ Vue.component("traffic-map-box", {
 						}
 					},
 					//select: {itemStyle:{ areaColor: "#8B9BD3", opacity: 0.8 }},
-					label: {
-						show: true,
-						formatter: function (args) {
-							return ""
-						}
-					},
 					tooltip: {
 						formatter: function (args) {
 							let name = args.name
@@ -67,7 +72,7 @@ Vue.component("traffic-map-box", {
 							})

 							if (stat != null) {
-								return name + "<br/>流量：" + stat.formattedBytes + "<br/>请求数：" + teaweb.formatNumber(stat.countRequests) + "<br/>流量占比：" + stat.percent + "%"
+								return name + "<br/>流量：" + stat.formattedBytes + "<br/>流量占比：" + stat.percent + "%<br/>请求数：" + stat.formattedCountRequests + "<br/>攻击数：" + stat.formattedCountAttackRequests
 							}
 							return name
 						}
@@ -81,11 +86,12 @@ Vue.component("traffic-map-box", {
 						if (fullOpacity > 1) {
 							fullOpacity = 1
 						}
-						let isAttack = this.vIsAttack
+						let isAttack = that.vIsAttack
 						let bgColor = "#276AC6"
 						if (isAttack) {
 							bgColor = "#B03A5B"
 						}
+
 						return {
 							name: v.name,
 							value: v.bytes,
@@ -99,6 +105,19 @@ Vue.component("traffic-map-box", {
 									areaColor: bgColor,
 									opacity: fullOpacity
 								}
+							},
+							label: {
+								show: false,
+								formatter: function (args) {
+									if (args.name == that.selectedCountryName) {
+										return args.name
+									}
+									return ""
+								},
+								fontSize: "10px",
+								color: "#fff",
+								backgroundColor: "#8B9BD3",
+								padding: [2, 2, 2, 2]
 							}
 						}
 					}),
@@ -123,9 +142,12 @@ Vue.component("traffic-map-box", {
 					if (v.isSelected) {
 						v.itemStyle.opacity = opacity
 						v.isSelected = false
+						v.label.show = false
+						that.selectedCountryName = ""
 						return
 					}
 					v.isSelected = true
+					that.selectedCountryName = countryName
 					opacity *= 3
 					if (opacity > 1) {
 						opacity = 1
@@ -136,9 +158,11 @@ Vue.component("traffic-map-box", {
 						opacity = 0.5
 					}
 					v.itemStyle.opacity = opacity
+					v.label.show = true
 				} else {
 					v.itemStyle.opacity = opacity
 					v.isSelected = false
+					v.label.show = false
 				}
 			})
 			this.chart.setOption(option)
@@ -166,11 +190,13 @@ Vue.component("traffic-map-box", {
 					   <tbody>
 						   <tr v-for="(stat, index) in stats.slice(0, 10)">
 							   <td @click.prevent="select(stat.name)" style="cursor: pointer" colspan="2">
-								   <div class="ui progress bar blue" style="margin-bottom: 0.3em">
+								   <div class="ui progress bar" :class="{red: vIsAttack, blue:!vIsAttack}" style="margin-bottom: 0.3em">
 									   <div class="bar" style="min-width: 0; height: 4px;" :style="{width: stat.percent + '%'}"></div>
 								   </div>
 								  <div>{{stat.name}}</div> 
-								   <div><span class="grey">{{stat.percent}}% </span><span class="small grey">（{{stat.formattedBytes}}）</span></div>
+								   <div><span class="grey">{{stat.percent}}% </span>
+								   <span class="small grey" v-if="isAttack">{{stat.formattedCountAttackRequests}}</span>
+								   <span class="small grey" v-if="!isAttack">（{{stat.formattedBytes}}）</span></div>
 							   </td>
 						   </tr>
 					   </tbody>
--- a/web/views/@default/dashboard/boards/waf.css
+++ b/web/views/@default/dashboard/boards/waf.css
@@ -30,6 +30,12 @@
 .chart-box {
  height: 14em;
 }
+.traffic-map-box {
+  height: 16em;
+}
+.traffic-map-box div::-webkit-scrollbar {
+  width: 4px;
+}
 .color-span {
  font-size: 0.8em;
  padding: 4px;
--- a/web/views/@default/dashboard/boards/waf.css.map
+++ b/web/views/@default/dashboard/boards/waf.css.map
@@ -1 +1 @@
-{"version":3,"sources":["waf.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;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,gBAAA;EACA,YAAA;;AAGD,EAAE,OACD;EACC,iBAAA;EACA,YAAA","file":"waf.css"}
+{"version":3,"sources":["waf.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;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,gBAAA;EACA,YAAA;;AAGD,EAAE,OACD;EACC,iBAAA;EACA,YAAA","file":"waf.css"}
--- a/web/views/@default/dashboard/boards/waf.html
+++ b/web/views/@default/dashboard/boards/waf.html
@@ -1,6 +1,13 @@
 {$layout}
+
+{$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}
+
 {$template "menu"}
-{$template "/echarts"}

 <div class="ui four columns grid">
    <div class="ui column">
@@ -24,6 +31,13 @@
    </div>
 </div>

+<!-- 流量地图 -->
+<div class="ui divider"></div>
+<div class="traffic-map-box" v-if="!isLoading">
+    <traffic-map-box :v-stats="topCountryStats" :v-is-attack="true"></traffic-map-box>
+</div>
+<div class="ui divider"></div>
+
 <!-- 最近日志 -->
 <div v-if="accessLogs.length > 0">
    <div class="ui divider"></div>
--- a/web/views/@default/dashboard/boards/waf.js
+++ b/web/views/@default/dashboard/boards/waf.js
@@ -2,8 +2,6 @@ Tea.context(function () {
 	this.isLoading = false

 	this.$delay(function () {
-		let that = this
-
 		this.board.countDailyBlocks = teaweb.formatCount(this.board.countDailyBlocks)
 		this.board.countDailyCaptcha = teaweb.formatCount(this.board.countDailyCaptcha)
 		this.board.countDailyLogs = teaweb.formatCount(this.board.countDailyLogs)
--- a/web/views/@default/dashboard/boards/waf.less
+++ b/web/views/@default/dashboard/boards/waf.less
@@ -45,6 +45,14 @@
 	height: 14em;
 }

+.traffic-map-box {
+	height: 16em;
+
+	div::-webkit-scrollbar {
+		width: 4px;
+	}
+}
+
 .color-span {
 	font-size: 0.8em;
 	padding: 4px;