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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -72,23 +72,22 @@ function fnTabClose(key: string) {
/**新建网元信息 */
function fnTabCreate() {
const neType = 'NE';
const neId = '001' + new Date().getMilliseconds();
const neId = `${new Date().getMilliseconds()}`.padStart(3, '0');
tabState.panes.push({
key: `${neType}@${neId}`,
key: `New@${neId}`,
data: {
id: undefined,
neId: neId,
neType: neType,
neName: '',
neType: '',
neName: `New_${neId}`,
ip: '',
port: 33030,
pvFlag: 'PNF',
rmUid: `4400HX1${neType}001`,
rmUid: `0000XXNew${neId}`,
neAddress: '',
dn: '',
vendorName: '',
province: '',
dn: '-',
vendorName: '-',
province: '-',
// 主机
hosts: [
{
@@ -121,7 +120,7 @@ function fnTabCreate() {
},
status: false,
});
tabState.activeKey = `${neType}@${neId}`;
tabState.activeKey = `New@${neId}`;
}
/**
@@ -220,6 +219,8 @@ function fnSaveFinish(pane: any) {
console.log('Success:', pane);
tabState.confirmLoading = true;
const from = toRaw(pane);
from.rmUid = `0000XX${from.neType}${from.neId}`; // 4400HX1AMF001
from.neName = `${from.neType}_${from.neId}`; // AMF_001
const result = from.id ? updateNeInfo(from) : addNeInfo(from);
const hide = message.loading(t('common.loading'), 0);
result
@@ -228,12 +229,13 @@ function fnSaveFinish(pane: any) {
if (res.data) {
pane.id = res.data;
}
tabState.panes.findIndex;
const tabItem = tabState.panes.find(
tab => tab.key === tabState.activeKey
);
if (tabItem) {
tabItem.status = false;
tabItem.data.neName = from.neName;
tabItem.status = true;
}
message.success({
@@ -245,6 +247,8 @@ function fnSaveFinish(pane: any) {
tab => tab.key === tabState.activeKey
);
if (tabItem) {
tabItem.status = true;
tabItem.data.neName = from.neName;
tabItem.status = false;
}
message.error({
@@ -365,7 +369,7 @@ onMounted(() => {
<template #tab>
<a-badge
:status="pane.status ? 'success' : 'default'"
:text="`${pane.data.neType}@${pane.data.neId}`"
:text="pane.data.neName"
/>
</template>
@@ -414,28 +418,6 @@ onMounted(() => {
</a-auto-complete>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.configManage.neManage.pvflag')"
name="pvFlag"
>
<a-select v-model:value="pane.data.pvFlag" default-value="PNF">
<a-select-opt-group
:label="t('views.configManage.neManage.pnf')"
>
<a-select-option value="PNF">PNF</a-select-option>
</a-select-opt-group>
<a-select-opt-group
:label="t('views.configManage.neManage.vnf')"
>
<a-select-option value="VNF">VNF</a-select-option>
</a-select-opt-group>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.configManage.neManage.neId')"
@@ -449,25 +431,16 @@ onMounted(() => {
v-model:value="pane.data.neId"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="32"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.configManage.neManage.neName')"
name="neName"
:rules="{
required: true,
message: '请输入网元名称',
}"
>
<a-input
v-model:value="pane.data.neName"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="64"
:maxlength="24"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
{{ t('views.configManage.neManage.neIdTip') }}
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
</a-form-item>
</a-col>
@@ -534,35 +507,6 @@ onMounted(() => {
</a-col>
</a-row>
<a-form-item
:label="t('views.configManage.neManage.uid')"
name="rmUid"
:rules="{
required: true,
message: '请输入资源唯一标识',
}"
:label-col="{ span: 3 }"
:labelWrap="true"
>
<a-input
v-model:value="pane.data.rmUid"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="40"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
<div>
{{ t('views.ne.neInfo.rmUID') }}
</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
</a-form-item>
<a-divider orientation="left">
{{ t('views.ne.neInfo.hostConfig') }}
</a-divider>
@@ -736,7 +680,7 @@ onMounted(() => {
<style lang="less" scoped>
.neinfo-tabs :deep(.ant-tabs-tabpane) {
padding: 24px;
height: 65vh;
height: 60vh;
overflow-y: auto;
overflow-x: hidden;
// margin-bottom: 24px;
@@ -745,7 +689,7 @@ onMounted(() => {
.ne {
padding-top: 12px;
height: 78vh;
// height: 78vh;
overflow-x: hidden;
overflow-y: auto;

396
src/views/system/quick-start/components/NeInfoConfigPara5G.vue
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;

4
src/views/system/quick-start/components/NeInfoSoftwareInstall.vue
View File

@@ -230,7 +230,7 @@ onMounted(() => {
size="middle"
:pagination="false"
@resizeColumn="(w:number, col:any) => (col.width = w)"
:scroll="{ y: '65vh' }"
:scroll="{ y: '60vh' }"
:row-selection="{
type: 'checkbox',
columnWidth: '48px',
@@ -300,7 +300,7 @@ onMounted(() => {
<style lang="less" scoped>
.ne {
padding-top: 12px;
height: 78vh;
// height: 70vh;
overflow-x: hidden;
overflow-y: auto;

4
src/views/system/quick-start/components/NeInfoSoftwareLicense.vue
View File

@@ -241,7 +241,7 @@ onMounted(() => {
size="middle"
:pagination="false"
@resizeColumn="(w:number, col:any) => (col.width = w)"
:scroll="{ y: '65vh' }"
:scroll="{ y: '60vh' }"
:row-selection="{
type: 'checkbox',
columnWidth: '48px',
@@ -298,7 +298,7 @@ onMounted(() => {
<style lang="less" scoped>
.ne {
padding-top: 12px;
height: 78vh;
// height: 78vh;
overflow-x: hidden;
overflow-y: auto;