TRKJ/EdgeAdmin
2
0
Fork 0
mirror of https://github.com/TeaOSLab/EdgeAdmin.git synced 2025-11-07 15:20:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化界面

Browse Source
This commit is contained in:
刘祥超
2021-12-06 08:55:47 +08:00
parent 3e43a5d866
commit ec49f238d6
8 changed files with 146 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
web/public/js/components.js
View File

@@ -20,13 +20,16 @@ Vue.component("traffic-map-box", {
maxPercent *= 1.2 // 不要让某一项100% maxPercent *= 1.2 // 不要让某一项100%
} }
let screenIsNarrow = window.innerWidth < 512
return { return {
isAttack: isAttack, isAttack: isAttack,
stats: this.vStats, stats: this.vStats,
chart: null, chart: null,
minOpacity: 0.2, minOpacity: 0.2,
maxPercent: maxPercent, maxPercent: maxPercent,
selectedCountryName: "" selectedCountryName: "",
screenIsNarrow: screenIsNarrow
} }
}, },
methods: { methods: {
@@ -41,14 +44,14 @@ Vue.component("traffic-map-box", {
left: 0, left: 0,
right: 0 right: 0
}, },
roam: true, roam: false,
tooltip: { tooltip: {
trigger: "item" trigger: "item"
}, },
series: [{ series: [{
type: "map", type: "map",
map: "world", map: "world",
zoom: 1.2, zoom: 1.3,
selectedMode: false, selectedMode: false,
itemStyle: { itemStyle: {
areaColor: "#E9F0F9", areaColor: "#E9F0F9",
@@ -126,7 +129,7 @@ Vue.component("traffic-map-box", {
}) })
this.chart.resize() this.chart.resize()
}, },
select: function (countryName) { selectCountry: function (countryName) {
if (this.chart == null) { if (this.chart == null) {
return return
} }
@@ -166,48 +169,76 @@ Vue.component("traffic-map-box", {
} }
}) })
this.chart.setOption(option) this.chart.setOption(option)
},
select: function (args) {
this.selectCountry(args.countryName)
} }
}, },
template: `<div> template: `<div>
<table style="width: 100%; border: 0; padding: 0; margin: 0"> <table style="width: 100%; border: 0; padding: 0; margin: 0">
<tr> <tbody>
<tr>
<td> <td>
<div class="traffic-map-box" id="traffic-map-box" ></div> <div class="traffic-map-box" id="traffic-map-box"></div>
</td> </td>
<td style="width: 14em"> <td style="width: 14em" v-if="!screenIsNarrow">
<div style="overflow-y: auto; height: 16em"> <traffic-map-box-table :v-stats="stats" :v-is-attack="isAttack" @select="select"></traffic-map-box-table>
<table class="ui table selectable">
<thead>
<tr>
<th colspan="2">国家/地区排行</th>
</tr>
</thead>
<tbody v-if="stats.length == 0">
<tr>
<td colspan="2">暂无数据</td>
</tr>
</tbody>
<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" :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" v-if="isAttack">{{stat.formattedCountAttackRequests}}</span>
<span class="small grey" v-if="!isAttack">（{{stat.formattedBytes}}）</span></div>
</td>
</tr>
</tbody>
</table>
</div>
</td> </td>
</tr> </tr>
</tbody>
<tbody v-if="screenIsNarrow">
<tr>
<td colspan="2">
<traffic-map-box-table :v-stats="stats" :v-is-attack="isAttack" @select="select"></traffic-map-box-table>
</td>
</tr>
</tbody>
</table> </table>
</div>` </div>`
}) })
Vue.component("traffic-map-box-table", {
props: ["v-stats", "v-is-attack"],
data: function () {
return {
stats: this.vStats,
isAttack: this.vIsAttack
}
},
methods: {
select: function (countryName) {
this.$emit("select", {countryName: countryName})
}
},
template: `<div style="overflow-y: auto; max-height: 16em" class="narrow-scrollbar">
<table class="ui table selectable">
<thead>
<tr>
<th colspan="2">国家/地区排行&nbsp; <tip-icon content="只有开启了统计的服务才会有记录。"></tip-icon></th>
</tr>
</thead>
<tbody v-if="stats.length == 0">
<tr>
<td colspan="2">暂无数据</td>
</tr>
</tbody>
<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" :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" v-if="isAttack">{{stat.formattedCountAttackRequests}}</span>
<span class="small grey" v-if="!isAttack">（{{stat.formattedBytes}}）</span></div>
</td>
</tr>
</tbody>
</table>
</div>`
})
// 显示节点的多个集群 // 显示节点的多个集群
Vue.component("node-clusters-labels", { Vue.component("node-clusters-labels", {
props: ["v-primary-cluster", "v-secondary-clusters", "size"], props: ["v-primary-cluster", "v-secondary-clusters", "size"],

101
web/public/js/components/maps/traffic-map-box.js
View File

@@ -20,13 +20,16 @@ Vue.component("traffic-map-box", {
maxPercent *= 1.2 // 不要让某一项100% maxPercent *= 1.2 // 不要让某一项100%
} }
let screenIsNarrow = window.innerWidth < 512
return { return {
isAttack: isAttack, isAttack: isAttack,
stats: this.vStats, stats: this.vStats,
chart: null, chart: null,
minOpacity: 0.2, minOpacity: 0.2,
maxPercent: maxPercent, maxPercent: maxPercent,
selectedCountryName: "" selectedCountryName: "",
screenIsNarrow: screenIsNarrow
} }
}, },
methods: { methods: {
@@ -41,14 +44,14 @@ Vue.component("traffic-map-box", {
left: 0, left: 0,
right: 0 right: 0
}, },
roam: true, roam: false,
tooltip: { tooltip: {
trigger: "item" trigger: "item"
}, },
series: [{ series: [{
type: "map", type: "map",
map: "world", map: "world",
zoom: 1.2, zoom: 1.3,
selectedMode: false, selectedMode: false,
itemStyle: { itemStyle: {
areaColor: "#E9F0F9", areaColor: "#E9F0F9",
@@ -126,7 +129,7 @@ Vue.component("traffic-map-box", {
}) })
this.chart.resize() this.chart.resize()
}, },
select: function (countryName) { selectCountry: function (countryName) {
if (this.chart == null) { if (this.chart == null) {
return return
} }
@@ -166,44 +169,72 @@ Vue.component("traffic-map-box", {
} }
}) })
this.chart.setOption(option) this.chart.setOption(option)
},
select: function (args) {
this.selectCountry(args.countryName)
} }
}, },
template: `<div> template: `<div>
<table style="width: 100%; border: 0; padding: 0; margin: 0"> <table style="width: 100%; border: 0; padding: 0; margin: 0">
<tr> <tbody>
<tr>
<td> <td>
<div class="traffic-map-box" id="traffic-map-box" ></div> <div class="traffic-map-box" id="traffic-map-box"></div>
</td> </td>
<td style="width: 14em"> <td style="width: 14em" v-if="!screenIsNarrow">
<div style="overflow-y: auto; height: 16em"> <traffic-map-box-table :v-stats="stats" :v-is-attack="isAttack" @select="select"></traffic-map-box-table>
<table class="ui table selectable">
<thead>
<tr>
<th colspan="2">国家/地区排行</th>
</tr>
</thead>
<tbody v-if="stats.length == 0">
<tr>
<td colspan="2">暂无数据</td>
</tr>
</tbody>
<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" :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" v-if="isAttack">{{stat.formattedCountAttackRequests}}</span>
<span class="small grey" v-if="!isAttack">（{{stat.formattedBytes}}）</span></div>
</td>
</tr>
</tbody>
</table>
</div>
</td> </td>
</tr> </tr>
</tbody>
<tbody v-if="screenIsNarrow">
<tr>
<td colspan="2">
<traffic-map-box-table :v-stats="stats" :v-is-attack="isAttack" @select="select"></traffic-map-box-table>
</td>
</tr>
</tbody>
</table> </table>
</div>` </div>`
}) })
Vue.component("traffic-map-box-table", {
props: ["v-stats", "v-is-attack"],
data: function () {
return {
stats: this.vStats,
isAttack: this.vIsAttack
}
},
methods: {
select: function (countryName) {
this.$emit("select", {countryName: countryName})
}
},
template: `<div style="overflow-y: auto; max-height: 16em" class="narrow-scrollbar">
<table class="ui table selectable">
<thead>
<tr>
<th colspan="2">国家/地区排行&nbsp; <tip-icon content="只有开启了统计的服务才会有记录。"></tip-icon></th>
</tr>
</thead>
<tbody v-if="stats.length == 0">
<tr>
<td colspan="2">暂无数据</td>
</tr>
</tbody>
<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" :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" v-if="isAttack">{{stat.formattedCountAttackRequests}}</span>
<span class="small grey" v-if="!isAttack">（{{stat.formattedBytes}}）</span></div>
</td>
</tr>
</tbody>
</table>
</div>`
})

