LoongPanel-Asp/web/pages/host/networkList.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>