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

优化代码

Browse Source
This commit is contained in:
刘祥超
2021-06-08 15:20:59 +08:00
parent 7a57180ecd
commit 9de66f080d
3 changed files with 180 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
web/views/@default/servers/server/stat/clients.js
View File

@@ -1,111 +1,90 @@
Tea.context(function () { Tea.context(function () {
this.$delay(function () { this.$delay(function () {
let that = this let that = this
let systemUnit = this.processMaxUnit(this.systemStats) let systemAxis = teaweb.countAxis(this.systemStats, function (v) {
this.reloadChart("system-chart", "操作系统", this.systemStats, function (v) { return v.count
return v.system.name })
}, function (args) { this.reloadChart("system-chart", "操作系统", this.systemStats, function (v) {
return that.systemStats[args.dataIndex].system.name + ": " + teaweb.formatNumber(that.systemStats[args.dataIndex].rawCount) return v.system.name
}, systemUnit) }, function (args) {
window.addEventListener("resize", function () { return that.systemStats[args.dataIndex].system.name + ": " + teaweb.formatNumber(that.systemStats[args.dataIndex].count)
that.resizeChart("system-chart") }, systemAxis)
}) window.addEventListener("resize", function () {
that.resizeChart("system-chart")
})
let browserUnit = this.processMaxUnit(this.browserStats) let browserAxis = teaweb.countAxis(this.browserStats, function (v) {
this.reloadChart("browser-chart", "浏览器", this.browserStats, function (v) { return v.count
return v.browser.name })
}, function (args) { this.reloadChart("browser-chart", "浏览器", this.browserStats, function (v) {
return that.browserStats[args.dataIndex].browser.name + ": " + teaweb.formatNumber(that.browserStats[args.dataIndex].rawCount) return v.browser.name
}, browserUnit) }, function (args) {
return that.browserStats[args.dataIndex].browser.name + ": " + teaweb.formatNumber(that.browserStats[args.dataIndex].count)
}, browserAxis)
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
that.resizeChart("system-chart") that.resizeChart("system-chart")
that.resizeChart("browser-chart") that.resizeChart("browser-chart")
}) })
}) })
this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, unit) { this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) {
let chartBox = document.getElementById(chartId) let chartBox = document.getElementById(chartId)
if (chartBox == null) { if (chartBox == null) {
return return
} }
let chart = echarts.init(chartBox) let chart = echarts.init(chartBox)
let option = { let option = {
xAxis: { xAxis: {
data: stats.map(xFunc), data: stats.map(xFunc),
axisLabel: { axisLabel: {
interval: 0 interval: 0
} }
}, },
yAxis: { yAxis: {
axisLabel: { axisLabel: {
formatter: function (value) { formatter: function (value) {
return value + unit return value + axis.unit
} }
} }
}, },
tooltip: { tooltip: {
show: true, show: true,
trigger: "item", trigger: "item",
formatter: tooltipFunc formatter: tooltipFunc
}, },
grid: { grid: {
left: 40, left: 40,
top: 10, top: 10,
right: 20, right: 20,
bottom: 20 bottom: 20
}, },
series: [ series: [
{ {
name: name, name: name,
type: "bar", type: "bar",
data: stats.map(function (v) { data: stats.map(function (v) {
return v.count; return v.count / axis.divider;
}), }),
itemStyle: { itemStyle: {
color: "#9DD3E8" color: "#9DD3E8"
}, },
barWidth: "20em" barWidth: "20em"
} }
], ],
animation: true animation: true
} }
chart.setOption(option) chart.setOption(option)
chart.resize() chart.resize()
} }
this.resizeChart = function (chartId) { this.resizeChart = function (chartId) {
let chartBox = document.getElementById(chartId) let chartBox = document.getElementById(chartId)
if (chartBox == null) { if (chartBox == null) {
return return
} }
let chart = echarts.init(chartBox) let chart = echarts.init(chartBox)
chart.resize() chart.resize()
} }
this.processMaxUnit = function (stats) {
let max = stats.$map(function (k, v) {
return v.count
}).$max()
let divider = 0
let unit = ""
if (max >= 1000 * 1000 * 1000) {
unit = "B"
divider = 1000 * 1000 * 1000
} else if (max >= 1000 * 1000) {
unit = "M"
divider = 1000 * 1000
} else if (max >= 1000) {
unit = "K"
divider = 1000
}
stats.forEach(function (v) {
v.rawCount = v.count
if (divider > 0) {
v.count /= divider
}
})
return unit
}
}) })

13
web/views/@default/servers/server/stat/providers.js
View File

