+
-
@@ -289,317 +368,7 @@ mounted() {
// 性能图表
let details = this.historyQueryData;
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")
- const usedmemory4 = echarts.init(this.$refs.usedmemory4, "macarons")
- const usedmemory5 = echarts.init(this.$refs.usedmemory5, "macarons")
- const chartData = { min: 0, max: 100, value: 70 };
- usedmemory.setOption({
- series: [
- {
- type: 'gauge',
- center: ['50%', '60%'],
- radius: '90%',
- min: chartData.min,
- max: chartData.max,
- startAngle: 220,
- endAngle: -40,
- splitNumber: 8,
- axisLine: {
- lineStyle: {
- color: [
- [0.25, '#7afeaf'],
- [0.5, '#58d9f9'],
- [0.75, '#fbdd5e'],
- [1, '#f03b44'],
- ],
- width: 10,
- },
- },
- splitLine: {
- // 分隔线
- show: true,
- length: 15,
- distance: 10,
- lineStyle: {
- width: 2,
- color: 'auto',
- },
- },
- axisTick: {
- // 刻度线样式（及短线样式）
- show: true,
- lineStyle: {
- width: 2,
- color: 'auto',
- },
- length: 10,
- distance: 10,
- },
- axisLabel: false,
- detail: {
- fontSize: '16',
- formatter: '{value}℃',
- color: 'auto',
- offsetCenter: ['0', '0%'],
- },
- pointer: {
- icon: 'triangle',
- show: true,
-
- offsetCenter: [0, '-70%'],
- itemStyle: {
- color: 'auto',
- },
- length: '10%',
- width: '3%',
- },
- data: [
- {
- value: this.details.temperature,
-
- name: '温度',
- title: {
- show: true,
- color: '#606266',
- offsetCenter: [0, '70%'],
- fontSize: 18,
- }
- },
- ],
- }
- ]
- })
- usedmemory2.setOption({
- series: [
- {
- type: 'gauge',
- center: ['50%', '60%'],
- radius: '90%',
- min: chartData.min,
- max: chartData.max,
- startAngle: 220,
- endAngle: -40,
- splitNumber: 8,
- axisLine: {
- lineStyle: {
- color: [
- [0.25, '#f03b44'],
- [0.5, '#fbdd5e'],
- [0.75, '#58d9f9'],
- [1, '#7afeaf'],
- ],
- width: 10,
- },
- },
- splitLine: {
- // 分隔线
- show: true,
- length: 15,
- distance: 10,
- lineStyle: {
- width: 2,
- color: 'auto',
- },
- },
- axisTick: {
- // 刻度线样式（及短线样式）
- show: true,
- lineStyle: {
- width: 2,
- color: 'auto',
- },
- length: 10,
- distance: 10,
- },
- axisLabel: false,
- detail: {
- fontSize: '16',
- formatter: '{value}',
- color: 'auto',
- offsetCenter: ['0', '0%'],
- },
- pointer: {
- icon: 'triangle',
- show: true,
-
- offsetCenter: [0, '-70%'],
- itemStyle: {
- color: 'auto',
- },
- length: '10%',
- width: '3%',
- },
- data: [
- {
- value: this.details.health == 1 ? '100' : this.details.health == 2 ? '75': this.details.health == 3 ? '50': this.details.health == 4 ? '25' : '0',
-
- name: '健康度',
- title: {
- show: true,
- color: '#606266',
- offsetCenter: [0, '70%'],
- fontSize: 18,
- }
- },
- ],
- }
- ]
- })
- const value = this.details.cpuUtilization / 100;
- usedmemory3.setOption({
- series: [
- {
- type: 'liquidFill',
- radius: '47%',
- center: ['25%', '45%'],
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: '#446bf5',
- },
- {
- offset: 1,
- color: '#2ca3e2',
- },
- ],
- globalCoord: false,
- },
- ],
- data: [value, value], // data个数代表波浪数
- backgroundStyle: {
- borderWidth: 1,
- color: 'RGBA(51, 66, 127, 0.7)',
- },
- label: {
- normal: {
- textStyle: {
- fontSize: 50,
- color: '#fff',
- },
- formatter: function(params) {
- return Math.round(params.value * 100) + '%';
- }
- },
- },
- outline: {
- // show: false
- borderDistance: 0,
- itemStyle: {
- borderWidth: 2,
- borderColor: '#112165',
- },
- },
- }
- ],
- title: [
- {
- text: 'CPU占用',
- left: '25%',
- top: '75%',
- textAlign: 'center',
- textStyle: {
- fontSize: '14',
- fontWeight: '400',
- color: '#6AA0E4',
- textAlign: 'center',
- },
- },
- ]
- })
- usedmemory4.setOption({
- title: [
- {
- text: '内存使用率',
- left: '45%',
- top: '55%',
- textAlign: 'center',
- textStyle: {
- fontSize: '14',
- fontWeight: '400',
- color: '#6AA0E4',
- textAlign: 'center',
- textShadowColor: '#000',
- },
- },
- ],
- series: {
- type: 'pie',
- radius: ['90%', "100%"],
- hoverAnimation: false,
- data: [
- {
- value: this.details.memoryUtilization,
- label: {
- normal: {
- color: '#6AA0E4',
- fontSize: 22,
- fontWeight: 'bold',
- formatter: function(params) {
- return params.value + '%';
- },
- position: 'center',
- show: true,
- }
- },
- itemStyle: {
- normal: {
- color: '#6AA0E4'
- }
- }
- },{
- value: 100-this.details.memoryUtilization,
- name: '',
- labelLine: {
- show: false
- },
- itemStyle: {
- normal: {
- color: '#D8D8D8'
- },
- emphasis:{
- color:'#D8D8D8'
- }
- }
- }]
- }
- })
-
- usedmemory5.setOption({
- series: [
- {
- type: 'pie',
- radius: [0, '100%'],
- center: ['50%', '50%'],
- label: {
- position: 'inside',
- formatter: '{b}\n{c}',
- color: '#30465D'
- },
- labelLine: {
- length: 5,
- length2: 5
- },
- data: [{
- name: '输入',
- value: this.details.volIn
- },
- {
- name: '输出',
- value: this.details.volOut
- }
- ]
- }
- ]
- })
+ // 已删除usedmemory系列图表的初始化代码
combinedPerformanceChart.setOption({
tooltip: {
trigger: 'axis',
@@ -761,8 +530,6 @@ mounted() {
// 响应窗口大小变化
window.addEventListener('resize', function() {
combinedPerformanceChart.resize();
- usedmemory.resize();
- usedmemory2.resize();
// trafficChart.resize();
});
},
@@ -793,14 +560,46 @@ mounted() {
this.historyQueryList.minTime = date[0]
this.historyQueryList.maxTime = date[1]
this.gethistoryQuery(this.$route.params.id)
+ },
+ // 根据温度值返回对应的样式类
+ getTemperatureClass(temperature) {
+ if (!temperature || isNaN(temperature)) return 'temperature-normal';
+ const temp = Number(temperature);
+ if (temp < 20) return 'temperature-low';
+ if (temp >= 20 && temp <= 30) return 'temperature-normal';
+ if (temp > 30 && temp <= 40) return 'temperature-high';
+ return 'temperature-danger';
+ },
+ // 根据健康度返回对应的样式类
+ getHealthClass(health) {
+ switch(health) {
+ case 1:
+ return 'health-excellent';
+ case 2:
+ return 'health-good';
+ case 3:
+ return 'health-fair';
+ case 4:
+ return 'health-poor';
+ default:
+ return 'health-good';
+ }
+ },
+ // 根据使用率返回对应的样式类
+ getUtilizationClass(utilization) {
+ if (!utilization || isNaN(utilization)) return 'utilization-normal';
+ const value = Number(utilization);
+ if (value <= 50) return 'utilization-normal';
+ if (value > 50 && value <= 80) return 'utilization-warning';
+ return 'utilization-danger';
}
}
}
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue
index c4be9c7c..fa5ac6fa 100644
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue
@@ -33,13 +33,13 @@
- 删除
+ 删除
@@ -80,9 +80,9 @@
- 去处理
- 编辑
- 删除
+ 去处理
+ 编辑
+ 删除