feat: 引入v-chart，重要系统健康状态组件
parent
09453ae877
commit
146ec24afb
@ -0,0 +1,177 @@
|
|||||||
|
<template>
|
||||||
|
<ul class="system-health-ul">
|
||||||
|
<li
|
||||||
|
v-for="item in list"
|
||||||
|
:key="item.name"
|
||||||
|
>
|
||||||
|
<v-chart
|
||||||
|
v-if="JSON.stringify(item.option) != '{}'"
|
||||||
|
:option="item.option"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { cptColor } from '../config';
|
||||||
|
|
||||||
|
const list = ref();
|
||||||
|
|
||||||
|
const setOptions = () => {
|
||||||
|
list.value.forEach((item) => {
|
||||||
|
item.option = {
|
||||||
|
series: [
|
||||||
|
/*仪表盘图，做中间刻度线*/
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
radius: '100%',
|
||||||
|
startAngle: '0',
|
||||||
|
endAngle: '-359.99',
|
||||||
|
splitNumber: '60',
|
||||||
|
pointer: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 15,
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
length: 10,
|
||||||
|
lineStyle: {
|
||||||
|
color: cptColor(item.value, 0.5),
|
||||||
|
width: 2,
|
||||||
|
type: 'solid',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
/*内心原型图，展示整体数据概览*/
|
||||||
|
{
|
||||||
|
name: item.name,
|
||||||
|
type: 'pie',
|
||||||
|
clockwise: true,
|
||||||
|
startAngle: 90,
|
||||||
|
radius: ['55%', '65%'],
|
||||||
|
emphasis: {
|
||||||
|
scale: false,
|
||||||
|
},
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: item.value,
|
||||||
|
label: {
|
||||||
|
formatter: (params) => {
|
||||||
|
return `{title|${params.seriesName}}\n{value|${params.value}%}`;
|
||||||
|
},
|
||||||
|
position: 'center',
|
||||||
|
show: true,
|
||||||
|
rich: {
|
||||||
|
title: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: 'normal',
|
||||||
|
color: 'rgba(255,255,255,.6)',
|
||||||
|
fontFamily: 'xxx字体',
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 36,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontFamily: 'xxx字体',
|
||||||
|
padding: [8, 0, 0, 0],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: cptColor(item.value),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100 - item.value,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(42,42,42,1)', // 未完成的圆环的颜色
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: 'rgba(42,42,42,1)', // 未完成的圆环的颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
labelLine: { show: false },
|
||||||
|
label: { show: false },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getMajorSystemHealthStatusData = () => {
|
||||||
|
console.log('执行请求MajorSystemHealthStatus');
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve([
|
||||||
|
{
|
||||||
|
name: '重要系统',
|
||||||
|
value: 55,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '核心平台',
|
||||||
|
value: 75,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '关键网络',
|
||||||
|
value: 85,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '基础设置',
|
||||||
|
value: 95,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initFN = () => {
|
||||||
|
getMajorSystemHealthStatusData().then((res) => {
|
||||||
|
list.value = res;
|
||||||
|
setOptions();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
name: 'MajorSystemHealthStatus',
|
||||||
|
init: initFN,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.system-health-ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
height: calc(100% - 20px);
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
const colorEnum = {
|
||||||
|
critical: {
|
||||||
|
R: 255,
|
||||||
|
G: 87,
|
||||||
|
B: 77,
|
||||||
|
A: 1,
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
R: 254,
|
||||||
|
G: 138,
|
||||||
|
B: 55,
|
||||||
|
A: 1,
|
||||||
|
},
|
||||||
|
major: {
|
||||||
|
R: 67,
|
||||||
|
G: 128,
|
||||||
|
B: 229,
|
||||||
|
A: 1,
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
R: 85,
|
||||||
|
G: 251,
|
||||||
|
B: 170,
|
||||||
|
A: 1,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const getColor = (key: string = 'info', alpha: number = 1) => {
|
||||||
|
return `rgba(${colorEnum[key].R}, ${colorEnum[key].G}, ${colorEnum[key].B}, ${alpha || colorEnum[key].A})`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const cptColor = (value: number, alpha: number = 1) => {
|
||||||
|
let color = '';
|
||||||
|
switch (true) {
|
||||||
|
case value < 70:
|
||||||
|
color = getColor('critical', alpha);
|
||||||
|
break;
|
||||||
|
case value >= 70 && value < 80:
|
||||||
|
color = getColor('warning', alpha);
|
||||||
|
break;
|
||||||
|
case value >= 80 && value < 90:
|
||||||
|
color = getColor('major', alpha);
|
||||||
|
break;
|
||||||
|
case value >= 90:
|
||||||
|
color = getColor('info', alpha);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return color;
|
||||||
|
};
|
||||||
|
|
||||||
|
const keyColor = (value, alpha = 1) => {
|
||||||
|
return getColor(value, alpha);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { colorEnum, getColor, cptColor, keyColor };
|
||||||
Loading…
Reference in New Issue