新增：JRZQ3C9R支付行为指数组件

src/components/BaseReport.vue

@@ -565,6 +565,14 @@ const featureMap = {
         component: defineAsyncComponent(() => import("@/ui/YYSY8B1C/index.vue")),
         remark: '手机在网时长查询用于检测用户手机号码的在网使用时长。在网时长越长，通常表示用户身份越稳定，信用风险越低。需要注意的是，如果手机号码存在携号转网的情况，那么在网时长会从转网的时候重新计算，转网前的在网时长不计入当前在网时长。建议结合手机携号转网查询结果进行综合评估。'
     },
+
+    // 支付行为指数
+    JRZQ3C9R: {
+        name: "支付行为指数",
+        component: defineAsyncComponent(() => import("@/ui/JRZQ3C9R/index.vue")),
+        remark: '支付行为指数基于近两年的查验记录、还款成功与失败表现以及余额不足情况，对用户支付与还款习惯进行量化评分，用于评估其支付稳定性与违约风险。'
+    },
+
 };
 
 const maskValue = computed(() => {
@@ -664,7 +672,7 @@ const featureRiskLevels = {
     'QYGL3F8E': 5,         // 人企关系加强版
     'QCXG7A2B': 5,         // 名下车辆
     'JRZQ09J8': 5,         // 收入评估
-
+    'JRZQ3C9R': 5,         // 支付行为指数
     // 🔵 低风险类 - 权重 3
     'IVYZ5733': 3,         // 婚姻状态
     'IVYZ9A2B': 3,         // 学历信息

src/ui/JRZQ3C9R/components/BasicInfoSection.vue

@@ -0,0 +1,200 @@
+<template>
+    <div class="card rounded-lg border border-gray-200 mb-2">
+        <div class="mt-4">
+            <LTitle title="基础信息与近期行为比例" />
+
+            <!-- 查贷比柱状图 -->
+            <div class="h-64 px-2 mb-4">
+                <v-chart class="chart-container" :option="ratioChartOption" autoresize />
+            </div>
+
+            <div class="px-4 pb-4 space-y-4 text-sm text-gray-700">
+                <!-- 基础信息 -->
+                <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>
+                        </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>
+                    </div>
+                </div>
+
+                <!-- 近期查贷比（查验次数 / 借款次数） -->
+                <div>
+                    <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="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 ratioRows" :key="row.label"
+                                :class="['grid grid-cols-2 text-sm', 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>
+                                <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
+                                    {{ formatRatio(row.value) }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import LTitle from '@/components/LTitle.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'
+
+use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
+
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+        default: () => ({})
+    }
+})
+
+const data = computed(() => props.data || {})
+
+const flagText = computed(() => {
+    const v = data.value.flag
+    if (v === 1 || v === '1') return '查得'
+    if (v === 0 || v === '0') return '查无'
+    return '-'
+})
+
+const flagDbText = computed(() => {
+    const v = data.value.flagdb
+    if (v === 1 || v === '1') return '库有'
+    if (v === 0 || v === '0') return '库无'
+    return '-'
+})
+
+const ratioRows = computed(() => {
+    const v = data.value
+    return [
+        { label: '近1个月查贷比', value: normalizeValue(v.ppcm_m1_qy_rep_ratio) },
+        { label: '近3个月查贷比', value: normalizeValue(v.ppcm_m3_qy_rep_ratio) },
+        { label: '近6个月查贷比', value: normalizeValue(v.ppcm_m6_qy_rep_ratio) },
+        { label: '近1年查贷比', value: normalizeValue(v.ppcm_m12_qy_rep_ratio) }
+    ]
+})
+
+const formatRatio = (v) => {
+    if (!v) return '-'
+    return v.toFixed ? v.toFixed(2) : v
+}
+// 查贷比柱状图配置
+const ratioChartOption = computed(() => {
+    const labels = ratioRows.value.map(r => r.label)
+    const values = ratioRows.value.map(r => r.value || 0)
+
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'shadow' },
+            formatter(params) {
+                const p = params[0]
+                if (!p) return ''
+                return `${p.name}<br/>查贷比：${formatRatio(p.value)}`
+            }
+        },
+        grid: {
+            left: '6%',
+            right: '6%',
+            top: 20,
+            bottom: 0,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: labels,
+            axisLabel: {
+                fontSize: 12,
+                color: '#6b7280'
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#e5e7eb'
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                fontSize: 12,
+                color: '#6b7280'
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f3f4f6'
+                }
+            }
+        },
+        series: [
+            {
+                name: '查贷比',
+                type: 'bar',
+                data: values,
+                barWidth: '35%',
+                barMinHeight: 3,
+                itemStyle: {
+                    color: '#2B79EE',
+                    borderRadius: [4, 4, 0, 0]
+                }
+            }
+        ]
+    }
+})
+</script>
+
+<style scoped>
+.card {
+    background: #ffffff;
+}
+
+.chart-container {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/ui/JRZQ3C9R/components/InsufficientRatioSection.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="card rounded-lg border border-gray-200 mb-2">
+    <div class="mt-4">
+      <LTitle title="余额不足导致还款失败占比" />
+      <div class="h-64 px-2">
+        <v-chart class="chart-container" :option="chartOption" autoresize />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from '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 LTitle from '@/components/LTitle.vue'
+import { PERIODS, getInsufficientRatioByPeriod } from '../utils/dataParser'
+
+use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+})
+
+const chartOption = computed(() => {
+  const ratio = getInsufficientRatioByPeriod(props.data || {})
+  const labels = PERIODS.map(p => p.label)
+  const values = PERIODS.map(p => (ratio[p.key] || 0) * 100)
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter(params) {
+        const p = params[0]
+        return `${p.name}<br/>余额不足失败占比：${p.value.toFixed(2)}%`
+      }
+    },
+    grid: {
+      left: '6%',
+      right: '6%',
+      top: 20,
+      bottom: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: {
+        fontSize: 10,
+        color: '#6b7280'
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        fontSize: 11,
+        color: '#6b7280',
+        formatter: '{value}%'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f3f4f6'
+        }
+      }
+    },
+    series: [
+      {
+        name: '余额不足失败占比',
+        type: 'bar',
+        data: values,
+        barWidth: '30%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#F97316',
+          borderRadius: [4, 4, 0, 0]
+        }
+      }
+    ]
+  }
+})
+</script>
+
+<style scoped>
+.card {
+  background: #ffffff;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+

src/ui/JRZQ3C9R/components/LoanAndOverdueSection.vue

@@ -0,0 +1,322 @@
+<template>
+    <div class="card rounded-lg border border-gray-200 mb-2">
+        <div class="mt-4">
+            <LTitle title="借款与逾期概览" />
+
+            <!-- 借款次数汇总图 -->
+            <div class="h-64 px-2 mb-4">
+                <v-chart class="chart-container" :option="loanChartOption" autoresize />
+            </div>
+
+            <!-- 逾期次数汇总图 -->
+            <div class="h-64 px-2 mb-4">
+                <v-chart class="chart-container" :option="overdueChartOption" autoresize />
+            </div>
+
+            <div class="mb-4 mt-4 space-y-4">
+                <!-- 借款次数 / 机构数 -->
+                <div>
+                    <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-6 text-sm">
+                                <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">银行
+                                </div>
+                                <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">其他机构
+                                </div>
+                                <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>
+                            </div>
+                        </div>
+                        <!-- 数据行 -->
+                        <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' : '']">
+                                <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] border-r border-gray-200 whitespace-nowrap">
+                                    {{ row.bank }}</div>
+                                <div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
+                                    {{ row.fin }}</div>
+                                <div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
+                                    {{ row.other }}</div>
+                                <div
+                                    class="py-3 text-center text-[#333333] font-semibold border-r border-gray-200 whitespace-nowrap">
+                                    {{ row.total }}</div>
+                                <div class="py-3 text-center text-[#333333] whitespace-nowrap">{{ row.orgTotal }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 借款等级 -->
+                <div>
+                    <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="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
+                                </div>
+                                <div class="py-3 text-center font-semibold whitespace-nowrap">综合借款等级</div>
+                            </div>
+                        </div>
+                        <!-- 数据行 -->
+                        <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' : '']">
+                                <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>
+
+                <!-- 逾期次数与等级 -->
+                <div>
+                    <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="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">逾期次数
+                                </div>
+                                <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>
+                            </div>
+                        </div>
+                        <!-- 数据行 -->
+                        <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' : '']">
+                                <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] border-r border-gray-200 whitespace-nowrap">
+                                    {{ row.num }}</div>
+                                <div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
+                                    {{ row.org }}</div>
+                                <div class="py-3 text-center text-[#333333] font-semibold whitespace-nowrap">{{
+                                    row.level }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import LTitle from '@/components/LTitle.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'
+
+use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
+
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+        default: () => ({})
+    }
+})
+
+// 借款次数与机构数
+const loanRows = computed(() => {
+    const v = props.data || {}
+    return PERIODS.map(p => {
+        const prefix = `ppcm_${p.key}`
+        return {
+            key: p.key,
+            label: p.label,
+            bank: normalizeValue(v[`${prefix}_bank_loannum`]),
+            fin: normalizeValue(v[`${prefix}_nbank_fin_loannum`]),
+            other: normalizeValue(v[`${prefix}_nbank_other_loannum`]),
+            total: normalizeValue(v[`${prefix}_loannum`]),
+            orgTotal: normalizeValue(v[`${prefix}_loanorg`])
+        }
+    })
+})
+
+// 借款等级 ppcm_{period}_loanamt
+const loanAmtRows = computed(() => {
+    const v = props.data || {}
+    return PERIODS.map(p => {
+        const prefix = `ppcm_${p.key}`
+        return {
+            key: p.key,
+            label: p.label,
+            amt: normalizeValue(v[`${prefix}_loanamt`])
+        }
+    })
+})
+
+// 逾期次数 / 机构数 / 等级
+const overdueRows = computed(() => {
+    const v = props.data || {}
+    const periodKeys = ['d7', 'm1', 'm3', 'm6', 'm12', 'm24']
+    const labelMap = {
+        d7: '近7天',
+        m1: '近1个月',
+        m3: '近3个月',
+        m6: '近6个月',
+        m12: '近1年',
+        m24: '近2年'
+    }
+    return periodKeys.map(key => {
+        const prefix = `ppcm_${key}`
+        return {
+            key,
+            label: labelMap[key],
+            num: normalizeValue(v[`${prefix}_overnum`]),
+            org: normalizeValue(v[`${prefix}_overorg`]),
+            level: normalizeValue(v[`${prefix}_overamt`])
+        }
+    })
+})
+
+// 借款次数汇总柱状图（总借款次数）
+const loanChartOption = computed(() => {
+    const labels = PERIODS.map(p => p.label)
+    const totals = loanRows.value.map(r => r.total)
+
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'shadow' }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            top: 20,
+            bottom: 0,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: labels,
+            axisLabel: {
+                fontSize: 12,
+                color: '#6b7280'
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#e5e7eb'
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                fontSize: 12,
+                color: '#6b7280',
+                formatter: '{value} 次'
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f3f4f6'
+                }
+            }
+        },
+        series: [
+            {
+                name: '总借款次数',
+                type: 'bar',
+                data: totals,
+                barWidth: '35%',
+                barMinHeight: 3,
+                itemStyle: {
+                    color: '#60A5FA',
+                    borderRadius: [4, 4, 0, 0]
+                }
+            }
+        ]
+    }
+})
+
+// 逾期次数汇总柱状图
+const overdueChartOption = computed(() => {
+    const labels = overdueRows.value.map(r => r.label)
+    const nums = overdueRows.value.map(r => r.num)
+
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'shadow' }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            top: 20,
+            bottom: 0,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: labels,
+            axisLabel: {
+                fontSize: 12,
+                color: '#6b7280'
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#e5e7eb'
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                fontSize: 12,
+                color: '#6b7280',
+                formatter: '{value} 次'
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f3f4f6'
+                }
+            }
+        },
+        series: [
+            {
+                name: '逾期次数',
+                type: 'bar',
+                data: nums,
+                barWidth: '35%',
+                barMinHeight: 3,
+                itemStyle: {
+                    color: '#F97316',
+                    borderRadius: [4, 4, 0, 0]
+                }
+            }
+        ]
+    }
+})
+</script>
+
+<style scoped>
+.card {
+    background: #ffffff;
+}
+
+.chart-container {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/ui/JRZQ3C9R/components/QueryOverviewSection.vue

@@ -0,0 +1,252 @@
+<template>
+    <div class="card rounded-lg border border-gray-200 mb-2">
+        <div class="mt-4">
+            <LTitle title="查验行为概览（次数 / 机构数 / 天数）" />
+
+            <!-- 查验次数图表 -->
+            <div class="h-64 px-2 mb-4">
+                <v-chart class="chart-container" :option="countChartOption" autoresize />
+            </div>
+
+            <div class="mb-4 mt-4 space-y-4">
+                <!-- 查验次数 -->
+                <div>
+                    <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="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">银行
+                                </div>
+                                <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">其他机构
+                                </div>
+                                <div class="py-3 text-center font-semibold whitespace-nowrap">总次数</div>
+                            </div>
+                        </div>
+                        <!-- 数据行 -->
+                        <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' : '']">
+                                <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] border-r border-gray-200 whitespace-nowrap">
+                                    {{ row.bank }}</div>
+                                <div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
+                                    {{ row.fin }}</div>
+                                <div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
+                                    {{ row.other }}</div>
+                                <div class="py-3 text-center text-[#333333] font-semibold whitespace-nowrap">{{
+                                    row.total }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 查验机构数 -->
+                <div>
+                    <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="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">银行
+                                </div>
+                                <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">其他机构
+                                </div>
+                                <div class="py-3 text-center font-semibold whitespace-nowrap">总机构数</div>
+                            </div>
+                        </div>
+                        <!-- 数据行 -->
+                        <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' : '']">
+                                <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] border-r border-gray-200 whitespace-nowrap">
+                                    {{ row.bank }}</div>
+                                <div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
+                                    {{ row.fin }}</div>
+                                <div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
+                                    {{ row.other }}</div>
+                                <div class="py-3 text-center text-[#333333] font-semibold whitespace-nowrap">{{
+                                    row.total }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 查验天数 -->
+                <div>
+                    <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="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
+                                </div>
+                                <div class="py-3 text-center font-semibold whitespace-nowrap">查验天数</div>
+                            </div>
+                        </div>
+                        <!-- 数据行 -->
+                        <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' : '']">
+                                <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.days
+                                    }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import LTitle from '@/components/LTitle.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'
+
+use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
+
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+        default: () => ({})
+    }
+})
+
+// 查验次数
+const queryCountRows = computed(() => {
+    const v = props.data || {}
+    return PERIODS.map(p => {
+        const prefix = `ppcm_${p.key}`
+        return {
+            key: p.key,
+            label: p.label,
+            bank: normalizeValue(v[`${prefix}_bank_qynum`]),
+            fin: normalizeValue(v[`${prefix}_nbank_fin_qynum`]),
+            other: normalizeValue(v[`${prefix}_nbank_other_qynum`]),
+            total: normalizeValue(v[`${prefix}_qynum`])
+        }
+    })
+})
+
+// 查验次数汇总柱状图（总次数）
+const countChartOption = computed(() => {
+    const labels = PERIODS.map(p => p.label)
+    const totals = queryCountRows.value.map(r => r.total)
+
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'shadow' }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            top: 20,
+            bottom: 0,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: labels,
+            axisLabel: {
+                fontSize: 12,
+                color: '#6b7280'
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#e5e7eb'
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                fontSize: 12,
+                color: '#6b7280',
+                formatter: '{value} 次'
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f3f4f6'
+                }
+            }
+        },
+        series: [
+            {
+                name: '总查验次数',
+                type: 'bar',
+                data: totals,
+                barWidth: '35%',
+                barMinHeight: 3,
+                itemStyle: {
+                    color: '#2B79EE',
+                    borderRadius: [4, 4, 0, 0]
+                }
+            }
+        ]
+    }
+})
+
+// 查验机构数
+const queryOrgRows = computed(() => {
+    const v = props.data || {}
+    return PERIODS.map(p => {
+        const prefix = `ppcm_${p.key}`
+        return {
+            key: p.key,
+            label: p.label,
+            bank: normalizeValue(v[`${prefix}_bank_qyorg`]),
+            fin: normalizeValue(v[`${prefix}_nbank_fin_qyorg`]),
+            other: normalizeValue(v[`${prefix}_nbank_other_qyorg`]),
+            total: normalizeValue(v[`${prefix}_qyorg`])
+        }
+    })
+})
+
+// 查验天数
+const queryDayRows = computed(() => {
+    const v = props.data || {}
+    const dayKeys = ['m1', 'm3', 'm6', 'm12', 'm24']
+    const labelMap = {
+        m1: '近1个月',
+        m3: '近3个月',
+        m6: '近6个月',
+        m12: '近1年',
+        m24: '近2年'
+    }
+    return dayKeys.map(key => {
+        const prefix = `ppcm_${key}`
+        return {
+            key,
+            label: labelMap[key],
+            days: normalizeValue(v[`${prefix}_qyday`])
+        }
+    })
+})
+</script>
+
+<style scoped>
+.card {
+    background: #ffffff;
+}
+</style>