3
web/views/@default/@layout.css
View File

@@ -95,6 +95,9 @@ body.expanded .right-box {
.main.without-footer .left-box { .main.without-footer .left-box {
bottom: 0.2em; bottom: 0.2em;
} }
.narrow-scrollbar::-webkit-scrollbar {
width: 4px;
}
/** 通用 **/ /** 通用 **/
.clear { .clear {
clear: both; clear: both;

2
web/views/@default/@layout.css.map
View File

File diff suppressed because one or more lines are too long

5
web/views/@default/@left_menu.less
View File

@@ -127,3 +127,8 @@ body.expanded .right-box {
.main.without-footer .left-box { .main.without-footer .left-box {
bottom: 0.2em; bottom: 0.2em;
} }
// scrollbar
.narrow-scrollbar::-webkit-scrollbar {
width: 4px;
}

2
web/views/@default/dashboard/boards/index.html
View File

@@ -118,7 +118,7 @@
<div class="ui divider"></div> <div class="ui divider"></div>
<!-- 流量地图 --> <!-- 流量地图 -->
<div class="traffic-map-box" v-if="!isLoading"> <div v-if="!isLoading">
<traffic-map-box :v-stats="topCountryStats"></traffic-map-box> <traffic-map-box :v-stats="topCountryStats"></traffic-map-box>
</div> </div>
<div class="ui divider"></div> <div class="ui divider"></div>

2
web/views/@default/dashboard/boards/waf.html
View File

@@ -33,7 +33,7 @@
<!-- 流量地图 --> <!-- 流量地图 -->
<div class="ui divider"></div> <div class="ui divider"></div>
<div class="traffic-map-box" v-if="!isLoading"> <div v-if="!isLoading">
<traffic-map-box :v-stats="topCountryStats" :v-is-attack="true"></traffic-map-box> <traffic-map-box :v-stats="topCountryStats" :v-is-attack="true"></traffic-map-box>
</div> </div>
<div class="ui divider"></div> <div class="ui divider"></div>

4
web/views/@default/servers/server/stat/index.js
View File

@@ -81,7 +81,9 @@ Tea.context(function () {
data: stats.map(function (v) { data: stats.map(function (v) {
return v.countRequests / axis.divider return v.countRequests / axis.divider
}), }),
itemStyle: {
color: "#61A0A8"
},
areaStyle: { areaStyle: {
color: "#9DD3E8" color: "#9DD3E8"
}, },