style: UE终端表格优化

src/api/neUser/ue.ts

@@ -26,5 +26,38 @@ export async function listUE(query: Record<string, any>) {
     data.total = rows.length;
     data.rows = rows;
   }
+
+  // 模拟数据
+  // data.rows = [
+  //   {
+  //     imsi: 'imsi-460029004200044',
+  //     msisdn: 'msisdn-12346002044',
+  //     pduSessionInfo: [
+  //       {
+  //         activeTime: '2023-11-29 18:39:06',
+  //         dnn: 'ims',
+  //         ipv4: '10.10.48.97',
+  //         ipv6: '',
+  //         pduSessionID: 6,
+  //         ranN3IP: '192.168.8.223',
+  //         sstSD: '1-000001',
+  //         tai: '46000-0001',
+  //         upfN3IP: '192.168.1.161',
+  //       },
+  //       {
+  //         activeTime: '2023-11-29 18:39:05',
+  //         dnn: 'cmnet',
+  //         ipv4: '10.10.48.62',
+  //         ipv6: '',
+  //         pduSessionID: 5,
+  //         ranN3IP: '192.168.8.223',
+  //         sstSD: '1-000001',
+  //         tai: '46000-0001',
+  //         upfN3IP: '192.168.1.163',
+  //       },
+  //     ],
+  //     ratType: 'EUTRAN',
+  //   },
+  // ];
   return data;
 }

src/views/neUser/auth/index.vue

