fix: 拓扑信息编辑模式控制

.env.production

@@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network EMS"
 VITE_APP_CODE = "CN EMS"
 
 # 应用版本
-VITE_APP_VERSION = "2.231222.9"
+VITE_APP_VERSION = "2.231229.10"
 
 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"

CHANGELOG.md

@@ -1,5 +1,22 @@
 # 版本发布日志
 
+## 2.2312.10-20231229
+
+- 新增 告警列表记录自定义排序导出
+- 新增 黄金指标 KPI 数据列表支持排序
+- 新增 黄金指标 KPI 数据支持选择五分钟颗粒度
+- 新增 网元管理新增修改时可选同步网元信息的开关
+- 新增 终端-UDM 数据勾选记录导出和勾选记录删除功能
+- 修复 配置-参数配置里面的删除按钮，增加二次确认避免误触
+- 修复 配置-参数配置值类型为字符串 http 判断
+- 修复 软件版本管理上传版本号截取
+- 修复 PCF 用户策略控制批量删除表单选项校验异常提示
+- 修复 打包编译时类型异常问题
+- 优化 网元管理弹出菜单窗口设置为可移动
+- 优化 网元管理鼠标悬浮更多时提示靠左显示避免遮挡
+- 优化 首页网元异常情况展示 SN
+- 优化 告警详细信息展示方式
+
 ## 2.2312.9-20231222
 
 - 新增 日志管理查看网元日志文件并下载功能页面
@@ -8,7 +25,7 @@
 - 新增 UE 管理 PCF 用户策略控制功能页面
 - 修复 参数配置新增数据类型值不匹配导致的异常失败
 - 修复 多处英文显示词义不明确的信息提示
-- 修复 UE 管理 UDM 签约用户数据批量新增时EPSODB转换十六进制问题
+- 修复 UE 管理 UDM 签约用户数据批量新增时 EPSODB 转换十六进制问题
 - 优化 网元管理重启接口超时导致网元信息不一致问题
 - 优化 参数配置新增编辑参数顺序，参数类型格式化
 - 优化 主页网元状态饼图颜色选择自定义
@@ -16,4 +33,4 @@
 - 优化 软件管理回退功能操作页面
 - 优化 静态文件地址追加随机戳避免缓存
 - 优化 补充移动端样式适配调整
-- 主页修改增加OMC的序列号，点击网元信息不再覆盖右边信息框
+- 主页修改增加 OMC 的序列号，点击网元信息不再覆盖右边信息框

package.json

@@ -29,7 +29,7 @@
     "js-cookie": "^3.0.5",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
-    "vue": "^3.3.11",
+    "vue": "^3.3.13",
     "vue-codemirror": "^6.1.1",
     "vue-i18n": "^9.8.0",
     "vue-router": "^4.2.5",
@@ -45,7 +45,7 @@
     "less": "^4.2.0",
     "typescript": "^5.3.3",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.0.9",
+    "vite": "^5.0.10",
     "vite-plugin-compression": "^0.5.1",
     "vue-tsc": "^1.8.25"
   }

src/api/configManage/neManage.ts

