437 lines
12 KiB
Vue
437 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, onMounted, toRaw } from 'vue';
|
|
import { PageContainer } from 'antdv-pro-layout';
|
|
import { message } from 'ant-design-vue/lib';
|
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
|
import useI18n from '@/hooks/useI18n';
|
|
import { getPara5GFilee, listNeInfo, savePara5GFile } from '@/api/ne/neInfo';
|
|
import useNeInfoStore from '@/store/modules/neinfo';
|
|
const { t } = useI18n();
|
|
|
|
/**对象信息信息状态类型 */
|
|
type StateType = {
|
|
/**保存选择同步到网元窗 */
|
|
visible: boolean;
|
|
/**网元选择 */
|
|
neSelectOtions: any[];
|
|
/**同步到网元 */
|
|
sync: boolean;
|
|
syncNe: string[];
|
|
syncMsg: string;
|
|
/**表单数据 */
|
|
from: Record<string, any>;
|
|
/**确定按钮 loading */
|
|
confirmLoading: boolean;
|
|
};
|
|
|
|
/**对象信息状态 */
|
|
let state: StateType = reactive({
|
|
visible: false,
|
|
neSelectOtions: [],
|
|
sync: false,
|
|
syncNe: [],
|
|
syncMsg: '',
|
|
from: {
|
|
basic: {
|
|
plmnId: {
|
|
mcc: '001',
|
|
mnc: '01',
|
|
},
|
|
tac: '4388',
|
|
snssai: {
|
|
sst: '1',
|
|
sd: '000001',
|
|
},
|
|
dnn_data: 'internet',
|
|
dnn_ims: 'ims',
|
|
},
|
|
external: {
|
|
amfn2_ip: '192.168.5.60',
|
|
upfn3_ip: '192.168.8.190/24',
|
|
upfn3_gw: '192.168.1.1',
|
|
upfn6_ip: '192.168.8.191/24',
|
|
upfn6_gw: '192.168.1.1',
|
|
ue_pool: '10.2.1.0/24',
|
|
},
|
|
sbi: {
|
|
omc_ip: '172.60.5.100',
|
|
ims_ip: '172.60.5.110',
|
|
amf_ip: '172.60.5.120',
|
|
ausf_ip: '172.60.5.130',
|
|
udm_ip: '172.60.5.140',
|
|
adb_ip: '172.60.5.140',
|
|
smf_ip: '172.60.5.150',
|
|
pcf_ip: '172.60.5.160',
|
|
nssf_ip: '172.60.5.170',
|
|
nrf_ip: '172.60.5.180',
|
|
upf_ip: '172.60.5.190',
|
|
mme_ip: '172.60.5.220',
|
|
n3iwf_ip: '172.60.5.230',
|
|
},
|
|
},
|
|
confirmLoading: false,
|
|
});
|
|
|
|
/**对话框弹出确认执行函数*/
|
|
function fnModalOk() {
|
|
if (state.confirmLoading) return;
|
|
state.confirmLoading = true;
|
|
savePara5GFile({
|
|
content: toRaw(state.from),
|
|
syncNe: state.sync ? state.syncNe : [],
|
|
})
|
|
.then(res => {
|
|
if (state.sync) {
|
|
state.syncMsg = res.msg;
|
|
} else {
|
|
message.success('Save Success');
|
|
}
|
|
})
|
|
.finally(() => {
|
|
state.confirmLoading = false;
|
|
});
|
|
}
|
|
|
|
/**对话框弹出关闭执行函数*/
|
|
function fnModalCancel() {
|
|
state.visible = false;
|
|
state.sync = false;
|
|
state.syncNe = [];
|
|
state.syncMsg = '';
|
|
}
|
|
|
|
/**保存文件数据*/
|
|
function fnSaveData() {
|
|
state.visible = true;
|
|
}
|
|
|
|
/**获取文件数据*/
|
|
function fnGetData() {
|
|
state.confirmLoading = true;
|
|
Promise.all([
|
|
getPara5GFilee(),
|
|
listNeInfo({
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
}),
|
|
]).then(resArr => {
|
|
// 已保存的配置
|
|
if (resArr[0].code === RESULT_CODE_SUCCESS) {
|
|
Object.assign(state.from, resArr[0].data);
|
|
}
|
|
// 填充固定网元类型的ip
|
|
if (
|
|
resArr[1].code === RESULT_CODE_SUCCESS &&
|
|
Array.isArray(resArr[1].rows)
|
|
) {
|
|
for (const item of resArr[1].rows) {
|
|
switch (item.neType) {
|
|
case 'IMS':
|
|
state.from.sbi.ims_ip = item.ip;
|
|
break;
|
|
case 'AMF':
|
|
state.from.sbi.amf_ip = item.ip;
|
|
break;
|
|
case 'AUSF':
|
|
state.from.sbi.ausf_ip = item.ip;
|
|
break;
|
|
case 'UDM':
|
|
state.from.sbi.udm_ip = item.ip;
|
|
state.from.sbi.adb_ip = item.ip;
|
|
break;
|
|
case 'SMF':
|
|
state.from.sbi.smf_ip = item.ip;
|
|
break;
|
|
case 'PCF':
|
|
state.from.sbi.pcf_ip = item.ip;
|
|
break;
|
|
case 'NSSF':
|
|
state.from.sbi.nssf_ip = item.ip;
|
|
break;
|
|
case 'NRF':
|
|
state.from.sbi.nrf_ip = item.ip;
|
|
break;
|
|
case 'UPF':
|
|
state.from.sbi.upf_ip = item.ip;
|
|
break;
|
|
case 'N3IWF':
|
|
state.from.sbi.n3iwf_ip = item.ip;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
state.confirmLoading = false;
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
useNeInfoStore()
|
|
.fnNelist()
|
|
.then(res => {
|
|
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
|
for (const row of res.data) {
|
|
state.neSelectOtions.push({
|
|
label: `[${row.neType} ${row.neId}] ${row.neName}`,
|
|
value: `${row.neType}@${row.neId}`,
|
|
});
|
|
}
|
|
} else {
|
|
message.warning({
|
|
content: t('common.noData'),
|
|
duration: 2,
|
|
});
|
|
}
|
|
})
|
|
.finally(() => {
|
|
// 获取文件数据
|
|
fnGetData();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<PageContainer>
|
|
<a-card :bordered="false">
|
|
<!-- 插槽-卡片左侧侧 -->
|
|
<template #title>
|
|
<a-form layout="inline" :label-col="{ span: 6 }" :label-wrap="true">
|
|
<a-form-item label="OMC" name="OMC">
|
|
<a-input
|
|
v-model:value="state.from.sbi.omc_ip"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-form>
|
|
</template>
|
|
|
|
<!-- 插槽-卡片右侧 -->
|
|
<template #extra>
|
|
<a-space :size="8" align="center">
|
|
<a-button
|
|
type="default"
|
|
:disabled="state.confirmLoading"
|
|
@click.prevent="fnGetData()"
|
|
>
|
|
<template #icon><ReloadOutlined /></template>
|
|
Reload
|
|
</a-button>
|
|
<a-button
|
|
type="primary"
|
|
:loading="state.confirmLoading"
|
|
@click="fnSaveData()"
|
|
>
|
|
<template #icon><SaveOutlined /></template>
|
|
Save
|
|
</a-button>
|
|
</a-space>
|
|
</template>
|
|
|
|
<a-form
|
|
name="para5GFileeFrom"
|
|
layout="horizontal"
|
|
:label-col="{ span: 6 }"
|
|
:label-wrap="true"
|
|
>
|
|
<a-divider orientation="left">Basic</a-divider>
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item label="DNN DATA" name="basic.dnn_data">
|
|
<a-input
|
|
v-model:value="state.from.basic.dnn_data"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item label="DNN IMS" name="basic.dnn_ims">
|
|
<a-input
|
|
v-model:value="state.from.basic.dnn_ims"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="6" :md="6" :xs="24">
|
|
<a-form-item
|
|
label="MCC"
|
|
name="basic.plmnId.mcc"
|
|
:label-col="{ span: 13 }"
|
|
:label-wrap="true"
|
|
>
|
|
<a-input
|
|
v-model:value="state.from.basic.plmnId.mcc"
|
|
placeholder="1-65535"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="6" :md="6" :xs="24">
|
|
<a-form-item label="MNC" name="basic.plmnId.mnc">
|
|
<a-input
|
|
v-model:value="state.from.basic.plmnId.mnc"
|
|
placeholder="1-65535"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="6" :md="6" :xs="24">
|
|
<a-form-item
|
|
label="SST"
|
|
name="basic.snssai.sst"
|
|
:label-col="{ span: 13 }"
|
|
:label-wrap="true"
|
|
>
|
|
<a-input-number
|
|
v-model:value="state.from.basic.snssai.sst"
|
|
:min="1"
|
|
:max="3"
|
|
placeholder="1-3"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="6" :md="6" :xs="24">
|
|
<a-form-item label="SD" name="basic.snssai.sd">
|
|
<a-input
|
|
v-model:value="state.from.basic.snssai.sd"
|
|
placeholder="1-65535"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item label="TAC" name="basic.tac">
|
|
<a-input
|
|
v-model:value="state.from.basic.tac"
|
|
placeholder="1-65535"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-divider orientation="left">External</a-divider>
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item label="N2_IP" name="external.amfn2_ip">
|
|
<a-input
|
|
v-model:value="state.from.external.amfn2_ip"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item label="UE_POOL" name="external.ue_pool">
|
|
<a-input
|
|
v-model:value="state.from.external.ue_pool"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item label="N6_IP" name="external.upfn6_ip">
|
|
<a-input
|
|
v-model:value="state.from.external.upfn6_ip"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="N6_GW" name="external.upfn6_gw">
|
|
<a-input
|
|
v-model:value="state.from.external.upfn6_gw"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item label="N3_IP" name="external.upfn3_ip">
|
|
<a-input
|
|
v-model:value="state.from.external.upfn3_ip"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="N3_GW" name="external.upfn3_gw">
|
|
<a-input
|
|
v-model:value="state.from.external.upfn3_gw"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</a-card>
|
|
|
|
<!-- 保存选择同步网元 -->
|
|
<a-modal
|
|
width="500px"
|
|
:keyboard="false"
|
|
:mask-closable="false"
|
|
:visible="state.visible"
|
|
title="保存信息"
|
|
:confirm-loading="state.confirmLoading"
|
|
@ok="fnModalOk"
|
|
@cancel="fnModalCancel"
|
|
>
|
|
<a-form
|
|
name="syncNeModal"
|
|
layout="horizontal"
|
|
:label-col="{ span: 5 }"
|
|
:label-wrap="true"
|
|
>
|
|
<a-form-item label="Sync To NE" name="sync">
|
|
<a-switch
|
|
:checked-children="t('common.switch.open')"
|
|
:un-checked-children="t('common.switch.shut')"
|
|
v-model:checked="state.sync"
|
|
:disabled="state.confirmLoading"
|
|
></a-switch>
|
|
</a-form-item>
|
|
<a-form-item label="Select NE" name="syncNe" v-if="state.sync">
|
|
<a-select
|
|
v-model:value="state.syncNe"
|
|
mode="multiple"
|
|
:placeholder="t('common.selectPlease')"
|
|
:max-tag-count="3"
|
|
:options="state.neSelectOtions"
|
|
>
|
|
<template #maxTagPlaceholder="omittedValues">
|
|
<span>+ {{ omittedValues.length }} ...</span>
|
|
</template>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item label="Sync Msg" name="syncMsg" v-if="state.syncMsg">
|
|
<a-textarea
|
|
:disabled="true"
|
|
:value="state.syncMsg"
|
|
:auto-size="{ minRows: 2, maxRows: 8 }"
|
|
style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
|
|
/>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</PageContainer>
|
|
</template>
|
|
|
|
<style lang="less" scoped></style>
|