diff --git a/web/public/js/components/maps/traffic-map-box.js b/web/public/js/components/maps/traffic-map-box.js index 296b2806..31aaa5b9 100644 --- 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 + "
流量：" + stat.formattedBytes + "
请求数：" + teaweb.formatNumber(stat.countRequests) + "
流量占比：" + stat.percent + "%" + return name + "
流量：" + stat.formattedBytes + "
流量占比：" + stat.percent + "%
请求数：" + stat.formattedCountRequests + "
攻击数：" + 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", { -
+
{{stat.name}}
-
{{stat.percent}}% （{{stat.formattedBytes}}）
+
{{stat.percent}}% + {{stat.formattedCountAttackRequests}} + （{{stat.formattedBytes}}）
diff --git a/web/views/@default/dashboard/boards/waf.css b/web/views/@default/dashboard/boards/waf.css index af0c795f..b6c67613 100644 --- 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; diff --git a/web/views/@default/dashboard/boards/waf.css.map b/web/views/@default/dashboard/boards/waf.css.map index e890688a..e028a7bf 100644 --- 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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/web/views/@default/dashboard/boards/waf.html b/web/views/@default/dashboard/boards/waf.html index 505dd537..e5b0e3e6 100644 --- a/web/views/@default/dashboard/boards/waf.html +++ b/web/views/@default/dashboard/boards/waf.html @@ -1,6 +1,13 @@ {$layout} + +{$var "header"} + + + + +{$end} + {$template "menu"} -{$template "/echarts"}
@@ -24,6 +31,13 @@
+ +
+
+ +
+
+
diff --git a/web/views/@default/dashboard/boards/waf.js b/web/views/@default/dashboard/boards/waf.js index 8aebf12f..2017e345 100644 --- 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) diff --git a/web/views/@default/dashboard/boards/waf.less b/web/views/@default/dashboard/boards/waf.less index bc80624b..5d27707c 100644 --- 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;