370 lines
12 KiB
Vue
370 lines
12 KiB
Vue
<script setup>
|
||
import { computed, ref, onMounted, onUnmounted, watch } from "vue";
|
||
import * as echarts from "echarts";
|
||
import { useRiskNotifier } from "@/composables/useRiskNotifier";
|
||
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
apiId: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
index: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
notifyRiskStatus: {
|
||
type: Function,
|
||
default: () => { },
|
||
},
|
||
});
|
||
|
||
// 计算得分，如果没有数据则默认为0
|
||
const score = computed(() => {
|
||
return props.data?.score ? Number(props.data.score) : 0;
|
||
});
|
||
|
||
// 计算风险评分（0-100分，分数越高越安全）
|
||
const riskScore = computed(() => {
|
||
// 还款压力分数越高风险越大，转换为安全分数
|
||
// 压力分数 0-20：100分（最安全）
|
||
// 压力分数 20-50：70分（较安全）
|
||
// 压力分数 50-80：40分（有风险）
|
||
// 压力分数 80-100：10分（高风险）
|
||
const pressure = score.value;
|
||
if (pressure <= 20) return 100;
|
||
if (pressure <= 50) return 70;
|
||
if (pressure <= 80) return 40;
|
||
return 10;
|
||
});
|
||
|
||
// 使用 composable 通知父组件风险评分
|
||
useRiskNotifier(props, riskScore);
|
||
|
||
// 暴露给父组件
|
||
defineExpose({
|
||
riskScore
|
||
});
|
||
|
||
// 根据分值确定压力等级
|
||
const pressureLevel = computed(() => {
|
||
if (score.value <= 20)
|
||
return {
|
||
level: "低",
|
||
color: "#67C23A",
|
||
text: "还款压力小",
|
||
bgGradient: "from-green-500 to-green-300",
|
||
lightBg: "bg-green-50",
|
||
borderColor: "border-green-200",
|
||
gradient: [
|
||
{ offset: 0, color: "#67C23A" },
|
||
{ offset: 1, color: "#85ce61" }
|
||
]
|
||
};
|
||
if (score.value <= 50)
|
||
return {
|
||
level: "中",
|
||
color: "#E6A23C",
|
||
text: "还款压力中等",
|
||
bgGradient: "from-yellow-500 to-yellow-300",
|
||
lightBg: "bg-yellow-50",
|
||
borderColor: "border-yellow-200",
|
||
gradient: [
|
||
{ offset: 0, color: "#E6A23C" },
|
||
{ offset: 1, color: "#ebb563" }
|
||
]
|
||
};
|
||
if (score.value <= 80)
|
||
return {
|
||
level: "高",
|
||
color: "#E53E3E",
|
||
text: "还款压力较大",
|
||
bgGradient: "from-orange-500 to-red-400",
|
||
lightBg: "bg-red-50",
|
||
borderColor: "border-red-200",
|
||
gradient: [
|
||
{ offset: 0, color: "#E53E3E" },
|
||
{ offset: 1, color: "#fc8181" }
|
||
]
|
||
};
|
||
return {
|
||
level: "极高",
|
||
color: "#FF0000",
|
||
text: "还款压力非常大",
|
||
bgGradient: "from-red-600 to-red-500",
|
||
lightBg: "bg-red-50",
|
||
borderColor: "border-red-300",
|
||
gradient: [
|
||
{ offset: 0, color: "#FF0000" },
|
||
{ offset: 1, color: "#ff3333" }
|
||
]
|
||
};
|
||
});
|
||
|
||
// 计算进度条宽度百分比
|
||
const progressWidth = computed(() => {
|
||
return `${score.value}%`;
|
||
});
|
||
|
||
// 计算评分对应的Tailwind文本颜色类
|
||
const scoreColorClass = computed(() => {
|
||
if (score.value <= 20) return "text-green-500";
|
||
if (score.value <= 50) return "text-yellow-500";
|
||
if (score.value <= 80) return "text-orange-500";
|
||
return "text-red-600";
|
||
});
|
||
|
||
// 获取图标路径（根据压力等级）
|
||
const getIconPath = () => {
|
||
// 低压力使用 zq
|
||
if (score.value <= 20) {
|
||
return new URL('@/assets/images/report/zq.png', import.meta.url).href
|
||
}
|
||
// 中等压力使用 zfx
|
||
if (score.value <= 50) {
|
||
return new URL('@/assets/images/report/zfx.png', import.meta.url).href
|
||
}
|
||
// 高压力和极高压力使用 gfx
|
||
return new URL('@/assets/images/report/gfx.png', import.meta.url).href
|
||
};
|
||
|
||
// 获取边框颜色
|
||
const getBorderColor = () => {
|
||
if (score.value <= 20) return '#bbf7d0'; // 绿色
|
||
if (score.value <= 50) return '#fef3c7'; // 黄色
|
||
if (score.value <= 80) return '#fecaca'; // 红色
|
||
return '#fecaca'; // 极高压力也是红色
|
||
};
|
||
|
||
// ECharts 仪表盘
|
||
const chartRef = ref(null);
|
||
let chartInstance = null;
|
||
|
||
const initChart = () => {
|
||
if (!chartRef.value) return;
|
||
chartInstance = echarts.init(chartRef.value);
|
||
updateChart();
|
||
};
|
||
|
||
const updateChart = () => {
|
||
if (!chartInstance) return;
|
||
|
||
const risk = pressureLevel.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"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: risk.color + "25"
|
||
}
|
||
])]
|
||
]
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
distance: -30,
|
||
length: 6,
|
||
splitNumber: 10,
|
||
lineStyle: {
|
||
color: risk.color,
|
||
width: 1,
|
||
opacity: 0.5
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
distance: -36,
|
||
length: 12,
|
||
splitNumber: 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: score.value
|
||
}
|
||
],
|
||
title: {
|
||
fontSize: 14,
|
||
color: risk.color,
|
||
offsetCenter: [0, "10%"],
|
||
formatter: risk.level + "级还款压力"
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
chartInstance.setOption(option);
|
||
};
|
||
|
||
watch(
|
||
() => score.value,
|
||
() => {
|
||
updateChart();
|
||
}
|
||
);
|
||
|
||
onMounted(() => {
|
||
initChart();
|
||
window.addEventListener("resize", () => {
|
||
if (chartInstance) {
|
||
chartInstance.resize();
|
||
}
|
||
});
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
if (chartInstance) {
|
||
chartInstance.dispose();
|
||
chartInstance = null;
|
||
}
|
||
window.removeEventListener("resize", chartInstance?.resize);
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="card">
|
||
<div class="rounded-lg border border-gray-200 pb-2 mb-4">
|
||
|
||
<!-- 标题栏 -->
|
||
<div class="flex items-center mb-4 p-4">
|
||
<div class="w-8 h-8 flex items-center justify-center mr-2">
|
||
<img src="@/assets/images/report/hkylfx.png" alt="还款压力分析" class="w-8 h-8 object-contain" />
|
||
</div>
|
||
<span class="font-bold text-gray-800">还款压力分析</span>
|
||
</div>
|
||
|
||
<div class="px-4 pb-4">
|
||
<!-- 仪表盘图表 -->
|
||
<div class="mb-6">
|
||
<div ref="chartRef" :style="{ width: '100%', height: '200px' }"></div>
|
||
</div>
|
||
|
||
<!-- 压力等级显示 -->
|
||
<div class="mb-6">
|
||
<div class="space-y-3 p-4 rounded-lg border" :class="pressureLevel.lightBg"
|
||
:style="{ borderColor: getBorderColor() }">
|
||
<div class="flex items-start">
|
||
<div class="mr-3 mt-1">
|
||
<img :src="getIconPath()" alt="还款压力" class="w-10 h-10 object-contain" />
|
||
</div>
|
||
<div class="flex-1">
|
||
<h4 class="font-semibold text-gray-800 mb-2">{{ pressureLevel.text }}</h4>
|
||
<p class="text-gray-400 text-sm">
|
||
分值越高表示还款压力越大，建议关注债务比例
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 财务建议 -->
|
||
<div class="mb-6">
|
||
<div class="flex items-center mb-3">
|
||
<div class="w-4 h-4 flex items-center justify-center mr-2">
|
||
<img src="@/assets/images/report/wxts_icon.png" alt="财务建议" class="w-4 h-4 object-contain" />
|
||
</div>
|
||
<div class="font-bold text-gray-800">财务建议</div>
|
||
</div>
|
||
<div class="ml-6 text-sm text-gray-600 space-y-1">
|
||
<p v-if="score > 50">
|
||
建议合理规划财务，控制债务比例，增加收入来源，避免过度负债。
|
||
</p>
|
||
<p v-if="score > 50" class="mt-1">
|
||
可尝试分期付款或延长还款周期，减轻每月还款压力。
|
||
</p>
|
||
<p v-else>
|
||
当前还款压力在可控范围内，继续保持良好的财务习惯。
|
||
</p>
|
||
<p v-if="score <= 50" class="mt-1">
|
||
建议定期检查收支平衡，确保及时还款，维持良好信用记录。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 样式已通过 Tailwind CSS 类实现 */
|
||
</style>
|