feat:网元信息快速OAM功能
This commit is contained in:
zhongzm
@@ -590,6 +590,17 @@ export default {
|
||||
kpiTimerPlease: 'Please enter the reporting period (in seconds)',
|
||||
omcIP: 'OMC IP',
|
||||
},
|
||||
quickOam: {
|
||||
title: 'Quick OAM Configuration',
|
||||
selectNe: 'Select NE',
|
||||
omcIP: 'OMC IP',
|
||||
oamPort: 'OAM Port',
|
||||
progress:'Progress',
|
||||
processing:'Progressing',
|
||||
result:'Result',
|
||||
success:'Success',
|
||||
default:'Default',
|
||||
},
|
||||
backConf: {
|
||||
export: 'Config Export',
|
||||
import: 'Config Import',
|
||||
|
||||
@@ -590,6 +590,17 @@ export default {
|
||||
kpiTimerPlease: '请输入上报周期（单位秒）',
|
||||
omcIP: 'OMC IP',
|
||||
},
|
||||
quickOam: {
|
||||
title: '快速OAM配置',
|
||||
selectNe: '选择网元',
|
||||
omcIP: 'OMC IP地址',
|
||||
oamPort: 'OAM端口',
|
||||
progress:'配置进度',
|
||||
processing:'正在处理',
|
||||
result:'操作结果',
|
||||
success:'成功',
|
||||
default:'失败',
|
||||
},
|
||||
backConf: {
|
||||
export: '配置导出',
|
||||
import: '配置导入',
|
||||
|
||||
408
src/views/ne/neInfo/components/QuickOAMModal.vue
Normal file
408
src/views/ne/neInfo/components/QuickOAMModal.vue
Normal file
@@ -0,0 +1,408 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRaw, watch, ref } from 'vue';
|
||||
import { ProModal } from 'antdv-pro-modal';
|
||||
import { message, Form, Progress } from 'ant-design-vue/es';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { getOAMFile, saveOAMFile, serviceNeAction } from '@/api/ne/neInfo';
|
||||
import useNeListStore from '@/store/modules/ne_list';
|
||||
|
||||
const { t } = useI18n();
|
||||
const neListStore = useNeListStore();
|
||||
const emit = defineEmits(['ok', 'cancel', 'update:open']);
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
/**对话框对象信息状态类型 */
|
||||
type ModalStateType = {
|
||||
/**是否显示 */
|
||||
openByEdit: boolean;
|
||||
/**标题 */
|
||||
title: string;
|
||||
/**表单数据 */
|
||||
from: {
|
||||
selectedNeList: string[];
|
||||
omcIP: string;
|
||||
oamPort: number;
|
||||
restart: boolean;
|
||||
};
|
||||
/**确定按钮 loading */
|
||||
confirmLoading: boolean;
|
||||
/**进度显示 */
|
||||
progress: {
|
||||
visible: boolean;
|
||||
current: number;
|
||||
total: number;
|
||||
currentNe: string;
|
||||
};
|
||||
/**操作结果 */
|
||||
results: Array<{
|
||||
neType: string;
|
||||
neId: string;
|
||||
neName: string;
|
||||
success: boolean;
|
||||
message: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
/**对话框对象信息状态 */
|
||||
let modalState: ModalStateType = reactive({
|
||||
openByEdit: false,
|
||||
title: '快速OAM配置',
|
||||
from: {
|
||||
selectedNeList: [],
|
||||
omcIP: '127.0.0.1',
|
||||
oamPort: 33030,
|
||||
restart: false,
|
||||
},
|
||||
confirmLoading: false,
|
||||
progress: {
|
||||
visible: false,
|
||||
current: 0,
|
||||
total: 0,
|
||||
currentNe: '',
|
||||
},
|
||||
results: [],
|
||||
});
|
||||
|
||||
/**对话框内表单属性和校验规则 */
|
||||
const modalStateFrom = Form.useForm(
|
||||
modalState.from,
|
||||
reactive({
|
||||
selectedNeList: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.ne.neInfo.quickOam.selectNe'),
|
||||
},
|
||||
],
|
||||
omcIP: [
|
||||
{
|
||||
required: true,
|
||||
|
||||
},
|
||||
{
|
||||
pattern: /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
|
||||
|
||||
},
|
||||
],
|
||||
oamPort: [
|
||||
{
|
||||
required: true,
|
||||
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
/**获取网元列表选项 */
|
||||
const neOptions = ref<Array<{ label: string; value: string; neType: string; neId: string; neName: string }>>([]);
|
||||
|
||||
/**
|
||||
* 初始化网元选项
|
||||
*/
|
||||
async function initNeOptions() {
|
||||
// 确保网元列表已加载
|
||||
await neListStore.fnNelistRefresh();
|
||||
// 从store获取网元列表，过滤掉OMC类型
|
||||
const neList = neListStore.getNeList.filter((ne: any) => ne.neType !== 'OMC');
|
||||
neOptions.value = neList.map((ne: any) => ({
|
||||
label: `${ne.neType}-${ne.neId} (${ne.neName})`,
|
||||
value: `${ne.neType}@${ne.neId}`,
|
||||
neType: ne.neType,
|
||||
neId: ne.neId,
|
||||
neName: ne.neName,
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* 单个网元OAM配置（复用OAMModal的逻辑）
|
||||
* @param neType 网元类型
|
||||
* @param neId 网元ID
|
||||
* @param omcIP OMC IP地址
|
||||
* @param oamPort OAM端口
|
||||
* @param restart 是否重启网元
|
||||
* @returns Promise<{success: boolean, message: string}>
|
||||
*/
|
||||
async function configureSingleNeOAM(neType: string, neId: string, omcIP: string, oamPort: number, restart: boolean = false) {
|
||||
try {
|
||||
// 1. 获取当前OAM配置（复用OAMModal的获取逻辑）
|
||||
const getRes = await getOAMFile(neType, neId);
|
||||
|
||||
if (getRes.code !== RESULT_CODE_SUCCESS) {
|
||||
return {
|
||||
success: false,
|
||||
message: `${getRes.msg}`,
|
||||
};
|
||||
}
|
||||
|
||||
// 2. 构建保存数据（复用OAMModal的数据结构转换逻辑）
|
||||
const data = getRes.data;
|
||||
const ipType = data?.oamConfig?.ipType || 'ipv4';
|
||||
|
||||
const saveContent = {
|
||||
omcIP: omcIP,
|
||||
oamEnable: data?.oamConfig?.enable || false,
|
||||
oamPort: oamPort,
|
||||
snmpEnable: data?.snmpConfig?.enable || false,
|
||||
snmpPort: data?.snmpConfig?.port || 4957,
|
||||
kpiEnable: data?.kpiConfig?.enable || false,
|
||||
kpiTimer: data?.kpiConfig?.timer || 60,
|
||||
};
|
||||
|
||||
// 3. 保存配置（复用OAMModal的保存逻辑）
|
||||
const saveRes = await saveOAMFile({
|
||||
neType,
|
||||
neId,
|
||||
content: saveContent,
|
||||
sync: true,
|
||||
});
|
||||
|
||||
if (saveRes.code === RESULT_CODE_SUCCESS) {
|
||||
// 如果需要重启网元，调用重启服务（复用OAMModal的重启逻辑）
|
||||
if (restart) {
|
||||
try {
|
||||
await serviceNeAction({
|
||||
neType,
|
||||
neId,
|
||||
action: 'restart',
|
||||
});
|
||||
} catch (restartError: any) {
|
||||
return {
|
||||
success: true,
|
||||
message: `${restartError.message || restartError}`,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: restart ? `${t('views.ne.neInfo.quickOam.success')}` : `${t('views.ne.neInfo.quickOam.success')}`,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
success: false,
|
||||
message: `${saveRes.msg}`,
|
||||
};
|
||||
}
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
message: `${error.message || error}`,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出确认执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
async function fnModalOk() {
|
||||
try {
|
||||
await modalStateFrom.validate();
|
||||
|
||||
modalState.confirmLoading = true;
|
||||
modalState.progress.visible = true;
|
||||
modalState.progress.current = 0;
|
||||
modalState.progress.total = modalState.from.selectedNeList.length;
|
||||
modalState.results = [];
|
||||
|
||||
const { omcIP, oamPort, restart } = modalState.from;
|
||||
|
||||
// 循环处理每个选中的网元
|
||||
for (let i = 0; i < modalState.from.selectedNeList.length; i++) {
|
||||
const neInfo = modalState.from.selectedNeList[i];
|
||||
const [neType, neId] = neInfo.split('@');
|
||||
const neName = neOptions.value.find(opt => opt.value === neInfo)?.neName || neId;
|
||||
|
||||
modalState.progress.current = i + 1;
|
||||
modalState.progress.currentNe = `${neType}-${neId}`;
|
||||
|
||||
// 调用单个网元配置函数
|
||||
const result = await configureSingleNeOAM(neType, neId, omcIP, oamPort, restart);
|
||||
|
||||
modalState.results.push({
|
||||
neType,
|
||||
neId,
|
||||
neName,
|
||||
success: result.success,
|
||||
message: result.message,
|
||||
});
|
||||
}
|
||||
|
||||
// 显示操作结果
|
||||
const successCount = modalState.results.filter(r => r.success).length;
|
||||
const failCount = modalState.results.length - successCount;
|
||||
|
||||
if (failCount === 0) {
|
||||
message.success(`${t('views.ne.neInfo.quickOam.success')} ${successCount} `, 5);
|
||||
} else {
|
||||
message.warning(`${t('views.ne.neInfo.quickOam.success')} ${successCount} ，${t('views.ne.neInfo.quickOam.default')} ${failCount} `, 5);
|
||||
}
|
||||
|
||||
emit('ok');
|
||||
fnModalCancel();
|
||||
} catch (error: any) {
|
||||
message.error(t('common.errorFields', { num: error.errorFields?.length || 0 }), 3);
|
||||
} finally {
|
||||
modalState.confirmLoading = false;
|
||||
modalState.progress.visible = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出关闭执行函数
|
||||
*/
|
||||
function fnModalCancel() {
|
||||
modalState.openByEdit = false;
|
||||
modalState.confirmLoading = false;
|
||||
modalState.progress.visible = false;
|
||||
modalState.progress.current = 0;
|
||||
modalState.progress.total = 0;
|
||||
modalState.progress.currentNe = '';
|
||||
modalState.results = [];
|
||||
modalStateFrom.resetFields();
|
||||
emit('cancel');
|
||||
emit('update:open', false);
|
||||
}
|
||||
|
||||
/**监听是否显示，初始数据 */
|
||||
watch(
|
||||
() => props.open,
|
||||
val => {
|
||||
if (val) {
|
||||
initNeOptions();
|
||||
modalState.title = t('views.ne.neInfo.quickOam.title');
|
||||
modalState.openByEdit = true;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ProModal
|
||||
:drag="true"
|
||||
:destroyOnClose="true"
|
||||
:body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
|
||||
:keyboard="false"
|
||||
:mask-closable="false"
|
||||
:open="modalState.openByEdit"
|
||||
:title="modalState.title"
|
||||
:confirm-loading="modalState.confirmLoading"
|
||||
:width='500'
|
||||
@ok="fnModalOk"
|
||||
@cancel="fnModalCancel"
|
||||
>
|
||||
<a-form
|
||||
name="modalStateFrom"
|
||||
layout="horizontal"
|
||||
:label-col="{ span: 8 }"
|
||||
:labelWrap="true"
|
||||
>
|
||||
<a-form-item
|
||||
:label="t('views.ne.neInfo.oam.restart')"
|
||||
name="restart"
|
||||
>
|
||||
<a-switch
|
||||
:checked-children="t('common.switch.open')"
|
||||
:un-checked-children="t('common.switch.shut')"
|
||||
v-model:checked="modalState.from.restart"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:label="t('views.ne.neInfo.quickOam.omcIP')"
|
||||
name="omcIP"
|
||||
v-bind="modalStateFrom.validateInfos.omcIP"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="modalState.from.omcIP"
|
||||
:maxlength="128"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:label="t('views.ne.neInfo.quickOam.oamPort')"
|
||||
name="oamPort"
|
||||
v-bind="modalStateFrom.validateInfos.oamPort"
|
||||
>
|
||||
<a-input-number
|
||||
v-model:value="modalState.from.oamPort"
|
||||
:min="3000"
|
||||
:max="65535"
|
||||
:step="1"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:label="t('views.ne.neInfo.quickOam.selectNe')"
|
||||
name="selectedNeList"
|
||||
v-bind="modalStateFrom.validateInfos.selectedNeList"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="modalState.from.selectedNeList"
|
||||
mode="multiple"
|
||||
:options="neOptions"
|
||||
:placeholder="t('common.selectPlease')"
|
||||
:max-tag-count="3"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- 进度显示 -->
|
||||
<div v-if="modalState.progress.visible" style="margin-top: 20px;">
|
||||
<a-divider>{{ t('views.ne.neInfo.quickOam.progress') }}</a-divider>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<span>{{ t('views.ne.neInfo.quickOam.processing') }}: {{ modalState.progress.currentNe }}</span>
|
||||
<span style="float: right;">
|
||||
{{ modalState.progress.current }} / {{ modalState.progress.total }}
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
:percent="Math.round((modalState.progress.current / modalState.progress.total) * 100)"
|
||||
:status="modalState.progress.current === modalState.progress.total ? 'success' : 'active'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 操作结果 -->
|
||||
<div v-if="modalState.results.length > 0" style="margin-top: 20px;">
|
||||
<a-divider>{{ t('views.ne.neInfo.quickOam.result') }}</a-divider>
|
||||
<div style="max-height: 200px; overflow-y: auto;">
|
||||
<div
|
||||
v-for="(result, index) in modalState.results"
|
||||
:key="index"
|
||||
style="margin-bottom: 8px; padding: 8px; border-radius: 4px;"
|
||||
:style="{
|
||||
backgroundColor: result.success ? '#f6ffed' : '#fff2f0',
|
||||
border: `1px solid ${result.success ? '#b7eb8f' : '#ffccc7'}`,
|
||||
}"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span>
|
||||
<a-icon
|
||||
:type="result.success ? 'check-circle' : 'close-circle'"
|
||||
:style="{ color: result.success ? '#52c41a' : '#ff4d4f', marginRight: '8px' }"
|
||||
/>
|
||||
{{ result.neType }}-{{ result.neId }} ({{ result.neName }})
|
||||
</span>
|
||||
<span :style="{ color: result.success ? '#52c41a' : '#ff4d4f', fontSize: '12px' }">
|
||||
{{ result.message }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ProModal>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-progress-text {
|
||||
color: #1890ff;
|
||||
}
|
||||
</style>
|
||||
@@ -33,6 +33,10 @@ const OAMModal = defineAsyncComponent(
|
||||
const BackConfModal = defineAsyncComponent(
|
||||
() => import('./components/BackConfModal.vue')
|
||||
);
|
||||
// 快速OAM配置
|
||||
const QuickOAMModal = defineAsyncComponent(
|
||||
() => import('./components/QuickOAMModal.vue')
|
||||
);
|
||||
const backConf = ref(); // 引用句柄，取导出函数
|
||||
|
||||
/**字典数据 */
|
||||
@@ -186,6 +190,8 @@ type ModalStateType = {
|
||||
openByBackConf: boolean;
|
||||
/**OAM文件配置框是否显示 */
|
||||
openByOAM: boolean;
|
||||
/**快速OAM配置框是否显示 */
|
||||
openByQuickOAM: boolean;
|
||||
/**新增框或修改框是否显示 */
|
||||
openByEdit: boolean;
|
||||
/**新增框或修改框ID */
|
||||
@@ -201,6 +207,7 @@ type ModalStateType = {
|
||||
let modalState: ModalStateType = reactive({
|
||||
openByBackConf: false,
|
||||
openByOAM: false,
|
||||
openByQuickOAM: false,
|
||||
openByEdit: false,
|
||||
editId: 0,
|
||||
neId: '',
|
||||
@@ -275,6 +282,7 @@ function fnModalEditCancel() {
|
||||
modalState.openByEdit = false;
|
||||
modalState.openByOAM = false;
|
||||
modalState.openByBackConf = false;
|
||||
modalState.openByQuickOAM = false;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -360,6 +368,9 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
|
||||
modalState.neType = row.neType;
|
||||
modalState.openByBackConf = !modalState.openByBackConf;
|
||||
break;
|
||||
case 'quickOAM':
|
||||
modalState.openByQuickOAM = !modalState.openByQuickOAM;
|
||||
break;
|
||||
default:
|
||||
console.warn(type);
|
||||
break;
|
||||
@@ -467,6 +478,14 @@ onMounted(() => {
|
||||
<template #icon><PlusOutlined /></template>
|
||||
{{ t('common.addText') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="default"
|
||||
:loading="modalState.confirmLoading"
|
||||
@click.prevent="fnRecordMore('quickOAM', {})"
|
||||
>
|
||||
<template #icon><SettingOutlined /></template>
|
||||
{{ t('views.ne.neInfo.quickOam.title') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="default"
|
||||
danger
|
||||
@@ -732,6 +751,12 @@ onMounted(() => {
|
||||
:ne-type="modalState.neType"
|
||||
@cancel="fnModalEditCancel"
|
||||
></BackConfModal>
|
||||
|
||||
<!-- 快速OAM配置框 -->
|
||||
<QuickOAMModal
|
||||
v-model:open="modalState.openByQuickOAM"
|
||||
@cancel="fnModalEditCancel"
|
||||
></QuickOAMModal>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user