feat: 告警趋势图
parent
1d28e84e9a
commit
48b41e6b82
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<v-chart
|
||||
v-if="JSON.stringify(option) != '{}'"
|
||||
:option="option"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { keyColor, colorEnum } from '../config';
|
||||
|
||||
const colorArrar = Object.keys(colorEnum);
|
||||
const timeList = ref([
|
||||
'00:00',
|
||||
'01:00',
|
||||
'02:00',
|
||||
'03:00',
|
||||
'04:00',
|
||||
'05:00',
|
||||
'06:00',
|
||||
'07:00',
|
||||
'08:00',
|
||||
'09:00',
|
||||
'10:00',
|
||||
'11:00',
|
||||
'12:00',
|
||||
'13:00',
|
||||
'14:00',
|
||||
'15:00',
|
||||
'16:00',
|
||||
'17:00',
|
||||
'18:00',
|
||||
'19:00',
|
||||
'20:00',
|
||||
'21:00',
|
||||
'22:00',
|
||||
'23:00',
|
||||
]);
|
||||
const option = ref({});
|
||||
let list = [];
|
||||
|
||||
const setOptions = () => {
|
||||
option.value = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: timeList.value,
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(31, 99, 163, 0.2)',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(31, 99, 163, 0.1)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#7eb7fd',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(31, 99, 163, 0.2)',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(31, 99, 163, 0.1)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#7eb7fd',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.6)',
|
||||
borderColor: 'rgba(147, 235, 248, 0.8)',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
left: '20px',
|
||||
right: '20px',
|
||||
bottom: '25px',
|
||||
top: '35px',
|
||||
containLabel: true,
|
||||
borderColor: '#1f63a3',
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
icon: 'circle',
|
||||
right: 'center',
|
||||
top: 5,
|
||||
left: 'center',
|
||||
itemWidth: 12,
|
||||
textStyle: {
|
||||
color: 'rgb(85, 185, 216)',
|
||||
},
|
||||
data: list.map((item) => item.name),
|
||||
},
|
||||
series: list.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
type: 'line',
|
||||
data: item.value,
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
color: keyColor(item.prop, 0.7),
|
||||
};
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
const getAlarmTrendData = () => {
|
||||
console.log('执行请求AlarmTrend');
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve([
|
||||
{
|
||||
name: '子系统数',
|
||||
value: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
|
||||
},
|
||||
{
|
||||
name: '数据库',
|
||||
value: [39, 2, 25, 8, 44, 19, 31, 12, 16, 43, 7, 26, 1, 37, 20, 5, 33, 48, 10, 36, 17, 50, 30, 15],
|
||||
},
|
||||
{
|
||||
name: '主机',
|
||||
value: [8, 22, 35, 1, 39, 16, 44, 10, 24, 4, 18, 32, 26, 47, 6, 3, 40, 21, 14, 33, 13, 49, 28, 42],
|
||||
},
|
||||
{
|
||||
name: '存储',
|
||||
value: [12, 5, 23, 41, 34, 7, 19, 29, 48, 2, 36, 15, 27, 3, 45, 20, 38, 11, 30, 46, 9, 25, 14, 50],
|
||||
},
|
||||
]);
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
|
||||
const initFN = () => {
|
||||
getAlarmTrendData().then((result) => {
|
||||
list = result.map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
prop: colorArrar[index],
|
||||
};
|
||||
});
|
||||
setOptions();
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
name: 'AlarmTrend',
|
||||
init: initFN,
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue