LoongPanel-Asp/web/pages/host/networkList.vue

228 lines
6.3 KiB
Vue

<script setup lang="ts">
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
import {ref} from "vue";
type NetworkList= {
netId:string,
recvQ:string,
sendQ:string,
addressForm:string,
addressTo:string,
process:{
name:string,
pid:string,
}[]
}
const props=defineProps({
pids:{
type:Array<string>,
default:[]
},
filter:{
type:Boolean,
default:false,
}
})
const mainLayoutStore=useMainLayoutStore()
const lsNetworkList=ref<NetworkList[]>([])
const currentSort = ref<'netId' | 'recvQ' | 'sendQ'|'pid' | 'addressForm' | 'addressTo'|'process'>('recvQ');
const currentSortDir = ref<'asc' | 'desc'>('desc');
let interval:NodeJS.Timeout;
onMounted(()=>{
getNetworkList()
interval = setInterval(()=>{
getNetworkList();
},10000)
})
onBeforeUnmount(()=>{
clearInterval(interval);
})
const getNetworkList=()=>{
$fetch('/Api/Server/GetServerNetworkList',{
method:'GET',
params:{
ServerId:mainLayoutStore.SelectServer.value,
},
headers: {
'Content-Type': 'application/json',
'Authorization': "Bearer " + useCookie('token').value
},
baseURL:useRuntimeConfig().public.baseUrl
}).then(res=>{
console.log(res)
lsNetworkList.value=res as NetworkList[]
}).catch(err=>{
console.log(err)
})
}
const sort = (key: 'netId' | 'recvQ' | 'sendQ'|'pid' | 'addressForm' | 'addressTo'|'process') => {
if (currentSort.value === key) {
currentSortDir.value = currentSortDir.value === 'asc' ? 'desc' : 'asc';
} else {
currentSort.value = key;
currentSortDir.value = 'asc';
}
};
const sortedNetworkList = computed(() => {
//如果pids不为空则要求pid包含在pids中
let filteredList = lsNetworkList.value;
if (props.filter) {
filteredList = filteredList.filter(item => {
// 检查当前网络连接对象中的每一个 process.pid 是否包含在 pids 数组中
return item.process.some(processItem => props.pids.includes(processItem.pid));
});
}
return filteredList.sort((a, b) => {
let modifier = 1;
if (currentSortDir.value === 'desc') modifier = -1;
let aValue: number | string;
let bValue: number | string;
if (currentSort.value === 'process') {
aValue = a.process.length;
bValue = b.process.length;
} else if (currentSort.value === 'pid') {
aValue = a.process[0].pid;
bValue = b.process[0].pid;
} else {
// 如果有其他排序条件,可以在这里添加
aValue = a[currentSort.value] as string;
bValue = b[currentSort.value] as string;
}
if (aValue < bValue) return -1 * modifier;
if (aValue > bValue) return modifier;
return 0;
});
});
</script>
<template>
<div class="network-table">
<table>
<thead>
<tr>
<th @click="sort('process')">
<div>
<p>执行进程</p>
<Icon v-if="currentSort==='process'&&currentSortDir==='desc'" name="ArrowDownNarrowWide"></Icon>
<Icon v-if="currentSort==='process'&&currentSortDir==='asc'" name="ArrowUpNarrowWide"></Icon>
</div>
</th>
<th @click="sort('pid')">
<div>
<p>进程ID</p>
<Icon v-if="currentSort==='pid'&&currentSortDir==='desc'" name="ArrowDownNarrowWide"></Icon>
<Icon v-if="currentSort==='pid'&&currentSortDir==='asc'" name="ArrowUpNarrowWide"></Icon>
</div>
</th>
<th @click="sort('netId')">
<div>
<p>类型</p>
<Icon v-if="currentSort==='netId'&&currentSortDir==='desc'" name="ArrowDownNarrowWide"></Icon>
<Icon v-if="currentSort==='netId'&&currentSortDir==='asc'" name="ArrowUpNarrowWide"></Icon>
</div>
</th>
<th @click="sort('recvQ')">
<div>
<p>收包数</p>
<Icon v-if="currentSort==='recvQ'&&currentSortDir==='desc'" name="ArrowDownNarrowWide"></Icon>
<Icon v-if="currentSort==='recvQ'&&currentSortDir==='asc'" name="ArrowUpNarrowWide"></Icon>
</div>
</th>
<th @click="sort('sendQ')">
<div>
<p>发包数</p>
<Icon v-if="currentSort==='sendQ'&&currentSortDir==='desc'" name="ArrowDownNarrowWide"></Icon>
<Icon v-if="currentSort==='sendQ'&&currentSortDir==='asc'" name="ArrowUpNarrowWide"></Icon>
</div>
</th>
<th @click="sort('addressForm')">
<div>
<p>发起地址</p>
<Icon v-if="currentSort==='addressForm'&&currentSortDir==='desc'" name="ArrowDownNarrowWide"></Icon>
<Icon v-if="currentSort==='addressForm'&&currentSortDir==='asc'" name="ArrowUpNarrowWide"></Icon>
</div>
</th><th>
<div @click="sort('addressTo')">
<p>接收地址</p>
<Icon v-if="currentSort==='addressTo'&&currentSortDir==='desc'" name="ArrowDownNarrowWide"></Icon>
<Icon v-if="currentSort==='addressTo'&&currentSortDir==='asc'" name="ArrowUpNarrowWide"></Icon>
</div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in sortedNetworkList" :key="index">
<td>
<Icon name="Rss"/>
{{ item.process[0].name }}
<Tag v-if="item.process.length>1">{{item.process.length}}</Tag>
</td>
<td>{{ item.process[0].pid}}</td>
<td>{{ item.netId }}</td>
<td>{{ item.recvQ }}</td>
<td>{{ item.sendQ }}</td>
<td>{{ item.addressForm }}</td>
<td>{{ item.addressTo }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<style scoped lang="scss">
@import "base";
.network-table {
width: 100%;
padding: $padding*2;
*{
@include SC_Font;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
border-top: unset;
border-bottom: unset;
padding: 8px;
}
th {
>div{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
p{
margin: 0;
}
}
}
p,td{
color: $light-text-color;
.dark-mode &{
color: $dark-text-color;
}
}
tr:hover{
background: $light-bg-underline-color;
.dark-mode &{
background: $dark-bg-underline-color;
}
}
tr>td:first-of-type{
display: flex;
gap: $gap;
}
td:not(:first-child) {
text-align: right;
}
td:first-of-type,th:first-of-type,td:last-of-type,th:last-of-type {
border: unset;
}
}
</style>