web/frps: upgrade vue and element-plus (#3310)

This commit is contained in:
fatedier
2023-02-16 02:45:48 +08:00
committed by GitHub
parent 39941117b6
commit 24f0b3afa5
48 changed files with 3925 additions and 7309 deletions

View File

@@ -1,186 +0,0 @@
import Humanize from "humanize-plus"
import echarts from "echarts/lib/echarts"
import "echarts/theme/macarons"
import "echarts/lib/chart/bar"
import "echarts/lib/chart/pie"
import "echarts/lib/component/tooltip"
import "echarts/lib/component/title"
function DrawTrafficChart(elementId, trafficIn, trafficOut) {
let myChart = echarts.init(document.getElementById(elementId), 'macarons');
myChart.showLoading()
let option = {
title: {
text: 'Network Traffic',
subtext: 'today',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: function(v) {
return Humanize.fileSize(v.data.value) + " (" + v.percent + "%)"
}
},
series: [{
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [{
value: trafficIn,
name: 'Traffic In'
}, {
value: trafficOut,
name: 'Traffic Out'
}, ],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
myChart.setOption(option);
myChart.hideLoading()
}
function DrawProxyChart(elementId, serverInfo) {
let myChart = echarts.init(document.getElementById(elementId), 'macarons')
myChart.showLoading()
let option = {
title: {
text: 'Proxies',
subtext: 'now',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: function(v) {
return v.data.value
}
},
series: [{
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
if (serverInfo.proxy_type_count.tcp != null && serverInfo.proxy_type_count.tcp != 0) {
option.series[0].data.push({value: serverInfo.proxy_type_count.tcp, name: 'TCP'})
}
if (serverInfo.proxy_type_count.udp != null && serverInfo.proxy_type_count.udp != 0) {
option.series[0].data.push({value: serverInfo.proxy_type_count.udp, name: 'UDP'})
}
if (serverInfo.proxy_type_count.http != null && serverInfo.proxy_type_count.http != 0) {
option.series[0].data.push({value: serverInfo.proxy_type_count.http, name: 'HTTP'})
}
if (serverInfo.proxy_type_count.https != null && serverInfo.proxy_type_count.https != 0) {
option.series[0].data.push({value: serverInfo.proxy_type_count.https, name: 'HTTPS'})
}
if (serverInfo.proxy_type_count.stcp != null && serverInfo.proxy_type_count.stcp != 0) {
option.series[0].data.push({value: serverInfo.proxy_type_count.stcp, name: 'STCP'})
}
if (serverInfo.proxy_type_count.sudp != null && serverInfo.proxy_type_count.sudp != 0) {
option.series[0].data.push({value: serverInfo.proxy_type_count.sudp, name: 'SUDP'})
}
if (serverInfo.proxy_type_count.xtcp != null && serverInfo.proxy_type_count.xtcp != 0) {
option.series[0].data.push({value: serverInfo.proxy_type_count.xtcp, name: 'XTCP'})
}
myChart.setOption(option);
myChart.hideLoading()
}
// 7 days
function DrawProxyTrafficChart(elementId, trafficInArr, trafficOutArr) {
let params = {
width: '600px',
height: '400px'
}
let myChart = echarts.init(document.getElementById(elementId), 'macarons', params);
myChart.showLoading()
trafficInArr = trafficInArr.reverse()
trafficOutArr = trafficOutArr.reverse()
let now = new Date()
now = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6)
let dates = new Array()
for (let i = 0; i < 7; i++) {
dates.push(now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate())
now = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1)
}
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(data) {
let html = ''
if (data.length > 0) {
html += data[0].name + '<br/>'
}
for (let v of data) {
let 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 + ': ' + Humanize.fileSize(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
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: function(value) {
return Humanize.fileSize(value)
}
}
}],
series: [{
name: 'Traffic In',
type: 'bar',
data: trafficInArr
}, {
name: 'Traffic Out',
type: 'bar',
data: trafficOutArr
}]
};
myChart.setOption(option);
myChart.hideLoading()
}
export {
DrawTrafficChart,
DrawProxyChart,
DrawProxyTrafficChart
}

293
web/frps/src/utils/chart.ts Normal file
View File

@@ -0,0 +1,293 @@
import * as Humanize from 'humanize-plus'
import * as echarts from 'echarts/core'
import { PieChart, BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { LabelLayout } from 'echarts/features'
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
} from 'echarts/components'
echarts.use([
PieChart,
BarChart,
CanvasRenderer,
LabelLayout,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
])
function DrawTrafficChart(
elementId: string,
trafficIn: number,
trafficOut: number
) {
const myChart = echarts.init(
document.getElementById(elementId) as HTMLElement,
'macarons'
)
myChart.showLoading()
const option = {
title: {
text: 'Network Traffic',
subtext: 'today',
left: 'center',
},
tooltip: {
trigger: 'item',
formatter: function (v: any) {
return Humanize.fileSize(v.data.value) + ' (' + v.percent + '%)'
},
},
legend: {
orient: 'vertical',
left: 'left',
data: ['Traffic In', 'Traffic Out'],
},
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{
value: trafficIn,
name: 'Traffic In',
},
{
value: trafficOut,
name: 'Traffic Out',
},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
}
myChart.setOption(option)
myChart.hideLoading()
}
function DrawProxyChart(elementId: string, serverInfo: any) {
const myChart = echarts.init(
document.getElementById(elementId) as HTMLElement,
'macarons'
)
myChart.showLoading()
const option = {
title: {
text: 'Proxies',
subtext: 'now',
left: 'center',
},
tooltip: {
trigger: 'item',
formatter: function (v: any) {
return String(v.data.value)
},
},
legend: {
orient: 'vertical',
left: 'left',
data: <string[]>[],
},
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: <any[]>[],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
}
if (
serverInfo.proxy_type_count.tcp != null &&
serverInfo.proxy_type_count.tcp != 0
) {
option.series[0].data.push({
value: serverInfo.proxy_type_count.tcp,
name: 'TCP',
})
option.legend.data.push('TCP')
}
if (
serverInfo.proxy_type_count.udp != null &&
serverInfo.proxy_type_count.udp != 0
) {
option.series[0].data.push({
value: serverInfo.proxy_type_count.udp,
name: 'UDP',
})
option.legend.data.push('UDP')
}
if (
serverInfo.proxy_type_count.http != null &&
serverInfo.proxy_type_count.http != 0
) {
option.series[0].data.push({
value: serverInfo.proxy_type_count.http,
name: 'HTTP',
})
option.legend.data.push('HTTP')
}
if (
serverInfo.proxy_type_count.https != null &&
serverInfo.proxy_type_count.https != 0
) {
option.series[0].data.push({
value: serverInfo.proxy_type_count.https,
name: 'HTTPS',
})
option.legend.data.push('HTTPS')
}
if (
serverInfo.proxy_type_count.stcp != null &&
serverInfo.proxy_type_count.stcp != 0
) {
option.series[0].data.push({
value: serverInfo.proxy_type_count.stcp,
name: 'STCP',
})
option.legend.data.push('STCP')
}
if (
serverInfo.proxy_type_count.sudp != null &&
serverInfo.proxy_type_count.sudp != 0
) {
option.series[0].data.push({
value: serverInfo.proxy_type_count.sudp,
name: 'SUDP',
})
option.legend.data.push('SUDP')
}
if (
serverInfo.proxy_type_count.xtcp != null &&
serverInfo.proxy_type_count.xtcp != 0
) {
option.series[0].data.push({
value: serverInfo.proxy_type_count.xtcp,
name: 'XTCP',
})
option.legend.data.push('XTCP')
}
myChart.setOption(option)
myChart.hideLoading()
}
// 7 days
function DrawProxyTrafficChart(
elementId: string,
trafficInArr: number[],
trafficOutArr: number[]
) {
const params = {
width: '600px',
height: '400px',
}
const myChart = echarts.init(
document.getElementById(elementId) as HTMLElement,
'macarons',
params
)
myChart.showLoading()
trafficInArr = trafficInArr.reverse()
trafficOutArr = trafficOutArr.reverse()
let now = new Date()
now = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6)
const dates: Array<string> = []
for (let i = 0; i < 7; i++) {
dates.push(
now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()
)
now = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1)
}
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: function (data: any) {
let html = ''
if (data.length > 0) {
html += data[0].name + '<br/>'
}
for (const v of data) {
const 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 + ': ' + Humanize.fileSize(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,
},
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: function (value: number) {
return Humanize.fileSize(value)
},
},
},
],
series: [
{
name: 'Traffic In',
type: 'bar',
data: trafficInArr,
},
{
name: 'Traffic Out',
type: 'bar',
data: trafficOutArr,
},
],
}
myChart.setOption(option)
myChart.hideLoading()
}
export { DrawTrafficChart, DrawProxyChart, DrawProxyTrafficChart }

