team/qnc-webview-v3
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新：更改组件字体大小

Browse Source
This commit is contained in:
liangzai
2025-12-19 19:00:55 +08:00
parent 5d713e1d74
commit 71bf46e0a1
26 changed files with 604 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/example_sy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

23
src/components/Remark.vue
View File

@@ -1,11 +1,15 @@
<template>
<div class=" m-4">
<div class="flex items-center">
<img src="@/assets/images/report/wxts_icon.png" alt="温馨提示" class="tips-icon" />
<span class="tips-title">温馨提示!</span>
<img src="@/assets/images/report/wxts_icon.png" :alt="title" class="tips-icon" />
<span class="tips-title">{{ title }}</span>
</div>
<div class="mt-1 ml-4">
<van-text-ellipsis rows="2" :content="content" expand-text="展开" collapse-text="收起" />
<van-text-ellipsis v-if="!defaultExpanded" :rows="2" :content="content" expand-text="展开"
collapse-text="收起" />
<div v-else class="tips-content">
{{ content }}
</div>
</div>
</div>
</template>
@@ -17,6 +21,14 @@ const props = defineProps({
content: {
type: String,
required: true
},
title: {
type: String,
default: '温馨提示!'
},
defaultExpanded: {
type: Boolean,
default: false
}
});
@@ -43,7 +55,7 @@ const isExpanded = ref(false);
}
.tips-content {
font-size: 14px;
font-size: 16px;
color: #333;
}
@@ -77,8 +89,7 @@ const isExpanded = ref(false);
}
:deep(.van-text-ellipsis) {
font-size: 12px;
font-size: 14px;
color: #999999;
}
</style>

81
src/ui/JRZQ3C9R/components/BasicInfoSection.vue
View File

