Dispark/frp
1
0
Fork 0
mirror of https://github.com/fatedier/frp.git synced 2026-03-24 09:08:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

web/frpc: upgrade vue and element-plus (#3322)

Browse Source
This commit is contained in:
fatedier
2023-02-20 23:52:55 +08:00
committed by GitHub
parent 24f0b3afa5
commit fe8374e99b
36 changed files with 2910 additions and 5801 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
web/frpc/src/components/Overview.vue
View File

@@ -1,75 +1,91 @@
<template>
<div>
<el-row>
<el-col :md="24">
<div>
<el-table :data="status" stripe style="width: 100%" :default-sort="{prop: 'type', order: 'ascending'}">
<el-table-column prop="name" label="name"></el-table-column>
<el-table-column prop="type" label="type" width="150"></el-table-column>
<el-table-column prop="local_addr" label="local address" width="200"></el-table-column>
<el-table-column prop="plugin" label="plugin" width="200"></el-table-column>
<el-table-column prop="remote_addr" label="remote address"></el-table-column>
<el-table-column prop="status" label="status" width="150"></el-table-column>
<el-table-column prop="err" label="info"></el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</div>
<div>
<el-row>
<el-col :md="24">
<div>
<el-table
:data="status"
stripe
style="width: 100%"
:default-sort="{ prop: 'type', order: 'ascending' }"
>
<el-table-column prop="name" label="name"></el-table-column>
<el-table-column
prop="type"
label="type"
width="150"
></el-table-column>
<el-table-column
prop="local_addr"
label="local address"
width="200"
></el-table-column>
<el-table-column
prop="plugin"
label="plugin"
width="200"
></el-table-column>
<el-table-column
prop="remote_addr"
label="remote address"
></el-table-column>
<el-table-column
prop="status"
label="status"
width="150"
></el-table-column>
<el-table-column prop="err" label="info"></el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
status: new Array(),
}
},
created() {
this.fetchData()
},
watch: {
'$route': 'fetchData'
},
methods: {
fetchData() {
fetch('/api/status', {credentials: 'include'})
.then(res => {
return res.json()
}).then(json => {
this.status = new Array()
for (let s of json.tcp) {
this.status.push(s)
}
for (let s of json.udp) {
this.status.push(s)
}
for (let s of json.http) {
this.status.push(s)
}
for (let s of json.https) {
this.status.push(s)
}
for (let s of json.stcp) {
this.status.push(s)
}
for (let s of json.sudp) {
this.status.push(s)
}
for (let s of json.xtcp) {
this.status.push(s)
}
}).catch( err => {
this.$message({
showClose: true,
message: 'Get status info from frpc failed!',
type: 'warning'
})
})
}
}
}
<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
let status = ref<any[]>([]);
const fetchData = () => {
fetch("/api/status", { credentials: "include" })
.then((res) => {
return res.json();
})
.then((json) => {
status.value = new Array();
for (let s of json.tcp) {
status.value.push(s);
}
for (let s of json.udp) {
status.value.push(s);
}
for (let s of json.http) {
status.value.push(s);
}
for (let s of json.https) {
status.value.push(s);
}
for (let s of json.stcp) {
status.value.push(s);
}
for (let s of json.sudp) {
status.value.push(s);
}
for (let s of json.xtcp) {
status.value.push(s);
}
})
.catch(() => {
ElMessage({
showClose: true,
message: "Get status info from frpc failed!",
type: "warning",
});
});
};
fetchData();
</script>
<style>
</style>
<style></style>