fix: 开站页面同步公共参数配置,优化页面样式

This commit is contained in:
TsMask
2024-05-09 19:18:21 +08:00
parent b5f6a5d24a
commit ad86bee5f9
4 changed files with 146 additions and 368 deletions

View File

@@ -24,51 +24,42 @@ let state: StateType = reactive({
loading: false,
saveFile: false,
from: {
SIPIP: '192.168.5.60',
N2IP: '192.168.5.60',
OMCIP: '172.60.5.100',
IMSIP: '172.60.5.110',
AMFIP: '172.60.5.120',
AUSFIP: '172.60.5.130',
UDMIP: '172.60.5.140',
ADBIP: '172.60.5.140',
SMFIP: '172.60.5.150',
PCFIP: '172.60.5.160',
NSSFIP: '172.60.5.170',
NRFIP: '172.60.5.180',
UPFIP: '172.60.5.190',
N3IWFIP: '172.60.5.230',
S1_MMEIP: '192.168.5.60',
S20_MMEIP: '172.60.5.220',
S21_MMEIP: '172.60.5.221',
LTETAC: '88',
MCC: '460',
MNC: '01',
SST: '1',
SD: '010204',
DNN: 'cmnet',
NRTAC: '88',
KPI_TIMER: '60', // KPI上报周期秒
UPFType: 'Light', // UPF类型 Standard标准版 Light轻量版
UEIP: '10.10.40.0',
UEIPMask: '255.255.255.0',
N3IP: '192.168.5.191',
N3Mask: '255.255.240.0',
N3GW: '192.168.1.1',
N3PCI: '0000:13:00.0',
N3MAC: '00:0c:29:10:ac:d7',
N6IP: '192.168.5.191',
N6Mask: '255.255.240.0',
N6GW: '192.168.1.1',
N6PCI: '0000:1b:00.0',
N6MAC: '00:0c:29:10:ac:e1',
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,
});
@@ -117,35 +108,38 @@ function fnGetList() {
for (const item of resArr[1].rows) {
switch (item.neType) {
case 'IMS':
state.from.IMSIP = item.ip;
state.from.sbi.ims_ip = item.ip;
break;
case 'AMF':
state.from.AMFIP = item.ip;
state.from.sbi.amf_ip = item.ip;
break;
case 'AUSF':
state.from.AUSFIP = item.ip;
state.from.sbi.ausf_ip = item.ip;
break;
case 'UDM':
state.from.UDMIP = item.ip;
state.from.ADBIP = item.ip;
state.from.sbi.udm_ip = item.ip;
state.from.sbi.adb_ip = item.ip;
break;
case 'SMF':
state.from.SMFIP = item.ip;
state.from.sbi.smf_ip = item.ip;
break;
case 'PCF':
state.from.PCFIP = item.ip;
state.from.sbi.pcf_ip = item.ip;
break;
case 'NSSF':
state.from.NSSFIP = item.ip;
state.from.sbi.nssf_ip = item.ip;
break;
case 'NRF':
state.from.NRFIP = item.ip;
state.from.sbi.nrf_ip = item.ip;
break;
case 'UPF':
state.from.UPFIP = item.ip;
state.from.sbi.upf_ip = item.ip;
break;
case 'MME':
state.from.sbi.mme_ip = item.ip;
break;
case 'N3IWF':
state.from.N3IWFIP = item.ip;
state.from.sbi.n3iwf_ip = item.ip;
break;
}
}
@@ -192,21 +186,28 @@ onMounted(() => {
:label-col="{ span: 6 }"
:label-wrap="true"
>
<a-divider orientation="left">System</a-divider>
<a-form-item
label="OMC_IP"
name="OMC_IP"
:label-col="{ span: 3 }"
:wrapper-col="{ span: 9 }"
>
<a-input
v-model:value="state.from.sbi.omc_ip"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-divider orientation="left">Basic</a-divider>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="N2IP" name="N2IP">
<a-form-item label="DNN_DATA" name="basic.dnn_data">
<a-input
v-model:value="state.from.N2IP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="SIPIP" name="SIPIP">
<a-input
v-model:value="state.from.SIPIP"
v-model:value="state.from.basic.dnn_data"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -215,18 +216,9 @@ onMounted(() => {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="NRTAC" name="NRTAC">
<a-form-item label="DNN_IMS" name="basic.dnn_ims">
<a-input
v-model:value="state.from.NRTAC"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="DNN" name="DNN">
<a-input
v-model:value="state.from.DNN"
v-model:value="state.from.basic.dnn_ims"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -237,20 +229,20 @@ onMounted(() => {
<a-col :lg="6" :md="6" :xs="24">
<a-form-item
label="MCC"
name="MCC"
name="basic.plmnId.mcc"
:label-col="{ span: 13 }"
:label-wrap="true"
>
<a-input
v-model:value="state.from.MCC"
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="MNC">
<a-form-item label="MNC" name="basic.plmnId.mnc">
<a-input
v-model:value="state.from.MNC"
v-model:value="state.from.basic.plmnId.mnc"
placeholder="1-65535"
></a-input>
</a-form-item>
@@ -258,12 +250,12 @@ onMounted(() => {
<a-col :lg="6" :md="6" :xs="24">
<a-form-item
label="SST"
name="SST"
name="basic.snssai.sst"
:label-col="{ span: 13 }"
:label-wrap="true"
>
<a-input-number
v-model:value="state.from.SST"
v-model:value="state.from.basic.snssai.sst"
:min="1"
:max="3"
placeholder="1-3"
@@ -271,21 +263,29 @@ onMounted(() => {
</a-form-item>
</a-col>
<a-col :lg="6" :md="6" :xs="24">
<a-form-item label="SD" name="SD">
<a-form-item label="SD" name="basic.snssai.sd">
<a-input
v-model:value="state.from.SD"
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">OMC</a-divider>
<a-divider orientation="left">External</a-divider>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="OMCIP" name="OMCIP">
<a-form-item label="N2_IP" name="external.amfn2_ip">
<a-input
v-model:value="state.from.OMCIP"
v-model:value="state.from.external.amfn2_ip"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -294,49 +294,50 @@ onMounted(() => {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="KPI_TIMER" name="KPI_TIMER">
<a-input-number
v-model:value="state.from.KPI_TIMER"
:min="1"
:max="65535"
placeholder="1-65535"
></a-input-number>
<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-row>
<a-divider orientation="left">MME</a-divider>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="S1_MMEIP" name="S1_MMEIP">
<a-form-item label="N6_IP" name="external.upfn6_ip">
<a-input
v-model:value="state.from.S1_MMEIP"
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="LTETAC" name="LTETAC">
<a-form-item label="N6_GW" name="external.upfn6_gw">
<a-input
v-model:value="state.from.LTETAC"
placeholder="1-65535"
></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="S20_MMEIP" name="S20_MMEIP">
<a-form-item label="N3_IP" name="external.upfn3_ip">
<a-input
v-model:value="state.from.S20_MMEIP"
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="S21_MMEIP" name="S21_MMEIP">
<a-form-item label="N3_GW" name="external.upfn3_gw">
<a-input
v-model:value="state.from.S21_MMEIP"
v-model:value="state.from.external.upfn3_gw"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -345,172 +346,6 @@ onMounted(() => {
</a-form-item>
</a-col>
</a-row>
<a-divider orientation="left">UPF</a-divider>
<a-row :gutter="16">
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="UPFType"
name="UPFType"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-select
v-model:value="state.from.UPFType"
:placeholder="t('common.selectPlease')"
>
<a-select-option value="Standard" key="Standard">
Standard
</a-select-option>
<a-select-option value="Light" key="Light">
Light
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<!-- UPF轻量 -->
<template v-if="state.from.UPFType === 'Light'">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="N3IP" name="N3IP">
<a-input
v-model:value="state.from.N3IP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3Mask" name="N3Mask">
<a-input
v-model:value="state.from.N3Mask"
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="UEIP" name="UEIP">
<a-input
v-model:value="state.from.UEIP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="UEIPMask" name="UEIPMask">
<a-input
v-model:value="state.from.UEIPMask"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
</template>
<!-- UPF标准 -->
<template v-if="state.from.UPFType === 'Standard'">
<!-- N3 -->
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="N3IP" name="N3IP">
<a-input
v-model:value="state.from.N3IP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3Mask" name="N3Mask">
<a-input
v-model:value="state.from.N3Mask"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3GW" name="N3GW">
<a-input
v-model:value="state.from.N3GW"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3PCI" name="N3PCI">
<a-input
v-model:value="state.from.N3PCI"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3MAC" name="N3MAC">
<a-input
v-model:value="state.from.N3MAC"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<!-- N6 -->
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="N6IP" name="N6IP">
<a-input
v-model:value="state.from.N6IP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N6Mask" name="N6Mask">
<a-input
v-model:value="state.from.N6Mask"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N6GW" name="N6GW">
<a-input
v-model:value="state.from.N6GW"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N6PCI" name="N6PCI">
<a-input
v-model:value="state.from.N6PCI"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N6MAC" name="N6MAC">
<a-input
v-model:value="state.from.N6MAC"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
</template>
</a-row>
</a-form>
</a-spin>
@@ -539,15 +374,14 @@ onMounted(() => {
<style lang="less" scoped>
.ne {
padding-top: 12px;
height: 78vh;
height: calc(60vh + 56px);
overflow-x: hidden;
overflow-y: auto;
& .ant-form {
height: 70vh;
overflow-y: auto;
overflow-x: hidden;
}
// & .ant-form {
// overflow-y: auto;
// overflow-x: hidden;
// }
&-oper {
padding-top: 24px;
text-align: end;