470 lines
16 KiB
Vue
470 lines
16 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import useI18n from '@/hooks/useI18n';
|
|
const { t } = useI18n();
|
|
const emit = defineEmits(['update:data']);
|
|
const props = defineProps({
|
|
/**表单数据 */
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
/**根据网元显示配置项 */
|
|
ne: {
|
|
type: Object,
|
|
default: () => ({
|
|
amf: false,
|
|
upf: false,
|
|
ims: false,
|
|
mme: false,
|
|
}),
|
|
},
|
|
});
|
|
|
|
/**表单信息状态 */
|
|
let fromState = ref({
|
|
basic: {
|
|
plmnId: {
|
|
mcc: '001',
|
|
mnc: '01',
|
|
},
|
|
tac: '4388',
|
|
snssai: {
|
|
sst: '1',
|
|
sd: '000001',
|
|
},
|
|
dnn_data: 'internet',
|
|
dnn_ims: 'ims',
|
|
},
|
|
external: {
|
|
amfn2_ip: '192.168.8.120',
|
|
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',
|
|
// 非指定属性
|
|
mmes1_ip: '192.168.8.220/20',
|
|
mmes10_ip: '172.16.5.221/24',
|
|
mmes11_ip: '172.16.5.220/24',
|
|
ims_sip_ip: '192.168.8.110',
|
|
upf_type: 'LightUPF',
|
|
upfn3_pci: '0000:00:00.0',
|
|
upfn3_mac: '00:00:00:00:00:00',
|
|
upfn6_pci: '0000:00:00.0',
|
|
upfn6_mac: '00:00:00:00:00:00',
|
|
},
|
|
sbi: {
|
|
omc_ip: '172.16.5.100',
|
|
ims_ip: '172.16.5.110',
|
|
amf_ip: '172.16.5.120',
|
|
ausf_ip: '172.16.5.130',
|
|
udm_ip: '172.16.5.140',
|
|
db_ip: '0.0.0.0',
|
|
smf_ip: '172.16.5.150',
|
|
pcf_ip: '172.16.5.160',
|
|
nssf_ip: '172.16.5.170',
|
|
nrf_ip: '172.16.5.180',
|
|
upf_ip: '172.16.5.190',
|
|
lmf_ip: '172.16.5.200',
|
|
nef_ip: '172.16.5.210',
|
|
mme_ip: '172.16.5.220',
|
|
n3iwf_ip: '172.16.5.230',
|
|
smsc_ip: '172.16.5.240',
|
|
},
|
|
});
|
|
|
|
/**监听数据 */
|
|
watch(
|
|
() => fromState,
|
|
val => {
|
|
if (val) emit('update:data', val);
|
|
},
|
|
{ deep: true, immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<a-form
|
|
name="para5GFileeFrom"
|
|
layout="horizontal"
|
|
:label-col="{ span: 8 }"
|
|
:label-wrap="true"
|
|
>
|
|
<a-row>
|
|
<a-col :lg="16" :md="16" :xs="24">
|
|
<a-divider orientation="left">Basic</a-divider>
|
|
<a-row>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item label="DNN_DATA" name="basic.dnn_data">
|
|
<a-input
|
|
v-model:value="fromState.basic.dnn_data"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title> DNN </template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="MCC" name="basic.plmnId.mcc">
|
|
<a-input
|
|
v-model:value="fromState.basic.plmnId.mcc"
|
|
placeholder="1-65535"
|
|
></a-input>
|
|
</a-form-item>
|
|
<a-form-item label="SST" name="basic.snssai.sst">
|
|
<a-input-number
|
|
v-model:value="fromState.basic.snssai.sst"
|
|
:min="1"
|
|
:max="3"
|
|
placeholder="1-3"
|
|
style="width: 100%"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title> 1-3 </template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input-number>
|
|
</a-form-item>
|
|
<a-form-item label="TAC" name="basic.tac">
|
|
<a-input
|
|
v-model:value="fromState.basic.tac"
|
|
placeholder="1-65535"
|
|
></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="fromState.basic.dnn_ims"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="MNC" name="basic.plmnId.mnc">
|
|
<a-input
|
|
v-model:value="fromState.basic.plmnId.mnc"
|
|
placeholder="1-65535"
|
|
></a-input>
|
|
</a-form-item>
|
|
<a-form-item label="SD" name="basic.snssai.sd">
|
|
<a-input
|
|
v-model:value="fromState.basic.snssai.sd"
|
|
placeholder="1-65535"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
|
|
<a-col :lg="8" :md="8" :xs="24">
|
|
<a-divider orientation="left">OMC</a-divider>
|
|
<a-row>
|
|
<a-col :lg="24" :md="24" :xs="24">
|
|
<a-form-item
|
|
label="OMC_IP"
|
|
name="sbi.omc_ip"
|
|
:required="true"
|
|
:validate-on-rule-change="false"
|
|
:validateTrigger="[]"
|
|
>
|
|
<a-input
|
|
v-model:value="fromState.sbi.omc_ip"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title>
|
|
Network Elemment send data tu EMS IP
|
|
</template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<template v-if="props.ne.amf">
|
|
<a-divider orientation="left">AMF</a-divider>
|
|
<a-row>
|
|
<a-col :lg="24" :md="24" :xs="24">
|
|
<a-form-item label="N2_IP" name="external.amfn2_ip">
|
|
<a-input
|
|
v-model:value="fromState.external.amfn2_ip"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title> AMF N2 </template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
</a-col>
|
|
|
|
<a-col :lg="16" :md="16" :xs="24" v-if="props.ne.upf">
|
|
<a-divider orientation="left">UPF</a-divider>
|
|
<a-row>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
label="UPF_TYPE"
|
|
name="external.upf_type"
|
|
help="Install of Standard or Light"
|
|
>
|
|
<a-select
|
|
v-model:value="fromState.external.upf_type"
|
|
:placeholder="t('common.selectPlease')"
|
|
>
|
|
<a-select-option value="StandardUPF">
|
|
StandardUPF
|
|
</a-select-option>
|
|
<a-select-option value="LightUPF">LightUPF</a-select-option>
|
|
</a-select>
|
|
</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="fromState.external.ue_pool"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title> UE IP and maxk </template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item label="N3_IP" name="external.upfn3_ip">
|
|
<a-input
|
|
v-model:value="fromState.external.upfn3_ip"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title> netwrok ip </template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="N3_GW" name="external.upfn3_gw">
|
|
<a-input
|
|
v-model:value="fromState.external.upfn3_gw"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title> geteway </template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
:lg="12"
|
|
:md="12"
|
|
:xs="24"
|
|
v-if="fromState.external.upf_type === 'StandardUPF'"
|
|
>
|
|
<a-form-item label="N3_PCI" name="external.upfn3_pci">
|
|
<a-input
|
|
v-model:value="fromState.external.upfn3_pci"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title>
|
|
use `ip a` show info, to inet ip
|
|
</template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="N3_MAC" name="external.upfn3_mac">
|
|
<a-input
|
|
v-model:value="fromState.external.upfn3_mac"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title>
|
|
use `ip a` show info, to inet ip
|
|
</template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<template v-if="fromState.external.upf_type === 'StandardUPF'">
|
|
<a-row>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item label="N6_IP" name="external.upfn6_ip">
|
|
<a-input
|
|
v-model:value="fromState.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="fromState.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="N6_PCI" name="external.upfn6_pci">
|
|
<a-input
|
|
v-model:value="fromState.external.upfn6_pci"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="N6_MAC" name="external.upfn6_mac">
|
|
<a-input
|
|
v-model:value="fromState.external.upfn6_mac"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
</a-col>
|
|
|
|
<a-col :lg="8" :md="8" :xs="24">
|
|
<template v-if="props.ne.ims">
|
|
<a-divider orientation="left">IMS</a-divider>
|
|
<a-row>
|
|
<a-col :lg="24" :md="24" :xs="24">
|
|
<a-form-item label="SIP_IP" name="external.ims_sip_ip">
|
|
<a-input
|
|
v-model:value="fromState.external.ims_sip_ip"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title> IMS SIP </template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
|
|
<template v-if="props.ne.mme">
|
|
<a-divider orientation="left">MME</a-divider>
|
|
<a-row>
|
|
<a-col :lg="24" :md="24" :xs="24">
|
|
<a-form-item label="S1_IP" name="external.mmes1_ip">
|
|
<a-input
|
|
v-model:value="fromState.external.mmes1_ip"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title>
|
|
MME binded interface for S1-C or S1-MME communication
|
|
(S1AP), can be ethernet interface, virtual ethernet
|
|
interface, we don't advise wireless interfaces
|
|
</template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="S10_IP" name="external.mmes10_ip">
|
|
<a-input
|
|
v-model:value="fromState.external.mmes10_ip"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title> Interface </template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="S11_IP" name="external.mmes11_ip">
|
|
<a-input
|
|
v-model:value="fromState.external.mmes11_ip"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:maxlength="50"
|
|
>
|
|
<template #prefix>
|
|
<a-tooltip placement="topLeft">
|
|
<template #title>
|
|
MME binded interface for S11-U communication (GTPV1-U)
|
|
</template>
|
|
<InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
|
|
</a-tooltip>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</template>
|
|
|
|
<style lang="less" scoped></style>
|