feat:ps界面和net界面
This commit is contained in:
zhongzm
@@ -2103,6 +2103,32 @@ export default {
|
||||
hostSelectMore: "Load More {num}",
|
||||
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}",
|
||||
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