@@ -86,21 +86,21 @@ let tableColumns: ColumnsType = [
   {
     title: 'IMSI',
     dataIndex: 'imsi',
-    align: 'left',
+    align: 'center',
     sorter: true,
     width: 150,
   },
   {
     title: 'AMF',
     dataIndex: 'amf',
-    align: 'left',
+    align: 'center',
-    width: 100,
+    width: 80,
   },
   {
     title: 'Status',
     dataIndex: 'status',
-    align: 'left',
+    align: 'center',
-    width: 100,
+    width: 80,
   },
   // {
   //   title: 'KI',
@@ -117,7 +117,7 @@ let tableColumns: ColumnsType = [
   {
     title: 'Algo Index',
     dataIndex: 'algoIndex',
-    align: 'left',
+    align: 'center',
     width: 100,
   },
   {

src/views/neUser/base5G/index.vue

@@ -69,26 +69,25 @@ let tableColumns: ColumnsType = [
   {
     title: 'NodeB ID',
     dataIndex: 'id',
-    align: 'left',
+    align: 'center',
-    width: 150,
+    width: 100,
   },
   {
     title: 'UE Number',
     dataIndex: 'ueNum',
-    align: 'left',
+    align: 'center',
-    width: 150,
+    width: 100,
   },
   {
     title: 'NodeB Name',
     dataIndex: 'name',
-    align: 'left',
+    align: 'center',
     width: 150,
   },
   {
     title: 'NodeB Address',
     dataIndex: 'address',
     align: 'left',
-    minWidth: 150,
   },
 ];
 

src/views/neUser/ims/index.vue

@@ -72,32 +72,32 @@ let tableColumns: ColumnsType = [
   {
     title: 'IMSI',
     dataIndex: 'imsi',
-    align: 'left',
+    align: 'center',
     width: 150,
   },
   {
     title: 'MSISDN',
     dataIndex: 'msisdn',
-    align: 'left',
+    align: 'center',
     width: 150,
   },
 
   {
     title: 'Barring',
     dataIndex: 'barring',
-    align: 'left',
+    align: 'center',
-    width: 150,
+    width: 80,
   },
   {
     title: 'Registration State',
     dataIndex: 'regState',
-    align: 'left',
+    align: 'center',
     width: 150,
   },
   {
     title: 'Active Time',
     dataIndex: 'activeTime',
-    align: 'left',
+    align: 'center',
     width: 150,
   },
   {

src/views/neUser/n3iwf/index.vue

@@ -61,26 +61,26 @@ let tableColumns: ColumnsType = [
   {
     title: 'IMSI',
     dataIndex: 'imsi',
-    align: 'left',
+    align: 'center',
     width: 150,
   },
   {
     title: 'ActiveTime',
     dataIndex: 'activeTime',
-    align: 'left',
+    align: 'center',
     width: 150,
   },
   {
     title: 'RegState',
     dataIndex: 'regState',
-    align: 'left',
+    align: 'center',
     width: 100,
   },
   {
     title: 'Network Access Identity',
     dataIndex: 'nai',
     align: 'left',
-    minWidth: 100,
+    width: 500,
   },
 ];
 
@@ -150,7 +150,7 @@ onMounted(() => {
       <!-- 表格搜索栏 -->
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="8" :md="12" :xs="24">
             <a-form-item :label="t('views.neUser.n3iwf.neType')" name="neId ">
               <a-select
                 v-model:value="queryParams.neId"
@@ -262,7 +262,7 @@ onMounted(() => {
         :size="tableState.size"
         :row-class-name="fnTableStriped"
         :pagination="false"
-        :scroll="{ y: 450 }"
+        :scroll="{ y: 'calc(100vh - 480px)' }"
       >
       </a-table>
     </a-card>

src/views/neUser/sub/index.vue

@@ -89,7 +89,7 @@ let tableColumns: ColumnsType = [
   {
     title: 'IMSI',
     dataIndex: 'imsi',
-    align: 'left',
+    align: 'center',
     fixed: 'left',
     sorter: true,
     resizable: true,
@@ -100,60 +100,61 @@ let tableColumns: ColumnsType = [
   {
     title: 'MSISDN',
     dataIndex: 'msisdn',
-    align: 'left',
+    align: 'center',
     fixed: 'left',
     sorter: true,
-    resizable: true,
     width: 150,
-    minWidth: 150,
-    maxWidth: 300,
   },
   {
-    title: 'Subscribed AMBR Temp',
+    title: 'Subscribed AMBR',
     dataIndex: 'ambr',
-    align: 'left',
+    align: 'center',
-    width: 200,
+    width: 100,
   },
   {
-    title: 'Subscribed SNSSAIs Temp',
+    title: 'Subscribed SNSSAIs',
     dataIndex: 'sar',
-    align: 'left',
+    align: 'center',
-    width: 200,
+    width: 100,
   },
   {
-    title: 'RAT Restriction',
+    title: 'RAT',
     dataIndex: 'rat',
-    align: 'left',
+    align: 'center',
-    width: 200,
+    width: 50,
   },
   {
-    title: 'Forbidden Areas Temp',
+    title: 'Forbidden Areas',
     dataIndex: 'arfb',
-    align: 'left',
+    align: 'center',
-    width: 200,
+    width: 100,
   },
   {
-    title: 'Service Area Restrict Temp',
+    title: 'Service Area Restrict',
     dataIndex: 'nssai',
-    align: 'left',
+    align: 'center',
-    width: 200,
+    width: 100,
   },
   {
-    title: 'CN Type Restriction',
+    title: 'CN Type',
     dataIndex: 'cn',
-    align: 'left',
+    align: 'center',
-    width: 200,
+    width: 100,
   },
   {
-    title: 'EPS Flag',
+    title: 'EPS',
     dataIndex: 'epsFlag',
-    align: 'left',
+    align: 'center',
     width: 100,
   },
   {
     title: 'Subscribed Data',
     dataIndex: 'smData',
     align: 'left',
+    resizable: true,
+    width: 500,
+    minWidth: 150,
+    maxWidth: 500,
   },
   {
     title: t('common.operate'),
@@ -1100,7 +1101,7 @@ onMounted(() => {
         :size="tableState.size"
         :row-class-name="fnTableStriped"
         :pagination="tablePagination"
-        :scroll="{ x: tableColumnsDnd.length * 200, y: 'calc(100vh - 480px)' }"
+        :scroll="{ y: 'calc(100vh - 480px)' }"
         @change="fnTableChange"
         @resizeColumn="(w:number, col:any) => (col.width = w)"
       >
@@ -1137,6 +1138,7 @@ onMounted(() => {
 
     <!-- 新增框或修改框 -->
     <DraggableModal
+      style="top: 0px"
       width="800px"
       :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
       :keyboard="false"
@@ -1568,6 +1570,7 @@ onMounted(() => {
 
     <!-- 批量增加框 -->
     <DraggableModal
+      style="top: 0px"
       width="800px"
       :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
       :keyboard="false"
@@ -1999,6 +2002,7 @@ onMounted(() => {
 
     <!-- 批量删除框 -->
     <DraggableModal
+      style="top: 0px"
       width="500px"
       :keyboard="false"
       :mask-closable="false"

src/views/neUser/ue/index.vue

@@ -80,7 +80,7 @@ let tableColumns: ColumnsType = [
       }
       return opt.value;
     },
-    width: 3,
+    width: 150,
   },
   {
     title: 'MSISDN',
@@ -93,18 +93,18 @@ let tableColumns: ColumnsType = [
       }
       return opt.value;
     },
-    width: 3,
+    width: 150,
   },
   {
     title: 'RAT Type',
     dataIndex: 'ratType',
     align: 'center',
-    width: 3,
+    width: 100,
   },
   {
     title: 'DNN List',
     dataIndex: 'pduSessionInfo',
-    align: 'center',
+    align: 'left',
     customRender(opt) {
       if (opt.value) {
         let arr = [];
@@ -117,13 +117,12 @@ let tableColumns: ColumnsType = [
       }
       return '';
     },
-    width: 5,
+    width: 150,
   },
   {
     title: t('common.operate'),
     key: 'imsi',
-    align: 'center',
+    align: 'left',
-    width: 3,
   },
 ];