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