Dashboard

This commit is contained in:
xiaomlove
2021-05-17 21:07:50 +08:00
parent fa4f9a29c5
commit d651762c1b
16 changed files with 685 additions and 854 deletions
+10 -4
View File
@@ -47,9 +47,9 @@
<el-container class="content">
<Header :router-name="state.routerName"/>
<div class="main">
<router-view />
<router-view @update-version="updateVersion" />
</div>
<Footer />
<Footer :version="state.version"/>
</el-container>
</el-container>
<el-container v-else class="container">
@@ -80,7 +80,8 @@ export default {
count: {
number: 1
},
routerName: router.name
routerName: router.name,
version: '',
})
onMounted(() => {
@@ -106,8 +107,13 @@ export default {
state.currentPath = to.path
document.title = pathMap[to.name]
})
const updateVersion = (val) => {
// console.log('updateVersion', val)
state.version = val.nexus_version.value
}
return {
state
state,
updateVersion
}
}
}
+6 -3
View File
@@ -1,15 +1,18 @@
<template>
<div class="footer">
<div class="left">Powered by <a target="_blank" href="https://nexusphp.org/">NexusPHP</a></div>
<div class="right">
Version: 1.6.0-beta6
<div class="right" v-if="version">
Version: {{version}}
</div>
</div>
</template>
<script>
export default {
name: 'Footer'
name: 'Footer',
props: {
version: String
}
}
</script>
+13
View File
@@ -90,6 +90,19 @@ const api = {
listSetting: (params) => {
return axios.get('settings', {params});
},
listStatData: () => {
return axios.get('dashboard/stat-data')
},
listLatestUser: () => {
return axios.get('dashboard/latest-user')
},
listLatestTorrent: () => {
return axios.get('dashboard/latest-torrent')
},
listSystemInfo: () => {
return axios.get('dashboard/system-info')
}
}
export default api
+139 -1
View File
@@ -1,3 +1,141 @@
<template>
<div>Dashboard</div>
<el-row>
<el-col :span="12" class="stat-box">
<el-card>
<template #header>{{latestUser.data.page_title}}</template>
<el-table
:data="latestUser.data.data"
v-loading="latestUser.loading"
>
<el-table-column
prop="username"
label="Username"
></el-table-column>
<el-table-column
prop="email"
label="Email"
></el-table-column>
<el-table-column
prop="status"
label="Status"
></el-table-column>
<el-table-column
prop="added"
label="Added"
></el-table-column>
</el-table>
</el-card>
</el-col>
<el-col :span="12" class="stat-box">
<el-card>
<template #header>{{latestTorrent.data.page_title}}</template>
<el-table
:data="latestTorrent.data.data"
v-loading="latestTorrent.loading"
>
<el-table-column
prop="name"
label="Name"
width="250"
></el-table-column>
<el-table-column
prop="user.username"
label="User"
></el-table-column>
<el-table-column
prop="size_human"
label="Size"
></el-table-column>
<el-table-column
prop="added"
label="Added"
></el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
<div v-loading="statData.loading">
<el-row class="row">
<el-col :span="12" class="stat-box">
<el-descriptions :title="statData.user.text" :column="2" border>
<el-descriptions-item :label="item.text" v-for="item in statData.user.data">{{item.value}}</el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="12" class="stat-box">
<el-descriptions :title="statData.user_class.text" :column="2" border>
<el-descriptions-item :label="item.class_text" v-for="item in statData.user_class.data">{{item.counts}}</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
<el-row class="row">
<el-col :span="12" class="stat-box">
<el-descriptions :title="statData.torrent.text" :column="2" border>
<el-descriptions-item :label="item.text" v-for="item in statData.torrent.data">{{item.value}}</el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="12" class="stat-box">
<el-descriptions :title="statData.system_info.text" :column="2" border>
<el-descriptions-item :label="item.text" v-for="item in statData.system_info.data">{{item.value}}</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
</div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import api from '../../utils/api'
export default {
name: "Dashboard",
emits: ['updateVersion'],
setup(props, context) {
const router = useRouter()
const state = reactive({
statData: {
loading: true,
user: {},
torrent: {},
user_class: {},
system_info: {}
},
latestUser: {
loading: true,
data: []
},
latestTorrent: {
loading: true,
data: []
}
})
onMounted(() => {
api.listStatData().then(res => {
state.statData = res.data
state.statData.loading = false
context.emit('updateVersion', res.data.system_info.data)
})
api.listLatestUser().then(res => {
state.latestUser.data = res.data
state.latestUser.loading = false
})
api.listLatestTorrent().then(res => {
state.latestTorrent.data = res.data
state.latestTorrent.loading = false
})
})
return {
...toRefs(state)
}
}
}
</script>
<style lang="scss" scoped>
.stat-box {
padding: 15px;
}
</style>