@@ -8,48 +8,39 @@
<v-chart class="chart-container" :option="ratioChartOption" autoresize />
</div>
<div class="px-4 pb-4 space-y-4 text-sm text-gray-700">
<div class="px-4 pb-4 space-y-4">
<!-- 基础信息 -->
<div>
<div class="font-semibold mb-2 text-gray-800">基础信息</div>
<div class="space-y-1">
<div class="flex justify-between">
<span class="text-gray-600">查得标识</span>
<span class="font-semibold text-[#111827]">{{ flagText }}</span>
<LTitle title="基础信息" />
<div class="mt-4 border border-gray-200 rounded-lg overflow-hidden">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-2 text-base">
<div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">
指标</div>
<div class="py-3 px-4 text-center font-semibold whitespace-nowrap">数值</div>
</div>
</div>
<div class="flex justify-between">
<span class="text-gray-600">库有标识</span>
<span class="font-semibold text-[#111827]">{{ flagDbText }}</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">历史银行卡数</span>
<span class="font-semibold text-[#111827]">{{ normalizeValue(data.ppcm_history_cardnum)
}}</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">当前活跃银行卡数</span>
<span class="font-semibold text-[#111827]">{{ normalizeValue(data.ppcm_recent_cardnum)
}}</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">历史手机号数</span>
<span class="font-semibold text-[#111827]">{{ normalizeValue(data.ppcm_history_cellnum)
}}</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">当前活跃手机号数</span>
<span class="font-semibold text-[#111827]">{{ normalizeValue(data.ppcm_recent_cellnum)
}}</span>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in basicInfoRows" :key="row.label"
:class="['grid grid-cols-2 text-base', idx < basicInfoRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
<div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
{{ row.value }}</div>
</div>
</div>
</div>
</div>
<!-- 近期查贷比（查验次数 / 借款次数） -->
<div>
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-2 text-sm">
<div class="grid grid-cols-2 text-base">
<div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">
指标</div>
<div class="py-3 px-4 text-center font-semibold whitespace-nowrap">数值</div>
@@ -58,7 +49,7 @@
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in ratioRows" :key="row.label"
:class="['grid grid-cols-2 text-sm', idx < ratioRows.length - 1 ? 'border-b border-gray-200' : '']">
:class="['grid grid-cols-2 text-base', idx < ratioRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
@@ -70,6 +61,9 @@
</div>
</div>
</div>
<!-- 基础信息与查贷比解读 -->
<Remark :content="basicInfoRemark" title="报告解读" :default-expanded="true" />
</div>
</div>
</template>
@@ -77,12 +71,13 @@
<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { normalizeValue } from '../utils/dataParser'
import { normalizeValue, getBasicInfoRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
@@ -110,6 +105,19 @@ const flagDbText = computed(() => {
return '-'
})
// 基础信息数据行
const basicInfoRows = computed(() => {
const v = data.value
return [
{ label: '查得标识', value: flagText.value },
{ label: '库有标识', value: flagDbText.value },
{ label: '历史银行卡数', value: normalizeValue(v.ppcm_history_cardnum) },
{ label: '当前活跃银行卡数', value: normalizeValue(v.ppcm_recent_cardnum) },
{ label: '历史手机号数', value: normalizeValue(v.ppcm_history_cellnum) },
{ label: '当前活跃手机号数', value: normalizeValue(v.ppcm_recent_cellnum) }
]
})
const ratioRows = computed(() => {
const v = data.value
return [
@@ -150,7 +158,7 @@ const ratioChartOption = computed(() => {
type: 'category',
data: labels,
axisLabel: {
fontSize: 12,
fontSize: 16,
color: '#6b7280'
},
axisLine: {
@@ -162,7 +170,7 @@ const ratioChartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 12,
fontSize: 16,
color: '#6b7280'
},
splitLine: {
@@ -186,6 +194,9 @@ const ratioChartOption = computed(() => {
]
}
})
// 基础信息与查贷比解读
const basicInfoRemark = computed(() => getBasicInfoRemark(data.value))
</script>
<style scoped>

13
src/ui/JRZQ3C9R/components/InsufficientRatioSection.vue
View File

@@ -6,6 +6,9 @@
<v-chart class="chart-container" :option="chartOption" autoresize />
</div>
</div>
<!-- 余额不足占比解读 -->
<Remark :content="insufficientRatioRemark" title="报告解读" :default-expanded="true" />
</div>
</template>
@@ -17,7 +20,8 @@ import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import { PERIODS, getInsufficientRatioByPeriod } from '../utils/dataParser'
import Remark from '@/components/Remark.vue'
import { PERIODS, getInsufficientRatioByPeriod, getInsufficientRatioRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
@@ -54,7 +58,7 @@ const chartOption = computed(() => {
type: 'category',
data: labels,
axisLabel: {
fontSize: 10,
fontSize: 16,
color: '#6b7280'
},
axisLine: {
@@ -66,7 +70,7 @@ const chartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 11,
fontSize: 16,
color: '#6b7280',
formatter: '{value}%'
},
@@ -91,6 +95,9 @@ const chartOption = computed(() => {
]
}
})
// 余额不足占比解读
const insufficientRatioRemark = computed(() => getInsufficientRatioRemark(props.data || {}))
</script>
<style scoped>

29
src/ui/JRZQ3C9R/components/LoanAndOverdueSection.vue
View File

@@ -36,7 +36,7 @@
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in loanRows" :key="row.key"
:class="['grid grid-cols-6 text-sm', idx < loanRows.length - 1 ? 'border-b border-gray-200' : '']">
:class="['grid grid-cols-6 text-base', idx < loanRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
@@ -60,7 +60,7 @@
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-2 text-sm">
<div class="grid grid-cols-2 text-base">
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
</div>
<div class="py-3 text-center font-semibold whitespace-nowrap">综合借款等级</div>
@@ -69,12 +69,12 @@
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in loanAmtRows" :key="row.key"
:class="['grid grid-cols-2 text-sm', idx < loanAmtRows.length - 1 ? 'border-b border-gray-200' : '']">
:class="['grid grid-cols-2 text-base', idx < loanAmtRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
<div class="py-3 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.amt
}}</div>
}}</div>
</div>
</div>
</div>
@@ -85,7 +85,7 @@
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-4 text-sm">
<div class="grid grid-cols-4 text-base">
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">逾期次数
@@ -98,7 +98,7 @@
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in overdueRows" :key="row.key"
:class="['grid grid-cols-4 text-sm', idx < overdueRows.length - 1 ? 'border-b border-gray-200' : '']">
:class="['grid grid-cols-4 text-base', idx < overdueRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
@@ -114,18 +114,22 @@
</div>
</div>
</div>
<!-- 借款与逾期概览解读 -->
<Remark :content="loanAndOverdueRemark" title="报告解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import { PERIODS, normalizeValue } from '../utils/dataParser'
import { PERIODS, normalizeValue, getLoanAndOverdueRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
@@ -212,7 +216,7 @@ const loanChartOption = computed(() => {
type: 'category',
data: labels,
axisLabel: {
fontSize: 12,
fontSize: 16,
color: '#6b7280'
},
axisLine: {
@@ -224,7 +228,7 @@ const loanChartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 12,
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
@@ -271,7 +275,7 @@ const overdueChartOption = computed(() => {
type: 'category',
data: labels,
axisLabel: {
fontSize: 12,
fontSize: 16,
color: '#6b7280'
},
axisLine: {
@@ -283,7 +287,7 @@ const overdueChartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 12,
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
@@ -308,6 +312,9 @@ const overdueChartOption = computed(() => {
]
}
})
// 借款与逾期概览解读
const loanAndOverdueRemark = computed(() => getLoanAndOverdueRemark(props.data || {}))
</script>
<style scoped>

25
src/ui/JRZQ3C9R/components/QueryOverviewSection.vue
View File

@@ -14,7 +14,7 @@
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-5 text-sm">
<div class="grid grid-cols-5 text-base">
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">银行
@@ -29,7 +29,7 @@
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in queryCountRows" :key="row.key"
:class="['grid grid-cols-5 text-sm', idx < queryCountRows.length - 1 ? 'border-b border-gray-200' : '']">
:class="['grid grid-cols-5 text-base', idx < queryCountRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
@@ -51,7 +51,7 @@
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-5 text-sm">
<div class="grid grid-cols-5 text-base">
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
</div>
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">银行
@@ -66,7 +66,7 @@
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in queryOrgRows" :key="row.key"
:class="['grid grid-cols-5 text-sm', idx < queryOrgRows.length - 1 ? 'border-b border-gray-200' : '']">
:class="['grid grid-cols-5 text-base', idx < queryOrgRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
@@ -88,7 +88,7 @@
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-2 text-sm">
<div class="grid grid-cols-2 text-base">
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
</div>
<div class="py-3 text-center font-semibold whitespace-nowrap">查验天数</div>
@@ -97,7 +97,7 @@
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in queryDayRows" :key="row.key"
:class="['grid grid-cols-2 text-sm', idx < queryDayRows.length - 1 ? 'border-b border-gray-200' : '']">
:class="['grid grid-cols-2 text-base', idx < queryDayRows.length - 1 ? 'border-b border-gray-200' : '']">
<div
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
{{ row.label }}</div>
@@ -109,18 +109,22 @@
</div>
</div>
</div>
<!-- 查验行为概览解读 -->
<Remark :content="queryOverviewRemark" title="报告解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import { PERIODS, normalizeValue } from '../utils/dataParser'
import { PERIODS, normalizeValue, getQueryOverviewRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
@@ -169,7 +173,7 @@ const countChartOption = computed(() => {
type: 'category',
data: labels,
axisLabel: {
fontSize: 12,
fontSize: 16,
color: '#6b7280'
},
axisLine: {
@@ -181,7 +185,7 @@ const countChartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 12,
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
@@ -243,6 +247,9 @@ const queryDayRows = computed(() => {
}
})
})
// 查验行为概览解读
const queryOverviewRemark = computed(() => getQueryOverviewRemark(props.data || {}))
</script>
<style scoped>

19
src/ui/JRZQ3C9R/components/QueryTrendSection.vue
View File

@@ -6,6 +6,9 @@
<v-chart class="chart-container" :option="chartOption" autoresize />
</div>
</div>
<!-- 查验次数解读 -->
<Remark :content="queryTrendRemark" title="报告解读" :default-expanded="true" />
</div>
</template>
@@ -17,7 +20,8 @@ import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import { PERIODS, getQueryCountsByPeriod } from '../utils/dataParser'
import Remark from '@/components/Remark.vue'
import { PERIODS, getQueryCountsByPeriod, getQueryTrendRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
@@ -46,14 +50,14 @@ const chartOption = computed(() => {
top: 0,
icon: 'circle',
textStyle: {
fontSize: 11,
fontSize: 16,
color: '#4b5563'
}
},
grid: {
left: '3%',
right: '4%',
top: 24,
top: '30%',
bottom: 0,
containLabel: true
},
@@ -61,7 +65,7 @@ const chartOption = computed(() => {
type: 'category',
data: labels,
axisLabel: {
fontSize: 10,
fontSize: 16,
color: '#6b7280'
},
axisLine: {
@@ -73,7 +77,7 @@ const chartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 11,
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
@@ -120,6 +124,9 @@ const chartOption = computed(() => {
]
}
})
// 查验次数解读
const queryTrendRemark = computed(() => getQueryTrendRemark(props.data || {}))
</script>
<style scoped>
@@ -132,5 +139,3 @@ const chartOption = computed(() => {
height: 100%;
}
</style>

13
src/ui/JRZQ3C9R/components/RepayFailTrendSection.vue
View File

@@ -6,6 +6,9 @@
<v-chart class="chart-container" :option="chartOption" autoresize />
</div>
</div>
<!-- 还款失败次数解读 -->
<Remark :content="repayFailRemark" title="报告解读" :default-expanded="true" />
</div>
</template>
@@ -17,7 +20,8 @@ import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import { PERIODS, getRepayCountsByPeriod } from '../utils/dataParser'
import Remark from '@/components/Remark.vue'
import { PERIODS, getRepayCountsByPeriod, getRepayFailRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
@@ -51,7 +55,7 @@ const chartOption = computed(() => {
type: 'category',
data: labels,
axisLabel: {
fontSize: 10,
fontSize: 16,
color: '#6b7280'
},
axisLine: {
@@ -63,7 +67,7 @@ const chartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 11,
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
@@ -88,6 +92,9 @@ const chartOption = computed(() => {
]
}
})
// 还款失败次数解读
const repayFailRemark = computed(() => getRepayFailRemark(props.data || {}))
</script>
<style scoped>

49
src/ui/JRZQ3C9R/components/RepayOrgAndLevelSection.vue
View File

@@ -14,16 +14,17 @@
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-2 text-sm">
<div class="grid grid-cols-2 text-base">
<div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">周期</div>
<div class="py-3 px-4 text-center font-semibold whitespace-nowrap">机构数</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in successOrgRows" :key="row.key"
:class="['grid grid-cols-2 text-sm', idx < successOrgRows.length - 1 ? 'border-b border-gray-200' : '']">
<div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">{{ row.label }}</div>
<div v-for="(row, idx) in successOrgRows" :key="row.key"
:class="['grid grid-cols-2 text-base', idx < successOrgRows.length - 1 ? 'border-b border-gray-200' : '']">
<div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">{{ row.label
}}</div>
<div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.value }}</div>
</div>
</div>
@@ -35,16 +36,17 @@
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-2 text-sm">
<div class="grid grid-cols-2 text-base">
<div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">周期</div>
<div class="py-3 px-4 text-center font-semibold whitespace-nowrap">机构数</div>
</div>
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in failOrgRows" :key="row.key"
:class="['grid grid-cols-2 text-sm', idx < failOrgRows.length - 1 ? 'border-b border-gray-200' : '']">
<div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">{{ row.label }}</div>
<div v-for="(row, idx) in failOrgRows" :key="row.key"
:class="['grid grid-cols-2 text-base', idx < failOrgRows.length - 1 ? 'border-b border-gray-200' : '']">
<div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">{{ row.label
}}</div>
<div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.value }}</div>
</div>
</div>
@@ -56,7 +58,7 @@
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
<!-- 表头 -->
<div class="bg-[#5d7eeb] text-white">
<div class="grid grid-cols-3 text-sm">
<div class="grid grid-cols-3 text-base">
<div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">周期</div>
<div class="py-3 px-4 text-center font-semibold border-r border-white whitespace-nowrap">成功等级</div>
<div class="py-3 px-4 text-center font-semibold whitespace-nowrap">失败等级</div>
@@ -64,16 +66,21 @@
</div>
<!-- 数据行 -->
<div class="bg-white">
<div v-for="(row, idx) in levelRows" :key="row.key"
:class="['grid grid-cols-3 text-sm', idx < levelRows.length - 1 ? 'border-b border-gray-200' : '']">
<div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">{{ row.label }}</div>
<div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">{{ row.succ }}</div>
<div v-for="(row, idx) in levelRows" :key="row.key"
:class="['grid grid-cols-3 text-base', idx < levelRows.length - 1 ? 'border-b border-gray-200' : '']">
<div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">{{ row.label
}}</div>
<div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">{{ row.succ
}}</div>
<div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.fail }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- 还款机构数与等级解读 -->
<Remark :content="repayOrgAndLevelRemark" title="报告解读" :default-expanded="true" />
</div>
</div>
</template>
@@ -81,12 +88,13 @@
<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import { PERIODS, normalizeValue } from '../utils/dataParser'
import { PERIODS, normalizeValue, getRepayOrgAndLevelRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
@@ -153,14 +161,14 @@ const orgChartOption = computed(() => {
top: 0,
icon: 'circle',
textStyle: {
fontSize: 12,
fontSize: 16,
color: '#4b5563'
}
},
grid: {
left: '3%',
right: '4%',
top: 24,
top: '15%',
bottom: 0,
containLabel: true
},
@@ -168,7 +176,7 @@ const orgChartOption = computed(() => {
type: 'category',
data: labels,
axisLabel: {
fontSize: 12,
fontSize: 16,
color: '#6b7280'
},
axisLine: {
@@ -180,7 +188,7 @@ const orgChartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 12,
fontSize: 16,
color: '#6b7280',
formatter: '{value} 家'
},
@@ -216,6 +224,9 @@ const orgChartOption = computed(() => {
]
}
})
// 还款机构数与等级解读
const repayOrgAndLevelRemark = computed(() => getRepayOrgAndLevelRemark(props.data || {}))
</script>
<style scoped>
@@ -228,5 +239,3 @@ const orgChartOption = computed(() => {
height: 100%;
}
</style>

13
src/ui/JRZQ3C9R/components/RepaySuccessTrendSection.vue
View File

@@ -6,6 +6,9 @@
<v-chart class="chart-container" :option="chartOption" autoresize />
</div>
</div>
<!-- 还款成功次数解读 -->
<Remark :content="repaySuccessRemark" title="报告解读" :default-expanded="true" />
</div>
</template>
@@ -17,7 +20,8 @@ import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import { PERIODS, getRepayCountsByPeriod } from '../utils/dataParser'
import Remark from '@/components/Remark.vue'
import { PERIODS, getRepayCountsByPeriod, getRepaySuccessRemark } from '../utils/dataParser'
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
@@ -51,7 +55,7 @@ const chartOption = computed(() => {
type: 'category',
data: labels,
axisLabel: {
fontSize: 10,
fontSize: 16,
color: '#6b7280'
},
axisLine: {
@@ -63,7 +67,7 @@ const chartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 11,
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
@@ -88,6 +92,9 @@ const chartOption = computed(() => {
]
}
})
// 还款成功次数解读
const repaySuccessRemark = computed(() => getRepaySuccessRemark(props.data || {}))
</script>
<style scoped>

6
src/ui/JRZQ3C9R/components/RepayTrendSection.vue
View File

@@ -45,7 +45,7 @@ const chartOption = computed(() => {
top: 0,
icon: 'circle',
textStyle: {
fontSize: 11,
fontSize: 16,
color: '#4b5563'
}
},
@@ -60,7 +60,7 @@ const chartOption = computed(() => {
type: 'category',
data: labels,
axisLabel: {
fontSize: 10,
fontSize: 16,
color: '#6b7280'
},
axisLine: {
@@ -72,7 +72,7 @@ const chartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 11,
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},

19
src/ui/JRZQ3C9R/components/ScoreSection.vue
View File

@@ -2,34 +2,38 @@
<div class="card rounded-lg border border-gray-200 mb-2">
<div class="flex items-center justify-between px-4 pt-4 pb-2">
<div>
<div class="text-sm text-gray-500">支付行为评分</div>
<div class="text-base text-gray-500">支付行为评分</div>
<div class="flex items-baseline gap-2 mt-1">
<span class="text-3xl font-bold text-[#111827]">
{{ scoreDisplay }}
</span>
<span class="text-sm text-gray-400">分</span>
<span class="text-base text-gray-400">分</span>
<span
class="inline-flex items-center px-2 py-0.5 rounded-full text-sm"
class="inline-flex items-center px-2 py-0.5 rounded-full text-base"
:class="levelClass"
>
{{ level }}
</span>
</div>
</div>
<div class="text-right text-sm text-gray-500 max-w-[11rem] leading-relaxed">
<div class="text-right text-base text-gray-500 max-w-[11rem] leading-relaxed">
分数基于近两年查验及还款行为综合评估，分数越高代表支付行为越稳定、违约风险越低。
</div>
</div>
<div class="px-4 pb-4 text-sm text-gray-500">
<div class="px-4 pb-4 text-base text-gray-500">
最近一次查验距今天数：
<span class="font-medium text-[#111827]">{{ latestQueryText }}</span>
</div>
<!-- 评分解读 -->
<Remark :content="scoreRemark" title="评分解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import { getBehavLevel, mapScoreTo100 } from '../utils/dataParser'
import Remark from '@/components/Remark.vue'
import { getBehavLevel, mapScoreTo100, getScoreRemark } from '../utils/dataParser'
const props = defineProps({
score: {
@@ -46,6 +50,9 @@ const scoreDisplay = computed(() => (props.score > 0 ? props.score : '--'))
const level = computed(() => getBehavLevel(props.score))
// 评分解读
const scoreRemark = computed(() => getScoreRemark(props.score, level.value))
// 按等级给不同颜色
const levelClass = computed(() => {
const mapped = mapScoreTo100(props.score)

270
src/ui/JRZQ3C9R/utils/dataParser.js
View File

@@ -158,3 +158,273 @@ export function getLatestQueryBucket(ppcm) {
return mapping[code] || "未知区间";
}
/**
* 生成各 card 的解读文本
*/
/**
* 支付行为评分解读（数据解读 + 意思解读）
*/
export function getScoreRemark(score, level) {
if (!score || score <= 0) {
return "暂无支付行为评分数据。\n\n【数据解读】评分基于近两年查验及还款行为综合评估，分数越高代表支付行为越稳定、违约风险越低。\n\n【意思解读】支付行为评分是机构评估您还款能力和信用状况的重要指标。评分越高，说明您的还款履约记录越好，机构对您的信任度越高，未来申请贷款或信用卡时更容易获得批准和更优惠的利率。";
}
let dataRemark = `【数据解读】您的支付行为评分为 ${score} 分，等级为"${level}"。`;
let meaningRemark = "";
if (score >= 800) {
dataRemark += "您的支付行为表现优秀，还款履约能力强，违约风险极低。";
meaningRemark = "【意思解读】优秀评分表明您有非常稳定的还款记录和良好的资金管理能力。这意味着机构认为您是低风险客户，在申请贷款、信用卡等金融产品时更容易获得批准，且可能享受更优惠的利率和更高的额度。继续保持这种良好的支付习惯，有助于维护和提升您的信用价值。";
} else if (score >= 750) {
dataRemark += "您的支付行为表现良好，还款履约能力较强，违约风险较低。";
meaningRemark = "【意思解读】良好评分说明您的还款记录稳定，机构对您的信任度较高。这有助于您在申请金融产品时获得较好的审批结果。建议继续保持良好的支付习惯，避免逾期，可以进一步提升评分等级。";
} else if (score >= 700) {
dataRemark += "您的支付行为表现中等，还款履约能力一般，违约风险适中。";
meaningRemark = "【意思解读】中等评分表示您的还款记录存在一定波动，机构可能会对您的申请进行更严格的审核。建议注意按时还款，减少还款失败的情况，提高支付稳定性，这将有助于提升您的评分和信用价值。";
} else if (score >= 650) {
dataRemark += "您的支付行为表现一般，还款履约能力有待提升，违约风险偏高。";
meaningRemark = "【意思解读】一般评分表明您的还款记录不够稳定，可能存在逾期或还款失败的情况。这会导致机构对您的信任度降低，在申请金融产品时可能面临更严格的审核或被拒绝。建议加强还款管理，提前准备还款资金，避免逾期，逐步改善支付行为。";
} else {
dataRemark += "您的支付行为表现偏低，还款履约能力较弱，违约风险较高。";
meaningRemark = "【意思解读】偏低评分表明您的还款记录存在较多问题，如频繁逾期、还款失败等。这会导致机构认为您的违约风险较高，在申请贷款、信用卡等金融产品时很可能被拒绝，即使获批也可能面临更高的利率和更低的额度。建议重点关注还款情况，及时处理逾期问题，制定还款计划，逐步改善支付行为，提升信用评分。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 查验次数时间分布解读（数据解读 + 意思解读）
*/
export function getQueryTrendRemark(ppcm) {
const counts = getQueryCountsByPeriod(ppcm);
const m12Total = counts.m12?.total || 0;
const m3Total = counts.m3?.total || 0;
const bankTotal = counts.m12?.bank || 0;
const finTotal = counts.m12?.nbankFin || 0;
const otherTotal = counts.m12?.nbankOther || 0;
let dataRemark = `【数据解读】近一年查验总次数：${m12Total}次，其中银行查验${bankTotal}次，消费金融查验${finTotal}次，其他机构查验${otherTotal}次。近3个月查验次数：${m3Total}次。`;
let meaningRemark = "";
if (m12Total === 0) {
dataRemark += "暂无查验记录。";
meaningRemark = "【意思解读】无查验记录可能表示近期无相关机构查询您的支付行为数据，或者您近期没有申请相关金融产品。这通常意味着您的信用活动较少，但也可能表示您的信用记录不够活跃。";
} else if (m12Total <= 5) {
dataRemark += "查验次数较少。";
meaningRemark = "【意思解读】查验次数较少说明机构对您的支付行为关注度较低，整体风险可控。这可能是因为您的还款记录良好，机构认为风险较低，或者您的信用活动较少。较低的查验频率通常对信用评分影响较小。";
} else if (m12Total <= 15) {
dataRemark += "查验次数适中。";
meaningRemark = "【意思解读】查验次数适中说明机构对您的支付行为保持正常关注。这通常发生在您有正常的金融活动时，如申请贷款、信用卡等。适度的查验是正常的信用评估过程，不会对您的信用产生负面影响。";
} else {
dataRemark += "查验次数较多。";
meaningRemark = "【意思解读】查验次数较多可能表示机构对您的支付行为关注度较高，这可能是因为您近期有较多的金融申请活动，或者机构需要更频繁地评估您的信用状况。频繁的查验虽然不会直接降低您的信用评分，但可能反映出机构对您的风险关注。建议关注自身还款情况，保持良好的支付记录，减少不必要的金融申请。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 查验行为概览解读（数据解读 + 意思解读）
*/
export function getQueryOverviewRemark(ppcm) {
const m12Count = normalizeValue(ppcm.ppcm_m12_qynum);
const m12Org = normalizeValue(ppcm.ppcm_m12_qyorg);
const m12Day = normalizeValue(ppcm.ppcm_m12_qyday);
let dataRemark = `【数据解读】近一年查验行为概览：查验次数${m12Count}次，涉及机构${m12Org}家，查验天数${m12Day}天。`;
let meaningRemark = "";
if (m12Count === 0) {
dataRemark += "暂无查验记录。";
meaningRemark = "【意思解读】无查验记录表示近期没有机构查询您的支付行为数据。这可能意味着您的信用活动较少，或者没有申请相关金融产品。虽然不会对信用产生负面影响，但信用记录的活跃度也是评估因素之一。";
} else {
const avgPerDay = m12Day > 0 ? (m12Count / m12Day).toFixed(2) : 0;
dataRemark += `平均每天查验${avgPerDay}次。`;
if (m12Org > 0 && m12Count / m12Org > 3) {
dataRemark += "单机构查验频率较高。";
meaningRemark = "【意思解读】单机构查验频率较高可能表示该机构对您的信用状况需要更频繁的评估，这可能是因为您与该机构有业务往来，或者该机构在评估您的申请。较高的查验频率通常不会直接影响信用评分，但可能反映出机构对您的关注度。建议关注相关机构的关注原因，保持良好的还款记录。";
} else {
meaningRemark = "【意思解读】查验次数、机构数和天数的组合反映了机构对您信用状况的关注程度。适度的查验是正常的信用评估过程，说明您有正常的金融活动。保持稳定的还款记录，有助于维持良好的信用形象。";
}
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 还款成功次数趋势解读（数据解读 + 意思解读）
*/
export function getRepaySuccessRemark(ppcm) {
const counts = getRepayCountsByPeriod(ppcm);
const m12Success = counts.m12?.success || 0;
const m3Success = counts.m3?.success || 0;
let dataRemark = `【数据解读】近一年还款成功次数：${m12Success}次，近3个月还款成功次数：${m3Success}次。`;
let meaningRemark = "";
if (m12Success === 0) {
dataRemark += "暂无还款成功记录。";
meaningRemark = "【意思解读】无还款成功记录可能表示您近期没有需要还款的金融产品，或者还款数据尚未更新。如果确实有还款义务，建议确认还款是否成功，避免因还款失败影响信用记录。";
} else if (m12Success >= 20) {
dataRemark += "还款成功次数较多。";
meaningRemark = "【意思解读】还款成功次数较多说明您的还款履约能力较强，支付行为稳定。这表明您有良好的资金管理能力和还款习惯，机构会认为您是可靠的客户。这种稳定的还款记录有助于提升您的信用评分，在申请新的金融产品时更容易获得批准和更优惠的条件。";
} else if (m12Success >= 10) {
dataRemark += "还款成功次数适中。";
meaningRemark = "【意思解读】还款成功次数适中说明您的还款履约能力良好。这表明您能够按时完成还款义务，机构对您的信任度较高。继续保持这种良好的还款习惯，有助于维持和提升您的信用价值。";
} else {
dataRemark += "还款成功次数较少。";
meaningRemark = "【意思解读】还款成功次数较少可能表示您的还款活动不够频繁，或者存在还款失败的情况。如果确实有还款义务，建议关注还款情况，确保按时还款。稳定的还款记录是建立良好信用的基础，频繁的还款成功有助于提升您的信用评分。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 还款失败次数趋势解读（数据解读 + 意思解读）
*/
export function getRepayFailRemark(ppcm) {
const counts = getRepayCountsByPeriod(ppcm);
const m12Fail = counts.m12?.fail || 0;
const m3Fail = counts.m3?.fail || 0;
let dataRemark = `【数据解读】近一年还款失败次数：${m12Fail}次，近3个月还款失败次数：${m3Fail}次。`;
let meaningRemark = "";
if (m12Fail === 0) {
dataRemark += "无还款失败记录。";
meaningRemark = "【意思解读】无还款失败记录说明您的还款履约能力优秀，支付行为稳定。这表明您有良好的资金管理能力和还款习惯，所有还款都能按时成功完成。这种完美的还款记录会显著提升您的信用评分，机构会认为您是低风险客户，在申请金融产品时更容易获得批准和更优惠的条件。";
} else if (m12Fail <= 2) {
dataRemark += "还款失败次数较少。";
meaningRemark = "【意思解读】还款失败次数较少说明整体还款履约能力良好。偶尔的还款失败可能是由于临时资金紧张或技术原因，但如果频繁发生，可能会影响机构对您的信任度。建议继续保持良好的还款习惯，提前准备还款资金，避免因余额不足等原因导致还款失败。";
} else if (m12Fail <= 5) {
dataRemark += "还款失败次数适中。";
meaningRemark = "【意思解读】还款失败次数适中可能表示您的资金管理存在一定问题，或者还款计划不够合理。频繁的还款失败会导致机构对您的还款能力产生怀疑，可能影响您的信用评分和未来申请金融产品的审批结果。建议关注还款情况，制定合理的还款计划，确保账户有足够资金，避免频繁失败。";
} else {
dataRemark += "还款失败次数较多。";
meaningRemark = "【意思解读】还款失败次数较多表明您的还款履约能力存在问题，可能是资金管理不当、还款计划不合理或账户余额不足等原因。这会导致机构认为您的违约风险较高，严重影响您的信用评分。在申请新的金融产品时很可能被拒绝，即使获批也可能面临更高的利率和更严格的限制。建议重点关注还款管理，及时处理还款问题，制定还款计划，确保账户有足够资金，逐步改善还款行为，避免影响信用记录。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 余额不足导致还款失败占比解读（数据解读 + 意思解读）
*/
export function getInsufficientRatioRemark(ppcm) {
const ratios = getInsufficientRatioByPeriod(ppcm);
const m12Ratio = ratios.m12 || 0;
const m3Ratio = ratios.m3 || 0;
const m12Percent = (m12Ratio * 100).toFixed(2);
const m3Percent = (m3Ratio * 100).toFixed(2);
let dataRemark = `【数据解读】近一年余额不足导致还款失败占比：${m12Percent}%，近3个月占比：${m3Percent}%。`;
let meaningRemark = "";
if (m12Ratio === 0) {
dataRemark += "无余额不足导致的还款失败。";
meaningRemark = "【意思解读】无余额不足导致的还款失败说明您的账户资金管理良好，能够确保还款时有足够的资金。这表明您有良好的资金规划能力，能够提前准备还款资金。这种良好的资金管理习惯有助于维持稳定的还款记录，提升机构对您的信任度。";
} else if (m12Ratio <= 0.1) {
dataRemark += "余额不足占比很低。";
meaningRemark = "【意思解读】余额不足占比很低说明整体资金管理良好，偶尔的余额不足可能是由于临时资金周转问题。虽然占比很低，但仍需注意，因为即使是偶尔的余额不足也可能导致还款失败，影响信用记录。建议继续保持良好的资金管理习惯，提前准备还款资金。";
} else if (m12Ratio <= 0.3) {
dataRemark += "余额不足占比适中。";
meaningRemark = "【意思解读】余额不足占比适中表明您的资金管理存在一定问题，可能没有提前准备足够的还款资金。这会导致部分还款因余额不足而失败，影响您的还款履约记录。机构可能会认为您的资金管理能力不足，影响信用评分。建议关注账户余额，制定资金规划，确保还款时有足够资金，避免因余额不足导致还款失败。";
} else {
dataRemark += "余额不足占比较高。";
meaningRemark = "【意思解读】余额不足占比较高表明您的资金管理存在严重问题，经常没有足够的资金用于还款。这会导致频繁的还款失败，严重影响您的还款履约记录和信用评分。机构会认为您的资金管理能力不足，违约风险较高，在申请新的金融产品时很可能被拒绝。建议加强资金管理，制定详细的资金规划，提前准备还款资金，建立还款提醒机制，避免因余额不足导致还款失败，逐步改善资金管理习惯。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 还款机构数与等级解读（数据解读 + 意思解读）
*/
export function getRepayOrgAndLevelRemark(ppcm) {
const m12SuccOrg = normalizeValue(ppcm.ppcm_m12_succ_reporg);
const m12FailOrg = normalizeValue(ppcm.ppcm_m12_fail_reporg);
const m12SuccLevel = normalizeValue(ppcm.ppcm_m12_succ_repamt);
const m12FailLevel = normalizeValue(ppcm.ppcm_m12_fail_repamt);
let dataRemark = `【数据解读】近一年还款成功机构数：${m12SuccOrg}家，还款失败机构数：${m12FailOrg}家。还款成功等级：${m12SuccLevel}，还款失败等级：${m12FailLevel}。`;
let meaningRemark = "";
if (m12SuccOrg > 0 && m12FailOrg === 0) {
dataRemark += "所有机构还款均成功。";
meaningRemark = "【意思解读】所有机构还款均成功说明您的还款履约能力优秀，能够与多家机构保持良好的还款关系。这表明您有稳定的资金流和良好的还款习惯，机构对您的信任度很高。这种完美的还款记录会显著提升您的信用评分，在申请新的金融产品时更容易获得批准和更优惠的条件。";
} else if (m12SuccOrg > m12FailOrg) {
dataRemark += "还款成功机构数多于失败机构数。";
meaningRemark = "【意思解读】还款成功机构数多于失败机构数说明整体还款履约能力良好，虽然存在部分机构的还款失败，但大部分机构都能成功还款。这表明您有基本的还款能力，但资金管理可能存在一定问题。建议关注失败原因，及时处理还款问题，确保所有机构都能成功还款，进一步提升信用价值。";
} else if (m12FailOrg > 0) {
dataRemark += "存在还款失败机构。";
meaningRemark = "【意思解读】存在还款失败机构表明您的还款履约能力存在问题，可能无法与所有机构保持良好的还款关系。这会导致相关机构对您的信任度降低，可能影响您与该机构的业务往来，甚至影响您的整体信用评分。建议关注失败原因，及时处理还款问题，制定还款计划，确保所有机构都能成功还款，维护良好的信用关系。";
} else {
meaningRemark = "【意思解读】还款机构数和等级反映了您与不同机构的还款关系。成功机构数越多、失败机构数越少，说明您的还款履约能力越强，机构对您的信任度越高。保持良好的还款记录有助于维护和提升您的信用价值。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 借款与逾期概览解读（数据解读 + 意思解读）
*/
export function getLoanAndOverdueRemark(ppcm) {
const m12Loan = normalizeValue(ppcm.ppcm_m12_loannum);
const m12LoanOrg = normalizeValue(ppcm.ppcm_m12_loanorg);
const m12LoanAmt = normalizeValue(ppcm.ppcm_m12_loanamt);
const m12OverNum = normalizeValue(ppcm.ppcm_m12_overnum);
const m12OverOrg = normalizeValue(ppcm.ppcm_m12_overorg);
const m12OverAmt = normalizeValue(ppcm.ppcm_m12_overamt);
let dataRemark = `【数据解读】近一年借款情况：借款次数${m12Loan}次，涉及机构${m12LoanOrg}家，借款等级${m12LoanAmt}。逾期情况：逾期次数${m12OverNum}次，逾期机构数${m12OverOrg}家，逾期等级${m12OverAmt}。`;
let meaningRemark = "";
if (m12OverNum === 0) {
dataRemark += "无逾期记录。";
meaningRemark = "【意思解读】无逾期记录说明您的还款履约能力优秀，能够按时完成所有还款义务。这表明您有良好的资金管理能力和还款习惯，机构会认为您是低风险客户。这种完美的还款记录会显著提升您的信用评分，在申请新的金融产品时更容易获得批准和更优惠的条件。借款等级反映了您的借款规模，适度的借款有助于建立信用记录，但过度借款可能增加还款压力。";
} else if (m12OverNum <= 2) {
dataRemark += "逾期次数较少。";
meaningRemark = "【意思解读】逾期次数较少说明整体还款履约能力良好，虽然存在偶尔的逾期，但大部分还款都能按时完成。偶尔的逾期可能是由于临时资金紧张或忘记还款，但如果频繁发生，可能会影响机构对您的信任度。建议继续保持良好的还款习惯，建立还款提醒机制，避免逾期，进一步提升信用价值。";
} else {
dataRemark += "逾期次数较多。";
meaningRemark = "【意思解读】逾期次数较多表明您的还款履约能力存在问题，可能无法按时完成还款义务。这会导致机构认为您的违约风险较高，严重影响您的信用评分。在申请新的金融产品时很可能被拒绝，即使获批也可能面临更高的利率和更严格的限制。逾期记录会在信用报告中保留较长时间，影响您的长期信用价值。建议重点关注还款管理，制定还款计划，提前准备还款资金，及时处理逾期问题，避免影响信用记录。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}
/**
* 基础信息与查贷比解读（数据解读 + 意思解读）
*/
export function getBasicInfoRemark(ppcm) {
const flag = normalizeValue(ppcm.flag);
const flagDb = normalizeValue(ppcm.flagdb);
const m12Ratio = normalizeValue(ppcm.ppcm_m12_qy_rep_ratio);
const flagText = flag === 1 ? "查得" : "查无";
const flagDbText = flagDb === 1 ? "库有" : "库无";
const ratioText = m12Ratio > 0 ? m12Ratio.toFixed(2) : "0";
let dataRemark = `【数据解读】基础信息：查得标识为"${flagText}"，库有标识为"${flagDbText}"。近一年查贷比（查验次数/借款次数）：${ratioText}。`;
let meaningRemark = "";
if (m12Ratio === 0) {
dataRemark += "查贷比为0。";
meaningRemark = "【意思解读】查贷比为0表示无查验或借款记录，可能表示您近期没有相关的金融活动。查得标识和库有标识反映了您的信用记录在系统中的存在情况。如果标识为\"查无\"或\"库无\"，可能表示您的信用记录不够完整或活跃，建议适当使用金融产品以建立信用记录。";
} else if (m12Ratio <= 1) {
dataRemark += "查贷比较低。";
meaningRemark = "【意思解读】查贷比较低说明查验次数少于或等于借款次数，这表明机构对您的关注度相对较低，整体风险可控。较低的查贷比通常意味着您的借款活动正常，机构不需要频繁查验就能评估您的信用状况。这通常是一个积极的信号，表明您的信用记录稳定，机构对您的信任度较高。";
} else if (m12Ratio <= 3) {
dataRemark += "查贷比适中。";
meaningRemark = "【意思解读】查贷比适中说明查验与借款比例正常，这是正常的信用评估过程。适度的查验是机构评估您信用状况的正常手段，通常发生在您申请金融产品时。这种比例表明您的信用活动正常，机构对您的关注度在合理范围内。";
} else {
dataRemark += "查贷比较高。";
meaningRemark = "【意思解读】查贷比较高说明查验次数明显多于借款次数，可能表示机构对您的关注度较高。这可能是因为您近期有较多的金融申请活动，或者机构需要更频繁地评估您的信用状况。虽然频繁的查验不会直接降低您的信用评分，但可能反映出机构对您的风险关注。建议关注自身信用状况，保持良好的还款记录，减少不必要的金融申请，避免过度查询影响信用形象。";
}
return `${dataRemark}\n\n${meaningRemark}`;
}

10
src/ui/JRZQ6F2A/components/ApplicationCountSection.vue
View File

@@ -95,7 +95,7 @@ const chartOption = computed(() => {
type: 'category',
data: labels,
axisLabel: {
fontSize: 10,
fontSize: 16,
color: '#6b7280',
rotate: 45
},
@@ -108,7 +108,7 @@ const chartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 11,
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},
@@ -168,7 +168,7 @@ const specialChartOption = computed(() => {
data: ['周末申请次数', '夜间申请次数'],
top: '5%',
textStyle: {
fontSize: 12
fontSize: 14
}
},
grid: {
@@ -182,7 +182,7 @@ const specialChartOption = computed(() => {
type: 'category',
data: labels,
axisLabel: {
fontSize: 10,
fontSize: 16,
color: '#6b7280',
rotate: 45
},
@@ -195,7 +195,7 @@ const specialChartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 11,
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},

6
src/ui/JRZQ6F2A/components/ApplicationTotalSection.vue
View File

@@ -3,12 +3,12 @@
<div class="rounded-lg border border-gray-200 pb-2 mb-4">
<div class="mt-4">
<!-- Tab切换 -->
<div class="mb-6">
<div class="">
<LTitle title="申请总次数详情" />
<div class="bg-white px-4 py-2">
<van-tabs v-model:active="activeTab" color="var(--color-primary)">
<van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
<div class="p-4">
<div class="p-4 pb-0">
<!-- 银行机构 -->
<BankInstitutionSection :data="data" :period="period.key" :dimension="dimension" />
<!-- 非银机构 -->
@@ -83,7 +83,7 @@ const periods = [
.application-total-section :deep(.van-tab) {
color: #999999 !important;
font-size: 14px !important;
font-size: 16px !important;
font-weight: 400 !important;
border-right: unset !important;
background-color: transparent !important;

15
src/ui/JRZQ6F2A/components/BankInstitutionSection.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="mb-6">
<div class="">
<LTitle title="银行机构申请分布" />
<div class="mt-4">
<!-- 饼图：宽度占满 -->
@@ -8,8 +8,9 @@
</div>
<!-- 详细列表：在图表下方，展示所有项并带颜色标识 -->
<div class="space-y-2 mb-2">
<div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
<div class="space-y-0 mb-2 rounded-lg overflow-hidden">
<div v-for="(item, index) in detailList" :key="index"
:class="['flex justify-between items-center text-lg py-3 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<div class="flex items-center">
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
<span class="text-gray-600">{{ item.label }}</span>
@@ -22,7 +23,7 @@
</div>
<!-- 银行类机构申请情况（近1年 / 近3个月，仅在12个月tab下展示） -->
<Remark v-if="period === 'm12' && applyRemarks.bankSituation" :title="'银行类机构申请情况'"
<Remark class="mt-8 mb-8" v-if="period === 'm12' && applyRemarks.bankSituation" :title="'银行类机构申请情况'"
:content="applyRemarks.bankSituation" :default-expanded="true" />
</template>
@@ -121,7 +122,7 @@ const pieChartOption = computed(() => {
top: 'center',
textStyle: {
color: '#999',
fontSize: 14
fontSize: 16
}
}
}
@@ -139,7 +140,7 @@ const pieChartOption = computed(() => {
style: {
text: '银行机构',
fill: '#111827',
fontSize: 14,
fontSize: 16,
fontWeight: 'bold',
},
},
@@ -166,7 +167,7 @@ const pieChartOption = computed(() => {
},
label: {
show: true,
fontSize: 14,
fontSize: 16,
fontWeight: 'bold',
color: '#333'
}

17
src/ui/JRZQ6F2A/components/BankOrgSection.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="mb-6">
<div class="">
<LTitle title="银行机构申请机构数分布" />
<div class="mt-4">
<!-- 饼图：宽度占满 -->
@@ -8,8 +8,9 @@
</div>
<!-- 详细列表：在图表下方，展示所有项并带颜色标识 -->
<div class="space-y-2 mb-2">
<div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
<div class="space-y-0 mb-2 rounded-lg overflow-hidden">
<div v-for="(item, index) in detailList" :key="index"
:class="['flex justify-between items-center text-lg py-3 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<div class="flex items-center">
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
<span class="text-gray-600">{{ item.label }}</span>
@@ -22,8 +23,8 @@
</div>
<!-- 银行类机构申请建议（仅在12个月tab下展示） -->
<Remark v-if="period === 'm12' && applyRemarks.bankAdvice" :title="'银行类机构申请建议'" :content="applyRemarks.bankAdvice"
:default-expanded="false" />
<Remark class="mt-8 mb-8" v-if="period === 'm12' && applyRemarks.bankAdvice" :title="'银行类机构申请建议'"
:content="applyRemarks.bankAdvice" :default-expanded="true" />
</template>
<script setup>
@@ -121,7 +122,7 @@ const pieChartOption = computed(() => {
top: 'center',
textStyle: {
color: '#999',
fontSize: 14
fontSize: 16
}
}
}
@@ -139,7 +140,7 @@ const pieChartOption = computed(() => {
style: {
text: '银行机构',
fill: '#111827',
fontSize: 14,
fontSize: 16,
fontWeight: 'bold',
},
},
@@ -166,7 +167,7 @@ const pieChartOption = computed(() => {
},
label: {
show: true,
fontSize: 14,
fontSize: 16,
fontWeight: 'bold',
color: '#333'
}

6
src/ui/JRZQ6F2A/components/InstitutionTotalSection.vue
View File

@@ -3,12 +3,12 @@
<div class="rounded-lg border border-gray-200 pb-2 mb-4">
<div class="mt-4">
<!-- Tab切换 -->
<div class="mb-6">
<div class="">
<LTitle title="申请机构总数详情" />
<div class="bg-white px-4 py-2">
<van-tabs v-model:active="activeTab" color="var(--color-primary)">
<van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
<div class="p-4">
<div class="p-4 pb-0">
<!-- 银行机构 -->
<BankOrgSection :data="data" :period="period.key" :dimension="dimension" />
@@ -84,7 +84,7 @@ const periods = [
.institution-total-section :deep(.van-tab) {
color: #999999 !important;
font-size: 14px !important;
font-size: 16px !important;
font-weight: 400 !important;
border-right: unset !important;
background-color: transparent !important;

15
src/ui/JRZQ6F2A/components/NBankInstitutionSection.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="mb-6">
<div class="">
<LTitle title="非银机构申请分布" />
<div class="mt-4">
<!-- 饼图：宽度占满 -->
@@ -8,8 +8,9 @@
</div>
<!-- 详细列表：在图表下方，展示所有项并带颜色标识 -->
<div class="space-y-2 mb-2">
<div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
<div class="space-y-0 mb-2 rounded-lg overflow-hidden">
<div v-for="(item, index) in detailList" :key="index"
:class="['flex justify-between items-center text-lg py-3 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<div class="flex items-center">
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
<span class="text-gray-600">{{ item.label }}</span>
@@ -22,7 +23,7 @@
</div>
<!-- 非银行类机构申请情况（近1年 / 近3个月，仅在12个月tab下展示） -->
<Remark v-if="period === 'm12' && applyRemarks.nbankSituation" :title="'非银行类机构申请情况'"
<Remark class="mt-8 mb-0" v-if="period === 'm12' && applyRemarks.nbankSituation" :title="'非银行类机构申请情况'"
:content="applyRemarks.nbankSituation" :default-expanded="true" />
</template>
@@ -121,7 +122,7 @@ const pieChartOption = computed(() => {
top: 'center',
textStyle: {
color: '#999',
fontSize: 14
fontSize: 16
}
}
}
@@ -139,7 +140,7 @@ const pieChartOption = computed(() => {
style: {
text: '非银机构',
fill: '#111827',
fontSize: 14,
fontSize: 16,
fontWeight: 'bold',
},
},
@@ -166,7 +167,7 @@ const pieChartOption = computed(() => {
},
label: {
show: true,
fontSize: 14,
fontSize: 16,
fontWeight: 'bold',
color: '#333'
}

17
src/ui/JRZQ6F2A/components/NBankOrgSection.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="mb-6">
<div class="">
<LTitle title="非银机构申请机构数分布" />
<div class="mt-4">
<!-- 饼图：宽度占满 -->
@@ -8,8 +8,9 @@
</div>
<!-- 详细列表：在图表下方，展示所有项并带颜色标识 -->
<div class="space-y-2 mb-2">
<div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
<div class="space-y-0 mb-2 rounded-lg overflow-hidden">
<div v-for="(item, index) in detailList" :key="index"
:class="['flex justify-between items-center text-lg py-3 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<div class="flex items-center">
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
<span class="text-gray-600">{{ item.label }}</span>
@@ -23,8 +24,8 @@
</div>
<!-- 非银行类机构申请建议（仅在12个月tab下展示） -->
<Remark v-if="period === 'm12' && applyRemarks.nbankAdvice" :title="'非银行类机构申请建议'" :content="applyRemarks.nbankAdvice"
:default-expanded="false" />
<Remark class="mt-8 mb-0" v-if="period === 'm12' && applyRemarks.nbankAdvice" :title="'非银行类机构申请建议'"
:content="applyRemarks.nbankAdvice" :default-expanded="true" />
</template>
<script setup>
@@ -122,7 +123,7 @@ const pieChartOption = computed(() => {
top: 'center',
textStyle: {
color: '#999',
fontSize: 14
fontSize: 16
}
}
}
@@ -140,7 +141,7 @@ const pieChartOption = computed(() => {
style: {
text: '非银机构',
fill: '#111827',
fontSize: 14,
fontSize: 16,
fontWeight: 'bold',
},
},
@@ -167,7 +168,7 @@ const pieChartOption = computed(() => {
},
label: {
show: true,
fontSize: 14,
fontSize: 16,
fontWeight: 'bold',
color: '#333'
}

9
src/ui/JRZQ6F2A/components/ProductTypeDistributionSection.vue
View File

@@ -8,8 +8,9 @@
</div>
<!-- 详细列表：与图表颜色一致，包含 0 次的类型 -->
<div class="space-y-2 px-4 pb-4">
<div v-for="item in detailList" :key="item.key" class="flex items-center justify-between text-sm">
<div class="space-y-0 px-4 pb-4 rounded-lg overflow-hidden">
<div v-for="(item, index) in detailList" :key="item.key"
:class="['flex items-center justify-between text-lg py-3 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<div class="flex items-center">
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
<span class="text-gray-600">{{ item.label }}</span>
@@ -127,7 +128,7 @@ const chartOption = computed(() => {
type: 'category',
data: categories,
axisLabel: {
fontSize: 10,
fontSize: 13,
color: '#6b7280',
rotate: 30
},
@@ -140,7 +141,7 @@ const chartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 11,
fontSize: 16,
color: '#6b7280',
formatter: '{value} 次'
},

45
src/ui/JRZQ6F2A/components/RecentIntensiveApplicationSection.vue
View File

@@ -3,34 +3,15 @@
<div class="rounded-lg border border-gray-200 p-4 space-y-3">
<LTitle title="近期集中申请提示" />
<div v-if="hasAnyData" class="space-y-2 text-sm text-gray-700">
<div class="flex justify-between">
<span>最近在银行连续申请次数</span>
<span class="font-bold text-[#111827]">{{ bankCons }} 次</span>
</div>
<div class="flex justify-between">
<span>最近在银行连续申请天数</span>
<span class="font-bold text-[#111827]">{{ bankDays }} 天</span>
</div>
<div class="flex justify-between">
<span>最近在非银连续申请次数</span>
<span class="font-bold text-[#111827]">{{ nbankCons }} 次</span>
</div>
<div class="flex justify-between">
<span>最近在非银连续申请天数</span>
<span class="font-bold text-[#111827]">{{ nbankDays }} 天</span>
</div>
<div class="flex justify-between">
<span>距最近一次在银行机构申请</span>
<span class="font-bold text-[#111827]">{{ bankGap }} 天</span>
</div>
<div class="flex justify-between">
<span>距最近一次在非银机构申请</span>
<span class="font-bold text-[#111827]">{{ nbankGap }} 天</span>
<div v-if="hasAnyData" class="space-y-0 text-lg text-gray-700 rounded-lg overflow-hidden">
<div v-for="(item, index) in dataItems" :key="item.label"
:class="['flex justify-between py-3 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<span>{{ item.label }}</span>
<span class="font-bold text-[#111827]">{{ item.value }}</span>
</div>
</div>
<div v-else class="text-sm text-gray-400">
<div v-else class="text-base text-gray-400">
暂未查询到明显的近期集中申请行为。
</div>
</div>
@@ -91,6 +72,18 @@ const hasAnyData = computed(() => {
(nbankGap.value || 0) > 0
)
})
// 数据项列表
const dataItems = computed(() => {
return [
{ label: '最近在银行连续申请次数', value: `${bankCons.value} 次` },
{ label: '最近在银行连续申请天数', value: `${bankDays.value} 天` },
{ label: '最近在非银连续申请次数', value: `${nbankCons.value} 次` },
{ label: '最近在非银连续申请天数', value: `${nbankDays.value} 天` },
{ label: '距最近一次在银行机构申请', value: `${bankGap.value} 天` },
{ label: '距最近一次在非银机构申请', value: `${nbankGap.value} 天` }
]
})
</script>
<style scoped>
@@ -98,5 +91,3 @@ const hasAnyData = computed(() => {
background: #ffffff;
}
</style>

69
src/ui/JRZQ6F2A/components/RiskSummarySection.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<div class="card rounded-lg border border-gray-200 pb-2 mb-2">
<div class="px-4 pt-4 pb-4">
<LTitle title="风险汇总" />
<div class="space-y-0 mt-3 rounded-lg overflow-hidden">
<div v-for="(risk, index) in riskSummary" :key="risk.label"
:class="['flex justify-between items-center text-lg py-4 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
<span class="text-gray-600">{{ risk.label }}</span>
<span class="font-semibold text-xl" :class="getRiskClass(risk.value)">{{ risk.value }}</span>
</div>
</div>
</div>
<!-- 风险汇总解读 -->
<Remark :content="riskRemark" title="风险解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import { getRiskSummary, generateRiskRemark } from '../utils/dataParser'
const props = defineProps({
data: {
type: Object,
required: true,
default: () => ({}),
},
// 维度：id（身份证） / cell（手机号）
dimension: {
type: String,
default: 'id',
},
})
// 风险汇总
const riskSummary = computed(() => {
return getRiskSummary(props.data || {}, props.dimension)
})
// 风险汇总解读文本
const riskRemark = computed(() => {
return generateRiskRemark(riskSummary.value)
})
// 根据风险等级返回对应的样式类
const getRiskClass = (level) => {
switch (level) {
case '无风险':
return 'text-green-600'
case '低风险':
return 'text-blue-600'
case '中风险':
return 'text-amber-600'
case '高风险':
return 'text-red-600'
default:
return 'text-gray-600'
}
}
</script>
<style scoped>
.card {
background: #ffffff;
}
</style>

54
src/ui/JRZQ6F2A/components/SummaryApplyStats.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="card rounded-lg border border-gray-200 pb-2 mb-2">
<div class="flex items-center justify-between mb-4 px-4 pt-4">
<span class="font-bold text-gray-800">借贷意向统计概览</span>
<LTitle title="统计概览" />
<!-- 维度切换按钮组 -->
<div class="inline-flex rounded-full overflow-hidden text-sm">
<div class="inline-flex rounded-full overflow-hidden text-base">
<button class="px-4 py-1 border border-[#2B79EE] rounded-l-full"
:class="dimension === 'id' ? 'bg-[#2B79EE] text-white' : 'bg-white text-[#2B79EE]'"
@click="$emit('update:dimension', 'id')">
@@ -19,38 +19,22 @@
<div class="grid grid-cols-2 gap-4 px-4 pb-4">
<div v-for="item in items" :key="item.label"
class="bg-blue-50 rounded-lg p-3 text-center border border-[#2B79EE1A]">
<div class="text-xl font-bold text-[#111827]">
<div class="text-2xl font-bold text-[#111827]">
{{ item.value }}
<span class="text-sm text-gray-500 ml-1">{{ item.unit }}</span>
<span class="text-base text-gray-500 ml-1">{{ item.unit }}</span>
</div>
<div class="text-sm text-gray-600 mt-1">
<div class="text-base text-gray-600 mt-1">
{{ item.label }}
</div>
</div>
</div>
<!-- 风险汇总 -->
<div class="px-4 pb-4 mt-4">
<LTitle title="风险汇总" />
<div class="space-y-2 mt-3">
<div v-for="risk in riskSummary" :key="risk.label" class="flex justify-between items-center text-sm">
<span class="text-gray-600">{{ risk.label }}</span>
<span class="font-semibold" :class="getRiskClass(risk.value)">{{ risk.value }}</span>
</div>
</div>
</div>
<!-- 风险汇总解读 -->
<Remark :content="riskRemark" title="风险解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import { getApplicationCounts, getBankOrgDetails, getNBankOrgDetails, getRiskSummary, generateRiskRemark } from '../utils/dataParser'
import { getApplicationCounts, getBankOrgDetails, getNBankOrgDetails } from '../utils/dataParser'
const props = defineProps({
data: {
@@ -96,32 +80,6 @@ const items = computed(() => {
{ label: '周末申请次数', value: weekendTotal || 0, unit: '次' },
]
})
// 风险汇总
const riskSummary = computed(() => {
return getRiskSummary(props.data || {}, props.dimension)
})
// 风险汇总解读文本
const riskRemark = computed(() => {
return generateRiskRemark(riskSummary.value)
})
// 根据风险等级返回对应的样式类
const getRiskClass = (level) => {
switch (level) {
case '无风险':
return 'text-green-600'
case '低风险':
return 'text-blue-600'
case '中风险':
return 'text-amber-600'
case '高风险':
return 'text-red-600'
default:
return 'text-gray-600'
}
}
</script>
<style scoped>

4
src/ui/JRZQ6F2A/index.vue
View File

@@ -17,6 +17,9 @@
<!-- 申请机构总数 (银行+非银) -->
<InstitutionTotalSection :data="variableValue" :dimension="activeDimension" />
<!-- 风险汇总 -->
<RiskSummarySection :data="variableValue" :dimension="activeDimension" />
</div>
</template>
@@ -30,6 +33,7 @@ import InstitutionTotalSection from './components/InstitutionTotalSection.vue'
import SummaryApplyStats from './components/SummaryApplyStats.vue'
import ProductTypeDistributionSection from './components/ProductTypeDistributionSection.vue'
import RecentIntensiveApplicationSection from './components/RecentIntensiveApplicationSection.vue'
import RiskSummarySection from './components/RiskSummarySection.vue'
const props = defineProps({
data: {

3
src/views/Example.vue
View File

@@ -1,6 +1,9 @@
<template>
<BaseReport :feature="feature" :reportData="reportData" :reportParams="reportParams" :reportName="reportName"
:reportDateTime="reportDateTime" :isEmpty="isEmpty" :isDone="isDone" isExample />
<div class="w-20 h-20 z-[1000] fixed right-0 top-1/2 -translate-y-1/2">
<img src="@/assets/images/example_sy.png" alt="example" class="w-full h-full object-contain" />
</div>
</template>
<script setup>