|
|
|
@ -247,7 +247,7 @@ export default { |
|
|
|
components: { History, Interface, Vlan, Routing, LineChart, Veneer}, |
|
|
|
components: { History, Interface, Vlan, Routing, LineChart, Veneer}, |
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
DateValue: [dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'),dayjs().format('YYYY-MM-DD HH:mm:ss')], |
|
|
|
DateValue: [dayjs().subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss'),dayjs().format('YYYY-MM-DD HH:mm:ss')], |
|
|
|
selectedTab: 1, |
|
|
|
selectedTab: 1, |
|
|
|
tabs: [ |
|
|
|
tabs: [ |
|
|
|
{ name: '历史预警' }, |
|
|
|
{ name: '历史预警' }, |
|
|
|
@ -447,62 +447,73 @@ mounted() { |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
] |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
const value = this.details.cpuUtilization / 100; |
|
|
|
usedmemory3.setOption({ |
|
|
|
usedmemory3.setOption({ |
|
|
|
title: [ |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: 'CPU占用', |
|
|
|
type: 'liquidFill', |
|
|
|
left: '45%', |
|
|
|
radius: '47%', |
|
|
|
top: '55%', |
|
|
|
center: ['25%', '45%'], |
|
|
|
textAlign: 'center', |
|
|
|
color: [ |
|
|
|
textStyle: { |
|
|
|
{ |
|
|
|
fontSize: '14', |
|
|
|
type: 'linear', |
|
|
|
fontWeight: '400', |
|
|
|
x: 0, |
|
|
|
color: '#6AA0E4', |
|
|
|
y: 0, |
|
|
|
textAlign: 'center', |
|
|
|
x2: 0, |
|
|
|
textShadowColor: '#000', |
|
|
|
y2: 1, |
|
|
|
|
|
|
|
colorStops: [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
offset: 0, |
|
|
|
|
|
|
|
color: '#446bf5', |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
offset: 1, |
|
|
|
|
|
|
|
color: '#2ca3e2', |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
], |
|
|
|
series: { |
|
|
|
globalCoord: false, |
|
|
|
type: 'pie', |
|
|
|
}, |
|
|
|
radius: ['90%', "100%"], |
|
|
|
], |
|
|
|
hoverAnimation: false, |
|
|
|
data: [value, value], // data个数代表波浪数 |
|
|
|
data: [ |
|
|
|
backgroundStyle: { |
|
|
|
{ |
|
|
|
borderWidth: 1, |
|
|
|
value: this.details.cpuUtilization, |
|
|
|
color: 'RGBA(51, 66, 127, 0.7)', |
|
|
|
|
|
|
|
}, |
|
|
|
label: { |
|
|
|
label: { |
|
|
|
normal: { |
|
|
|
normal: { |
|
|
|
color: '#6AA0E4', |
|
|
|
textStyle: { |
|
|
|
fontSize: 22, |
|
|
|
fontSize: 50, |
|
|
|
fontWeight: 'bold', |
|
|
|
color: '#fff', |
|
|
|
formatter: function(params) { |
|
|
|
|
|
|
|
return params.value + '%'; |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
position: 'center', |
|
|
|
formatter: function(params) { |
|
|
|
show: true, |
|
|
|
return Math.round(params.value * 100) + '%'; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
|
|
|
|
normal: { |
|
|
|
|
|
|
|
color: '#6AA0E4' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
},{ |
|
|
|
|
|
|
|
value: 100-this.details.cpuUtilization, |
|
|
|
|
|
|
|
name: '', |
|
|
|
|
|
|
|
labelLine: { |
|
|
|
|
|
|
|
show: false |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
outline: { |
|
|
|
|
|
|
|
// show: false |
|
|
|
|
|
|
|
borderDistance: 0, |
|
|
|
itemStyle: { |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
borderWidth: 2, |
|
|
|
color: '#D8D8D8' |
|
|
|
borderColor: '#112165', |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
emphasis:{ |
|
|
|
|
|
|
|
color:'#D8D8D8' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}] |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
title: [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
text: 'CPU占用', |
|
|
|
|
|
|
|
left: '25%', |
|
|
|
|
|
|
|
top: '75%', |
|
|
|
|
|
|
|
textAlign: 'center', |
|
|
|
|
|
|
|
textStyle: { |
|
|
|
|
|
|
|
fontSize: '14', |
|
|
|
|
|
|
|
fontWeight: '400', |
|
|
|
|
|
|
|
color: '#6AA0E4', |
|
|
|
|
|
|
|
textAlign: 'center', |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
] |
|
|
|
}) |
|
|
|
}) |
|
|
|
usedmemory4.setOption({ |
|
|
|
usedmemory4.setOption({ |
|
|
|
title: [ |
|
|
|
title: [ |
|
|
|
@ -606,28 +617,6 @@ mounted() { |
|
|
|
// 处理不同数据的显示格式 |
|
|
|
// 处理不同数据的显示格式 |
|
|
|
if (item.seriesName === '设备温度') { |
|
|
|
if (item.seriesName === '设备温度') { |
|
|
|
unit = '℃'; |
|
|
|
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 + ')<br/>'; |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} else { |
|
|
|
} else { |
|
|
|
unit = '%'; |
|
|
|
unit = '%'; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -637,7 +626,7 @@ mounted() { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
legend: { |
|
|
|
data: ['设备温度', 'CPU使用率', '内存使用率', '健康度'], |
|
|
|
data: ['设备温度', 'CPU使用率', '内存使用率'], |
|
|
|
textStyle: { |
|
|
|
textStyle: { |
|
|
|
color: '#718096' |
|
|
|
color: '#718096' |
|
|
|
} |
|
|
|
} |
|
|
|
@ -764,43 +753,6 @@ mounted() { |
|
|
|
}] |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
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)' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
] |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
Wangxin
8 months ago