feat:ps界面和net界面
This commit is contained in:
zhongzm
@@ -2103,6 +2103,32 @@ export default {
|
|||||||
hostSelectMore: "Load More {num}",
|
hostSelectMore: "Load More {num}",
|
||||||
hostSelectHeader: "Host List",
|
hostSelectHeader: "Host List",
|
||||||
},
|
},
|
||||||
|
ps:{
|
||||||
|
hour:"h",
|
||||||
|
min:"min",
|
||||||
|
sec:"s",
|
||||||
|
fastSpeed:"fast",
|
||||||
|
normalSpeed:"normal",
|
||||||
|
slowSpeed:"slow",
|
||||||
|
changeTime:"Refresh rate",
|
||||||
|
PID:"PID",
|
||||||
|
name:"APP name",
|
||||||
|
username:"User name",
|
||||||
|
workTime:"workTime",
|
||||||
|
numThreads:"numThreads",
|
||||||
|
cpuPercent:"cpu Percent",
|
||||||
|
diskRead:"Disk Read",
|
||||||
|
diskWrite:"DiskWrite",
|
||||||
|
},
|
||||||
|
net:{
|
||||||
|
PID:"PID",
|
||||||
|
name:"name",
|
||||||
|
localAddr:"localAddr",
|
||||||
|
remoteAddr:"remoteAddr",
|
||||||
|
status:"status",
|
||||||
|
type:"type",
|
||||||
|
port:"port",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -2103,6 +2103,32 @@ export default {
|
|||||||
hostSelectMore: "加载更多 {num}",
|
hostSelectMore: "加载更多 {num}",
|
||||||
hostSelectHeader: "主机列表",
|
hostSelectHeader: "主机列表",
|
||||||
},
|
},
|
||||||
|
ps:{
|
||||||
|
hour:"时",
|
||||||
|
min:"分",
|
||||||
|
sec:"秒",
|
||||||
|
fastSpeed:"快速",
|
||||||
|
normalSpeed:"正常",
|
||||||
|
slowSpeed:"缓慢",
|
||||||
|
changeTime:"刷新频率",
|
||||||
|
PID:"PID",
|
||||||
|
name:"应用名称",
|
||||||
|
username:"用户名",
|
||||||
|
workTime:"运行时间",
|
||||||
|
numThreads:"线程数",
|
||||||
|
cpuPercent:"CPU使用率",
|
||||||
|
diskRead:"磁盘读取率",
|
||||||
|
diskWrite:"磁盘写入率",
|
||||||
|
},
|
||||||
|
net:{
|
||||||
|
PID:"PID",
|
||||||
|
name:"名称",
|
||||||
|
localAddr:"localAddr",
|
||||||
|
remoteAddr:"remoteAddr",
|
||||||
|
status:"状态",
|
||||||
|
type:"类型",
|
||||||
|
port:"接口",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
274
src/views/tool/net/index.vue
Normal file
274
src/views/tool/net/index.vue
Normal file
@@ -0,0 +1,274 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive ,toRaw, onMounted } from 'vue';
|
||||||
|
import { PageContainer } from 'antdv-pro-layout';
|
||||||
|
import { SizeType } from 'ant-design-vue/lib/config-provider';
|
||||||
|
import { ColumnsType} from 'ant-design-vue/lib/table';
|
||||||
|
import useI18n from '@/hooks/useI18n';
|
||||||
|
import { OptionsType, WS } from '@/plugins/ws-websocket';
|
||||||
|
import {
|
||||||
|
RESULT_CODE_ERROR
|
||||||
|
} from '@/constants/result-constants';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const ws = new WS();
|
||||||
|
|
||||||
|
//查询数据
|
||||||
|
let queryParams = reactive({
|
||||||
|
pid: undefined,
|
||||||
|
name:"",
|
||||||
|
port:undefined,
|
||||||
|
flag: false,
|
||||||
|
changeTime:5000,
|
||||||
|
});
|
||||||
|
|
||||||
|
//临时缓存
|
||||||
|
let queryParams2 = reactive({
|
||||||
|
pid: undefined,
|
||||||
|
name:"",
|
||||||
|
port:undefined,
|
||||||
|
flag: false,
|
||||||
|
changeTime:5000,
|
||||||
|
})
|
||||||
|
|
||||||
|
//时间粒度
|
||||||
|
let timeOptions =[
|
||||||
|
{label:t('views.tool.ps.fastSpeed'),value:3000},
|
||||||
|
{label:t('views.tool.ps.normalSpeed'),value:5000},
|
||||||
|
{label:t('views.tool.ps.slowSpeed'),value:10000},
|
||||||
|
];
|
||||||
|
|
||||||
|
/**钩子函数，界面打开初始化*/
|
||||||
|
onMounted(() =>{
|
||||||
|
fnRealTime()//建立连接
|
||||||
|
extracted()//先立刻发送请求获取第一次的数据
|
||||||
|
queryReset2(false)//设置定时器
|
||||||
|
});
|
||||||
|
|
||||||
|
/**查询按钮**/
|
||||||
|
function queryTime(){//将表单中的数据传递给缓存数据（缓存数据自动同步请求信息中）
|
||||||
|
queryParams2.pid=queryParams.pid;
|
||||||
|
queryParams2.port=queryParams.port;
|
||||||
|
queryParams2.name=queryParams.name;
|
||||||
|
//queryParams.flag = true
|
||||||
|
queryParams2.flag=true
|
||||||
|
queryParams.pid=undefined;
|
||||||
|
queryParams.name="";
|
||||||
|
queryParams.port=undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**重置按钮**/
|
||||||
|
function queryReset(){
|
||||||
|
queryParams.flag = false
|
||||||
|
queryParams2.flag = false
|
||||||
|
}
|
||||||
|
|
||||||
|
let s:any = null
|
||||||
|
/**定时器**/
|
||||||
|
function queryReset2(c:boolean){
|
||||||
|
if(c){
|
||||||
|
clearInterval(s)//清理旧定时器
|
||||||
|
ws.close();//断开原来的wb连接
|
||||||
|
fnRealTime();//建立新的实时数据连接
|
||||||
|
}
|
||||||
|
s = setInterval(()=>{//设置新的定时器s
|
||||||
|
extracted();
|
||||||
|
},queryParams.changeTime)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**刷新频率改变**/
|
||||||
|
function fnRealTime2() {//时间粒度改变时触发
|
||||||
|
queryReset2(true)//改变定时器
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 实时数据
|
||||||
|
*/
|
||||||
|
function fnRealTime() {
|
||||||
|
const options: OptionsType = {
|
||||||
|
url: '/ws',
|
||||||
|
onmessage: wsMessage,
|
||||||
|
onerror: wsError,
|
||||||
|
};
|
||||||
|
//建立连接
|
||||||
|
ws.connect(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**接收数据后回调(失败） */
|
||||||
|
function wsError(ev: any) {
|
||||||
|
// 接收数据后回调
|
||||||
|
console.error(ev);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**接收数据后回调（成功） */
|
||||||
|
function wsMessage(res: Record<string, any>) {
|
||||||
|
const { code, requestId, data } = res;//获取数据
|
||||||
|
if (code === RESULT_CODE_ERROR) {
|
||||||
|
console.warn(res.msg);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 处理数据，组成ip : port
|
||||||
|
let processedData: any;
|
||||||
|
|
||||||
|
processedData = data.map((item:any) => {
|
||||||
|
const localAddr = `${item.localaddr.ip} : ${item.localaddr.port}`;
|
||||||
|
const remoteAddr = `${item.remoteaddr.ip} : ${item.remoteaddr.port}`;
|
||||||
|
return { ...item, localAddr, remoteAddr };
|
||||||
|
});
|
||||||
|
|
||||||
|
if (requestId) {
|
||||||
|
tableState.data = processedData; // 将数据填入表格
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function extracted() {//将表单各条件值取出，并打包在data中发送请求
|
||||||
|
const {pid,name, port, flag} = toRaw(queryParams2)//从queryParams中取出各属性值
|
||||||
|
let data = {} // { 'PID': PID, 'name': name, 'port': port }
|
||||||
|
if (flag){//若flag为真则把值封装进data
|
||||||
|
data = { 'pid': pid, 'name': name, 'port': port }
|
||||||
|
}
|
||||||
|
//发送请求
|
||||||
|
ws.send({
|
||||||
|
'requestId': 'dxxx',
|
||||||
|
'type': 'net',
|
||||||
|
'data': data,
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**表格状态 */
|
||||||
|
let tableState: TableStateType = reactive({
|
||||||
|
loading: false,
|
||||||
|
size: 'large',
|
||||||
|
data: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
/**表格状态类型 */
|
||||||
|
type TableStateType = {
|
||||||
|
/**加载等待 */
|
||||||
|
loading: boolean;
|
||||||
|
/**紧凑型 */
|
||||||
|
size: SizeType;
|
||||||
|
/**记录数据 */
|
||||||
|
data: object[];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**表格字段列 */
|
||||||
|
const tableColumns: ColumnsType<any> = [
|
||||||
|
{
|
||||||
|
title: t('views.tool.net.PID'),
|
||||||
|
dataIndex: 'pid',
|
||||||
|
align: 'center',
|
||||||
|
width: 50,
|
||||||
|
sorter:{//PID排序
|
||||||
|
compare:(a:any, b:any)=>a.pid-b.pid,
|
||||||
|
multiple:1,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('views.tool.net.name'),
|
||||||
|
dataIndex: 'name',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('views.tool.net.localAddr'),
|
||||||
|
dataIndex: 'localAddr',
|
||||||
|
align: 'center',
|
||||||
|
width: 70,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('views.tool.net.remoteAddr'),
|
||||||
|
dataIndex:'remoteAddr',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('views.tool.net.status'),
|
||||||
|
dataIndex: 'status',
|
||||||
|
align: 'center',
|
||||||
|
width: 70,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('views.tool.net.type'),
|
||||||
|
dataIndex: 'type',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<PageContainer>
|
||||||
|
<a-card
|
||||||
|
:bordered="false"
|
||||||
|
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
|
||||||
|
>
|
||||||
|
<a-form :model="queryParams" name="formParams" layout="horizontal">
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :lg="3" :md="6" :xs="12">
|
||||||
|
<a-form-item :label="t('views.tool.ps.changeTime')" name="changeTime">
|
||||||
|
<a-select
|
||||||
|
v-model:value="queryParams.changeTime"
|
||||||
|
:options="timeOptions"
|
||||||
|
:placeholder="t('common.selectPlease')"
|
||||||
|
@change='fnRealTime2'
|
||||||
|
/>
|
||||||
|
</a-form-item></a-col>
|
||||||
|
<a-col :lg="3" :md="6" :xs="12">
|
||||||
|
<a-form-item :label="t('views.tool.ps.PID')" name="pid">
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="queryParams.pid"
|
||||||
|
allow-clear
|
||||||
|
:placeholder="t('common.inputPlease')"
|
||||||
|
style='width: 100%'
|
||||||
|
></a-input-number>
|
||||||
|
</a-form-item></a-col>
|
||||||
|
<a-col :lg="6" :md="12" :xs="24">
|
||||||
|
<a-form-item :label="t('views.tool.net.name')" name="name">
|
||||||
|
<a-input
|
||||||
|
v-model:value="queryParams.name"
|
||||||
|
allow-clear
|
||||||
|
:placeholder="t('common.inputPlease')"
|
||||||
|
></a-input>
|
||||||
|
</a-form-item></a-col>
|
||||||
|
<a-col :lg="6" :md="12" :xs="24">
|
||||||
|
<a-form-item :label="t('views.tool.net.port')" name="port">
|
||||||
|
<a-input
|
||||||
|
v-model:value="queryParams.port"
|
||||||
|
allow-clear
|
||||||
|
:placeholder="t('common.inputPlease')"
|
||||||
|
></a-input>
|
||||||
|
</a-form-item></a-col>
|
||||||
|
<a-col :lg="3" :md="4" :xs="5">
|
||||||
|
<a-form-item>
|
||||||
|
<a-button type="primary" @click='queryTime()'>
|
||||||
|
<template #icon><SearchOutlined /></template>
|
||||||
|
{{ t('common.search') }}
|
||||||
|
</a-button>
|
||||||
|
<a-button type="default" @click.prevent="queryReset()" style='left: 20px;'>
|
||||||
|
<template #icon><ClearOutlined /></template>
|
||||||
|
{{ t('common.reset') }}
|
||||||
|
</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-card>
|
||||||
|
<a-table
|
||||||
|
class="table"
|
||||||
|
row-key="id"
|
||||||
|
:columns="tableColumns"
|
||||||
|
:loading="tableState.loading"
|
||||||
|
:data-source="tableState.data"
|
||||||
|
:size="tableState.size"
|
||||||
|
:scroll="{ y: 'calc(100vh - 480px)' }"
|
||||||
|
:pagination='false'
|
||||||
|
></a-table>
|
||||||
|
</PageContainer>
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.table :deep(.ant-pagination) {
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
348
src/views/tool/ps/index.vue
Normal file
348
src/views/tool/ps/index.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
import { reactive ,toRaw, onMounted } from 'vue';
|
||||||
|
import { PageContainer } from 'antdv-pro-layout';
|
||||||
|
import { SizeType } from 'ant-design-vue/lib/config-provider';
|
||||||
|
import { ColumnsType} from 'ant-design-vue/lib/table';
|
||||||
|
import useI18n from '@/hooks/useI18n';
|
||||||
|
import { OptionsType, WS } from '@/plugins/ws-websocket';
|
||||||
|
import {
|
||||||
|
RESULT_CODE_ERROR
|
||||||
|
} from '@/constants/result-constants';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const ws = new WS();
|
||||||
|
|
||||||
|
//查询数据
|
||||||
|
let queryParams = reactive({
|
||||||
|
pid: undefined,
|
||||||
|
name:"",
|
||||||
|
username:"",
|
||||||
|
flag: false,
|
||||||
|
changeTime:5000,
|
||||||
|
});
|
||||||
|
|
||||||
|
//临时缓存
|
||||||
|
let queryParams2 = reactive({
|
||||||
|
pid: undefined,
|
||||||
|
name:"",
|
||||||
|
username:"",
|
||||||
|
flag: false,
|
||||||
|
changeTime:5000,
|
||||||
|
})
|
||||||
|
|
||||||
|
//时间粒度
|
||||||
|
let timeOptions =[
|
||||||
|
{label:t('views.tool.ps.fastSpeed'),value:3000},
|
||||||
|
{label:t('views.tool.ps.normalSpeed'),value:5000},
|
||||||
|
{label:t('views.tool.ps.slowSpeed'),value:10000},
|
||||||
|
];
|
||||||
|
|
||||||
|
/**钩子函数，界面打开初始化*/
|
||||||
|
onMounted(() =>{
|
||||||
|
fnRealTime()//建立连接
|
||||||
|
extracted()//先立刻发送请求获取第一次的数据
|
||||||
|
queryReset2(false)//设置定时器
|
||||||
|
});
|
||||||
|
|
||||||
|
/**查询按钮**/
|
||||||
|
function queryTime(){//将表单中的数据传递给缓存数据（缓存数据自动同步请求信息中）
|
||||||
|
queryParams2.pid=queryParams.pid;
|
||||||
|
queryParams2.username=queryParams.username;
|
||||||
|
queryParams2.name=queryParams.name;
|
||||||
|
//queryParams.flag = true
|
||||||
|
queryParams2.flag=true
|
||||||
|
queryParams.pid=undefined;
|
||||||
|
queryParams.name="";
|
||||||
|
queryParams.username="";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**重置按钮**/
|
||||||
|
function queryReset(){
|
||||||
|
queryParams.flag = false
|
||||||
|
queryParams2.flag = false
|
||||||
|
}
|
||||||
|
|
||||||
|
let s:any = null
|
||||||
|
/**定时器**/
|
||||||
|
function queryReset2(c:boolean){
|
||||||
|
if(c){
|
||||||
|
clearInterval(s)//清理旧定时器
|
||||||
|
ws.close();//断开原来的wb连接
|
||||||
|
fnRealTime();//建立新的实时数据连接
|
||||||
|
}
|
||||||
|
s = setInterval(()=>{//设置新的定时器s
|
||||||
|
extracted();
|
||||||
|
},queryParams.changeTime)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**刷新频率改变**/
|
||||||
|
function fnRealTime2() {//时间粒度改变时触发
|
||||||
|
queryReset2(true)//改变定时器
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 实时数据
|
||||||
|
*/
|
||||||
|
function fnRealTime() {
|
||||||
|
const options: OptionsType = {
|
||||||
|
url: '/ws',
|
||||||
|
onmessage: wsMessage,
|
||||||
|
onerror: wsError,
|
||||||
|
};
|
||||||
|
//建立连接
|
||||||
|
ws.connect(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**接收数据后回调(失败） */
|
||||||
|
function wsError(ev: any) {
|
||||||
|
// 接收数据后回调
|
||||||
|
console.error(ev);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**接收数据后回调（成功） */
|
||||||
|
function wsMessage(res: Record<string, any>) {
|
||||||
|
const { code, requestId, data } = res;//获取数据
|
||||||
|
if (code === RESULT_CODE_ERROR) {
|
||||||
|
console.warn(res.msg);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 处理 data.startTime，转换成运行时间并赋值到新的数组processedData
|
||||||
|
let processedData: any;
|
||||||
|
|
||||||
|
if (Array.isArray(data)) {
|
||||||
|
processedData = data.map(item => {
|
||||||
|
if (item.startTime) {//startTime有值
|
||||||
|
return { ...item, runTime: calculateRunTime(item.startTime) };
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
} else if (data && data.startTime) {
|
||||||
|
processedData = { ...data, runTime: calculateRunTime(data.startTime) };
|
||||||
|
} else {
|
||||||
|
processedData = data; // 如果没有 startTime，则不做处理
|
||||||
|
}
|
||||||
|
|
||||||
|
if (requestId) {
|
||||||
|
tableState.data = processedData; // 将数据填入表格
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**处理开始时间**/
|
||||||
|
function calculateRunTime(startTime: string): string {
|
||||||
|
// 解析开始时间
|
||||||
|
const startDate = new Date(startTime);
|
||||||
|
// 获取当前时间
|
||||||
|
const currentDate = new Date();
|
||||||
|
// 计算时间差（以毫秒为单位）
|
||||||
|
const timeDifference = currentDate.getTime() - startDate.getTime();
|
||||||
|
// 将时间差转换为小时、分钟和秒
|
||||||
|
const secondsInHour = 3600;
|
||||||
|
const secondsInMinute = 60;
|
||||||
|
const totalSeconds = Math.floor(timeDifference / 1000);
|
||||||
|
const hours = Math.floor(totalSeconds / secondsInHour);
|
||||||
|
const minutes = Math.floor((totalSeconds % secondsInHour) / secondsInMinute);
|
||||||
|
const seconds = totalSeconds % secondsInMinute;
|
||||||
|
return `${hours}${t('views.tool.ps.hour')}${minutes}${t('views.tool.ps.min')} ${seconds}${t('views.tool.ps.sec')}`;// 格式化为字符串
|
||||||
|
}
|
||||||
|
function extracted() {//将表单各条件值取出，并打包在data中发送请求
|
||||||
|
const {pid,name, username, flag} = toRaw(queryParams2)//从queryParams中取出各属性值
|
||||||
|
let data = {} // { 'PID': PID, 'name': name, 'username': username }
|
||||||
|
if (flag){//若flag为真则把值封装进data
|
||||||
|
data = { 'PID': pid, 'name': name, 'username': username }
|
||||||
|
}
|
||||||
|
//发送请求
|
||||||
|
ws.send({
|
||||||
|
'requestId': 'dxxx',
|
||||||
|
'type': 'ps',
|
||||||
|
'data': data,
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**表格状态 */
|
||||||
|
let tableState: TableStateType = reactive({
|
||||||
|
loading: false,
|
||||||
|
size: 'large',
|
||||||
|
data: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
/**表格状态类型 */
|
||||||
|
type TableStateType = {
|
||||||
|
/**加载等待 */
|
||||||
|
loading: boolean;
|
||||||
|
/**紧凑型 */
|
||||||
|
size: SizeType;
|
||||||
|
/**记录数据 */
|
||||||
|
data: object[];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**表格字段列 */
|
||||||
|
const tableColumns: ColumnsType<any> = [
|
||||||
|
{
|
||||||
|
title: t('views.tool.ps.PID'),
|
||||||
|
dataIndex: 'PID',
|
||||||
|
align: 'center',
|
||||||
|
width: 50,
|
||||||
|
sorter:{//PID排序
|
||||||
|
compare:(a:any, b:any)=>a.PID-b.PID,
|
||||||
|
multiple:3,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('views.tool.ps.name'),
|
||||||
|
dataIndex: 'name',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('views.tool.ps.username'),
|
||||||
|
dataIndex: 'username',
|
||||||
|
align: 'center',
|
||||||
|
width: 70,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('views.tool.ps.workTime'),
|
||||||
|
dataIndex:'runTime',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('views.tool.ps.numThreads'),
|
||||||
|
dataIndex: 'numThreads',
|
||||||
|
align: 'center',
|
||||||
|
width: 70,
|
||||||
|
sorter:{//线程数比较大小
|
||||||
|
compare:(a:any, b:any)=>a.numThreads-b.numThreads,
|
||||||
|
multiple:4,//优先级4
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('views.tool.ps.cpuPercent'),
|
||||||
|
dataIndex: 'cpuPercent',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
sorter:{
|
||||||
|
compare:(a:any, b:any) => {//字符串转数字比较
|
||||||
|
const parseRate =(rate:string):number => parseFloat(rate.replace('%',''))
|
||||||
|
|
||||||
|
return parseRate(a.cpuPercent) - parseRate(b.cpuPercent);
|
||||||
|
},
|
||||||
|
multiple:1,//优先级1
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('views.tool.ps.diskRead'),
|
||||||
|
dataIndex: 'diskRead',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
sorter:{
|
||||||
|
compare:(a:any, b:any) => {
|
||||||
|
const parseRate =(rate:string):number =>{//字符串转数字比较
|
||||||
|
const value = parseFloat(rate);//转化为同单位
|
||||||
|
if (rate.includes('GB')) return value * 1024; // GB转换为MB
|
||||||
|
if (rate.includes('MB')) return value; // 保持为 MB
|
||||||
|
if (rate.includes('KB')) return value / 1024; // KB转换为MB
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return parseRate(a.diskRead) - parseRate(b.diskRead);
|
||||||
|
},
|
||||||
|
multiple:2,//优先级
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('views.tool.ps.diskWrite'),
|
||||||
|
dataIndex: 'diskWrite',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
sorter:{
|
||||||
|
compare:(a:any, b:any) => {
|
||||||
|
const parseRate =(rate:string):number =>{//字符串转数字比较
|
||||||
|
const value = parseFloat(rate);//转化为同单位
|
||||||
|
if (rate.includes('GB')) return value * 1024; // GB转换为MB
|
||||||
|
if (rate.includes('MB')) return value; // 保持为 MB
|
||||||
|
if (rate.includes('KB')) return value / 1024; // KB转换为MB
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return parseRate(a.diskWrite) - parseRate(b.diskWrite);
|
||||||
|
},
|
||||||
|
multiple:3,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<PageContainer>
|
||||||
|
<a-card
|
||||||
|
:bordered="false"
|
||||||
|
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
|
||||||
|
>
|
||||||
|
<a-form :model="queryParams" name="formParams" layout="horizontal">
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :lg="3" :md="6" :xs="12">
|
||||||
|
<a-form-item :label="t('views.tool.ps.changeTime')" name="changeTime">
|
||||||
|
<a-select
|
||||||
|
v-model:value="queryParams.changeTime"
|
||||||
|
:options="timeOptions"
|
||||||
|
:placeholder="t('common.selectPlease')"
|
||||||
|
@change='fnRealTime2'
|
||||||
|
/>
|
||||||
|
</a-form-item></a-col>
|
||||||
|
<a-col :lg="3" :md="6" :xs="12">
|
||||||
|
<a-form-item :label="t('views.tool.ps.PID')" name="PID">
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="queryParams.pid"
|
||||||
|
allow-clear
|
||||||
|
:placeholder="t('common.inputPlease')"
|
||||||
|
style='width: 100%'
|
||||||
|
></a-input-number>
|
||||||
|
</a-form-item></a-col>
|
||||||
|
<a-col :lg="6" :md="12" :xs="24">
|
||||||
|
<a-form-item :label="t('views.tool.ps.name')" name="name">
|
||||||
|
<a-input
|
||||||
|
v-model:value="queryParams.name"
|
||||||
|
allow-clear
|
||||||
|
:placeholder="t('common.inputPlease')"
|
||||||
|
></a-input>
|
||||||
|
</a-form-item></a-col>
|
||||||
|
<a-col :lg="6" :md="12" :xs="24">
|
||||||
|
<a-form-item :label="t('views.tool.ps.username')" name="username">
|
||||||
|
<a-input
|
||||||
|
v-model:value="queryParams.username"
|
||||||
|
allow-clear
|
||||||
|
:placeholder="t('common.inputPlease')"
|
||||||
|
></a-input>
|
||||||
|
</a-form-item></a-col>
|
||||||
|
<a-col :lg="3" :md="4" :xs="5">
|
||||||
|
<a-form-item>
|
||||||
|
<a-button type="primary" @click='queryTime()'>
|
||||||
|
<template #icon><SearchOutlined /></template>
|
||||||
|
{{ t('common.search') }}
|
||||||
|
</a-button>
|
||||||
|
<a-button type="default" @click.prevent="queryReset()" style='left: 20px;'>
|
||||||
|
<template #icon><ClearOutlined /></template>
|
||||||
|
{{ t('common.reset') }}
|
||||||
|
</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-card>
|
||||||
|
<a-table
|
||||||
|
class="table"
|
||||||
|
row-key="id"
|
||||||
|
:columns="tableColumns"
|
||||||
|
:loading="tableState.loading"
|
||||||
|
:data-source="tableState.data"
|
||||||
|
:size="tableState.size"
|
||||||
|
:scroll="{ y: 'calc(100vh - 480px)' }"
|
||||||
|
:pagination='false'
|
||||||
|
></a-table>
|
||||||
|
</PageContainer>
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.table :deep(.ant-pagination) {
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user