feat:ps界面和net界面

src/i18n/locales/en-US.ts

@@ -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',  
+          title: 'Configuration File Import',
-          importType: 'Source of File',  
+          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', 
+        upgradeNotNewVer: 'No new version found',
-        upgradeOMCVer: 'Rejection of batch operation upgrades OMC', 
+        upgradeOMCVer: 'Rejection of batch operation upgrades OMC',
-        upgradeDone: 'Update complete, service being reloaded', 
+        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!', 
+        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', 
+        stepInstallNotNewVer: 'No new version found',
-        stepInstallDone: 'Installation complete, service initialized', 
+        stepInstallDone: 'Installation complete, service initialized',
-        stepInstallFail: 'Installation fails, check if the service terminal environment is available!', 
+        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",
+      },
     },
   },
 };

src/i18n/locales/zh-CN.ts

@@ -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: '配置文件导入',  
+          title: '配置文件导入',
-          importType: '文件来源',  
+          importType: '文件来源',
           server:'服务器文件',
           local:'本地文件',
           localUpload:'本地上传',
@@ -749,11 +749,11 @@ export default {
         status: "版本状态",
         upgradeBatch: "批量更新",
         upgradeBatchTip: "对勾选的记录进行新版本升级吗？",
-        upgradeNotNewVer: '没有发现新版本', 
+        upgradeNotNewVer: '没有发现新版本',
-        upgradeOMCVer: '拒绝批量操作升级OMC', 
+        upgradeOMCVer: '拒绝批量操作升级OMC',
-        upgradeDone: '更新完成，服务正在重载', 
+        upgradeDone: '更新完成，服务正在重载',
-        upgradeFail: '更新失败，请检查软件文件是否存在且服务终端环境是否可用！', 
+        upgradeFail: '更新失败，请检查软件文件是否存在且服务终端环境是否可用！',
-        upgradeModal: '网元版本更新', 
+        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:{				
+      menu:{
-        menuInfo:'菜单信息',				
+        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: '没有发现新版本', 
+        stepInstallNotNewVer: '没有发现新版本',
-        stepInstallDone: '安装完成，服务进入初始化', 
+        stepInstallDone: '安装完成，服务进入初始化',
-        stepInstallFail: '安装失败，请检查服务终端环境是否可用！', 
+        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:"接口",
+      },
     },
   },
 };

src/views/tool/net/index.vue

@@ -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>

src/views/tool/ps/index.vue

@@ -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>