From 9bb7c4ddae5630ded12e0cb4dd8ea07ae0355616 Mon Sep 17 00:00:00 2001
From: liangzai <2440983361@qq.com>
Date: Wed, 11 Feb 2026 15:02:56 +0800
Subject: [PATCH] f

---
 report-viewer/src/components/BaseReport.vue |   2 +-
 src/components/BaseReport.vue               |   9 +-
 src/layouts/HomeLayout.vue                  |   2 +-
 src/ui/JRZQ8B3C/README.md                   | 149 ++++++++
 src/ui/JRZQ8B3C/index.vue                   | 377 ++++++++++++++++++++
 5 files changed, 535 insertions(+), 4 deletions(-)
 create mode 100644 src/ui/JRZQ8B3C/README.md
 create mode 100644 src/ui/JRZQ8B3C/index.vue

diff --git a/report-viewer/src/components/BaseReport.vue b/report-viewer/src/components/BaseReport.vue
index 607685c..3a150f5 100644
--- a/report-viewer/src/components/BaseReport.vue
+++ b/report-viewer/src/components/BaseReport.vue
@@ -592,7 +592,7 @@ watch([reportData, componentRiskScores], () => {
             </div>
             <div>
                 <a class="text-blue-500" href="https://beian.miit.gov.cn">
-                    琼ICP备2024048057号-2
+                    琼ICP备2024038584号-13
                 </a>
             </div>
         </div>
diff --git a/src/components/BaseReport.vue b/src/components/BaseReport.vue
index 14c78d3..aca486a 100644
--- a/src/components/BaseReport.vue
+++ b/src/components/BaseReport.vue
@@ -499,7 +499,11 @@ const featureMap = {
     CJRZQ5E9F_RiskAdvice: {
         name: "专业建议",
         component: defineAsyncComponent(() => import("@/ui/CJRZQ5E9F/components/RiskAdvice.vue")),
-    }
+    },
+    JRZQ8B3C: {
+        name: "个人消费等级",
+        component: defineAsyncComponent(() => import("@/ui/JRZQ8B3C/index.vue")),
+    },
 };
 
 const maskValue = computed(() => {
@@ -592,6 +596,7 @@ const featureRiskLevels = {
     'IVYZ9A2B': 3,         // 学历信息
     'IVYZ3P9M': 3,         // 学历信息查询(实时版)
 
+    'JRZQ8B3C': 3,         // 个人消费等级
     // 📊 复合报告类 - 按子模块动态计算
     'DWBG8B4D': 0,         // 谛听多维报告（由子模块计算）
     'DWBG6A2C': 0,         // 司南报告（由子模块计算）
@@ -833,7 +838,7 @@ watch([reportData, componentRiskScores], () => {
             </div>
             <div>
                 <a class="text-blue-500" href="https://beian.miit.gov.cn">
-                    琼ICP备2024048057号-2
+                    琼ICP备2024038584号-13
                 </a>
             </div>
         </div>
diff --git a/src/layouts/HomeLayout.vue b/src/layouts/HomeLayout.vue
index 9806be6..736fc77 100644
--- a/src/layouts/HomeLayout.vue
+++ b/src/layouts/HomeLayout.vue
@@ -32,7 +32,7 @@
                 </div>
                 <div>
                     <a class="text-blue-500" href="https://beian.miit.gov.cn">
-                        琼ICP备2024048057号-2
+                       琼ICP备2024038584号-13
                     </a>
                 </div>
             </div>
diff --git a/src/ui/JRZQ8B3C/README.md b/src/ui/JRZQ8B3C/README.md
new file mode 100644
index 0000000..d17a1c2
--- /dev/null
+++ b/src/ui/JRZQ8B3C/README.md
@@ -0,0 +1,149 @@
+# 个人消费能力等级组件 (JRZQ8B3C)
+
+## 组件概述
+
+基于个人收入指数评分进行消费能力等级评估，为企业提供专业的消费能力分析和风险评估服务。
+
+## 组件结构
+
+```
+JRZQ8B3C/
+├── index.vue                     # 主组件
+└── README.md                     # 说明文档
+```
+
+## 使用方法
+
+### 基本用法
+
+```vue
+<template>
+  <div>
+    <JRZQ8B3C :data="consumptionData" />
+  </div>
+</template>
+
+<script setup>
+import JRZQ8B3C from '@/ui/JRZQ8B3C/index.vue'
+
+// 个人消费能力等级数据示例
+const consumptionData = {
+  personincome_index_2.0: "200"  // 个人收入指数评分（字符串类型）
+}
+</script>
+```
+
+## 数据字段说明
+
+| 字段名 | 类型 | 必填 | 描述 | 示例值 |
+|-------|------|------|------|--------|
+| personincome_index_2.0 | String | 是 | 个人收入指数评分 | "200" |
+
+## 评分分档说明
+
+| 分值 | 收入区间（元/月） | 消费能力等级 | 风险等级 |
+|------|----------------|------------|----------|
+| -1 | **未命中** | 无法获取收入信息 | 高风险 |
+| 100 | (1000, 2000] | 第1档 | 高风险 |
+| 200 | (2000, 4000] | 第2档 | 高风险 |
+| 300 | (4000, 6000] | 第3档 | 高风险 |
+| 400 | (6000, 8000] | 第4档 | 中等风险 |
+| 500 | (8000, 10000] | 第5档 | 中等风险 |
+| 600 | (10000, 12000] | 第6档 | 中等风险 |
+| 700 | (12000, 15000] | 第7档 | 低风险 |
+| 800 | (15000, 20000] | 第8档 | 低风险 |
+| 900 | (20000, 25000] | 第9档 | 低风险 |
+| 1000 | (25000, +∞) | 第10档 | 低风险 |
+
+## 特殊值说明
+
+- **-1**: 表示未命中（无法获取收入信息）
+- **评分范围**: 100-1000分，共10个等级
+- **等级意义**: 等级越高，对应的消费能力越强
+- **区间定义**: 收入区间为左开右闭区间（如：1000 < 收入 ≤ 2000）
+
+## 组件特性
+
+### 1. 专业的视觉展示
+- **评分展示**：大数字显示个人收入指数评分
+- **进度条可视化**：直观展示评分在100-1000分范围内的位置
+- **颜色编码**：根据评分等级使用不同颜色（低=红色，中=黄色，高=绿色）
+- **响应式设计**：完美适配各种屏幕尺寸
+
+### 2. 全面的数据分析
+- **收入区间显示**：清晰展示对应的月收入范围
+- **等级描述**：显示当前评分对应的消费能力等级
+- **市场对比分析**：与市场平均水平对比
+- **消费能力评估**：基于收入指数的消费能力分析
+
+### 3. 智能风险评估
+- **动态评分**：根据收入指数自动计算风险分数（30-100分）
+- **风险等级标签**：直观显示当前风险等级
+- **个性化建议**：针对不同等级的专业建议
+
+## 视觉设计亮点
+
+### 1. 色彩系统
+- **低风险（700-1000分）**：绿色系，表示消费能力强
+- **中等风险（400-600分）**：黄色系，表示消费能力中等
+- **高风险（100-300分/-1）**：红色系，表示消费能力有限
+
+### 2. 交互体验
+- 平滑的动画过渡
+- 直观的视觉反馈
+- 清晰的信息层次
+
+### 3. 信息架构
+- 层次分明的信息展示
+- 重点突出的核心数据
+- 完整的补充说明
+
+## 数据说明
+
+### 评估依据
+- 基于个人收入指数评分
+- 使用10档分级评分体系
+- 数据准确可靠
+
+### 使用限制
+- 收入范围为税前月收入
+- 存在地区差异，仅供参考
+- 建议结合其他收入证明材料
+
+### 评分计算
+- 风险评分范围：30-100分
+- 100分对应30分风险评分
+- 1000分对应100分风险评分（最安全）
+- -1（未命中）对应30分风险评分
+
+## 业务价值
+
+### 1. 风险控制
+- 精确的消费能力评估降低信贷风险
+- 多维度风险分析提升决策质量
+- 智能化评分系统提高效率
+
+### 2. 客户分层
+- 基于消费能力的客户分级管理
+- 个性化服务策略制定
+- 精准的市场定位分析
+
+### 3. 合规要求
+- 符合金融监管要求
+- 数据来源权威可靠
+- 评估过程透明公开
+
+## 注意事项
+
+1. 确保传入正确的 `personincome_index_2.0` 值
+2. 组件会自动处理 -1 特殊值（未命中）
+3. 建议在网络良好的环境下使用
+4. 定期更新评估标准以保持准确性
+
+## 更新日志
+
+- v1.0.0 - 初始版本，支持基础消费能力等级评估功能
+- 专业的视觉展示效果
+- 完整的评分分档系统
+- 专业的风险分析功能
+
diff --git a/src/ui/JRZQ8B3C/index.vue b/src/ui/JRZQ8B3C/index.vue
new file mode 100644
index 0000000..73ff6c6
--- /dev/null
+++ b/src/ui/JRZQ8B3C/index.vue
@@ -0,0 +1,377 @@
+<template>
+  <div class="card">
+    <div class="rounded-lg border border-gray-200 pb-2 mb-4">
+
+      <!-- 标题区域 -->
+      <div class="flex items-center mb-4 p-4">
+        <div class="w-8 h-8 flex items-center justify-center mr-2">
+          <img src="@/assets/images/report/srpg.png" alt="个人消费能力等级" class="w-8 h-8 object-contain" />
+        </div>
+        <span class="font-bold text-gray-800">个人消费能力等级</span>
+      </div>
+
+      <div class="px-4 pb-4">
+        <!-- 月消费能力 -->
+        <div class="mb-6 text-center">
+          <div class="text-sm text-gray-600 mb-2">月消费能力</div>
+          <div class="text-3xl font-bold mb-3 text-[#333333]">
+            <span class="amount-number">{{ getConsumptionAmount(score) }}</span>
+            <span class="amount-unit">元/月</span>
+          </div>
+          <div class="level-bar" :style="getLevelBarBgStyle(score)">
+            <div class="level-fill" :style="getLevelBarStyle(score)"></div>
+          </div>
+          <div class="text-sm text-gray-600 mt-2">{{ getConsumptionDescription(score) }}</div>
+        </div>
+
+        <!-- 评估结果 -->
+        <div class="assessment-card">
+          <div class="flex items-center">
+            <div class="flex-1">
+              <div class="flex items-center justify-between mb-2">
+                <h4 class="font-semibold text-gray-800">评估结果</h4>
+              </div>
+              <p class="text-gray-400 text-sm">
+                {{ getAssessmentDescription(score) }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- 市场对比 -->
+        <div class="assessment-card">
+          <div class="flex items-center mb-8">
+            <div class="flex-1">
+              <div class="flex items-center justify-between mb-2">
+                <h4 class="font-semibold text-gray-800">市场对比</h4>
+              </div>
+              <p class="text-gray-400 text-sm">
+                {{ getMarketComparison(score) }}
+              </p>
+            </div>
+          </div>
+          <div class="comparison-indicator mt-4">
+            <div class="indicator-bar">
+              <div class="indicator-fill" :style="getIndicatorStyle(score)"></div>
+              <div class="indicator-marker" :style="getMarkerPosition(score)">
+                <img src="@/assets/images/report/srbq.png" alt="市场对比" class="marker-image" />
+                <div class="marker-dot"></div>
+              </div>
+            </div>
+            <div class="indicator-labels">
+              <span>低消费</span>
+              <span>高消费</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 消费能力 -->
+        <div class="assessment-card">
+          <div class="flex items-center">
+            <div class="flex-1">
+              <div class="mb-2">
+                <h4 class="font-semibold text-gray-800">消费能力</h4>
+              </div>
+              <p class="text-gray-400 text-sm">
+                {{ getConsumptionCapacity(score) }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRiskNotifier } from '@/composables/useRiskNotifier';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  apiId: {
+    type: String,
+    default: '',
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+  notifyRiskStatus: {
+    type: Function,
+    default: () => { },
+  },
+})
+
+// 确保data是响应式的
+const data = computed(() => props.data || {})
+
+// 获取评分值（字符串转数字，处理-1特殊值）
+const score = computed(() => {
+  const value = data.value['personincome_index_2.0'];
+  if (!value || value === '-1') return -1;
+  const num = parseInt(value, 10);
+  return isNaN(num) ? -1 : num;
+})
+
+// 获取消费金额显示（直接显示金额区间）
+const getConsumptionAmount = (score) => {
+  if (score === -1) return '无法评估'
+
+  const amountMap = {
+    100: '2,000 - 4,000',
+    200: '2,000 - 4,000',
+    300: '4,000 - 6,000',
+    400: '6,000 - 8,000',
+    500: '8,000 - 10,000',
+    600: '10,000 - 12,000',
+    700: '12,000 - 15,000',
+    800: '15,000 - 20,000',
+    900: '20,000 - 25,000',
+    1000: '25,000+'
+  }
+  return amountMap[score] || '数据异常'
+}
+
+// 消费能力描述
+const getConsumptionDescription = (score) => {
+  if (score === -1) return '暂未发现消费能力信息'
+
+  const descriptionMap = {
+    100: '基础消费能力',
+    200: '基础消费能力',
+    300: '中等消费能力',
+    400: '中等消费能力',
+    500: '良好消费能力',
+    600: '良好消费能力',
+    700: '较强消费能力',
+    800: '较强消费能力',
+    900: '很强消费能力',
+    1000: '很强消费能力'
+  }
+  return descriptionMap[score] || '数据异常'
+}
+
+// 等级进度条样式
+const getLevelBarStyle = (score) => {
+  if (score === -1) {
+    return {
+      width: '0%',
+      background: '#94a3b8'
+    }
+  }
+
+  // 计算百分比：100分=10%, 200分=20%, ..., 1000分=100%
+  const percentage = (score / 1000) * 100
+
+  // 统一使用蓝色渐变
+  return {
+    width: percentage + '%',
+    background: 'linear-gradient(90deg, #3b82f6 0%, #2563eb 100%)'
+  }
+}
+
+// 进度条背景色样式
+const getLevelBarBgStyle = (score) => {
+  // 统一使用淡蓝色背景
+  return {
+    background: '#eff6ff'
+  }
+}
+
+// 评估描述
+const getAssessmentDescription = (score) => {
+  if (score === -1) {
+    return '根据个人消费能力等级分析，无法获取该用户的消费能力信息，无法进行评估。'
+  }
+
+  const descriptions = {
+    100: '根据个人消费能力等级分析，该用户月消费能力较低，消费水平有限。',
+    200: '根据个人消费能力等级分析，该用户月消费能力较低，消费水平有限。',
+    300: '根据个人消费能力等级分析，该用户月消费能力中等，消费水平良好。',
+    400: '根据个人消费能力等级分析，该用户月消费能力中等，消费水平良好。',
+    500: '根据个人消费能力等级分析，该用户月消费能力中等偏上，消费水平较强。',
+    600: '根据个人消费能力等级分析，该用户月消费能力中等偏上，消费水平较强。',
+    700: '根据个人消费能力等级分析，该用户月消费能力较高，消费水平很强。',
+    800: '根据个人消费能力等级分析，该用户月消费能力较高，消费水平很强。',
+    900: '根据个人消费能力等级分析，该用户月消费能力很高，消费水平顶级。',
+    1000: '根据个人消费能力等级分析，该用户月消费能力很高，消费水平顶级。'
+  }
+  return descriptions[score] || '数据异常，无法进行准确评估。'
+}
+
+// 市场对比分析
+const getMarketComparison = (score) => {
+  if (score === -1) {
+    return '无消费能力信息，无法与市场平均水平进行对比。'
+  }
+
+  const comparisons = {
+    100: '低于市场平均消费水平，处于消费分布的底部区间。',
+    200: '低于市场平均消费水平，处于消费分布的中下区间。',
+    300: '接近市场平均消费水平，处于消费分布的中等区间。',
+    400: '接近市场平均消费水平，处于消费分布的中等区间。',
+    500: '高于市场平均消费水平，处于消费分布的中上区间。',
+    600: '高于市场平均消费水平，处于消费分布的中上区间。',
+    700: '明显高于市场平均消费水平，处于消费分布的上层区间。',
+    800: '显著高于市场平均消费水平，处于消费分布的高层区间。',
+    900: '远高于市场平均消费水平，处于消费分布的顶部区间。',
+    1000: '超越市场绝大多数消费水平，处于消费分布的顶级区间。'
+  }
+  return comparisons[score] || '数据异常，无法进行市场对比。'
+}
+
+// 消费能力分析
+const getConsumptionCapacity = (score) => {
+  if (score === -1) {
+    return '缺乏消费能力信息，月消费能力存在不确定性，需要谨慎评估。'
+  }
+
+  const capacities = {
+    100: '月消费能力较低，消费水平有限，建议理性消费。',
+    200: '月消费能力较低，消费水平有限，建议理性消费。',
+    300: '月消费能力稳定，消费水平良好，具备一定的消费潜力。',
+    400: '月消费能力稳定，消费水平良好，具备一定的消费潜力。',
+    500: '月消费能力较高，消费水平较强，可以支持中等消费。',
+    600: '月消费能力较高，消费水平较强，可以支持中等消费。',
+    700: '月消费能力很强，消费水平很高，可以支持较高消费。',
+    800: '月消费能力很强，消费水平很高，可以支持较高消费。',
+    900: '月消费能力顶级，消费水平极高，可以支持高端消费。',
+    1000: '月消费能力顶级，消费水平极高，可以支持顶级消费。'
+  }
+  return capacities[score] || '数据异常，无法进行消费能力分析。'
+}
+
+// 指示器样式
+const getIndicatorStyle = (score) => {
+  if (score === -1) return { width: '0%', background: 'transparent' }
+
+  // 100分=0%, 1000分=100%
+  const percentage = ((score - 100) / 900) * 100
+  return {
+    width: percentage + '%',
+    background: `linear-gradient(90deg, #93c5fd 0%, #3b82f6 50%, #1d4ed8 100%)`
+  }
+}
+
+// 标记位置
+const getMarkerPosition = (score) => {
+  if (score === -1) return { left: '0%' }
+
+  // 100分=0%, 1000分=100%
+  const percentage = ((score - 100) / 900) * 100
+  return {
+    left: percentage + '%'
+  }
+}
+
+// 计算风险评分（0-100分，分数越高越安全）
+const riskScore = computed(() => {
+  if (score.value === -1) return 30 // 未命中，风险较高
+  // 100分对应30分，1000分对应100分
+  return 30 + ((score.value - 100) / 900) * 70
+});
+
+// 使用 composable 通知父组件风险评分
+useRiskNotifier(props, riskScore);
+
+// 暴露给父组件
+defineExpose({
+  riskScore
+});
+</script>
+
+<style scoped>
+/* 金额数字样式 */
+.amount-number {
+  color: #333333;
+  font-weight: bold;
+}
+
+.amount-unit {
+  font-size: 0.5em;
+  color: #999999;
+  margin-left: 4px;
+}
+
+/* 进度条 */
+.level-bar {
+  height: 12px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.level-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: all 0.6s ease;
+}
+
+/* 评估卡片 */
+.assessment-card {
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  border: 1px solid;
+}
+
+/* 评估卡片统一样式 */
+.assessment-card {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+}
+
+/* 对比指示器 */
+.comparison-indicator {
+  margin-top: 12px;
+}
+
+.indicator-bar {
+  position: relative;
+  height: 6px;
+  border-radius: 3px;
+  margin-bottom: 8px;
+  background: linear-gradient(90deg, #93c5fd 0%, #3b82f6 50%, #1d4ed8 100%);
+}
+
+.indicator-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: all 0.5s ease;
+  background: transparent;
+}
+
+.indicator-marker {
+  position: absolute;
+  top: -26px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.marker-image {
+  width: 24px;
+  margin-bottom: 0px;
+}
+
+.marker-dot {
+  width: 8px;
+  height: 8px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0px 4px 4px 0px #00000040;
+}
+
+.indicator-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.7rem;
+  color: #9ca3af;
+}
+</style>