View File

@@ -1,22 +0,0 @@
@color: red;
.el-form-item {
span {
margin-left: 15px;
}
}
.demo-table-expand {
font-size: 0;
label {
width: 90px;
color: #99a9bf;
}
.el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
}

View File

@@ -1,104 +0,0 @@
class BaseProxy {
constructor(proxyStats) {
this.name = proxyStats.name
if (proxyStats.conf != null) {
this.encryption = proxyStats.conf.use_encryption
this.compression = proxyStats.conf.use_compression
} else {
this.encryption = ""
this.compression = ""
}
this.conns = proxyStats.cur_conns
this.traffic_in = proxyStats.today_traffic_in
this.traffic_out = proxyStats.today_traffic_out
this.last_start_time = proxyStats.last_start_time
this.last_close_time = proxyStats.last_close_time
this.status = proxyStats.status
}
}
class TcpProxy extends BaseProxy {
constructor(proxyStats) {
super(proxyStats)
this.type = "tcp"
if (proxyStats.conf != null) {
this.addr = ":" + proxyStats.conf.remote_port
this.port = proxyStats.conf.remote_port
} else {
this.addr = ""
this.port = ""
}
}
}
class UdpProxy extends BaseProxy {
constructor(proxyStats) {
super(proxyStats)
this.type = "udp"
if (proxyStats.conf != null) {
this.addr = ":" + proxyStats.conf.remote_port
this.port = proxyStats.conf.remote_port
} else {
this.addr = ""
this.port = ""
}
}
}
class HttpProxy extends BaseProxy {
constructor(proxyStats, port, subdomain_host) {
super(proxyStats)
this.type = "http"
this.port = port
if (proxyStats.conf != null) {
this.custom_domains = proxyStats.conf.custom_domains
this.host_header_rewrite = proxyStats.conf.host_header_rewrite
this.locations = proxyStats.conf.locations
if (proxyStats.conf.subdomain != "") {
this.subdomain = proxyStats.conf.subdomain + "." + subdomain_host
} else {
this.subdomain = ""
}
} else {
this.custom_domains = ""
this.host_header_rewrite = ""
this.subdomain = ""
this.locations = ""
}
}
}
class HttpsProxy extends BaseProxy {
constructor(proxyStats, port, subdomain_host) {
super(proxyStats)
this.type = "https"
this.port = port
if (proxyStats.conf != null) {
this.custom_domains = proxyStats.conf.custom_domains
if (proxyStats.conf.subdomain != "") {
this.subdomain = proxyStats.conf.subdomain + "." + subdomain_host
} else {
this.subdomain = ""
}
} else {
this.custom_domains = ""
this.subdomain = ""
}
}
}
class StcpProxy extends BaseProxy {
constructor(proxyStats) {
super(proxyStats)
this.type = "stcp"
}
}
class SudpProxy extends BaseProxy {
constructor(proxyStats) {
super(proxyStats)
this.type = "sudp"
}
}
export {BaseProxy, TcpProxy, UdpProxy, HttpProxy, HttpsProxy, StcpProxy, SudpProxy}