@@ -8,8 +8,8 @@ import { parseObjLineToHump } from '@/utils/parse-utils';
  * @returns object
  */
 export async function listNeInfo(query: Record<string, any>) {
-  let totalSQL = 'select count(*) as total from ne_info where status=0 ';
+  let totalSQL = 'select count(*) as total from ne_info where (status=0 or status=3)';
-  let rowsSQL = 'select * from ne_info where status=0 ';
+  let rowsSQL = 'select * from ne_info where (status=0 or status=3) ';
 
   // 系统特定顺序
   const specificOrder = [
@@ -91,7 +91,7 @@ export async function getNeInfo(id: string | number) {
     url: `/api/rest/databaseManagement/v1/select/omc_db/ne_info`,
     method: 'get',
     params: {
-      SQL: `select * from ne_info where status=0 and id = ${id}`,
+      SQL: `select * from ne_info where (status=0 or status=3) and id = ${id}`,
     },
   });
   // 解析数据
@@ -112,7 +112,7 @@ export async function getNeInfo(id: string | number) {
 export function addNeInfo(data: Record<string, any>) {
   data.port = `${data.port}`;
   return request({
-    url: `/api/rest/systemManagement/v1/elementType/${data.neType}/objectType/neInfo`,
+    url: `/api/rest/systemManagement/v1/elementType/${data.neType.toLowerCase()}/objectType/neInfo?sync2ne=${data.sync}`,
     method: 'post',
     data: data,
   });
@@ -126,7 +126,7 @@ export function addNeInfo(data: Record<string, any>) {
 export function updateNeInfo(data: Record<string, any>) {
   data.port = `${data.port}`;
   return request({
-    url: `/api/rest/systemManagement/v1/elementType/${data.neType}/objectType/neInfo`,
+    url: `/api/rest/systemManagement/v1/elementType/${data.neType}/objectType/neInfo?sync2ne=${data.sync}`,
     method: 'put',
     data: data,
   });

src/api/index.ts

@@ -36,6 +36,10 @@ export async function listMain() {
     const [key, value] = Object.entries(obj)[0];
     const ipAddress = (value as any).ipAddress;
     const systemState = (value as any).systemState;
+    const serialNum = (value as any).serialNum;
+    const version = (value as any).version;
+
+
     const errCode = systemState && systemState['errorCode'];
     var time = new Date();
     // console.log(key, value);
@@ -50,9 +54,10 @@ export async function listMain() {
       };
     } else {
       mergedObj = {
-        version: '-',
+        version,
         refresh: parseDateToStr(time),
-        ipAddress: ipAddress,
+        ipAddress,
+        serialNum,
         name: key.split('/').join('_'),
         status: 'Abnormal',
       };

src/api/neUser/auth.ts

@@ -111,9 +111,9 @@ export function batchAuth(data: Record<string, any>) {
  * @param data 鉴权对象
  * @returns object
  */
-export function delAuth(neId: string, data: Record<string, any>) {
+export function delAuth(neId: string, imsi: string) {
   return request({
-    url: `/ne/udm/auth/${neId}/${data.imsi}`,
+    url: `/ne/udm/auth/${neId}/${imsi}`,
     method: 'delete',
   });
 }

src/api/perfManage/goldTarget.ts

@@ -91,6 +91,8 @@ export async function goldData(query: Record<string, any>) {
       startTime: query.beginTime,
       endTime: query.endTime,
       interval: query.particle,
+      sortField:query.sortField,
+      sortOrder:query.sortOrder
     },
     timeout: 60_000,
   });

src/hooks/useI18n.ts

@@ -31,11 +31,12 @@ export default function useLocale() {
     },
   ];
 
-  // 挂载前根据默认语言在设置一次
+  // 挂载前根据默认语言再设置一次
   onBeforeMount(() => {
     const localI18n = localGet(CACHE_LOCAL_I18N);
     if (localI18n) {
       i18n.locale.value = localI18n;
+      document.documentElement.lang = localI18n.replace('_', '-');
     }
   });
 

src/i18n/locales/en-US.ts

@@ -8,7 +8,7 @@ export default {
     title: 'Core Network Management Platform',
     desc: 'Core Network Management Platform',
     loading: 'Please wait...',
-    ipnutPlease: 'Please input',
+    inputPlease: 'Please input',
     selectPlease: 'please select',
     tipTitle: 'Prompt',
     msgSuccess: 'Success {msg}',
@@ -354,6 +354,9 @@ export default {
         server:'Server File',
         local:'Local File',
         fileSelect:'Please select the current import file',
+        sync:'Synchronize to NE',
+        open:'Open',
+        close:'Close',
       },
       backupManage: {
         setBackupTask: 'Set automatic backup time',
@@ -475,6 +478,8 @@ export default {
         neType: 'UDM Object',
         export: 'Export',
         exportConfirm: 'Are you sure to export all authentication user data?',
+        checkExport : 'Check Export',
+        checkExportConfirm: 'Confirm exporting the checked authenticated user data?',
         import: 'Import',
         loadDataConfirm: 'Are you sure you want to reload the data?',
         loadData: 'Load Data',
@@ -484,6 +489,7 @@ export default {
         batchDelText: 'Batch Delete',
         numAdd: 'Number of releases',
         numDel: 'Number of deleted',
+        checkDel: 'Check Delete',
         imsiTip: 'IMSI=MCC+MNC+MSIN',
         imsiTip1: 'MCC=Mobile Country Code, consisting of three digits.',
         imsiTip2: 'MNC = Mobile Network Number, consisting of two digits',
@@ -492,19 +498,22 @@ export default {
         algoIndexTip: 'Algorithm index, between 0 and 15',
         kiTip: 'User signing key information, the maximum length of 32',
         opcTip: 'The authentication key, OPC, is calculated from Ki and OP, OP is the root key of the operator, ki is the authentication key, and the maximum length is 32.',
-        delSure:'Are you sure you want to delete the user with IMSI number: {imsi}?',
+        delSure:'Are you sure you want to delete the user with IMSI number: {imsi} ?',
       },
       sub: {
         subInfo:' Subscription Info', 
         neType: 'UDM Object',
         export: 'Export',
         exportConfirm: 'Are you sure to export all signed user data?',
+        checkExport : 'Check Export',
+        checkExportConfirm: 'Are you sure to export the data of the checked subscribers?',
         import: 'Import',
         loadDataConfirm: 'Are you sure you want to reload the data?',
         loadData: 'Load Data',
         loadDataTip: 'Successfully fetched load data: {num} entries, the system is internally updating the data. You can click reset to refresh the data list after the loading is finished, please don it repeat click to get update!!!!',
         numAdd: 'Number of releases',
         numDel: 'Number of deleted',
+        checkDel: 'Check Delete',
         batchAddText: 'Batch Add',
         batchDelText: 'Batch Delete',
         enable:'Enable',
@@ -580,11 +589,11 @@ export default {
         viewTask:'View Task',
         editTask:'Edit Task',
         addTask:'Add Task',
-        stopTask:'Stop Task',
+        stopTask:'Pending',
         errorTaskInfo: 'Failed to obtain task information',
         granulOptionPlease:'Please select the measurement granularity',
         letupSure:'Confirm activation of task with number [{id}]?',
-        stopSure:'Confirm the pending task with number [{row.id}]?',
+        stopSure:'Confirm the pending task with number [{id}]?',
         letUpWarning:'Prohibit activation of activated tasks',
         stopWarning: 'Prohibit suspending inactive measurement tasks',
         weekPlan:'Weekly Plan',
@@ -631,7 +640,7 @@ export default {
         value:'Value',
         startTime:'Start Time',
         endTime:'End Time',
-        particle: 'Particle Ssize',
+        particle: 'Granularity',
         timeFrame: 'Time Range',
         nullTip:'There are no statistical data within this time range',
         kpiTitle:'KPI Statistics Chart',
@@ -749,7 +758,7 @@ export default {
         alarmTitle:'Title',
         clearUser:'Clear User',
         clearType:'Clear Type',
-        ackState: 'Alarm Status',
+        ackState: 'Ack Status',
         ackUser:'Ack User',
         alarmSeq:'Sequence Number',
         objectName:'Object Name',

src/i18n/locales/zh-CN.ts

@@ -8,7 +8,7 @@ export default {
     title: '核心网管理平台',
     desc: '核心网管理平台',
     loading: '请稍等...',
-    ipnutPlease: '请输入',
+    inputPlease: '请输入',
     selectPlease: '请选择',
     tipTitle: '提示',
     msgSuccess: '{msg} 成功',
@@ -354,6 +354,9 @@ export default {
         server:'服务器文件',
         local:'本地文件',
         fileSelect:'请选择当前导入文件',
+        sync:'同步到网元',
+        open:'开',
+        close:'关',
       },
       backupManage: {
         setBackupTask: '设置自动备份时间',
@@ -463,8 +466,8 @@ export default {
         requireEnum: "{display} 不是合理的枚举值",
         requireBool: "{display} 不是合理的布尔类型的值",
         editOkTip: "确认更新该{num}属性值吗？",
-        updateItemTip: "确认更新Index为 【{num}】 的数据项?",
+        updateItemTip: "确认更新Index为 【{num}】 的数据项？",
-        delItemTip: "确认删除Index为 【{num}】 的数据项?",
+        delItemTip: "确认删除Index为 【{num}】 的数据项？",
         arrayMore: "展开",
       },
     },
@@ -474,9 +477,11 @@ export default {
         neTypePlease: '查询网元类型',
         neType: 'UDM网元对象',
         export: '导出',
-        exportConfirm: '确认导出全部鉴权用户数据吗?',
+        exportConfirm: '确认导出全部鉴权用户数据吗？',
+        checkExport : '勾选导出',
+        checkExportConfirm: '确认导出已勾选的鉴权用户数据吗？',
         import: '导入',
-        loadDataConfirm: '确认要重新加载数据吗?',
+        loadDataConfirm: '确认要重新加载数据吗？',
         loadData: '加载数据',
         loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新。加载结束后可点击重置刷新数据列表，请勿重复点击获取更新!!!',
         startIMSI: '起始IMSI',
@@ -484,6 +489,7 @@ export default {
         batchDelText: '批量删除',
         numAdd: '放号个数',
         numDel:'删除个数',
+        checkDel:'勾选删除',
         imsiTip: 'IMSI=MCC+MNC+MSIN',
         imsiTip1: 'MCC=移动国家号码, 由三位数字组成',
         imsiTip2: 'MNC=移动网络号，由两位数字组成',
@@ -498,13 +504,16 @@ export default {
         subInfo:'签约信息',
         neType: 'UDM网元类型',
         export: '导出',
-        exportConfirm: '确认导出全部签约用户数据吗?',
+        exportConfirm: '确认导出全部签约用户数据吗？',
+        checkExport : '勾选导出',
+        checkExportConfirm: '确认导出已勾选的签约用户数据吗？',
         import: '导入',
-        loadDataConfirm: '确认要重新加载数据吗?',
+        loadDataConfirm: '确认要重新加载数据吗？',
         loadData: '加载数据',
         loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新。加载结束后可点击重置刷新数据列表，请勿重复点击获取更新!!!',
         numAdd: '放号个数',
         numDel: '删除个数',
+        checkDel:'勾选删除',
         batchAddText: '批量新增',
         batchDelText: '批量删除',
         enable:'开启',

src/store/modules/app.ts

@@ -15,10 +15,10 @@ type AppStore = {
   appVersion: string;
 
   /**服务版本 */
-  version: string,
+  version: string;
-  buildTime: string,
+  buildTime: string;
   // 序列号
-  serialNum: string,
+  serialNum: string;
   /**应用版权声明 */
   copyright: string;
   /**LOGO显示类型 */

src/utils/execl-utils.ts

@@ -1,4 +1,4 @@
-import { read, utils, write } from 'xlsx';
+import { JSON2SheetOpts, read, utils, write } from 'xlsx';
 
 // 静态资源路径
 const baseUrl = import.meta.env.VITE_HISTORY_BASE_URL;
@@ -19,7 +19,10 @@ export const xlsxUrl = `${
  *   console.log(res)
  * });
  */
-export async function readLoalXlsx(lang:string,id: string): Promise<Record<string, any>[]> {
+export async function readLoalXlsx(
+  lang: string,
+  id: string
+): Promise<Record<string, any>[]> {
   let result = await fetch(`${xlsxUrl}/${lang}/${id}.xlsx`);
   let fileBuffer = await result.arrayBuffer();
   // 判断是否xlsx文件
@@ -62,11 +65,17 @@ export async function readSheet(
  * );
  *
  */
-export async function writeSheet(data: any[], sheetName: string) {
+export async function writeSheet(
+  data: any[],
+  sheetName: string,
+  opts?: JSON2SheetOpts
+  ) {
   if (data.length === 0) {
     return new Blob([], { type: 'application/octet-stream' });
   }
-  const workSheet = utils.json_to_sheet(data);
+
+  const workSheet = utils.json_to_sheet(data, opts);
+
   // 设置列宽度，单位厘米
   workSheet['!cols'] = Object.keys(data[0]).map(() => {
     return { wch: 20 };

src/utils/regular-utils.ts

@@ -28,7 +28,8 @@ export const regExpUserName = /^[a-zA-Z][a-z0-9A-Z]{4,}$/;
  *
  * 密码至少包含大小写字母、数字、特殊符号，且不少于6位
  */
-export const regExpPasswd = /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{6,}$/;
+export const regExpPasswd =
+  /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{6,}$/;
 
 /**
  * 有效手机号格式
@@ -63,6 +64,44 @@ export function validHttp(link: string): boolean {
   return regExpHttp.test(link);
 }
 
+/**
+ * 判断是否有效URL地址
+ * @param str 网络链接
+ * @returns true | false
+ */
+export function validURL(str: string) {
+  if (
+    str === '' ||
+    str.length >= 2083 ||
+    str.length <= 3 ||
+    str.startsWith('.')
+  ) {
+    return false;
+  }
+  let strTemp = str;
+  if (str.includes(':') && !str.includes('://')) {
+    // support no indicated urlscheme but with colon for port number
+    // http:// is appended so url.Parse will succeed, strTemp used so it does not impact rxURL.MatchString
+    strTemp = 'http://' + str;
+  }
+  debugger;
+  try {
+    new URL(strTemp);
+  } catch (error) {
+    return false;
+  }
+  const u = new URL(strTemp);
+  if (u.host.startsWith('.')) {
+    return false;
+  }
+  if (u.host === '' && u.pathname !== '' && !u.pathname.includes('.')) {
+    return false;
+  }
+
+  // 正则表达式模式(rxURL)未提供，无法进行具体判断
+  return true;
+}
+
 /**
  * 判断是否为有效手机号格式
  * @param mobile 手机号字符串

src/views/configManage/configParamTreeTable/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, watch, toRaw, nextTick } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -13,7 +13,7 @@ import {
   addParamConfigInfo,
 } from '@/api/configManage/configParam';
 import useNeInfoStore from '@/store/modules/neinfo';
-import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
+import { regExpIPv4, regExpIPv6, validURL } from '@/utils/regular-utils';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
 import { DataNode } from 'ant-design-vue/lib/tree';
 const neInfoStore = useNeInfoStore();
@@ -403,6 +403,14 @@ function arrayEditOk(from: Record<string, any>) {
 /**多列表删除单行 */
 function arrayDelete(rowIndex: Record<string, any>) {
   const index = rowIndex.value;
+  const title = `${treeState.selectNode.topDisplay} Index-${index}`;
+
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.configManage.configParamForm.delItemTip', {
+      num: title,
+    }),
+    onOk() {
       delParamConfigInfo({
         neType: neTypeSelect.value[0],
         neId: neTypeSelect.value[1],
@@ -412,7 +420,7 @@ function arrayDelete(rowIndex: Record<string, any>) {
         if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
             content: t('views.configManage.configParamForm.delItemOk', {
-          num: `${treeState.selectNode.topDisplay} Index-${index}`,
+              num: title,
             }),
             duration: 2,
           });
@@ -425,6 +433,8 @@ function arrayDelete(rowIndex: Record<string, any>) {
           });
         }
       });
+    },
+  });
 }
 
 /**多列表新增单行 */
@@ -721,6 +731,14 @@ function arrayChildEditOk(from: Record<string, any>) {
 function arrayChildDelete(rowIndex: Record<string, any>) {
   const index = rowIndex.value;
   const loc = `${arrayChildState.loc}/${index}`;
+  const title = `${arrayChildState.title} Index-${index}`;
+
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.configManage.configParamForm.delItemTip', {
+      num: title,
+    }),
+    onOk() {
       delParamConfigInfo({
         neType: neTypeSelect.value[0],
         neId: neTypeSelect.value[1],
@@ -730,7 +748,7 @@ function arrayChildDelete(rowIndex: Record<string, any>) {
         if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
             content: t('views.configManage.configParamForm.delItemOk', {
-          num: `${arrayChildState.title} Index-${index}`,
+              num: title,
             }),
             duration: 2,
           });
@@ -743,6 +761,8 @@ function arrayChildDelete(rowIndex: Record<string, any>) {
           });
         }
       });
+    },
+  });
 }
 
 /**多列表嵌套行新增单行 */
@@ -913,7 +933,6 @@ function ruleVerification(row: Record<string, any>): (string | boolean)[] {
   if (row.optional === 'true' && !value) {
     return result;
   }
-
   switch (type) {
     case 'int':
       if (filter && filter.indexOf('~') !== -1) {
@@ -983,6 +1002,7 @@ function ruleVerification(row: Record<string, any>): (string | boolean)[] {
       }
       break;
     case 'string':
+      // 字符串长度判断
       if (filter && filter.indexOf('~') !== -1) {
         try {
           const filterArr = filter.split('~');
@@ -1001,6 +1021,21 @@ function ruleVerification(row: Record<string, any>): (string | boolean)[] {
           console.error(error);
         }
       }
+      // 字符串http判断
+      if (value.startsWith('http')) {
+        try {
+          if (!validURL(value)) {
+            return [
+              false,
+              t('views.configManage.configParamForm.requireString', {
+                display,
+              }),
+            ];
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      }
 
       break;
     case 'regex':

src/views/configManage/neManage/index.vue

@@ -221,6 +221,7 @@ let modalState: ModalStateType = reactive({
     pvFlag: '',
     rmUid: '',
     vendorName: '',
+    sync: true,
   },
   importFrom: {
     neId: '',
@@ -459,14 +460,19 @@ function fnRecordDelete(row: Record<string, any>) {
       delNeInfo(row)
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
+            if (res.data.data && res.data.data.affectedRows) {
               message.success({
-              content: t('common.msgSuccess', { msg: t('common.deleteText') }),
+                content: t('common.msgSuccess', {
+                  msg: t('common.deleteText'),
+                }),
                 key,
                 duration: 2,
               });
+              tableState.loading = false;
               fnGetList();
               // 刷新缓存的网元信息
               useNeInfoStore().fnRefreshNelist();
+            }
           } else {
             message.error({
               content: `${res.msg}`,
@@ -878,7 +884,7 @@ onMounted(() => {
                   <template #icon><UndoOutlined /></template>
                 </a-button>
               </a-tooltip>
-              <a-tooltip>
+              <a-tooltip placement="left">
                 <template #title>{{ t('common.moreText') }}</template>
                 <a-dropdown
                   placement="bottomRight"
@@ -929,7 +935,7 @@ onMounted(() => {
     </a-card>
 
     <!-- 新增框或修改框 -->
-    <a-modal
+    <DraggableModal
       width="800px"
       :keyboard="false"
       :mask-closable="false"
@@ -939,7 +945,12 @@ onMounted(() => {
       @ok="fnModalOk"
       @cancel="fnModalCancel"
     >
-      <a-form name="modalStateFrom" layout="horizontal">
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
@@ -1105,9 +1116,21 @@ onMounted(() => {
               ></a-input>
             </a-form-item>
           </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.sync')"
+              name="province"
+            >
+              <a-switch
+                v-model:checked="modalState.from.sync"
+                :checked-children="t('views.configManage.neManage.open')"
+                :un-checked-children="t('views.configManage.neManage.close')"
+              />
+            </a-form-item>
+          </a-col>
         </a-row>
       </a-form>
-    </a-modal>
+    </DraggableModal>
 
     <!-- 导入框 -->
     <a-modal

src/views/configManage/softwareManage/components/software-history.vue

@@ -78,41 +78,38 @@ let tableState: TabeStateType = reactive({
 /**表格字段列 */
 let tableColumns: ColumnsType = [
   {
-    title:t('views.configManage.softwareManage.neType'),
+    title: t('views.configManage.softwareManage.neType'),
     dataIndex: 'neType',
     align: 'center',
-    width: 2,
+    width: 100,
   },
   {
     title: t('views.configManage.neManage.neId'),
     dataIndex: 'neId',
     align: 'center',
-    width: 2,
+    width: 200,
   },
   {
     title: t('views.configManage.softwareManage.versions'),
     dataIndex: 'version',
     align: 'center',
-    width: 2,
   },
   {
     title: t('views.configManage.softwareManage.upVersions'),
     dataIndex: 'preVersion',
     align: 'center',
-    width: 2,
   },
   {
-    title:t('views.configManage.softwareManage.backVersions'),
+    title: t('views.configManage.softwareManage.backVersions'),
     dataIndex: 'newVersion',
     align: 'center',
-    width: 2,
   },
   {
     title: t('views.configManage.softwareManage.status'),
     dataIndex: 'status',
     key: 'status',
     align: 'center',
-    width: 2,
+    width: 100,
   },
   {
     title: t('views.configManage.softwareManage.letUpTime'),
@@ -122,7 +119,7 @@ let tableColumns: ColumnsType = [
       if (!opt.value) return '';
       return parseDateToStr(opt.value);
     },
-    width: 2,
+    width: 200,
   },
 ];
 
@@ -158,7 +155,7 @@ let tablePagination = reactive({
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
   tableState.loading = true;
-  if(pageNum){
+  if (pageNum) {
     queryParams.pageNum = pageNum;
   }
   if (!queryRangePicker.value) {
@@ -197,7 +194,8 @@ watch(
 
 <template>
   <a-modal
-    width="800px"
+    width="100%"
+    wrap-class-name="full-modal"
     :title="props.title"
     :visible="props.visible"
     :keyboard="false"
@@ -206,13 +204,9 @@ watch(
     :footer="null"
   >
     <!-- 表格搜索栏 -->
-    <a-form
+    <a-form :model="queryParams" name="queryParams" layout="horizontal">
-      :model="queryParams"
-      name="queryParams"
-      layout="horizontal"
-    >
       <a-row :gutter="16">
-        <a-col :lg="12" :md="12" :xs="24">
+        <a-col :lg="6" :md="6" :xs="24">
           <a-form-item
             :label="t('views.configManage.softwareManage.neType')"
             name="neType"
@@ -225,8 +219,11 @@ watch(
             />
           </a-form-item>
         </a-col>
-        <a-col :lg="12" :md="12" :xs="24">
+        <a-col :lg="6" :md="6" :xs="24">
-          <a-form-item :label="t('views.configManage.softwareManage.createTime')" name="queryRangePicker">
+          <a-form-item
+            :label="t('views.configManage.softwareManage.createTime')"
+            name="queryRangePicker"
+          >
             <a-range-picker
               v-model:value="queryRangePicker"
               allow-clear
@@ -236,7 +233,7 @@ watch(
             ></a-range-picker>
           </a-form-item>
         </a-col>
-        <a-col :lg="12" :md="12" :xs="24">
+        <a-col :lg="6" :md="6" :xs="24">
           <a-form-item>
             <a-space :size="8">
               <a-button type="primary" @click.prevent="fnGetList(1)">
@@ -260,7 +257,7 @@ watch(
       :loading="tableState.loading"
       :data-source="tableState.data"
       :size="tableState.size"
-      :scroll="{ x: 1200, y: 400 }"
+      :scroll="{ x: true }"
       :pagination="tablePagination"
     >
     </a-table>
@@ -272,3 +269,22 @@ watch(
   padding: 0 24px;
 }
 </style>
+
+<style lang="less">
+.full-modal {
+  .ant-modal {
+    max-width: 100%;
+    top: 0;
+    padding-bottom: 0;
+    margin: 0;
+  }
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh);
+  }
+  .ant-modal-body {
+    flex: 1;
+  }
+}
+</style>

src/views/configManage/softwareManage/index.vue

@@ -64,8 +64,8 @@ type TabeStateType = {
 /**表格状态 */
 let tableState: TabeStateType = reactive({
   loading: false,
-  size: 'middle',
+  size: 'small',
-  seached: true,
+  seached: false,
   data: [],
   selectedRowKeys: [],
 });
@@ -185,7 +185,7 @@ let fileModalState: FileStateType = reactive({
     neId: undefined,
   },
   backFrom: {
-    ne:undefined,
+    ne: undefined,
     neType: undefined,
     neId: undefined,
     version: '',
@@ -646,9 +646,13 @@ function fnBeforeUploadFile(file: FileType) {
     return false;
   }
   // 根据给定的软件名取版本号 ims-r2.2312.x-ub22.deb
-  const nameArr = fileName.split('.');
+  const matches = fileName.match(/([0-9.]+[0-9x]+)/);
-  if (nameArr.length > 3) {
+  if (matches) {
-    modalState.from.version = nameArr[1];
+    modalState.from.version = matches[0];
+  }
+  const neTypeIndex = fileName.indexOf('-');
+  if (neTypeIndex !== -1) {
+    modalState.from.neType = fileName.substring(0, neTypeIndex).toUpperCase();
   }
   return true;
 }
@@ -761,14 +765,14 @@ onMounted(() => {
             <template #icon><UploadOutlined /></template>
             {{ t('common.uploadText') }}
           </a-button>
+          <a-button type="default" @click.prevent="fnModalVisibleByBack()">
+            <template #icon> <UndoOutlined /></template>
+            {{ t('views.configManage.softwareManage.backBtn') }}
+          </a-button>
           <a-button type="dashed" @click.prevent="fnModalVisibleByHistory()">
             <template #icon><HistoryOutlined /></template>
             {{ t('views.configManage.softwareManage.historyBtn') }}
           </a-button>
-          <a-button type="dashed" @click.prevent="fnModalVisibleByBack()">
-            <template #icon> <UndoOutlined /></template>
-            {{ t('views.configManage.softwareManage.backBtn') }}
-          </a-button>
         </a-space>
       </template>
 
@@ -776,11 +780,15 @@ onMounted(() => {
       <template #extra>
         <a-space :size="8" align="center">
           <a-tooltip>
-            <template #title>{{ t('common.searchBarText') }}</template>
+            <template #title>{{
+              tableState.seached
+                ? t('common.switch.show')
+                : t('common.switch.hide')
+            }}</template>
             <a-switch
               v-model:checked="tableState.seached"
-              :checked-children="t('common.switch.show')"
+              :checked-children="t('common.searchBarText')"
-              :un-checked-children="t('common.switch.hide')"
+              :un-checked-children="t('common.searchBarText')"
               size="small"
             />
           </a-tooltip>
@@ -853,7 +861,7 @@ onMounted(() => {
                   <template #icon><ThunderboltOutlined /></template>
                 </a-button>
               </a-tooltip>
-              <a-tooltip>
+              <a-tooltip placement="left">
                 <template #title>{{ t('common.moreText') }}</template>
                 <a-dropdown
                   placement="bottomRight"
@@ -885,7 +893,7 @@ onMounted(() => {
     </a-card>
 
     <!-- 上传框 -->
-    <a-modal
+    <DraggableModal
       width="800px"
       :keyboard="false"
       :mask-closable="false"
@@ -978,7 +986,7 @@ onMounted(() => {
           </a-upload>
         </a-form-item>
       </a-form>
-    </a-modal>
+    </DraggableModal>
 
     <!-- 上传激活历史 -->
     <SoftwareHistory

src/views/faultManage/active-alarm/index.vue

@@ -168,6 +168,7 @@ let tableColumns: ColumnsType = [
     title: t('views.faultManage.activeAlarm.origLevel'),
     align: 'center',
     key: 'origSeverity',
+    dataIndex: 'origSeverity',
     width: 5,
   },
   {
@@ -630,6 +631,15 @@ function fnExportAll() {
     onOk() {
       const key = 'exportAlarm';
       message.loading({ content: t('common.loading'), key });
+      let sortArr: any = [];
+      tableColumnsDnd.value.forEach((item: any) => {
+        if (item.dataIndex) sortArr.push(item.dataIndex);
+      });
+
+      // 排序字段
+      const sortData = {
+        header: sortArr,
+      };
       exportAll(queryParams).then(res => {
         if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
@@ -637,7 +647,7 @@ function fnExportAll() {
             key,
             duration: 3,
           });
-          writeSheet(res.data, 'alarm').then(fileBlob =>
+          writeSheet(res.data, 'alarm', sortData).then(fileBlob =>
             saveAs(fileBlob, `alarm_${Date.now()}.xlsx`)
           );
         } else {
@@ -1054,12 +1064,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.alarmId')"
               name="alarmId"
             >
-              <a-input
+              {{ modalState.from.alarmId }}
-                v-model:value="modalState.from.alarmId"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -1067,12 +1072,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.alarmSeq')"
               name="alarmSeq"
             >
-              <a-input
+              {{ modalState.from.alarmSeq }}
-                v-model:value="modalState.from.alarmSeq"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1083,12 +1083,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.neId')"
               name="neId"
             >
-              <a-input
+              {{ modalState.from.neId }}
-                v-model:value="modalState.from.neId"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -1096,12 +1091,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.neName')"
               name="neName"
             >
-              <a-input
+              {{ modalState.from.neName }}
-                v-model:value="modalState.from.neName"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1112,12 +1102,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.neType')"
               name="neType"
             >
-              <a-input
+              {{ modalState.from.neType }}
-                v-model:value="modalState.from.neType"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -1125,12 +1110,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.alarmCode')"
               name="alarmCode"
             >
-              <a-input
+              {{ modalState.from.alarmCode }}
-                v-model:value="modalState.from.alarmCode"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1141,12 +1121,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.alarmTitle')"
               name="alarmTitle"
             >
-              <a-input
+              {{ modalState.from.alarmTitle }}
-                v-model:value="modalState.from.alarmTitle"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -1154,85 +1129,37 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.eventTime')"
               name="eventTime"
             >
-              <a-input
+              {{ modalState.from.eventTime }}
-                v-model:value="modalState.from.eventTime"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
 
         <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.alarmTitle')"
-              name="alarmTitle"
-            >
-              <a-input
-                v-model:value="modalState.from.alarmTitle"
-                disabled
-                allow-clear
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmType')"
               name="alarmType"
             >
-              <a-select
+              {{ modalState.from.alarmType }}
-                v-model:value="modalState.from.alarmType"
-                style="width: 100%"
-                :options="dict.activeAlarmType"
-                disabled
-              >
-              </a-select>
             </a-form-item>
           </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
               name="pvFlag"
             >
-              <a-input
+              {{ modalState.from.pvFlag }}
-                v-model:value="modalState.from.pvFlag"
-                disabled
-                allow-clear
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.objectName')"
-              name="objectName"
-            >
-              <a-input
-                v-model:value="modalState.from.objectName"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
 
+        <a-row :gutter="16"> </a-row>
+
         <a-form-item
           :label="t('views.faultManage.activeAlarm.locationInfo')"
           name="locationInfo"
         >
-          <a-textarea
+          {{ modalState.from.locationInfo }}
-            v-model:value="modalState.from.locationInfo"
-            placeholder="Autosize height with minimum and maximum number of lines"
-            :auto-size="{ minRows: 1, maxRows: 5 }"
-            disabled
-          />
         </a-form-item>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
@@ -1240,12 +1167,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.province')"
               name="province"
             >
-              <a-input
+              {{ modalState.from.province }}
-                v-model:value="modalState.from.province"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -1253,13 +1175,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.origLevel')"
               name="origSeverity"
             >
-              <a-select
+              {{ modalState.from.origSeverity }}
-                v-model:value="modalState.from.origSeverity"
-                style="width: 100%"
-                :options="dict.activeAlarmSeverity"
-                disabled
-              >
-              </a-select>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1268,33 +1184,20 @@ onMounted(() => {
           :label="t('views.faultManage.activeAlarm.addInfo')"
           name="addInfo"
         >
-          <a-textarea
+          {{ modalState.from.addInfo }}
-            v-model:value="modalState.from.addInfo"
-            :auto-size="{ minRows: 1, maxRows: 5 }"
-            disabled
-          />
         </a-form-item>
         <a-form-item
           :label="t('views.faultManage.activeAlarm.specificProblemId')"
           name="specificProblemId"
         >
-          <a-input
+          {{ modalState.from.specificProblemId }}
-            v-model:value="modalState.from.specificProblemId"
-            disabled
-            allow-clear
-          >
-          </a-input>
         </a-form-item>
 
         <a-form-item
           :label="t('views.faultManage.activeAlarm.specificProblem')"
           name="specificProblem"
         >
-          <a-textarea
+          {{ modalState.from.specificProblem }}
-            v-model:value="modalState.from.specificProblem"
-            :auto-size="{ minRows: 1, maxRows: 5 }"
-            disabled
-          />
         </a-form-item>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
@@ -1302,13 +1205,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.clearType')"
               name="clearType"
             >
-              <a-select
+              {{ modalState.from.clearType }}
-                v-model:value="modalState.from.clearType"
-                style="width: 100%"
-                :options="dict.activeClearType"
-                disabled
-              >
-              </a-select>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -1316,12 +1213,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.clearTime')"
               name="clearTime"
             >
-              <a-input
+              {{ modalState.from.clearTime }}
-                v-model:value="modalState.from.clearTime"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1332,12 +1224,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.ackUser')"
               name="ackUser"
             >
-              <a-input
+              {{ modalState.from.ackUser }}
-                v-model:value="modalState.from.ackUser"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -1345,12 +1232,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.ackState')"
               name="ackState"
             >
-              <a-select
+              {{ modalState.from.ackState }}
-                v-model:value="modalState.from.ackState"
-                style="width: 100%"
-                :options="dict.activeAckState"
-                disabled
-              />
             </a-form-item>
           </a-col>
         </a-row>
@@ -1361,12 +1243,15 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.ackTime')"
               name="ackTime"
             >
-              <a-input
+              {{ modalState.from.ackTime }}
-                v-model:value="modalState.from.ackTime"
+            </a-form-item>
-                disabled
+          </a-col>
-                allow-clear
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.objectName')"
+              name="objectName"
             >
-              </a-input>
+              {{ modalState.from.objectName }}
             </a-form-item>
           </a-col>
         </a-row>

src/views/faultManage/history-alarm/index.vue

@@ -39,6 +39,9 @@ let dict: {
 /**记录开始结束时间 */
 let queryRangePicker = ref<[string, string]>(['', '']);
 
+/**表格字段列排序 */
+let tableColumnsDnd = ref<ColumnsType>([]);
+
 /**查询参数 */
 let queryParams = reactive({
   /**告警设备类型 */
@@ -143,7 +146,7 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.faultManage.activeAlarm.origLevel'),
     align: 'left',
-    dataIndex: 'origLevel',
+    dataIndex: 'origSeverity',
     key: 'origSeverity',
     width: 5,
   },
@@ -340,7 +343,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
 function fnModalOk() {
   modalState.confirmLoading = true;
   const from = toRaw(modalState.from);
-  if (from.ackState==='1') {
+  if (from.ackState === '1') {
     message.error({
       content: t('views.faultManage.activeAlarm.ackError'),
       duration: 3,
@@ -431,6 +434,14 @@ function fnExportAll() {
     onOk() {
       const key = 'exportAlarmHis';
       message.loading({ content: t('common.loading'), key });
+      let sortArr: any = [];
+      tableColumnsDnd.value.forEach((item: any) => {
+        if (item.dataIndex) sortArr.push(item.dataIndex);
+      });
+      // 排序字段
+      const sortData = {
+        header: sortArr,
+      };
       exportAll(queryParams).then(res => {
         if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
@@ -438,7 +449,7 @@ function fnExportAll() {
             key,
             duration: 3,
           });
-          writeSheet(res.data, 'alarm').then(fileBlob =>
+          writeSheet(res.data, 'alarm', sortData).then(fileBlob =>
             saveAs(fileBlob, `history-alarm_${Date.now()}.xlsx`)
           );
         } else {
@@ -707,6 +718,10 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
+          <TableColumnsDnd
+            :columns="tableColumns"
+            v-model:columns-dnd="tableColumnsDnd"
+          ></TableColumnsDnd>
         </a-space>
       </template>
 
@@ -714,7 +729,7 @@ onMounted(() => {
       <a-table
         class="table"
         row-key="id"
-        :columns="tableColumns"
+        :columns="tableColumnsDnd"
         :loading="tableState.loading"
         :data-source="tableState.data"
         :size="tableState.size"
@@ -785,12 +800,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.alarmId')"
               name="alarmId"
             >
-              <a-input
+              {{ modalState.from.alarmId }}
-                v-model:value="modalState.from.alarmId"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -798,12 +808,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.alarmSeq')"
               name="alarmSeq"
             >
-              <a-input
+              {{ modalState.from.alarmSeq }}
-                v-model:value="modalState.from.alarmSeq"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
@@ -814,12 +819,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.neId')"
               name="neId"
             >
-              <a-input
+              {{ modalState.from.neId }}
-                v-model:value="modalState.from.neId"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -827,12 +827,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.neName')"
               name="neName"
             >
-              <a-input
+              {{ modalState.from.neName }}
-                v-model:value="modalState.from.neName"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
@@ -843,12 +838,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.neType')"
               name="neType"
             >
-              <a-input
+              {{ modalState.from.neType }}
-                v-model:value="modalState.from.neType"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -856,12 +846,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.alarmCode')"
               name="alarmCode"
             >
-              <a-input
+              {{ modalState.from.alarmCode }}
-                v-model:value="modalState.from.alarmCode"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
@@ -872,12 +857,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.alarmTitle')"
               name="alarmTitle"
             >
-              <a-input
+              {{ modalState.from.alarmTitle }}
-                v-model:value="modalState.from.alarmTitle"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -885,42 +865,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.eventTime')"
               name="eventTime"
             >
-              <a-input
+              {{ modalState.from.eventTime }}
-                v-model:value="modalState.from.eventTime"
-                disabled
-                allow-clear
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.alarmTitle')"
-              name="alarmTitle"
-            >
-              <a-input
-                v-model:value="modalState.from.alarmTitle"
-                disabled
-                allow-clear
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.alarmType')"
-              name="alarmType"
-            >
-              <a-select
-                v-model:value="modalState.from.alarmType"
-                style="width: 100%"
-                :options="dict.activeAlarmType"
-                disabled
-              >
-              </a-select>
             </a-form-item>
           </a-col>
         </a-row>
@@ -931,25 +876,16 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.pvFlag')"
               name="pvFlag"
             >
-              <a-input
+              {{ modalState.from.pvFlag }}
-                v-model:value="modalState.from.pvFlag"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
+
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.faultManage.activeAlarm.objectName')"
+              :label="t('views.faultManage.activeAlarm.alarmType')"
-              name="objectName"
+              name="alarmType"
             >
-              <a-input
+              {{ modalState.from.alarmType }}
-                v-model:value="modalState.from.objectName"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
@@ -958,12 +894,7 @@ onMounted(() => {
           :label="t('views.faultManage.activeAlarm.locationInfo')"
           name="locationInfo"
         >
-          <a-textarea
+          {{ modalState.from.locationInfo }}
-            v-model:value="modalState.from.locationInfo"
-            placeholder="Autosize height with minimum and maximum number of lines"
-            :auto-size="{ minRows: 1, maxRows: 5 }"
-            disabled
-          />
         </a-form-item>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
@@ -971,12 +902,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.province')"
               name="province"
             >
-              <a-input
+              {{ modalState.from.province }}
-                v-model:value="modalState.from.province"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -984,13 +910,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.origLevel')"
               name="origSeverity"
             >
-              <a-select
+              {{ modalState.from.origSeverity }}
-                v-model:value="modalState.from.origSeverity"
-                style="width: 100%"
-                :options="dict.activeAlarmSeverity"
-                disabled
-              >
-              </a-select>
             </a-form-item>
           </a-col>
         </a-row>
@@ -999,33 +919,20 @@ onMounted(() => {
           :label="t('views.faultManage.activeAlarm.addInfo')"
           name="addInfo"
         >
-          <a-textarea
+          {{ modalState.from.addInfo }}
-            v-model:value="modalState.from.addInfo"
-            :auto-size="{ minRows: 1, maxRows: 5 }"
-            disabled
-          />
         </a-form-item>
         <a-form-item
           :label="t('views.faultManage.activeAlarm.specificProblemId')"
           name="specificProblemId"
         >
-          <a-input
+          {{ modalState.from.specificProblemId }}
-            v-model:value="modalState.from.specificProblemId"
-            disabled
-            allow-clear
-          >
-          </a-input>
         </a-form-item>
 
         <a-form-item
           :label="t('views.faultManage.activeAlarm.specificProblem')"
           name="specificProblem"
         >
-          <a-textarea
+          {{ modalState.from.specificProblem }}
-            v-model:value="modalState.from.specificProblem"
-            :auto-size="{ minRows: 1, maxRows: 5 }"
-            disabled
-          />
         </a-form-item>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
@@ -1033,13 +940,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.clearType')"
               name="clearType"
             >
-              <a-select
+              {{ modalState.from.clearType }}
-                v-model:value="modalState.from.clearType"
-                style="width: 100%"
-                :options="dict.activeClearType"
-                disabled
-              >
-              </a-select>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -1047,12 +948,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.clearTime')"
               name="clearTime"
             >
-              <a-input
+              {{ modalState.from.clearTime }}
-                v-model:value="modalState.from.clearTime"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1063,12 +959,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.ackUser')"
               name="ackUser"
             >
-              <a-input
+              {{ modalState.from.ackUser }}
-                v-model:value="modalState.from.ackUser"
-                disabled
-                allow-clear
-              >
-              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -1076,12 +967,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.ackState')"
               name="ackState"
             >
-              <a-select
+              {{ modalState.from.ackState }}
-                v-model:value="modalState.from.ackState"
-                style="width: 100%"
-                :options="dict.activeAckState"
-                disabled
-              />
             </a-form-item>
           </a-col>
         </a-row>
@@ -1092,12 +978,15 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.ackTime')"
               name="ackTime"
             >
-              <a-input
+              {{ modalState.from.ackTime }}
-                v-model:value="modalState.from.ackTime"
+            </a-form-item>
-                disabled
+          </a-col>
-                allow-clear
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.objectName')"
+              name="objectName"
             >
-              </a-input>
+              {{ modalState.from.objectName }}
             </a-form-item>
           </a-col>
         </a-row>

src/views/index.vue

@@ -70,6 +70,11 @@ let tableColumns: ColumnsType = [
     dataIndex: 'version',
     align: 'center',
   },
+  {
+    title: t('views.index.serialNum'),
+    dataIndex: 'serialNum',
+    align: 'center',
+  },
   {
     title: t('views.index.ipAddress'),
     dataIndex: 'ipAddress',
@@ -400,9 +405,7 @@ onBeforeUnmount(() => {
               nfInfo.obj
             }}</a-descriptions-item>
             <template v-if="nfInfo.obj === 'OMC'">
-              <a-descriptions-item :label="t('views.index.serialNum')">{{
+
-                nfInfo.serialNum
-              }}</a-descriptions-item>
               <a-descriptions-item :label="t('views.index.versionNum')">{{
                 nfInfo.version
               }}</a-descriptions-item>

src/views/mmlManage/neOperate/index.vue

@@ -600,7 +600,7 @@ onMounted(() => {
                 @select="fnAutoCompleteSelect"
                 @change="fnAutoCompleteChange"
               >
-                <a-textarea :placeholder="t('common.ipnutPlease')" auto-size />
+                <a-textarea :placeholder="t('common.inputPlease')" auto-size />
               </a-auto-complete>
             </a-form-item>
           </a-form>
@@ -667,7 +667,7 @@ onMounted(() => {
                           :accept="item.filter"
                           :max-count="1"
                           :show-upload-list="false"
-                          :custom-request="v => fnUpload(v, item.name)"
+                          :custom-request="(v:any) => fnUpload(v, item.name)"
                         >
                           <a-button
                             type="primary"

src/views/mmlManage/omcOperate/index.vue

@@ -568,7 +568,7 @@ onMounted(() => {
                 @select="fnAutoCompleteSelect"
                 @change="fnAutoCompleteChange"
               >
-                <a-textarea :placeholder="t('common.ipnutPlease')" auto-size />
+                <a-textarea :placeholder="t('common.inputPlease')" auto-size />
               </a-auto-complete>
             </a-form-item>
           </a-form>
@@ -635,7 +635,7 @@ onMounted(() => {
                           :accept="item.filter"
                           :max-count="1"
                           :show-upload-list="false"
-                          :custom-request="v => fnUpload(v, item.name)"
+                          :custom-request="(v:any) => fnUpload(v, item.name)"
                         >
                           <a-button
                             type="primary"

src/views/mmlManage/udmOperate/index.vue

@@ -573,7 +573,7 @@ onMounted(() => {
                 @select="fnAutoCompleteSelect"
                 @change="fnAutoCompleteChange"
               >
-                <a-textarea :placeholder="t('common.ipnutPlease')" auto-size />
+                <a-textarea :placeholder="t('common.inputPlease')" auto-size />
               </a-auto-complete>
             </a-form-item>
           </a-form>
@@ -640,7 +640,7 @@ onMounted(() => {
                           :accept="item.filter"
                           :max-count="1"
                           :show-upload-list="false"
-                          :custom-request="v => fnUpload(v, item.name)"
+                          :custom-request="(v:any) => fnUpload(v, item.name)"
                         >
                           <a-button
                             type="primary"

src/views/monitor/job/log.vue

@@ -424,7 +424,7 @@ onMounted(() => {
                 v-model:value="queryParams.jobName"
                 :allow-clear="jobId === '0'"
                 :disabled="jobId !== '0'"
-                :placeholder="t('common.ipnutPlease')"
+                :placeholder="t('common.inputPlease')"
               ></a-input>
             </a-form-item>
           </a-col>

src/views/monitor/topology-build/hooks/useCombo.ts

@@ -0,0 +1,187 @@
+import { message, Form } from 'ant-design-vue/lib';
+import { reactive, toRaw, watch } from 'vue';
+import { graphG6, selectSourceTargetOptions } from './useGraph';
+import useI18n from '@/hooks/useI18n';
+
+/**图分组内置类型 */
+export const comboTypeOptions = [
+  {
+    value: 'circle',
+    label: '圆形',
+  },
+  {
+    value: 'rect',
+    label: '矩形',
+  },
+];
+
+/**图分组标签文本位置 */
+export const comboPositionOptions = [
+  {
+    value: 'top',
+    label: '上',
+  },
+  {
+    value: 'left',
+    label: '左',
+  },
+  {
+    value: 'right',
+    label: '右',
+  },
+  {
+    value: 'bottom',
+    label: '下',
+  },
+  {
+    value: 'center',
+    label: '居中',
+  },
+];
+
+export default function useCombo() {
+  const { t } = useI18n();
+
+  /**图分组信息状态类型 */
+  type ComboStateType = {
+    /**图分组原始数据 */
+    origin: Record<string, any>;
+    /**图分组表单数据 */
+    form: Record<string, any>;
+  };
+
+  /**图分组信息状态 */
+  let comboState: ComboStateType = reactive({
+    origin: {},
+    form: {
+      id: '',
+      type: 'rect',
+      parentId: '',
+      size: [40, 40],
+      padding: [30, 30, 30, 30],
+      style: {
+        radius: 2,
+        fill: '#ffffff',
+        stroke: '#ffffff',
+        lineWidth: 1,
+        cursor: 'grab',
+        fillOpacity: 0.5,
+      },
+      label: '',
+      labelCfg: {
+        refX: 10,
+        refY: 10,
+        position: 'top',
+        style: {
+          fill: '#000000',
+          fontSize: 12,
+          fontWeight: 500,
+        },
+      },
+      children: [], // 子元素
+    },
+  });
+
+  /**图分组对话分组内表单属性和校验规则 */
+  const comboStateForm = Form.useForm(
+    comboState.form,
+    reactive({
+      id: [{ required: true, message: '分组唯一标识 ID' }],
+    })
+  );
+
+  /**图分组编辑监听更新视图 */
+  watch(comboState.form, combo => {
+    const info = JSON.parse(JSON.stringify(combo));
+    // 新增不监听变化
+    const comboOriginId = comboState.origin.id;
+    const comboId = info.id;
+    if (comboId && comboId === comboOriginId) {
+      graphG6.value.clearItemStates(comboId, 'selected');
+      const data = graphG6.value.save();
+      const item = data.combos.find((item: any) => item.id === comboId);
+      Object.assign(item, combo);
+      // 无父组id时不要设置，避免导致绘制失败
+      if (!combo.parentId) {
+        Reflect.deleteProperty(item, 'parentId');
+      }
+      graphG6.value.read(data);
+    }
+  });
+
+  /**图分组类型输入限制 */
+  function handleComboTypeChange(type: any) {
+    // 类型尺寸和边距
+    if (type === 'circle') {
+      comboState.form.size = 30;
+      comboState.form.padding = 30;
+    }
+    if (type === 'rect') {
+      comboState.form.size = [30, 20];
+      comboState.form.padding = [10, 20, 10, 20];
+    }
+  }
+
+  /**图分组新增或更新 */
+  function handleOkcombo() {
+    return comboStateForm
+      .validate()
+      .then(e => {
+        const combo = JSON.parse(JSON.stringify(comboState.form));
+        if (!combo.id) {
+          message.warn({
+            content: `分组元素ID错误`,
+            duration: 2,
+          });
+          return false;
+        }
+
+        const item = graphG6.value.findById(combo.id);
+        if (item) {
+          const data = graphG6.value.save();
+          const item = data.combos.find((item: any) => item.id === combo.id);
+          Object.assign(item, combo);
+          // 无父组id时不要设置，避免导致绘制失败
+          if (!combo.parentId) {
+            Reflect.deleteProperty(item, 'parentId');
+          }
+          graphG6.value.read(data);
+        } else {
+          graphG6.value.createCombo(combo, combo.children);
+        }
+
+        comboStateForm.resetFields();
+        comboState.origin = {};
+        return true;
+      })
+      .catch(e => {
+        message.error(
+          t('common.errorFields', { num: e.errorFields.length }),
+          3
+        );
+        return false;
+      });
+  }
+
+  /**图分组取消还原 */
+  function handleCancelcombo() {
+    // 新增无原始数据
+    const origin = JSON.parse(JSON.stringify(comboState.origin));
+    if (origin.id) {
+      const data = graphG6.value.save();
+      const item = data.combos.find((combo: any) => combo.id === origin.id);
+      Object.assign(item, origin);
+      graphG6.value.read(data);
+    }
+    comboStateForm.resetFields();
+    comboState.origin = {};
+  }
+
+  return {
+    comboState,
+    comboStateForm,
+    handleComboTypeChange,
+    handleOkcombo,
+    handleCancelcombo,
+  };
+}

src/views/monitor/topology-build/hooks/useEdge.ts

@@ -0,0 +1,169 @@
+import { message, Form } from 'ant-design-vue/lib';
+import { reactive, watch } from 'vue';
+import useI18n from '@/hooks/useI18n';
+import { graphG6 } from './useGraph';
+
+/**图边内置边类型 */
+export const edgeTypeOptions = [
+  {
+    value: 'line',
+    label: '直线，连接两个节点的直线',
+  },
+  {
+    value: 'polyline',
+    label: '折线，多段线段构成的折线，连接两个端点',
+  },
+  {
+    value: 'arc',
+    label: '圆弧线，连接两个节点的一段圆弧',
+  },
+  {
+    value: 'quadratic',
+    label: '二阶贝塞尔曲线，只有一个控制点的曲线',
+  },
+  {
+    value: 'cubic',
+    label: '三阶贝塞尔曲线，有两个控制点的曲线',
+  },
+  {
+    value: 'cubic-vertical',
+    label: '垂直方向的三阶贝塞尔曲线',
+  },
+  {
+    value: 'cubic-horizontal',
+    label: '水平方向的三阶贝塞尔曲线',
+  },
+  {
+    value: 'loop',
+    label: '自环',
+  },
+];
+
+/**图边标签文本位置 */
+export const edgePositionOptions = [
+  {
+    value: 'start',
+    label: '开头',
+  },
+  {
+    value: 'middle',
+    label: '中间',
+  },
+  {
+    value: 'end',
+    label: '末尾',
+  },
+];
+
+export default function useEdge() {
+  const { t } = useI18n();
+
+  /**图边信息状态类型 */
+  type EdgeStateType = {
+    /**图边原始数据 */
+    origin: Record<string, any>;
+    /**图边表单数据 */
+    form: Record<string, any>;
+  };
+
+  /**图边信息状态 */
+  let edgeState: EdgeStateType = reactive({
+    origin: {},
+    form: {
+      id: '',
+      source: '',
+      target: '',
+      type: 'polyline',
+      style: {
+        offset: 20,
+        radius: 2,
+        stroke: '#ffffff',
+        lineWidth: 1,
+        cursor: 'pointer',
+      },
+      label: '',
+      labelCfg: {
+        refX: 0,
+        refY: 0,
+        position: 'middle',
+        autoRotate: false,
+        style: {
+          fill: '#ffffff',
+          fontSize: 12,
+          fontWeight: 500,
+        },
+      },
+    },
+  });
+
+  /**图边对话框内表单属性和校验规则 */
+  const edgeStateForm = Form.useForm(
+    edgeState.form,
+    reactive({
+      id: [{ required: true, message: '边唯一 ID' }],
+      source: [{ required: true, message: '起始点 id' }],
+      target: [{ required: true, message: '结束点 id' }],
+      type: [{ required: true, message: 'line' }],
+    })
+  );
+
+  /**图边编辑监听更新视图 */
+  watch(edgeState.form, edge => {
+    const info = JSON.parse(JSON.stringify(edge));
+    // 新增id是#不监听变化
+    const edgeId = info.id;
+    if (edgeId && edgeId !== '#') {
+      graphG6.value.clearItemStates(edgeId, 'selected');
+      graphG6.value.updateItem(edgeId, info);
+    }
+  });
+
+  /**图边新增或更新 */
+  function handleOkEdge() {
+    return edgeStateForm
+      .validate()
+      .then(e => {
+        const edge = JSON.parse(JSON.stringify(edgeState.form));
+        if (!edge.id) {
+          message.warn({
+            content: `边元素ID错误`,
+            duration: 2,
+          });
+          return false;
+        }
+
+        // 存在更新，新增id是#不监听变化
+        const item = graphG6.value.findById(edge.id);
+        if (item) {
+          graphG6.value.updateItem(item, edge);
+        } else {
+          edge.id = `${edge.source}~${Date.now()}~${edge.target}`;
+          graphG6.value.addItem('edge', edge);
+        }
+
+        edgeStateForm.resetFields();
+        edgeState.origin = {};
+        return true;
+      })
+      .catch(e => {
+        message.error(
+          t('common.errorFields', { num: e.errorFields.length }),
+          3
+        );
+        return false;
+      });
+  }
+
+  /**图边取消还原 */
+  function handleCancelEdge() {
+    // 新增无原始数据
+    const origin = JSON.parse(JSON.stringify(edgeState.origin));
+    if (origin.id) {
+      graphG6.value.updateItem(origin.id, origin);
+    }
+    edgeStateForm.resetFields();
+    edgeState.origin = {};
+  }
+
+  return { edgeState, edgeStateForm, handleOkEdge, handleCancelEdge };
+}

src/views/monitor/topology-build/hooks/useGraph.ts

@@ -0,0 +1,581 @@
+import useI18n from '@/hooks/useI18n';
+import {
+  Graph,
+  GraphData,
+  ICanvas,
+  IShapeBase,
+  Item,
+  Menu,
+  Tooltip,
+} from '@antv/g6';
+import { ref } from 'vue';
+
+/**图模式选择项 */
+export const graphModeOptions = [
+  {
+    value: 'default',
+    label: '默认',
+  },
+  {
+    value: 'edit',
+    label: '编辑',
+  },
+];
+
+/**图实例对象 */
+export const graphG6 = ref<any>(null);
+
+/**图事件变更 */
+export const graphEvent = ref<{
+  type: string;
+  target: HTMLElement | (IShapeBase & ICanvas);
+  item: Item | null;
+}>();
+
+/**图元素选择开始结束点 */
+export const selectSourceTargetOptions = ref<Record<string, any>[]>([]);
+
+/**图元素选择嵌入分组 */
+export const selectComboOptions = ref<Record<string, any>[]>([]);
+
+/**图模式选择项 */
+export const graphMode = ref<string>('default');
+
+export default function useGraph() {
+  //实例化i18n
+  const { t } = useI18n();
+
+  /**图画布右击菜单 */
+  const graphCanvasMenu = new Menu({
+    offsetX: 6,
+    offseY: 10,
+    itemTypes: ['canvas'],
+    getContent(evt) {
+      console.log(evt);
+      if (!evt) return '无';
+      const edit = graphMode.value === 'edit';
+      return `
+      <div
+        style="
+          display: flex;
+          flex-direction: column;
+          width: 140px;
+        "
+      >
+        <h3>画布</h3>
+        <div id="show" style="cursor: pointer; margin-bottom: 2px">
+          显示所有隐藏项
+        </div>
+        <div id="create-edge" style="cursor: pointer; margin-bottom: 2px; display: ${
+          edit ? 'black' : 'none'
+        }">
+          新增边
+        </div>
+        <div id="create-node" style="cursor: pointer; margin-bottom: 2px; display: ${
+          edit ? 'black' : 'none'
+        }">
+          新增节点
+        </div>
+        <div id="create-combo" style="cursor: pointer; margin-bottom: 2px; display: ${
+          edit ? 'black' : 'none'
+        }">
+        新增分组
+        </div> 
+      </div>`;
+    },
+    handleMenuClick(target, item) {
+      console.log(target, item);
+      const targetId = target.id;
+      switch (targetId) {
+        case 'create-edge':
+        case 'create-node':
+        case 'create-combo':
+          graphEvent.value = { type: `canvas-${targetId}`, target, item };
+          break;
+        case 'show':
+          // 显示节点
+          graphG6.value.getNodes().forEach((node: any) => {
+            if (!node.isVisible()) {
+              graphG6.value.showItem(node);
+              graphG6.value.refreshItem(node);
+            }
+          });
+          // 显示边
+          graphG6.value.getEdges().forEach((edge: any) => {
+            if (!edge.isVisible()) {
+              graphG6.value.showItem(edge);
+              graphG6.value.refreshItem(edge);
+            }
+          });
+          // 显示分组
+          graphG6.value.getCombos().forEach((combo: any) => {
+            if (!combo.isVisible()) {
+              graphG6.value.showItem(combo);
+              graphG6.value.updateCombo(combo);
+            }
+          });
+          break;
+      }
+    },
+  });
+
+  /**图分组Combo 右击菜单 */
+  const graphComboMenu = new Menu({
+    offsetX: 6,
+    offseY: 10,
+    itemTypes: ['combo'],
+    getContent(evt) {
+      console.log(evt);
+      return `
+    <div
+      style="
+        display: flex;
+        flex-direction: column;
+        width: 140px;
+        background: #e6f7ff;
+      "
+    >
+      <h3>分组</h3>
+      <div id="edit" style="cursor: pointer; margin-bottom: 2px">
+        1. 编辑
+      </div>
+      <div id="delete" style="cursor: pointer; margin-bottom: 2px">
+        2. 删除
+      </div>
+      <div id="hide" style="cursor: pointer; margin-bottom: 2px">
+        2. 隐藏
+      </div>
+    </div>
+    `;
+    },
+    handleMenuClick(target, item) {
+      console.log(target, item);
+      const targetId = target.id;
+      switch (targetId) {
+        case 'edit':
+          graphEvent.value = { type: `combo-${targetId}`, target, item };
+          break;
+        case 'delete':
+          graphG6.value.uncombo(item);
+          graphG6.value.updateCombos();
+          break;
+        case 'hide':
+          graphG6.value.hideItem(item);
+          break;
+      }
+    },
+  });
+
+  /**图节点右击菜单 */
+  const graphNodeMenu = new Menu({
+    offsetX: 6,
+    offseY: 10,
+    itemTypes: ['node'],
+    getContent(evt) {
+      console.log(evt);
+      if (!evt) return '无';
+      const item = evt.item?.getModel();
+      const edit = graphMode.value === 'edit';
+      return `
+    <div
+      style="
+        display: flex;
+        flex-direction: column;
+        width: 140px;
+        background: #e6f7ff;
+      "
+    >
+      <h3>节点:${item?.label || '无标签'}</h3>
+      <div id="hide" style="cursor: pointer; margin-bottom: 2px">
+        隐藏
+      </div>
+      <div id="edit" style="cursor: pointer; margin-bottom: 2px; display: ${
+        edit ? 'black' : 'none'
+      }">
+        编辑
+      </div>
+      <div id="delete" style="cursor: pointer; margin-bottom: 2px; display: ${
+        edit ? 'black' : 'none'
+      }">
+        删除
+      </div>
+      
+    </div>
+    `;
+    },
+    handleMenuClick(target, item) {
+      console.log(target, item);
+      const targetId = target.id;
+      switch (targetId) {
+        case 'edit':
+          graphEvent.value = { type: `node-${targetId}`, target, item };
+          break;
+        case 'delete':
+          graphG6.value.removeItem(item);
+          break;
+        case 'hide':
+          graphG6.value.hideItem(item);
+          break;
+      }
+    },
+  });
+
+  /**图节点展示 */
+  const graphNodeTooltip = new Tooltip({
+    offsetX: 10,
+    offsetY: 20,
+    getContent(evt) {
+      console.log(evt);
+      if (!evt) return '无';
+      const item = evt.item?.getModel();
+      if (!item?.label) {
+        return '无标签';
+      }
+      console.log(item);
+      return `
+      <div
+        style="
+          display: flex;
+          flex-direction: column;
+          width: 140px;
+          background: #e6f7ff;
+        "
+      >
+        <h3>节点： ${item?.label}</h3> 
+      </div>
+      `;
+    },
+    itemTypes: ['node'],
+  });
+
+  /**图边右击菜单 */
+  const graphEdgeMenu = new Menu({
+    offsetX: 6,
+    offseY: 10,
+    itemTypes: ['edge'],
+    getContent(evt) {
+      console.log(evt);
+      if (!evt) return '无';
+      const item = evt.item?.getModel();
+      const edit = graphMode.value === 'edit';
+      return `
+    <div
+      style="
+        display: flex;
+        flex-direction: column;
+        width: 140px;
+        background: #e6f7ff;
+      "
+    >
+      <strong>边:${item?.label || '无标签'}</strong>
+      <div id="hide" style="cursor: pointer; margin-bottom: 2px">
+        隐藏
+      </div>
+      <div id="edit" style="cursor: pointer; margin-bottom: 2px; display: ${
+        edit ? 'black' : 'none'
+      }">
+        编辑
+      </div>
+      <div id="delete" style="cursor: pointer; margin-bottom: 2px; display: ${
+        edit ? 'black' : 'none'
+      }">
+        删除
+      </div> 
+    </div>
+    `;
+    },
+    handleMenuClick(target, item) {
+      console.log(target, item);
+      const targetId = target.id;
+      switch (targetId) {
+        case 'edit':
+          graphEvent.value = { type: `edge-${targetId}`, target, item };
+          break;
+        case 'delete':
+          graphG6.value.removeItem(item);
+          break;
+        case 'hide':
+          graphG6.value.hideItem(item);
+          break;
+      }
+    },
+  });
+
+  /**图边展示 */
+  const graphEdgeTooltip = new Tooltip({
+    offsetX: 10,
+    offsetY: 20,
+    getContent(evt) {
+      console.log(evt);
+      if (!evt) return '无';
+      const item = evt.item?.getModel();
+      if (!item?.label) {
+        return '无标签';
+      }
+      return `
+      <div
+        style="
+          display: flex;
+          flex-direction: column;
+          width: 140px;
+          background: #e6f7ff;
+        "
+      >
+        <h3>边： ${item?.label}</h3> 
+      </div>
+      `;
+    },
+    itemTypes: ['edge'],
+  });
+
+  /**图绑定事件 */
+  function fnGraphEvent(graph: Graph) {
+    // 调用 graph.add / graph.addItem 方法之后触发
+    graph.on('afteradditem', evt => {
+      fnSelectSourceTargetOptionsData();
+    });
+
+    // 鼠标进入节点事件
+    graph.on('edge:mouseenter', (ev: any) => {
+      // 获得鼠标当前目标边
+      const edge = ev.item;
+      // 该边的起始点
+      const source = edge.getSource();
+      // 该边的结束点
+      const target = edge.getTarget();
+      // 先将边提前，再将端点提前。这样该边两个端点还是在该边上层，较符合常规。
+      // edge.toFront();
+      // source.toFront();
+      // target.toFront();
+    });
+
+    graph.on('edge:mouseleave', (ev: any) => {
+      // 获得图上所有边实例
+      const edges = graph.getEdges();
+      // 遍历边，将所有边的层级放置在后方，以恢复原样
+      // edges.forEach(edge => {
+      //   edge.toBack();
+      // });
+    });
+
+    graph.on('node:mouseenter', evt => {
+      // 获得鼠标当前目标节点
+      const node = evt.item;
+      // 获取该节点的所有相关边
+      const edges = node && graph.getEdges();
+      // 遍历相关边，将所有相关边提前，再将相关边的两个端点提前，以保证相关边的端点在边的上方常规效果
+      // edges.forEach((edge: any) => {
+      //   edge.toFront();
+      //   edge.getSource().toFront();
+      //   edge.getTarget().toFront();
+      // });
+      // graphEvent.value = {
+      //   type: 'node:mouseenter',
+      //   target: evt.target,
+      //   item: evt.item,
+      // };
+    });
+
+    graph.on('node:mouseleave', (ev: any) => {
+      // 获得图上所有边实例
+      const edges = graph.getEdges();
+      // 遍历边，将所有边的层级放置在后方，以恢复原样
+      // edges.forEach(edge => {
+      //   edge.toBack();
+      // });
+    });
+  }
+
+  /**
+   * 图元素选择开始结束点数据获取
+   */
+  function fnSelectSourceTargetOptionsData() {
+    // 节点
+    selectSourceTargetOptions.value = [];
+    graphG6.value.getNodes().forEach((node: any) => {
+      const info = JSON.parse(JSON.stringify(node.getModel()));
+      selectSourceTargetOptions.value.push({
+        value: info.id,
+        label: info.label,
+        info,
+      });
+    });
+    // 分组
+    selectComboOptions.value = [
+      {
+        value: '',
+        label: '未分配',
+      },
+    ];
+    graphG6.value.getCombos().forEach((combo: any) => {
+      const info = JSON.parse(JSON.stringify(combo.getModel()));
+      const comboInfo = {
+        value: info.id,
+        label: info.label,
+        info,
+      };
+      selectSourceTargetOptions.value.push(comboInfo);
+      selectComboOptions.value.push(comboInfo);
+    });
+  }
+
+  /**图数据渲染 */
+  function handleRanderGraph(container: HTMLElement, data: GraphData) {
+    if (!container) return;
+    const { clientHeight, clientWidth } = container;
+
+    const graph = new Graph({
+      container: container,
+      width: clientWidth,
+      height: clientHeight,
+      animate: true,
+      fitCenter: true,
+      modes: {
+        default: [
+          {
+            type: 'click-select',
+            selectEdge: true,
+          },
+          'drag-combo',
+          {
+            type: 'drag-node',
+            onlyChangeComboSize: true,
+          },
+          'drag-canvas',
+          'zoom-canvas',
+          'collapse-expand-combo',
+        ],
+        edit: [
+          {
+            type: 'click-select',
+            selectEdge: true,
+          },
+          {
+            type: 'drag-node',
+            shouldEnd: (e: any) => {
+              return true;
+            },
+          },
+          { type: 'drag-combo' },
+          'drag-canvas',
+          'zoom-canvas',
+          { type: 'create-edge', key: 'alt' },
+        ],
+      },
+      groupByTypes: false,
+      // layout: {
+      //   type: 'dagre',
+      //   sortByCombo: false,
+      //   ranksep: 10,
+      //   nodesep: 10,
+      // },
+      // 全局节点
+      defaultNode: {
+        type: 'rect',
+        size: [80, 40],
+        style: {
+          radius: 4,
+          // fill: '#ffffff',
+          stroke: '#ffffff',
+          lineWidth: 1,
+          cursor: 'pointer',
+        },
+        labelCfg: {
+          position: 'center',
+          offset: 0,
+          style: {
+            fill: '#000000',
+            fontSize: 12,
+            fontWeight: 500,
+          },
+        },
+        icon: {
+          show: false,
+          img: '/svg/service.svg',
+          width: 25,
+          height: 25,
+          offset: 20, // triangle 特有
+        },
+        direction: 'up', // triangle 三角形的方向
+      },
+      // 全局边
+      defaultEdge: {
+        type: 'polyline',
+        style: {
+          offset: 20, // 拐弯处距离节点最小距离
+          radius: 2, // 拐弯处的圆角弧度，若不设置则为直角
+          stroke: '#ffffff',
+          lineWidth: 1,
+          cursor: 'pointer',
+        },
+        labelCfg: {
+          refX: 0,
+          refY: 0,
+          position: 'middle',
+          autoRotate: false,
+          style: {
+            fill: '#ffffff',
+            fontSize: 12,
+            fontWeight: 500,
+          },
+        },
+      },
+      // 全局分组节点
+      defaultCombo: {
+        type: 'rect', // Combo 类型
+        size: [40, 40],
+        padding: [30, 30, 30, 30],
+        style: {
+          radius: 2,
+          fill: '#ffffff',
+          stroke: '#ffffff',
+          lineWidth: 1,
+          cursor: 'grab',
+          fillOpacity: 0.5,
+        },
+        labelCfg: {
+          refX: 10,
+          refY: 10,
+          position: 'top',
+          style: {
+            fill: '#000000',
+            fontSize: 12,
+            fontWeight: 500,
+          },
+        },
+      },
+      plugins: [
+        graphCanvasMenu,
+        graphComboMenu,
+        graphNodeMenu,
+        graphNodeTooltip,
+        graphEdgeMenu,
+        graphEdgeTooltip,
+      ],
+    });
+    graph.data(data);
+    graph.render();
+
+    // 图绑定事件
+    fnGraphEvent(graph);
+
+    graphG6.value = graph;
+
+    // 图元素选择开始结束点数据
+    fnSelectSourceTargetOptionsData();
+
+    return graph;
+  }
+
+  /**图模式改变 default | edit */
+  function handleChangeMode(value: any) {
+    console.log(value, JSON.parse(JSON.stringify(graphG6.value.save())));
+    graphG6.value.setMode(value);
+    graphMode.value = graphG6.value.getCurrentMode();
+  }
+
+  return {
+    handleRanderGraph,
+    handleChangeMode,
+  };
+}

src/views/monitor/topology-build/hooks/useNode.ts

@@ -0,0 +1,323 @@
+import { message, Form } from 'ant-design-vue/lib';
+import { reactive, watch } from 'vue';
+import { graphG6 } from './useGraph';
+import useI18n from '@/hooks/useI18n';
+
+/**图节点内置边类型 */
+export const nodeTypeOptions = [
+  {
+    value: 'circle',
+    label: '圆形',
+  },
+  {
+    value: 'rect',
+    label: '矩形',
+  },
+  {
+    value: 'ellipse',
+    label: '椭圆',
+  },
+  {
+    value: 'diamond',
+    label: '菱形',
+  },
+  {
+    value: 'triangle',
+    label: '三角形',
+  },
+  {
+    value: 'star',
+    label: '星形',
+  },
+  {
+    value: 'image',
+    label: '图片',
+  },
+  {
+    value: 'donut',
+    label: '面包圈',
+  },
+];
+
+/**图节点标签文本位置 */
+export const nodePositionOptions = [
+  {
+    value: 'top',
+    label: '上',
+  },
+  {
+    value: 'left',
+    label: '左',
+  },
+  {
+    value: 'right',
+    label: '右',
+  },
+  {
+    value: 'bottom',
+    label: '下',
+  },
+  {
+    value: 'center',
+    label: '居中',
+  },
+];
+
+/**图节点三角形方向 */
+export const nodeDirectionOptions = [
+  { value: 'up', label: '向上' },
+  { value: 'down', label: '向下' },
+  { value: 'left', label: '向左' },
+  { value: 'right', label: '向右' },
+];
+
+/**图节点图片裁剪的形状 */
+export const nodeImageClipCfgOptions = [
+  { value: 'circle', label: '圆形' },
+  { value: 'rect', label: '矩形' },
+  { value: 'ellipse', label: '椭圆' },
+];
+
+/**图节点图片来源 */
+export const nodeImageOptions = [
+  { value: '/svg/base.svg', label: '基站' },
+  { value: '/svg/cloud.svg', label: '云' },
+  { value: '/svg/service.svg', label: '服务器' },
+  { value: '/svg/service_db.svg', label: '数据服务器' },
+];
+
+export default function useNode() {
+  const { t } = useI18n();
+
+  /**图节点信息状态类型 */
+  type NodeStateType = {
+    /**图节点原始数据 */
+    origin: Record<string, any>;
+    /**图节点表单数据 */
+    form: Record<string, any>;
+  };
+
+  /**图节点信息状态 */
+  let nodeState: NodeStateType = reactive({
+    origin: {},
+    form: {
+      id: '',
+      comboId: '',
+      x: 0,
+      y: 0,
+      type: 'rect',
+      size: [80, 40],
+      anchorPoints: false,
+      style: {
+        fill: '#ffffff',
+        stroke: '#ffffff',
+        lineWidth: 1,
+      },
+      label: '',
+      labelCfg: {
+        position: 'center',
+        offset: 0,
+        style: {
+          fill: '#000000',
+          fontSize: 12,
+          fontWeight: 500,
+        },
+      },
+    },
+  });
+
+  /**图节点对话框内表单属性和校验规则 */
+  const nodeStateForm = Form.useForm(
+    nodeState.form,
+    reactive({
+      id: [{ required: true, message: '节点唯一 ID' }],
+      type: [{ required: true, message: 'line' }],
+    })
+  );
+
+  /**图节点编辑监听更新视图 */
+  watch(nodeState.form, node => {
+    const info = JSON.parse(JSON.stringify(node));
+    // 新增不监听变化
+    const nodeOriginId = nodeState.origin.id;
+    const nodeId = info.id;
+    if (nodeId && nodeId === nodeOriginId) {
+      // 图片类型需要移除style属性，避免填充
+      if (info.type === 'image') {
+        Reflect.deleteProperty(info, 'style');
+      }
+      graphG6.value.clearItemStates(nodeId, 'selected');
+      graphG6.value.updateItem(nodeId, info);
+      // 三角和图片的样式变更需要重绘才生效
+      if (
+        info.type === 'triangle' ||
+        info.type === 'image' ||
+        info.comboId !== nodeState.origin.comboId
+      ) {
+        graphG6.value.read(graphG6.value.save());
+      }
+    }
+  });
+
+  /**图节点类型输入限制 */
+  function handleNodeTypeChange(type: any) {
+    // 设置图标属性
+    if (['circle', 'ellipse', 'diamond', 'star', 'donut'].includes(type)) {
+      let size: number[] | number = [40, 30];
+      if (['circle', 'star', 'donut'].includes(type)) {
+        size = 60;
+      }
+      const origin = nodeState.origin;
+      if (origin.icon) {
+        nodeState.form = Object.assign(nodeState.form, {
+          size,
+          icon: origin.icon,
+        });
+      } else {
+        nodeState.form = Object.assign(nodeState.form, {
+          size,
+          icon: {
+            show: false,
+            img: '',
+            width: 25,
+            height: 25,
+          },
+        });
+      }
+    } else if (type === 'triangle') {
+      // 三角
+      const origin = nodeState.origin;
+      if (origin.icon) {
+        nodeState.form = Object.assign(nodeState.form, {
+          size: 40,
+          direction: origin.direction || 'up', // triangle 三角形的方向
+          icon: Object.assign({ offset: 20 }, origin.icon),
+        });
+      } else {
+        nodeState.form = Object.assign(nodeState.form, {
+          size: 30,
+          direction: 'up', // triangle 三角形的方向
+          icon: {
+            show: false,
+            img: '/svg/service.svg',
+            width: 25,
+            height: 25,
+            offset: 20, // triangle 特有
+          },
+        });
+      }
+    }
+    // 设置图片属性
+    if (type === 'image') {
+      const origin = nodeState.origin;
+      if (origin.img) {
+        nodeState.form = Object.assign(nodeState.form, {
+          size: [30, 30],
+          img: origin.img,
+          clipCfg: origin.clipCfg,
+        });
+      } else {
+        nodeState.form = Object.assign(nodeState.form, {
+          size: [30, 30],
+          img: '/svg/service.svg',
+          clipCfg: {
+            show: false,
+            width: 0,
+            height: 0,
+            type: 'circle',
+          },
+        });
+      }
+      Reflect.deleteProperty(nodeState.form, 'style');
+    } else {
+      // 当切换非图片时补充style属性
+      if (!Reflect.has(nodeState.form, 'style')) {
+        nodeState.form = Object.assign(nodeState.form, {
+          style: {
+            fill: '#ffffff',
+            stroke: '#ffffff',
+            lineWidth: 1,
+          },
+        });
+      }
+    }
+    // 设置矩形大小
+    if (type === 'rect') {
+      nodeState.form = Object.assign(nodeState.form, {
+        size: [80, 40],
+      });
+    }
+  }
+
+  /**图节点新增或更新 */
+  function handleOkNode() {
+    return nodeStateForm
+      .validate()
+      .then(e => {
+        const node = JSON.parse(JSON.stringify(nodeState.form));
+        if (!node.id) {
+          message.warn({
+            content: `节点元素ID错误`,
+            duration: 2,
+          });
+          return false;
+        }
+
+        // 存在更新，新增不监听变化
+        const item = graphG6.value.findById(node.id);
+        if (item) {
+          graphG6.value.updateItem(item, node);
+        } else {
+          graphG6.value.addItem('node', node);
+        }
+
+        // 三角和图片的样式变更需要重绘才生效
+        if (
+          node.type === 'triangle' ||
+          node.type === 'image' ||
+          node.comboId !== nodeState.origin.comboId
+        ) {
+          graphG6.value.read(graphG6.value.save());
+        }
+
+        nodeStateForm.resetFields();
+        nodeState.origin = {};
+        return true;
+      })
+      .catch(e => {
+        message.error(
+          t('common.errorFields', { num: e.errorFields.length }),
+          3
+        );
+        return false;
+      });
+  }
+
+  /**图节点取消还原 */
+  function handleCancelNode() {
+    // 新增无原始数据
+    const origin = JSON.parse(JSON.stringify(nodeState.origin));
+    if (origin.id) {
+      graphG6.value.updateItem(origin.id, origin);
+
+      // 三角和图片的样式变更需要重绘才生效
+      if (
+        origin.type === 'triangle' ||
+        origin.type === 'image' ||
+        origin.comboId !== nodeState.form.comboId
+      ) {
+        graphG6.value.read(graphG6.value.save());
+      }
+    }
+    nodeStateForm.resetFields();
+    nodeState.origin = {};
+  }
+
+  return {
+    nodeState,
+    nodeStateForm,
+    handleNodeTypeChange,
+    handleOkNode,
+    handleCancelNode,
+  };
+}

src/views/monitor/topology/index.vue

@@ -77,10 +77,10 @@ function fnGetList(refresh: boolean = false) {
                 neId: item.neId,
                 neName: item.neName,
                 neType: item.neType,
-                expire: '2024-03-31',
+                expire: '-',
-                refreshTime: '10:31:47',
+                refreshTime: '-',
-                sn: '13770707',
+                sn: '-',
-                version: '2.2312.8',
+                version: '-',
               };
               nodes.push({
                 id: item.neName,

src/views/neUser/auth/index.vue

@@ -70,6 +70,8 @@ type TabeStateType = {
   seached: boolean;
   /**记录数据 */
   data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
 };
 
 /**表格状态 */
@@ -79,6 +81,7 @@ let tableState: TabeStateType = reactive({
   striped: false,
   seached: true,
   data: [],
+  selectedRowKeys: [],
 });
 
 /**表格字段列 */
@@ -180,6 +183,11 @@ function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
   fnGetList(1);
 }
 
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
@@ -482,36 +490,79 @@ function fnModalCancel() {
 
 /**
  * UDM鉴权用户删除
- * @param row 网元编号ID
+ * @param imsi  编号imsi
  */
-function fnRecordDelete(row: Record<string, any>) {
+function fnRecordDelete(imsi: string) {
+  const neID = queryParams.neId;
+  if (!neID) return;
+  let imsiMsg = imsi;
+  if (imsi === '0') {
+    imsiMsg = `${tableState.selectedRowKeys[0]}... ${t(
+      'views.neUser.auth.numDel'
+    )} ${tableState.selectedRowKeys.length}`;
+    imsi = tableState.selectedRowKeys.join(',');
+  }
+
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.neUser.auth.delSure', { imsi: row.imsi }),
+    content: t('views.neUser.auth.delSure', { imsi: imsiMsg }),
     onOk() {
-      const key = 'delNotice';
+      modalState.loadDataLoading = true;
-      message.loading({ content: t('common.loading'), key });
+      const hide = message.loading({ content: t('common.loading') });
-      const neID = queryParams.neId || '-';
+      delAuth(neID, imsi)
-      delAuth(neID, row).then(res => {
+        .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
+            const msgContent = t('common.msgSuccess', {
-            content: t('common.msgSuccess', { msg: t('common.deleteText') }),
+              msg: t('common.deleteText'),
-            key,
+            });
-            duration: 2,
+            message.success({
+              content: `${msgContent} : ${imsiMsg}`,
+              duration: 3,
             });
-          fnGetList();
           } else {
             message.error({
               content: `${res.msg}`,
-            key: key,
+              duration: 3,
-            duration: 2,
             });
           }
+        })
+        .finally(() => {
+          hide();
+          fnGetList();
+          modalState.loadDataLoading = false;
         });
     },
   });
 }
 
+/**
+ * UDM鉴权用户导出
+ */
+function fnRecordExport(type: string = 'txt') {
+  const selectLen = tableState.selectedRowKeys.length;
+  if (selectLen <= 0) return;
+  const rows: Record<string, any>[] = tableState.data.filter(
+    (row: Record<string, any>) =>
+      tableState.selectedRowKeys.indexOf(row.imsi) >= 0
+  );
+
+  let content = '';
+  if (type == 'txt') {
+    for (const row of rows) {
+      content += `${row.imsi},${row.ki},${row.algoIndex},${row.amf},${row.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 blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+  saveAs(blob, `UDMAuth_${Date.now()}.${type}`);
+}
+
 /**列表导出 */
 function fnExportList(type: string) {
   const neID = queryParams.neId;
@@ -583,6 +634,10 @@ function fnGetList(pageNum?: number) {
   }
   listAuth(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
       tablePagination.total = res.total;
       tableState.data = res.rows;
     }
@@ -742,6 +797,18 @@ onMounted(() => {
             </template>
             {{ t('views.neUser.auth.batchAddText') }}
           </a-button>
+
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.loadDataLoading"
+            @click.prevent="fnRecordDelete('0')"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('views.neUser.auth.checkDel') }}
+          </a-button>
+
           <a-button
             type="primary"
             danger
@@ -753,6 +820,7 @@ onMounted(() => {
             </template>
             {{ t('views.neUser.auth.batchDelText') }}
           </a-button>
+
           <a-popconfirm
             :title="t('views.neUser.auth.loadDataConfirm')"
             :ok-text="t('common.ok')"
@@ -778,6 +846,7 @@ onMounted(() => {
 
           <a-popconfirm
             :title="t('views.neUser.auth.exportConfirm')"
+            placement="topRight"
             ok-text="TXT"
             ok-type="default"
             @confirm="fnExportList('txt')"
@@ -790,6 +859,26 @@ onMounted(() => {
               {{ t('views.neUser.auth.export') }}
             </a-button>
           </a-popconfirm>
+
+          <a-popconfirm
+            :title="t('views.neUser.auth.checkExportConfirm')"
+            placement="topRight"
+            ok-text="TXT"
+            ok-type="default"
+            @confirm="fnRecordExport('txt')"
+            :show-cancel="false"
+            cancel-text="CSV"
+            @cancel="fnRecordExport('csv')"
+            :disabled="tableState.selectedRowKeys.length <= 0"
+          >
+            <a-button
+              type="default"
+              :disabled="tableState.selectedRowKeys.length <= 0"
+            >
+              <template #icon><ExportOutlined /></template>
+              {{ t('views.neUser.auth.checkExport') }}
+            </a-button>
+          </a-popconfirm>
         </div>
       </template>
 
@@ -864,6 +953,11 @@ onMounted(() => {
         :scroll="{ y: 'calc(100vh - 480px)' }"
         @change="fnTableChange"
         @resizeColumn="(w:number, col:any) => (col.width = w)"
+        :row-selection="{
+          type: 'checkbox',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'imsi'">
@@ -881,7 +975,10 @@ onMounted(() => {
               </a-tooltip>
               <a-tooltip>
                 <template #title>{{ t('common.deleteText') }}</template>
-                <a-button type="link" @click.prevent="fnRecordDelete(record)">
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordDelete(record.imsi)"
+                >
                   <template #icon>
                     <DeleteOutlined />
                   </template>

src/views/neUser/pcf/index.vue

@@ -253,11 +253,23 @@ function fnModalOk() {
   from.neId = queryParams.neId || '-';
   from.rfsp = Number(from.rfsp) || 0;
 
-  // 根据类型选择函数
-  let result: any = null;
   let validateArr = ['imsi', 'msisdn'];
   if (modalState.isBatch) {
     validateArr.push('num');
+    if (modalState.type === 'delete') {
+      validateArr = ['num', 'imsi'];
+    }
+  }
+
+  modalStateFrom
+    .validate(validateArr)
+    .then(e => {
+      modalState.confirmLoading = true;
+      const hide = message.loading({ content: t('common.loading') });
+
+      // 根据类型选择函数
+      let result: any = null;
+      if (modalState.isBatch) {
         if (modalState.type === 'add') {
           result = batchAddRule(from);
         }
@@ -276,12 +288,6 @@ function fnModalOk() {
         }
       }
 
-  modalStateFrom
-    .validate(validateArr)
-    .then(e => {
-      modalState.confirmLoading = true;
-
-      const hide = message.loading({ content: t('common.loading') });
       result
         .then((res: any) => {
           if (res.code === RESULT_CODE_SUCCESS) {
@@ -775,7 +781,11 @@ onMounted(() => {
             name="imsi"
             v-bind="modalStateFrom.validateInfos.imsi"
           >
-            <a-input v-model:value="modalState.from.imsi" allow-clear>
+            <a-input
+              v-model:value="modalState.from.imsi"
+              allow-clear
+              :maxlength="64"
+            >
               <template #prefix>
                 <a-tooltip placement="topLeft">
                   <template #title>
@@ -823,6 +833,7 @@ onMounted(() => {
                 <a-input
                   v-model:value="modalState.from.imsi"
                   allow-clear
+                  :maxlength="64"
                   :disabled="
                     !modalState.isBatch && modalState.type === 'update'
                   "
@@ -850,6 +861,7 @@ onMounted(() => {
                 <a-input
                   v-model:value="modalState.from.msisdn"
                   allow-clear
+                  :maxlength="16"
                   :disabled="
                     !modalState.isBatch && modalState.type === 'update'
                   "
@@ -862,13 +874,21 @@ onMounted(() => {
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="PCC Rules" name="pccRules">
-                <a-input v-model:value="modalState.from.pccRules" allow-clear>
+                <a-input
+                  v-model:value="modalState.from.pccRules"
+                  allow-clear
+                  :maxlength="64"
+                >
                 </a-input>
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="SESS Rules" name="sessRules">
-                <a-input v-model:value="modalState.from.sessRules" allow-clear>
+                <a-input
+                  v-model:value="modalState.from.sessRules"
+                  allow-clear
+                  :maxlength="64"
+                >
                 </a-input>
               </a-form-item>
             </a-col>
@@ -877,13 +897,21 @@ onMounted(() => {
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="QOS Audio" name="qosAudio">
-                <a-input v-model:value="modalState.from.qosAudio" allow-clear>
+                <a-input
+                  v-model:value="modalState.from.qosAudio"
+                  allow-clear
+                  :maxlength="64"
+                >
                 </a-input>
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="QOS Video" name="qosVideo">
-                <a-input v-model:value="modalState.from.qosVideo" allow-clear>
+                <a-input
+                  v-model:value="modalState.from.qosVideo"
+                  allow-clear
+                  :maxlength="64"
+                >
                 </a-input>
               </a-form-item>
             </a-col>
@@ -892,13 +920,21 @@ onMounted(() => {
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="HDR Enrich" name="hdrEnrich">
-                <a-input v-model:value="modalState.from.hdrEnrich" allow-clear>
+                <a-input
+                  v-model:value="modalState.from.hdrEnrich"
+                  allow-clear
+                  :maxlength="64"
+                >
                 </a-input>
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="UE Policy" name="uePolicy">
-                <a-input v-model:value="modalState.from.uePolicy" allow-clear>
+                <a-input
+                  v-model:value="modalState.from.uePolicy"
+                  allow-clear
+                  :maxlength="64"
+                >
                 </a-input>
               </a-form-item>
             </a-col>
@@ -907,14 +943,23 @@ onMounted(() => {
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="Sar" name="sar">
-                <a-input v-model:value="modalState.from.sar" allow-clear>
+                <a-input
+                  v-model:value="modalState.from.sar"
+                  allow-clear
+                  :maxlength="64"
+                >
                 </a-input>
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="RFSP" name="rfsp">
-                <a-input v-model:value="modalState.from.rfsp" allow-clear>
+                <a-input-number
-                </a-input>
+                  v-model:value="modalState.from.rfsp"
+                  style="width: 100%"
+                  :min="0"
+                  :max="255"
+                  placeholder="0~255"
+                ></a-input-number>
               </a-form-item>
             </a-col>
           </a-row>

src/views/neUser/sub/index.vue

@@ -73,6 +73,8 @@ type TabeStateType = {
   seached: boolean;
   /**记录数据 */
   data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
 };
 
 /**表格状态 */
@@ -82,6 +84,7 @@ let tableState: TabeStateType = reactive({
   striped: false,
   seached: true,
   data: [],
+  selectedRowKeys: [],
 });
 
 /**表格字段列 */
@@ -218,6 +221,11 @@ function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
   fnGetList(1);
 }
 
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
@@ -711,37 +719,100 @@ function fnBatchDelModalCancel() {
 
 /**
  * UDM签约用户删除
- * @param imsi 网元编号ID
+ * @param imsi  编号imsi
  */
 function fnRecordDelete(imsi: string) {
   const neID = queryParams.neId;
   if (!neID) return;
+  let imsiMsg = imsi;
+  if (imsi === '0') {
+    imsiMsg = `${tableState.selectedRowKeys[0]}... ${t(
+      'views.neUser.sub.numDel'
+    )} ${tableState.selectedRowKeys.length}`;
+    imsi = tableState.selectedRowKeys.join(',');
+  }
+
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.neUser.auth.delSure', { imsi: imsi }),
+    content: t('views.neUser.auth.delSure', { imsi: imsiMsg }),
     onOk() {
-      const key = 'delSub';
+      modalState.loadDataLoading = true;
-      message.loading({ content: t('common.loading'), key });
+      const hide = message.loading({ content: t('common.loading') });
-      delSub(neID, imsi).then(res => {
+      delSub(neID, imsi)
+        .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
+            const msgContent = t('common.msgSuccess', {
-            content: t('common.msgSuccess', { msg: t('common.deleteText') }),
+              msg: t('common.deleteText'),
-            key,
+            });
-            duration: 2,
+            message.success({
+              content: `${msgContent} : ${imsiMsg}`,
+              duration: 3,
             });
-          fnGetList();
           } else {
             message.error({
               content: `${res.msg}`,
-            key: key,
+              duration: 3,
-            duration: 2,
             });
           }
+        })
+        .finally(() => {
+          hide();
+          fnGetList();
+          modalState.loadDataLoading = false;
         });
     },
   });
 }
 
+/**
+ * UDM签约用户导出
+ */
+function fnRecordExport(type: string = 'txt') {
+  const selectLen = tableState.selectedRowKeys.length;
+  if (selectLen <= 0) return;
+  const rows: Record<string, any>[] = tableState.data.filter(
+    (row: Record<string, any>) =>
+      tableState.selectedRowKeys.indexOf(row.imsi) >= 0
+  );
+
+  let content = '';
+  if (type == 'txt') {
+    for (const row of rows) {
+      debugger;
+      const epsDat = [
+        row.epsFlag,
+        row.epsOdb,
+        row.hplmnOdb,
+        row.ard,
+        row.epstpl,
+        row.contextId,
+        row.apnContext,
+        row.staticIp,
+      ].join(',');
+      content += `${row.imsi},${row.msisdn},${row.ambr},${row.nssai},${row.arfb},${row.sar},${row.rat},${row.cn},${row.smfSel},${row.smData},${epsDat}\r\n`;
+    }
+  }
+  if (type == 'csv') {
+    content = `imsi,msisdn,ambr,nssai,arfb,sar,rat,cn,smf_sel,sm_dat,eps_dat\r\n`;
+    for (const row of rows) {
+      const epsDat = [
+        row.epsFlag,
+        row.epsOdb,
+        row.hplmnOdb,
+        row.ard,
+        row.epstpl,
+        row.contextId,
+        row.apnContext,
+        row.staticIp,
+      ].join(',');
+      content += `${row.imsi},${row.msisdn},${row.ambr},${row.nssai},${row.arfb},${row.sar},${row.rat},${row.cn},${row.smfSel},${row.smData},${epsDat}\r\n`;
+    }
+  }
+
+  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+  saveAs(blob, `UDMSub_${Date.now()}.${type}`);
+}
+
 /**列表导出 */
 function fnExportList(type: string) {
   const neID = queryParams.neId;
@@ -813,6 +884,10 @@ function fnGetList(pageNum?: number) {
   }
   listSub(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
       tablePagination.total = res.total;
       tableState.data = res.rows;
     }
@@ -977,6 +1052,18 @@ onMounted(() => {
             </template>
             {{ t('views.neUser.auth.batchAddText') }}
           </a-button>
+
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.loadDataLoading"
+            @click.prevent="fnRecordDelete('0')"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('views.neUser.sub.checkDel') }}
+          </a-button>
+
           <a-button
             type="primary"
             danger
@@ -988,6 +1075,7 @@ onMounted(() => {
             </template>
             {{ t('views.neUser.auth.batchDelText') }}
           </a-button>
+
           <a-popconfirm
             :title="t('views.neUser.sub.loadDataConfirm')"
             :ok-text="t('common.ok')"
@@ -1017,6 +1105,7 @@ onMounted(() => {
 
           <a-popconfirm
             :title="t('views.neUser.sub.exportConfirm')"
+            placement="topRight"
             ok-text="TXT"
             ok-type="default"
             @confirm="fnExportList('txt')"
@@ -1031,6 +1120,26 @@ onMounted(() => {
               {{ t('views.neUser.sub.export') }}
             </a-button>
           </a-popconfirm>
+
+          <a-popconfirm
+            :title="t('views.neUser.sub.checkExportConfirm')"
+            placement="topRight"
+            ok-text="TXT"
+            ok-type="default"
+            @confirm="fnRecordExport('txt')"
+            :show-cancel="false"
+            cancel-text="CSV"
+            @cancel="fnRecordExport('csv')"
+            :disabled="tableState.selectedRowKeys.length <= 0"
+          >
+            <a-button
+              type="default"
+              :disabled="tableState.selectedRowKeys.length <= 0"
+            >
+              <template #icon><ExportOutlined /></template>
+              {{ t('views.neUser.sub.checkExport') }}
+            </a-button>
+          </a-popconfirm>
         </div>
       </template>
 
@@ -1105,6 +1214,11 @@ onMounted(() => {
         :scroll="{ y: 'calc(100vh - 480px)' }"
         @change="fnTableChange"
         @resizeColumn="(w:number, col:any) => (col.width = w)"
+        :row-selection="{
+          type: 'checkbox',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'imsi'">

src/views/perfManage/goldTarget/index.vue

@@ -92,8 +92,24 @@ let queryParams: any = reactive({
   particle: '15',
   beginTime: '',
   endTime: '',
+  /**排序字段 */
+  sortField: 'timeGroup',
+  /**排序方式 */
+  sortOrder: 'asc',
 });
 
+/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
+function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
+  const { columnKey, order } = sorter;
+  if (order) {
+    queryParams.sortField = columnKey;
+    queryParams.sortOrder = order.replace('end', '');
+  } else {
+    queryParams.sortOrder = 'asc';
+  }
+  fnMakeTable(1);
+}
+
 /**图表显示数据 */
 const chartsOption = reactive({
   /**性能指标 */
@@ -196,6 +212,8 @@ function fnDesign() {
     dataIndex: 'timeGroup',
     align: 'center',
     fixed: 'right',
+    key: 'timeGroup',
+    sorter: true,
   });
   if (!queryRangePicker.value) {
     queryRangePicker.value = ['', ''];
@@ -216,7 +234,7 @@ function fnDesign() {
           .filter(key => !['timeGroup', 'neName', 'startIndex'].includes(key))
           .map(key => {
             const title: any = findTitleByKey(key);
-            hideAll[title]=false;
+            hideAll[title] = false;
             return {
               name: title,
               data: res.data.map((item: any) => parseInt(item[key])),
@@ -260,24 +278,14 @@ function fnDesign() {
             color: '#646A73',
           },
           icon: 'circle',
-          selected:hideAll,
+          selected: hideAll,
         },
         grid: {
           left: '10%',
           right: '30%',
           bottom: '20%',
         },
-        yAxis: [
+        yAxis: [{ type: 'value', splitNumber: 4, axisLabel: { fontSize: 10 } }],
-          { type: 'value', splitNumber: 4, axisLabel: { fontSize: 10 } },
-          {
-            type: 'value',
-            position: 'right',
-            alignTicks: true,
-            axisLabel: {
-              fontSize: 10,
-            },
-          },
-        ],
       };
       chartsOption.perfChart = option;
 
@@ -293,9 +301,7 @@ function fnDesign() {
 
 onMounted(() => {
   // 获取网元网元列表
-  neInfoStore
+  neInfoStore.fnNelist().then(res => {
-    .fnNelist()
-    .then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
       if (res.data.length > 0) {
         // 过滤不可用的网元
@@ -389,6 +395,7 @@ onMounted(() => {
                 v-model:value="queryParams.particle"
                 :placeholder="t('common.selectPlease')"
                 :options="[
+                  { label: '5M', value: '5' },
                   { label: '15M', value: '15' },
                   { label: '30M', value: '30' },
                   { label: '60M', value: '60' },
@@ -481,6 +488,7 @@ onMounted(() => {
           :scroll="{ x: tableColumnsDnd.length * 200, y: 450 }"
           @resizeColumn="(w:number, col:any) => (col.width = w)"
           :show-expand-column="false"
+          @change="fnTableChange"
         >
         </a-table>
       </a-card>
@@ -495,9 +503,7 @@ onMounted(() => {
       <template #extra>
         <a-space :size="8" align="center">
           <a-button type="default" size="small" @click.prevent="fnMakeTable(1)">
-            <template #icon>
+            <template #icon> <bars-outlined /> </template>
-              <ClearOutlined />
-            </template>
             {{ t('views.perfManage.goldTarget.allData') }}
           </a-button>
         </a-space>

src/views/perfManage/taskManage/index.vue

@@ -625,7 +625,7 @@ function fnRecordRun(row: Record<string, any>) {
 }
 
 /**
- * 激活任务
+ * 挂起任务
  * @param row 网元编号ID
  */
 function fnRecordStop(row: Record<string, any>) {

src/views/system/config/index.vue

@@ -487,7 +487,7 @@ onMounted(() => {
               <a-input
                 v-model:value="queryParams.configName"
                 allow-clear
-                :placeholder="t('common.ipnutPlease')"
+                :placeholder="t('common.inputPlease')"
               ></a-input>
             </a-form-item>
           </a-col>
@@ -499,7 +499,7 @@ onMounted(() => {
               <a-input
                 v-model:value="queryParams.configKey"
                 allow-clear
-                :placeholder="t('common.ipnutPlease')"
+                :placeholder="t('common.inputPlease')"
               ></a-input>
             </a-form-item>
           </a-col>
@@ -839,7 +839,7 @@ onMounted(() => {
             :auto-size="{ minRows: 4, maxRows: 6 }"
             :maxlength="450"
             :show-count="true"
-            :placeholder="t('common.ipnutPlease')"
+            :placeholder="t('common.inputPlease')"
           />
         </a-form-item>
       </a-form>

src/views/system/dict/data.vue

@@ -536,7 +536,7 @@ onMounted(() => {
               <a-input
                 v-model:value="queryParams.dictLabel"
                 allow-clear
-                :placeholder="t('common.ipnutPlease')"
+                :placeholder="t('common.inputPlease')"
               ></a-input>
             </a-form-item>
           </a-col>
@@ -933,7 +933,7 @@ onMounted(() => {
                 v-model:value="modalState.from.tagClass"
                 type="color"
                 allow-clear
-                :placeholder="t('common.ipnutPlease')"
+                :placeholder="t('common.inputPlease')"
               ></a-input>
             </a-form-item>
           </a-col>
@@ -959,7 +959,7 @@ onMounted(() => {
                 v-model:value="modalState.from.dictSort"
                 :min="0"
                 :max="65535"
-                :placeholder="t('common.ipnutPlease')"
+                :placeholder="t('common.inputPlease')"
               ></a-input-number>
             </a-form-item>
           </a-col>
@@ -974,7 +974,7 @@ onMounted(() => {
               <a-input
                 v-model:value="modalState.from.tagClass"
                 allow-clear
-                :placeholder="t('common.ipnutPlease')"
+                :placeholder="t('common.inputPlease')"
               ></a-input>
             </a-form-item>
           </a-col>

src/views/system/setting/components/change-copyright.vue

@@ -72,7 +72,7 @@ onMounted(() => {
             v-model:value="state.copyright"
             allow-clear
             :maxlength="40"
-            :placeholder="t('common.ipnutPlease')"
+            :placeholder="t('common.inputPlease')"
           ></a-input>
         </a-form-item>
 

src/views/system/setting/components/change-official-url.vue

@@ -75,7 +75,7 @@ onMounted(() => {
             v-model:value="state.url"
             allow-clear
             :maxlength="255"
-            :placeholder="t('common.ipnutPlease')"
+            :placeholder="t('common.inputPlease')"
           ></a-input>
         </a-form-item>
 

src/views/system/setting/components/change-title.vue

@@ -70,7 +70,7 @@ onMounted(() => {
             v-model:value="state.title"
             allow-clear
             :maxlength="20" 
-            :placeholder="t('common.ipnutPlease')"
+            :placeholder="t('common.inputPlease')"
           ></a-input>
         </a-form-item>
 

src/views/system/user/index.vue

@@ -840,7 +840,7 @@ onMounted(() => {
                 v-model:value="queryParams.userName"
                 allow-clear
                 :maxlength="30"
-                :placeholder="t('common.ipnutPlease')"
+                :placeholder="t('common.inputPlease')"
               ></a-input>
             </a-form-item>
           </a-col>
@@ -853,7 +853,7 @@ onMounted(() => {
                 v-model:value="queryParams.phonenumber"
                 allow-clear
                 :maxlength="11"
-                :placeholder="t('common.ipnutPlease')"
+                :placeholder="t('common.inputPlease')"
               ></a-input>
             </a-form-item>
           </a-col>