src/ui/JRZQ3C9R/components/QueryTrendSection.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="card rounded-lg border border-gray-200 mb-2">
+    <div class="mt-4">
+      <LTitle title="查验次数时间分布" />
+      <div class="h-64 px-2">
+        <v-chart class="chart-container" :option="chartOption" autoresize />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from '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 LTitle from '@/components/LTitle.vue'
+import { PERIODS, getQueryCountsByPeriod } from '../utils/dataParser'
+
+use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+})
+
+const chartOption = computed(() => {
+  const counts = getQueryCountsByPeriod(props.data || {})
+  const labels = PERIODS.map(p => p.label)
+
+  const bankData = PERIODS.map(p => counts[p.key]?.bank || 0)
+  const finData = PERIODS.map(p => counts[p.key]?.nbankFin || 0)
+  const otherData = PERIODS.map(p => counts[p.key]?.nbankOther || 0)
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' }
+    },
+    legend: {
+      top: 0,
+      icon: 'circle',
+      textStyle: {
+        fontSize: 11,
+        color: '#4b5563'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      top: 24,
+      bottom: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: {
+        fontSize: 10,
+        color: '#6b7280'
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        fontSize: 11,
+        color: '#6b7280',
+        formatter: '{value} 次'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f3f4f6'
+        }
+      }
+    },
+    series: [
+      {
+        name: '银行查验次数',
+        type: 'bar',
+        data: bankData,
+        barWidth: '25%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#2B79EE',
+          borderRadius: [4, 4, 0, 0]
+        }
+      },
+      {
+        name: '消费金融查验次数',
+        type: 'bar',
+        data: finData,
+        barWidth: '25%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#60A5FA',
+          borderRadius: [4, 4, 0, 0]
+        }
+      },
+      {
+        name: '其他机构查验次数',
+        type: 'bar',
+        data: otherData,
+        barWidth: '25%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#A855F7',
+          borderRadius: [4, 4, 0, 0]
+        }
+      }
+    ]
+  }
+})
+</script>
+
+<style scoped>
+.card {
+  background: #ffffff;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+

src/ui/JRZQ3C9R/components/RepayFailTrendSection.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="card rounded-lg border border-gray-200 mb-2">
+    <div class="mt-4">
+      <LTitle title="还款失败次数趋势" />
+      <div class="h-64 px-2">
+        <v-chart class="chart-container" :option="chartOption" autoresize />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from '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 LTitle from '@/components/LTitle.vue'
+import { PERIODS, getRepayCountsByPeriod } from '../utils/dataParser'
+
+use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+})
+
+const chartOption = computed(() => {
+  const counts = getRepayCountsByPeriod(props.data || {})
+  const labels = PERIODS.map(p => p.label)
+
+  const failData = PERIODS.map(p => counts[p.key]?.fail || 0)
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      top: 24,
+      bottom: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: {
+        fontSize: 10,
+        color: '#6b7280'
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        fontSize: 11,
+        color: '#6b7280',
+        formatter: '{value} 次'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f3f4f6'
+        }
+      }
+    },
+    series: [
+      {
+        name: '还款失败次数',
+        type: 'bar',
+        data: failData,
+        barWidth: '30%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#F97316',
+          borderRadius: [4, 4, 0, 0]
+        }
+      }
+    ]
+  }
+})
+</script>
+
+<style scoped>
+.card {
+  background: #ffffff;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+

src/ui/JRZQ3C9R/components/RepayOrgAndLevelSection.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="card rounded-lg border border-gray-200 mb-2">
+    <div class="mt-4">
+      <LTitle title="还款机构数与等级概览" />
+
+      <!-- 还款成功 / 失败机构数对比图 -->
+      <div class="h-64 px-2 mb-4">
+        <v-chart class="chart-container" :option="orgChartOption" autoresize />
+      </div>
+
+      <div class="mb-4 mt-4 space-y-4">
+        <!-- 还款成功机构数 -->
+        <div>
+          <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="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 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="bg-[#5d7eeb] text-white">
+              <div class="grid grid-cols-2 text-sm">
+                <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 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="bg-[#5d7eeb] text-white">
+              <div class="grid grid-cols-3 text-sm">
+                <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>
+              </div>
+            </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 class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.fail }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import LTitle from '@/components/LTitle.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'
+
+use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+})
+
+// 还款成功机构数 ppcm_{period}_succ_reporg
+const successOrgRows = computed(() => {
+  const v = props.data || {}
+  return PERIODS.map(p => {
+    const prefix = `ppcm_${p.key}`
+    return {
+      key: p.key,
+      label: p.label,
+      value: normalizeValue(v[`${prefix}_succ_reporg`])
+    }
+  })
+})
+
+// 还款失败机构数 ppcm_{period}_fail_reporg
+const failOrgRows = computed(() => {
+  const v = props.data || {}
+  return PERIODS.map(p => {
+    const prefix = `ppcm_${p.key}`
+    return {
+      key: p.key,
+      label: p.label,
+      value: normalizeValue(v[`${prefix}_fail_reporg`])
+    }
+  })
+})
+
+// 还款成功 / 失败等级 ppcm_{period}_succ_repamt / fail_repamt
+const levelRows = computed(() => {
+  const v = props.data || {}
+  return PERIODS.map(p => {
+    const prefix = `ppcm_${p.key}`
+    return {
+      key: p.key,
+      label: p.label,
+      succ: normalizeValue(v[`${prefix}_succ_repamt`]),
+      fail: normalizeValue(v[`${prefix}_fail_repamt`])
+    }
+  })
+})
+
+// 成功 / 失败机构数对比图
+const orgChartOption = computed(() => {
+  const labels = PERIODS.map(p => p.label)
+  const succ = successOrgRows.value.map(r => r.value)
+  const fail = failOrgRows.value.map(r => r.value)
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' }
+    },
+    legend: {
+      top: 0,
+      icon: 'circle',
+      textStyle: {
+        fontSize: 12,
+        color: '#4b5563'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      top: 24,
+      bottom: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: {
+        fontSize: 12,
+        color: '#6b7280'
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        fontSize: 12,
+        color: '#6b7280',
+        formatter: '{value} 家'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f3f4f6'
+        }
+      }
+    },
+    series: [
+      {
+        name: '还款成功机构数',
+        type: 'bar',
+        data: succ,
+        barWidth: '30%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#34D399',
+          borderRadius: [4, 4, 0, 0]
+        }
+      },
+      {
+        name: '还款失败机构数',
+        type: 'bar',
+        data: fail,
+        barWidth: '30%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#F97316',
+          borderRadius: [4, 4, 0, 0]
+        }
+      }
+    ]
+  }
+})
+</script>
+
+<style scoped>
+.card {
+  background: #ffffff;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+

src/ui/JRZQ3C9R/components/RepaySuccessTrendSection.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="card rounded-lg border border-gray-200 mb-2">
+    <div class="mt-4">
+      <LTitle title="还款成功次数趋势" />
+      <div class="h-64 px-2">
+        <v-chart class="chart-container" :option="chartOption" autoresize />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from '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 LTitle from '@/components/LTitle.vue'
+import { PERIODS, getRepayCountsByPeriod } from '../utils/dataParser'
+
+use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+})
+
+const chartOption = computed(() => {
+  const counts = getRepayCountsByPeriod(props.data || {})
+  const labels = PERIODS.map(p => p.label)
+
+  const successData = PERIODS.map(p => counts[p.key]?.success || 0)
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      top: 24,
+      bottom: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: {
+        fontSize: 10,
+        color: '#6b7280'
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        fontSize: 11,
+        color: '#6b7280',
+        formatter: '{value} 次'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f3f4f6'
+        }
+      }
+    },
+    series: [
+      {
+        name: '还款成功次数',
+        type: 'bar',
+        data: successData,
+        barWidth: '30%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#34D399',
+          borderRadius: [4, 4, 0, 0]
+        }
+      }
+    ]
+  }
+})
+</script>
+
+<style scoped>
+.card {
+  background: #ffffff;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+

src/ui/JRZQ3C9R/components/RepayTrendSection.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="card rounded-lg border border-gray-200 mb-2">
+    <div class="mt-4">
+      <LTitle title="还款成功 / 失败次数趋势" />
+      <div class="h-64 px-2">
+        <v-chart class="chart-container" :option="chartOption" autoresize />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from '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 LTitle from '@/components/LTitle.vue'
+import { PERIODS, getRepayCountsByPeriod } from '../utils/dataParser'
+
+use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+})
+
+const chartOption = computed(() => {
+  const counts = getRepayCountsByPeriod(props.data || {})
+  const labels = PERIODS.map(p => p.label)
+
+  const successData = PERIODS.map(p => counts[p.key]?.success || 0)
+  const failData = PERIODS.map(p => counts[p.key]?.fail || 0)
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' }
+    },
+    legend: {
+      top: 0,
+      icon: 'circle',
+      textStyle: {
+        fontSize: 11,
+        color: '#4b5563'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      top: 24,
+      bottom: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: {
+        fontSize: 10,
+        color: '#6b7280'
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        fontSize: 11,
+        color: '#6b7280',
+        formatter: '{value} 次'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f3f4f6'
+        }
+      }
+    },
+    series: [
+      {
+        name: '还款成功次数',
+        type: 'bar',
+        data: successData,
+        barWidth: '30%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#34D399',
+          borderRadius: [4, 4, 0, 0]
+        }
+      },
+      {
+        name: '还款失败次数',
+        type: 'bar',
+        data: failData,
+        barWidth: '30%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#F97316',
+          borderRadius: [4, 4, 0, 0]
+        }
+      }
+    ]
+  }
+})
+</script>
+
+<style scoped>
+.card {
+  background: #ffffff;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+

src/ui/JRZQ3C9R/components/ScoreSection.vue

@@ -0,0 +1,71 @@
+<template>
+  <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="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="inline-flex items-center px-2 py-0.5 rounded-full text-sm"
+            :class="levelClass"
+          >
+            {{ level }}
+          </span>
+        </div>
+      </div>
+      <div class="text-right text-sm text-gray-500 max-w-[11rem] leading-relaxed">
+        分数基于近两年查验及还款行为综合评估，分数越高代表支付行为越稳定、违约风险越低。
+      </div>
+    </div>
+    <div class="px-4 pb-4 text-sm text-gray-500">
+      最近一次查验距今天数：
+      <span class="font-medium text-[#111827]">{{ latestQueryText }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { getBehavLevel, mapScoreTo100 } from '../utils/dataParser'
+
+const props = defineProps({
+  score: {
+    type: Number,
+    default: 0
+  },
+  latestQueryText: {
+    type: String,
+    default: '暂无查验记录'
+  }
+})
+
+const scoreDisplay = computed(() => (props.score > 0 ? props.score : '--'))
+
+const level = computed(() => getBehavLevel(props.score))
+
+// 按等级给不同颜色
+const levelClass = computed(() => {
+  const mapped = mapScoreTo100(props.score)
+  if (mapped >= 85) {
+    return 'bg-emerald-50 text-emerald-600'
+  }
+  if (mapped >= 70) {
+    return 'bg-blue-50 text-blue-600'
+  }
+  if (mapped >= 55) {
+    return 'bg-amber-50 text-amber-600'
+  }
+  return 'bg-red-50 text-red-600'
+})
+</script>
+
+<style scoped>
+.card {
+  background: #ffffff;
+}
+</style>
+
+

src/ui/JRZQ3C9R/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <!-- 评分卡片 -->
+    <ScoreSection
+      :score="behavScore"
+      :latest-query-text="latestQueryText"
+    />
+
+    <!-- 查验次数时间分布 -->
+    <QueryTrendSection :data="ppcmData" />
+
+    <!-- 查验次数 / 机构数 / 天数表格概览 -->
+    <QueryOverviewSection :data="ppcmData" />
+
+    <!-- 还款成功次数趋势 -->
+    <RepaySuccessTrendSection :data="ppcmData" />
+
+    <!-- 还款失败次数趋势 -->
+    <RepayFailTrendSection :data="ppcmData" />
+
+    <!-- 余额不足导致还款失败占比 -->
+    <InsufficientRatioSection :data="ppcmData" />
+
+    <!-- 还款机构数与等级 -->
+    <RepayOrgAndLevelSection :data="ppcmData" />
+
+    <!-- 借款与逾期概览 -->
+    <LoanAndOverdueSection :data="ppcmData" />
+
+    <!-- 基础信息与查贷比 -->
+    <BasicInfoSection :data="ppcmData" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRiskNotifier } from '@/composables/useRiskNotifier'
+import {
+  extractPpcmData,
+  getBehavScore,
+  getLatestQueryBucket,
+  mapScoreTo100
+} from './utils/dataParser'
+import ScoreSection from './components/ScoreSection.vue'
+import QueryTrendSection from './components/QueryTrendSection.vue'
+import QueryOverviewSection from './components/QueryOverviewSection.vue'
+import RepaySuccessTrendSection from './components/RepaySuccessTrendSection.vue'
+import RepayFailTrendSection from './components/RepayFailTrendSection.vue'
+import InsufficientRatioSection from './components/InsufficientRatioSection.vue'
+import RepayOrgAndLevelSection from './components/RepayOrgAndLevelSection.vue'
+import LoanAndOverdueSection from './components/LoanAndOverdueSection.vue'
+import BasicInfoSection from './components/BasicInfoSection.vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  apiId: {
+    type: String,
+    default: ''
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  notifyRiskStatus: {
+    type: Function,
+    default: () => {}
+  }
+})
+
+// 原始数据：可能是 { code,data } 或 { data:{code,data} }
+const rawData = computed(() => props.data?.data || props.data || {})
+
+// 提取 ppcm 指标对象
+const ppcmData = computed(() => extractPpcmData(rawData.value))
+
+// 原始行为评分（300-900）
+const behavScore = computed(() => getBehavScore(ppcmData.value))
+
+// 最近一次查验距今天数说明
+const latestQueryText = computed(() => getLatestQueryBucket(ppcmData.value))
+
+// 将评分映射到 0-100 分，用于统一风险分
+const riskScore = computed(() => {
+  return mapScoreTo100(behavScore.value)
+})
+
+// 通知父组件风险评分
+useRiskNotifier(props, riskScore)
+
+defineExpose({
+  riskScore
+})
+</script>
+
+<style scoped>
+.card {
+  background: #ffffff;
+}
+</style>
+
+

