首页图表可查看用户组下的在线数、网络吞吐量

This commit is contained in:
lanrenwo 2022-09-18 16:17:11 +08:00
parent 5586b27319
commit 48bebadc6b
7 changed files with 179 additions and 14 deletions

View File

@ -47,6 +47,16 @@ func GroupNames(w http.ResponseWriter, r *http.Request) {
RespSucess(w, data)
}
func GroupNamesIds(w http.ResponseWriter, r *http.Request) {
var names = dbdata.GetGroupNamesIds()
data := map[string]interface{}{
"count": len(names),
"page_size": 0,
"datas": names,
}
RespSucess(w, data)
}
func GroupDetail(w http.ResponseWriter, r *http.Request) {
_ = r.ParseForm()
idS := r.FormValue("id")

View File

@ -62,6 +62,7 @@ func StartAdmin() {
r.HandleFunc("/group/list", GroupList)
r.HandleFunc("/group/names", GroupNames)
r.HandleFunc("/group/names_ids", GroupNamesIds)
r.HandleFunc("/group/detail", GroupDetail)
r.HandleFunc("/group/set", GroupSet)
r.HandleFunc("/group/del", GroupDel)

View File

@ -32,6 +32,11 @@ type ValData struct {
Note string `json:"note"`
}
type GroupNameId struct {
Id int `json:"id"`
Name string `json:"name"`
}
// type Group struct {
// Id int `json:"id" xorm:"pk autoincr not null"`
// Name string `json:"name" xorm:"varchar(60) not null unique"`
@ -64,6 +69,20 @@ func GetGroupNames() []string {
return names
}
func GetGroupNamesIds() []GroupNameId {
var datas []Group
err := Find(&datas, 0, 0)
if err != nil {
base.Error(err)
return nil
}
var names []GroupNameId
for _, v := range datas {
names = append(names, GroupNameId{Id: v.Id, Name: v.Name})
}
return names
}
func SetGroup(g *Group) error {
var err error
if g.Name == "" {

View File

@ -63,4 +63,10 @@ func TestGetGroupNames(t *testing.T) {
for _, v := range gs {
ast.Equal(true, utils.InArrStr(gAll, v))
}
gni := GetGroupNamesIds()
for _, v := range gni {
ast.NotEqual(0, v.Id)
ast.Equal(true, utils.InArrStr(gAll, v.Name))
}
}

View File

@ -0,0 +1,55 @@
package dbdata
import (
"encoding/json"
"testing"
"github.com/stretchr/testify/assert"
)
func TestStatsInfo(t *testing.T) {
ast := assert.New(t)
preIpData()
defer closeIpdata()
ast.True(StatsInfoIns.ValidAction("online"))
ast.False(StatsInfoIns.ValidAction("diskio"))
ast.True(StatsInfoIns.ValidScope("30d"))
ast.False(StatsInfoIns.ValidScope("60d"))
up := uint32(100)
down := uint32(300)
upGroups := map[int]uint32{1: up}
downGroups := map[int]uint32{1: down}
numGroups := map[int]int{1: 5}
// online
numData, _ := json.Marshal(numGroups)
so := &StatsOnline{Num: 1, NumGroups: string(numData)}
// network
upData, _ := json.Marshal(upGroups)
downData, _ := json.Marshal(downGroups)
sn := &StatsNetwork{Up: up, Down: down, UpGroups: string(upData), DownGroups: string(downData)}
// cpu
sc := &StatsCpu{Percent: 0.3}
// mem
sm := &StatsMem{Percent: 24.50}
StatsInfoIns.SetRealTime("online", so)
StatsInfoIns.GetRealTime("online")
StatsInfoIns.SaveStatsInfo(so, sn, sc, sm)
var err error
_, err = StatsInfoIns.GetData("online", "1h")
ast.Nil(err)
_, err = StatsInfoIns.GetData("network", "1h")
ast.Nil(err)
_, err = StatsInfoIns.GetData("cpu", "1h")
ast.Nil(err)
_, err = StatsInfoIns.GetData("mem", "1h")
ast.Nil(err)
}

View File

@ -22,9 +22,9 @@ func saveStatsInfo() {
for range tick.C {
up := uint32(0)
down := uint32(0)
upGroups := make(map[string]uint32)
downGroups := make(map[string]uint32)
numGroups := make(map[string]int)
upGroups := make(map[int]uint32)
downGroups := make(map[int]uint32)
numGroups := make(map[int]int)
onlineNum := 0
sessMux.Lock()
for _, v := range sessions {
@ -32,12 +32,16 @@ func saveStatsInfo() {
if v.IsActive {
// 在线人数
onlineNum += 1
numGroups[v.Group] += 1
numGroups[v.CSess.Group.Id] += 1
// 网络吞吐
userUp := atomic.LoadUint32(&v.CSess.BandwidthUpPeriod)
userDown := atomic.LoadUint32(&v.CSess.BandwidthDownPeriod)
upGroups[v.Group] += userUp
downGroups[v.Group] += userDown
if userUp > 0 {
upGroups[v.CSess.Group.Id] += userUp
}
if userDown > 0 {
downGroups[v.CSess.Group.Id] += userDown
}
up += userUp
down += userDown
}

View File

@ -46,6 +46,12 @@
<el-row class="line-chart-box" gutter="20">
<el-col :span="12" class="line-chart-col">
<LineChart :chart-data="lineChart.online"/>
<div class="chart-group-name">
<el-select size="mini" v-model="lineChartGroup.online" @change="lineChartGroupChange('online')">
<el-option v-for="(item,index) in groupNames" :key="index" :label="item.text" :value="item.value">
</el-option>
</el-select>
</div>
<div class="time-range">
<el-radio-group v-model="lineChartScope.online" size="mini" @change="((label)=>{lineChartScopeChange('online', label)})">
<el-radio-button label="rt" >实时</el-radio-button>
@ -58,6 +64,12 @@
</el-col>
<el-col :span="12" class="line-chart-col">
<LineChart :chart-data="lineChart.network"/>
<div class="chart-group-name">
<el-select size="mini" v-model="lineChartGroup.network" @change="lineChartGroupChange('network')">
<el-option v-for="(item,index) in groupNames" :key="index" :label="item.text" :value="item.value">
</el-option>
</el-select>
</div>
<div class="time-range">
<el-radio-group v-model="lineChartScope.network" size="mini" @change="((label)=>{lineChartScopeChange('network', label)})">
<el-radio-button label="rt" >实时</el-radio-button>
@ -119,6 +131,7 @@ export default {
group: 0,
ip_map: 0,
},
groupNames:[],
lineChart: {
online: {
title: '用户在线数',
@ -160,7 +173,11 @@ export default {
network : "rt",
cpu : "rt",
mem : "rt"
},
},
lineChartGroup : {
online: "",
network: "",
}
}
},
created() {
@ -169,6 +186,7 @@ export default {
},
mounted() {
this.getData()
this.getGroups()
this.getAllStats()
const chartsTimer = setInterval(() => {
this.getAllStats()
@ -219,15 +237,22 @@ export default {
formatOnline(data) {
let timeFormat = this.getTimeFormat(data.scope)
let chartData = this.lineChart[data.action]
let datas = data.datas
let chooseGroup = this.lineChartGroup[data.action]
let datas = data.datas
let xnum = 0
chartData.xname = []
chartData.xdata["在线人数"] = []
for(var i=0; i<datas.length;i++){
chartData.xname[i] = this.dateFormat(datas[i].created_at, timeFormat)
chartData.xdata["在线人数"][i] = datas[i].num
chartData.xname[i] = this.dateFormat(datas[i].created_at, timeFormat)
xnum = datas[i].num
if (chooseGroup != "" && xnum > 0) {
let num_groups = JSON.parse(datas[i].num_groups)
xnum = ! num_groups[chooseGroup] ? 0 : num_groups[chooseGroup]
}
chartData.xdata["在线人数"][i] = xnum
}
// 线
if (data.scope == "rt") {
if (data.scope == "rt" && chooseGroup == "") {
this.counts.online = datas[datas.length - 1].num
}
this.lineChart[data.action] = chartData
@ -235,14 +260,28 @@ export default {
formatNetwork(data) {
let timeFormat = this.getTimeFormat(data.scope)
let chartData = this.lineChart[data.action]
let datas = data.datas
let chooseGroup = this.lineChartGroup[data.action]
let datas = data.datas
let xnumUp = 0, xnumDown = 0
chartData.xname = []
chartData.xdata["上行流量"] = []
chartData.xdata["下行流量"] = []
for(var i=0; i<datas.length;i++){
chartData.xname[i] = this.dateFormat(datas[i].created_at, timeFormat)
chartData.xdata["上行流量"][i] = this.toMbps(datas[i].up)
chartData.xdata["下行流量"][i] = this.toMbps(datas[i].down)
xnumUp = datas[i].up
xnumDown = datas[i].down
if (chooseGroup != "") {
if (xnumUp > 0) {
let upGroups = JSON.parse(datas[i].up_groups)
xnumUp = ! upGroups[chooseGroup] ? 0 : upGroups[chooseGroup]
}
if (xnumDown > 0) {
let downGroups = JSON.parse(datas[i].down_groups)
xnumDown = ! downGroups[chooseGroup] ? 0 : downGroups[chooseGroup]
}
}
chartData.xdata["上行流量"][i] = this.toMbps(xnumUp)
chartData.xdata["下行流量"][i] = this.toMbps(xnumDown)
}
this.lineChart[data.action] = chartData
},
@ -301,6 +340,23 @@ export default {
jump(path) {
this.$router.push(path);
},
getGroups() {
axios.get('/group/names_ids', {}).then(resp => {
var data = resp.data.data
var groupNames = []
groupNames[0] = {text:"全部", value:""}
for(var i=0; i<data.datas.length;i++){
groupNames[i+1] = {text:data.datas[i].name, value:data.datas[i].id}
}
this.groupNames = groupNames
}).catch(error => {
this.$message.error('哦,请求出错');
console.log(error);
});
},
lineChartGroupChange(action) {
this.getStatsData(action, this.lineChartScope[action]);
}
},
}
</script>
@ -309,6 +365,7 @@ export default {
.panel-group {
margin-bottom: 20px;
}
.card-panel {
display: flex;
border-radius: 12px;
@ -368,4 +425,17 @@ export default {
right: 5px;
top: 5px;
}
.chart-group-name {
position: absolute;
left: 110px;
top: 5px;
width: 130px;
font-size: 10px;
}
/deep/ .el-radio-button--mini .el-radio-button__inner {
padding: 7px 8px;
font-size: 10px;
}
</style>