解决图表切换的卡顿问题

This commit is contained in:
lanrenwo 2022-09-15 14:15:21 +08:00
parent 5b220838d9
commit f2c649d65b
1 changed files with 38 additions and 27 deletions

View File

@ -217,51 +217,62 @@ export default {
}); });
}, },
formatOnline(data) { formatOnline(data) {
let timeFormat = data.scope == "rt" || data.scope == "1h" || data.scope == "24h" ? "h:i:s" : "m/d h:i:s" let timeFormat = this.getTimeFormat(data.scope)
let datas = data.datas let chartData = this.lineChart[data.action]
this.lineChart.online.xname = [] let datas = data.datas
this.lineChart.online.xdata["在线人数"] = [] chartData.xname = []
chartData.xdata["在线人数"] = []
for(var i=0; i<datas.length;i++){ for(var i=0; i<datas.length;i++){
this.lineChart.online.xname[i] = this.dateFormat(datas[i].created_at, timeFormat) chartData.xname[i] = this.dateFormat(datas[i].created_at, timeFormat)
this.lineChart.online.xdata["在线人数"][i] = datas[i].num chartData.xdata["在线人数"][i] = datas[i].num
} }
// 线 // 线
if (data.scope == "rt") { if (data.scope == "rt") {
this.counts.online = datas[datas.length - 1].num this.counts.online = datas[datas.length - 1].num
} }
this.lineChart[data.action] = chartData
}, },
formatNetwork(data) { formatNetwork(data) {
let timeFormat = data.scope == "rt" || data.scope == "1h" || data.scope == "24h" ? "h:i:s" : "m/d h:i:s" let timeFormat = this.getTimeFormat(data.scope)
let datas = data.datas let chartData = this.lineChart[data.action]
this.lineChart.network.xname = [] let datas = data.datas
this.lineChart.network.xdata["上行流量"] = [] chartData.xname = []
this.lineChart.network.xdata["下行流量"] = [] chartData.xdata["上行流量"] = []
chartData.xdata["下行流量"] = []
for(var i=0; i<datas.length;i++){ for(var i=0; i<datas.length;i++){
this.lineChart.network.xname[i] = this.dateFormat(datas[i].created_at, timeFormat) chartData.xname[i] = this.dateFormat(datas[i].created_at, timeFormat)
this.lineChart.network.xdata["上行流量"][i] = this.toMbps(datas[i].up) chartData.xdata["上行流量"][i] = this.toMbps(datas[i].up)
this.lineChart.network.xdata["下行流量"][i] = this.toMbps(datas[i].down) chartData.xdata["下行流量"][i] = this.toMbps(datas[i].down)
} }
this.lineChart[data.action] = chartData
}, },
formatCpu(data) { formatCpu(data) {
let timeFormat = data.scope == "rt" || data.scope == "1h" || data.scope == "24h" ? "h:i:s" : "m/d h:i:s" let timeFormat = this.getTimeFormat(data.scope)
let datas = data.datas let chartData = this.lineChart[data.action]
this.lineChart.cpu.xname = [] let datas = data.datas
this.lineChart.cpu.xdata["CPU"] = [] chartData.xname = []
chartData.xdata["CPU"] = []
for(var i=0; i<datas.length;i++){ for(var i=0; i<datas.length;i++){
this.lineChart.cpu.xname[i] = this.dateFormat(datas[i].created_at, timeFormat) chartData.xname[i] = this.dateFormat(datas[i].created_at, timeFormat)
this.lineChart.cpu.xdata["CPU"][i] = this.toDecimal(datas[i].percent) chartData.xdata["CPU"][i] = this.toDecimal(datas[i].percent)
} }
this.lineChart[data.action] = chartData
}, },
formatMem(data) { formatMem(data) {
let timeFormat = data.scope == "rt" || data.scope == "1h" || data.scope == "24h" ? "h:i:s" : "m/d h:i:s" let timeFormat = this.getTimeFormat(data.scope)
let datas = data.datas let chartData = this.lineChart[data.action]
this.lineChart.mem.xname = [] let datas = data.datas
this.lineChart.mem.xdata["内存"] = [] chartData.xname = []
chartData.xdata["内存"] = []
for(var i=0; i<datas.length;i++){ for(var i=0; i<datas.length;i++){
this.lineChart.mem.xname[i] = this.dateFormat(datas[i].created_at, timeFormat) chartData.xname[i] = this.dateFormat(datas[i].created_at, timeFormat)
this.lineChart.mem.xdata["内存"][i] = this.toDecimal(datas[i].percent) chartData.xdata["内存"][i] = this.toDecimal(datas[i].percent)
} }
}, this.lineChart[data.action] = chartData
},
getTimeFormat(scope) {
return (scope == "rt" || scope == "1h" || scope == "24h") ? "h:i:s" : "m/d h:i:s"
},
toMbps(bytes) { toMbps(bytes) {
if (bytes == 0) return 0 if (bytes == 0) return 0
return (bytes / Math.pow(1024, 2) * 8).toFixed(2) * 1 return (bytes / Math.pow(1024, 2) * 8).toFixed(2) * 1