Merge remote-tracking branch 'origin/main' into practical-training

2024-07-27 14:16:15 +08:00
parent 76499d98e0 532546c3f5
commit a88ae826cc
29 changed files with 1163 additions and 391 deletions
--- a/.env.development
+++ b/.env.development
@@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network EMS"
 VITE_APP_CODE = "CN EMS"

 # 应用版本
-VITE_APP_VERSION = "2.240712"
+VITE_APP_VERSION = "2.240727"

 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"
--- a/.env.production
+++ b/.env.production
@@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network EMS"
 VITE_APP_CODE = "CN EMS"

 # 应用版本
-VITE_APP_VERSION = "2.240712"
+VITE_APP_VERSION = "2.240727"

 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"
--- a/src/api/ne/neConfigBackup.ts
+++ b/src/api/ne/neConfigBackup.ts
@@ -0,0 +1,83 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 网元配置文件备份记录列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listNeConfigBackup(query: Record<string, any>) {
+  return request({
+    url: '/ne/config/backup/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+/**
+ * 网元配置文件备份记录修改
+ * @param data 数据 { id, name, remark }
+ * @returns object
+ */
+export function updateNeConfigBackup(data: Record<string, any>) {
+  return request({
+    url: '/ne/config/backup',
+    method: 'put',
+    data: data,
+  });
+}
+
+/**
+ * 网元配置文件备份记录下载
+ * @param id 记录ID
+ * @returns object
+ */
+export async function downNeConfigBackup(id: string) {
+  return await request({
+    url: '/ne/config/backup/download',
+    method: 'get',
+    params: { id },
+    responseType: 'blob',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * 网元配置文件备份记录删除
+ * @param id 记录ID
+ * @returns object
+ */
+export async function delNeConfigBackup(id: string) {
+  return request({
+    url: '/ne/config/backup',
+    method: 'delete',
+    params: { id },
+  });
+}
+
+/**
+ * 网元配置文件备份导出
+ * @param data 数据 { neType, neId }
+ * @returns object
+ */
+export function exportNeConfigBackup(data: Record<string, any>) {
+  return request({
+    url: '/ne/config/backup/export',
+    method: 'post',
+    data: data,
+    responseType: 'blob',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * 网元配置文件备份导入
+ * @param data 数据 { neType, neId, type, path }
+ * @returns object
+ */
+export function importNeConfigBackup(data: Record<string, any>) {
+  return request({
+    url: '/ne/config/backup/import',
+    method: 'post',
+    data: data,
+  });
+}
--- a/src/api/neData/udm_auth.ts
+++ b/src/api/neData/udm_auth.ts
@@ -113,7 +113,6 @@ export function batchDelUDMAuth(neId: string, imsi: string, num: number) {

 /**
 * UDM鉴权用户导入
- * @param neId 网元ID
 * @param data 表单数据对象
 * @returns object
 */
--- a/src/api/neUser/ims.ts
+++ b/src/api/neUser/ims.ts
@@ -52,9 +52,11 @@ export async function listUENumByIMS(neId: String) {
    method: 'get',
  });
  if (result.code === RESULT_CODE_SUCCESS) {
-    return Object.assign(result, {
-      data: result.data['ueNum'],
-    });
+    let num = result.data['ueNum'] || 0;
+    if (num === 0) {
+      num = result.data.data['ueNum'] || 0;
+    }
+    return Object.assign(result, { data: num });
  }

  // 模拟数据
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -668,9 +668,8 @@ export default {
          local:'Local File',
          localUpload:'Local Upload',
          exportTip:'Confirm that you want to export the network element configuration file?',
-          exportMsg:'Exported successfully, please download from [Backup Management].',
-          filePlease: "Please upload a file", 
-          fileNamePlease: 'Please select the server file',
+          exportMsg:'Exporting Network Element Configuration Information to a File Succeeded',
+          pathPlease: 'No Backup File Found',
        },
      },
      neHost: {
@@ -781,6 +780,11 @@ export default {
        syncNeDone: 'Synchronization to network element terminals complete',
        saveOk: 'Save Success!', 
      },
+      neConfigBackup: {
+        name: "Name",
+        downTip: 'Confirmed to download the backup file [{txt}]?',
+        title: "Modify Backup {txt}",
+      },
      neQuickSetup: {
        stepPrev: 'Previous',
        stepPrevTip: 'Confirm that you want to abandon the current change and return to the previous step?',
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -668,9 +668,8 @@ export default {
          local:'本地文件',
          localUpload:'本地上传',
          exportTip:'确认要导出网元配置信息到文件？',
-          exportMsg:'导出成功,请到【备份管理】进行下载',
-          filePlease: "请上传文件", 
-          fileNamePlease: '请选择服务器文件',
+          exportMsg:'导出网元配置信息到文件成功',
+          pathPlease: '未发现文件',
        },
      },
      neHost: {
@@ -781,6 +780,11 @@ export default {
        syncNeDone: '同步到网元终端完成',
        saveOk: '保存成功！',
      },
+      neConfigBackup: {
+        name: "名称",
+        downTip: '确认要下载备份文件【{txt}】吗？',
+        title: "修改备份信息 {txt}",
+      },
      neQuickSetup: {
        stepPrev: '上一步',
        stepPrevTip: '确认要放弃当前变更返回上一步吗？',
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -176,6 +176,7 @@ function fnCheckAppNameOverflow() {
  if (!text) return;
  if (text.offsetWidth > container.offsetWidth) {
    text.classList.add('app-name_scrollable');
+    text.setAttribute('data-content', text.innerText);
  } else {
    text.classList.remove('app-name_scrollable');
  }
@@ -342,11 +343,17 @@ onUnmounted(() => {
                :href="appStore.officialUrl"
                target="_blank"
                size="small"
+                v-perms:has="['system:setting:official']"
                v-if="appStore.officialUrl !== '#'"
              >
                {{ t('loayouts.basic.officialUrl') }}
              </a-button>
-              <a-button type="link" size="small" @click="fnClickHelpDoc()">
+              <a-button
+                type="link"
+                size="small"
+                v-perms:has="['system:setting:doc']"
+                @click="fnClickHelpDoc()"
+              >
                {{ t('loayouts.basic.helpDoc') }}
              </a-button>
            </a-space>
@@ -382,20 +389,26 @@ onUnmounted(() => {
  // text-overflow: ellipsis;
  white-space: nowrap;
  width: 148px;
-
-  &_scrollable {
-    // padding-left: 100%;
+  > .app-name_scrollable {
+    padding-right: 12px;
    display: inline-block;
    animation: scrollable-animation linear 6s infinite both;
-  }
-
-  @keyframes scrollable-animation {
-    0% {
-      transform: translate3d(0, 0, 0);
+    &::after {
+      content: attr(data-content);
+      position: absolute;
+      top: 0;
+      right: -100%;
+      transition: right 0.3s ease;
    }

-    100% {
-      transform: translate3d(-100%, 0, 0);
+    @keyframes scrollable-animation {
+      0% {
+        transform: translateX(0);
+      }
+
+      100% {
+        transform: translateX(calc(-100% - 12px));
+      }
    }
  }
 }
--- a/src/layouts/components/RightContent.vue
+++ b/src/layouts/components/RightContent.vue
@@ -91,42 +91,45 @@ function fnChangeLocale(e: any) {
    </span>

    <!-- 锁屏操作 -->
-    <a-tooltip placement="bottom">
-      <template #title>{{ t('loayouts.rightContent.lock') }}</template>
-      <a-button type="text" style="color: inherit" @click="fnClickLock()">
-        <template #icon>
-          <LockOutlined />
-        </template>
-      </a-button>
-      <ProModal
-        :drag="true"
-        :width="400"
-        :minHeight="200"
-        :mask-closable="false"
-        v-model:visible="lockConfirm"
-        :title="t('loayouts.rightContent.lockTip')"
-        @ok="fnClickLockToPage()"
-      >
-        <a-space>
-          {{ t('loayouts.rightContent.lockPasswd') }}：
-          <a-input-password
-            v-model:value="lockPasswd"
-            :placeholder="t('common.inputPlease')"
-          >
-            <template #prefix>
-              <a-tooltip
-                :title="t('loayouts.rightContent.lockPasswdTip')"
-                placement="topLeft"
-              >
-                <UnlockOutlined />
-              </a-tooltip>
-            </template>
-          </a-input-password>
-        </a-space>
-      </ProModal>
-    </a-tooltip>
+    <span v-perms:has="['system:setting:lock']">
+      <a-tooltip placement="bottom">
+        <template #title>{{ t('loayouts.rightContent.lock') }}</template>
+        <a-button type="text" style="color: inherit" @click="fnClickLock()">
+          <template #icon>
+            <LockOutlined />
+          </template>
+        </a-button>
+        <ProModal
+          :drag="true"
+          :width="400"
+          :minHeight="200"
+          :mask-closable="false"
+          v-model:visible="lockConfirm"
+          :title="t('loayouts.rightContent.lockTip')"
+          @ok="fnClickLockToPage()"
+        >
+          <a-space>
+            {{ t('loayouts.rightContent.lockPasswd') }}：
+            <a-input-password
+              v-model:value="lockPasswd"
+              :placeholder="t('common.inputPlease')"
+            >
+              <template #prefix>
+                <a-tooltip
+                  :title="t('loayouts.rightContent.lockPasswdTip')"
+                  placement="topLeft"
+                >
+                  <UnlockOutlined />
+                </a-tooltip>
+              </template>
+            </a-input-password>
+          </a-space>
+        </ProModal>
+      </a-tooltip>
+    </span>

-    <span v-roles:has="['teacher', 'admin']">
+    <!-- 用户帮助手册 -->
+    <span v-perms:has="['system:setting:doc']" v-roles:has="['teacher', 'admin']">
      <a-tooltip placement="bottom">
        <template #title>{{ t('loayouts.rightContent.helpDoc') }}</template>
        <a-button type="text" style="color: inherit" @click="fnClickHelpDoc()">
--- a/src/views/dashboard/amfUE/index.vue
+++ b/src/views/dashboard/amfUE/index.vue
@@ -42,7 +42,7 @@ let queryParams = reactive({
  /**网元类型 */
  neType: 'AMF',
  neId: '001',
-  eventType: 'auth-result',
+  eventType: '',
  imsi: '',
  sortField: 'timestamp',
  sortOrder: 'desc',
@@ -58,9 +58,9 @@ let queryParams = reactive({

 /**查询参数重置 */
 function fnQueryReset() {
-  eventTypes.value = ['auth-result'];
+  eventTypes.value = [];
  queryParams = Object.assign(queryParams, {
-    eventType: 'auth-result',
+    eventType: '',
    imsi: '',
    startTime: '',
    endTime: '',
@@ -74,7 +74,7 @@ function fnQueryReset() {
 }

 /**记录类型 */
-const eventTypes = ref<string[]>(['auth-result']);
+const eventTypes = ref<string[]>([]);

 /**查询记录类型变更 */
 function fnQueryEventTypeChange(value: any) {
@@ -607,10 +607,7 @@ onBeforeUnmount(() => {
                :value="record.eventJSON.authCode"
              />
            </span>
-            <span
-              v-if="record.eventType === 'detach'"
-              :title="record.eventJSON.detachTime"
-            >
+            <span v-if="record.eventType === 'detach'">
              <span>{{ t('views.dashboard.ue.resultOk') }}</span>
            </span>
            <span v-if="record.eventType === 'cm-state'">
@@ -706,7 +703,7 @@ onBeforeUnmount(() => {
                />
              </span>
              <span v-if="record.eventType === 'detach'">
-                {{ t('views.dashboard.ue.resultOK') }}
+                {{ t('views.dashboard.ue.resultOk') }}
              </span>
              <span v-if="record.eventType === 'cm-state'">
                <DictTag
--- a/src/views/dashboard/imsCDR/index.vue
+++ b/src/views/dashboard/imsCDR/index.vue
@@ -44,7 +44,7 @@ let queryParams = reactive({
  /**网元类型 */
  neType: 'IMS',
  neId: '001',
-  recordType: 'MOC',
+  recordType: '',
  callerParty: '',
  calledParty: '',
  sortField: 'timestamp',
@@ -61,9 +61,9 @@ let queryParams = reactive({

 /**查询参数重置 */
 function fnQueryReset() {
-  recordTypes.value = ['MOC'];
+  recordTypes.value = [];
  queryParams = Object.assign(queryParams, {
-    recordType: 'MOC',
+    recordType: '',
    callerParty: '',
    calledParty: '',
    startTime: '',
@@ -78,7 +78,7 @@ function fnQueryReset() {
 }

 /**记录类型 */
-const recordTypes = ref<string[]>(['MOC']);
+const recordTypes = ref<string[]>([]);

 /**查询记录类型变更 */
 function fnQueryRecordTypeChange(value: any) {
@@ -639,7 +639,7 @@ onBeforeUnmount(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :pagination="tablePagination"
-        :scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
+        :scroll="{ x: tableColumns.length * 150, y: 'calc(100vh - 480px)' }"
        :row-selection="{
          type: 'checkbox',
          columnWidth: '48px',
--- a/src/views/dashboard/mmeUE/index.vue
+++ b/src/views/dashboard/mmeUE/index.vue
@@ -43,7 +43,7 @@ let queryParams = reactive({
  /**网元类型 */
  neType: 'MME',
  neId: '001',
-  eventType: 'auth-result',
+  eventType: '',
  imsi: '',
  sortField: 'timestamp',
  sortOrder: 'desc',
@@ -59,9 +59,9 @@ let queryParams = reactive({

 /**查询参数重置 */
 function fnQueryReset() {
-  eventTypes.value = ['auth-result'];
+  eventTypes.value = [];
  queryParams = Object.assign(queryParams, {
-    eventType: 'auth-result',
+    eventType: '',
    imsi: '',
    startTime: '',
    endTime: '',
@@ -75,7 +75,7 @@ function fnQueryReset() {
 }

 /**记录类型 */
-const eventTypes = ref<string[]>(['auth-result']);
+const eventTypes = ref<string[]>([]);

 /**查询记录类型变更 */
 function fnQueryEventTypeChange(value: any) {
@@ -670,7 +670,7 @@ onBeforeUnmount(() => {
                />
              </span>
              <span v-if="record.eventType === 'detach'">
-                {{ t('views.dashboard.ue.resultOK') }}
+                {{ t('views.dashboard.ue.resultOk') }}
              </span>
              <span v-if="record.eventType === 'cm-state'">
                <DictTag
--- a/src/views/dashboard/overview/components/NeResources/index.vue
+++ b/src/views/dashboard/overview/components/NeResources/index.vue
@@ -237,7 +237,7 @@ function handleRanderChart(

 function fnChangeData(data: any[], itemID: string) {
  let info = data.find((item: any) => item.id === itemID);
-  if (!info.neState.online) return;
+  if (!info || !info.neState.online) return;
  // if (!info.neState.online) {
  //   info = data.find((item: any) => item.id === itemID);
  //   graphNodeClickID.value = itemID;
--- a/src/views/dashboard/overview/components/UPFFlow/index.vue
+++ b/src/views/dashboard/overview/components/UPFFlow/index.vue
@@ -203,17 +203,14 @@ function handleRanderChart() {

 /**查询初始UPF数据 */
 function fnGetInitData() {
-  // 查询10分钟前的
-  const nowDate: Date = new Date();
-  const tenMinutesAgo = new Date(nowDate.getTime() - 5 * 60 * 1000);
+  // 查询5分钟前的
+  const nowDate = new Date().getTime();

  listKPIData({
    neType: 'UPF',
    neId: '001',
-    startTime: parseDateToStr(tenMinutesAgo),
-    endTime: parseDateToStr(nowDate),
-    // startTime: '2024-03-20 19:50:00',
-    // endTime: '2024-03-20 19:55:00',
+    startTime: nowDate - 5 * 60 * 1000,
+    endTime: nowDate,
    interval: 5, // 5秒
    sortField: 'timeGroup',
    sortOrder: 'asc',
--- a/src/views/dashboard/overview/css/index.css
+++ b/src/views/dashboard/overview/css/index.css
@@ -159,14 +159,14 @@

 /* 概览区域 衍生基站信息 */
 .skim.base {
-  height: 20.6%;
+  height: 12%;
 }

 .skim.base .inner .data {
  display: flex;
  flex-direction: row;
  align-items: center;
-  height: 45%;
+  height: 75%;
 }
 .skim.base .inner .data .item {
  display: flex;
@@ -178,7 +178,7 @@
 /* 用户行为 */
 .userActivity {
  /* min-height: 35.8rem; */
-  height: 60%;
+  height: 54.6%;
 }
 .userActivity .inner .chart {
  width: 100%;
--- a/src/views/dashboard/overview/hooks/useUPFTotalFlow.ts
+++ b/src/views/dashboard/overview/hooks/useUPFTotalFlow.ts
@@ -1,3 +1,4 @@
+import { parseDateToStr } from '@/utils/date-utils';
 import { parseSizeFromBits, parseSizeFromKbs } from '@/utils/parse-utils';
 import { ref } from 'vue';

@@ -22,7 +23,7 @@ export const upfFlowData = ref<FDType>({

 /**UPF-流量数据 数据解析 */
 export function upfFlowParse(data: Record<string, string>) {
-  upfFlowData.value.lineXTime.push(data['timeGroup']);
+  upfFlowData.value.lineXTime.push(parseDateToStr(+data['timeGroup']));
  const upN3 = parseSizeFromKbs(+data['UPF.03'], 5);
  upfFlowData.value.lineYUp.push(upN3[0]);
  const downN6 = parseSizeFromKbs(+data['UPF.06'], 5);
@@ -78,7 +79,7 @@ export function upfTFParse(data: Record<string, string>) {
 export const upfTFActive = ref<number>(0);

 /**属性复位 */
-export function upfTotalFlowReset() { 
+export function upfTotalFlowReset() {
  upfFlowData.value = {
    lineXTime: [],
    lineYUp: [],
--- a/src/views/dashboard/overview/hooks/useWS.ts
+++ b/src/views/dashboard/overview/hooks/useWS.ts
@@ -94,7 +94,7 @@ export default function useWS() {
    }
    switch (data.groupId) {
      // kpiEvent 指标UPF
-      case '12':
+      case '12_001':
        if (data.data) {
          upfFlowParse(data.data);
        }
@@ -197,12 +197,12 @@ export default function useWS() {
      params: {
        /**订阅通道组
         *
-         * 指标UPF (GroupID:12)
+         * 指标UPF (GroupID:12_neId)
         * AMF_UE会话事件(GroupID:1010)
         * MME_UE会话事件(GroupID:1011)
         * IMS_CDR会话事件(GroupID:1005)
         */
-        subGroupID: '12,1010,1011,1005',
+        subGroupID: '12_001,1010,1011,1005',
      },
      onmessage: wsMessage,
      onerror: wsError,
--- a/src/views/dashboard/overview/index.vue
+++ b/src/views/dashboard/overview/index.vue
@@ -272,7 +272,7 @@ onBeforeUnmount(() => {
      <div class="skim panel base">
        <div class="inner">
          <h3>
-            <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp; 5G
            {{ t('views.dashboard.overview.skim.baseTitle') }}
          </h3>
          <div class="data">
@@ -304,6 +304,14 @@ onBeforeUnmount(() => {
              <span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
            </div>
          </div>
+        </div>
+      </div>
+      <div class="skim panel base">
+        <div class="inner">
+          <h3>
+            <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp; 4G
+            {{ t('views.dashboard.overview.skim.baseTitle') }}
+          </h3>
          <div class="data">
            <div
              class="item toRouter"
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -134,16 +134,6 @@ onMounted(() => {
 function fnChangeLocale(e: any) {
  changeLocale(e.key);
 }
-
-/**系统使用手册跳转 */
-function fnClickHelpDoc(language?: string) {
-  const routeData = router.resolve({ name: 'HelpDoc' });
-  let href = routeData.href;
-  if (language) {
-    href = `${routeData.href}?language=${language}`;
-  }
-  window.open(href, '_blank');
-}
 </script>

 <template>
@@ -166,23 +156,6 @@ function fnClickHelpDoc(language?: string) {
          <img :src="logoUrl" class="logo-brand" :alt="appStore.appName" />
        </template>
      </div>
-      <div class="header-right">
-        <a-space direction="horizontal" :size="8">
-          <a-button
-            type="link"
-            :href="appStore.officialUrl"
-            target="_blank"
-            size="small"
-            v-if="appStore.officialUrl !== '#'"
-          >
-            {{ t('loayouts.basic.officialUrl') }}
-          </a-button>
-
-          <a-button type="link" size="small" @click="fnClickHelpDoc()">
-            {{ t('loayouts.basic.helpDoc') }}
-          </a-button>
-        </a-space>
-      </div>
    </header>

    <a-card :bordered="false" class="login-card">
--- a/src/views/ne/neConfigBackup/index.vue
+++ b/src/views/ne/neConfigBackup/index.vue
@@ -0,0 +1,602 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { Form, Modal, 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 useNeInfoStore from '@/store/modules/neinfo';
+import useI18n from '@/hooks/useI18n';
+import useDictStore from '@/store/modules/dict';
+import { NE_TYPE_LIST } from '@/constants/ne-constants';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { parseDateToStr } from '@/utils/date-utils';
+import {
+  delNeConfigBackup,
+  downNeConfigBackup,
+  listNeConfigBackup,
+  updateNeConfigBackup,
+} from '@/api/ne/neConfigBackup';
+import saveAs from 'file-saver';
+const { t } = useI18n();
+const { getDict } = useDictStore();
+
+/**字典数据-状态 */
+let dictStatus = ref<DictType[]>([]);
+
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neType: undefined,
+  /**名称 */
+  name: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    neType: undefined,
+    name: '',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: any[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: false,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns = ref<TableColumnsType>([
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.common.neType'),
+    dataIndex: 'neType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.common.neId'),
+    dataIndex: 'neId',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('common.createTime'),
+    dataIndex: 'createTime',
+    align: 'center',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value);
+    },
+    width: 150,
+  },
+  {
+    title: t('views.ne.neConfigBackup.name'),
+    dataIndex: 'name',
+    align: 'left',
+    width: 200,
+    resizable: true,
+    minWidth: 100,
+    maxWidth: 300,
+    ellipsis: true,
+  },
+  {
+    title: t('common.remark'),
+    dataIndex: 'remark',
+    key: 'remark',
+    align: 'left',
+    width: 150,
+    resizable: true,
+    minWidth: 100,
+    maxWidth: 300,
+    ellipsis: true,
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    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;
+}
+
+/**查询列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listNeConfigBackup(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      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;
+  });
+}
+
+/**信息文件下载 */
+function fnDownloadFile(row: Record<string, any>) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.ne.neConfigBackup.downTip', { txt: row.name }),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      downNeConfigBackup(row.id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 2,
+            });
+            saveAs(res.data, `${row.name}`);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+        });
+    },
+  });
+}
+
+/**
+ * 记录删除
+ * @param id  编号
+ */
+function fnRecordDelete(id: string) {
+  if (!id || modalState.confirmLoading) return;
+  let msg = id;
+  if (id === '0') {
+    msg = `...${tableState.selectedRowKeys.length}`;
+    id = tableState.selectedRowKeys.join(',');
+  }
+
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.dashboard.ue.delTip', { msg }),
+    onOk() {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      delNeConfigBackup(id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+            fnGetList(1);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    },
+  });
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByEdit: false,
+  title: '备份记录',
+  from: {
+    id: undefined,
+    name: '',
+    remark: '',
+  },
+  confirmLoading: false,
+});
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
+ */
+function fnModalVisibleByEdit(row: Record<string, any>) {
+  if (modalState.confirmLoading) return;
+  modalState.from.id = row.id;
+  modalState.from.name = row.name;
+  modalState.from.remark = row.remark;
+  modalState.title = t('views.ne.neConfigBackup.title', { txt: row.id });
+  modalState.visibleByEdit = true;
+}
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    name: [
+      {
+        required: true,
+        message: '请输入名称',
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+      const from = toRaw(modalState.from);
+      const hide = message.loading(t('common.loading'), 0);
+      updateNeConfigBackup(from)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              duration: 3,
+            });
+            modalState.visibleByEdit = false;
+            modalStateFrom.resetFields();
+            fnGetList();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+            fnGetList();
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalStateFrom.resetFields();
+}
+
+onMounted(() => {
+  // 初始字典数据
+  getDict('ne_license_status').then(res => {
+    dictStatus.value = res;
+  });
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        neOtions.value = useNeInfoStore().getNeSelectOtions;
+      } 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 :label="t('views.ne.common.neType')" name="neType ">
+              <a-auto-complete
+                v-model:value="queryParams.neType"
+                :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+                :allow-clear="true"
+                :placeholder="t('common.inputPlease')"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item :label="t('views.ne.neConfigBackup.name')" name="name">
+              <a-input
+                v-model:value="queryParams.name"
+                :allow-clear="true"
+                :placeholder="t('common.inputPlease')"
+              ></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>
+        <a-space :size="8" align="center">
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordDelete('0')"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </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="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: tableColumns.length * 180 }"
+        @resizeColumn="(w:number, col:any) => (col.width = w)"
+        :row-selection="{
+          type: 'checkbox',
+          columnWidth: '48px',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'id'">
+            <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.downloadText') }}</template>
+                <a-button type="link" @click.prevent="fnDownloadFile(record)">
+                  <template #icon><DownloadOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip>
+                <template #title>{{ t('common.deleteText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordDelete(record.id)"
+                >
+                  <template #icon><DeleteOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip>
+                <template #title>{{ t('common.editText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByEdit(record)"
+                >
+                  <template #icon><FormOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="512"
+      :destroyOnClose="true"
+      :keyboard="false"
+      :mask-closable="false"
+      :visible="modalState.visibleByEdit"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    >
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :wrapper-col="{ span: 18 }"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
+        <a-form-item
+          :label="t('views.ne.neConfigBackup.name')"
+          name="name"
+          v-bind="modalStateFrom.validateInfos.name"
+        >
+          <a-input
+            v-model:value="modalState.from.name"
+            :allow-clear="true"
+            :placeholder="t('common.inputPlease')"
+          ></a-input>
+        </a-form-item>
+        <a-form-item
+          :label="t('common.remark')"
+          name="remark"
+          v-bind="modalStateFrom.validateInfos.remark"
+        >
+          <a-textarea
+            v-model:value="modalState.from.remark"
+            :auto-size="{ minRows: 2, maxRows: 6 }"
+            :maxlength="400"
+            :show-count="true"
+          />
+        </a-form-item>
+      </a-form>
+    </ProModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>
--- a/src/views/ne/neInfo/components/BackConfModal.vue
+++ b/src/views/ne/neInfo/components/BackConfModal.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { reactive, toRaw, watch } from 'vue';
-import { Form, Modal, Upload, message } from 'ant-design-vue/lib';
+import { Form, Modal, Upload, message, notification } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { FileType, UploadFile } from 'ant-design-vue/lib/upload/interface';
 import {
-  exportSet,
-  importFile,
-  listServerFile,
-} from '@/api/configManage/neManage';
+  exportNeConfigBackup,
+  importNeConfigBackup,
+  listNeConfigBackup,
+} from '@/api/ne/neConfigBackup';
+import saveAs from 'file-saver';
+import { uploadFile } from '@/api/tool/file';
 const { t } = useI18n();
 const emit = defineEmits(['ok', 'cancel', 'update:visible']);
 const props = defineProps({
@@ -28,32 +30,49 @@ const props = defineProps({
  },
 });

-/**表格所需option */
-const neManageOption = reactive({
-  importType: [
-    { label: t('views.ne.neInfo.backConf.server'), value: 'server' },
-    { label: t('views.ne.neInfo.backConf.local'), value: 'local' },
+/**导入状态数据 */
+const importState = reactive({
+  typeOption: [
+    { label: t('views.ne.neInfo.backConf.server'), value: 'backup' },
+    { label: t('views.ne.neInfo.backConf.local'), value: 'upload' },
  ],
-  serverFileName: <any[]>[],
+  backupData: <any[]>[],
 });

 /**查询网元远程服务器备份文件 */
-function typeChange(value: any) {
-  if (value === 'server') {
-    modalState.from.fileName = undefined;
-    listServerFile(modalState.from).then(res => {
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        neManageOption.serverFileName = [];
-        res.data.forEach((item: any) => {
-          neManageOption.serverFileName.push({
-            label: item.fileName,
-            value: item.fileName,
-          });
+function backupSearch(name?: string) {
+  const { neType, neId } = modalState.from;
+  listNeConfigBackup({
+    neType,
+    neId,
+    name,
+    pageNum: 1,
+    pageSize: 20,
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      importState.backupData = [];
+      res.rows.forEach((item: any) => {
+        importState.backupData.push({
+          label: item.name,
+          value: item.path,
        });
-      }
-    });
-  } else {
-    modalState.from.file = null;
+      });
+    }
+  });
+}
+
+/**服务器备份文件选择切换 */
+function backupChange(value: any) {
+  if (!value) {
+    backupSearch();
+  }
+}
+
+/**类型切换 */
+function typeChange(value: any) {
+  modalState.from.path = undefined;
+  if (value === 'backup') {
+    backupSearch();
  }
 }

@@ -67,9 +86,8 @@ type ModalStateType = {
  from: {
    neType: string;
    neId: string;
-    importType: 'local' | 'server';
-    file: File | null;
-    fileName: string | undefined;
+    type: 'upload' | 'backup';
+    path: string | undefined;
  };
  /**确定按钮 loading */
  confirmLoading: boolean;
@@ -84,9 +102,8 @@ let modalState: ModalStateType = reactive({
  from: {
    neType: '',
    neId: '',
-    importType: 'local',
-    file: null,
-    fileName: undefined,
+    type: 'upload',
+    path: undefined,
  },
  confirmLoading: false,
  uploadFiles: [],
@@ -96,16 +113,10 @@ let modalState: ModalStateType = reactive({
 const modalStateFrom = Form.useForm(
  modalState.from,
  reactive({
-    file: [
+    path: [
      {
        required: true,
-        message: t('views.ne.neInfo.backConf.filePlease'),
-      },
-    ],
-    fileName: [
-      {
-        required: true,
-        message: t('views.ne.neInfo.backConf.fileNamePlease'),
+        message: t('views.ne.neInfo.backConf.pathPlease'),
      },
    ],
  })
@@ -117,21 +128,13 @@ const modalStateFrom = Form.useForm(
 */
 function fnModalOk() {
  if (modalState.confirmLoading) return;
-
  const from = toRaw(modalState.from);
-  let validateName = ['importType'];
-  if (from.importType === 'local') {
-    validateName.push('file');
-  } else {
-    validateName.push('fileName');
-  }
-
  modalStateFrom
-    .validate(validateName)
+    .validate()
    .then(e => {
      modalState.confirmLoading = true;
      const hide = message.loading(t('common.loading'), 0);
-      importFile(from)
+      importNeConfigBackup(from)
        .then(res => {
          if (res.code === RESULT_CODE_SUCCESS) {
            message.success(t('common.operateOk'), 3);
@@ -168,6 +171,12 @@ function fnModalCancel() {
  emit('update:visible', false);
 }

+/**表单上传前删除 */
+function fnBeforeRemoveFile(file: UploadFile) {
+  modalState.from.path = undefined;
+  return true;
+}
+
 /**表单上传前检查或转换压缩 */
 function fnBeforeUploadFile(file: FileType) {
  if (modalState.confirmLoading) return false;
@@ -187,12 +196,30 @@ function fnBeforeUploadFile(file: FileType) {

 /**表单上传文件 */
 function fnUploadFile(up: UploadRequestOption) {
-  // 改为完成状态
-  const file = modalState.uploadFiles[0];
-  file.percent = 100;
-  file.status = 'done';
-  // 预置到表单
-  modalState.from.file = up.file as File;
+  // 发送请求
+  const hide = message.loading(t('common.loading'), 0);
+  modalState.confirmLoading = true;
+  let formData = new FormData();
+  formData.append('file', up.file);
+  formData.append('subPath', 'import');
+  uploadFile(formData)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        // 改为完成状态
+        const file = modalState.uploadFiles[0];
+        file.percent = 100;
+        file.status = 'done';
+        // 预置到表单
+        const { fileName } = res.data;
+        modalState.from.path = fileName;
+      } else {
+        message.error(res.msg, 3);
+      }
+    })
+    .finally(() => {
+      hide();
+      modalState.confirmLoading = false;
+    });
 }

 /**监听是否显示，初始数据 */
@@ -220,10 +247,17 @@ function fnExportConf(neType: string, neId: string) {
    content: t('views.ne.neInfo.backConf.exportTip'),
    onOk() {
      const hide = message.loading(t('common.loading'), 0);
-      exportSet({ neType, neId })
+      exportNeConfigBackup({ neType, neId })
        .then(res => {
          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success(t('views.ne.neInfo.backConf.exportMsg'), 3);
+            notification.success({
+              message: t('common.tipTitle'),
+              description: t('views.ne.neInfo.backConf.exportMsg'),
+            });
+            saveAs(
+              res.data,
+              `${neType}_${neId}_config_backup_${Date.now()}.zip`
+            );
          } else {
            message.error(`${res.msg}`, 3);
          }
@@ -258,44 +292,44 @@ defineExpose({
    <a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }">
      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
-          <a-form-item
-            :label="t('views.ne.common.neType')"
-            name="neType"
-            v-bind="modalStateFrom.validateInfos.neType"
-          >
+          <a-form-item :label="t('views.ne.common.neType')" name="neType">
            {{ modalState.from.neType }}
          </a-form-item>
          <a-form-item
            :label="t('views.ne.neInfo.backConf.importType')"
-            name="importType"
+            name="type"
          >
            <a-select
-              v-model:value="modalState.from.importType"
+              v-model:value="modalState.from.type"
              default-value="server"
-              :options="neManageOption.importType"
+              :options="importState.typeOption"
              @change="typeChange"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
-          <a-form-item
-            :label="t('views.ne.common.neId')"
-            name="neId"
-            v-bind="modalStateFrom.validateInfos.neId"
-          >
+          <a-form-item :label="t('views.ne.common.neId')" name="neId">
            {{ modalState.from.neId }}
          </a-form-item>
          <a-form-item
            :label="t('views.ne.neInfo.backConf.server')"
            name="fileName"
-            v-bind="modalStateFrom.validateInfos.fileName"
-            v-if="modalState.from.importType === 'server'"
+            v-bind="modalStateFrom.validateInfos.path"
+            v-if="modalState.from.type === 'backup'"
          >
            <a-select
-              v-model:value="modalState.from.fileName"
-              :options="neManageOption.serverFileName"
+              v-model:value="modalState.from.path"
+              :options="importState.backupData"
              :placeholder="t('common.selectPlease')"
+              :show-search="true"
+              :default-active-first-option="false"
+              :show-arrow="false"
+              :allow-clear="true"
+              :filter-option="false"
+              :not-found-content="null"
+              @search="backupSearch"
+              @change="backupChange"
            >
            </a-select>
          </a-form-item>
@@ -303,8 +337,8 @@ defineExpose({
          <a-form-item
            :label="t('views.ne.neInfo.backConf.local')"
            name="file"
-            v-bind="modalStateFrom.validateInfos.file"
-            v-if="modalState.from.importType === 'local'"
+            v-bind="modalStateFrom.validateInfos.path"
+            v-if="modalState.from.type === 'upload'"
          >
            <a-upload
              name="file"
@@ -314,9 +348,10 @@ defineExpose({
              :max-count="1"
              :show-upload-list="{
                showPreviewIcon: false,
-                showRemoveIcon: false,
+                showRemoveIcon: true,
                showDownloadIcon: false,
              }"
+              :remove="fnBeforeRemoveFile"
              :before-upload="fnBeforeUploadFile"
              :custom-request="fnUploadFile"
              :disabled="modalState.confirmLoading"
--- a/src/views/ne/neInfo/components/EditModal.vue
+++ b/src/views/ne/neInfo/components/EditModal.vue
@@ -124,8 +124,8 @@ let modalState: ModalStateType = reactive({
        addr: '',
        port: 22,
        user: 'omcuser',
-        authMode: '2',
-        password: '',
+        authMode: '0',
+        password: 'a9tU53r',
        privateKey: '',
        passPhrase: '',
        remark: '',
--- a/src/views/ne/neInfo/index.vue
+++ b/src/views/ne/neInfo/index.vue
@@ -283,10 +283,10 @@ function fnRecordDelete(id: string) {
            message.success(t('common.operateOk'), 3);
            // 过滤掉删除的id
            tableState.data = tableState.data.filter(item => {
-              if (id.indexOf(',')) {
+              if (id.indexOf(',') > -1) {
                return !tableState.selectedRowKeys.includes(item.id);
              } else {
-                return item.id != id;
+                return item.id !== id;
              }
            });
            // 刷新缓存
@@ -558,7 +558,7 @@ onMounted(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :pagination="tablePagination"
-        :scroll="{ x: tableColumns.length * 150 }"
+        :scroll="{ x: tableColumns.length * 120 }"
        :row-selection="{
          type: 'checkbox',
          columnWidth: '48px',
--- a/src/views/neUser/auth/index.vue
+++ b/src/views/neUser/auth/index.vue
@@ -530,7 +530,7 @@ function fnRecordDelete(imsi: string) {
 }

 /**
- * UDM鉴权用户导出
+ * UDM鉴权用户勾选导出
 */
 function fnRecordExport(type: string = 'txt') {
  const selectLen = tableState.selectedRowKeys.length;
@@ -543,13 +543,15 @@ function fnRecordExport(type: string = 'txt') {
  let content = '';
  if (type == 'txt') {
    for (const row of rows) {
-      content += `${row.imsi},${row.ki},${row.algoIndex},${row.amf},${row.opc}\r\n`;
+      const opc = row.opc === '-' ? '' : `,${row.opc}`;
+      content += `${row.imsi},${row.ki},${row.algoIndex},${row.amf}${opc}\r\n`;
    }
  }
  if (type == 'csv') {
    content = `IMSI,ki,Algo Index,AMF,OPC\r\n`;
    for (const row of rows) {
-      content += `${row.imsi},${row.ki},${row.algoIndex},${row.amf},${row.opc}\r\n`;
+      const opc = row.opc === '-' ? '' : `,${row.opc}`;
+      content += `${row.imsi},${row.ki},${row.algoIndex},${row.amf}${opc}\r\n`;
    }
  }

@@ -557,7 +559,7 @@ function fnRecordExport(type: string = 'txt') {
  saveAs(blob, `UDMAuth_${Date.now()}.${type}`);
 }

-/**列表导出 */
+/**列表导出全部数据 */
 function fnExportList(type: string) {
  const neId = queryParams.neId;
  if (!neId) return;
@@ -651,6 +653,10 @@ type ModalUploadImportStateType = {
  loading: boolean;
  /**上传结果信息 */
  msg: string;
+  /**导入类型 */
+  typeOptions: { label: string; value: string }[];
+  /**表单 */
+  from: { typeVal: string; typeData: any };
 };

 /**对话框表格信息导入对象信息状态 */
@@ -659,11 +665,27 @@ let uploadImportState: ModalUploadImportStateType = reactive({
  title: t('components.UploadModal.uploadTitle'),
  loading: false,
  msg: '',
+  typeOptions: [
+    { label: 'Default', value: 'default' },
+    { label: 'K4', value: 'k4' },
+  ],
+  from: {
+    typeVal: 'default',
+    typeData: undefined,
+  },
 });

+/**对话框表格信息导入类型选择 */
+function fnModalUploadImportTypeChange() {
+  uploadImportState.from.typeData = '';
+  uploadImportState.msg = '';
+}
+
 /**对话框表格信息导入弹出窗口 */
 function fnModalUploadImportOpen() {
  uploadImportState.msg = '';
+  uploadImportState.from.typeVal = 'default';
+  uploadImportState.from.typeData = undefined;
  uploadImportState.loading = false;
  uploadImportState.visible = true;
 }
@@ -702,6 +724,7 @@ function fnModalUploadImportUpload(file: File) {
      return importUDMAuth({
        neId: neId,
        uploadPath: filePath,
+        ...uploadImportState.from,
      });
    })
    .then(res => {
@@ -1103,54 +1126,52 @@ onMounted(() => {
          </a-col>
        </a-row>

-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              label="KI"
-              name="ki"
-              v-bind="modalStateFrom.validateInfos.ki"
-            >
-              <a-input
-                v-model:value="modalState.from.ki"
-                allow-clear
-                :maxlength="32"
-                :disabled="!!modalState.from.id"
-              >
-                <template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      {{ t('views.neUser.auth.kiTip') }}
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                  </a-tooltip>
+        <a-form-item
+          label="KI"
+          name="ki"
+          v-bind="modalStateFrom.validateInfos.ki"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
+        >
+          <a-input
+            v-model:value="modalState.from.ki"
+            allow-clear
+            :maxlength="32"
+            :disabled="!!modalState.from.id"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  {{ t('views.neUser.auth.kiTip') }}
                </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              label="OPC"
-              name="opc"
-              v-bind="modalStateFrom.validateInfos.opc"
-            >
-              <a-input
-                v-model:value="modalState.from.opc"
-                allow-clear
-                :maxlength="32"
-                :disabled="!!modalState.from.id"
-              >
-                <template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      {{ t('views.neUser.auth.opcTip') }}
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                  </a-tooltip>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item
+          label="OPC"
+          name="opc"
+          v-bind="modalStateFrom.validateInfos.opc"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
+        >
+          <a-input
+            v-model:value="modalState.from.opc"
+            allow-clear
+            :maxlength="32"
+            :disabled="!!modalState.from.id"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  {{ t('views.neUser.auth.opcTip') }}
                </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input>
+        </a-form-item>
      </a-form>
    </ProModal>

@@ -1276,52 +1297,50 @@ onMounted(() => {
          </a-col>
        </a-row>

-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              label="KI"
-              name="ki"
-              v-bind="modalStateBatchFrom.validateInfos.ki"
-            >
-              <a-input
-                v-model:value="modalState.BatchForm.ki"
-                allow-clear
-                :maxlength="32"
-              >
-                <template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      {{ t('views.neUser.auth.kiTip') }}
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                  </a-tooltip>
+        <a-form-item
+          label="KI"
+          name="ki"
+          v-bind="modalStateBatchFrom.validateInfos.ki"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
+        >
+          <a-input
+            v-model:value="modalState.BatchForm.ki"
+            allow-clear
+            :maxlength="32"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  {{ t('views.neUser.auth.kiTip') }}
                </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              label="OPC"
-              name="opc"
-              v-bind="modalStateBatchFrom.validateInfos.opc"
-            >
-              <a-input
-                v-model:value="modalState.BatchForm.opc"
-                allow-clear
-                :maxlength="32"
-              >
-                <template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      {{ t('views.neUser.auth.opcTip') }}
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                  </a-tooltip>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item
+          label="OPC"
+          name="opc"
+          v-bind="modalStateBatchFrom.validateInfos.opc"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
+        >
+          <a-input
+            v-model:value="modalState.BatchForm.opc"
+            allow-clear
+            :maxlength="32"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  {{ t('views.neUser.auth.opcTip') }}
                </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input>
+        </a-form-item>
      </a-form>
    </ProModal>

@@ -1399,6 +1418,16 @@ onMounted(() => {
      :size="10"
    >
      <template #default>
+        <a-radio-group
+          v-model:value="uploadImportState.from.typeVal"
+          :options="uploadImportState.typeOptions"
+          @change="fnModalUploadImportTypeChange"
+        />
+        <a-input-password
+          v-if="uploadImportState.from.typeVal === 'k4'"
+          v-model:value="uploadImportState.from.typeData"
+          :placeholder="t('common.inputPlease')"
+        />
        <a-textarea
          :disabled="true"
          :hidden="!uploadImportState.msg"
--- a/src/views/perfManage/goldTarget/index.vue
+++ b/src/views/perfManage/goldTarget/index.vue
@@ -254,15 +254,7 @@ function fnGetListTitle() {
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
        tableColumns.value = [];
-        const columns: ColumnsType = [
-          {
-            title: t('views.perfManage.perfData.neName'),
-            dataIndex: 'neName',
-            key: 'neName',
-            align: 'left',
-            width: 100,
-          },
-        ];
+        const columns: ColumnsType = [];
        for (const item of res.data) {
          const kpiDisplay = item[`${language}Title`];
          const kpiValue = item[`kpiId`];
@@ -277,6 +269,13 @@ function fnGetListTitle() {
            maxWidth: 300,
          });
        }
+        columns.push({
+          title: t('views.perfManage.perfData.neName'),
+          dataIndex: 'neName',
+          key: 'neName',
+          align: 'left',
+          width: 100,
+        });
        columns.push({
          title: t('views.perfManage.goldTarget.time'),
          dataIndex: 'timeGroup',
@@ -458,7 +457,7 @@ function fnRanderChartData() {
  }

  for (const item of orgData) {
-    chartDataXAxisData.push(item['timeGroup']);
+    chartDataXAxisData.push(parseDateToStr(+item['timeGroup']));
    const keys = Object.keys(item);
    for (const y of chartDataYSeriesData) {
      for (const key of keys) {
@@ -505,21 +504,23 @@ function fnLegendSelected(bool: any) {
 /**图表实时统计 */
 function fnRealTimeSwitch(bool: any) {
  if (bool) {
+    tableState.seached = false;
    // 建立链接
    const options: OptionsType = {
      url: '/ws',
      params: {
        /**订阅通道组
         *
-         * 指标(GroupID:10)
+         * 指标(GroupID:10_neType_neId)
         */
-        subGroupID: '10',
+        subGroupID: `10_${queryParams.neType}_${queryParams.neId}`,
      },
      onmessage: wsMessage,
      onerror: wsError,
    };
    ws.connect(options);
  } else {
+    tableState.seached = true;
    ws.close();
  }
 }
@@ -543,39 +544,40 @@ function wsMessage(res: Record<string, any>) {
    return;
  }
  // kpiEvent 黄金指标指标事件
-  if (data.groupId === '10') {
-    const kpiEvent = data.data;
-    // 非对应网元类型
-    if (kpiEvent.neType !== queryParams.neType) return;
+  const kpiEvent = data.data;
+  tableState.data.unshift(kpiEvent);
+  tablePagination.total++;

-    for (const key of Object.keys(data.data)) {
-      const v = kpiEvent[key];
-      // x轴
-      if (key === 'timeGroup') {
-        // chartDataXAxisData.shift();
-        chartDataXAxisData.push(v);
-        continue;
-      }
-      // y轴
-      const yItem = chartDataYSeriesData.find(item => item.key === key);
-      if (yItem) {
-        // yItem.data.shift();
-        yItem.data.push(v);
-      }
+  // 非对应网元类型
+  if (kpiEvent.neType !== queryParams.neType) return;
+
+  for (const key of Object.keys(data.data)) {
+    const v = kpiEvent[key];
+    // x轴
+    if (key === 'timeGroup') {
+      // chartDataXAxisData.shift();
+      chartDataXAxisData.push(parseDateToStr(+v));
+      continue;
+    }
+    // y轴
+    const yItem = chartDataYSeriesData.find(item => item.key === key);
+    if (yItem) {
+      // yItem.data.shift();
+      yItem.data.push(+v);
    }
-
-    // 绘制图数据
-    kpiChart.value.setOption({
-      xAxis: {
-        data: chartDataXAxisData,
-      },
-      series: chartDataYSeriesData,
-    });
  }
+
+  // 绘制图数据
+  kpiChart.value.setOption({
+    xAxis: {
+      data: chartDataXAxisData,
+    },
+    series: chartDataYSeriesData,
+  });
 }

 onMounted(() => {
-  // 目前支持的 AMF AUSF MME MOCNGW NSSF SMF UDM UPF
+  // 目前支持的 AMF AUSF MME MOCNGW NSSF SMF UDM UPF PCF
  // 获取网元网元列表
  neInfoStore.fnNelist().then(res => {
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
@@ -583,15 +585,9 @@ onMounted(() => {
        // 过滤不可用的网元
        neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
          (item: any) => {
-            return ![
-              'OMC',
-              'PCF',
-              'NSSF',
-              'NEF',
-              'NRF',
-              'LMF',
-              'N3IWF',
-            ].includes(item.value);
+            return !['OMC', 'NSSF', 'NEF', 'NRF', 'LMF', 'N3IWF'].includes(
+              item.value
+            );
          }
        );
        if (neCascaderOptions.value.length === 0) {
@@ -619,9 +615,9 @@ onMounted(() => {
        // 查询当前小时
        const nowDate: Date = new Date();
        nowDate.setMinutes(0, 0, 0);
-        queryRangePicker.value[0] = parseDateToStr(nowDate);
+        queryRangePicker.value[0] = `${nowDate.getTime()}`;
        nowDate.setMinutes(59, 59, 59);
-        queryRangePicker.value[1] = parseDateToStr(nowDate);
+        queryRangePicker.value[1] = `${nowDate.getTime()}`;
        fnGetListTitle();
        // 绘图
        fnRanderChart();
@@ -666,15 +662,17 @@ onBeforeUnmount(() => {
          <a-col :lg="10" :md="12" :xs="24">
            <a-form-item
              :label="t('views.perfManage.goldTarget.timeFrame')"
-              name="eventTime"
+              name="timeFrame"
            >
              <a-range-picker
                v-model:value="queryRangePicker"
-                value-format="YYYY-MM-DD HH:mm:ss"
-                format="YYYY-MM-DD HH:mm:ss"
+                bordered
                :allow-clear="false"
-                show-time
-              />
+                :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="4" :md="12" :xs="24">
@@ -747,15 +745,6 @@ onBeforeUnmount(() => {
      <!-- 插槽-卡片右侧 -->
      <template #extra>
        <a-space :size="8" align="center" v-show="tableState.showTable">
-          <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()">
@@ -833,11 +822,16 @@ onBeforeUnmount(() => {
        :data-source="tableState.data"
        :size="tableState.size"
        :pagination="tablePagination"
-        :scroll="{ x: tableColumnsDnd.length * 200, y: 450 }"
+        :scroll="{ x: tableColumnsDnd.length * 200, y: 'calc(100vh - 480px)' }"
        @resizeColumn="(w:number, col:any) => (col.width = w)"
        :show-expand-column="false"
        @change="fnTableChange"
      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'timeGroup'">
+            {{ parseDateToStr(+record.timeGroup) }}
+          </template>
+        </template>
      </a-table>

      <!-- 图表 -->
--- a/src/views/system/quick-start/components/SystemConfig.vue
+++ b/src/views/system/quick-start/components/SystemConfig.vue
@@ -206,6 +206,7 @@ function fnCheckAppNameOverflow() {
  if (!text) return;
  if (text.offsetWidth > container.offsetWidth) {
    text.classList.add('app-name_scrollable');
+    text.setAttribute('data-content', text.innerText);
  } else {
    text.classList.remove('app-name_scrollable');
  }
@@ -398,18 +399,25 @@ onMounted(() => {
      font-size: 18px;

      > .app-name_scrollable {
-        // padding-left: 100%;
+        padding-right: 12px;
        display: inline-block;
        animation: scrollable-animation linear 6s infinite both;
-      }
-
-      @keyframes scrollable-animation {
-        0% {
-          transform: translate3d(0, 0, 0);
+        &::after {
+          content: attr(data-content);
+          position: absolute;
+          top: 0;
+          right: -100%;
+          transition: right 0.3s ease;
        }

-        100% {
-          transform: translate3d(-100%, 0, 0);
+        @keyframes scrollable-animation {
+          0% {
+            transform: translateX(0);
+          }
+
+          100% {
+            transform: translateX(calc(-100% - 12px));
+          }
        }
      }
    }
--- a/src/views/system/setting/components/change-help-doc.vue
+++ b/src/views/system/setting/components/change-help-doc.vue
@@ -120,6 +120,7 @@ onMounted(() => {
          <a-form-item>
            <a-select
              v-model:value="state.language"
+              :disabled="!appStore.i18nOpen"
              style="width: 100px"
              size="small"
              v-perms:has="['system:setting:i18n']"
@@ -168,6 +169,7 @@ onMounted(() => {
                v-model:value="state.language"
                style="width: 100px"
                size="small"
+                :disabled="!appStore.i18nOpen"
                v-perms:has="['system:setting:i18n']"
              >
                <a-select-option
--- a/src/views/system/setting/components/change-logo.vue
+++ b/src/views/system/setting/components/change-logo.vue
@@ -184,12 +184,15 @@ watch(

 /**检查系统名称是否超出范围进行滚动 */
 function fnCheckAppNameOverflow() {
-  const container: HTMLDivElement | null = document.querySelector('.header-icon > .app-name');
+  const container: HTMLDivElement | null = document.querySelector(
+    '.header-icon > .app-name'
+  );
  if (!container) return;
  const text: HTMLDivElement | null = container.querySelector('.marquee');
  if (!text) return;
  if (text.offsetWidth > container.offsetWidth) {
    text.classList.add('app-name_scrollable');
+    text.setAttribute('data-content', text.innerText);
  } else {
    text.classList.remove('app-name_scrollable');
  }
@@ -201,7 +204,7 @@ watch(
 );

 onMounted(() => {
-  fnCheckAppNameOverflow()
+  fnCheckAppNameOverflow();
  Object.assign(state, {
    language: currentLocale.value,
    filePath: '',
@@ -240,7 +243,11 @@ onMounted(() => {
          </div>
        </a-form-item>
        <a-form-item v-perms:has="['system:setting:i18n']">
-          <a-select v-model:value="state.language" style="width: 100px">
+          <a-select
+            v-model:value="state.language"
+            :disabled="!appStore.i18nOpen"
+            style="width: 100px"
+          >
            <a-select-option
              v-for="opt in optionsLocale"
              :key="opt.value"
@@ -362,18 +369,25 @@ onMounted(() => {
      font-size: 18px;

      > .app-name_scrollable {
-        // padding-left: 100%;
+        padding-right: 12px;
        display: inline-block;
        animation: scrollable-animation linear 6s infinite both;
-      }
-
-      @keyframes scrollable-animation {
-        0% {
-          transform: translate3d(0, 0, 0);
+        &::after {
+          content: attr(data-content);
+          position: absolute;
+          top: 0;
+          right: -100%;
+          transition: right 0.3s ease;
        }

-        100% {
-          transform: translate3d(-100%, 0, 0);
+        @keyframes scrollable-animation {
+          0% {
+            transform: translateX(0);
+          }
+
+          100% {
+            transform: translateX(calc(-100% - 12px));
+          }
        }
      }
    }
--- a/src/views/system/setting/index.vue
+++ b/src/views/system/setting/index.vue
@@ -31,14 +31,18 @@ const { t } = useI18n();
        {{ t('views.system.setting.sysLoginBg') }}
      </a-divider>
      <ChangeLogoBG></ChangeLogoBG>
-      <a-divider orientation="left">
-        {{ t('views.system.setting.sysHelpDoc') }}
-      </a-divider>
-      <ChangeHelpDoc></ChangeHelpDoc>
-      <a-divider orientation="left">
-        {{ t('views.system.setting.sysOfficialUrl') }}
-      </a-divider>
-      <ChangeOfficialUrl></ChangeOfficialUrl>
+      <div v-perms:has="['system:setting:doc']">
+        <a-divider orientation="left">
+          {{ t('views.system.setting.sysHelpDoc') }}
+        </a-divider>
+        <ChangeHelpDoc></ChangeHelpDoc>
+      </div>
+      <div v-perms:has="['system:setting:official']">
+        <a-divider orientation="left">
+          {{ t('views.system.setting.sysOfficialUrl') }}
+        </a-divider>
+        <ChangeOfficialUrl></ChangeOfficialUrl>
+      </div>
      <div v-perms:has="['system:setting:i18n']">
        <a-divider orientation="left">
          {{ t('views.system.setting.i18n') }}