@@ -5,20 +5,17 @@ Tea.context(function () {
let axis = teaweb.countAxis(this.providerStats, function (v) { let axis = teaweb.countAxis(this.providerStats, function (v) {
return v.count return v.count
}) })
this.providerStats.forEach(function (v) {
v.count /= axis.divider
})
this.reloadChart("provider-chart", "运营商", this.providerStats, function (v) { this.reloadChart("provider-chart", "运营商", this.providerStats, function (v) {
return v.provider.name return v.provider.name
}, function (args) { }, function (args) {
return that.providerStats[args.dataIndex].provider.name + ": " + teaweb.formatNumber(that.providerStats[args.dataIndex].rawCount) return that.providerStats[args.dataIndex].provider.name + ": " + teaweb.formatNumber(that.providerStats[args.dataIndex].count)
}, axis.unit) }, axis)
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
that.resizeChart("provider-chart") that.resizeChart("provider-chart")
}) })
}) })
this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, unit) { this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) {
let chartBox = document.getElementById(chartId) let chartBox = document.getElementById(chartId)
if (chartBox == null) { if (chartBox == null) {
return return
@@ -34,7 +31,7 @@ Tea.context(function () {
yAxis: { yAxis: {
axisLabel: { axisLabel: {
formatter: function (value) { formatter: function (value) {
return value + unit return value + axis.unit
} }
} }
}, },
@@ -54,7 +51,7 @@ Tea.context(function () {
name: name, name: name,
type: "bar", type: "bar",
data: stats.map(function (v) { data: stats.map(function (v) {
return v.count; return v.count / axis.divider;
}), }),
itemStyle: { itemStyle: {
color: "#9DD3E8" color: "#9DD3E8"

200
web/views/@default/servers/server/stat/regions.js
View File

@@ -1,116 +1,100 @@
Tea.context(function () { Tea.context(function () {
this.$delay(function () { this.$delay(function () {
let that = this let that = this
let countryUnit = this.processMaxUnit(this.countryStats) // 地区
this.reloadChart("country-chart", "地区", this.countryStats, function (v) { let countryAxis = teaweb.countAxis(this.countryStats, function (v) {
return v.country.name return v.count
}, function (args) { })
return that.countryStats[args.dataIndex].country.name + ": " + teaweb.formatNumber(that.countryStats[args.dataIndex].rawCount) this.reloadChart("country-chart", "地区", this.countryStats, function (v) {
}, countryUnit) return v.country.name
}, function (args) {
return that.countryStats[args.dataIndex].country.name + ": " + teaweb.formatNumber(that.countryStats[args.dataIndex].count)
}, countryAxis)
let provinceUnit = this.processMaxUnit(this.provinceStats) // 省份
this.reloadChart("province-chart", "省市", this.provinceStats, function (v) { let provinceAxis = teaweb.countAxis(this.provinceStats, function (v) {
return v.province.name return v.count
}, function (args) { })
return that.provinceStats[args.dataIndex].country.name + ": " + that.provinceStats[args.dataIndex].province.name + " " + teaweb.formatNumber(that.provinceStats[args.dataIndex].rawCount) this.reloadChart("province-chart", "省市", this.provinceStats, function (v) {
}, provinceUnit) return v.province.name
}, function (args) {
return that.provinceStats[args.dataIndex].country.name + ": " + that.provinceStats[args.dataIndex].province.name + " " + teaweb.formatNumber(that.provinceStats[args.dataIndex].count)
}, provinceAxis)
let cityUnit = this.processMaxUnit(this.cityStats) // 城市
this.reloadChart("city-chart", "城市", this.cityStats, function (v) { let cityAxis = teaweb.countAxis(this.cityStats, function (v) {
return v.city.name return v.count
}, function (args) { })
return that.cityStats[args.dataIndex].country.name + ": " + that.cityStats[args.dataIndex].province.name + " " + that.cityStats[args.dataIndex].city.name + " " + teaweb.formatNumber(that.cityStats[args.dataIndex].rawCount) this.reloadChart("city-chart", "城市", this.cityStats, function (v) {
}, cityUnit) return v.city.name
}, function (args) {
return that.cityStats[args.dataIndex].country.name + ": " + that.cityStats[args.dataIndex].province.name + " " + that.cityStats[args.dataIndex].city.name + " " + teaweb.formatNumber(that.cityStats[args.dataIndex].count)
}, cityAxis)
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
that.resizeChart("country-chart") that.resizeChart("country-chart")
that.resizeChart("province-chart") that.resizeChart("province-chart")
that.resizeChart("city-chart") that.resizeChart("city-chart")
}) })
}) })
this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, unit) { this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) {
let chartBox = document.getElementById(chartId) let chartBox = document.getElementById(chartId)
if (chartBox == null) { if (chartBox == null) {
return return
} }
let chart = echarts.init(chartBox) let chart = echarts.init(chartBox)
let option = { let option = {
xAxis: { xAxis: {
data: stats.map(xFunc), data: stats.map(xFunc),
axisLabel: { axisLabel: {
interval: 0 interval: 0
} }
}, },
yAxis: { yAxis: {
axisLabel: { axisLabel: {
formatter: function (value) { formatter: function (value) {
return value + unit return value + axis.unit
} }
} }
}, },
tooltip: { tooltip: {
show: true, show: true,
trigger: "item", trigger: "item",
formatter: tooltipFunc formatter: tooltipFunc
}, },
grid: { grid: {
left: 40, left: 40,
top: 10, top: 10,
right: 20, right: 20,
bottom: 20 bottom: 20
}, },
series: [ series: [
{ {
name: name, name: name,
type: "bar", type: "bar",
data: stats.map(function (v) { data: stats.map(function (v) {
return v.count; return v.count / axis.divider;
}), }),
itemStyle: { itemStyle: {
color: "#9DD3E8" color: "#9DD3E8"
}, },
barWidth: "20em" barWidth: "20em"
} }
], ],
animation: true animation: true
} }
chart.setOption(option) chart.setOption(option)
chart.resize() chart.resize()
} }
this.resizeChart = function (chartId) { this.resizeChart = function (chartId) {
let chartBox = document.getElementById(chartId) let chartBox = document.getElementById(chartId)
if (chartBox == null) { if (chartBox == null) {
return return
} }
let chart = echarts.init(chartBox) let chart = echarts.init(chartBox)
chart.resize() chart.resize()
} }
this.processMaxUnit = function (stats) {
let max = stats.$map(function (k, v) {
return v.count
}).$max()
let divider = 0
let unit = ""
if (max >= 1000 * 1000 * 1000) {
unit = "B"
divider = 1000 * 1000 * 1000
} else if (max >= 1000 * 1000) {
unit = "M"
divider = 1000 * 1000
} else if (max >= 1000) {
unit = "K"
divider = 1000
}
stats.forEach(function (v) {
v.rawCount = v.count
if (divider > 0) {
v.count /= divider
}
})
return unit
}
}) })