yhl452493373/frps-panel
1
0
Fork 0
mirror of https://github.com/yhl452493373/frps-panel.git synced 2026-04-04 06:16:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

complete show all frp server api info

Browse Source
This commit is contained in:
杨黄林
2023-09-10 15:06:09 +08:00
parent 91c202c786
commit c95ef224d8
7 changed files with 535 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
assets/static/js/index-proxy-list.js
View File

@@ -34,25 +34,47 @@ var loadProxyInfo = (function ($) {
function renderProxyListTable(data, proxyType) {
var $section = $('#content > section');
var cols = [
{field: 'id', title: '', width: 30, templet: '#toggleProxyInfoArrowTemplate'},
{field: 'id', type: 'space', width: 60, align: 'center', templet: '#toggleProxyInfoArrowTemplate'},
{field: 'name', title: 'Name', sort: true},
{
field: 'port', title: 'Port', sort: true, templet: '<span>{{ d.conf.remote_port }}</span>'
field: 'port', title: 'Port', width: '12%', sort: true, templet: '<span>{{ d.conf.remote_port }}</span>'
},
{field: 'cur_conns', title: 'Connections', sort: true},
{field: 'cur_conns', title: 'Connections', minWidth: 140, width: '12%', sort: true},
{
field: 'today_traffic_in', title: 'Traffic In', sort: true, templet: function (d) {
field: 'today_traffic_in',
title: 'Traffic In',
minWidth: 140,
width: '12%',
sort: true,
templet: function (d) {
return size(d.today_traffic_in);
}
},
{
field: 'today_traffic_out', title: 'Traffic Out', sort: true, templet: function (d) {
field: 'today_traffic_out',
title: 'Traffic Out',
minWidth: 140,
width: '12%',
sort: true,
templet: function (d) {
return size(d.today_traffic_out);
}
},
{field: 'client_version', title: 'ClientVersion', sort: true},
{field: 'status', title: 'Status', sort: true}
{field: 'client_version', title: 'ClientVersion', minWidth: 140, width: '12%', sort: true},
{field: 'status', title: 'Status', width: '12%', sort: true}
];
proxyType = proxyType.toLowerCase();
if (proxyType === 'http' || proxyType === 'https') {
data.forEach(function (temp) {
if (proxyType === 'http') {
temp.conf.remote_port = http_port;
} else if (proxyType === 'https') {
temp.conf.remote_port = https_port;
}
});
}
var proxyListTable = layui.table.render({
elem: '#proxyListTable',
height: $section.height(),
@@ -89,5 +111,113 @@ var loadProxyInfo = (function ($) {
}
}
/**
* load traffic statistics data
*/
function loadTrafficStatistics() {
var proxyName = $(this).closest('.layui-row').find('input').val();
var loading = layui.layer.load();
$.getJSON('/proxy/api/traffic/' + proxyName).done(function (result) {
if (result.success) {
renderTrafficChart(JSON.parse(result.data));
} else {
layui.layer.msg(result.message);
}
}).always(function () {
layui.layer.close(loading);
});
}
/**
* render traffic statistics chart
* @param data traffic data
*/
function renderTrafficChart(data) {
var html = layui.laytpl($('#trafficStaticTemplate').html()).render();
var dates = [];
var now = new Date();
for (var i = 0; i < data.traffic_in.length; i++) {
dates.push(now.getFullYear() + "/" + (now.getMonth() + 1) + "/" + now.getDate());
now.setDate(now.getDate() - 1);
}
layui.layer.open({
title: 'Traffic Statistics',
type: 1,
content: html,
area: ['800px', '400px'],
success: function () {
var chartDom = document.getElementById('trafficBarChart');
var chart = echarts.init(chartDom);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: function (data) {
var html = ''
if (data.length > 0) {
html += data[0].name + '<br/>'
}
for (var v of data) {
var colorEl = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + v.color + '"></span>'
html += colorEl + v.seriesName + ': ' + size(v.value) + '<br/>'
}
return html
},
},
legend: {
data: ['Traffic In', 'Traffic Out'],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: dates.reverse(),
},
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: function (value) {
return size(value)
},
},
},
],
series: [
{
name: 'Traffic In',
type: 'bar',
data: data.traffic_in.reverse(),
},
{
name: 'Traffic Out',
type: 'bar',
data: data.traffic_out.reverse(),
},
],
};
option && chart.setOption(option);
}
});
}
/**
* document event
*/
(function bindDocumentEvent() {
$(document).on('click.trafficStatistics', '.traffic-statistics', function () {
loadTrafficStatistics.call(this);
});
})();
return loadProxyInfo;
})(layui.$);