113 lines
3.0 KiB
Vue
113 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import UserList from "~/components/ServerUserPage/UserList.vue";
|
|
import MiniCard from "~/components/Cards/MiniCard.vue";
|
|
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
|
|
import Process from "~/pages/host/process.vue";
|
|
import NetworkList from "~/pages/host/networkList.vue";
|
|
|
|
definePageMeta({
|
|
layout: 'main',
|
|
middleware: ['auth']
|
|
})
|
|
const reload = ref(false)
|
|
const pageReload=ref(false)
|
|
const route = useRoute()
|
|
const mainLayoutStore=useMainLayoutStore()
|
|
const userId=computed(()=>route.params.id as string)
|
|
watch(()=>userId.value,()=>{
|
|
reload.value=true;
|
|
nextTick(()=>{
|
|
reload.value=false;
|
|
})
|
|
})
|
|
watch(()=>mainLayoutStore.SelectServer.id,()=>{
|
|
pageReload.value=true;
|
|
setTimeout(()=> {
|
|
pageReload.value = false;
|
|
},400)
|
|
})
|
|
const processList=ref<string[]>([])
|
|
const updateProcessList=(data:string[])=>{
|
|
processList.value=data
|
|
}
|
|
watch(() => mainLayoutStore.SelectServer.id, () => {
|
|
navigateTo('/serverUser/all')
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="server-user-layout" v-if="!pageReload">
|
|
<UserList />
|
|
<XScroll>
|
|
<div class="top" v-if="!reload&&userId!=='all'">
|
|
<MiniCard :title="`CPU使用率-用户${userId}`" :watcher="`CpuUsage-${userId}`"/>
|
|
<MiniCard :title="`内存总使用率-用户${userId}`" :watcher="`MemoryUsage-${userId}`"/>
|
|
<MiniCard :title="`磁盘总使用率`" watcher="DiskTotalUsage"/>
|
|
<MiniCard :title="`网络接口使用率`" watcher="InterfaceTotalUtilizationPercentage"/>
|
|
</div>
|
|
<div class="top" v-if="!reload&&userId==='all'">
|
|
<MiniCard title="CPU总使用率" :watcher="`CpuTotalUsage`"/>
|
|
<MiniCard title="内存总使用率" :watcher="`MemoryTotalUsage`"/>
|
|
<MiniCard title="磁盘总使用率" watcher="DiskTotalUsage"/>
|
|
<MiniCard title="网络接口使用率" watcher="InterfaceTotalUtilizationPercentage"/>
|
|
</div>
|
|
</XScroll>
|
|
<div class="box" >
|
|
<NuxtPage v-if="!reload"/>
|
|
</div>
|
|
<div class="bottom-box">
|
|
<div class="process-box" v-if="!reload">
|
|
<process :user-name="userId==='all'?'':userId" @update="updateProcessList" />
|
|
</div>
|
|
<div class="net-box" v-if="!reload">
|
|
<network-list :filter="userId!=='all'" :pids="processList"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import "base";
|
|
.server-user-layout{
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: minmax(auto,400px) 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
min-height: 800px;
|
|
gap: $gap*2;
|
|
}
|
|
.top{
|
|
display: flex;
|
|
gap: $gap;
|
|
width: 100%;
|
|
>*{
|
|
flex: 1;
|
|
}
|
|
}
|
|
.box{
|
|
background: $light-bg-color;
|
|
border-radius: $radius;
|
|
border: $border;
|
|
padding: $padding;
|
|
}
|
|
.bottom-box{
|
|
border-radius: $radius;
|
|
display: flex;
|
|
gap: $gap*2;
|
|
grid-column: 1/3;
|
|
min-height: 1000px;
|
|
}
|
|
//窗体小于800
|
|
@media screen and (max-width: 1600px) {
|
|
.bottom-box{
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.process-box,.net-box{
|
|
flex: 1;
|
|
border: $border;
|
|
border-radius: $radius;
|
|
background: $light-bg-color;
|
|
}
|
|
|
|
</style> |