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

.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"

.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"

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,
+  });
+}

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
  */

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, {
+    let num = result.data['ueNum'] || 0;
-      data: result.data['ueNum'],
+    if (num === 0) {
-    });
+      num = result.data.data['ueNum'] || 0;
+    }
+    return Object.assign(result, { data: num });
   }
 
   // 模拟数据

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].',
+          exportMsg:'Exporting Network Element Configuration Information to a File Succeeded',
-          filePlease: "Please upload a file", 
+          pathPlease: 'No Backup File Found',
-          fileNamePlease: 'Please select the server file',
         },
       },
       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?',

src/i18n/locales/zh-CN.ts

@@ -668,9 +668,8 @@ export default {
           local:'本地文件',
           localUpload:'本地上传',
           exportTip:'确认要导出网元配置信息到文件？',
-          exportMsg:'导出成功,请到【备份管理】进行下载',
+          exportMsg:'导出网元配置信息到文件成功',
-          filePlease: "请上传文件", 
+          pathPlease: '未发现文件',
-          fileNamePlease: '请选择服务器文件',
         },
       },
       neHost: {
@@ -781,6 +780,11 @@ export default {
         syncNeDone: '同步到网元终端完成',
         saveOk: '保存成功！',
       },
+      neConfigBackup: {
+        name: "名称",
+        downTip: '确认要下载备份文件【{txt}】吗？',
+        title: "修改备份信息 {txt}",
+      },
       neQuickSetup: {
         stepPrev: '上一步',
         stepPrevTip: '确认要放弃当前变更返回上一步吗？',

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

src/layouts/components/RightContent.vue

@@ -91,6 +91,7 @@ function fnChangeLocale(e: any) {
     </span>
 
     <!-- 锁屏操作 -->
+    <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()">
@@ -125,8 +126,10 @@ function fnChangeLocale(e: any) {
           </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()">

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
+            <span v-if="record.eventType === 'detach'">
-              v-if="record.eventType === 'detach'"
-              :title="record.eventJSON.detachTime"
-            >
               <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

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',

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

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;

src/views/dashboard/overview/components/UPFFlow/index.vue

@@ -203,17 +203,14 @@ function handleRanderChart() {
 
 /**查询初始UPF数据 */
 function fnGetInitData() {
-  // 查询10分钟前的
+  // 查询5分钟前的
-  const nowDate: Date = new Date();
+  const nowDate = new Date().getTime();
-  const tenMinutesAgo = new Date(nowDate.getTime() - 5 * 60 * 1000);
 
   listKPIData({
     neType: 'UPF',
     neId: '001',
-    startTime: parseDateToStr(tenMinutesAgo),
+    startTime: nowDate - 5 * 60 * 1000,
-    endTime: parseDateToStr(nowDate),
+    endTime: nowDate,
-    // startTime: '2024-03-20 19:50:00',
-    // endTime: '2024-03-20 19:55:00',
     interval: 5, // 5秒
     sortField: 'timeGroup',
     sortOrder: 'asc',

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%;

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);

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,

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"

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">

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>

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,
+  exportNeConfigBackup,
-  importFile,
+  importNeConfigBackup,
-  listServerFile,
+  listNeConfigBackup,
-} from '@/api/configManage/neManage';
+} 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({
+const importState = reactive({
-  importType: [
+  typeOption: [
-    { label: t('views.ne.neInfo.backConf.server'), value: 'server' },
+    { label: t('views.ne.neInfo.backConf.server'), value: 'backup' },
-    { label: t('views.ne.neInfo.backConf.local'), value: 'local' },
+    { label: t('views.ne.neInfo.backConf.local'), value: 'upload' },
   ],
-  serverFileName: <any[]>[],
+  backupData: <any[]>[],
 });
 
 /**查询网元远程服务器备份文件 */
-function typeChange(value: any) {
+function backupSearch(name?: string) {
-  if (value === 'server') {
+  const { neType, neId } = modalState.from;
-    modalState.from.fileName = undefined;
+  listNeConfigBackup({
-    listServerFile(modalState.from).then(res => {
+    neType,
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+    neId,
-        neManageOption.serverFileName = [];
+    name,
-        res.data.forEach((item: any) => {
+    pageNum: 1,
-          neManageOption.serverFileName.push({
+    pageSize: 20,
-            label: item.fileName,
+  }).then(res => {
-            value: item.fileName,
+    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';
+    type: 'upload' | 'backup';
-    file: File | null;
+    path: string | undefined;
-    fileName: string | undefined;
   };
   /**确定按钮 loading */
   confirmLoading: boolean;
@@ -84,9 +102,8 @@ let modalState: ModalStateType = reactive({
   from: {
     neType: '',
     neId: '',
-    importType: 'local',
+    type: 'upload',
-    file: null,
+    path: undefined,
-    fileName: 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'),
+        message: t('views.ne.neInfo.backConf.pathPlease'),
-      },
-    ],
-    fileName: [
-      {
-        required: true,
-        message: t('views.ne.neInfo.backConf.fileNamePlease'),
       },
     ],
   })
@@ -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 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';
         // 预置到表单
-  modalState.from.file = up.file as File;
+        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
+          <a-form-item :label="t('views.ne.common.neType')" name="neType">
-            :label="t('views.ne.common.neType')"
-            name="neType"
-            v-bind="modalStateFrom.validateInfos.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
+          <a-form-item :label="t('views.ne.common.neId')" name="neId">
-            :label="t('views.ne.common.neId')"
-            name="neId"
-            v-bind="modalStateFrom.validateInfos.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-bind="modalStateFrom.validateInfos.path"
-            v-if="modalState.from.importType === 'server'"
+            v-if="modalState.from.type === 'backup'"
           >
             <a-select
-              v-model:value="modalState.from.fileName"
+              v-model:value="modalState.from.path"
-              :options="neManageOption.serverFileName"
+              :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-bind="modalStateFrom.validateInfos.path"
-            v-if="modalState.from.importType === 'local'"
+            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"

src/views/ne/neInfo/components/EditModal.vue

@@ -124,8 +124,8 @@ let modalState: ModalStateType = reactive({
         addr: '',
         port: 22,
         user: 'omcuser',
-        authMode: '2',
+        authMode: '0',
-        password: '',
+        password: 'a9tU53r',
         privateKey: '',
         passPhrase: '',
         remark: '',

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',

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,12 +1126,12 @@ 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"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
         >
           <a-input
             v-model:value="modalState.from.ki"
@@ -1126,12 +1149,12 @@ onMounted(() => {
             </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"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
         >
           <a-input
             v-model:value="modalState.from.opc"
@@ -1149,8 +1172,6 @@ onMounted(() => {
             </template>
           </a-input>
         </a-form-item>
-          </a-col>
-        </a-row>
       </a-form>
     </ProModal>
 
@@ -1276,12 +1297,12 @@ 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"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
         >
           <a-input
             v-model:value="modalState.BatchForm.ki"
@@ -1298,12 +1319,12 @@ onMounted(() => {
             </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"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
         >
           <a-input
             v-model:value="modalState.BatchForm.opc"
@@ -1320,8 +1341,6 @@ onMounted(() => {
             </template>
           </a-input>
         </a-form-item>
-          </a-col>
-        </a-row>
       </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"

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 = [
+        const columns: ColumnsType = [];
-          {
-            title: t('views.perfManage.perfData.neName'),
-            dataIndex: 'neName',
-            key: 'neName',
-            align: 'left',
-            width: 100,
-          },
-        ];
         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,8 +544,10 @@ function wsMessage(res: Record<string, any>) {
     return;
   }
   // kpiEvent 黄金指标指标事件
-  if (data.groupId === '10') {
   const kpiEvent = data.data;
+  tableState.data.unshift(kpiEvent);
+  tablePagination.total++;
+
   // 非对应网元类型
   if (kpiEvent.neType !== queryParams.neType) return;
 
@@ -553,14 +556,14 @@ function wsMessage(res: Record<string, any>) {
     // x轴
     if (key === 'timeGroup') {
       // chartDataXAxisData.shift();
-        chartDataXAxisData.push(v);
+      chartDataXAxisData.push(parseDateToStr(+v));
       continue;
     }
     // y轴
     const yItem = chartDataYSeriesData.find(item => item.key === key);
     if (yItem) {
       // yItem.data.shift();
-        yItem.data.push(v);
+      yItem.data.push(+v);
     }
   }
 
@@ -571,11 +574,10 @@ function wsMessage(res: Record<string, any>) {
     },
     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 ![
+            return !['OMC', 'NSSF', 'NEF', 'NRF', 'LMF', 'N3IWF'].includes(
-              'OMC',
+              item.value
-              'PCF',
+            );
-              '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"
+                bordered
-                format="YYYY-MM-DD HH:mm:ss"
                 :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>
 
       <!-- 图表 -->

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;
+        &::after {
+          content: attr(data-content);
+          position: absolute;
+          top: 0;
+          right: -100%;
+          transition: right 0.3s ease;
         }
 
         @keyframes scrollable-animation {
           0% {
-          transform: translate3d(0, 0, 0);
+            transform: translateX(0);
           }
 
           100% {
-          transform: translate3d(-100%, 0, 0);
+            transform: translateX(calc(-100% - 12px));
+          }
         }
       }
     }

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

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;
+        &::after {
+          content: attr(data-content);
+          position: absolute;
+          top: 0;
+          right: -100%;
+          transition: right 0.3s ease;
         }
 
         @keyframes scrollable-animation {
           0% {
-          transform: translate3d(0, 0, 0);
+            transform: translateX(0);
           }
 
           100% {
-          transform: translate3d(-100%, 0, 0);
+            transform: translateX(calc(-100% - 12px));
+          }
         }
       }
     }

src/views/system/setting/index.vue

@@ -31,14 +31,18 @@ const { t } = useI18n();
         {{ t('views.system.setting.sysLoginBg') }}
       </a-divider>
       <ChangeLogoBG></ChangeLogoBG>
+      <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') }}