服务器管理列表列间距调整、PPPo的配置方式切换展示效果优化

This commit is contained in:
康冉冉
2026-01-13 18:52:57 +08:00
parent 7af2e86404
commit 43c8a84aba
3 changed files with 87 additions and 63 deletions
@@ -121,6 +121,7 @@
outSpeed: { label: `上传速度(Mbps)`, minWidth: '120', visible: readonly},
totalInSpeed: { label: `已接收流量(GB)`, minWidth: '120', visible: readonly},
totalOutSpeed: { label: `已发送流量(GB)`, minWidth: '120', visible: readonly},
netRunTime: { label: `拨号时长`, minWidth: '80', visible: readonly},
status: { label: `连通状态`, minWidth: '80', slotName: 'tempStatus', visible: readonly},
};
if (!readonly && this.ruleForm.pppoeConfigMode === '1') {
@@ -193,6 +194,9 @@
} else {
this.ruleForm = Object.assign({}, this.ruleForm, {typeName: 111});
this.roleList = this.roleList.length > 0 ? this.roleList : [{targetIndexNum: 1, serialNumber: 1, vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined}];
if (this.ruleForm && this.ruleForm.pppoeConfigMode == '2') {
this.roleList = this.roleList.length > 0 ? this.roleList : [];
}
this.readonly = !this.readonly;
this.fnFormList(this.readonly);
}
@@ -278,6 +282,14 @@
case 'pppoeConfigMode':
if (dataVal === '1') {
this.formList[0].controls.pppoeInterface['hidden'] = false;
let newModel = JSON.parse(JSON.stringify(this.modelVal));
newModel[0].subList.map((item,index) => {
item['targetIndexNum'] = index + 1;
if (index !== 0) {
item['showNum'] = '1';
}
});
this.roleList = newModel[0].subList.length > 0 ? newModel[0].subList : [{targetIndexNum: 1, serialNumber: 1, vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined}];
this.config = {
colHiddenCheck: true, colTopHiddenIcon: true,
tableButton: {
@@ -288,7 +300,7 @@
}
};
} else if (dataVal === '2') {
if (this.modelVal[0].pppoeConfigMode.toString() === '2') {
if (this.modelVal[0].pppoeConfigMode && this.modelVal[0].pppoeConfigMode.toString() === '2') {
let newModel = JSON.parse(JSON.stringify(this.modelVal));
newModel[0].subList.map((item,index) => {
item['targetIndexNum'] = index + 1;
+55 -54
View File
@@ -91,7 +91,8 @@
<!-- 表格数据 -->
<TableList ref="tabRef" :columns="columns" :config="config" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getHightLight" @value-change="handleValueChange">
<template #tempCopy="{ row, column}">
{{row.clientId}}<el-link :underline="false" icon="el-icon-document-copy" title="复制" v-clipboard:copy="row.clientId" v-clipboard:success="clipboardSuccess" style="margin-left: 10px;color: #409EFF;"></el-link>
<span class="disInlineBlock" :style="`max-width: calc(100% - 19px);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;vertical-align: middle;`">{{row.clientId}}</span>
<el-link :underline="false" icon="el-icon-document-copy" title="复制" v-clipboard:copy="row.clientId" v-clipboard:success="clipboardSuccess" style="margin-left: 5px;color: #409EFF;"></el-link>
</template>
<!-- 多公网IP状态 -->
<template #tempMultipubStatus="{ row, column }">
@@ -227,66 +228,66 @@
meltiple: true,
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
clientId: { label: `clientID`, minWidth: '300', slotName: 'tempCopy',visible: true, disabled: true},
ip1Isp: { label: `运营商1`, minWidth: '70',visible: true, disabled: true},
ip1Province: { label: `省1`, minWidth: '65',visible: true, disabled: true},
ip1PublicIp:{ label: `业务公网1`,minWidth: '120',visible: true, disabled: true},
businessName: { label: `业务名称`, minWidth: '100', visible: true, disabled: true},
bandwidthResult: { label: `昨日95值`, minWidth: '95', visible: true, disabled: true, sortable: 'custom'},
bandwidthRate: { label: `日95利用率`, minWidth: '95', visible: true, disabled: true},
reportedBandwidth: { label: `上报带宽值`, minWidth: '90', slotName: 'tempHandle', visible: true, disabled: true},
onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '75', visible: true, disabled: true},
id: { label: `ID`,width: '45'},
clientId: { label: `clientID`, minWidth: '270', slotName: 'tempCopy',visible: true, disabled: true},
ip1Isp: { label: `运营商1`, minWidth: '55',visible: true, disabled: true},
ip1Province: { label: `省1`, minWidth: '50',visible: true, disabled: true},
ip1PublicIp:{ label: `业务公网1`,minWidth: '100',visible: true, disabled: true},
businessName: { label: `业务名称`, minWidth: '90', visible: true, disabled: true},
bandwidthResult: { label: `昨日95值`, minWidth: '75', visible: true, disabled: true, sortable: 'custom'},
bandwidthRate: { label: `日95利用率`, minWidth: '75', visible: true, disabled: true},
reportedBandwidth: { label: `上报带宽值`, minWidth: '70', slotName: 'tempHandle', visible: true, disabled: true},
onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '60', visible: true, disabled: true},
hardwareSn: { label: `设备SN`,minWidth: '120'},
ip1City: { label: `市1`, minWidth: '65'},
ip1InterfaceName: { label: `接口名称1`, minWidth: '80'},
ip1City: { label: `市1`, minWidth: '50'},
ip1InterfaceName: { label: `接口名称1`, minWidth: '70'},
ip1MacAddress: { label: `mac地址1`, minWidth: '120'},
ip1InterfaceType: { label: `接口类型1`, minWidth: '80'},
ip1Ipv4Address: { label: `IPv4地址1`, minWidth: '120'},
ip1Gateway: { label: `网关1`, minWidth: '120'},
ip1Ipv6Address: { label: `IPv6全球单播地址1`, minWidth: '135'},
ip2Isp: { label: `运营商2`, minWidth: '70'},
ip2Province: { label: `省2`,minWidth: '65'},
ip2City: { label: `市2`, minWidth: '65'},
ip2PublicIp:{ label: `业务公网2`,minWidth: '120'},
ip2InterfaceName: { label: `接口名称2`, minWidth: '100'},
ip1InterfaceType: { label: `接口类型1`, minWidth: '70'},
ip1Ipv4Address: { label: `IPv4地址1`, minWidth: '110'},
ip1Gateway: { label: `网关1`, minWidth: '100'},
ip1Ipv6Address: { label: `IPv6全球单播地址1`, minWidth: '120'},
ip2Isp: { label: `运营商2`, minWidth: '55'},
ip2Province: { label: `省2`,minWidth: '50'},
ip2City: { label: `市2`, minWidth: '50'},
ip2PublicIp:{ label: `业务公网2`,minWidth: '100'},
ip2InterfaceName: { label: `接口名称2`, minWidth: '70'},
ip2MacAddress: { label: `mac地址2`, minWidth: '120'},
ip2InterfaceType: { label: `接口类型2`, minWidth: '80'},
ip2Ipv4Address: { label: `IPv4地址2`, minWidth: '120'},
ip2Gateway: { label: `网关2`, minWidth: '120'},
ip2Ipv6Address: { label: `IPv6全球单播地址2`, minWidth: '135'},
ip3Isp: { label: `运营商3`, minWidth: '70'},
ip3Province: { label: `省3`, minWidth: '65'},
ip3City: { label: `市3`, minWidth: '65'},
ip3PublicIp:{ label: `业务公网3`,minWidth: '120'},
ip3InterfaceName: { label: `接口名称3`, minWidth: '80'},
ip2InterfaceType: { label: `接口类型2`, minWidth: '70'},
ip2Ipv4Address: { label: `IPv4地址2`, minWidth: '110'},
ip2Gateway: { label: `网关2`, minWidth: '100'},
ip2Ipv6Address: { label: `IPv6全球单播地址2`, minWidth: '120'},
ip3Isp: { label: `运营商3`, minWidth: '55'},
ip3Province: { label: `省3`, minWidth: '50'},
ip3City: { label: `市3`, minWidth: '50'},
ip3PublicIp:{ label: `业务公网3`,minWidth: '100'},
ip3InterfaceName: { label: `接口名称3`, minWidth: '70'},
ip3MacAddress: { label: `mac地址3`, minWidth: '120'},
ip3InterfaceType: { label: `接口类型3`, minWidth: '80'},
ip3Ipv4Address: { label: `IPv4地址3`, minWidth: '120'},
ip3Gateway: { label: `网关3`, minWidth: '120'},
ip3Ipv6Address: { label: `IPv6全球单播地址3`, minWidth: '135'},
mgmtIsp: { label: `管理网-运营商`, minWidth: '110'},
mgmtProvince: { label: `管理网-省`,minWidth: '80'},
mgmtCity: { label: `管理网-市`, minWidth: '80'},
ip3InterfaceType: { label: `接口类型3`, minWidth: '70'},
ip3Ipv4Address: { label: `IPv4地址3`, minWidth: '110'},
ip3Gateway: { label: `网关3`, minWidth: '100'},
ip3Ipv6Address: { label: `IPv6全球单播地址3`, minWidth: '120'},
mgmtIsp: { label: `管理网-运营商`, minWidth: '95'},
mgmtProvince: { label: `管理网-省`,minWidth: '65'},
mgmtCity: { label: `管理网-市`, minWidth: '65'},
mgmtPublicIp:{ label: `管理网-业务公网`,minWidth: '120'},
mgmtInterfaceName: { label: `管理网-接口名称`, minWidth: '120'},
mgmtMacAddress: { label: `管理网-mac地址`, minWidth: '150'},
mgmtInterfaceType: { label: `管理网-接口类型`, minWidth: '120'},
mgmtInterfaceName: { label: `管理网-接口名称`, minWidth: '110'},
mgmtMacAddress: { label: `管理网-mac地址`, minWidth: '120'},
mgmtInterfaceType: { label: `管理网-接口类型`, minWidth: '110'},
mgmtIpv4Address: { label: `管理网-IPv4地址`, minWidth: '120'},
mgmtGateway: { label: `管理网-网关`, minWidth: '120'},
mgmtIpv6Address: { label: `管理网-IPv6全球单播地址`, minWidth: '170'},
mgmtGateway: { label: `管理网-网关`, minWidth: '90'},
mgmtIpv6Address: { label: `管理网-IPv6全球单播地址`, minWidth: '160'},
remark: { label: `标签`, minWidth: '150', slotName: 'tempRemark'},
heartbeatInterval: { label: `心跳时间间隔`, minWidth: '100'},
heartbeatCount: { label: `心跳次数`, minWidth: '80'},
registrationStatus: { label: `注册状态`, slotName: 'tempStatus', minWidth: '80', visible: true},
logicalNodeId: { label: `逻辑节点标识`, minWidth: '120', visible: true},
multiPublicIpStatus: { label: `多公网IP状态`, slotName: 'tempMultipubStatus', minWidth: '120', visible: true },
createTime:{ label: `注册时间`,minWidth: '160'},
onboardTime:{ label: `上机时间`,minWidth: '160'},
agentVersion:{ label: `agent版本`,minWidth: '90'},
machineCode:{ label: `金山machineCode`,minWidth: '160'},
cpuUtil:{ label: `CPU使用率`,minWidth: '160'},
memUtil:{ label: `内存使用率`,minWidth: '160'},
heartbeatInterval: { label: `心跳时间间隔`, minWidth: '90'},
heartbeatCount: { label: `心跳次数`, minWidth: '60'},
registrationStatus: { label: `注册状态`, slotName: 'tempStatus', minWidth: '60', visible: true},
logicalNodeId: { label: `逻辑节点标识`, minWidth: '90', visible: true},
multiPublicIpStatus: { label: `多公网IP状态`, slotName: 'tempMultipubStatus', minWidth: '90', visible: true },
createTime:{ label: `注册时间`,minWidth: '140'},
onboardTime:{ label: `上机时间`,minWidth: '140'},
agentVersion:{ label: `agent版本`,minWidth: '80'},
machineCode:{ label: `金山machineCode`,minWidth: '120'},
cpuUtil:{ label: `CPU使用率`,minWidth: '80'},
memUtil:{ label: `内存使用率`,minWidth: '80'},
},
config: {
tableButton: {