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

MTRAgent、服务器管理、交换机管理

Browse Source 
1、MTRAgent丢包趋势图添加最新丢包率值显示
2、服务器管理的图形监控调整出入站流量和丢包的展示顺序
3、交换机管理列表添加唯一标识字段
This commit is contained in:
康冉冉
2025-11-28 18:45:15 +08:00
parent 3370e08295
commit de5badded4
7 changed files with 62 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/echartsList/line.vue
+25 -1
View File
@@ -142,6 +142,30 @@
label: {
backgroundColor: '#6a7985'
}
},
formatter: !dataXY.tooltipFormatter ? null : function(params) {
// 获取当前悬停的日期
const date = params[0].name;
// 构建提示框HTML内容
let html = `<div>${date}</div>`;
// 遍历所有系列
params.forEach(param => {
let valueparams = param.value;
if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.valueToop) {
let value = dataXY.tooltipFormatter.valueToop;
valueparams = param.value && param.value === value.num ? value.msg : param.value || param.value === 0 ? param.value : '-';
}
// 为每个系列创建一行
html += `
<div style="display: flex; justify-content: space-between; align-items: center; margin: 4px 0;">
<div style="display: flex; align-items: center;">
<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${param.color}; margin-right: 8px;"></span>
<span style="color: #57606f;">${param.seriesName} </span>
</div>
<span style="font-weight: bold; color: #2f3542;margin-left:20px;"> ${valueparams}</span>
</div>`;
});
return html;
}
},
grid: {
@@ -185,7 +209,7 @@
type: 'value',
name: dataXY?.yAxisName || ' ',
nameTextStyle: dataXY && dataXY.unitSelList && dataXY.unitSelList.length > 0 ? {color: 'transparent'} : {}, // 将名称文本颜色设为透明，使其不可见
min: dataXY && dataXY.data && dataXY.data.length > 0 ? null : dataXY && dataXY.dataList && dataXY.dataList[0] && dataXY.dataList[0].data.length > 0 ? null : 0, // 自定义最小刻度（根据业务需求调整，如 0）
min: 0, // 自定义最小刻度（根据业务需求调整，如 0）
max: dataXY && dataXY.data && dataXY.data.length > 0 ? null : dataXY && dataXY.dataList && dataXY.dataList[0] && dataXY.dataList[0].data.length > 0 ? null : 100,
splitLine: {
show: true,
src/views/resource/alarmLog/alarmLog.vue
+22 -10
View File
@@ -37,7 +37,7 @@
<dict-tag :options="dict.type.alarm_type" :value="row.alarmType"/>
</template>
<template #tempPushFlag="{ row, column }">
<dict-tag :options="dict.type.push_flag" :value="row.alarmType"/>
<dict-tag :options="dict.type.push_flag" :value="row.pushFlag"/>
</template>
</TableList>
</div>
@@ -64,7 +64,7 @@
columns: {
id: { label: `ID`,width: '50'},
clientId: { label: `告警设备`, minWidth: '250', visible: true },
mgmPublicIp: { label: `管理网-公网IP`,minWidth: '120',visible: true},
mgmPublicIp: { label: `IP`,minWidth: '120',visible: true},
alarmType: { label: `告警类型`,minWidth: '120', slotName: 'tempAlarmType', visible: true},
alarmTime: { label: `告警时间`,minWidth: '160',visible: true},
alarmContent: { label: `告警内容`,minWidth: '250', visible: true },
@@ -129,14 +129,26 @@
// id: rowData.id
// }
// });
this.$router.push({
path: '/resource/alarmLog/details',
query: {
id: rowData.clientId,
readonly: true,
type: 'alarmLog'
}
});
if (rowData && rowData.alarmType === '1') {
this.$router.push({
path: '/resource/switchRegister/edit/index',
query: {
id: rowData.clientId,
readonly: true,
type: 'alarmLog'
}
});
}
// else if (rowData && rowData.alarmType === '3') {
// this.$router.push({
// path: '/resource/alarmLog/details',
// query: {
// id: rowData.clientId,
// readonly: true,
// type: 'alarmLog'
// }
// });
// }
break;
case 'export':
// let dataList = [];
src/views/resource/messagePush/details.vue
+1 -1
View File
@@ -44,7 +44,7 @@
createBy: {label: '创建人', span: spanNum, type: 'input', hidden: !(this.paramsData && this.paramsData.readonly)},
createTime: {label: '创建时间', span: spanNum, type: 'datetime', hidden: !(this.paramsData && this.paramsData.readonly)},
updateTime: {label: '修改时间', span: spanNum, type: 'datetime', hidden: !(this.paramsData && this.paramsData.readonly)},
messageContent: {label: '消息内容', span: spanNum, type: 'textarea', required: true, warningTitle: '可引用的告警字段包括[告警时间]、[管理网-公网IP]、[告警类型]、[告警设备]、[告警内容]'}
messageContent: {label: '消息内容', span: spanNum, type: 'textarea', required: true, warningTitle: '可引用的告警字段包括[告警时间]、[IP]、[告警类型]、[告警设备]、[告警内容]、[业务名称]'}
}
}];
},
src/views/resource/mtrAgent/lossRateChart.vue
+7 -2
View File
@@ -8,7 +8,10 @@
<div v-if="val &&val.failFlag === 1" class="failFlagSty">
<div class="textAlignCenter">探测失败 <br/>{{val.mtrClientId}}</div>
</div>
<EchartsLine v-else class="w100 h100" :key="`chart-${val && val.title || ''}-${item && item.title || ''}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item && item.dateDataTrans || {}" :dateShowType="item && item.dateShowType || 'datetimerange'" :title="item && item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData,val.title)"></EchartsLine>
<div v-else class="w100 h100" style="position: relative;">
<div style="position: absolute;">最新丢包率：{{item.dataVal.lastYDataNum || 'null'}}</div>
<EchartsLine class="w100 h100" :key="`chart-${val && val.title || ''}-${item && item.title || ''}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item && item.dateDataTrans || {}" :dateShowType="item && item.dateShowType || 'datetimerange'" :title="item && item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData,val.title)"></EchartsLine>
</div>
</div>
</div>
</el-collapse-item>
@@ -68,6 +71,7 @@
titleVal: {textAlign: 'left', left: '1%'},
yAxisName: ' ',
gridTop: '35%',
tooltipFormatter: {valueToop: {num: -1, msg: '探测失败'}},
legend: {},
lineXData: [],
dataList: [{
@@ -123,7 +127,8 @@
lossRateByMtr(Object.assign({}, {clientId: resVal[item].clientId, mtrClientId: resVal[item].mtrClientId || null}, this.currTimeList)).then(res => {
if (res && res.data) {
chartList.dataVal.lineXData = res.data && res.data.xData || [];
chartList.dataVal.dataList[0].data = res.data.yData && res.data.yData.packetLossRate ? res.data.yData.packetLossRate.map(item => item == '-1' ? 0 : item) : [];
chartList.dataVal.dataList[0].data = res.data.yData && res.data.yData.packetLossRate || [];
chartList.dataVal.lastYDataNum = chartList.dataVal.dataList[0].data.length > 0 ? chartList.dataVal.dataList[0].data[chartList.dataVal.dataList[0].data.length - 1] : null;
this.$set(this.chartDataLit, item, Object.assign({}, this.chartDataLit[item], {echartList: [chartList]}));
}
});
src/views/resource/mtrProbe/mtrProbe.vue
-1
View File
@@ -49,7 +49,6 @@
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
mtrTC: { label: `MTR探测策略`, minWidth: '120'},
policyName: { label: `策略名称`, minWidth: '120', visible: true},
priority: { label: `优先级`,minWidth: '60', visible: true },
mtrClientId: { label: `MTRClientID`, minWidth: '320', visible: true},
src/views/resource/serverRegister/monitorChart.vue
+6 -6
View File
@@ -225,8 +225,8 @@
formList: {type: '接口类型', status: '运行状态', speed: '速度', mac: '网卡MAC信息'},
formModel: {},
echartFors: [
{title: '的流量', oneName: '入站流量', twoName: '出站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
{title: '的丢包数(个)', oneName: '入站丢包', twoName: '出站丢包'},
{title: '的流量', oneName: '出站流量', twoName: '入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
{title: '的丢包数(个)', oneName: '出站丢包', twoName: '入站丢包'},
],
echartList: []
},
@@ -630,7 +630,7 @@
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[0].oneName,
data: res.data && res.data.yData['netInSpeedData'] || []
data: res.data && res.data.yData['netOutSpeedData'] || []
};
if (content.echartFors[0].unitSel) {
netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
@@ -638,7 +638,7 @@
}
netEcharts.dataVal.dataList[1] = {
name: content.echartFors[0].twoName,
data: res.data && res.data.yData['netOutSpeedData'] || []
data: res.data && res.data.yData['netInSpeedData'] || []
};
mountCollect['echartList'][0] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
@@ -662,11 +662,11 @@
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['inDroppedData'] || []
data: res.data && res.data.yData['outDroppedData'] || []
};
netEcharts.dataVal.dataList[1] = {
name: content.echartFors[1].twoName,
data: res.data && res.data.yData['outDroppedData'] || []
data: res.data && res.data.yData['inDroppedData'] || []
};
mountCollect['echartList'][1] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
src/views/resource/switchRegister/index.vue
+1 -1
View File
@@ -94,7 +94,7 @@
meltiple: true,
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
clientId: { label: `唯一标识`, minWidth: '200'},
switchName: { label: `交换机名称`, visible: true, minWidth: '120'},
hardwareSn: { label: `硬件SN`,minWidth: '250'},
resourceType: { label: `交换机类型`, minWidth: '100', slotName: 'tempType'},