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/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();