src/ui/JRZQ3C9R/utils/dataParser.js

@@ -0,0 +1,160 @@
+/**
+ * 支付行为指数（JRZQ3C9R）数据解析工具
+ */
+
+/**
+ * 将 -1 / 空 / null 统一视为 0，其他数值转为 Number
+ */
+export function normalizeValue(value) {
+    if (value === undefined || value === null || value === "" || value === -1) {
+        return 0;
+    }
+    const num = Number(value);
+    return Number.isNaN(num) ? 0 : num;
+}
+
+/**
+ * 从原始 data 中提取真正的指标对象
+ * 兼容多种包裹结构：
+ * - { code, data: {...} }
+ * - { data: { code, data: {...} } }
+ */
+export function extractPpcmData(raw) {
+    if (!raw) return {};
+
+    // example.json 结构：data.data.data
+    if (raw.data && raw.data.data) {
+        return raw.data.data || {};
+    }
+
+    // 已经是 { code, data } 这一层
+    if (raw.data && !raw.code) {
+        return raw.data || {};
+    }
+
+    return raw || {};
+}
+
+/**
+ * 获取支付行为评分（原始 300-900 分）
+ */
+export function getBehavScore(ppcm) {
+    const score = normalizeValue(ppcm.ppcm_behav_score);
+    return score;
+}
+
+/**
+ * 将 300-900 分映射到 0-100 分（用于统一风险评分体系）
+ */
+export function mapScoreTo100(score) {
+    if (!score || score <= 0) {
+        return 100;
+    }
+    // 限制在 [300,900]
+    const clamped = Math.min(900, Math.max(300, score));
+    // 300 -> 0, 900 -> 100
+    const mapped = ((clamped - 300) / 600) * 100;
+    return Math.round(mapped);
+}
+
+/**
+ * 支付行为评分等级标签
+ */
+export function getBehavLevel(score) {
+    if (!score || score <= 0) return "暂无评分";
+    if (score >= 800) return "优秀";
+    if (score >= 750) return "良好";
+    if (score >= 700) return "中等";
+    if (score >= 650) return "一般";
+    return "偏低";
+}
+
+/**
+ * 通用时间段
+ */
+export const PERIODS = [
+    { key: "d7", label: "近7天" },
+    { key: "m1", label: "近1个月" },
+    { key: "m3", label: "近3个月" },
+    { key: "m6", label: "近6个月" },
+    { key: "m12", label: "近1年" },
+    { key: "m24", label: "近2年" },
+];
+
+/**
+ * 获取查验次数统计（按时间段）
+ * ppcm_{period}_bank_qynum / _nbank_fin_qynum / _nbank_other_qynum / _qynum
+ */
+export function getQueryCountsByPeriod(ppcm) {
+    const result = {};
+
+    PERIODS.forEach((p) => {
+        const prefix = `ppcm_${p.key}`;
+        result[p.key] = {
+            bank: normalizeValue(ppcm[`${prefix}_bank_qynum`]),
+            nbankFin: normalizeValue(ppcm[`${prefix}_nbank_fin_qynum`]),
+            nbankOther: normalizeValue(ppcm[`${prefix}_nbank_other_qynum`]),
+            total: normalizeValue(ppcm[`${prefix}_qynum`]),
+        };
+    });
+
+    return result;
+}
+
+/**
+ * 获取还款成功 / 失败次数统计（按时间段）
+ * success：ppcm_{period}_succ_repnum
+ * fail：ppcm_{period}_fail_repnum
+ */
+export function getRepayCountsByPeriod(ppcm) {
+    const result = {};
+
+    PERIODS.forEach((p) => {
+        const prefix = `ppcm_${p.key}`;
+        result[p.key] = {
+            success: normalizeValue(ppcm[`${prefix}_succ_repnum`]),
+            fail: normalizeValue(ppcm[`${prefix}_fail_repnum`]),
+        };
+    });
+
+    return result;
+}
+
+/**
+ * 获取余额不足失败占比（按时间段）
+ * ppcm_{period}_fail_neh_repnum_ratio
+ */
+export function getInsufficientRatioByPeriod(ppcm) {
+    const result = {};
+
+    PERIODS.forEach((p) => {
+        const prefix = `ppcm_${p.key}`;
+        result[p.key] = normalizeValue(ppcm[`${prefix}_fail_neh_repnum_ratio`]);
+    });
+
+    return result;
+}
+
+/**
+ * 解析最近一次查验距今天数区间编码
+ * ppcm_latest_qytoday: 1-10 档位
+ */
+export function getLatestQueryBucket(ppcm) {
+    const code = normalizeValue(ppcm.ppcm_latest_qytoday);
+    if (!code) return "暂无查验记录";
+
+    const mapping = {
+        1: "0-7天",
+        2: "7-15天",
+        3: "15-30天",
+        4: "30-60天",
+        5: "60-90天",
+        6: "90-120天",
+        7: "120-150天",
+        8: "150-180天",
+        9: "180-360天",
+        10: "360天以上",
+    };
+
+    return mapping[code] || "未知区间";
+}