138
web/frps/src/utils/proxy.ts Normal file
View File

@@ -0,0 +1,138 @@
class BaseProxy {
name: string
type: string
encryption: boolean
compression: boolean
conns: number
traffic_in: number
traffic_out: number
last_start_time: string
last_close_time: string
status: string
addr: string
port: number
custom_domains: string
host_header_rewrite: string
locations: string
subdomain: string
constructor(proxyStats: any) {
this.name = proxyStats.name
this.type = ''
if (proxyStats.conf != null) {
this.encryption = proxyStats.conf.use_encryption
this.compression = proxyStats.conf.use_compression
} else {
this.encryption = false
this.compression = false
}
this.conns = proxyStats.cur_conns
this.traffic_in = proxyStats.today_traffic_in
this.traffic_out = proxyStats.today_traffic_out
this.last_start_time = proxyStats.last_start_time
this.last_close_time = proxyStats.last_close_time
this.status = proxyStats.status
this.addr = ''
this.port = 0
this.custom_domains = ''
this.host_header_rewrite = ''
this.locations = ''
this.subdomain = ''
}
}
class TCPProxy extends BaseProxy {
constructor(proxyStats: any) {
super(proxyStats)
this.type = 'tcp'
if (proxyStats.conf != null) {
this.addr = ':' + proxyStats.conf.remote_port
this.port = proxyStats.conf.remote_port
} else {
this.addr = ''
this.port = 0
}
}
}
class UDPProxy extends BaseProxy {
constructor(proxyStats: any) {
super(proxyStats)
this.type = 'udp'
if (proxyStats.conf != null) {
this.addr = ':' + proxyStats.conf.remote_port
this.port = proxyStats.conf.remote_port
} else {
this.addr = ''
this.port = 0
}
}
}
class HTTPProxy extends BaseProxy {
constructor(proxyStats: any, port: number, subdomain_host: string) {
super(proxyStats)
this.type = 'http'
this.port = port
if (proxyStats.conf != null) {
this.custom_domains = proxyStats.conf.custom_domains
this.host_header_rewrite = proxyStats.conf.host_header_rewrite
this.locations = proxyStats.conf.locations
if (proxyStats.conf.subdomain != '') {
this.subdomain = proxyStats.conf.subdomain + '.' + subdomain_host
} else {
this.subdomain = ''
}
} else {
this.custom_domains = ''
this.host_header_rewrite = ''
this.subdomain = ''
this.locations = ''
}
}
}
class HTTPSProxy extends BaseProxy {
constructor(proxyStats: any, port: number, subdomain_host: string) {
super(proxyStats)
this.type = 'https'
this.port = port
if (proxyStats.conf != null) {
this.custom_domains = proxyStats.conf.custom_domains
if (proxyStats.conf.subdomain != '') {
this.subdomain = proxyStats.conf.subdomain + '.' + subdomain_host
} else {
this.subdomain = ''
}
} else {
this.custom_domains = ''
this.subdomain = ''
}
}
}
class STCPProxy extends BaseProxy {
constructor(proxyStats: any) {
super(proxyStats)
this.type = 'stcp'
}
}
class SUDPProxy extends BaseProxy {
constructor(proxyStats: any) {
super(proxyStats)
this.type = 'sudp'
}
}
export {
BaseProxy,
TCPProxy,
UDPProxy,
HTTPProxy,
HTTPSProxy,
STCPProxy,
SUDPProxy,
}