Merge branch 'lichang' of http://192.168.2.166:3180/OMC/ems_frontend_vue3 into lichang

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<string, any>) {
     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<string, any>) {
 }
 
 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<any> = [
     >
       <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-col :lg="4" :md="6" :xs="12">
+            <a-form-item  :label="t('views.tool.ps.realTime')" name="changeTime">
               <a-select
                 v-model:value="queryParams.changeTime"
                 :options="timeOptions"
                 :placeholder="t('common.selectPlease')"
                 @change='fnRealTime2'
+                style='width: 100%'
               />
             </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-form-item  :label="t('views.tool.ps.pid')" name="pid">
               <a-input-number
                 v-model:value="queryParams.pid"
                 allow-clear
@@ -231,15 +266,16 @@ const tableColumns: ColumnsType<any> = [
                 :placeholder="t('common.inputPlease')"
               ></a-input>
             </a-form-item></a-col>
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="5" :md="10" :xs="20">
             <a-form-item  :label="t('views.tool.net.port')" name="port">
-              <a-input
+              <a-input-number
                 v-model:value="queryParams.port"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
-              ></a-input>
+                style='width: 100%'
+              ></a-input-number>
             </a-form-item></a-col>
-          <a-col :lg="3" :md="4" :xs="5">
+          <a-col :lg="4" :md="12" :xs="24">
             <a-form-item>
               <a-button type="primary" @click='queryTime()'>
                 <template #icon><SearchOutlined /></template>
@@ -259,11 +295,11 @@ const tableColumns: ColumnsType<any> = [
       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 }"
     ></a-table>
   </PageContainer>
 </template>