OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

feat:ps界面和net界面

Browse Source
This commit is contained in:
zhongzm
2024-09-06 17:27:38 +08:00
parent 5d69d7612a
commit 23007c3bf2
4 changed files with 722 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/i18n/locales/en-US.ts
View File

@@ -88,7 +88,7 @@ export default {
day33: "days",
day4: "Designated day (optional)",
day5: "Last day of the month",
hour1: "Hourly",
hour1: "Hourly",
hour21: "Execute every",
hour22: "hours, starting from the",
hour23: "hour",
@@ -239,7 +239,7 @@ export default {
ttile: 'No access',
subTitle:'Please do not perform illegal operations, you can go back to the main page or return to the',
backHome: 'Back to Home',
back: 'Back',
back: 'Back',
},
err404: {
ttile: 'Match page not found',
@@ -296,10 +296,10 @@ export default {
newPassword: "New Password",
newPasswordTip: "Password contains at least upper and lower case letters, numbers, special symbols, and not less than 6 digits",
newPassworddPleace: "Please enter a new password",
confirmPassword: "Confirm new password",
confirmPassword: "Confirm new password",
confirmPasswordPleace: "Please confirm the new password",
submit: "Submit changes",
reset: "Reset",
reset: "Reset",
submitTip: "Are you sure you want to submit a password change?",
submitOkTip: "Congratulations, {num} account password changed successfully!",
submitOk: "Sign in again",
@@ -525,7 +525,7 @@ export default {
up:'Uplink',
down:'Downlink'
},
upfFlowTotal:{
upfFlowTotal:{
title:'Traffic Summary',
up:'Uplink',
down:'Downlink'
@@ -605,7 +605,7 @@ export default {
neIdTip: 'Fill in the unique identifier of the network element binding',
rmUid: 'Resource Unique ID',
rmUidPlease: 'Please enter a resource unique ID',
rmUidTip: "Tagging for data reporting of network element logs, alarms, metrics, etc.",
rmUidTip: "Tagging for data reporting of network element logs, alarms, metrics, etc.",
neName: 'NE Name',
neNamePlease: 'Please enter the name of the network element',
ipAddr: 'IP Addr',
@@ -629,9 +629,9 @@ export default {
log: 'Logs',
},
neInfo: {
version: "Version",
version: "Version",
state: "State",
serviceState: "Service Status",
serviceState: "Service Status",
info: 'Status Message',
resourceInfo: 'Resource Situation',
sysMem: "SYS Mem",
@@ -665,8 +665,8 @@ export default {
backConf: {
export: 'Config Export',
import: 'Config Import',
title: 'Configuration File Import',
importType: 'Source of File',
title: 'Configuration File Import',
importType: 'Source of File',
server:'Server File',
local:'Local File',
localUpload:'Local Upload',
@@ -742,17 +742,17 @@ export default {
rollback: 'Switch to previous version',
rollbackTip: "Confirm switching to the previous version?",
rollbackTipEmpty: "There is currently no previous version available",
rollbackTipEqual: 'The current version is the same as the previous version',
rollbackTipEqual: 'The current version is the same as the previous version',
version: "Current Version",
preVersion: "Previous Version",
newVersion: "New Version",
status: "Revision Status",
upgradeBatch: "Batch Upgrade",
upgradeBatchTip: "Do you perform new version upgrades on checked records?",
upgradeNotNewVer: 'No new version found',
upgradeOMCVer: 'Rejection of batch operation upgrades OMC',
upgradeDone: 'Update complete, service being reloaded',
upgradeFail: 'The update fails, please check whether the software file exists and whether the service terminal environment is available!',
upgradeNotNewVer: 'No new version found',
upgradeOMCVer: 'Rejection of batch operation upgrades OMC',
upgradeDone: 'Update complete, service being reloaded',
upgradeFail: 'The update fails, please check whether the software file exists and whether the service terminal environment is available!',
upgradeModal: 'Network Element Version Updates',
},
neLicense: {
@@ -772,7 +772,7 @@ export default {
uploadChangeOk: 'Network Element renewed license successfully and is being calibrated in the background!',
uploadChangeFail: "Some network elements failed to update the license, please check whether the service terminal environment is available!",
},
neConfig: {
neConfig: {
treeTitle: "Navigation Configuration",
treeSelectTip: "Select configuration item information in the left configuration navigation!",
neType: 'NE Type',
@@ -882,7 +882,7 @@ export default {
imsiConfirm:'The length of the IMSI must be 15',
},
sub: {
subInfo:' Subscription Info',
subInfo:' Subscription Info',
neType: 'UDM Object',
export: 'Export',
exportConfirm: 'Are you sure to export all signed user data?',
@@ -934,7 +934,7 @@ export default {
batchAddText: 'Batch Add',
batchDelText: 'Batch Delete',
batchUpdateText: 'Batch Modify',
batchNum: 'Number of batches',
batchNum: 'Number of batches',
imsiTip: 'IMSI=MCC+MNC+MSIN',
imsiTip1: 'MCC=Mobile Country Code, consisting of three digits.',
imsiTip2: 'MNC = Mobile Network Number, consisting of two digits',
@@ -953,16 +953,16 @@ export default {
sarTip2:'(corresponding parameter setting -Service Area Restriction)',
rfsfTip:'RAT Frequency Selection Priority',
},
base5G: {
base5G: {
neType: 'NE Object',
},
n3iwf: {
neType: 'N3IWF Object',
},
ue: {
ue: {
neType: 'SMF Object',
},
ims: {
ims: {
neType: 'IMS Object',
},
nssf:{
@@ -1285,7 +1285,7 @@ export default {
},
exportFile:{
fileName:'File Name',
downTip: "Confirm the download file name is [{fileName}] File?",
downTip: "Confirm the download file name is [{fileName}] File?",
downTipErr: "Failed to get file",
deleteTip: "Confirm the delete file name is [{fileName}] File?",
deleteTipErr: "Failed to delete file",
@@ -1608,7 +1608,7 @@ export default {
edgeTypeLineAnimateState: "Straight line with state animations",
edgeLabelPositionStart: "Start",
edgeLabelPositionMiddle: "Middle",
edgeLabelPositionEnd: "End",
edgeLabelPositionEnd: "End",
nodeTypeCircle: "Circle",
nodeTypeRect: "Rect",
nodeTypeEllipse: "Ellipse",
@@ -1933,7 +1933,7 @@ export default {
componentTip:' The component path accessed by views in the page component directory, such as: system/user/index Note: The routing address without the .vue file suffix is the network address and can be filled in as a link',
perms:`Permission identification example: monitor:server:query Permission identification is used in the back-end controller, such as:['monitor:server:query'] Permission identification is used in the front-end Vue page, such as: v-perms:has="['monitor:server:query']"`
},
dict:{
dict:{
dictInfo:'Dictionary Type Information',
dictId:'Dictionary Number',
dictName:'Dictionary Name',
@@ -2012,9 +2012,9 @@ export default {
stepInstallText: 'Select Install',
stepInstallTip: 'Confirm the installation of the new version of the chosen Net Meta?',
stepInstallModal: 'Network Element For Install',
stepInstallNotNewVer: 'No new version found',
stepInstallDone: 'Installation complete, service initialized',
stepInstallFail: 'Installation fails, check if the service terminal environment is available!',
stepInstallNotNewVer: 'No new version found',
stepInstallDone: 'Installation complete, service initialized',
stepInstallFail: 'Installation fails, check if the service terminal environment is available!',
stepLicenseTitle: "Service License",
stepLicenseDesc: "Obtaining a license activation code for authorization authentication",
stepLicenseReload: 'Select Refresh',
@@ -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",
},
},
},
};

68
src/i18n/locales/zh-CN.ts
View File

@@ -296,10 +296,10 @@ export default {
newPassword: "新密码",
newPasswordTip: "密码至少包含大小写字母、数字、特殊符号，且不少于6位",
newPassworddPleace: "请输入新密码",
confirmPassword: "确认新密码",
confirmPassword: "确认新密码",
confirmPasswordPleace: "请确认新密码",
submit: "提交修改",
reset: "重置",
reset: "重置",
submitTip: "确认要提交修改密码吗?",
submitOkTip: "恭喜您，{num} 账号密码修改成功！",
submitOk: "重新登录",
@@ -605,7 +605,7 @@ export default {
neIdTip: '填写网元绑定的唯一标识',
rmUid: '资源唯一标识',
rmUidPlease: '请输入资源唯一标识',
rmUidTip: "用于网元日志、告警、指标等数据上报的标记",
rmUidTip: "用于网元日志、告警、指标等数据上报的标记",
neName: '网元名称',
neNamePlease: '请输入网元名称',
ipAddr: '服务IP',
@@ -629,9 +629,9 @@ export default {
log: '日志',
},
neInfo: {
version: "网元版本",
version: "网元版本",
state: "网元状态",
serviceState: "服务状态",
serviceState: "服务状态",
info: '状态信息',
resourceInfo: '资源情况',
sysMem: "系统内存",
@@ -665,8 +665,8 @@ export default {
backConf: {
export: '配置导出',
import: '配置导入',
title: '配置文件导入',
importType: '文件来源',
title: '配置文件导入',
importType: '文件来源',
server:'服务器文件',
local:'本地文件',
localUpload:'本地上传',
@@ -749,11 +749,11 @@ export default {
status: "版本状态",
upgradeBatch: "批量更新",
upgradeBatchTip: "对勾选的记录进行新版本升级吗？",
upgradeNotNewVer: '没有发现新版本',
upgradeOMCVer: '拒绝批量操作升级OMC',
upgradeDone: '更新完成，服务正在重载',
upgradeFail: '更新失败，请检查软件文件是否存在且服务终端环境是否可用！',
upgradeModal: '网元版本更新',
upgradeNotNewVer: '没有发现新版本',
upgradeOMCVer: '拒绝批量操作升级OMC',
upgradeDone: '更新完成，服务正在重载',
upgradeFail: '更新失败，请检查软件文件是否存在且服务终端环境是否可用！',
upgradeModal: '网元版本更新',
},
neLicense: {
status: "许可证状态",
@@ -934,7 +934,7 @@ export default {
batchAddText: '批量新增',
batchDelText: '批量删除',
batchUpdateText: '批量更新',
batchNum: '批量个数',
batchNum: '批量个数',
imsiTip: 'IMSI=MCC+MNC+MSIN',
imsiTip1: 'MCC=移动国家号码, 由三位数字组成',
imsiTip2: 'MNC=移动网络号，由两位数字组成',
@@ -1285,7 +1285,7 @@ export default {
},
exportFile:{
fileName:'文件名',
downTip: "确认下载文件名为 【{fileName}】 文件?",
downTip: "确认下载文件名为 【{fileName}】 文件?",
downTipErr: "文件获取失败",
deleteTip: "确认删除文件名为 【{fileName}】 文件?",
deleteTipErr: "文件删除失败",
@@ -1608,7 +1608,7 @@ export default {
edgeTypeLineAnimateState: "直线，含有状态动画",
edgeLabelPositionStart: "开头",
edgeLabelPositionMiddle: "中间",
edgeLabelPositionEnd: "末尾",
edgeLabelPositionEnd: "末尾",
nodeTypeCircle: "圆形",
nodeTypeRect: "矩形",
nodeTypeEllipse: "椭圆",
@@ -1900,8 +1900,8 @@ export default {
unlockSure:'确认解锁用户 【{username}】 数据项?',
},
},
menu:{
menuInfo:'菜单信息',
menu:{
menuInfo:'菜单信息',
menuName:'菜单名称',
menuId:'菜单编号',
menuSort:'菜单排序',
@@ -1933,7 +1933,7 @@ export default {
componentTip:' 页面组件目录 views 访问的组件路径,如:system/user/index 注意：不带 .vue 文件后缀路由地址是网络地址可填入链接',
perms:`权限标识示例:monitor:server:query 后端控制器中使用权限标识，如：['monitor:server:query'] 前端vue页面中使用权限标识,如:v-perms:has="['monitor:server:query']"`
},
dict:{
dict:{
dictInfo:'字典类型信息',
dictId:'字典编号',
dictName:'字典名称',
@@ -2012,9 +2012,9 @@ export default {
stepInstallText: '选择安装',
stepInstallTip: '确认安装选择的网元新版本吗？',
stepInstallModal: '网元进行安装',
stepInstallNotNewVer: '没有发现新版本',
stepInstallDone: '安装完成，服务进入初始化',
stepInstallFail: '安装失败，请检查服务终端环境是否可用！',
stepInstallNotNewVer: '没有发现新版本',
stepInstallDone: '安装完成，服务进入初始化',
stepInstallFail: '安装失败，请检查服务终端环境是否可用！',
stepLicenseTitle: "网元许可授权",
stepLicenseDesc: "获取网元许可激活码进行授权认证",
stepLicenseReload: '选择刷新许可证',
@@ -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
View 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
View 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>