303 lines
9.0 KiB
Vue
303 lines
9.0 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div class="px-4 text-sm text-gray-500">
|
|||
|
|
分析指数是根据网络行为大数据出具的分析评估参考分数，分数越高越好。该指数仅对本报告有效，不代表对报告查询人的综合定性评价。
|
|||
|
|
</div>
|
|||
|
|
<div ref="chartRef" :style="{ width: '100%', height: '200px' }"></div>
|
|||
|
|
<div class="risk-description">
|
|||
|
|
{{ riskDescription }}
|
|||
|
|
</div>
|
|||
|
|
<div class="risk-legend mt-6">
|
|||
|
|
<div v-for="item in legendItems" :key="item.level" class="risk-legend__item">
|
|||
|
|
<span class="risk-legend__pill" :style="{ backgroundColor: item.color, color: item.textColor }">
|
|||
|
|
{{ item.range }}
|
|||
|
|
</span>
|
|||
|
|
<span class="risk-legend__text">{{ item.level }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import * as echarts from "echarts";
|
|||
|
|
import { ref, onMounted, onUnmounted, watch, computed } from "vue";
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
score: {
|
|||
|
|
type: Number,
|
|||
|
|
required: true,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 根据分数计算风险等级和颜色（分数越高越安全）
|
|||
|
|
const riskLevel = computed(() => {
|
|||
|
|
const score = props.score;
|
|||
|
|
if (score >= 75 && score <= 100) {
|
|||
|
|
return {
|
|||
|
|
level: "无任何风险",
|
|||
|
|
color: "#52c41a",
|
|||
|
|
gradient: [
|
|||
|
|
{ offset: 0, color: "#52c41a" },
|
|||
|
|
{ offset: 1, color: "#7fdb42" }
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
} else if (score >= 50 && score < 75) {
|
|||
|
|
return {
|
|||
|
|
level: "风险指数较低",
|
|||
|
|
color: "#faad14",
|
|||
|
|
gradient: [
|
|||
|
|
{ offset: 0, color: "#faad14" },
|
|||
|
|
{ offset: 1, color: "#ffc53d" }
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
} else if (score >= 25 && score < 50) {
|
|||
|
|
return {
|
|||
|
|
level: "风险指数较高",
|
|||
|
|
color: "#fa8c16",
|
|||
|
|
gradient: [
|
|||
|
|
{ offset: 0, color: "#fa8c16" },
|
|||
|
|
{ offset: 1, color: "#ffa940" }
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
} else {
|
|||
|
|
return {
|
|||
|
|
level: "高风险警告",
|
|||
|
|
color: "#f5222d",
|
|||
|
|
gradient: [
|
|||
|
|
{ offset: 0, color: "#f5222d" },
|
|||
|
|
{ offset: 1, color: "#ff4d4f" }
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 评分解释文本（分数越高越安全）
|
|||
|
|
const riskDescription = computed(() => {
|
|||
|
|
const score = props.score;
|
|||
|
|
if (score >= 75 && score <= 100) {
|
|||
|
|
return "根据综合分析，当前报告未检测到明显风险因素，各项指标表现正常，总体状况良好。";
|
|||
|
|
} else if (score >= 50 && score < 75) {
|
|||
|
|
return "根据综合分析，当前报告存在少量风险信号，建议关注相关指标变化，保持警惕。";
|
|||
|
|
} else if (score >= 25 && score < 50) {
|
|||
|
|
return "根据综合分析，当前报告风险指数较高，多项指标显示异常，建议进一步核实相关情况。";
|
|||
|
|
} else {
|
|||
|
|
return "根据综合分析，当前报告显示高度风险状态，多项重要指标严重异常，请立即采取相应措施。";
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const chartRef = ref(null);
|
|||
|
|
let chartInstance = null;
|
|||
|
|
|
|||
|
|
const legendItems = [
|
|||
|
|
{ level: "高风险", color: "#f5222d", range: "0-24", textColor: "#ffffff" },
|
|||
|
|
{ level: "一般", color: "#fa8c16", range: "25-49", textColor: "#ffffff" },
|
|||
|
|
{ level: "良好", color: "#faad14", range: "50-74", textColor: "#ffffff" },
|
|||
|
|
{ level: "优秀", color: "#52c41a", range: "75-100", textColor: "#ffffff" }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const initChart = () => {
|
|||
|
|
if (!chartRef.value) return;
|
|||
|
|
|
|||
|
|
// 初始化ECharts实例
|
|||
|
|
chartInstance = echarts.init(chartRef.value);
|
|||
|
|
updateChart();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const updateChart = () => {
|
|||
|
|
if (!chartInstance) return;
|
|||
|
|
|
|||
|
|
// 获取当前风险等级信息
|
|||
|
|
const risk = riskLevel.value;
|
|||
|
|
|
|||
|
|
// 配置项
|
|||
|
|
const option = {
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: "gauge",
|
|||
|
|
startAngle: 180,
|
|||
|
|
endAngle: 0,
|
|||
|
|
min: 0,
|
|||
|
|
max: 100,
|
|||
|
|
radius: "100%",
|
|||
|
|
center: ["50%", "80%"],
|
|||
|
|
itemStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, risk.gradient),
|
|||
|
|
shadowBlur: 6,
|
|||
|
|
shadowColor: risk.color,
|
|||
|
|
},
|
|||
|
|
progress: {
|
|||
|
|
show: true,
|
|||
|
|
width: 20,
|
|||
|
|
roundCap: true,
|
|||
|
|
clip: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
roundCap: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 20,
|
|||
|
|
color: [
|
|||
|
|
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: risk.color + "30" // 使用风险颜色，透明度20%
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: risk.color + "25" // 使用风险颜色，透明度10%
|
|||
|
|
}
|
|||
|
|
])]
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: true,
|
|||
|
|
distance: -30,
|
|||
|
|
length: 6,
|
|||
|
|
splitNumber: 10, // 每1分一个小刻度
|
|||
|
|
lineStyle: {
|
|||
|
|
color: risk.color,
|
|||
|
|
width: 1,
|
|||
|
|
opacity: 0.5
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
distance: -36,
|
|||
|
|
length: 12,
|
|||
|
|
splitNumber: 9, // 9个大刻度，100分分成9个区间
|
|||
|
|
lineStyle: {
|
|||
|
|
color: risk.color,
|
|||
|
|
width: 2,
|
|||
|
|
opacity: 0.5
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
anchor: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
pointer: {
|
|||
|
|
icon: "triangle",
|
|||
|
|
iconStyle: {
|
|||
|
|
color: risk.color,
|
|||
|
|
borderColor: risk.color,
|
|||
|
|
borderWidth: 1
|
|||
|
|
},
|
|||
|
|
offsetCenter: ["7%", "-67%"],
|
|||
|
|
length: "10%",
|
|||
|
|
width: 15
|
|||
|
|
},
|
|||
|
|
detail: {
|
|||
|
|
valueAnimation: true,
|
|||
|
|
fontSize: 30,
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
color: risk.color,
|
|||
|
|
offsetCenter: [0, "-25%"],
|
|||
|
|
formatter: function (value) {
|
|||
|
|
return `{value|${value}分}\n{level|${risk.level}}`;
|
|||
|
|
},
|
|||
|
|
rich: {
|
|||
|
|
value: {
|
|||
|
|
fontSize: 30,
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
color: risk.color,
|
|||
|
|
padding: [0, 0, 5, 0]
|
|||
|
|
},
|
|||
|
|
level: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
color: risk.color,
|
|||
|
|
padding: [5, 0, 0, 0]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
value: props.score
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
title: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: risk.color,
|
|||
|
|
offsetCenter: [0, "10%"],
|
|||
|
|
formatter: risk.level
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 使用配置项设置图表
|
|||
|
|
chartInstance.setOption(option);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 监听分数变化
|
|||
|
|
watch(
|
|||
|
|
() => props.score,
|
|||
|
|
() => {
|
|||
|
|
updateChart();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
initChart();
|
|||
|
|
|
|||
|
|
// 处理窗口大小变化
|
|||
|
|
window.addEventListener("resize", () => {
|
|||
|
|
if (chartInstance) {
|
|||
|
|
chartInstance.resize();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 在组件销毁前清理
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
if (chartInstance) {
|
|||
|
|
chartInstance.dispose();
|
|||
|
|
chartInstance = null;
|
|||
|
|
}
|
|||
|
|
window.removeEventListener("resize", chartInstance?.resize);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.risk-description {
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
padding: 0 12px;
|
|||
|
|
color: #666666;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.risk-legend {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
padding: 0 16px 12px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-legend__item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-legend__pill {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 2px 12px;
|
|||
|
|
border-radius: 9999px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
min-width: 64px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-legend__text {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
</style>
|