OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

Merge remote-tracking branch 'origin/main' into multi-tenant

Browse Source
This commit is contained in:
TsMask
2024-08-12 11:42:53 +08:00
parent 9bc5eba0d6 06503fd079
commit ea6fca405b
28 changed files with 4054 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

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

2
.env.production
View File

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

66
src/api/ne/neConfig.ts Normal file
View File

@@ -0,0 +1,66 @@
import { request } from '@/plugins/http-fetch';
/**
* 网元参数配置可用属性值列表指定网元类型全部无分页
* @param query 查询参数
* @returns object
*/
export function getAllNeConfig(neType: string) {
return request({
url: `/ne/config/list/${neType}`,
method: 'get',
timeout: 60_000,
});
}
/**
* 网元参数配置数据信息
* @param params 数据 {neType,neId,paramName}
* @returns object
*/
export function getNeConfigData(params: Record<string, any>) {
return request({
url: `/ne/config/data`,
params,
method: 'get',
});
}
/**
* 网元参数配置数据更新
* @param data 数据 {neType,neId,paramName:"参数名",paramData:{参数},loc:"层级index仅array"}
* @returns object
*/
export function editNeConfigData(data: Record<string, any>) {
return request({
url: `/ne/config/data`,
method: 'put',
data: data,
});
}
/**
* 网元参数配置数据新增（array）
* @param data 数据 {neType,neId,paramName:"参数名",paramData:{参数},loc:"层级index"}
* @returns object
*/
export function addNeConfigData(data: Record<string, any>) {
return request({
url: `/ne/config/data`,
method: 'post',
data: data,
});
}
/**
* 网元参数配置数据删除（array）
* @param params 数据 {neType,neId,paramName:"参数名",loc:"层级index"}
* @returns object
*/
export function delNeConfigData(params: Record<string, any>) {
return request({
url: `/ne/config/data`,
method: 'delete',
params,
});
}

42
src/api/neData/smsc.ts Normal file
View File

@@ -0,0 +1,42 @@
import { request } from '@/plugins/http-fetch';
/**
* 查询SMSC-CDR会话事件
* @param query 查询参数
* @returns object
*/
export function listSMSCDataCDR(query: Record<string, any>) {
return request({
url: '/neData/smsc/cdr/list',
method: 'get',
params: query,
});
}
/**
* SMSC-CDR会话删除
* @param id 信息ID
* @returns object
*/
export function delSMSCDataCDR(cdrIds: string | number) {
return request({
url: `/neData/smsc/cdr/${cdrIds}`,
method: 'delete',
timeout: 60_000,
});
}
/**
* SMSC-CDR会话列表导出
* @param data 查询列表条件
* @returns object
*/
export function exportSMSCDataCDR(data: Record<string, any>) {
return request({
url: '/neData/smsc/cdr/export',
method: 'post',
data,
responseType: 'blob',
timeout: 60_000,
});
}

227
src/components/TerminalSSHView/index.vue Normal file
View File

@@ -0,0 +1,227 @@
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { FitAddon } from '@xterm/addon-fit';
import { Terminal } from '@xterm/xterm';
import '@xterm/xterm/css/xterm.css';
import { RESULT_CODE_ERROR } from '@/constants/result-constants';
import { OptionsType, WS } from '@/plugins/ws-websocket';
const ws = new WS();
const emit = defineEmits(['connect', 'close', 'message']);
const props = defineProps({
/**终端ID，必传 */
id: {
type: String,
required: true,
},
/**网元类型，必传 */
neType: {
type: String,
required: true,
},
/**网元ID，必传 */
neId: {
type: String,
required: true,
},
/**窗口单行字符数 */
cols: {
type: Number,
default: 80,
},
/**窗口行数 */
rows: {
type: Number,
default: 40,
},
});
/**终端输入DOM节点实例对象 */
const terminalDom = ref<HTMLElement | undefined>(undefined);
/**终端输入实例对象 */
const terminal = ref<any>(null);
/**终端输入渲染 */
function handleRanderXterm(container: HTMLElement | undefined) {
if (!container) return;
const xterm = new Terminal({
cols: props.cols,
rows: props.rows,
lineHeight: 1.2,
fontSize: 12,
fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
theme: {
background: '#000000',
},
cursorBlink: true, // 光标闪烁
cursorStyle: 'block',
scrollback: 1000, // 设置历史缓冲区大小为 1000 行
scrollSensitivity: 15,
tabStopWidth: 4,
disableStdin: true, // 禁止输入
});
// 挂载
xterm.open(container);
// 自适应尺寸
const fitAddon = new FitAddon();
xterm.loadAddon(fitAddon);
// 终端尺寸变化触发
xterm.onResize(({ cols, rows }) => {
// console.log('尺寸', cols, rows);
ws.send({
requestId: `resize_${props.id}`,
type: 'resize',
data: { cols, rows },
});
});
// 创建 ResizeObserver 实例
var observer = new ResizeObserver(entries => {
fitAddon.fit();
});
// 监听元素大小变化
observer.observe(container);
terminal.value = xterm;
}
/**连接打开后回调 */
function wsOpen(ev: any) {
// console.info('wsOpen', ev);
nextTick(() => {
handleRanderXterm(terminalDom.value);
// 连接事件
emit('connect', {
timeStamp: ev.timeStamp,
cols: terminal.value.cols,
rows: terminal.value.rows,
neType: props.neType,
neId: props.neId,
id: props.id,
});
});
}
/**连接错误后回调 */
function wsError(ev: any) {
console.error('wsError', ev);
if (terminal.value != null) {
let message = 'disconnected';
terminal.value.write(`\x1b[31m${message}\x1b[m\r\n`);
} else if (terminalDom.value) {
terminalDom.value.style.background = '#000';
terminalDom.value.style.color = '#ff4d4f';
terminalDom.value.style.height = '60%';
terminalDom.value.innerText = 'disconnected';
}
}
/**连接关闭后回调 */
function wsClose(code: number) {
// console.warn('wsClose', code);
if (terminal.value != null) {
let message = 'disconnected ' + code;
terminal.value.write(`\x1b[31m${message}\x1b[m\r\n`);
}
// 关闭事件
emit('close', {
code: code,
neType: props.neType,
neId: props.neId,
id: props.id,
});
}
/**接收消息后回调 */
function wsMessage(res: Record<string, any>) {
emit('message', res);
// console.log('wsMessage', res);
const { code, requestId, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
return;
}
if (!requestId) return;
if (terminal.value != null) {
// 查找的开始输出标记
const parts: string[] = data.split('\u001b[?2004l\r');
if (parts.length > 0) {
let text = parts[parts.length - 1];
// 找到最后输出标记
const lestIndex = text.lastIndexOf('\u001b[?2004h\u001b]0;');
if (lestIndex !== -1) {
text = text.substring(0, lestIndex);
}
if (text === '' || text === '\r\n' || text.startsWith("^C\r\n") ) {
return;
}
// console.log({ parts, text });
terminal.value.write(text);
return;
}
// 无标记
terminal.value.write(data);
}
}
onMounted(() => {
if (props.neType && props.neId) {
// 建立链接
const options: OptionsType = {
url: '/ws/view',
params: {
neType: props.neType,
neId: props.neId,
cols: props.cols,
rows: props.rows,
},
onmessage: wsMessage,
onerror: wsError,
onopen: wsOpen,
onclose: wsClose,
};
ws.connect(options);
}
});
onBeforeUnmount(() => {
ws.close();
});
// 给组件设置属性 ref="xxxTerminal"
// setup内使用 const xxxTerminal = ref();
defineExpose({
/**清除 */
clear: () => {
if (terminal.value != null) {
terminal.value.clear();
}
},
/**发送命令 */
send: (type: string, data: Record<string, any>) => {
ws.send({
requestId: `ssh_${props.id}`,
type,
data,
});
},
/**模拟按下 Ctrl+C */
ctrlC: () => {
ws.send({
requestId: `ssh_${props.id}`,
type: 'ctrl-c',
});
},
});
</script>
<template>
<div ref="terminalDom" :id="id" class="terminal"></div>
</template>
<style lang="css" scoped>
.terminal {
width: 100%;
height: 100%;
}
</style>

11
src/components/TerminalTelnet/index.vue
View File

