diff --git a/src/views/tool/net/index.vue b/src/views/tool/net/index.vue index dbcf28f4..322c647d 100644 --- a/src/views/tool/net/index.vue +++ b/src/views/tool/net/index.vue @@ -21,8 +21,8 @@ let queryParams = reactive({ changeTime:5000, }); -//临时缓存 -let queryParams2 = reactive({ +//临时缓存:用于搜索后清除筛选条件 +let bufferParams = reactive({ pid: undefined, name:"", port:undefined, @@ -32,9 +32,9 @@ let queryParams2 = reactive({ //时间粒度 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}, + {label:t('views.tool.ps.realTimeHigh'),value:3000}, + {label:t('views.tool.ps.realTimeRegular'),value:5000}, + {label:t('views.tool.ps.realTimeLow'),value:10000}, ]; /**钩子函数,界面打开初始化*/ @@ -46,11 +46,10 @@ onMounted(() =>{ /**查询按钮**/ function queryTime(){//将表单中的数据传递给缓存数据(缓存数据自动同步请求信息中) - queryParams2.pid=queryParams.pid; - queryParams2.port=queryParams.port; - queryParams2.name=queryParams.name; - //queryParams.flag = true - queryParams2.flag=true + bufferParams.pid=queryParams.pid; + bufferParams.port=queryParams.port; + bufferParams.name=queryParams.name; + bufferParams.flag=true queryParams.pid=undefined; queryParams.name=""; queryParams.port=undefined; @@ -59,7 +58,7 @@ function queryTime(){//将表单中的数据传递给缓存数据(缓存数据 /**重置按钮**/ function queryReset(){ queryParams.flag = false - queryParams2.flag = false + bufferParams.flag = false } let s:any = null @@ -106,13 +105,23 @@ function wsMessage(res: Record) { return; } // 处理数据,组成ip : port - let processedData: any; + let processedData:any[]=[]; + + if (Array.isArray(data)) { processedData = data.map((item:any) => { - const localAddr = `${item.localaddr.ip} : ${item.localaddr.port}`; - const remoteAddr = `${item.remoteaddr.ip} : ${item.remoteaddr.port}`; + const localAddr = `${item.localaddr?.ip || ''} : ${item.localaddr?.port || ''}`; + const remoteAddr = `${item.remoteaddr?.ip || ''} : ${item.remoteaddr?.port || ''}`; return { ...item, localAddr, remoteAddr }; }); + } else if (typeof data === 'object' && data !== null) { + // 如果data是单个对象,将其包装在数组中 + const localAddr = `${data.localaddr?.ip || ''} : ${data.localaddr?.port || ''}`; + const remoteAddr = `${data.remoteaddr?.ip || ''} : ${data.remoteaddr?.port || ''}`; + processedData = [{ ...data, localAddr, remoteAddr }]; + } else { + console.warn('收到意外的数据格式:', data); + } if (requestId) { tableState.data = processedData; // 将数据填入表格 @@ -120,7 +129,7 @@ function wsMessage(res: Record) { } function extracted() {//将表单各条件值取出,并打包在data中发送请求 - const {pid,name, port, flag} = toRaw(queryParams2)//从queryParams中取出各属性值 + const {pid,name, port, flag} = toRaw(bufferParams)//从queryParams中取出各属性值 let data = {} // { 'PID': PID, 'name': name, 'port': port } if (flag){//若flag为真则把值封装进data data = { 'pid': pid, 'name': name, 'port': port } @@ -141,6 +150,31 @@ let tableState: TableStateType = reactive({ data: [], }); +/**表格分页器参数 */ +let tablePagination = reactive({ + /**当前页数 */ + current: 1, + /**每页条数 */ + pageSize: 20, + /**默认的每页条数 */ + defaultPageSize: 20, + /**指定每页可以显示多少条 */ + pageSizeOptions: ['10', '20', '50', '100'], + /**只有一页时是否隐藏分页器 */ + hideOnSinglePage: false, + /**是否可以快速跳转至某页 */ + showQuickJumper: true, + /**是否可以改变 pageSize */ + showSizeChanger: true, + /**数据总数 */ + total: 0, + showTotal: (total: number) => t('common.tablePaginationTotal', { total }), + onChange: (page: number, pageSize: number) => { + tablePagination.current = page; + tablePagination.pageSize = pageSize; + }, +}); + /**表格状态类型 */ type TableStateType = { /**加载等待 */ @@ -205,17 +239,18 @@ const tableColumns: ColumnsType = [ > - - + + - + = [ :placeholder="t('common.inputPlease')" > - + - + style='width: 100%' + > - + @@ -259,11 +295,11 @@ const tableColumns: ColumnsType = [ class="table" row-key="id" :columns="tableColumns" + :pagination="tablePagination" :loading="tableState.loading" :data-source="tableState.data" :size="tableState.size" - :scroll="{ y: 'calc(100vh - 480px)' }" - :pagination='false' + :scroll="{ x: tableColumns.length * 120 }" >