From 693ed533f9482a8321188caec21c6f07596c7545 Mon Sep 17 00:00:00 2001
From: lai <371757574@qq.com>
Date: Mon, 24 Jun 2024 10:40:08 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=9F=E6=88=B7=E7=95=8C=E9=9D=A2=E5=BD=92?=
 =?UTF-8?q?=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tenant/base5G/index.vue  | 344 ++++++++++++++
 src/views/tenant/operate/index.vue | 740 +++++++++++++++++++++++++++++
 src/views/tenant/ue/index.vue      | 487 +++++++++++++++++++
 3 files changed, 1571 insertions(+)
 create mode 100644 src/views/tenant/base5G/index.vue
 create mode 100644 src/views/tenant/operate/index.vue
 create mode 100644 src/views/tenant/ue/index.vue

diff --git a/src/views/tenant/base5G/index.vue b/src/views/tenant/base5G/index.vue
new file mode 100644
index 00000000..85417cec
--- /dev/null
+++ b/src/views/tenant/base5G/index.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { TableColumnsType, message } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { listBase5G } from '@/api/neUser/base5G';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useNeInfoStore from '@/store/modules/neinfo';
+import { useRoute } from 'vue-router';
+import { ColumnsType } from 'ant-design-vue/lib/table';
+import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
+import useUserStore from '@/store/modules/user';
+const neInfoStore = useNeInfoStore();
+const route = useRoute();
+const { t } = useI18n();
+
+/**网元参数 */
+let neCascaderOptions = ref<Record<string, any>[]>([]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元ID */
+  neId: '',
+  /**网元类型 */
+  neType: ['', ''],
+  /**GNB_ID */
+  id: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    neId: '',
+    id: '',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'small',
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: 'Radio ID',
+    dataIndex: 'id',
+    align: 'center',
+    width: 100,
+  },
+  {
+    title: 'UE Number',
+    dataIndex: 'ueNum',
+    align: 'center',
+    width: 100,
+  },
+  {
+    title: 'Radio Name',
+    dataIndex: 'name',
+    align: 'left',
+    resizable: true,
+    width: 200,
+    minWidth: 150,
+    maxWidth: 400,
+  },
+  {
+    title: 'Radio Address',
+    dataIndex: 'address',
+    align: 'left',
+  },
+];
+
+/**表格字段列排序 */
+let tableColumnsDnd = ref<ColumnsType>([]);
+
+/**表格分页器参数 */
+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;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**查询列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+
+  let toBack: Record<string, any> = {
+    neType: queryParams.neType[0],
+    neId: queryParams.neType[1],
+    nbId: queryParams.id,
+    pageNum: queryParams.pageNum,
+    pageSize: queryParams.pageSize,
+  };
+  listBase5G(toRaw(toBack)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    } else {
+      //AMF返回404是代表没找到这个数据 GNB_NOT_FOUND
+      tablePagination.total = 0;
+      tableState.data = [];
+    }
+    tableState.loading = false;
+  });
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  neInfoStore
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          // 过滤不可用的网元
+          neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
+            (item: any) => {
+              return ['AMF', 'MME'].includes(item.value);
+            }
+          );
+          if (neCascaderOptions.value.length === 0) {
+            message.warning({
+              content: t('common.noData'),
+              duration: 2,
+            });
+            return;
+          }
+          // 无查询参数neType时 默认选择AMF
+          const queryNeType = (route.query.neType as string) || 'AMF';
+          const item = neCascaderOptions.value.find(
+            s => s.value === queryNeType
+          );
+          if (item && item.children) {
+            const info = item.children[0];
+            queryParams.neType = [info.neType, info.neId];
+          } else {
+            const info = neCascaderOptions.value[0].children[0];
+            queryParams.neType = [info.neType, info.neId];
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item name="neId" :label="t('views.neUser.base5G.neType')">
+              <a-cascader
+                v-model:value="queryParams.neType"
+                :options="neCascaderOptions"
+                :allow-clear="false"
+                :placeholder="t('common.selectPlease')"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="Radio ID" name="id">
+              <a-input v-model:value="queryParams.id" allow-clear></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title> </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <TableColumnsDnd
+            cache-id="base5GData"
+            :columns="tableColumns"
+            v-model:columns-dnd="tableColumnsDnd"
+          ></TableColumnsDnd>
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown placement="bottomRight" trigger="click">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumnsDnd"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ y: 'calc(100vh - 480px)' }"
+        @resizeColumn="(w:number, col:any) => (col.width = w)"
+      >
+      </a-table>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>
diff --git a/src/views/tenant/operate/index.vue b/src/views/tenant/operate/index.vue
new file mode 100644
index 00000000..3158f9e2
--- /dev/null
+++ b/src/views/tenant/operate/index.vue
@@ -0,0 +1,740 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { message, Modal } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/lib/table';
+import {
+  exportSysLogOperate,
+  listSysLogOperate,
+  delSysLogOperate,
+  cleanSysLogOperate,
+} from '@/api/system/log/operate';
+import { saveAs } from 'file-saver';
+import { parseDateToStr } from '@/utils/date-utils';
+import useDictStore from '@/store/modules/dict';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+const { getDict } = useDictStore();
+
+/**字典数据 */
+let dict: {
+  /**业务类型 */
+  sysBusinessType: DictType[];
+  /**登录状态 */
+  sysCommonStatus: DictType[];
+} = reactive({
+  sysBusinessType: [],
+  sysCommonStatus: [],
+});
+
+/**开始结束时间 */
+let queryRangePicker = ref<[string, string]>(['', '']);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**操作模块 */
+  title: '',
+  /**操作人员 */
+  operName: '',
+  /**业务类型 */
+  businessType: undefined,
+  /**操作状态 */
+  status: undefined,
+  /**开始时间 */
+  beginTime: '',
+  /**结束时间 */
+  endTime: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    title: '',
+    operName: '',
+    businessType: undefined,
+    status: undefined,
+    beginTime: '',
+    endTime: '',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  queryRangePicker.value = ['', ''];
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: false,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('views.system.log.operate.operId'),
+    dataIndex: 'operId',
+    align: 'center',
+    width: 100,
+  },
+  {
+    title: t('views.system.log.operate.moduleName'),
+    dataIndex: 'title',
+    align: 'left',
+    width: 250,
+  },
+  {
+    title: t('views.system.log.operate.workType'),
+    dataIndex: 'businessType',
+    key: 'businessType',
+    align: 'left',
+    width: 120,
+  },
+  {
+    title: t('views.system.log.operate.operUser'),
+    dataIndex: 'operName',
+    align: 'left',
+    width: 120,
+  },
+  // {
+  //   title: t('views.system.log.operate.requestMe'),
+  //   dataIndex: 'requestMethod',
+  //   align: 'left',
+  //   width: 150,
+  // },
+  {
+    title: t('views.system.log.operate.host'),
+    dataIndex: 'operIp',
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: t('views.system.log.operate.operStatus'),
+    dataIndex: 'status',
+    key: 'status',
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: t('views.system.log.operate.operDate'),
+    dataIndex: 'operTime',
+    align: 'center',
+    width: 150,
+    customRender(opt) {
+      if (+opt.value <= 0) return '';
+      return parseDateToStr(+opt.value);
+    },
+  },
+  {
+    title: t('views.system.log.operate.useTime'),
+    dataIndex: 'costTime',
+    key: 'costTime',
+    align: 'right',
+    width: 150,
+    customRender(opt) {
+      return `${opt.value} ms`;
+    },
+  },
+  {
+    title: t('common.operate'),
+    key: 'operId',
+    align: 'left',
+  },
+];
+
+/**表格分页器参数 */
+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;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**详情框是否显示 */
+  visibleByView: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByView: false,
+  title: '操作日志',
+  from: {
+    operId: undefined,
+    businessType: 0,
+    deptName: '',
+    method: '',
+    operIp: '',
+    operLocation: '',
+    operMsg: '',
+    operName: '',
+    operParam: '',
+    operTime: 0,
+    operUrl: '',
+    operType: 1,
+    requestMethod: 'PUT',
+    status: 1,
+    title: '',
+  },
+});
+
+/**
+ * 对话框弹出显示为 查看
+ * @param row 操作日志信息对象
+ */
+function fnModalVisibleByVive(row: Record<string, string>) {
+  modalState.from = Object.assign(modalState.from, row);
+  modalState.title = t('views.system.log.operate.logInfo');
+  modalState.visibleByView = true;
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ */
+function fnModalCancel() {
+  modalState.visibleByView = false;
+}
+
+/**记录删除 */
+function fnRecordDelete() {
+  const ids = tableState.selectedRowKeys.join(',');
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.system.log.operate.delSure', { ids }),
+    onOk() {
+      const key = 'delSysLogOperate';
+      message.loading({ content: t('common.loading'), key });
+      delSysLogOperate(ids).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('common.msgSuccess', { msg: t('common.deleteText') }),
+            key,
+            duration: 2,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**列表清空 */
+function fnCleanList() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.system.log.operate.delAllSure'),
+    onOk() {
+      const key = 'cleanSysLogOperate';
+      message.loading({ content: t('common.loading'), key });
+      cleanSysLogOperate().then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('views.system.log.operate.delAllSuss'),
+            key,
+            duration: 2,
+          });
+          fnQueryReset();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**列表导出 */
+function fnExportList() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.system.user.exportSure'),
+    onOk() {
+      const key = 'exportSysLogOperate';
+      message.loading({ content: t('common.loading'), key });
+      exportSysLogOperate(toRaw(queryParams)).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('common.msgSuccess', {
+              msg: t('views.system.user.export'),
+            }),
+            key,
+            duration: 2,
+          });
+          saveAs(res.data, `sys_log_operate_${Date.now()}.xlsx`);
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**查询登录日志列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  if (!queryRangePicker.value) {
+    queryRangePicker.value = ['', ''];
+  }
+  queryParams.beginTime = queryRangePicker.value[0];
+  queryParams.endTime = queryRangePicker.value[1];
+  listSysLogOperate(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([
+    getDict('sys_oper_type'),
+    getDict('sys_common_status'),
+  ]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.sysBusinessType = resArr[0].value;
+    }
+    if (resArr[1].status === 'fulfilled') {
+      dict.sysCommonStatus = resArr[1].value;
+    }
+  });
+  // 获取列表数据
+  fnGetList();
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.log.operate.operModule')"
+              name="title"
+            >
+              <a-input v-model:value="queryParams.title" allow-clear></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="12" :xs="24" v-roles:has="['administrator']">
+            <a-form-item
+              :label="t('views.system.log.operate.operUser')"
+              name="operName"
+            > 
+              <a-input
+                v-model:value="queryParams.operName"
+                allow-clear
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.log.operate.workType')"
+              name="businessType"
+            >
+              <a-select
+                v-model:value="queryParams.businessType"
+                allow-clear
+                :options="dict.sysBusinessType"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.log.operate.operStatus')"
+              name="status"
+            >
+              <a-select
+                v-model:value="queryParams.status"
+                allow-clear
+                :options="dict.sysCommonStatus"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.log.operate.operTime')"
+              name="queryRangePicker"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                allow-clear
+                bordered
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
+                style="width: 100%"
+              ></a-range-picker>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}</a-button
+                >
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}</a-button
+                >
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-space :size="8" align="center">
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            @click.prevent="fnRecordDelete()"
+            v-perms:has="['system:log:operate:remove']"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+          <a-button
+            type="dashed"
+            danger
+            @click.prevent="fnCleanList()"
+            v-perms:has="['system:log:operate:remove']"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('views.system.log.operate.delAll') }}
+          </a-button>
+          <a-button
+            type="dashed"
+            @click.prevent="fnExportList()"
+            v-perms:has="['system:log:operate:export']"
+          >
+            <template #icon><ExportOutlined /></template>
+            {{ t('common.export') }}
+          </a-button>
+        </a-space>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown placement="bottomRight" trigger="click">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default"
+                    >{{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle"
+                    >{{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small"
+                    >{{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="operId"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :scroll="{ x: tableColumns.length * 150 }"
+        :pagination="tablePagination"
+        :row-selection="{
+          type: 'checkbox',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'businessType'">
+            <DictTag
+              :options="dict.sysBusinessType"
+              :value="record.businessType"
+            />
+          </template>
+          <template v-if="column.key === 'status'">
+            <DictTag :options="dict.sysCommonStatus" :value="record.status" />
+          </template>
+          <template v-if="column.key === 'operId'">
+            <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.viewText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByVive(record)"
+                  v-perms:has="['system:log:operate:query']"
+                >
+                  <template #icon><ProfileOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 详情框 -->
+    <a-modal
+      width="800px"
+      :visible="modalState.visibleByView"
+      :title="modalState.title"
+      @cancel="fnModalCancel"
+    >
+      <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.log.operate.operId')"
+              name="operId"
+            >
+              {{ modalState.from.operId }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.log.operate.operStatus')"
+              name="status"
+            >
+              <a-tag :color="+modalState.from.status ? 'success' : 'error'">
+                {{
+                  [
+                    t('views.system.log.operate.fail'),
+                    t('views.system.log.operate.suss'),
+                  ][+modalState.from.status]
+                }}
+              </a-tag>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.log.operate.workType')"
+              name="businessType"
+            >
+              {{ modalState.from.title }} /
+              <DictTag
+                :options="dict.sysBusinessType"
+                :value="modalState.from.businessType"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.log.operate.operUser')"
+              name="operName"
+            >
+              {{ modalState.from.operName }} / {{ modalState.from.operIp }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.log.operate.RequestIp')"
+              name="operUrl"
+            >
+              {{ modalState.from.requestMethod }} -
+              {{ modalState.from.operUrl }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.log.operate.operTime')"
+              name="operTime"
+            >
+              <span v-if="+modalState.from.operTime > 0">
+                {{ parseDateToStr(+modalState.from.operTime) }}
+              </span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.log.operate.useTime')"
+              name="costTime"
+            >
+              {{ modalState.from.costTime }} ms
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <!-- <a-form-item
+              :label="t('views.system.log.operate.operMe')"
+              name="method"
+            >
+              {{ modalState.from.method }}
+            </a-form-item> -->
+          </a-col>
+        </a-row>
+        <a-form-item
+          :label="t('views.system.log.operate.reqParam')"
+          name="operParam"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
+          <a-textarea
+            v-model:value="modalState.from.operParam"
+            :auto-size="{ minRows: 2, maxRows: 6 }"
+            :disabled="true"
+          />
+        </a-form-item>
+        <a-form-item
+          :label="t('views.system.log.operate.operInfo')"
+          name="operMsg"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
+          <a-textarea
+            v-model:value="modalState.from.operMsg"
+            :auto-size="{ minRows: 2, maxRows: 6 }"
+            :disabled="true"
+          />
+        </a-form-item>
+      </a-form>
+      <template #footer>
+        <a-button key="cancel" @click="fnModalCancel">
+          {{ t('common.cancel') }}
+        </a-button>
+      </template>
+    </a-modal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>
diff --git a/src/views/tenant/ue/index.vue b/src/views/tenant/ue/index.vue
new file mode 100644
index 00000000..223c2f01
--- /dev/null
+++ b/src/views/tenant/ue/index.vue
@@ -0,0 +1,487 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { message } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/lib/table';
+import { listUEInfoBySMF } from '@/api/neUser/smf';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
+import useUserStore from '@/store/modules/user';
+
+const { t } = useI18n();
+
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元ID */
+  neId: undefined,
+  /**IMSI */
+  imsi: '',
+  /**msisdn */
+  msisdn: '',
+
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    imsi: '',
+    msisdn: '',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: false,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: 'IMSI',
+    dataIndex: 'imsi',
+    align: 'center',
+    sorter: (a: any, b: any) => Number(a.imsi) - Number(b.imsi),
+    customRender(opt) {
+      const idx = opt.value.lastIndexOf('-');
+      if (idx != -1) {
+        return opt.value.substring(idx + 1);
+      }
+      return opt.value;
+    },
+    width: 150,
+  },
+  {
+    title: 'MSISDN',
+    dataIndex: 'msisdn',
+    align: 'center',
+    sorter: (a: any, b: any) => Number(a.msisdn) - Number(b.msisdn),
+    customRender(opt) {
+      const idx = opt.value.lastIndexOf('-');
+      if (idx != -1) {
+        return opt.value.substring(idx + 1);
+      }
+      return opt.value;
+    },
+    width: 150,
+  },
+  {
+    title: 'RAT Type',
+    dataIndex: 'ratType',
+    align: 'center',
+    width: 100,
+  },
+  {
+    title: 'APN/DNN List',
+    dataIndex: 'pduSessionInfo',
+    align: 'left',
+    customRender(opt) {
+      if (opt.value) {
+        let arr = [];
+        for (const v of opt.value) {
+          if (v.dnn) {
+            arr.push(v.dnn);
+          }
+        }
+        return arr.sort().join(',');
+      }
+      return '';
+    },
+    width: 150,
+  },
+  {
+    title: t('common.operate'),
+    key: 'imsi',
+    align: 'left',
+  },
+];
+
+/**表格字段列排序 */
+let tableColumnsDnd = ref<ColumnsType>([]);
+
+/**表格分页器参数 */
+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;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**详情框是否显示 */
+  visibleByView: boolean;
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByView: false,
+  visibleByEdit: false,
+  title: '在线信息',
+  from: {
+    imsi: '',
+    msisdn: '',
+    pduSessionInfo: undefined,
+    ratType: '',
+  },
+  confirmLoading: false,
+});
+
+/**
+ * 对话框弹出显示为 查看
+ * @param row 单行记录信息
+ */
+function fnModalVisibleByVive(row: Record<string, any>) {
+  if (!row.imsi) {
+    message.error(t('common.getInfoFail'), 2);
+    return;
+  }
+  const imsiIdx = row.imsi.lastIndexOf('-');
+  if (imsiIdx != -1) {
+    row.imsi = row.imsi.substring(imsiIdx + 1);
+  }
+  const msisdnIdx = row.msisdn.lastIndexOf('-');
+  if (msisdnIdx != -1) {
+    row.msisdn = row.msisdn.substring(msisdnIdx + 1);
+  }
+  modalState.from = Object.assign(modalState.from, row);
+  modalState.title = `${row.imsi}`;
+  modalState.visibleByView = true;
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalState.visibleByView = false;
+}
+
+/**查询列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listUEInfoBySMF(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    } else {
+      tablePagination.total = 0;
+      tableState.data = [];
+    }
+    tableState.loading = false;
+  });
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          let arr: Record<string, any>[] = [];
+          res.data.forEach(i => {
+            if (i.neType === 'SMF') {
+              arr.push({ value: i.neId, label: i.neName });
+            }
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            queryParams.neId = arr[0].value;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item :label="t('views.neUser.ue.neType')" name="neId ">
+              <a-select
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item label="IMSI" name="imsi">
+              <a-input v-model:value="queryParams.imsi" allow-clear></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item label="MSISDN" name="msisdn">
+              <a-input v-model:value="queryParams.msisdn" allow-clear></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title> </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <TableColumnsDnd
+            cache-id="ueData"
+            :columns="tableColumns"
+            v-model:columns-dnd="tableColumnsDnd"
+          ></TableColumnsDnd>
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown placement="bottomRight" trigger="click">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumnsDnd"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: 1000, y: 400 }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'imsi'">
+            <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.viewText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByVive(record)"
+                >
+                  <template #icon><ProfileOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 详情框 -->
+    <DraggableModal
+      width="800px"
+      :visible="modalState.visibleByView"
+      :title="modalState.title"
+      @cancel="fnModalCancel"
+      :footer="null"
+    >
+      <a-form layout="horizontal" labelAlign="left" :labelWrap="false">
+        <a-row :gutter="8">
+          <a-col :lg="8" :md="8" :xs="24">
+            <a-form-item label="IMSI" name="imsi">
+              {{ modalState.from.imsi }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="8" :xs="24">
+            <a-form-item label="MSISDN" name="msisdn">
+              {{ modalState.from.msisdn }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="8" :xs="24">
+            <a-form-item label="RAT Type" name="ratType">
+              {{ modalState.from.ratType }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-descriptions
+          :title="v.dnn"
+          :column="2"
+          size="small"
+          bordered
+          v-for="v in modalState.from.pduSessionInfo"
+          :key="v.dnn"
+        >
+          <a-descriptions-item label="PDU Session ID">
+            {{ v.pduSessionID }}
+          </a-descriptions-item>
+          <a-descriptions-item label="User Plane State">
+            {{ v.upState }}
+          </a-descriptions-item>
+          <a-descriptions-item label="IPV4">{{ v.ipv4 }}</a-descriptions-item>
+          <a-descriptions-item label="IPV6">{{ v.ipv6 }}</a-descriptions-item>
+          <a-descriptions-item label="TAI">{{ v.tai }}</a-descriptions-item>
+          <a-descriptions-item label="SST-SD">
+            {{ v.sstSD }}</a-descriptions-item
+          >
+          <a-descriptions-item label="UPF N3 IP">
+            {{ v.upfN3IP }}
+          </a-descriptions-item>
+          <a-descriptions-item label="RAN N3 IP">
+            {{ v.ranN3IP }}
+          </a-descriptions-item>
+          <a-descriptions-item label="Create Time">
+            {{ v.activeTime }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-form>
+    </DraggableModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>