@@ -155,6 +155,15 @@ function handleRanderXterm(container: HTMLElement | undefined) {
// 自适应尺寸
const fitAddon = new FitAddon();
xterm.loadAddon(fitAddon);
// 终端尺寸变化触发
xterm.onResize(({ cols, rows }) => {
// console.log('尺寸', cols, rows);
ws.send({
requestId: `telnet_resize_${props.hostId}`,
type: 'telnet_resize',
data: { cols, rows },
});
});
// 创建 ResizeObserver 实例
var observer = new ResizeObserver(entries => {
@@ -280,7 +289,7 @@ defineExpose({
<template>
<div class="terminal">
<div ref="terminalDom" style="height: 78%" :id="id"></div>
<div ref="terminalDom" style="height: calc(100% - 36px)" :id="id"></div>
<a-auto-complete
v-model:value="terminalState.text"
:dropdown-match-select-width="500"

33
src/i18n/locales/en-US.ts
View File

@@ -569,6 +569,8 @@ export default {
caller: "Caller",
called: "Called",
result: "Result",
resultOk: "Success",
resultFail: "Fail",
delTip: "Confirm deletion of the data item numbered [{msg}]?",
tenantName: "Tenant Name",
exportTip: "Do you confirm to export the current query conditions of the CDR data? (Maximum 10,000 items can be exported.)",
@@ -659,6 +661,7 @@ export default {
kpiEnable: 'Report',
kpiTimer: 'Reporting Cycle',
kpiTimerPlease: 'Please enter the reporting period (in seconds)',
omcIP: 'OMC IP',
},
backConf: {
export: 'Config Export',
@@ -770,6 +773,31 @@ export default {
uploadChangeOk: 'Network Element renewed license successfully and is being calibrated in the background!',
uploadChangeFail: "Some network elements failed to update the license, please check whether the service terminal environment is available!",
},
neConfig: {
treeTitle: "Navigation Configuration",
treeSelectTip: "Select configuration item information in the left configuration navigation!",
neType: 'NE Type',
neTypePleace: "Please select the network element type",
noConfigData: "No data on configuration items",
updateValue: "[ {num} ] parameter value modified successfully.",
updateValueErr: "Attribute value modification failure",
updateItem: "Modify Index to {num}.",
updateItemErr: "Record modification failure",
delItemOk: "Deleting Index as {num} succeeded",
addItemOk: "Add Index as {num} Record Succeeded",
addItemErr: "Record addition failure",
requireUn: "[ {display} ] input value is of unknown type",
requireString: "[ {display} ] parameter value is invalid.",
requireInt: "[ {display} ] parameter value not in reasonable range {filter}",
requireIpv4: "[ {display} ] not a legitimate IPV4 address",
requireIpv6: "[ {display} ] not a legitimate IPV6 address.",
requireEnum: "[ {display} ] is not a reasonable enumeration value.",
requireBool: "[ {display} ] is not a reasonable boolean value.",
editOkTip: "Confirm updating the value of this [ {num} ] attribute?",
updateItemTip: "Confirm updating the data item with Index [{num}]?",
delItemTip: "Confirm deleting the data item with Index [{num}]?",
arrayMore: "Expand",
},
neConfigBackup: {
name: "Name",
downTip: 'Confirmed to download the backup file [{txt}]?',
@@ -1239,6 +1267,11 @@ export default {
downTip: "Confirm the download file name is [{fileName}] File?",
downTipErr: "Failed to get file",
dirCd: "Enter Dir",
viewAs: 'View Action',
reload: "Reload",
follow: 'Monitoring Content',
tailChar: 'End Characters',
tailLines: 'End Lines',
},
},
monitor: {

33
src/i18n/locales/zh-CN.ts
View File

@@ -569,6 +569,8 @@ export default {
caller: "主叫",
called: "被叫",
result: "结果",
resultOk: "成功",
resultFail: "失败",
delTip: "确认删除编号为【{msg}】的数据项?",
tenantName: "租户名称",
exportTip: "确认导出当前查询条件的话单数据吗？（导出最大支持一万条）",
@@ -659,6 +661,7 @@ export default {
kpiEnable: '上报',
kpiTimer: '上报周期',
kpiTimerPlease: '请输入上报周期（单位秒）',
omcIP: 'OMC IP',
},
backConf: {
export: '配置导出',
@@ -770,6 +773,31 @@ export default {
uploadChangeOk: '网元更新许可证成功，正在后台校验！',
uploadChangeFail: "部分网元更新许可证失败，请检查服务终端环境是否可用！",
},
neConfig: {
treeTitle: "配置导航",
treeSelectTip: "左侧配置导航中选择配置项信息！",
neType: "网元类型",
neTypePleace: "请选择网元类型",
noConfigData: "暂无配置项数据",
updateValue: "【 {num} 】 属性值修改成功",
updateValueErr: "属性值修改失败",
updateItem: "修改 Index 为 {num} 记录成功",
updateItemErr: "记录修改失败",
delItemOk: "删除 Index 为 {num} 记录成功",
addItemOk: "新增 Index 为 {num} 记录成功",
addItemErr: "记录新增失败",
requireUn: "【 {display} 】输入值是未知类型",
requireString: "【 {display} 】参数值不合理",
requireInt: "【 {display} 】参数值不在合理范围 {filter}",
requireIpv4: "【 {display} 】不是合法的IPV4地址",
requireIpv6: "【 {display} 】不是合法的IPV6地址",
requireEnum: "【 {display} 】不是合理的枚举值",
requireBool: "【 {display} 】不是合理的布尔类型的值",
editOkTip: "确认更新该【 {num} 】属性值吗？",
updateItemTip: "确认更新Index为 【{num}】 的数据项？",
delItemTip: "确认删除Index为 【{num}】 的数据项？",
arrayMore: "展开",
},
neConfigBackup: {
name: "名称",
downTip: '确认要下载备份文件【{txt}】吗？',
@@ -1239,6 +1267,11 @@ export default {
downTip: "确认下载文件名为 【{fileName}】 文件?",
downTipErr: "文件获取失败",
dirCd: "进入目录",
viewAs: '查看操作',
reload: "重载",
follow: '监视内容变化',
tailChar: '末尾字数',
tailLines: '末尾行数',
},
},
monitor: {

4
src/router/index.ts
View File

@@ -170,6 +170,10 @@ router.beforeEach(async (to, from, next) => {
if (appStore.bootloader && to.path !== '/quick-start') {
next({ name: 'QuickStart' });
}
// 不重复引导
if (!appStore.bootloader && to.path === '/quick-start') {
next({ name: 'Index' });
}
const token = getToken();

114
src/views/dashboard/imsCDR/index.vue
View File

@@ -12,6 +12,7 @@ import {
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import useDictStore from '@/store/modules/dict';
import useNeInfoStore from '@/store/modules/neinfo';
import {
delIMSDataCDR,
exportIMSDataCDR,
@@ -39,6 +40,9 @@ let dict: {
cdrCallType: [],
});
/**网元可选 */
let neOtions = ref<Record<string, any>[]>([]);
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
@@ -141,17 +145,6 @@ let tableColumns: ColumnsType = [
align: 'left',
width: 100,
},
{
title: t('views.dashboard.cdr.called'),
dataIndex: 'cdrJSON',
key: 'calledParty',
align: 'left',
width: 120,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.calledParty;
},
},
{
title: t('views.dashboard.cdr.caller'),
dataIndex: 'cdrJSON',
@@ -163,6 +156,17 @@ let tableColumns: ColumnsType = [
return cdrJSON.callerParty;
},
},
{
title: t('views.dashboard.cdr.called'),
dataIndex: 'cdrJSON',
key: 'calledParty',
align: 'left',
width: 120,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.calledParty;
},
},
{
title: t('views.dashboard.cdr.duration'),
dataIndex: 'cdrJSON',
@@ -392,6 +396,7 @@ const realTimeData = ref<boolean>(false);
function fnRealTime() {
realTimeData.value = !realTimeData.value;
if (realTimeData.value) {
tableState.seached = false;
// 建立链接
const options: OptionsType = {
url: '/ws',
@@ -400,7 +405,7 @@ function fnRealTime() {
*
* IMS_CDR会话事件(GroupID:1005)
*/
subGroupID: '1005',
subGroupID: `1005_${queryParams.neId}`,
},
onmessage: wsMessage,
onerror: wsError,
@@ -408,6 +413,8 @@ function fnRealTime() {
ws.connect(options);
} else {
ws.close();
tableState.seached = true;
fnGetList(1);
}
}
@@ -430,7 +437,7 @@ function wsMessage(res: Record<string, any>) {
return;
}
// cdrEvent CDR会话事件
if (data.groupId === '1005') {
if (data.groupId === `1005_${queryParams.neId}`) {
const cdrEvent = data.data;
queue.add(async () => {
modalState.maxId += 1;
@@ -455,14 +462,39 @@ function wsMessage(res: Record<string, any>) {
onMounted(() => {
// 初始字典数据
Promise.allSettled([getDict('cdr_sip_code'), getDict('cdr_call_type')])
.then(resArr => {
Promise.allSettled([getDict('cdr_sip_code'), getDict('cdr_call_type')]).then(
resArr => {
if (resArr[0].status === 'fulfilled') {
dict.cdrSipCode = resArr[0].value;
}
if (resArr[1].status === 'fulfilled') {
dict.cdrCallType = resArr[1].value;
}
}
);
// 获取网元网元列表
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.data.length > 0) {
let arr: Record<string, any>[] = [];
res.data.forEach(i => {
if (i.neType === 'IMS') {
arr.push({ value: i.neId, label: i.neName });
}
});
neOtions.value = arr;
if (arr.length > 0) {
queryParams.neId = arr[0].value;
}
}
} else {
message.warning({
content: t('common.noData'),
duration: 2,
});
}
})
.finally(() => {
// 获取列表数据
@@ -502,6 +534,53 @@ onBeforeUnmount(() => {
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="IMS" name="neId ">
<a-select
v-model:value="queryParams.neId"
:options="neOtions"
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.called')"
name="calledParty"
>
<a-input
v-model:value="queryParams.calledParty"
allow-clear
:placeholder="t('common.inputPlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.caller')"
name="callerParty "
>
<a-input
v-model:value="queryParams.callerParty"
allow-clear
:placeholder="t('common.inputPlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="4" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.recordType')"
@@ -641,6 +720,7 @@ onBeforeUnmount(() => {
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
:disabled="realTimeData"
/>
</a-tooltip>
<a-tooltip>
@@ -714,7 +794,7 @@ onBeforeUnmount(() => {
/>
</span>
<span v-else>
{{ t('views.dashboard.overview.userActivity.resultOK') }}
{{ t('views.dashboard.cdr.resultOk') }}
</span>
</template>
<template v-if="column.key === 'id'">
@@ -785,7 +865,7 @@ onBeforeUnmount(() => {
/>
</span>
<span v-else>
{{ t('views.dashboard.overview.userActivity.resultOK') }}
{{ t('views.dashboard.cdr.resultOk') }}
</span>
</div>
</div>

49
src/views/dashboard/mmeUE/index.vue
View File

@@ -11,6 +11,7 @@ import {
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import useDictStore from '@/store/modules/dict';
import useNeInfoStore from '@/store/modules/neinfo';
import { listMMEDataUE, delMMEDataUE, exportMMEDataUE } from '@/api/neData/mme';
import { parseDateToStr } from '@/utils/date-utils';
import { OptionsType, WS } from '@/plugins/ws-websocket';
@@ -23,6 +24,9 @@ const { getDict } = useDictStore();
const ws = new WS();
const queue = new PQueue({ concurrency: 1, autoStart: true });
/**网元可选 */
let neOtions = ref<Record<string, any>[]>([]);
/**字典数据 */
let dict: {
/**UE 事件认证代码类型 */
@@ -349,6 +353,7 @@ const realTimeData = ref<boolean>(false);
function fnRealTime() {
realTimeData.value = !realTimeData.value;
if (realTimeData.value) {
tableState.seached = false;
// 建立链接
const options: OptionsType = {
url: '/ws',
@@ -357,7 +362,7 @@ function fnRealTime() {
*
* MME_UE会话事件(GroupID:1011)
*/
subGroupID: '1011',
subGroupID: `1011_${queryParams.neId}`,
},
onmessage: wsMessage,
onerror: wsError,
@@ -365,6 +370,8 @@ function fnRealTime() {
ws.connect(options);
} else {
ws.close();
tableState.seached = true;
fnGetList(1);
}
}
@@ -387,7 +394,7 @@ function wsMessage(res: Record<string, any>) {
return;
}
// ueEvent MME_UE会话事件
if (data.groupId === '1011') {
if (data.groupId === `1011_${queryParams.neId}`) {
const ueEvent = data.data;
queue.add(async () => {
modalState.maxId += 1;
@@ -417,8 +424,7 @@ onMounted(() => {
getDict('ue_auth_code'),
getDict('ue_event_type'),
getDict('ue_event_cm_state'),
])
.then(resArr => {
]).then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.ueAauthCode = resArr[0].value;
}
@@ -428,6 +434,31 @@ onMounted(() => {
if (resArr[2].status === 'fulfilled') {
dict.ueEventCmState = resArr[2].value;
}
});
// 获取网元网元列表
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.data.length > 0) {
let arr: Record<string, any>[] = [];
res.data.forEach(i => {
if (i.neType === 'MME') {
arr.push({ value: i.neId, label: i.neName });
}
});
neOtions.value = arr;
if (arr.length > 0) {
queryParams.neId = arr[0].value;
}
}
} else {
message.warning({
content: t('common.noData'),
duration: 2,
});
}
})
.finally(() => {
// 获取列表数据
@@ -467,6 +498,15 @@ onBeforeUnmount(() => {
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="MME" name="neId ">
<a-select
v-model:value="queryParams.neId"
:options="neOtions"
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.ue.eventType')"
@@ -588,6 +628,7 @@ onBeforeUnmount(() => {
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
:disabled="realTimeData"
/>
</a-tooltip>
<a-tooltip>

2
src/views/dashboard/overview/hooks/useTopology.ts
View File

@@ -22,7 +22,7 @@ export const notNeNodes = [
/**图状态 */
export const graphState = reactive<Record<string, any>>({
/**当前图组名 */
group: '5GC System Architecture5',
group: '5GC System Architecture',
/**图数据 */
data: {
combos: [],

34
src/views/dashboard/overview/hooks/useWS.ts
View File

@@ -55,37 +55,37 @@ export default function useWS() {
// 普通信息
switch (requestId) {
// AMF_UE会话事件
case '1010':
case 'amf_1010_001':
if (Array.isArray(data.rows)) {
eventListParse('amf_ue', data);
}
break;
// MME_UE会话事件
case '1011':
case 'mme_1011_001':
if (Array.isArray(data.rows)) {
eventListParse('mme_ue', data);
}
break;
// IMS_CDR会话事件
case '1005':
case 'ims_1005_001':
if (Array.isArray(data.rows)) {
eventListParse('ims_cdr', data);
}
break;
//UPF-总流量数
case '1030_0':
case 'upf_001_0':
const v0 = upfTFParse(data);
upfTotalFlow.value[0].up = v0.up;
upfTotalFlow.value[0].down = v0.down;
upfTotalFlow.value[0].requestFlag = false;
break;
case '1030_7':
case 'upf_001_7':
const v7 = upfTFParse(data);
upfTotalFlow.value[1].up = v7.up;
upfTotalFlow.value[1].down = v7.down;
upfTotalFlow.value[1].requestFlag = false;
break;
case '1030_30':
case 'upf_001_30':
const v30 = upfTFParse(data);
upfTotalFlow.value[2].up = v30.up;
upfTotalFlow.value[2].down = v30.down;
@@ -104,19 +104,19 @@ export default function useWS() {
}
break;
// AMF_UE会话事件
case '1010':
case '1010_001':
if (data.data) {
queue.add(() => eventItemParseAndPush('amf_ue', data.data));
}
break;
// MME_UE会话事件
case '1011':
case '1011_001':
if (data.data) {
queue.add(() => eventItemParseAndPush('mme_ue', data.data));
}
break;
// IMS_CDR会话事件
case '1005':
case '1005_001':
if (data.data) {
queue.add(() => eventItemParseAndPush('ims_cdr', data.data));
}
@@ -140,7 +140,7 @@ export default function useWS() {
}
upfTotalFlow.value[index].requestFlag = true;
ws.send({
requestId: `1030_${day}`,
requestId: `upf_001_${day}`,
type: 'upf_tf',
data: {
neType: 'UPF',
@@ -154,7 +154,7 @@ export default function useWS() {
function userActivitySend() {
// AMF_UE会话事件
ws.send({
requestId: '1010',
requestId: 'amf_1010_001',
type: 'amf_ue',
data: {
neType: 'AMF',
@@ -167,7 +167,7 @@ export default function useWS() {
});
// MME_UE会话事件
ws.send({
requestId: '1011',
requestId: 'mme_1011_001',
type: 'mme_ue',
data: {
neType: 'MME',
@@ -180,7 +180,7 @@ export default function useWS() {
});
// IMS_CDR会话事件
ws.send({
requestId: '1005',
requestId: 'ims_1005_001',
type: 'ims_cdr',
data: {
neType: 'IMS',
@@ -211,11 +211,11 @@ export default function useWS() {
/**订阅通道组
*
* 指标UPF (GroupID:12_neId)
* AMF_UE会话事件(GroupID:1010)
* MME_UE会话事件(GroupID:1011)
* IMS_CDR会话事件(GroupID:1005)
* AMF_UE会话事件(GroupID:1010_neId)
* MME_UE会话事件(GroupID:1011_neId)
* IMS_CDR会话事件(GroupID:1005_neId)
*/
subGroupID: '12_' + rmUid + ',1010,1011,1005',
subGroupID: '12_' + rmUid + ',1010_001,1011_001,1005_001',
},
onmessage: wsMessage,
onerror: wsError,

51
src/views/dashboard/smfCDR/index.vue
View File

@@ -5,6 +5,7 @@ import { Modal, message } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n';
import {
RESULT_CODE_ERROR,
@@ -25,6 +26,9 @@ const { t } = useI18n();
const ws = new WS();
const queue = new PQueue({ concurrency: 1, autoStart: true });
/**网元可选 */
let neOtions = ref<Record<string, any>[]>([]);
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
@@ -405,6 +409,7 @@ const realTimeData = ref<boolean>(false);
function fnRealTime() {
realTimeData.value = !realTimeData.value;
if (realTimeData.value) {
tableState.seached = false;
// 建立链接
const options: OptionsType = {
url: '/ws',
@@ -413,7 +418,7 @@ function fnRealTime() {
*
* CDR会话事件-SMF (GroupID:1006)
*/
subGroupID: '1006',
subGroupID: `1006_${queryParams.neId}`,
},
onmessage: wsMessage,
onerror: wsError,
@@ -421,6 +426,8 @@ function fnRealTime() {
ws.connect(options);
} else {
ws.close();
tableState.seached = true;
fnGetList(1);
}
}
@@ -443,7 +450,7 @@ function wsMessage(res: Record<string, any>) {
return;
}
// cdrEvent CDR会话事件
if (data.groupId === '1006') {
if (data.groupId === `1006_${queryParams.neId}`) {
const cdrEvent = data.data;
queue.add(async () => {
modalState.maxId += 1;
@@ -464,11 +471,34 @@ function wsMessage(res: Record<string, any>) {
}
}
onMounted(() => {
// 获取网元网元列表
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.data.length > 0) {
let arr: Record<string, any>[] = [];
res.data.forEach(i => {
if (i.neType === 'SMF') {
arr.push({ value: i.neId, label: i.neName });
}
});
neOtions.value = arr;
if (arr.length > 0) {
queryParams.neId = arr[0].value;
}
}
} else {
message.warning({
content: t('common.noData'),
duration: 2,
});
}
})
.finally(() => {
// 获取列表数据
fnGetList();
//查询租户
listTenant({ parentId: 0 }).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
@@ -484,6 +514,7 @@ onMounted(() => {
}
});
});
});
onBeforeUnmount(() => {
if (ws.state() !== -1) {
@@ -502,10 +533,19 @@ onBeforeUnmount(() => {
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="SMF" name="neId ">
<a-select
v-model:value="queryParams.neId"
:options="neOtions"
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.smfSubscriptionIDData')"
name="calledParty "
name="subscriberID"
>
<a-input
v-model:value="queryParams.subscriberID"
@@ -613,6 +653,7 @@ onBeforeUnmount(() => {
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
:disabled="realTimeData"
/>
</a-tooltip>
<a-tooltip>

733
src/views/dashboard/smscCDR/index.vue Normal file
View File

@@ -0,0 +1,733 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import useI18n from '@/hooks/useI18n';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo';
import {
delSMSCDataCDR,
exportSMSCDataCDR,
listSMSCDataCDR,
} from '@/api/neData/smsc';
import { parseDateToStr, parseDuration } from '@/utils/date-utils';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import saveAs from 'file-saver';
import PQueue from 'p-queue';
const { t } = useI18n();
const ws = new WS();
const queue = new PQueue({ concurrency: 1, autoStart: true });
/**网元可选 */
let neOtions = ref<Record<string, any>[]>([]);
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
neType: 'SMSC',
neId: '001',
recordType: '',
callerParty: '',
calledParty: '',
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: '',
/**结束时间 */
endTime: '',
/**当前页数 */
pageNum: 1,
/**每页条数 */
pageSize: 20,
});
/**查询参数重置 */
function fnQueryReset() {
recordTypes.value = [];
queryParams = Object.assign(queryParams, {
recordType: '',
callerParty: '',
calledParty: '',
startTime: '',
endTime: '',
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
}
/**记录类型 */
const recordTypes = ref<string[]>([]);
/**查询记录类型变更 */
function fnQueryRecordTypeChange(value: any) {
if (Array.isArray(value)) {
queryParams.recordType = value.join(',');
}
}
/**表格状态类型 */
type TabeStateType = {
/**加载等待 */
loading: boolean;
/**紧凑型 */
size: SizeType;
/**搜索栏 */
seached: boolean;
/**记录数据 */
data: object[];
/**勾选记录 */
selectedRowKeys: (string | number)[];
};
/**表格状态 */
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
seached: true,
data: [],
selectedRowKeys: [],
});
/**表格字段列 */
let tableColumns: ColumnsType = [
{
title: t('common.rowId'),
dataIndex: 'id',
align: 'left',
width: 100,
},
{
title: t('views.dashboard.cdr.recordType'),
dataIndex: 'cdrJSON',
align: 'left',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.recordType;
},
},
{
title: t('views.dashboard.cdr.type'),
dataIndex: 'cdrJSON',
align: 'left',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.serviceType;
},
},
{
title: t('views.dashboard.cdr.caller'),
dataIndex: 'cdrJSON',
key: 'callerParty',
align: 'left',
width: 120,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.callerParty;
},
},
{
title: t('views.dashboard.cdr.called'),
dataIndex: 'cdrJSON',
key: 'calledParty',
align: 'left',
width: 120,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.calledParty;
},
},
{
title: t('views.dashboard.cdr.result'),
dataIndex: 'cdrJSON',
key: 'cause',
align: 'left',
width: 120,
customRender(opt) {
const cdrJSON = opt.value;
return +cdrJSON.result
? t('views.dashboard.cdr.resultOk')
: t('views.dashboard.cdr.resultFail');
},
},
{
title: t('views.dashboard.cdr.time'),
dataIndex: 'cdrJSON',
align: 'center',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
return parseDateToStr(+cdrJSON.updateTime * 1000);
},
},
{
title: t('common.operate'),
key: 'id',
align: 'left',
},
];
/**表格分页器参数 */
let tablePagination = reactive({
/**当前页数 */
current: 1,
/**每页条数 */
pageSize: 20,
/**默认的每页条数 */
defaultPageSize: 20,
/**指定每页可以显示多少条 */
pageSizeOptions: ['10', '20', '50', '100'],
/**只有一页时是否隐藏分页器 */
hideOnSinglePage: false,
/**是否可以快速跳转至某页 */
showQuickJumper: true,
/**是否可以改变 pageSize */
showSizeChanger: true,
/**数据总数 */
total: 0,
showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
onChange: (page: number, pageSize: number) => {
tablePagination.current = page;
tablePagination.pageSize = pageSize;
queryParams.pageNum = page;
queryParams.pageSize = pageSize;
fnGetList();
},
});
/**表格紧凑型变更操作 */
function fnTableSize({ key }: MenuInfo) {
tableState.size = key as SizeType;
}
/**表格多选 */
function fnTableSelectedRowKeys(keys: (string | number)[]) {
tableState.selectedRowKeys = keys;
}
/**对话框对象信息状态类型 */
type ModalStateType = {
/**确定按钮 loading */
confirmLoading: boolean;
/**最大ID值 */
maxId: number;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
confirmLoading: false,
maxId: 0,
});
/**
* 记录删除
* @param id 编号
*/
function fnRecordDelete(id: string) {
if (!id || modalState.confirmLoading) return;
let msg = id;
if (id === '0') {
msg = `${id}... ${tableState.selectedRowKeys.length}`;
id = tableState.selectedRowKeys.join(',');
}
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.dashboard.cdr.delTip', { msg }),
onOk() {
modalState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
delSMSCDataCDR(id)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 3,
});
fnGetList(1);
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
},
});
}
/**查询列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
}
queryParams.startTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listSMSCDataCDR(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;
// 遍历处理cdr字符串数据
tableState.data = res.rows.map(item => {
let cdrJSON = item.cdrJSON;
if (!cdrJSON) {
Reflect.set(item, 'cdrJSON', {});
}
try {
cdrJSON = JSON.parse(cdrJSON);
Reflect.set(item, 'cdrJSON', cdrJSON);
} catch (error) {
console.error(error);
Reflect.set(item, 'cdrJSON', {});
}
return item;
});
// 取最大值ID用作实时累加
if (res.total > 0) {
modalState.maxId = Number(res.rows[0].id);
}
}
tableState.loading = false;
});
}
/**列表导出 */
function fnExportList() {
if (modalState.confirmLoading) return;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.dashboard.cdr.exportTip'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
const querys = toRaw(queryParams);
querys.pageSize = 10000;
exportSMSCDataCDR(querys)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 3,
});
saveAs(res.data, `smsc_cdr_event_export_${Date.now()}.xlsx`);
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
},
});
}
/**实时数据开关 */
const realTimeData = ref<boolean>(false);
/**
* 实时数据
*/
function fnRealTime() {
realTimeData.value = !realTimeData.value;
if (realTimeData.value) {
tableState.seached = false;
// 建立链接
const options: OptionsType = {
url: '/ws',
params: {
/**订阅通道组
*
* SMSC_CDR会话事件(GroupID:1007_neId)
*/
subGroupID: `1007_${queryParams.neId}`,
},
onmessage: wsMessage,
onerror: wsError,
};
ws.connect(options);
} else {
ws.close();
tableState.seached = true;
fnGetList(1);
}
}
/**接收数据后回调 */
function wsError(ev: any) {
// 接收数据后回调
console.error(ev);
}
/**接收数据后回调 */
function wsMessage(res: Record<string, any>) {
const { code, requestId, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
return;
}
// 订阅组信息
if (!data?.groupId) {
return;
}
// cdrEvent CDR会话事件
if (data.groupId === `1007_${queryParams.neId}`) {
const cdrEvent = data.data;
queue.add(async () => {
modalState.maxId += 1;
tableState.data.unshift({
id: modalState.maxId,
neType: cdrEvent.neType,
neName: cdrEvent.neName,
rmUID: cdrEvent.rmUID,
timestamp: cdrEvent.timestamp,
cdrJSON: cdrEvent.CDR,
});
tablePagination.total += 1;
if (tableState.data.length > 100) {
tableState.data.pop();
}
await new Promise(resolve => setTimeout(resolve, 800));
});
}
}
onMounted(() => {
// 获取网元网元列表
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.data.length > 0) {
let arr: Record<string, any>[] = [];
res.data.forEach(i => {
if (i.neType === 'SMSC') {
arr.push({ value: i.neId, label: i.neName });
}
});
neOtions.value = arr;
if (arr.length > 0) {
queryParams.neId = arr[0].value;
}
}
} else {
message.warning({
content: t('common.noData'),
duration: 2,
});
}
})
.finally(() => {
// 获取列表数据
fnGetList();
});
});
onBeforeUnmount(() => {
if (ws.state() !== -1) {
ws.close();
}
});
</script>
<template>
<PageContainer>
<a-card
v-show="tableState.seached"
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
>
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="SMSC" name="neId ">
<a-select
v-model:value="queryParams.neId"
:options="neOtions"
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.called')"
name="calledParty"
>
<a-input
v-model:value="queryParams.calledParty"
allow-clear
:placeholder="t('common.inputPlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.caller')"
name="callerParty "
>
<a-input
v-model:value="queryParams.callerParty"
allow-clear
:placeholder="t('common.inputPlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="4" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.recordType')"
name="recordType"
>
<a-select
v-model:value="recordTypes"
mode="multiple"
:options="['MOSM', 'MTSM'].map(v => ({ value: v }))"
:placeholder="t('common.selectPlease')"
@change="fnQueryRecordTypeChange"
></a-select>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.time')"
name="queryRangePicker"
>
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
value-format="x"
style="width: 100%"
></a-range-picker>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
<a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="center">
<a-popconfirm
placement="bottomLeft"
:title="
!realTimeData
? t('views.dashboard.cdr.realTimeDataStart')
: t('views.dashboard.cdr.realTimeDataStop')
"
ok-text="Yes"
cancel-text="No"
@confirm="fnRealTime()"
>
<a-button type="primary" :danger="realTimeData">
<template #icon><FundOutlined /> </template>
{{
!realTimeData
? t('views.dashboard.cdr.realTimeDataStart')
: t('views.dashboard.cdr.realTimeDataStop')
}}
</a-button>
</a-popconfirm>
<a-button
type="default"
danger
:disabled="tableState.selectedRowKeys.length <= 0"
:loading="modalState.confirmLoading"
@click.prevent="fnRecordDelete('0')"
>
<template #icon><DeleteOutlined /></template>
{{ t('common.deleteText') }}
</a-button>
<a-button type="dashed" @click.prevent="fnExportList()">
<template #icon><ExportOutlined /></template>
{{ t('common.export') }}
</a-button>
</a-space>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template>
<a-switch
v-model:checked="tableState.seached"
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
:disabled="realTimeData"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown trigger="click" placement="bottomRight">
<a-button type="text">
<template #icon><ColumnHeightOutlined /></template>
</a-button>
<template #overlay>
<a-menu
:selected-keys="[tableState.size as string]"
@click="fnTableSize"
>
<a-menu-item key="default">
{{ t('common.size.default') }}
</a-menu-item>
<a-menu-item key="middle">
{{ t('common.size.middle') }}
</a-menu-item>
<a-menu-item key="small">
{{ t('common.size.small') }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-tooltip>
</a-space>
</template>
<!-- 表格列表 -->
<a-table
class="table"
row-key="id"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:pagination="tablePagination"
:scroll="{ x: tableColumns.length * 150, y: 'calc(100vh - 480px)' }"
:row-selection="{
type: 'checkbox',
columnWidth: '48px',
selectedRowKeys: tableState.selectedRowKeys,
onChange: fnTableSelectedRowKeys,
}"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'id'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.deleteText') }}</template>
<a-button
type="link"
@click.prevent="fnRecordDelete(record.id)"
>
<template #icon>
<DeleteOutlined />
</template>
</a-button>
</a-tooltip>
</a-space>
</template>
</template>
<template #expandedRowRender="{ record }">
<div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
<a-divider orientation="left">
{{ t('views.dashboard.cdr.cdrInfo') }}
</a-divider>
<div>
<span>{{ t('views.ne.common.neName') }}: </span>
<span>{{ record.neName }}</span>
</div>
<div>
<span>{{ t('views.ne.common.rmUid') }}: </span>
<span>{{ record.rmUID }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.time') }}: </span>
<span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
</div>
<a-divider orientation="left">
{{ t('views.dashboard.cdr.rowInfo') }}
</a-divider>
<div>
<span>{{ t('views.dashboard.cdr.type') }}: </span>
<span>{{ record.cdrJSON.serviceType }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.caller') }}: </span>
<span>{{ record.cdrJSON.callerParty }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.called') }}: </span>
<span>{{ record.cdrJSON.calledParty }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.result') }}: </span>
<span>
{{
+record.cdrJSON.result
? t('views.dashboard.cdr.resultOk')
: t('views.dashboard.cdr.resultFail')
}}
</span>
</div>
</div>
</template>
</a-table>
</a-card>
</PageContainer>
</template>
<style lang="less" scoped>
.table :deep(.ant-pagination) {
padding: 0 24px;
}
</style>

61
src/views/faultManage/active-alarm/index.vue
View File

@@ -142,30 +142,6 @@ let alarmTableState: TabeStateType = reactive({
/**表格字段列 */
let tableColumns: ColumnsType = [
{
title: t('views.faultManage.activeAlarm.alarmId'),
dataIndex: 'alarmId',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.neId'),
dataIndex: 'neId',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.neName'),
dataIndex: 'neName',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.neType'),
dataIndex: 'neType',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.origLevel'),
align: 'center',
@@ -173,18 +149,18 @@ let tableColumns: ColumnsType = [
dataIndex: 'origSeverity',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.alarmCode'),
dataIndex: 'alarmCode',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.alarmTitle'),
dataIndex: 'alarmTitle',
align: 'left',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.neType'),
dataIndex: 'neType',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.eventTime'),
dataIndex: 'eventTime',
@@ -192,6 +168,12 @@ let tableColumns: ColumnsType = [
sorter: (a: any, b: any) => 1,
width: 5,
},
{
title: t('views.faultManage.activeAlarm.alarmCode'),
dataIndex: 'alarmCode',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.alarmType'),
dataIndex: 'alarmType',
@@ -199,12 +181,31 @@ let tableColumns: ColumnsType = [
align: 'left',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.neName'),
dataIndex: 'neName',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.neId'),
dataIndex: 'neId',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.pvFlag'),
dataIndex: 'pvFlag',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.alarmId'),
dataIndex: 'alarmId',
align: 'center',
width: 5,
},
{
title: t('views.faultManage.activeAlarm.ackState'),
dataIndex: 'ackState',

174
src/views/logManage/neFile/components/ViewDrawer.vue Normal file
View File

@@ -0,0 +1,174 @@
<script setup lang="ts">
import { reactive, onMounted, watch, ref, nextTick } from 'vue';
import { ProModal } from 'antdv-pro-modal';
import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']);
const props = defineProps({
visible: {
type: Boolean,
default: false,
required: true,
},
/**文件地址 */
filePath: {
type: String,
default: '',
required: true,
},
/**网元类型 */
neType: {
type: String,
default: '',
required: true,
},
/**网元ID */
neId: {
type: String,
default: '',
required: true,
},
});
/**对话框对象信息状态类型 */
type StateType = {
/**框是否显示 */
visible: boolean;
/**标题 */
title: string;
/**查看命令 */
form: Record<string, any>;
};
/**对话框对象信息状态 */
let state: StateType = reactive({
visible: false,
title: '文件查看',
form: {
follow: true,
showType: 'lines', // lines/char
lines: 10,
char: 0,
},
});
function onClose() {
state.visible = false;
emit('cancel');
emit('update:visible', false);
}
/**监听是否显示，初始数据 */
watch(
() => props.visible,
val => {
if (val) {
if (props.neType && props.neId) {
const filePath = props.filePath;
const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
state.title = fileName;
state.visible = true;
}
}
}
);
/**终端实例 */
const viewTerminal = ref();
/**终端初始连接 */
function fnInit() {
setTimeout(fnReload, 1_500);
}
/**重载查看方式 */
function fnReload() {
if (!viewTerminal.value) return;
viewTerminal.value.ctrlC();
if (state.form.showType !== 'lines') {
state.form.lines = 10;
} else {
state.form.char = 0;
}
viewTerminal.value.clear();
viewTerminal.value.send('tail', {
filePath: props.filePath,
lines: state.form.lines,
char: state.form.char,
follow: state.form.follow,
});
}
</script>
<template>
<ProModal
:drag="true"
:fullscreen="true"
:borderDraw="true"
:min-width="800"
:min-height="500"
:center-y="true"
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="state.visible"
:title="state.title"
:body-style="{ padding: '12px', overflow: 'hidden' }"
:footer="null"
@cancel="onClose"
>
<TerminalSSHView
ref="viewTerminal"
:id="`V${Date.now()}`"
style="height: calc(100% - 36px)"
:ne-type="neType"
:ne-id="neId"
@connect="fnInit()"
></TerminalSSHView>
<!-- 命令控制属性 -->
<a-form name="form" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.logManage.neFile.viewAs')">
<a-input-group compact>
<a-select v-model:value="state.form.showType" style="width: 50%">
<a-select-option value="lines">
{{ t('views.logManage.neFile.tailLines') }}
</a-select-option>
<a-select-option value="char">
{{ t('views.logManage.neFile.tailChar') }}
</a-select-option>
</a-select>
<a-input-number
style="width: 25%"
v-model:value="state.form[state.form.showType]"
:min="0"
:max="1000"
:placeholder="t('common.inputPlease')"
></a-input-number>
<a-button type="primary" style="width: 25%" @click="fnReload()">
{{ t('views.logManage.neFile.reload') }}
</a-button>
</a-input-group>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.logManage.neFile.follow')"
name="follow"
>
<a-switch v-model:checked="state.form.follow" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</ProModal>
</template>
<style lang="less" scoped>
.ant-form :deep(.ant-form-item) {
margin-bottom: 0;
}
</style>

74
src/views/logManage/neFile/index.vue
View File

@@ -3,12 +3,13 @@ import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { Modal, message } from 'ant-design-vue/lib';
import { parseDateToStr } from '@/utils/date-utils';
import { getNeFile, listNeFiles } from '@/api/tool/neFile';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n';
import { Modal, message } from 'ant-design-vue/lib';
import ViewDrawer from './components/ViewDrawer.vue';
import saveAs from 'file-saver';
import { useRoute } from 'vue-router';
const neInfoStore = useNeInfoStore();
@@ -19,11 +20,7 @@ const route = useRoute();
const routeParams = route.query as Record<string, any>;
/**网元参数 */
let neType = ref<string[]>([]);
/**下载触发等待 */
let loading = ref(false);
/**访问路径 */
let nePathArr = ref<string[]>([]);
let neTypeSelect = ref<string[]>([]);
/**查询参数 */
let queryParams = reactive({
@@ -134,14 +131,17 @@ let tablePagination = reactive({
},
});
/**下载触发等待 */
let downLoading = ref<boolean>(false);
/**信息文件下载 */
function fnDownloadFile(row: Record<string, any>) {
if (loading.value) return;
if (downLoading.value) return;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.logManage.neFile.downTip', { fileName: row.fileName }),
onOk() {
loading.value = true;
downLoading.value = true;
const hide = message.loading(t('common.loading'), 0);
getNeFile({
neType: queryParams.neType,
@@ -167,12 +167,15 @@ function fnDownloadFile(row: Record<string, any>) {
})
.finally(() => {
hide();
loading.value = false;
downLoading.value = false;
});
},
});
}
/**访问路径 */
let nePathArr = ref<string[]>([]);
/**进入目录 */
function fnDirCD(dir: string, index?: number) {
if (index === undefined) {
@@ -235,15 +238,42 @@ function fnGetList(pageNum?: number) {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
tablePagination.total = res.total;
tableState.data = res.rows;
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
if (
tablePagination.total <=
(queryParams.pageNum - 1) * tablePagination.pageSize &&
queryParams.pageNum !== 1
) {
tableState.loading = false;
fnGetList(queryParams.pageNum - 1);
}
} else {
message.error(res.msg, 3);
tablePagination.total = 0;
tableState.data = [];
}
tableState.loading = false;
});
}
/**抽屉状态 */
const viewDrawerState = reactive({
visible: false,
/**文件路径 /var/log/amf.log */
filePath: '',
/**网元类型 */
neType: '',
/**网元ID */
neId: '',
});
/**打开抽屉查看 */
function fnDrawerOpen(row: Record<string, any>) {
viewDrawerState.filePath = [...nePathArr.value, row.fileName].join('/');
viewDrawerState.neType = neTypeSelect.value[0];
viewDrawerState.neId = neTypeSelect.value[1];
viewDrawerState.visible = !viewDrawerState.visible;
}
onMounted(() => {
// 获取网元网元列表
neInfoStore.fnNelist().then(res => {
@@ -254,8 +284,8 @@ onMounted(() => {
duration: 2,
});
} else if (routeParams.neType) {
neType.value = [routeParams.neType, routeParams.neId]
fnNeChange(neType.value, undefined);
neTypeSelect.value = [routeParams.neType, routeParams.neId];
fnNeChange(neTypeSelect.value, undefined);
}
}
});
@@ -276,12 +306,12 @@ onMounted(() => {
style="margin-bottom: 0"
>
<a-cascader
v-model:value="neType"
v-model:value="neTypeSelect"
:options="neInfoStore.getNeCascaderOptions"
@change="fnNeChange"
:allow-clear="false"
:placeholder="t('views.logManage.neFile.neTypePlease')"
:disabled="loading || tableState.loading"
:disabled="downLoading || tableState.loading"
/>
</a-form-item>
</a-col>
@@ -332,8 +362,15 @@ onMounted(() => {
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'fileName'">
<a-space :size="8" align="center">
<a-tooltip v-if="record.fileType === 'file'">
<template #title>{{ t('common.viewText') }}</template>
<a-button type="link" @click.prevent="fnDrawerOpen(record)">
<template #icon><ProfileOutlined /></template>
</a-button>
</a-tooltip>
<a-button
type="link"
:loading="downLoading"
@click.prevent="fnDownloadFile(record)"
v-if="record.fileType === 'file'"
>
@@ -342,6 +379,7 @@ onMounted(() => {
</a-button>
<a-button
type="link"
:loading="downLoading"
@click.prevent="fnDirCD(record.fileName)"
v-if="record.fileType === 'dir'"
>
@@ -353,6 +391,14 @@ onMounted(() => {
</template>
</a-table>
</a-card>
<!-- 文件内容查看抽屉 -->
<ViewDrawer
v-model:visible="viewDrawerState.visible"
:file-path="viewDrawerState.filePath"
:ne-type="viewDrawerState.neType"
:ne-id="viewDrawerState.neId"
></ViewDrawer>
</PageContainer>
</template>

2
src/views/monitor/topologyArchitecture/index.vue
View File

@@ -34,7 +34,7 @@ const graphG6Dom = ref<HTMLElement | undefined>(undefined);
/**图状态 */
const graphState = reactive<Record<string, any>>({
/**当前图组名 */
group: '5GC System Architecture5',
group: '5GC System Architecture',
/**图数据 */
data: {
combos: [],

347
src/views/ne/neConfig/hooks/useConfigArray.ts Normal file
View File

@@ -0,0 +1,347 @@
import {
addNeConfigData,
delNeConfigData,
editNeConfigData,
} from '@/api/ne/neConfig';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { Modal } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import message from 'ant-design-vue/lib/message';
import { reactive, watch } from 'vue';
/**
* 参数配置array类型
* @param param 父级传入 { t, treeState, neTypeSelect, fnActiveConfigNode, ruleVerification, modalState, fnModalCancel}
* @returns
*/
export default function useConfigArray({
t,
treeState,
neTypeSelect,
fnActiveConfigNode,
ruleVerification,
modalState,
fnModalCancel,
}: any) {
/**多列列表状态类型 */
type ArrayStateType = {
/**紧凑型 */
size: SizeType;
/**多列嵌套记录字段 */
columns: Record<string, any>[];
/**表格字段列排序 */
columnsDnd: Record<string, any>[];
/**多列记录数据 */
columnsData: Record<string, any>[];
/**多列嵌套展开key */
arrayChildExpandKeys: any[];
/**多列记录数据 */
data: Record<string, any>[];
/**多列记录规则 */
dataRule: Record<string, any>;
};
/**多列列表状态 */
let arrayState: ArrayStateType = reactive({
size: 'small',
columns: [],
columnsDnd: [],
columnsData: [],
arrayChildExpandKeys: [],
data: [],
dataRule: {},
});
/**多列表编辑 */
function arrayEdit(rowIndex: Record<string, any>) {
const item = arrayState.data.find((s: any) => s.key === rowIndex.value);
if (!item) return;
const from = arrayInitEdit(item, arrayState.dataRule);
// 处理信息
const row: Record<string, any> = {};
for (const v of from.record) {
if (Array.isArray(v.array)) {
continue;
}
row[v.name] = Object.assign({}, v);
}
modalState.from = row;
modalState.type = 'arrayEdit';
modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
modalState.key = from.key;
modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
modalState.visible = true;
// 关闭嵌套
arrayState.arrayChildExpandKeys = [];
}
/**多列表编辑关闭 */
function arrayEditClose() {
arrayState.arrayChildExpandKeys = [];
fnModalCancel();
}
/**多列表编辑确认 */
function arrayEditOk(from: Record<string, any>) {
const loc = `${from['index']['value']}`;
// 遍历提取属性和值
let data: Record<string, any> = {};
for (const key in from) {
// 子嵌套的不插入
if (from[key]['array']) {
continue;
}
// 检查规则
const [ok, msg] = ruleVerification(from[key]);
if (!ok) {
message.warning({
content: `${msg}`,
duration: 3,
});
return;
}
data[key] = from[key]['value'];
}
// 发送
const hide = message.loading(t('common.loading'), 0);
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc: loc,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.ne.neConfig.updateItem', {
num: modalState.title,
}),
duration: 3,
});
fnActiveConfigNode('#');
} else {
message.warning({
content: t('views.ne.neConfig.updateItemErr'),
duration: 3,
});
}
})
.finally(() => {
hide();
arrayEditClose();
});
}
/**多列表删除单行 */
function arrayDelete(rowIndex: Record<string, any>) {
const loc = `${rowIndex.value}`;
const title = `${treeState.selectNode.paramDisplay} Index-${loc}`;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.ne.neConfig.delItemTip', {
num: title,
}),
onOk() {
delNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
loc: loc,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.ne.neConfig.delItemOk', {
num: title,
}),
duration: 2,
});
arrayEditClose();
fnActiveConfigNode('#');
} else {
message.error({
content: `${res.msg}`,
duration: 2,
});
}
});
},
});
}
/**多列表新增单行 */
function arrayAdd() {
const from = arrayInitAdd(arrayState.data, arrayState.dataRule);
// 处理信息
const row: Record<string, any> = {};
for (const v of from.record) {
if (Array.isArray(v.array)) {
continue;
}
row[v.name] = Object.assign({}, v);
}
modalState.from = row;
modalState.type = 'arrayAdd';
modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
modalState.key = from.key;
modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
modalState.visible = true;
}
/**多列表新增单行确认 */
function arrayAddOk(from: Record<string, any>) {
// 遍历提取属性和值
let data: Record<string, any> = {};
for (const key in from) {
// 子嵌套的不插入
if (from[key]['array']) {
continue;
}
// 检查规则
const [ok, msg] = ruleVerification(from[key]);
if (!ok) {
message.warning({
content: `${msg}`,
duration: 3,
});
return;
}
data[key] = from[key]['value'];
}
// 发送
const hide = message.loading(t('common.loading'), 0);
addNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc: `${from['index']['value']}`,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.ne.neConfig.addItemOk', {
num: modalState.title,
}),
duration: 3,
});
fnActiveConfigNode('#');
} else {
message.warning({
content: t('views.ne.neConfig.addItemErr'),
duration: 3,
});
}
})
.finally(() => {
hide();
arrayEditClose();
});
}
/**多列表编辑行数据初始化 */
function arrayInitEdit(data: Record<string, any>, dataRule: any) {
const dataFrom = data.record;
const ruleFrom = Object.assign({}, JSON.parse(JSON.stringify(dataRule)));
for (const row of ruleFrom.record) {
// 子嵌套的不初始
if (row.array) {
row.value = [];
continue;
}
// 查找项的值
const item = dataFrom.find((s: any) => s.name === row.name);
if (!item) {
continue;
}
// 可选的
row.optional = 'true';
// 根据规则类型转值
if (['enum', 'int'].includes(row.type)) {
row.value = Number(item.value);
} else if ('bool' === row.type) {
row.value = Boolean(item.value);
} else {
row.value = item.value;
}
}
ruleFrom.key = data.key;
ruleFrom.title = data.title;
return ruleFrom;
}
/**多列表新增行数据初始化 */
function arrayInitAdd(data: any[], dataRule: any) {
// 有数据时取得最后的index
let dataLastIndex = 0;
if (data.length !== 0) {
const lastFrom = Object.assign(
{},
JSON.parse(JSON.stringify(data.at(-1)))
);
if (lastFrom.record.length > 0) {
dataLastIndex = parseInt(lastFrom.key);
dataLastIndex += 1;
}
}
const ruleFrom = Object.assign({}, JSON.parse(JSON.stringify(dataRule)));
for (const row of ruleFrom.record) {
// 子嵌套的不初始
if (row.array) {
row.value = [];
continue;
}
// 可选的
row.optional = 'true';
// index值
if (row.name === 'index') {
let newIndex =
dataLastIndex !== 0 ? dataLastIndex : parseInt(row.value);
if (isNaN(newIndex)) {
newIndex = 0;
}
row.value = newIndex;
ruleFrom.key = newIndex;
ruleFrom.title = `Index-${newIndex}`;
continue;
}
// 根据规则类型转值
if (['enum', 'int'].includes(row.type)) {
row.value = Number(row.value);
}
if ('bool' === row.type) {
row.value = Boolean(row.value);
}
}
return ruleFrom;
}
// 监听表格字段列排序变化关闭展开
watch(
() => arrayState.columnsDnd,
() => {
arrayEditClose();
}
);
return {
arrayState,
arrayEdit,
arrayEditClose,
arrayEditOk,
arrayDelete,
arrayAdd,
arrayAddOk,
arrayInitEdit,
arrayInitAdd,
};
}

353
src/views/ne/neConfig/hooks/useConfigArrayChild.ts Normal file
View File

@@ -0,0 +1,353 @@
import {
addNeConfigData,
editNeConfigData,
delNeConfigData,
} from '@/api/ne/neConfig';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { Modal } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import message from 'ant-design-vue/lib/message';
import { nextTick, reactive } from 'vue';
/**
* 参数配置array类型的嵌套array
* @param param 父级传入 { t, treeState, neTypeSelect, fnActiveConfigNode, ruleVerification, modalState, arrayState, arrayInitEdit, arrayInitAdd, arrayEditClose}
* @returns
*/
export default function useConfigArrayChild({
t,
treeState,
neTypeSelect,
fnActiveConfigNode,
ruleVerification,
modalState,
arrayState,
arrayInitEdit,
arrayInitAdd,
arrayEditClose,
}: any) {
/**多列嵌套列表状态类型 */
type ArrayChildStateType = {
/**标题 */
title: string;
/**层级index */
loc: string;
/**紧凑型 */
size: SizeType;
/**多列嵌套记录字段 */
columns: Record<string, any>[];
/**表格字段列排序 */
columnsDnd: Record<string, any>[];
/**多列记录数据 */
columnsData: Record<string, any>[];
/**多列嵌套记录数据 */
data: Record<string, any>[];
/**多列嵌套记录规则 */
dataRule: Record<string, any>;
};
/**多列嵌套表格状态 */
let arrayChildState: ArrayChildStateType = reactive({
title: '',
loc: '',
size: 'small',
columns: [],
columnsDnd: [],
columnsData: [],
data: [],
dataRule: {},
});
/**多列表展开嵌套行 */
function arrayChildExpand(
indexRow: Record<string, any>,
row: Record<string, any>
) {
const loc = indexRow.value;
if (arrayChildState.loc === `${loc}/${row.name}`) {
arrayChildState.loc = '';
arrayState.arrayChildExpandKeys = [];
return;
}
arrayChildState.loc = '';
arrayState.arrayChildExpandKeys = [];
const from = Object.assign({}, JSON.parse(JSON.stringify(row)));
// 无数据时
if (!Array.isArray(from.value)) {
from.value = [];
}
const dataArr = Object.freeze(from.value);
const ruleArr = Object.freeze(from.array);
// 列表项数据
const dataArray: Record<string, any>[] = [];
for (const item of dataArr) {
const index = item['index'];
let record: Record<string, any>[] = [];
for (const key of Object.keys(item)) {
// 规则为准
for (const rule of ruleArr) {
if (rule['name'] === key) {
const ruleItem = Object.assign({ optional: 'true' }, rule, {
value: item[key],
});
record.push(ruleItem);
break;
}
}
}
// dataArray.push(record);
dataArray.push({ title: `Index-${index}`, key: index, record });
}
arrayChildState.data = dataArray;
// 无数据时，用于新增
arrayChildState.dataRule = {
title: `Index-0`,
key: 0,
record: ruleArr,
};
// 列表数据
const columnsData: Record<string, any>[] = [];
for (const v of arrayChildState.data) {
const row: Record<string, any> = {};
for (const item of v.record) {
row[item.name] = item;
}
columnsData.push(row);
}
arrayChildState.columnsData = columnsData;
// 列表字段
const columns: Record<string, any>[] = [];
for (const rule of arrayChildState.dataRule.record) {
columns.push({
title: rule.display,
dataIndex: rule.name,
align: 'left',
resizable: true,
width: 50,
minWidth: 50,
maxWidth: 250,
});
}
columns.push({
title: t('common.operate'),
dataIndex: 'index',
key: 'index',
align: 'center',
fixed: 'right',
width: 100,
});
arrayChildState.columns = columns;
nextTick(() => {
// 设置展开key
arrayState.arrayChildExpandKeys = [indexRow];
// 层级标识
arrayChildState.loc = `${loc}/${from['name']}`;
// 设置展开列表标题
arrayChildState.title = `${from['display']}`;
});
}
/**多列表嵌套行编辑 */
function arrayChildEdit(rowIndex: Record<string, any>) {
const item = arrayChildState.data.find(
(s: any) => s.key === rowIndex.value
);
if (!item) return;
const from = arrayInitEdit(item, arrayChildState.dataRule);
// 处理信息
const row: Record<string, any> = {};
for (const v of from.record) {
if (Array.isArray(v.array)) {
continue;
}
row[v.name] = Object.assign({}, v);
}
modalState.from = row;
modalState.type = 'arrayChildEdit';
modalState.title = `${arrayChildState.title} ${from.title}`;
modalState.key = from.key;
modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
modalState.visible = true;
}
/**多列表嵌套行编辑确认 */
function arrayChildEditOk(from: Record<string, any>) {
const loc = `${arrayChildState.loc}/${from['index']['value']}`;
let data: Record<string, any> = {};
for (const key in from) {
// 子嵌套的不插入
if (from[key]['array']) {
continue;
}
// 检查规则
const [ok, msg] = ruleVerification(from[key]);
if (!ok) {
message.warning({
content: `${msg}`,
duration: 3,
});
return;
}
data[key] = from[key]['value'];
}
// 发送
const hide = message.loading(t('common.loading'), 0);
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.ne.neConfig.updateItem', {
num: modalState.title,
}),
duration: 3,
});
fnActiveConfigNode('#');
} else {
message.warning({
content: t('views.ne.neConfig.updateItemErr'),
duration: 3,
});
}
})
.finally(() => {
hide();
arrayEditClose();
});
}
/**多列表嵌套行删除单行 */
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.ne.neConfig.delItemTip', {
num: title,
}),
onOk() {
delNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
loc,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.ne.neConfig.delItemOk', {
num: title,
}),
duration: 2,
});
arrayEditClose();
fnActiveConfigNode('#');
} else {
message.error({
content: `${res.msg}`,
duration: 2,
});
}
});
},
});
}
/**多列表嵌套行新增单行 */
function arrayChildAdd() {
const from = arrayInitAdd(arrayChildState.data, arrayChildState.dataRule);
// 处理信息
const row: Record<string, any> = {};
for (const v of from.record) {
if (Array.isArray(v.array)) {
continue;
}
row[v.name] = Object.assign({}, v);
}
modalState.from = row;
modalState.type = 'arrayChildAdd';
modalState.title = `${arrayChildState.title} ${from.title}`;
modalState.key = from.key;
modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
modalState.visible = true;
}
/**多列表新增单行确认 */
function arrayChildAddOk(from: Record<string, any>) {
const loc = `${arrayChildState.loc}/${from['index']['value']}`;
let data: Record<string, any> = {};
for (const key in from) {
// 子嵌套的不插入
if (from[key]['array']) {
continue;
}
// 检查规则
const [ok, msg] = ruleVerification(from[key]);
if (!ok) {
message.warning({
content: `${msg}`,
duration: 3,
});
return;
}
data[key] = from[key]['value'];
}
// 发送
const hide = message.loading(t('common.loading'), 0);
addNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.ne.neConfig.addItemOk', {
num: modalState.title,
}),
duration: 3,
});
fnActiveConfigNode('#');
} else {
message.warning({
content: t('views.ne.neConfig.addItemErr'),
duration: 3,
});
}
})
.finally(() => {
hide();
arrayEditClose();
});
}
return {
arrayChildState,
arrayChildExpand,
arrayChildEdit,
arrayChildEditOk,
arrayChildDelete,
arrayChildAdd,
arrayChildAddOk,
};
}

145
src/views/ne/neConfig/hooks/useConfigList.ts Normal file
View File

@@ -0,0 +1,145 @@
import { editNeConfigData } from '@/api/ne/neConfig';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import message from 'ant-design-vue/lib/message';
import { reactive, toRaw } from 'vue';
/**
* list类型参数处理
* @param param 父级传入 {t, treeState, neTypeSelect, ruleVerification}
* @returns
*/
export default function useConfigList({
t,
treeState,
neTypeSelect,
ruleVerification,
}: any) {
/**单列表状态类型 */
type ListStateType = {
/**紧凑型 */
size: SizeType;
/**单列记录字段 */
columns: Record<string, any>[];
/**单列记录数据 */
data: Record<string, any>[];
/**编辑行记录 */
editRecord: Record<string, any>;
/**确认提交等待 */
confirmLoading: boolean;
};
/**单列表状态 */
let listState: ListStateType = reactive({
size: 'small',
columns: [
{
title: 'Key',
dataIndex: 'display',
align: 'left',
width: '30%',
},
{
title: 'Value',
dataIndex: 'value',
align: 'left',
width: '70%',
},
],
data: [],
confirmLoading: false,
editRecord: {},
});
/**单列表编辑 */
function listEdit(row: Record<string, any>) {
listState.editRecord = Object.assign({}, row);
}
/**单列表编辑关闭 */
function listEditClose() {
listState.confirmLoading = false;
listState.editRecord = {};
}
/**单列表编辑确认 */
function listEditOk() {
if (listState.confirmLoading) return;
const from = toRaw(listState.editRecord);
// 检查规则
const [ok, msg] = ruleVerification(from);
if (!ok) {
message.warning({
content: `${msg}`,
duration: 3,
});
return;
}
// 发送
listState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: {
[from['name']]: from['value'],
},
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.ne.neConfig.updateValue', {
num: from['display'],
}),
duration: 3,
});
// 改变表格数据
const item = listState.data.find(
(item: Record<string, any>) => from['name'] === item['name']
);
if (item) {
Object.assign(item, listState.editRecord);
}
} else {
message.warning({
content: t('views.ne.neConfig.updateValueErr'),
duration: 3,
});
}
})
.finally(() => {
hide();
listState.confirmLoading = false;
listState.editRecord = {};
});
}
/**表格分页器参数 */
let tablePagination = reactive({
/**当前页数 */
current: 1,
/**每页条数 */
pageSize: 10,
/**默认的每页条数 */
defaultPageSize: 10,
/**指定每页可以显示多少条 */
pageSizeOptions: ['10', '20', '50', '100'],
/**只有一页时是否隐藏分页器 */
hideOnSinglePage: true,
/**是否可以快速跳转至某页 */
showQuickJumper: true,
/**是否可以改变 pageSize */
showSizeChanger: true,
/**数据总数 */
total: 0,
showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
onChange: (page: number, pageSize: number) => {
tablePagination.current = page;
tablePagination.pageSize = pageSize;
},
});
return { tablePagination, listState, listEdit, listEditClose, listEditOk };
}

192
src/views/ne/neConfig/hooks/useOptions.ts Normal file
View File

@@ -0,0 +1,192 @@
import { getNeConfigData } from '@/api/ne/neConfig';
import { regExpIPv4, regExpIPv6, validURL } from '@/utils/regular-utils';
import { ref } from 'vue';
/**
* 参数公共函数
* @param param 父级传入 {t}
* @returns
*/
export default function useOptions({ t }: any) {
/**规则校验 */
function ruleVerification(row: Record<string, any>): (string | boolean)[] {
let result = [true, ''];
const type = row.type;
const value = row.value;
const filter = row.filter;
const display = row.display;
// 子嵌套的不检查
if (row.array) {
return result;
}
// 可选的同时没有值不检查
if (row.optional === 'true' && !value) {
return result;
}
switch (type) {
case 'int':
// filter: "0~128"
if (filter && filter.indexOf('~') !== -1) {
const filterArr = filter.split('~');
const minInt = parseInt(filterArr[0]);
const maxInt = parseInt(filterArr[1]);
const valueInt = parseInt(value);
if (valueInt < minInt || valueInt > maxInt) {
return [
false,
t('views.ne.neConfig.requireInt', {
display,
filter,
}),
];
}
}
break;
case 'ipv4':
if (!regExpIPv4.test(value)) {
return [
false,
t('views.ne.neConfig.requireIpv4', { display }),
];
}
break;
case 'ipv6':
if (!regExpIPv6.test(value)) {
return [
false,
t('views.ne.neConfig.requireIpv6', { display }),
];
}
break;
case 'enum':
if (filter && filter.indexOf('{') === 1) {
let filterJson: Record<string, any> = {};
try {
filterJson = JSON.parse(filter); //string---json
} catch (error) {
console.error(error);
}
if (!Object.keys(filterJson).includes(`${value}`)) {
return [
false,
t('views.ne.neConfig.requireEnum', { display }),
];
}
}
break;
case 'bool':
// filter: '{"0":"false", "1":"true"}'
if (filter && filter.indexOf('{') === 1) {
let filterJson: Record<string, any> = {};
try {
filterJson = JSON.parse(filter); //string---json
} catch (error) {
console.error(error);
}
if (!Object.values(filterJson).includes(`${value}`)) {
return [
false,
t('views.ne.neConfig.requireBool', { display }),
];
}
}
break;
case 'string':
// filter: "0~128"
// 字符串长度判断
if (filter && filter.indexOf('~') !== -1) {
try {
const filterArr = filter.split('~');
let rule = new RegExp(
'^\\S{' + filterArr[0] + ',' + filterArr[1] + '}$'
);
if (!rule.test(value)) {
return [
false,
t('views.ne.neConfig.requireString', {
display,
}),
];
}
} catch (error) {
console.error(error);
}
}
// 字符串http判断
if (value.startsWith('http')) {
try {
if (!validURL(value)) {
return [
false,
t('views.ne.neConfig.requireString', {
display,
}),
];
}
} catch (error) {
console.error(error);
}
}
break;
case 'regex':
// filter: "^[0-9]{3}$"
if (filter) {
try {
let regex = new RegExp(filter);
if (!regex.test(value)) {
return [
false,
t('views.ne.neConfig.requireString', {
display,
}),
];
}
} catch (error) {
console.error(error);
}
}
break;
default:
return [
false,
t('views.ne.neConfig.requireUn', { display }),
];
}
return result;
}
/**upfId可选择 */
const smfByUPFIdOptions = ref<{ value: string; label: string }[]>([]);
/**加载smf配置的upfId */
function smfByUPFIdLoadData(neId: string) {
getNeConfigData({
neType: 'SMF',
neId: neId,
paramName: 'upfConfig',
}).then(res => {
smfByUPFIdOptions.value = [];
for (const s of res.data) {
smfByUPFIdOptions.value.push({
value: s.id,
label: s.id,
});
}
});
}
return {
ruleVerification,
smfByUPFIdLoadData,
smfByUPFIdOptions,
};
}

942
src/views/ne/neConfig/index.vue Normal file
View File

@@ -0,0 +1,942 @@
<script setup lang="ts">
import { reactive, ref, onMounted, toRaw, watch } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib';
import { DataNode } from 'ant-design-vue/lib/tree';
import useI18n from '@/hooks/useI18n';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo';
import useOptions from './hooks/useOptions';
import useConfigList from './hooks/useConfigList';
import useConfigArray from './hooks/useConfigArray';
import useConfigArrayChild from './hooks/useConfigArrayChild';
import { getAllNeConfig, getNeConfigData } from '@/api/ne/neConfig';
const neInfoStore = useNeInfoStore();
const { t } = useI18n();
const { ruleVerification, smfByUPFIdLoadData, smfByUPFIdOptions } = useOptions({
t,
});
/**网元参数 */
let neCascaderOptions = ref<Record<string, any>[]>([]);
/**网元类型选择 type,id */
let neTypeSelect = ref<string[]>(['', '']);
/**左侧导航是否可收起 */
let collapsible = ref<boolean>(true);
/**改变收起状态 */
function changeCollapsible() {
collapsible.value = !collapsible.value;
}
/**对象信息状态类型 */
type TreeStateType = {
/**网元 loading */
loading: boolean;
/**网元配置 tree */
data: DataNode[];
/**选择对应Node一级 tree */
selectNode: {
title: string;
key: string;
// 可选属性数据
paramName: string;
paramDisplay: string;
paramType: string;
paramPerms: string[];
paramData: Record<string, any>[];
};
/**选择 loading */
selectLoading: boolean;
};
let treeState: TreeStateType = reactive({
loading: true,
data: [],
selectNode: {
paramName: '',
paramDisplay: '',
paramType: '',
paramPerms: [],
paramData: [],
// 树形节点需要有
title: '',
key: '',
},
selectLoading: true,
});
/**查询可选命令列表 */
function fnSelectConfigNode(_: any, info: any) {
const { key } = info.node;
if (treeState.selectNode.paramName == key) {
return;
}
fnActiveConfigNode(key);
}
/**列表项点击监听 */
function fnActiveConfigNode(key: string | number) {
listState.data = [];
arrayState.data = [];
treeState.selectLoading = true;
if (key === '#') {
key = treeState.selectNode.paramName;
} else {
treeState.selectNode.paramName = key as string;
}
const param = treeState.data.find(item => item.key === key);
if (!param) {
message.warning({
content: t('common.noData'),
duration: 3,
});
return;
}
treeState.selectNode = JSON.parse(JSON.stringify(param));
// 获取网元端的配置数据
getNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: key,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
const ruleArr = param.paramData;
const dataArr = res.data;
if (param.paramType === 'list') {
// 列表项数据
const dataList = [];
for (const item of dataArr) {
for (const key in item) {
// 规则为准
for (const rule of ruleArr) {
if (rule['name'] === key) {
const ruleItem = Object.assign(rule, {
optional: 'true',
value: item[key],
});
dataList.push(ruleItem);
break;
}
}
}
}
listState.data = dataList;
tablePagination.current = 1;
listEditClose();
}
if (param.paramType === 'array') {
// 列表项数据
const dataArray = [];
for (const item of dataArr) {
const index = item['index'];
let record: Record<string, any>[] = [];
for (const key in item) {
// 规则为准
for (const rule of ruleArr) {
if (rule['name'] === key) {
const ruleItem = Object.assign({ optional: 'true' }, rule, {
value: item[key],
});
record.push(ruleItem);
break;
}
}
}
dataArray.push({ title: `Index-${index}`, key: index, record });
}
arrayState.data = dataArray;
// 无数据时，用于新增
arrayState.dataRule = { title: `Index-0`, key: 0, record: ruleArr };
// 列表数据
const columnsData: Record<string, any>[] = [];
for (const v of arrayState.data) {
const row: Record<string, any> = {};
for (const item of v.record) {
row[item.name] = item;
}
columnsData.push(row);
}
arrayState.columnsData = columnsData;
// 列表字段
const columns: Record<string, any>[] = [];
for (const rule of arrayState.dataRule.record) {
columns.push({
title: rule.display,
dataIndex: rule.name,
align: 'left',
resizable: true,
width: 150,
minWidth: 100,
maxWidth: 350,
});
}
columns.push({
title: t('common.operate'),
dataIndex: 'index',
key: 'index',
align: 'center',
fixed: 'right',
width: 100,
});
arrayState.columns = columns;
tablePagination.current = 1;
arrayEditClose();
}
setTimeout(() => {
treeState.selectLoading = false;
}, 300);
} else {
message.warning({
content: `${param.paramDisplay} ${t(
'views.configManage.configParamForm.noConfigData'
)}`,
duration: 3,
});
}
});
}
/**查询配置可选属性值列表 */
function fnGetNeConfig() {
const neType = neTypeSelect.value[0];
if (!neType) {
message.warning({
content: t('views.configManage.configParamForm.neTypePleace'),
duration: 3,
});
return;
}
treeState.loading = true;
// 获取数据
getAllNeConfig(neType).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
const arr = [];
for (const item of res.data) {
let paramPerms: string[] = [];
if (item.paramPerms) {
paramPerms = item.paramPerms.split(',');
} else {
paramPerms = ['post', 'put', 'delete'];
}
arr.push({
...item,
children: undefined,
title: item.paramDisplay,
key: item.paramName,
paramPerms,
});
}
treeState.data = arr;
treeState.loading = false;
// 取首个tag
if (res.data.length > 0) {
const item = JSON.parse(JSON.stringify(treeState.data[0]));
treeState.selectNode = item;
treeState.selectLoading = false;
fnActiveConfigNode(item.key);
}
}
});
}
/**对话框对象信息状态类型 */
type ModalStateType = {
/**添加框是否显示 */
visible: boolean;
/**标题 */
title: string;
/**表单数据 */
from: Record<string, any>;
/**确定按钮 loading */
confirmLoading: boolean;
/**项类型 */
type: 'arrayAdd' | 'arrayEdit' | 'arrayChildAdd' | 'arrayChildEdit';
/**项Key */
key: string | number;
/**项数据 */
data: Record<string, any>[];
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visible: false,
title: 'Item',
from: {},
confirmLoading: false,
type: 'arrayAdd',
key: '',
data: [],
});
/**
* 对话框弹出确认执行函数
* 进行表达规则校验
*/
function fnModalOk() {
const from = toRaw(modalState.from);
if (modalState.type === 'arrayAdd') {
arrayAddOk(from);
}
if (modalState.type === 'arrayEdit') {
arrayEditOk(from);
}
if (modalState.type === 'arrayChildAdd') {
arrayChildAddOk(from);
}
if (modalState.type === 'arrayChildEdit') {
arrayChildEditOk(from);
}
}
/**
* 对话框弹出关闭执行函数
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visible = false;
modalState.from = {};
modalState.type = 'arrayAdd';
modalState.key = '';
modalState.data = [];
}
// 监听新增编辑弹窗
watch(
() => modalState.visible,
val => {
// SMF需要选择配置的UPF id
if (val && neTypeSelect.value[0] === 'SMF') {
smfByUPFIdLoadData(neTypeSelect.value[1]);
}
}
);
const { tablePagination, listState, listEdit, listEditClose, listEditOk } =
useConfigList({ t, treeState, neTypeSelect, ruleVerification });
const {
arrayState,
arrayEdit,
arrayEditClose,
arrayEditOk,
arrayDelete,
arrayAdd,
arrayAddOk,
arrayInitEdit,
arrayInitAdd,
} = useConfigArray({
t,
treeState,
neTypeSelect,
fnActiveConfigNode,
ruleVerification,
modalState,
fnModalCancel,
});
const {
arrayChildState,
arrayChildExpand,
arrayChildEdit,
arrayChildEditOk,
arrayChildDelete,
arrayChildAdd,
arrayChildAddOk,
} = useConfigArrayChild({
t,
treeState,
neTypeSelect,
fnActiveConfigNode,
ruleVerification,
modalState,
arrayState,
arrayInitEdit,
arrayInitAdd,
arrayEditClose,
});
onMounted(() => {
// 获取网元网元列表
neInfoStore.fnNelist().then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.data.length > 0) {
// 过滤不可用的网元
neCascaderOptions.value = neInfoStore.getNeSelectOtions.filter(
(item: any) => {
return !['OMC', 'LMF', 'NEF'].includes(item.value);
}
);
if (neCascaderOptions.value.length === 0) {
message.warning({
content: t('common.noData'),
duration: 2,
});
return;
}
// 默认选择AMF
const item = neCascaderOptions.value.find(s => s.value === 'AMF');
if (item && item.children) {
const info = item.children[0];
neTypeSelect.value = [info.neType, info.neId];
} else {
const info = neCascaderOptions.value[0].children[0];
neTypeSelect.value = [info.neType, info.neId];
}
fnGetNeConfig();
}
} else {
message.warning({
content: t('common.noData'),
duration: 2,
});
}
});
});
</script>
<template>
<PageContainer>
<a-row :gutter="16">
<a-col
:lg="6"
:md="6"
:xs="24"
style="margin-bottom: 24px"
v-show="collapsible"
>
<!-- 网元类型 -->
<a-card size="small" :bordered="false" :loading="treeState.loading">
<template #title>
{{ t('views.configManage.configParamForm.treeTitle') }}
</template>
<a-form layout="vertical" autocomplete="off">
<a-form-item name="neId ">
<a-cascader
v-model:value="neTypeSelect"
:options="neCascaderOptions"
:allow-clear="false"
@change="fnGetNeConfig"
/>
</a-form-item>
<a-form-item name="listeningPort">
<a-tree
:tree-data="treeState.data"
:selected-keys="[treeState.selectNode.paramName]"
@select="fnSelectConfigNode"
>
</a-tree>
</a-form-item>
</a-form>
</a-card>
</a-col>
<a-col :lg="collapsible ? 18 : 24" :md="collapsible ? 18 : 24" :xs="24">
<a-card
size="small"
:bordered="false"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:loading="treeState.selectLoading"
>
<template #title>
<a-button
type="text"
size="small"
@click.prevent="changeCollapsible()"
>
<template #icon>
<MenuFoldOutlined v-show="collapsible" />
<MenuUnfoldOutlined v-show="!collapsible" />
</template>
</a-button>
<a-typography-text strong v-if="treeState.selectNode.paramDisplay">
{{ treeState.selectNode.paramDisplay }}
</a-typography-text>
<a-typography-text type="danger" v-else>
{{ t('views.configManage.configParamForm.treeSelectTip') }}
</a-typography-text>
</template>
<template #extra>
<a-space :size="8" align="center" v-show="!treeState.selectLoading">
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button
type="default"
size="small"
@click.prevent="fnActiveConfigNode('#')"
>
<template #icon>
<ReloadOutlined />
</template>
</a-button>
</a-tooltip>
</a-space>
</template>
<!-- 单列表格列表 -->
<a-table
v-if="treeState.selectNode.paramType === 'list'"
class="table"
row-key="name"
:size="listState.size"
:columns="listState.columns"
:data-source="listState.data"
:pagination="tablePagination"
:bordered="true"
:scroll="{ x: true, y: '500px' }"
>
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'value'">
<a-tooltip placement="topLeft">
<template #title v-if="record.comment">
{{ record.comment }}
</template>
<div class="editable-cell">
<div
v-if="
listState.editRecord['display'] === record['display']
"
class="editable-cell__input-wrapper"
>
<a-input-number
v-if="record['type'] === 'int'"
v-model:value="listState.editRecord['value']"
:disabled="listState.confirmLoading"
style="width: 100%"
></a-input-number>
<a-switch
v-else-if="record['type'] === 'bool'"
v-model:checked="listState.editRecord['value']"
:checked-children="t('common.switch.open')"
:un-checked-children="t('common.switch.shut')"
:disabled="listState.confirmLoading"
></a-switch>
<a-select
v-else-if="record['type'] === 'enum'"
v-model:value="listState.editRecord['value']"
:allow-clear="true"
:disabled="listState.confirmLoading"
style="width: 100%"
>
<a-select-option
:value="+v"
:key="+v"
v-for="(k, v) in JSON.parse(record['filter'])"
>
{{ k }}
</a-select-option>
</a-select>
<a-input
v-else
v-model:value="listState.editRecord['value']"
:disabled="listState.confirmLoading"
></a-input>
<a-space
:size="8"
align="center"
direction="horizontal"
style="margin-left: 18px"
>
<a-tooltip placement="bottomRight">
<template #title> {{ t('common.ok') }} </template>
<a-popconfirm
:title="
t(
'views.configManage.configParamForm.editOkTip',
{ num: record['display'] }
)
"
placement="topRight"
:disabled="listState.confirmLoading"
@confirm="listEditOk()"
>
<a-button
type="text"
class="editable-cell__icon-edit"
:disabled="listState.confirmLoading"
>
<template #icon>
<CheckOutlined />
</template>
</a-button>
</a-popconfirm>
</a-tooltip>
<a-tooltip placement="bottomRight">
<template #title> {{ t('common.cancel') }} </template>
<a-button
type="text"
class="editable-cell__icon-edit"
:disabled="listState.confirmLoading"
@click.prevent="listEditClose()"
>
<template #icon>
<CloseOutlined />
</template>
</a-button>
</a-tooltip>
</a-space>
</div>
<div
v-else
class="editable-cell__text-wrapper"
@dblclick="listEdit(record)"
>
<template v-if="record['type'] === 'enum'">
{{ JSON.parse(record['filter'])[text] }}
</template>
<template v-else>{{ `${text}` || '&nbsp;' }}</template>
<EditOutlined
class="editable-cell__icon"
@click="listEdit(record)"
style="margin-left: 18px"
v-if="
!['read-only', 'read', 'ro'].includes(
record.access
) && !listState.confirmLoading
"
/>
</div>
</div>
</a-tooltip>
</template>
</template>
</a-table>
<!-- array类型 -->
<template v-if="treeState.selectNode.paramType === 'array'">
<a-table
class="table"
row-key="index"
:columns="treeState.selectNode.paramPerms.includes('get') ? arrayState.columnsDnd.filter((s:any)=>s.key !== 'index') : arrayState.columnsDnd"
:data-source="arrayState.columnsData"
:size="arrayState.size"
:pagination="tablePagination"
:bordered="true"
:scroll="{ x: arrayState.columnsDnd.length * 200, y: 480 }"
@resizeColumn="(w:number, col:any) => (col.width = w)"
:show-expand-column="false"
v-model:expanded-row-keys="arrayState.arrayChildExpandKeys"
>
<!-- 多列新增操作 -->
<template #title>
<a-space :size="16" align="center">
<a-button
type="primary"
@click.prevent="arrayAdd()"
size="small"
v-if="treeState.selectNode.paramPerms.includes('post')"
>
<template #icon> <PlusOutlined /> </template>
{{ t('common.addText') }}
</a-button>
<TableColumnsDnd
type="ghost"
:cache-id="treeState.selectNode.key"
:columns="treeState.selectNode.paramPerms.includes('get') ? [...arrayState.columns.filter((s:any)=>s.key !== 'index')] : arrayState.columns"
v-model:columns-dnd="arrayState.columnsDnd"
></TableColumnsDnd>
</a-space>
</template>
<!-- 多列数据渲染 -->
<template #bodyCell="{ column, text, record }">
<template v-if="column?.key === 'index'">
<a-space :size="16" align="center">
<a-tooltip
v-if="treeState.selectNode.paramPerms.includes('put')"
>
<template #title>{{ t('common.editText') }}</template>
<a-button type="link" @click.prevent="arrayEdit(text)">
<template #icon><FormOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip
v-if="treeState.selectNode.paramPerms.includes('delete')"
>
<template #title>{{ t('common.deleteText') }}</template>
<a-button type="link" @click.prevent="arrayDelete(text)">
<template #icon><DeleteOutlined /></template>
</a-button>
</a-tooltip>
</a-space>
</template>
<template v-else-if="text">
<a-tooltip placement="topLeft">
<template #title v-if="text.comment">
{{ text.comment }}
</template>
<div class="editable-cell">
<template v-if="text.array">
<a-button
type="default"
size="small"
@click.prevent="
arrayChildExpand(record['index'], text)
"
>
<template #icon><BarsOutlined /></template>
{{
t('views.configManage.configParamForm.arrayMore')
}}
</a-button>
<!--特殊字段拓展显示-->
<span
v-if="
text.name === 'dnnList' && Array.isArray(text.value)
"
>
({{
text.value.length > 4
? `${text.value
.slice(0, 3)
.map((s: any) => s.dnn)
.join()}...${text.value.length}`
: text.value.map((s: any) => s.dnn).join()
}})
</span>
</template>
<div v-else class="editable-cell__text-wrapper">
<template v-if="text['type'] === 'enum'">
{{ JSON.parse(text['filter'])[text.value] }}
</template>
<template v-else>
{{ `${text.value}` || '&nbsp;' }}
</template>
</div>
</div>
</a-tooltip>
</template>
</template>
<!-- 多列嵌套类型 -->
<template #expandedRowRender>
<a-table
class="table"
row-key="index"
:columns="arrayChildState.columnsDnd"
:data-source="arrayChildState.columnsData"
:size="arrayChildState.size"
:pagination="tablePagination"
:bordered="true"
:scroll="{
x: arrayChildState.columnsDnd.length * 200,
y: 200,
}"
@resizeColumn="(w:number, col:any) => (col.width = w)"
>
<template #title>
<a-space :size="16" align="center">
<a-button
type="primary"
@click.prevent="arrayChildAdd"
size="small"
>
<template #icon> <PlusOutlined /> </template>
{{ t('common.addText') }} {{ arrayChildState.title }}
</a-button>
<TableColumnsDnd
type="ghost"
:cache-id="`${treeState.selectNode.key}:${arrayChildState.loc}`"
:columns="[...arrayChildState.columns]"
v-model:columns-dnd="arrayChildState.columnsDnd"
v-if="arrayChildState.loc"
></TableColumnsDnd>
</a-space>
</template>
<template #bodyCell="{ column, text, record }">
<template v-if="column?.key === 'index'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.editText') }}</template>
<a-button
type="link"
@click.prevent="arrayChildEdit(text)"
>
<template #icon><FormOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>
{{ t('common.deleteText') }}
</template>
<a-button
type="link"
@click.prevent="arrayChildDelete(text)"
>
<template #icon><DeleteOutlined /></template>
</a-button>
</a-tooltip>
</a-space>
</template>
<template v-else-if="text">
<a-tooltip placement="topLeft">
<template #title v-if="text.comment">
{{ text.comment }}
</template>
<div class="editable-cell">
<template v-if="text.array">
<a-button type="default" size="small">
<template #icon><BarsOutlined /></template>
{{
t(
'views.configManage.configParamForm.arrayMore'
)
}}
</a-button>
</template>
<div v-else>
<template v-if="text['type'] === 'enum'">
{{ JSON.parse(text['filter'])[text.value] }}
</template>
<template v-else>
{{ `${text.value}` || '&nbsp;' }}
</template>
</div>
</div>
</a-tooltip>
</template>
</template>
</a-table>
</template>
</a-table>
</template>
</a-card>
</a-col>
</a-row>
<!-- 新增框或修改框 -->
<ProModal
:drag="true"
:width="800"
:destroyOnClose="true"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visible"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
@cancel="fnModalCancel"
>
<a-form
class="form"
layout="horizontal"
autocomplete="off"
:validate-on-rule-change="false"
:validateTrigger="[]"
:label-col="{ span: 6 }"
:labelWrap="true"
>
<a-form-item
v-for="item in modalState.data"
:label="item.display"
:name="item.name"
:required="item.optional === 'false'"
style="margin-bottom: 4px"
>
<a-tooltip placement="topLeft">
<template #title v-if="item.comment">
{{ item.comment }}
</template>
<div>
<div
v-if="
!Array.isArray(item.array) &&
modalState.from[item.name] !== undefined
"
>
<!-- 特殊SMF-upfid选择 -->
<a-select
v-if="
neTypeSelect[0] === 'SMF' &&
modalState.from[item.name]['name'] === 'upfId'
"
v-model:value="modalState.from[item.name]['value']"
:options="smfByUPFIdOptions"
:disabled="['read-only', 'read', 'ro'].includes(item.access)"
:allow-clear="true"
style="width: 100%"
>
</a-select>
<!-- 常规 -->
<a-input-number
v-else-if="item['type'] === 'int'"
v-model:value="modalState.from[item.name]['value']"
:disabled="['read-only', 'read', 'ro'].includes(item.access)"
style="width: 100%"
></a-input-number>
<a-switch
v-else-if="item['type'] === 'bool'"
v-model:checked="modalState.from[item.name]['value']"
:checked-children="t('common.switch.open')"
:un-checked-children="t('common.switch.shut')"
:disabled="['read-only', 'read', 'ro'].includes(item.access)"
></a-switch>
<a-select
v-else-if="item['type'] === 'enum'"
v-model:value="modalState.from[item.name]['value']"
:disabled="['read-only', 'read', 'ro'].includes(item.access)"
:allow-clear="true"
style="width: 100%"
>
<a-select-option
:value="+v"
:key="+v"
v-for="(k, v) in JSON.parse(item['filter'])"
>
{{ k }}
</a-select-option>
</a-select>
<a-input
v-else
v-model:value="modalState.from[item.name]['value']"
:disabled="['read-only', 'read', 'ro'].includes(item.access)"
></a-input>
</div>
<div v-else>
{{ `${item.value || '&nbsp;'}` }}
</div>
</div>
</a-tooltip>
</a-form-item>
</a-form>
</ProModal>
</PageContainer>
</template>
<style lang="less" scoped>
.editable-cell {
&__icon {
display: none;
cursor: pointer;
}
&__icon:hover {
color: var(--ant-primary-color);
}
&__icon-edit:hover {
color: var(--ant-primary-color);
}
&__text-wrapper {
font-size: 16px;
color: #333;
}
&__text-wrapper:hover &__icon {
display: inline-block;
}
&__input-wrapper {
display: flex;
justify-content: start;
align-items: center;
}
}
</style>

13
src/views/ne/neInfo/components/OAMModal.vue
View File

@@ -42,6 +42,7 @@ let modalState: ModalStateType = reactive({
title: 'OAM Configuration',
sync: true,
from: {
omcIP: '',
oamEnable: true,
oamPort: 33030,
snmpEnable: true,
@@ -77,6 +78,7 @@ function fnModalVisibleByTypeAndId(neType: string, neId: string) {
if (res.code === RESULT_CODE_SUCCESS) {
const data = res.data;
Object.assign(modalState.from, {
omcIP: data.oamConfig[data.oamConfig.ipType],
oamEnable: data.oamConfig.enable,
oamPort: data.oamConfig.port,
snmpEnable: data.snmpConfig.enable,
@@ -224,6 +226,17 @@ watch(
</a-form-item>
</a-col>
</a-row>
<a-form-item
:label="t('views.ne.neInfo.oam.omcIP')"
name="omcIP"
:label-col="{ span: 6 }"
:labelWrap="true"
>
<a-input
v-model:value="modalState.from.omcIP"
:maxlength="128"
></a-input>
</a-form-item>
</a-collapse-panel>
<a-collapse-panel header="SNMP">
<a-row :gutter="16">

5
src/views/ne/neInfo/index.vue
View File

@@ -625,7 +625,10 @@ onMounted(() => {
<DeleteOutlined />
{{ t('common.deleteText') }}
</a-menu-item>
<a-menu-item key="oam">
<a-menu-item
key="oam"
v-if="!['OMC'].includes(record.neType)"
>
<FileTextOutlined />
{{ t('views.ne.common.oam') }}
</a-menu-item>

203
src/views/system/quick-start/components/NeInfoConfig.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { Modal, message } from 'ant-design-vue/lib';
import { onMounted, reactive, ref, toRaw } from 'vue';
import { nextTick, onMounted, reactive, ref, toRaw } from 'vue';
import {
addNeInfo,
delNeInfo,
@@ -15,6 +15,7 @@ import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
import { fnToStepName } from '../hooks/useStep';
import useI18n from '@/hooks/useI18n';
import useDictStore from '@/store/modules/dict';
const { getDict } = useDictStore();
const { t } = useI18n();
@@ -97,13 +98,6 @@ let tableState: any = reactive({
/**表格字段列 */
let tableColumns: any = [
{
title: t('common.operate'),
dataIndex: 'operation',
key: 'operation',
align: 'left',
width: 100,
},
{
title: t('views.ne.common.neType'),
dataIndex: 'neType',
@@ -132,6 +126,13 @@ let tableColumns: any = [
align: 'left',
width: 100,
},
{
title: t('common.operate'),
dataIndex: 'operation',
key: 'operation',
align: 'left',
width: 90,
},
];
/**
@@ -394,31 +395,70 @@ function fnStepPrev() {
});
}
/**下一步操作 先全部集体发过去请求新增 */
/**下一步操作 */
function fnStepNext(stepName: 'NeInfoConfigPara5G') {
if (stepName === 'NeInfoConfigPara5G') {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.system.quickStart.stepNeInfoStepNext'),
okButtonProps: {
loading: tabState.confirmLoading,
},
onOk() {
tabState.confirmLoading = true;
// 使用 Promise.allSettled 等待所有 Promise 完成
Promise.allSettled(
tabState.panes.map((item: any) =>
item.id ? updateNeInfo(item) : addNeInfo(item)
)
).finally(() => {
tabState.confirmLoading = false;
fnToStepName('NeInfoConfigPara5G');
});
},
});
}
}
const editableData: any = reactive({});
const inputField = ref<HTMLInputElement | null>(null); // 定义输入框的 ref
//可编辑行
function edit(key: string) {
// 查找相关的项
const itemToEdit = tabState.panes.find((item: any) => key === item.key);
editableData[key] = { ...itemToEdit };
//聚焦input框
nextTick(() => {
if (inputField.value) {
inputField.value.focus();
}
});
}
//脱离input框时即保存
function save(key: string) {
const from = toRaw(tabState.panes.filter((item: any) => key === item.key)[0]);
if (editableData[key].ip !== from.ip) {
const fromData = Object.assign(from, editableData[key]);
//同步hosts下addr
for (const host of fromData.hosts) {
host.addr = fromData.ip;
}
updateNeInfo(fromData)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 3,
});
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
fnModalCancel();
});
}
//退出编辑框
delete editableData[key];
}
/**获取列表 */
function fnGetList() {
listAllNeInfo({
@@ -426,13 +466,15 @@ function fnGetList() {
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
tabState.panes = [];
for (const item of res.data) {
if (item.neType === 'OMC' || !Array.isArray(item.hosts)) continue;
res.data.forEach((item: any, index: any) => {
if (item.neType === 'OMC' || !Array.isArray(item.hosts)) return;
item.key = index + 1;
tabState.panes.push(item);
}
});
}
});
}
//
onMounted(() => {
// 初始字典数据
@@ -471,7 +513,7 @@ onMounted(() => {
:scroll="{ y: 'calc(100vh - 480px)' }"
@resizeColumn="(w:number, col:any) => (col.width = w)"
>
<template #bodyCell="{ column, record }">
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'operation'">
<a-space :size="8" align="center">
<a-tooltip>
@@ -495,8 +537,55 @@ onMounted(() => {
</a-tooltip>
</a-space>
</template>
<template v-if="column.dataIndex === 'ip'">
<div class="editable-cell">
<div
v-if="editableData[record.key]"
class="editable-cell-input-wrapper"
>
<a-input
ref="inputField"
v-model:value="editableData[record.key].ip"
@blur="save(record.key)"
/>
</div>
<div
v-else
class="editable-cell-text-wrapper"
@dblclick="edit(record.key)"
>
{{ text || ' ' }}
<edit-outlined
class="editable-cell-icon"
@click="edit(record.key)"
/>
</div>
</div>
</template>
</template>
</a-table>
<div class="ne-oper">
<a-space direction="horizontal" :size="18">
<a-button @click="fnStepPrev()" :disabled="tabState.confirmLoading">
{{ t('views.system.quickStart.exit') }}
</a-button>
<!-- 添加网元 -->
<a-button type="primary" ghost @click.prevent="fnModalVisibleByEdit()">
<template #icon><PlusOutlined /></template>
{{ t('common.addText') }}
</a-button>
<a-button
type="primary"
@click="fnStepNext('NeInfoConfigPara5G')"
:loading="tabState.confirmLoading"
>
{{ t('views.system.quickStart.stepNext') }}
</a-button>
</a-space>
</div>
</div>
<!-- 新增框或修改框 -->
<ProModal
:drag="true"
@@ -761,29 +850,6 @@ onMounted(() => {
</a-form-item> -->
</a-form>
</ProModal>
<div class="ne-oper">
<a-space direction="horizontal" :size="18">
<!-- 添加网元 -->
<a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
<template #icon><PlusOutlined /></template>
{{ t('common.addText') }}
</a-button>
<a-button @click="fnStepPrev()" :disabled="tabState.confirmLoading">
{{ t('views.system.quickStart.exit') }}
</a-button>
<a-button
type="primary"
@click="fnStepNext('NeInfoConfigPara5G')"
:loading="tabState.confirmLoading"
>
{{ t('views.system.quickStart.stepNext') }}
</a-button>
</a-space>
</div>
</div>
</template>
<style lang="less" scoped>
@@ -807,4 +873,45 @@ onMounted(() => {
text-align: end;
}
}
.editable-cell {
position: relative;
.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
padding-right: 24px;
}
.editable-cell-text-wrapper {
padding: 5px 24px 5px 5px;
}
.editable-cell-icon,
.editable-cell-icon-check {
position: absolute;
right: 0;
width: 20px;
cursor: pointer;
}
.editable-cell-icon {
margin-top: 4px;
display: none;
}
.editable-cell-icon-check {
line-height: 28px;
}
.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
color: #108ee9;
}
.editable-add-btn {
margin-bottom: 8px;
}
}
.editable-cell:hover .editable-cell-icon {
display: inline-block;
}
</style>

15
src/views/tool/terminal/index.vue
View File

@@ -226,10 +226,11 @@ function fnTabClose(id: string) {
<template>
<PageContainer>
<a-card :bordered="false" :body-style="{ padding: '12px' }">
<a-card :bordered="false" size="small" :body-style="{ padding: '12px' }">
<a-tabs
class="terminal-tabs"
hide-add
size="small"
tab-position="top"
type="editable-card"
:tab-bar-gutter="8"
@@ -343,7 +344,12 @@ function fnTabClose(id: string) {
<template #title>
{{ t('views.tool.terminal.new') }}
</template>
<a-button type="default" shape="circle" @click="fnTabMenu('new')">
<a-button
type="default"
shape="circle"
size="small"
@click="fnTabMenu('new')"
>
<template #icon><PlusOutlined /></template>
</a-button>
</a-tooltip>
@@ -354,7 +360,7 @@ function fnTabClose(id: string) {
{{ t('views.tool.terminal.more') }}
</template>
<a-dropdown trigger="click" placement="bottomRight">
<a-button type="ghost" shape="circle">
<a-button type="ghost" shape="circle" size="small">
<template #icon><EllipsisOutlined /></template>
</a-button>
<template #overlay>
@@ -385,8 +391,7 @@ function fnTabClose(id: string) {
<style lang="less" scoped>
.pane-box {
padding: 16px;
height: calc(100vh - 320px);
height: calc(100vh - 200px);
overflow-x: hidden;
}
</style>