TRKJ/profitManage1.2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图形监控添加IPv4和IPv6的流量图、服务器管理列表和表单添加新字段、列表字段直接修改功能

Browse Source 
1、服务器管理列表和表单添加新字段、列表字段直接修改功能
2、服务器管理列表添加默认选中且不可修改字段、列表增加排序功能
3、图形监控添加IPv4和IPv6的流量图
4、交换机管理和服务器管理列表设置不刷新缓存
This commit is contained in:
康冉冉
2025-12-05 18:45:26 +08:00
parent c949b89aa8
commit 17d61dbe43
11 changed files with 257 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/earnManage/busValueCount/relevantData.vue
+2 -2
View File
@@ -41,8 +41,8 @@
<el-input
v-model="row.maxSpeed"
size="mini"
@keyup.enter="callback({fnCode: 'edit'}, row)"
@blur="callback({fnCode: 'edit'}, row)"
@keyup.enter.native="$event.target.blur"
@blur="callback({fnCode: 'submit'}, row)"
></el-input>
</el-col>
<el-col :span="8">
src/views/earnManage/business/index.vue
+2 -2
View File
@@ -31,8 +31,8 @@
<el-input
v-model="row.businessName"
size="mini"
@keyup.enter="callback({fnCode: 'edit'}, row)"
@blur="callback({fnCode: 'edit'}, row)"
@keyup.enter.native="$event.target.blur"
@blur="callback({fnCode: 'submit'}, row)"
></el-input>
</el-col>
<el-col :span="8">
src/views/earnManage/businessIdent/businessIdent.vue
+2 -2
View File
@@ -31,8 +31,8 @@
<el-input
v-model="row.businessName"
size="mini"
@keyup.enter="callback({fnCode: 'edit'}, row)"
@blur="callback({fnCode: 'edit'}, row)"
@keyup.enter.native="$event.target.blur"
@blur="callback({fnCode: 'submit'}, row)"
></el-input>
</el-col>
<el-col :span="8">
src/views/resource/serverRegister/handle.vue
+7
View File
@@ -67,6 +67,7 @@
ip1InterfaceType: {label: 'IP1-接口类型', span: 12, type: 'input'},
ip1Ipv4Address: {label: 'IP1-IPv4地址', span: 12, type: 'input'},
ip1Gateway: {label: 'IP1-网关', span: 12, type: 'input'},
ip1Ipv6Address: { label: `IP1-IPv6全球单播地址`, span: 12, type: 'input'},
ip2Isp: {label: 'IP2-运营商', span: 12, type: 'input'},
ip2Province: {label: 'IP2-省', span: 12, type: 'input'},
ip2City: {label: 'IP2-市', span: 12, type: 'input'},
@@ -76,6 +77,7 @@
ip2InterfaceType: {label: 'IP2-接口类型', span: 12, type: 'input'},
ip2Ipv4Address: {label: 'IP2-IPv4地址', span: 12, type: 'input'},
ip2Gateway: {label: 'IP2-网关', span: 12, type: 'input'},
ip2Ipv6Address: { label: `IP2-IPv6全球单播地址`, span: 12, type: 'input'},
ip3Isp: {label: 'IP3-运营商', span: 12, type: 'input'},
ip3Province: {label: 'IP3-省', span: 12, type: 'input'},
ip3City: {label: 'IP3-市', span: 12, type: 'input'},
@@ -85,6 +87,7 @@
ip3InterfaceType: {label: 'IP3-接口类型', span: 12, type: 'input'},
ip3Ipv4Address: {label: 'IP3-IPv4地址', span: 12, type: 'input'},
ip3Gateway: {label: 'IP3-网关', span: 12, type: 'input'},
ip3Ipv6Address: { label: `IP3-IPv6全球单播地址`, span: 12, type: 'input'},
mgmtIsp: {label: '管理网-运营商', span: 12, type: 'input'},
mgmtProvince: {label: '管理网-省', span: 12, type: 'input'},
mgmtCity: {label: '管理网-市', span: 12, type: 'input'},
@@ -94,9 +97,13 @@
mgmtInterfaceType: {label: '管理网-接口类型', span: 12, type: 'input'},
mgmtIpv4Address: {label: '管理网-IPv4地址', span: 12, type: 'input'},
mgmtGateway: {label: '管理网-网关', span: 12, type: 'input'},
mgmtIpv6Address: { label: `管理网-IPv6全球单播地址`, span: 12, type: 'input'},
heartbeatInterval: {label: '心跳时间间隔', span: 12, type: 'input'},
heartbeatCount: {label: '心跳次数', span: 12, type: 'input'},
businessName: {label: '业务名称', span: 12, type: 'input'},
bandwidthResult: { label: `昨日95值(Mbit)`, span: 12, type: 'input'},
bandwidthRate: { label: `日95带宽值利用率`, span: 12, type: 'input'},
reportedBandwidth: { label: `上报带宽值(Mbit)`, span: 12, type: 'input'},
logicalNodeId: {label: '逻辑节点标识', span: 12, type: 'input'},
onlineStatus: {label: '在线状态', span: 12, type: 'select', options: this.dict.type.rm_register_online_state},
registrationStatus: {label: '注册状态', span: 12, type: 'select', options: this.dict.type.rm_register_status},
src/views/resource/serverRegister/index.vue
+73 -18
View File
@@ -111,6 +111,30 @@
<el-tag v-for="(item, index) of row.remark.split(',')" :style="{marginLeft: index !== 0 ? '5px' : null}">{{item}}</el-tag>
</template>
</template>
<template #tempHandle="{ row, column }">
<div class="w100">
<!-- 非编辑状态：显示文本 -->
<template v-if="!row.editStatus">
<span>{{ row.reportedBandwidth || '-'}}</span>
<el-button icon="el-icon-edit" style="padding: 0px;" type="text" @click="rowDataChange(row, true)"></el-button>
</template>
<template v-else>
<!-- 编辑状态：显示输入框 -->
<el-col :span="12">
<el-input
v-model="row.reportedBandwidth"
size="mini"
@keyup.enter.native="$event.target.blur"
@blur="handleSubmit(row)"
></el-input>
</el-col>
<el-col :span="12">
<el-button size="mini" style="padding: 6px 5px;margin-left: 5px;" type="primary" @click="handleSubmit(row)">确定</el-button>
<el-button size="mini" style="padding: 6px 5px;margin-left: 5px;" @click="rowDataChange(row, false)">取消</el-button>
</el-col>
</template>
</div>
</template>
</TableList>
<!-- 查看执行结果弹窗 -->
<el-dialog title="命令执行结果" :visible.sync="open" width="800px" height="300px" append-to-body>
@@ -163,7 +187,7 @@
<script setup name="Register">
import Form from '@/components/form/index.vue';
import {listHandle, networkList, getScriptResultBySn, getLogicalNode, addRemark, updateRemark} from '@/api/disRevenue/resource';
import {listHandle, networkList, getScriptResultBySn, getLogicalNode, addRemark, updateRemark, repBandwidthSubmit} from '@/api/disRevenue/resource';
import {listAllBusinessList} from "@/api/disRevenue/earnManage"
import TableList from '@/components/table/index.vue';
import MonitorStrategy from '../serverMonitorStrat/monitorStrategy';
@@ -188,17 +212,23 @@
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
clientId: { label: `clientID`, minWidth: '320', slotName: 'tempCopy'},
clientId: { label: `clientID`, minWidth: '320', slotName: 'tempCopy',visible: true, disabled: true},
ip1Isp: { label: `IP1-运营商`, minWidth: '85',visible: true, disabled: true},
ip1Province: { label: `IP1-省`, minWidth: '60',visible: true, disabled: true},
ip1PublicIp:{ label: `IP1-业务公网`,minWidth: '120',visible: true, disabled: true},
businessName: { label: `业务名称`, minWidth: '100', visible: true, disabled: true},
bandwidthResult: { label: `昨日95值(Mbit)`, minWidth: '150', visible: true, disabled: true, sortable: 'custom'},
bandwidthRate: { label: `日95带宽值利用率`, minWidth: '130', visible: true, disabled: true},
reportedBandwidth: { label: `上报带宽值(Mbit)`, minWidth: '180', slotName: 'tempHandle', visible: true, disabled: true},
onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '100', visible: true, disabled: true},
hardwareSn: { label: `设备SN`,minWidth: '120'},
ip1Isp: { label: `IP1-运营商`, visible: true, minWidth: '85'},
ip1Province: { label: `IP1-省`, visible: true, minWidth: '60'},
ip1City: { label: `IP1-市`, minWidth: '80'},
ip1PublicIp:{ label: `IP1-业务公网`,visible: true,minWidth: '120'},
ip1InterfaceName: { label: `IP1-接口名称`, minWidth: '100'},
ip1MacAddress: { label: `IP1-mac地址`, minWidth: '120'},
ip1InterfaceType: { label: `IP1-接口类型`, minWidth: '100'},
ip1Ipv4Address: { label: `IP1-IPv4地址`, minWidth: '120'},
ip1Gateway: { label: `IP1-网关`, minWidth: '120'},
ip1Ipv6Address: { label: `IP1-IPv6全球单播地址`, minWidth: '150'},
ip2Isp: { label: `IP2-运营商`, minWidth: '90'},
ip2Province: { label: `IP2-省`,minWidth: '60'},
ip2City: { label: `IP2-市`, minWidth: '60'},
@@ -208,6 +238,7 @@
ip2InterfaceType: { label: `IP2-接口类型`, minWidth: '100'},
ip2Ipv4Address: { label: `IP2-IPv4地址`, minWidth: '120'},
ip2Gateway: { label: `IP2-网关`, minWidth: '120'},
ip2Ipv6Address: { label: `IP2-IPv6全球单播地址`, minWidth: '150'},
ip3Isp: { label: `IP3-运营商`, minWidth: '90'},
ip3Province: { label: `IP3-省`, minWidth: '60'},
ip3City: { label: `IP3-市`, minWidth: '60'},
@@ -217,6 +248,7 @@
ip3InterfaceType: { label: `IP3-接口类型`, minWidth: '100'},
ip3Ipv4Address: { label: `IP3-IPv4地址`, minWidth: '120'},
ip3Gateway: { label: `IP3-网关`, minWidth: '120'},
ip3Ipv6Address: { label: `IP3-IPv6全球单播地址`, minWidth: '150'},
mgmtIsp: { label: `管理网-运营商`, minWidth: '110'},
mgmtProvince: { label: `管理网-省`,minWidth: '80'},
mgmtCity: { label: `管理网-市`, minWidth: '80'},
@@ -226,14 +258,12 @@
mgmtInterfaceType: { label: `管理网-接口类型`, minWidth: '120'},
mgmtIpv4Address: { label: `管理网-IPv4地址`, minWidth: '120'},
mgmtGateway: { label: `管理网-网关`, minWidth: '120'},
mgmtIpv6Address: { label: `管理网-IPv6全球单播地址`, minWidth: '170'},
remark: { label: `标签`, minWidth: '150', slotName: 'tempRemark'},
heartbeatInterval: { label: `心跳时间间隔`, minWidth: '100'},
heartbeatCount: { label: `心跳次数`, minWidth: '80'},
registrationStatus: { label: `注册状态`, slotName: 'tempStatus', minWidth: '80', visible: true },
businessName: { label: `业务名称`, minWidth: '100', visible: true},
bandwidthResult: { label: `昨日95值(Mbit)`, minWidth: '120', visible: true},
registrationStatus: { label: `注册状态`, slotName: 'tempStatus', minWidth: '80', visible: true},
logicalNodeId: { label: `逻辑节点标识`, minWidth: '120', visible: true},
onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '100', visible: true },
multiPublicIpStatus: { label: `多公网IP状态`, slotName: 'tempMultipubStatus', minWidth: '120', visible: true },
createTime:{ label: `注册时间`,minWidth: '160'},
onboardTime:{ label: `上机时间`,minWidth: '160'},
@@ -315,11 +345,11 @@
this.fnBusNameList();
this.fnLogicalNode();
},
activated() {
this.$nextTick(() => {
this.getList();
});
},
// activated() {
// this.$nextTick(() => {
// this.getList();
// });
// },
methods: {
fnBusNameList() {
listAllBusinessList().then(val => {
@@ -347,12 +377,14 @@
if (params && !params.queryParam) {
params.queryParam = null;
}
this.loading = true;
this.$modal.loading();
listHandle(this.addDateRange(params)).then(response => {
this.roleList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
})
this.$modal.closeLoading();
}).catch(() => {
this.$modal.closeLoading();
});
},
/** 搜索按钮操作 */
@@ -385,6 +417,25 @@
this.scriptOpen = false;
this.mtrChartOpen = false;
},
// 是否进入可编辑状态
rowDataChange(row, bool) {
this.$set(row, 'editStatus', bool);
},
// 提交编辑值
handleSubmit(rowData) {
// 控制单点，防止多次点击
if (this.loading) return;
this.loading = true;
repBandwidthSubmit(rowData).then(response => {
this.$set(rowData, 'editStatus', false);
this.getList();
this.$modal.msgSuccess(response.msg);
this.loading = false;
}).catch(() => {
this.$modal.msgError("操作失败");
this.loading = false;
});
},
callback(result, rowData, selectChange, selectList) {
this.dialogRowData = {};
if (result && result.fnCode) {
@@ -533,7 +584,11 @@
this.stratOpen = true;
this.dialogRowData = rowData;
break;
case 'submit':
case 'sortTable':
if (rowData && rowData.sortType) {
this.queryParams['bandwidthResultSort'] = rowData.sortType;
this.getList();
}
break;
case 'cancel':
this.issueOpen = false;
src/views/resource/serverRegister/monitorChart.vue
+83 -9
View File
@@ -23,7 +23,7 @@
import SecondAutoFind from "./secondAutoFind";
import {serverMonitorData, cpuLoadData, cpuTimeData, procNum, serverUserNum, swapSizeFree, memoryUtilization, swapSizePercent,
memorySizeAvailable, memorySizePercent, mountNameList, pointDetails, spaceEcharts, spaceRate, postInterFaceName,
netDetails, trafficEcharts, droppedEcharts, diskAllNames, diskDetails, speedEcharts, timesEcharts, bytesEcharts,
netDetails, trafficEcharts, trafficIPv4Echarts, trafficIPv6Echarts, droppedEcharts, diskAllNames, diskDetails, speedEcharts, timesEcharts, bytesEcharts,
dockerAllNames, dockerDetails, cpuUtilEcharts, dockerMemEcharts, dockerSpeedEcharts} from "@/api/disRevenue/resource"
export default {
name: "serverMonitorChart",
@@ -191,11 +191,11 @@
echartData: {
title: 'GE1/0/1的丢包数',
dateShowType: 'datetimerange',
dateDataTrans: {transList: true},
dateDataTrans: {transList: true, MarUltabsTop: '30px'},
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
yAxisName: ' ',
gridTop: '35%',
gridTop: '40%',
legend: {top: '15%', left: '10%'},
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
dataList: [{
@@ -226,6 +226,8 @@
formModel: {},
echartFors: [
{title: '的流量', oneName: '出站流量', twoName: '入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
{title: '的IPv4流量', oneName: 'IPv4出站流量', twoName: 'IPv4入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
{title: '的IPv6流量', oneName: 'IPv6出站流量', twoName: 'IPv6入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
{title: '的丢包数(个)', oneName: '出站丢包', twoName: '入站丢包'},
],
echartList: []
@@ -610,11 +612,19 @@
netDetails({clientId: this.paramsData.clientId, name: titleName}).then(async res => {
this.secondChartList[titleName].formModel = res && res.data || [];
if (await this.getNetEcharts(times, titleName)) {
this.getNetDropped(times ,titleName);
if (await this.getNetIPv4Echarts(times, titleName)) {
if (await this.getNetIPv6Echarts(times, titleName)) {
this.getNetDropped(times ,titleName);
}
}
}
}).catch(async () => {
if (await this.getNetEcharts(times, titleName)) {
this.getNetDropped(times ,titleName);
if (await this.getNetIPv4Echarts(times, titleName)) {
if (await this.getNetIPv6Echarts(times, titleName)) {
this.getNetDropped(times ,titleName);
}
}
}
});
},
@@ -650,6 +660,70 @@
return true;
});
},
// IPv4流量
getNetIPv4Echarts(times, titleName, unitData) {
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetIPv4Echarts';
return trafficIPv4Echarts(Object.assign(unitData || {}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[1].title;
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
netEcharts.dataVal.dataList[0] = {
name: content.echartFors[1].oneName,
data: res.data && res.data.yData['netOutSpeedData'] || []
};
if (content.echartFors[1].unitSel) {
netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
}
netEcharts.dataVal.dataList[1] = {
name: content.echartFors[1].twoName,
data: res.data && res.data.yData['netInSpeedData'] || []
};
mountCollect['echartList'][1] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
}
return true;
}).catch(() => {
return true;
});
},
// IPv6流量
getNetIPv6Echarts(times, titleName, unitData) {
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetIPv6Echarts';
return trafficIPv6Echarts(Object.assign(unitData || {}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[2].title;
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
netEcharts.dataVal.dataList[0] = {
name: content.echartFors[2].oneName,
data: res.data && res.data.yData['netOutSpeedData'] || []
};
if (content.echartFors[2].unitSel) {
netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
}
netEcharts.dataVal.dataList[1] = {
name: content.echartFors[2].twoName,
data: res.data && res.data.yData['netInSpeedData'] || []
};
mountCollect['echartList'][2] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
}
return true;
}).catch(() => {
return true;
});
},
// 丢包数
getNetDropped(times, titleName) {
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
@@ -659,18 +733,18 @@
netEcharts.fnEvent = 'getNetDropped';
return droppedEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[1].title;
netEcharts.title = titleName + content.echartFors[3].title;
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
netEcharts.dataVal.dataList[0] = {
name: content.echartFors[1].oneName,
name: content.echartFors[3].oneName,
data: res.data && res.data.yData['outDroppedData'] || []
};
netEcharts.dataVal.dataList[1] = {
name: content.echartFors[1].twoName,
name: content.echartFors[3].twoName,
data: res.data && res.data.yData['inDroppedData'] || []
};
mountCollect['echartList'][1] = netEcharts;
mountCollect['echartList'][3] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
}
this.$modal.closeLoading();
src/views/resource/switchRegister/index.vue
+5 -5
View File
@@ -143,11 +143,11 @@
created() {
this.getList();
},
activated() {
this.$nextTick(() => {
this.getList();
});
},
// activated() {
// this.$nextTick(() => {
// this.getList();
// });
// },
methods: {
// 处理子组件传递的新值
handleValueChange(newValue) {