frp/web/frpc/src/components/Overview.vue

55 lines
1.7 KiB
Vue
Raw Normal View History

2019-02-01 19:26:10 +08:00
<template>
<div>
<el-row>
<el-col :md="24">
<div>
2024-11-29 16:36:59 +08:00
<el-table :data="status" stripe style="width: 100%" :default-sort="{ prop: 'type', order: 'ascending' }">
<el-table-column prop="name" :label="t('OverView.name')" sortable></el-table-column>
<el-table-column prop="type" :label="t('OverView.type')" width="150" sortable></el-table-column>
<el-table-column prop="local_addr" :label="t('OverView.local_addr')" width="200" sortable></el-table-column>
<el-table-column prop="plugin" :label="t('OverView.plugin')" width="200" sortable></el-table-column>
<el-table-column prop="remote_addr" :label="t('OverView.remote_addr')" sortable></el-table-column>
<el-table-column prop="status" :label="t('OverView.status')" width="150" sortable></el-table-column>
<el-table-column prop="err" :label="t('OverView.err')"></el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</div>
2019-02-01 19:26:10 +08:00
</template>
<script setup lang="ts">
2023-02-26 02:54:53 +08:00
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
2024-11-29 16:36:59 +08:00
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
2023-02-26 02:54:53 +08:00
let status = ref<any[]>([])
const fetchData = () => {
2023-02-26 02:54:53 +08:00
fetch('/api/status', { credentials: 'include' })
.then((res) => {
2023-02-26 02:54:53 +08:00
return res.json()
})
.then((json) => {
2023-02-26 02:54:53 +08:00
status.value = new Array()
for (let key in json) {
for (let ps of json[key]) {
console.log(ps)
status.value.push(ps)
}
}
})
2023-02-26 02:54:53 +08:00
.catch((err) => {
ElMessage({
showClose: true,
2023-02-26 02:54:53 +08:00
message: 'Get status info from frpc failed!' + err,
type: 'warning',
})
})
}
fetchData()
2019-02-01 19:26:10 +08:00
</script>
<style></style>