+
-
@@ -263,7 +254,7 @@ export default {
{ name: '接口信息' },
{ name: 'VLAN信息' },
{ name: '路由表信息' },
- { name: 'venner信息' },
+ // { name: 'venner信息' },
],
tabIndex: 0,
dsId:null,
@@ -289,13 +280,15 @@ mounted() {
}, 1000)
},
methods: {
+ formatDuration(input) {// 类型安全校验
+ if (typeof input !== 'string') return "0天0小时";
+ const match = input.match(/(\d+)\s*days?,\s*(\d+):/i);
+ return match ? `${match[1]}天${match[2]}小时` : "0天0小时";
+ },
initCharts() {
// 性能图表
let details = this.historyQueryData;
- const performanceChart = echarts.init(document.getElementById('performanceChart'));
- const performanceChart2 = echarts.init(document.getElementById('performanceChart2'));
- const performanceChart3 = echarts.init(document.getElementById('performanceChart3'));
- const performanceChart4 = echarts.init(document.getElementById('performanceChart4'));
+ const combinedPerformanceChart = echarts.init(document.getElementById('combinedPerformanceChart'));
const usedmemory = echarts.init(this.$refs.usedmemory, "macarons")
const usedmemory2 = echarts.init(this.$refs.usedmemory2, "macarons")
const usedmemory3 = echarts.init(this.$refs.usedmemory3, "macarons")
@@ -596,95 +589,55 @@ mounted() {
}
]
})
- performanceChart.setOption({
+ combinedPerformanceChart.setOption({
tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['设备温度'],
- textStyle: {
- color: '#718096'
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: [...details.temperatureList],
- axisLine: {
- lineStyle: {
- color: '#cbd5e0'
- }
- },
- axisLabel: {
- color: '#718096'
- }
- },
- yAxis: {
- type: 'value',
- axisLine: {
- lineStyle: {
- color: '#cbd5e0'
+ trigger: 'axis',
+ formatter: function(params) {
+ // 检查params数组是否为空
+ if (!params || params.length === 0) {
+ return '';
}
- },
- axisLabel: {
- color: '#718096',
- formatter: '{value}%'
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(203, 213, 224, 0.6)'
- }
- }
- },
- dataZoom: [
- {
- type: 'inside', // 内部滚轮控制
- xAxisIndex: 0,
- start: 0,
- end: 50
- }
- ],
- series: [
- {
- name: '设备温度',
- type: 'line',
- smooth: true,
- data: [...details.temperatureList],
- lineStyle: {
- color: '#4299e1'
- },
- itemStyle: {
- color: '#4299e1'
- },
- areaStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: 'rgba(66, 153, 225, 0.3)'
- }, {
- offset: 1, color: 'rgba(66, 153, 225, 0.1)'
- }]
+
+ let result = params[0].axisValue + '
';
+ params.forEach(function(item) {
+ let value = item.value;
+ let unit = '';
+
+ // 处理不同数据的显示格式
+ if (item.seriesName === '设备温度') {
+ unit = '℃';
+ } else if (item.seriesName === '健康度') {
+ // 获取原始健康度值 - 修复访问方式
+ // 通过映射关系反向计算原始值
+ let originalValue;
+ switch(value) {
+ case 100: originalValue = 1; break;
+ case 75: originalValue = 2; break;
+ case 50: originalValue = 3; break;
+ case 25: originalValue = 4; break;
+ default: originalValue = 0;
+ }
+
+ let statusText = '';
+ switch(originalValue) {
+ case 1: statusText = '健康'; break;
+ case 2: statusText = '良好'; break;
+ case 3: statusText = '一般'; break;
+ case 4: statusText = '需维护'; break;
+ default: statusText = '未知';
+ }
+ result += item.marker + item.seriesName + ': ' + value + '% (' + statusText + ')
';
+ return;
+ } else {
+ unit = '%';
}
- }
+ result += item.marker + item.seriesName + ': ' + value + unit + '
';
+ });
+ return result;
}
- ]
- });
- performanceChart4.setOption({
- tooltip: {
- trigger: 'axis'
},
legend: {
- data: ['健康度'],
+ data: ['设备温度', 'CPU使用率', '内存使用率', '健康度'],
textStyle: {
color: '#718096'
}
@@ -717,7 +670,7 @@ mounted() {
},
axisLabel: {
color: '#718096',
- formatter: '{value}%'
+ formatter: '{value}'
},
splitLine: {
lineStyle: {
@@ -735,10 +688,10 @@ mounted() {
],
series: [
{
- name: '健康度',
+ name: '设备温度',
type: 'line',
smooth: true,
- data: [...details.healthList],
+ data: [...details.temperatureList],
lineStyle: {
color: '#4299e1'
},
@@ -759,74 +712,17 @@ mounted() {
}]
}
}
- }
- ]
- });
- performanceChart3.setOption({
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['CPU使用率'],
- textStyle: {
- color: '#718096'
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: [...details.timeList],
- axisLine: {
- lineStyle: {
- color: '#cbd5e0'
- }
},
- axisLabel: {
- color: '#718096'
- }
- },
- yAxis: {
- type: 'value',
- axisLine: {
- lineStyle: {
- color: '#cbd5e0'
- }
- },
- axisLabel: {
- color: '#718096',
- formatter: '{value}%'
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(203, 213, 224, 0.6)'
- }
- }
- },
- dataZoom: [
- {
- type: 'inside', // 内部滚轮控制
- xAxisIndex: 0,
- start: 0,
- end: 50
- }
- ],
- series: [
{
name: 'CPU使用率',
type: 'line',
smooth: true,
data: [...details.cpuList],
lineStyle: {
- color: '#4299e1'
+ color: '#f56565'
},
itemStyle: {
- color: '#4299e1'
+ color: '#f56565'
},
areaStyle: {
color: {
@@ -836,80 +732,23 @@ mounted() {
x2: 0,
y2: 1,
colorStops: [{
- offset: 0, color: 'rgba(66, 153, 225, 0.3)'
+ offset: 0, color: 'rgba(245, 101, 101, 0.3)'
}, {
- offset: 1, color: 'rgba(66, 153, 225, 0.1)'
+ offset: 1, color: 'rgba(245, 101, 101, 0.1)'
}]
}
}
- }
- ]
- });
- performanceChart2.setOption({
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['内存使用率'],
- textStyle: {
- color: '#718096'
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: [...details.timeList],
- axisLine: {
- lineStyle: {
- color: '#cbd5e0'
- }
},
- axisLabel: {
- color: '#718096'
- }
- },
- yAxis: {
- type: 'value',
- axisLine: {
- lineStyle: {
- color: '#cbd5e0'
- }
- },
- axisLabel: {
- color: '#718096',
- formatter: '{value}%'
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(203, 213, 224, 0.6)'
- }
- }
- },
- dataZoom: [
- {
- type: 'inside', // 内部滚轮控制
- xAxisIndex: 0,
- start: 0,
- end: 50
- }
- ],
- series: [
{
name: '内存使用率',
type: 'line',
smooth: true,
data: [...details.memoryList],
lineStyle: {
- color: '#4299e1'
+ color: '#48bb78'
},
itemStyle: {
- color: '#4299e1'
+ color: '#48bb78'
},
areaStyle: {
color: {
@@ -919,21 +758,57 @@ mounted() {
x2: 0,
y2: 1,
colorStops: [{
- offset: 0, color: 'rgba(66, 153, 225, 0.3)'
+ offset: 0, color: 'rgba(72, 187, 120, 0.3)'
}, {
- offset: 1, color: 'rgba(66, 153, 225, 0.1)'
+ offset: 1, color: 'rgba(72, 187, 120, 0.1)'
}]
}
}
+ },
+ {
+ name: '健康度',
+ type: 'bar',
+ // 将健康度值映射为对应的百分比：1->100, 2->75, 3->50, 4->25
+ // 使用对象格式存储数据，同时包含映射值和原始值
+ data: details.healthList.map(value => {
+ const valueMap = {1: 100, 2: 75, 3: 50, 4: 25};
+ // 使用value属性表示显示的值，原始值可以通过自定义字段存储
+ return {
+ value: valueMap[value] || 0,
+ originalValue: value
+ };
+ }),
+ itemStyle: {
+ color: function(params) {
+ // 获取原始健康度值进行颜色映射
+ const originalValue = params.data && params.data.originalValue !== undefined ?
+ params.data.originalValue : params.value;
+ // 使用switch语句替代对象查找，确保每个case都有break
+ switch(originalValue) {
+ case 1: return '#48bb78'; // 健康 - 绿色
+ case 2: return '#4299e1'; // 良好 - 蓝色
+ case 3: return '#ed8936'; // 一般 - 橙色
+ case 4: return '#f56565'; // 需维护 - 红色
+ default: return '#a0aec0'; // 默认灰色
+ }
+ }
+ },
+ barWidth: '40%',
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
}
]
});
+
+
// 响应窗口大小变化
window.addEventListener('resize', function() {
- performanceChart.resize();
- performanceChart2.resize();
- performanceChart3.resize();
- performanceChart4.resize();
+ combinedPerformanceChart.resize();
usedmemory.resize();
usedmemory2.resize();
// trafficChart.resize();
@@ -971,7 +846,13 @@ mounted() {
}
}
+