From 391d34cc102f44efa0c37b128f75695649dcd4de Mon Sep 17 00:00:00 2001
From: liangzai <2440983361@qq.com>
Date: Tue, 16 Dec 2025 17:34:28 +0800
Subject: [PATCH] add JRZQ6F2A

---
 .../components/ApplicationCountSection.vue    | 187 ++++++++--
 .../components/ApplicationTotalSection.vue    |  91 ++++-
 .../components/BankInstitutionSection.vue     | 102 +++---
 src/ui/JRZQ6F2A/components/BankOrgSection.vue | 102 +++---
 .../components/InstitutionTotalSection.vue    |  92 +++--
 .../components/NBankInstitutionSection.vue    | 102 +++---
 .../JRZQ6F2A/components/NBankOrgSection.vue   | 102 +++---
 .../ProductTypeDistributionSection.vue        | 184 ++++++++++
 .../RecentIntensiveApplicationSection.vue     |  79 +++++
 .../JRZQ6F2A/components/SummaryApplyStats.vue |  72 ++++
 src/ui/JRZQ6F2A/index.vue                     |  18 +-
 src/ui/JRZQ6F2A/utils/dataParser.js           | 334 ++++++++++--------
 12 files changed, 1062 insertions(+), 403 deletions(-)
 create mode 100644 src/ui/JRZQ6F2A/components/ProductTypeDistributionSection.vue
 create mode 100644 src/ui/JRZQ6F2A/components/RecentIntensiveApplicationSection.vue
 create mode 100644 src/ui/JRZQ6F2A/components/SummaryApplyStats.vue

diff --git a/src/ui/JRZQ6F2A/components/ApplicationCountSection.vue b/src/ui/JRZQ6F2A/components/ApplicationCountSection.vue
index 7d602d3..1bb0829 100644
--- a/src/ui/JRZQ6F2A/components/ApplicationCountSection.vue
+++ b/src/ui/JRZQ6F2A/components/ApplicationCountSection.vue
@@ -1,14 +1,21 @@
 <template>
   <div class="card application-count-section">
     <div class="rounded-lg border border-gray-200 pb-2 mb-4">
-      <div class="flex items-center mb-4 p-4">
-        <span class="font-bold text-gray-800 text-lg">申请次数 {{ totalCount }}次</span>
-      </div>
-      
-      <!-- 柱状图 -->
-      <div class="px-4 mb-4">
-        <div class="h-64">
-          <v-chart class="chart-container" :option="chartOption" autoresize />
+      <div class="mt-4">
+        <!-- 申请次数时间分布图表 -->
+        <div class="mb-6">
+          <LTitle title="申请次数时间分布" />
+          <div class="h-64">
+            <v-chart class="chart-container" :option="chartOption" autoresize />
+          </div>
+        </div>
+
+        <!-- 特殊时段申请次数（周末/夜间），去掉 Tab，直接展示一张柱状图 -->
+        <div class="mb-2">
+          <LTitle title="特殊时段申请次数（周末 / 夜间）" />
+          <div class="h-64">
+            <v-chart class="chart-container" :option="specialChartOption" autoresize />
+          </div>
         </div>
       </div>
     </div>
@@ -27,7 +34,8 @@ import {
   LegendComponent,
   GridComponent
 } from 'echarts/components'
-import { getApplicationCounts, PERIOD_MAP } from '../utils/dataParser'
+import LTitle from '@/components/LTitle.vue'
+import { getApplicationCounts, getSpecialPeriodCounts, PERIOD_MAP } from '../utils/dataParser'
 
 // 注册ECharts组件
 use([
@@ -47,17 +55,11 @@ const props = defineProps({
   }
 })
 
-// 计算总申请次数（12个月）
-const totalCount = computed(() => {
-  const counts = getApplicationCounts(props.data, 'm12')
-  return counts.total
-})
+const periodKeys = ['d7', 'd15', 'm1', 'm3', 'm6', 'm12']
+const labels = periodKeys.map(key => PERIOD_MAP[key].label)
 
-// 图表配置
+// 总申请次数图表配置
 const chartOption = computed(() => {
-  const periodKeys = ['d7', 'd15', 'm1', 'm3', 'm6', 'm12']
-  const labels = periodKeys.map(key => PERIOD_MAP[key].label)
-  
   const data = periodKeys.map(key => {
     const counts = getApplicationCounts(props.data, key)
     return counts.total
@@ -69,31 +71,46 @@ const chartOption = computed(() => {
       axisPointer: {
         type: 'shadow'
       },
-      formatter: (params) => {
-        const param = params[0]
-        return `${param.name}<br/>${param.seriesName}: ${param.value}次`
+      formatter: function (params) {
+        let result = params[0].name + '<br/>'
+        params.forEach(item => {
+          result += `${item.seriesName}: ${item.value} 次<br/>`
+        })
+        return result
       }
     },
     grid: {
       left: '3%',
       right: '4%',
-      bottom: '3%',
+      bottom: 0,
+      top: 20,
       containLabel: true
     },
     xAxis: {
       type: 'category',
       data: labels,
       axisLabel: {
-        fontSize: 12,
-        color: '#666'
+        fontSize: 10,
+        color: '#6b7280',
+        rotate: 45
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb'
+        }
       }
     },
     yAxis: {
       type: 'value',
       axisLabel: {
-        fontSize: 12,
-        color: '#666',
-        formatter: '{value}次'
+        fontSize: 11,
+        color: '#6b7280',
+        formatter: '{value} 次'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f3f4f6'
+        }
       }
     },
     series: [
@@ -101,15 +118,109 @@ const chartOption = computed(() => {
         name: '申请次数',
         type: 'bar',
         data: data,
+        barWidth: '25%',
+        barMinHeight: 3,
         itemStyle: {
-          color: '#4A90E2'
+          color: '#2B79EE',
+          borderRadius: [4, 4, 0, 0]
         },
-        label: {
-          show: true,
-          position: 'top',
-          formatter: '{c}次',
-          fontSize: 12,
-          color: '#333'
+        emphasis: {
+          itemStyle: {
+            color: '#1e5bb8'
+          }
+        }
+      }
+    ]
+  }
+})
+
+// 特殊时段（周末 / 夜间）图表配置
+const specialChartOption = computed(() => {
+  const weekendData = periodKeys.map(key => {
+    const s = getSpecialPeriodCounts(props.data, key)
+    return s.weekend || 0
+  })
+  const nightData = periodKeys.map(key => {
+    const s = getSpecialPeriodCounts(props.data, key)
+    return s.night || 0
+  })
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        let result = params[0].name + '<br/>'
+        params.forEach(item => {
+          result += `${item.seriesName}: ${item.value} 次<br/>`
+        })
+        return result
+      }
+    },
+    legend: {
+      data: ['周末申请次数', '夜间申请次数'],
+      top: '5%',
+      textStyle: {
+        fontSize: 12
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: 0,
+      top: 30,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: {
+        fontSize: 10,
+        color: '#6b7280',
+        rotate: 45
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        fontSize: 11,
+        color: '#6b7280',
+        formatter: '{value} 次'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f3f4f6'
+        }
+      }
+    },
+    series: [
+      {
+        name: '周末申请次数',
+        type: 'bar',
+        data: weekendData,
+        barWidth: '25%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#2B79EE',
+          borderRadius: [4, 4, 0, 0]
+        }
+      },
+      {
+        name: '夜间申请次数',
+        type: 'bar',
+        data: nightData,
+        barWidth: '25%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#F97316',
+          borderRadius: [4, 4, 0, 0]
         }
       }
     ]
@@ -117,9 +228,13 @@ const chartOption = computed(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .card {
   background: #ffffff;
 }
-</style>
 
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/ui/JRZQ6F2A/components/ApplicationTotalSection.vue b/src/ui/JRZQ6F2A/components/ApplicationTotalSection.vue
index 7d6d17d..e1411ed 100644
--- a/src/ui/JRZQ6F2A/components/ApplicationTotalSection.vue
+++ b/src/ui/JRZQ6F2A/components/ApplicationTotalSection.vue
@@ -2,22 +2,26 @@
   <div class="card application-total-section">
     <div class="rounded-lg border border-gray-200 pb-2 mb-4">
       <div class="flex items-center mb-4 p-4">
-        <span class="font-bold text-gray-800 text-lg">申请总次数 (银行+非银) {{ totalCount }}次</span>
+        <span class="font-bold text-gray-800">申请总次数 (银行+非银) {{ totalCount }}次</span>
       </div>
-      
-      <!-- Tab切换 -->
-      <div class="px-4 mb-4">
-        <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">
-              <!-- 银行机构 -->
-              <BankInstitutionSection :data="data" :period="period.key" />
-              
-              <!-- 非银机构 -->
-              <NBankInstitutionSection :data="data" :period="period.key" />
-            </div>
-          </van-tab>
-        </van-tabs>
+      <div class="mt-4">
+        <!-- Tab切换 -->
+        <div class="mb-6">
+          <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">
+                  <!-- 银行机构 -->
+                  <BankInstitutionSection :data="data" :period="period.key" />
+
+                  <!-- 非银机构 -->
+                  <NBankInstitutionSection :data="data" :period="period.key" />
+                </div>
+              </van-tab>
+            </van-tabs>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -25,6 +29,7 @@
 
 <script setup>
 import { computed, ref } from 'vue'
+import LTitle from '@/components/LTitle.vue'
 import { getApplicationCounts, PERIOD_MAP } from '../utils/dataParser'
 import BankInstitutionSection from './BankInstitutionSection.vue'
 import NBankInstitutionSection from './NBankInstitutionSection.vue'
@@ -55,10 +60,60 @@ const totalCount = computed(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .card {
   background: #ffffff;
 }
+
+.application-total-section :deep(.van-tabs) {
+  border: unset !important;
+}
+
+.application-total-section :deep(.van-tabs__wrap) {
+  height: 32px !important;
+  background-color: transparent !important;
+  padding: 0 !important;
+  border-bottom: 1px solid #DDDDDD !important;
+}
+
+.application-total-section :deep(.van-tabs__nav) {
+  background-color: transparent !important;
+  gap: 0 !important;
+  height: 32px !important;
+  border: unset !important;
+}
+
+.application-total-section :deep(.van-tabs__nav--card) {
+  border: unset !important;
+}
+
+.application-total-section :deep(.van-tab) {
+  color: #999999 !important;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  border-right: unset !important;
+  background-color: transparent !important;
+  border-radius: unset !important;
+  max-width: 80px !important;
+}
+
+.application-total-section :deep(.van-tab--card) {
+  color: #999999 !important;
+  border-right: unset !important;
+  background-color: transparent !important;
+  border-radius: unset !important;
+}
+
+.application-total-section :deep(.van-tab--active) {
+  color: var(--van-theme-primary) !important;
+  background-color: unset !important;
+}
+
+.application-total-section :deep(.van-tabs__line) {
+  height: 4px !important;
+  border-radius: 1px !important;
+  background-color: var(--van-theme-primary) !important;
+  width: 20px;
+  border-radius: 14px;
+}
 </style>
-
-
diff --git a/src/ui/JRZQ6F2A/components/BankInstitutionSection.vue b/src/ui/JRZQ6F2A/components/BankInstitutionSection.vue
index 1701cb4..aeaf1b5 100644
--- a/src/ui/JRZQ6F2A/components/BankInstitutionSection.vue
+++ b/src/ui/JRZQ6F2A/components/BankInstitutionSection.vue
@@ -1,23 +1,19 @@
 <template>
-  <div class="bank-institution-section mb-6">
-    <div class="flex items-center mb-4">
-      <span class="font-bold text-gray-800">银行机构 {{ bankTotal }}次</span>
-    </div>
-    
-    <div class="grid grid-cols-2 gap-4">
-      <!-- 饼图 -->
-      <div class="h-64">
+  <div class="mb-6">
+    <LTitle title="银行机构申请分布" />
+    <div class="mt-4">
+      <!-- 饼图：宽度占满 -->
+      <div class="h-64 mb-4">
         <v-chart class="chart-container" :option="pieChartOption" autoresize />
       </div>
-      
-      <!-- 详细列表 -->
+
+      <!-- 详细列表：在图表下方，展示所有项并带颜色标识 -->
       <div class="space-y-2">
-        <div 
-          v-for="(item, index) in detailList" 
-          :key="index"
-          class="flex justify-between items-center text-sm py-1 border-b border-gray-100"
-        >
-          <span class="text-gray-600">{{ item.label }}</span>
+        <div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
+          <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>
+          </div>
           <span class="text-[#333333] font-bold">{{ item.value }}次</span>
         </div>
       </div>
@@ -36,6 +32,7 @@ import {
   TooltipComponent,
   LegendComponent
 } from 'echarts/components'
+import LTitle from '@/components/LTitle.vue'
 import { getBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser'
 
 // 注册ECharts组件
@@ -59,6 +56,18 @@ const props = defineProps({
   }
 })
 
+// 颜色映射表（与图表保持一致）
+const COLORS = [
+  '#2B79EE',
+  '#61D2F4',
+  '#34D399',
+  '#FBBF24',
+  '#F97316',
+  '#EF4444',
+  '#A855F7',
+  '#6B7280',
+]
+
 // 获取银行机构申请详情
 const bankDetails = computed(() => getBankApplicationDetails(props.data, props.period))
 
@@ -68,26 +77,25 @@ const bankTotal = computed(() => {
   return Object.values(details).reduce((sum, val) => sum + (val || 0), 0)
 })
 
-// 详细列表
+// 详细列表（包含所有项，包含 0 次）
 const detailList = computed(() => {
   const details = bankDetails.value
   const labels = FIELD_LABELS.bank
-  
+
   return Object.entries(details)
-    .filter(([key, value]) => value > 0)
-    .map(([key, value]) => ({
+    .map(([key, value], index) => ({
       key,
       label: labels[key] || key,
-      value
+      value: value || 0,
+      color: COLORS[index % COLORS.length],
     }))
-    .sort((a, b) => b.value - a.value)
 })
 
 // 饼图配置
 const pieChartOption = computed(() => {
   const list = detailList.value
-  
-  if (list.length === 0) {
+
+  if (!list || list.length === 0) {
     return {
       title: {
         text: '暂无数据',
@@ -106,20 +114,23 @@ const pieChartOption = computed(() => {
       trigger: 'item',
       formatter: '{b}: {c}次 ({d}%)'
     },
-    legend: {
-      orient: 'vertical',
-      left: 'left',
-      top: 'middle',
-      textStyle: {
-        fontSize: 11
-      }
+    graphic: {
+      type: 'text',
+      left: 'center',
+      top: 'center',
+      style: {
+        text: '银行机构',
+        fill: '#111827',
+        fontSize: 14,
+        fontWeight: 'bold',
+      },
     },
     series: [
       {
         name: '申请次数',
         type: 'pie',
         radius: ['40%', '70%'],
-        center: ['60%', '50%'],
+        center: ['50%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: {
           borderRadius: 4,
@@ -127,19 +138,27 @@ const pieChartOption = computed(() => {
           borderWidth: 2
         },
         label: {
-          show: true,
-          formatter: '{b}\n{c}次'
+          show: false
         },
         emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          },
           label: {
             show: true,
             fontSize: 14,
-            fontWeight: 'bold'
+            fontWeight: 'bold',
+            color: '#333'
           }
         },
         data: list.map(item => ({
           value: item.value,
-          name: item.label
+          name: item.label,
+          itemStyle: {
+            color: item.color
+          }
         }))
       }
     ]
@@ -147,12 +166,9 @@ const pieChartOption = computed(() => {
 })
 </script>
 
-<style scoped>
-.bank-institution-section {
-  background: #f9fafb;
-  padding: 16px;
-  border-radius: 8px;
+<style lang="scss" scoped>
+.chart-container {
+  width: 100%;
+  height: 100%;
 }
 </style>
-
-
diff --git a/src/ui/JRZQ6F2A/components/BankOrgSection.vue b/src/ui/JRZQ6F2A/components/BankOrgSection.vue
index 195a529..b6fad84 100644
--- a/src/ui/JRZQ6F2A/components/BankOrgSection.vue
+++ b/src/ui/JRZQ6F2A/components/BankOrgSection.vue
@@ -1,23 +1,19 @@
 <template>
-  <div class="bank-org-section mb-6">
-    <div class="flex items-center mb-4">
-      <span class="font-bold text-gray-800">银行机构 {{ bankTotal }}家</span>
-    </div>
-    
-    <div class="grid grid-cols-2 gap-4">
-      <!-- 饼图 -->
-      <div class="h-64">
+  <div class="mb-6">
+    <LTitle title="银行机构申请机构数分布" />
+    <div class="mt-4">
+      <!-- 饼图：宽度占满 -->
+      <div class="h-64 mb-4">
         <v-chart class="chart-container" :option="pieChartOption" autoresize />
       </div>
-      
-      <!-- 详细列表 -->
+
+      <!-- 详细列表：在图表下方，展示所有项并带颜色标识 -->
       <div class="space-y-2">
-        <div 
-          v-for="(item, index) in detailList" 
-          :key="index"
-          class="flex justify-between items-center text-sm py-1 border-b border-gray-100"
-        >
-          <span class="text-gray-600">{{ item.label }}</span>
+        <div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
+          <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>
+          </div>
           <span class="text-[#333333] font-bold">{{ item.value }}家</span>
         </div>
       </div>
@@ -36,6 +32,7 @@ import {
   TooltipComponent,
   LegendComponent
 } from 'echarts/components'
+import LTitle from '@/components/LTitle.vue'
 import { getBankOrgDetails, FIELD_LABELS } from '../utils/dataParser'
 
 // 注册ECharts组件
@@ -59,6 +56,18 @@ const props = defineProps({
   }
 })
 
+// 颜色映射表（与图表保持一致）
+const COLORS = [
+  '#2B79EE',
+  '#61D2F4',
+  '#34D399',
+  '#FBBF24',
+  '#F97316',
+  '#EF4444',
+  '#A855F7',
+  '#6B7280',
+]
+
 // 获取银行机构数详情
 const bankOrgs = computed(() => getBankOrgDetails(props.data, props.period))
 
@@ -68,26 +77,25 @@ const bankTotal = computed(() => {
   return Object.values(orgs).reduce((sum, val) => sum + (val || 0), 0)
 })
 
-// 详细列表
+// 详细列表（包含所有项，包含 0 家）
 const detailList = computed(() => {
   const orgs = bankOrgs.value
   const labels = FIELD_LABELS.bank
-  
+
   return Object.entries(orgs)
-    .filter(([key, value]) => value > 0)
-    .map(([key, value]) => ({
+    .map(([key, value], index) => ({
       key,
       label: labels[key] || key,
-      value
+      value: value || 0,
+      color: COLORS[index % COLORS.length],
     }))
-    .sort((a, b) => b.value - a.value)
 })
 
 // 饼图配置
 const pieChartOption = computed(() => {
   const list = detailList.value
-  
-  if (list.length === 0) {
+
+  if (!list || list.length === 0) {
     return {
       title: {
         text: '暂无数据',
@@ -106,20 +114,23 @@ const pieChartOption = computed(() => {
       trigger: 'item',
       formatter: '{b}: {c}家 ({d}%)'
     },
-    legend: {
-      orient: 'vertical',
-      left: 'left',
-      top: 'middle',
-      textStyle: {
-        fontSize: 11
-      }
+    graphic: {
+      type: 'text',
+      left: 'center',
+      top: 'center',
+      style: {
+        text: '银行机构',
+        fill: '#111827',
+        fontSize: 14,
+        fontWeight: 'bold',
+      },
     },
     series: [
       {
         name: '机构数',
         type: 'pie',
         radius: ['40%', '70%'],
-        center: ['60%', '50%'],
+        center: ['50%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: {
           borderRadius: 4,
@@ -127,19 +138,27 @@ const pieChartOption = computed(() => {
           borderWidth: 2
         },
         label: {
-          show: true,
-          formatter: '{b}\n{c}家'
+          show: false
         },
         emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          },
           label: {
             show: true,
             fontSize: 14,
-            fontWeight: 'bold'
+            fontWeight: 'bold',
+            color: '#333'
           }
         },
         data: list.map(item => ({
           value: item.value,
-          name: item.label
+          name: item.label,
+          itemStyle: {
+            color: item.color
+          }
         }))
       }
     ]
@@ -147,12 +166,9 @@ const pieChartOption = computed(() => {
 })
 </script>
 
-<style scoped>
-.bank-org-section {
-  background: #f9fafb;
-  padding: 16px;
-  border-radius: 8px;
+<style lang="scss" scoped>
+.chart-container {
+  width: 100%;
+  height: 100%;
 }
 </style>
-
-
diff --git a/src/ui/JRZQ6F2A/components/InstitutionTotalSection.vue b/src/ui/JRZQ6F2A/components/InstitutionTotalSection.vue
index 77a986c..e525b75 100644
--- a/src/ui/JRZQ6F2A/components/InstitutionTotalSection.vue
+++ b/src/ui/JRZQ6F2A/components/InstitutionTotalSection.vue
@@ -1,23 +1,24 @@
 <template>
   <div class="card institution-total-section">
     <div class="rounded-lg border border-gray-200 pb-2 mb-4">
-      <div class="flex items-center mb-4 p-4">
-        <span class="font-bold text-gray-800 text-lg">申请机构总数 (银行+非银) {{ totalCount }}家</span>
-      </div>
-      
-      <!-- Tab切换 -->
-      <div class="px-4 mb-4">
-        <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">
-              <!-- 银行机构 -->
-              <BankOrgSection :data="data" :period="period.key" />
-              
-              <!-- 非银机构 -->
-              <NBankOrgSection :data="data" :period="period.key" />
-            </div>
-          </van-tab>
-        </van-tabs>
+      <div class="mt-4">
+        <!-- Tab切换 -->
+        <div class="mb-6">
+          <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">
+                  <!-- 银行机构 -->
+                  <BankOrgSection :data="data" :period="period.key" />
+
+                  <!-- 非银机构 -->
+                  <NBankOrgSection :data="data" :period="period.key" />
+                </div>
+              </van-tab>
+            </van-tabs>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -25,6 +26,7 @@
 
 <script setup>
 import { computed, ref } from 'vue'
+import LTitle from '@/components/LTitle.vue'
 import { getBankOrgDetails, getNBankOrgDetails } from '../utils/dataParser'
 import BankOrgSection from './BankOrgSection.vue'
 import NBankOrgSection from './NBankOrgSection.vue'
@@ -58,10 +60,60 @@ const totalCount = computed(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .card {
   background: #ffffff;
 }
+
+.institution-total-section :deep(.van-tabs) {
+  border: unset !important;
+}
+
+.institution-total-section :deep(.van-tabs__wrap) {
+  height: 32px !important;
+  background-color: transparent !important;
+  padding: 0 !important;
+  border-bottom: 1px solid #DDDDDD !important;
+}
+
+.institution-total-section :deep(.van-tabs__nav) {
+  background-color: transparent !important;
+  gap: 0 !important;
+  height: 32px !important;
+  border: unset !important;
+}
+
+.institution-total-section :deep(.van-tabs__nav--card) {
+  border: unset !important;
+}
+
+.institution-total-section :deep(.van-tab) {
+  color: #999999 !important;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  border-right: unset !important;
+  background-color: transparent !important;
+  border-radius: unset !important;
+  max-width: 80px !important;
+}
+
+.institution-total-section :deep(.van-tab--card) {
+  color: #999999 !important;
+  border-right: unset !important;
+  background-color: transparent !important;
+  border-radius: unset !important;
+}
+
+.institution-total-section :deep(.van-tab--active) {
+  color: var(--van-theme-primary) !important;
+  background-color: unset !important;
+}
+
+.institution-total-section :deep(.van-tabs__line) {
+  height: 4px !important;
+  border-radius: 1px !important;
+  background-color: var(--van-theme-primary) !important;
+  width: 20px;
+  border-radius: 14px;
+}
 </style>
-
-
diff --git a/src/ui/JRZQ6F2A/components/NBankInstitutionSection.vue b/src/ui/JRZQ6F2A/components/NBankInstitutionSection.vue
index bd21330..5a7ba8f 100644
--- a/src/ui/JRZQ6F2A/components/NBankInstitutionSection.vue
+++ b/src/ui/JRZQ6F2A/components/NBankInstitutionSection.vue
@@ -1,23 +1,19 @@
 <template>
-  <div class="nbank-institution-section mb-6">
-    <div class="flex items-center mb-4">
-      <span class="font-bold text-gray-800">非银机构 {{ nbankTotal }}次</span>
-    </div>
-    
-    <div class="grid grid-cols-2 gap-4">
-      <!-- 饼图 -->
-      <div class="h-64">
+  <div class="mb-6">
+    <LTitle title="非银机构申请分布" />
+    <div class="mt-4">
+      <!-- 饼图：宽度占满 -->
+      <div class="h-64 mb-4">
         <v-chart class="chart-container" :option="pieChartOption" autoresize />
       </div>
-      
-      <!-- 详细列表 -->
+
+      <!-- 详细列表：在图表下方，展示所有项并带颜色标识 -->
       <div class="space-y-2">
-        <div 
-          v-for="(item, index) in detailList" 
-          :key="index"
-          class="flex justify-between items-center text-sm py-1 border-b border-gray-100"
-        >
-          <span class="text-gray-600">{{ item.label }}</span>
+        <div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
+          <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>
+          </div>
           <span class="text-[#333333] font-bold">{{ item.value }}次</span>
         </div>
       </div>
@@ -36,6 +32,7 @@ import {
   TooltipComponent,
   LegendComponent
 } from 'echarts/components'
+import LTitle from '@/components/LTitle.vue'
 import { getNBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser'
 
 // 注册ECharts组件
@@ -59,6 +56,18 @@ const props = defineProps({
   }
 })
 
+// 颜色映射表（与图表保持一致）
+const COLORS = [
+  '#2B79EE',
+  '#61D2F4',
+  '#34D399',
+  '#FBBF24',
+  '#F97316',
+  '#EF4444',
+  '#A855F7',
+  '#6B7280',
+]
+
 // 获取非银机构申请详情
 const nbankDetails = computed(() => getNBankApplicationDetails(props.data, props.period))
 
@@ -68,26 +77,25 @@ const nbankTotal = computed(() => {
   return Object.values(details).reduce((sum, val) => sum + (val || 0), 0)
 })
 
-// 详细列表
+// 详细列表（包含所有项，包含 0 次）
 const detailList = computed(() => {
   const details = nbankDetails.value
   const labels = FIELD_LABELS.nbank
-  
+
   return Object.entries(details)
-    .filter(([key, value]) => value > 0)
-    .map(([key, value]) => ({
+    .map(([key, value], index) => ({
       key,
       label: labels[key] || key,
-      value
+      value: value || 0,
+      color: COLORS[index % COLORS.length],
     }))
-    .sort((a, b) => b.value - a.value)
 })
 
 // 饼图配置
 const pieChartOption = computed(() => {
   const list = detailList.value
-  
-  if (list.length === 0) {
+
+  if (!list || list.length === 0) {
     return {
       title: {
         text: '暂无数据',
@@ -106,20 +114,23 @@ const pieChartOption = computed(() => {
       trigger: 'item',
       formatter: '{b}: {c}次 ({d}%)'
     },
-    legend: {
-      orient: 'vertical',
-      left: 'left',
-      top: 'middle',
-      textStyle: {
-        fontSize: 11
-      }
+    graphic: {
+      type: 'text',
+      left: 'center',
+      top: 'center',
+      style: {
+        text: '非银机构',
+        fill: '#111827',
+        fontSize: 14,
+        fontWeight: 'bold',
+      },
     },
     series: [
       {
         name: '申请次数',
         type: 'pie',
         radius: ['40%', '70%'],
-        center: ['60%', '50%'],
+        center: ['50%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: {
           borderRadius: 4,
@@ -127,19 +138,27 @@ const pieChartOption = computed(() => {
           borderWidth: 2
         },
         label: {
-          show: true,
-          formatter: '{b}\n{c}次'
+          show: false
         },
         emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          },
           label: {
             show: true,
             fontSize: 14,
-            fontWeight: 'bold'
+            fontWeight: 'bold',
+            color: '#333'
           }
         },
         data: list.map(item => ({
           value: item.value,
-          name: item.label
+          name: item.label,
+          itemStyle: {
+            color: item.color
+          }
         }))
       }
     ]
@@ -147,12 +166,9 @@ const pieChartOption = computed(() => {
 })
 </script>
 
-<style scoped>
-.nbank-institution-section {
-  background: #f9fafb;
-  padding: 16px;
-  border-radius: 8px;
+<style lang="scss" scoped>
+.chart-container {
+  width: 100%;
+  height: 100%;
 }
 </style>
-
-
diff --git a/src/ui/JRZQ6F2A/components/NBankOrgSection.vue b/src/ui/JRZQ6F2A/components/NBankOrgSection.vue
index 716abb8..2edfd28 100644
--- a/src/ui/JRZQ6F2A/components/NBankOrgSection.vue
+++ b/src/ui/JRZQ6F2A/components/NBankOrgSection.vue
@@ -1,23 +1,19 @@
 <template>
-  <div class="nbank-org-section mb-6">
-    <div class="flex items-center mb-4">
-      <span class="font-bold text-gray-800">非银机构 {{ nbankTotal }}家</span>
-    </div>
-    
-    <div class="grid grid-cols-2 gap-4">
-      <!-- 饼图 -->
-      <div class="h-64">
+  <div class="mb-6">
+    <LTitle title="非银机构申请机构数分布" />
+    <div class="mt-4">
+      <!-- 饼图：宽度占满 -->
+      <div class="h-64 mb-4">
         <v-chart class="chart-container" :option="pieChartOption" autoresize />
       </div>
-      
-      <!-- 详细列表 -->
+
+      <!-- 详细列表：在图表下方，展示所有项并带颜色标识 -->
       <div class="space-y-2">
-        <div 
-          v-for="(item, index) in detailList" 
-          :key="index"
-          class="flex justify-between items-center text-sm py-1 border-b border-gray-100"
-        >
-          <span class="text-gray-600">{{ item.label }}</span>
+        <div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
+          <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>
+          </div>
           <span class="text-[#333333] font-bold">{{ item.value }}家</span>
         </div>
       </div>
@@ -36,6 +32,7 @@ import {
   TooltipComponent,
   LegendComponent
 } from 'echarts/components'
+import LTitle from '@/components/LTitle.vue'
 import { getNBankOrgDetails, FIELD_LABELS } from '../utils/dataParser'
 
 // 注册ECharts组件
@@ -59,6 +56,18 @@ const props = defineProps({
   }
 })
 
+// 颜色映射表（与图表保持一致）
+const COLORS = [
+  '#2B79EE',
+  '#61D2F4',
+  '#34D399',
+  '#FBBF24',
+  '#F97316',
+  '#EF4444',
+  '#A855F7',
+  '#6B7280',
+]
+
 // 获取非银机构数详情
 const nbankOrgs = computed(() => getNBankOrgDetails(props.data, props.period))
 
@@ -68,26 +77,25 @@ const nbankTotal = computed(() => {
   return Object.values(orgs).reduce((sum, val) => sum + (val || 0), 0)
 })
 
-// 详细列表
+// 详细列表（包含所有项，包含 0 家）
 const detailList = computed(() => {
   const orgs = nbankOrgs.value
   const labels = FIELD_LABELS.nbank
-  
+
   return Object.entries(orgs)
-    .filter(([key, value]) => value > 0)
-    .map(([key, value]) => ({
+    .map(([key, value], index) => ({
       key,
       label: labels[key] || key,
-      value
+      value: value || 0,
+      color: COLORS[index % COLORS.length],
     }))
-    .sort((a, b) => b.value - a.value)
 })
 
 // 饼图配置
 const pieChartOption = computed(() => {
   const list = detailList.value
-  
-  if (list.length === 0) {
+
+  if (!list || list.length === 0) {
     return {
       title: {
         text: '暂无数据',
@@ -106,20 +114,23 @@ const pieChartOption = computed(() => {
       trigger: 'item',
       formatter: '{b}: {c}家 ({d}%)'
     },
-    legend: {
-      orient: 'vertical',
-      left: 'left',
-      top: 'middle',
-      textStyle: {
-        fontSize: 11
-      }
+    graphic: {
+      type: 'text',
+      left: 'center',
+      top: 'center',
+      style: {
+        text: '非银机构',
+        fill: '#111827',
+        fontSize: 14,
+        fontWeight: 'bold',
+      },
     },
     series: [
       {
         name: '机构数',
         type: 'pie',
         radius: ['40%', '70%'],
-        center: ['60%', '50%'],
+        center: ['50%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: {
           borderRadius: 4,
@@ -127,19 +138,27 @@ const pieChartOption = computed(() => {
           borderWidth: 2
         },
         label: {
-          show: true,
-          formatter: '{b}\n{c}家'
+          show: false
         },
         emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          },
           label: {
             show: true,
             fontSize: 14,
-            fontWeight: 'bold'
+            fontWeight: 'bold',
+            color: '#333'
           }
         },
         data: list.map(item => ({
           value: item.value,
-          name: item.label
+          name: item.label,
+          itemStyle: {
+            color: item.color
+          }
         }))
       }
     ]
@@ -147,12 +166,9 @@ const pieChartOption = computed(() => {
 })
 </script>
 
-<style scoped>
-.nbank-org-section {
-  background: #f9fafb;
-  padding: 16px;
-  border-radius: 8px;
+<style lang="scss" scoped>
+.chart-container {
+  width: 100%;
+  height: 100%;
 }
 </style>
-
-
diff --git a/src/ui/JRZQ6F2A/components/ProductTypeDistributionSection.vue b/src/ui/JRZQ6F2A/components/ProductTypeDistributionSection.vue
new file mode 100644
index 0000000..1165d04
--- /dev/null
+++ b/src/ui/JRZQ6F2A/components/ProductTypeDistributionSection.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="card">
+    <div class="rounded-lg border border-gray-200 pb-2 mb-4">
+      <div class="mt-4">
+        <LTitle title="产品类型申请分布（近12个月）" />
+        <div class="h-64 mb-4">
+          <v-chart class="chart-container" :option="chartOption" autoresize />
+        </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="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>
+            </div>
+            <span class="text-[#111827] font-bold">
+              {{ item.value }} 次
+            </span>
+          </div>
+        </div>
+      </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 {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent
+} from 'echarts/components'
+import LTitle from '@/components/LTitle.vue'
+import { getValue, FIELD_LABELS } from '../utils/dataParser'
+
+// 注册 ECharts 组件
+use([
+  CanvasRenderer,
+  BarChart,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent
+])
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+})
+
+// 近12个月的前缀
+const PREFIX = 'als_m12'
+
+// 关注的产品类型 key（字段中的 id_xxx_allnum）
+const TYPE_KEYS = ['pdl', 'caon', 'rel', 'caoff', 'cooff', 'af', 'coon', 'oth']
+
+// 颜色映射，与其他组件保持风格一致
+const COLORS = [
+  '#2B79EE',
+  '#60A5FA',
+  '#34D399',
+  '#FBBF24',
+  '#F97316',
+  '#EF4444',
+  '#A855F7',
+  '#6B7280'
+]
+
+// 详细列表（每个产品类型的次数和颜色）
+const detailList = computed(() => {
+  const v = props.data || {}
+  const labels = FIELD_LABELS.bank || {}
+
+  return TYPE_KEYS.map((key, index) => {
+    const field = `${PREFIX}_id_${key}_allnum`
+    const value = getValue(v[field]) || 0
+
+    return {
+      key,
+      label: labels[key] || key,
+      value,
+      color: COLORS[index % COLORS.length]
+    }
+  })
+})
+
+// 产品类型分布柱状图
+const chartOption = computed(() => {
+  const list = detailList.value
+
+  const categories = list.map(item => item.label)
+  const values = list.map(item => item.value)
+  const colors = list.map(item => item.color)
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: params => {
+        const p = params[0]
+        return `${p.name}<br/>申请次数：${p.value} 次`
+      }
+    },
+    grid: {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 20,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: categories,
+      axisLabel: {
+        fontSize: 10,
+        color: '#6b7280',
+        rotate: 30
+      },
+      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: '35%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: params => colors[params.dataIndex],
+          borderRadius: [4, 4, 0, 0]
+        }
+      }
+    ]
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.card {
+  background: #ffffff;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+{
+"cells": [],
+"metadata": {
+"language_info": {
+"name": "python"
+}
+},
+"nbformat": 4,
+"nbformat_minor": 2
+}
\ No newline at end of file
diff --git a/src/ui/JRZQ6F2A/components/RecentIntensiveApplicationSection.vue b/src/ui/JRZQ6F2A/components/RecentIntensiveApplicationSection.vue
new file mode 100644
index 0000000..8226fb0
--- /dev/null
+++ b/src/ui/JRZQ6F2A/components/RecentIntensiveApplicationSection.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="card">
+    <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>
+      </div>
+
+      <div v-else class="text-sm text-gray-400">
+        暂未查询到明显的近期集中申请行为。
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import LTitle from '@/components/LTitle.vue'
+import { getValue } from '../utils/dataParser'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+})
+
+const bankCons = computed(() => getValue(props.data?.als_lst_id_bank_consnum))
+const bankDays = computed(() => getValue(props.data?.als_lst_id_bank_csinteday))
+const nbankCons = computed(() => getValue(props.data?.als_lst_id_nbank_consnum))
+const nbankDays = computed(() => getValue(props.data?.als_lst_id_nbank_csinteday))
+
+const bankGap = computed(() => getValue(props.data?.als_lst_id_bank_inteday))
+const nbankGap = computed(() => getValue(props.data?.als_lst_id_nbank_inteday))
+
+const hasAnyData = computed(() => {
+  return (
+    (bankCons.value || 0) > 0 ||
+    (bankDays.value || 0) > 0 ||
+    (nbankCons.value || 0) > 0 ||
+    (nbankDays.value || 0) > 0 ||
+    (bankGap.value || 0) > 0 ||
+    (nbankGap.value || 0) > 0
+  )
+})
+</script>
+
+<style scoped>
+.card {
+  background: #ffffff;
+}
+</style>
+
+
diff --git a/src/ui/JRZQ6F2A/components/SummaryApplyStats.vue b/src/ui/JRZQ6F2A/components/SummaryApplyStats.vue
new file mode 100644
index 0000000..3f38262
--- /dev/null
+++ b/src/ui/JRZQ6F2A/components/SummaryApplyStats.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="card rounded-lg border border-gray-200 pb-2 mb-2">
+    <div class="flex items-center mb-4 p-4">
+      <span class="font-bold text-gray-800">借贷意向统计概览</span>
+    </div>
+    <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]">
+          {{ item.value }}
+          <span class="text-xs text-gray-500 ml-1">{{ item.unit }}</span>
+        </div>
+        <div class="text-xs text-gray-600 mt-1">
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { getApplicationCounts, getBankOrgDetails, getNBankOrgDetails } from '../utils/dataParser'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+})
+
+const items = computed(() => {
+  const v = props.data || {}
+
+  // 近12个月申请次数（总/银行/非银）
+  const m12 = getApplicationCounts(v, 'm12')
+
+  // 近12个月申请机构总数（银行+非银）
+  const bankOrgs = getBankOrgDetails(v, 'm12')
+  const nbankOrgs = getNBankOrgDetails(v, 'm12')
+  const bankOrgTotal = Object.values(bankOrgs || {}).reduce((sum, val) => sum + (val || 0), 0)
+  const nbankOrgTotal = Object.values(nbankOrgs || {}).reduce((sum, val) => sum + (val || 0), 0)
+  const orgTotal = bankOrgTotal + nbankOrgTotal
+
+  // 近12个月周末 / 夜间申请次数（银行+非银）
+  const weekendTotal =
+    Number(v.als_m12_id_bank_week_allnum || 0) + Number(v.als_m12_id_nbank_week_allnum || 0)
+  const nightTotal =
+    Number(v.als_m12_id_bank_night_allnum || 0) + Number(v.als_m12_id_nbank_night_allnum || 0)
+
+  return [
+    { label: '总申请次数', value: m12.total || 0, unit: '次' },
+    { label: '总申请机构数', value: orgTotal || 0, unit: '家' },
+    { label: '银行申请次数', value: m12.bank || 0, unit: '次' },
+    { label: '非银申请次数', value: m12.nbank || 0, unit: '次' },
+    { label: '夜间申请次数', value: nightTotal || 0, unit: '次' },
+    { label: '周末申请次数', value: weekendTotal || 0, unit: '次' },
+  ]
+})
+</script>
+
+<style scoped>
+.card {
+  background: #ffffff;
+}
+</style>
+
+
diff --git a/src/ui/JRZQ6F2A/index.vue b/src/ui/JRZQ6F2A/index.vue
index 5e4ea3a..a145a32 100644
--- a/src/ui/JRZQ6F2A/index.vue
+++ b/src/ui/JRZQ6F2A/index.vue
@@ -1,8 +1,17 @@
 <template>
-  <div class="card shadow-sm rounded-xl overflow-hidden flex flex-col gap-4">
+  <div class="flex flex-col gap-4">
+    <!-- 统计概览小模块 -->
+    <SummaryApplyStats :data="variableValue" />
+
     <!-- 申请次数 -->
     <ApplicationCountSection :data="variableValue" />
 
+    <!-- 产品类型申请分布 -->
+    <ProductTypeDistributionSection :data="variableValue" />
+
+    <!-- 近期集中申请提示 -->
+    <RecentIntensiveApplicationSection :data="variableValue" />
+
     <!-- 申请总次数 (银行+非银) -->
     <ApplicationTotalSection :data="variableValue" />
 
@@ -18,6 +27,9 @@ import { extractVariableValue } from './utils/dataParser'
 import ApplicationCountSection from './components/ApplicationCountSection.vue'
 import ApplicationTotalSection from './components/ApplicationTotalSection.vue'
 import InstitutionTotalSection from './components/InstitutionTotalSection.vue'
+import SummaryApplyStats from './components/SummaryApplyStats.vue'
+import ProductTypeDistributionSection from './components/ProductTypeDistributionSection.vue'
+import RecentIntensiveApplicationSection from './components/RecentIntensiveApplicationSection.vue'
 
 const props = defineProps({
   data: {
@@ -48,7 +60,7 @@ const variableValue = computed(() => extractVariableValue(rawData.value))
 // 计算风险评分（0-100分，分数越高越安全）
 const riskScore = computed(() => {
   const data = variableValue.value
-  
+
   if (!data || Object.keys(data).length === 0) {
     return 100 // 无数据视为最安全
   }
@@ -114,5 +126,3 @@ defineExpose({
   border: 1px solid #e5e7eb;
 }
 </style>
-
-
diff --git a/src/ui/JRZQ6F2A/utils/dataParser.js b/src/ui/JRZQ6F2A/utils/dataParser.js
index 598e8e0..67b4fde 100644
--- a/src/ui/JRZQ6F2A/utils/dataParser.js
+++ b/src/ui/JRZQ6F2A/utils/dataParser.js
@@ -7,203 +7,231 @@
  * 获取字段值，处理空值
  */
 export function getValue(value) {
-  if (value === undefined || value === null || value === '' || value === '空') {
-    return 0
-  }
-  // 如果是字符串数字，转换为数字
-  if (typeof value === 'string' && /^\d+(\.\d+)?$/.test(value)) {
-    return parseFloat(value)
-  }
-  return value
+    if (
+        value === undefined ||
+        value === null ||
+        value === "" ||
+        value === "空"
+    ) {
+        return 0;
+    }
+    // 如果是字符串数字，转换为数字
+    if (typeof value === "string" && /^\d+(\.\d+)?$/.test(value)) {
+        return parseFloat(value);
+    }
+    return value;
 }
 
 /**
  * 从原始数据中提取 variableValue
  */
 export function extractVariableValue(data) {
-  try {
-    return data?.risk_screen_v2?.variables?.find(
-      v => v.variableName === 'bairong_applyloan_extend'
-    )?.variableValue || {}
-  } catch (error) {
-    console.error('提取数据失败:', error)
-    return {}
-  }
+    try {
+        return (
+            data?.risk_screen_v2?.variables?.find(
+                (v) => v.variableName === "bairong_applyloan_extend"
+            )?.variableValue || {}
+        );
+    } catch (error) {
+        console.error("提取数据失败:", error);
+        return {};
+    }
 }
 
 /**
  * 时间段映射
  */
 export const PERIOD_MAP = {
-  d7: { label: '7天', prefix: 'als_d7' },
-  d15: { label: '15天', prefix: 'als_d15' },
-  m1: { label: '1个月', prefix: 'als_m1' },
-  m3: { label: '3个月', prefix: 'als_m3' },
-  m6: { label: '6个月', prefix: 'als_m6' },
-  m12: { label: '12个月', prefix: 'als_m12' }
-}
+    d7: { label: "7天", prefix: "als_d7" },
+    d15: { label: "15天", prefix: "als_d15" },
+    m1: { label: "1个月", prefix: "als_m1" },
+    m3: { label: "3个月", prefix: "als_m3" },
+    m6: { label: "6个月", prefix: "als_m6" },
+    m12: { label: "12个月", prefix: "als_m12" },
+};
 
 /**
  * 获取申请次数（按时间段）
  */
 export function getApplicationCounts(variableValue, period) {
-  const { prefix } = PERIOD_MAP[period]
-  
-  // 计算总申请次数（所有类型的申请次数之和）
-  const types = [
-    'id_pdl_allnum',      // 线上小额现金贷
-    'id_caon_allnum',     // 线上现金分期
-    'id_rel_allnum',      // 信用卡（类信用卡）
-    'id_caoff_allnum',    // 线下现金分期
-    'id_cooff_allnum',    // 线下消费分期
-    'id_af_allnum',       // 汽车金融
-    'id_coon_allnum',     // 线上消费分期
-    'id_oth_allnum'       // 其他
-  ]
-  
-  let total = 0
-  types.forEach(type => {
-    const value = getValue(variableValue[`${prefix}_${type}`])
-    total += value
-  })
-  
-  // 银行机构申请次数
-  const bankTotal = getValue(variableValue[`${prefix}_id_bank_allnum`]) || 0
-  
-  // 非银机构申请次数
-  const nbankTotal = getValue(variableValue[`${prefix}_id_nbank_allnum`]) || 0
-  
-  // 如果计算出的total为0，则使用银行+非银的总和
-  const finalTotal = total > 0 ? total : (bankTotal + nbankTotal)
-  
-  return {
-    total: finalTotal,
-    bank: bankTotal,
-    nbank: nbankTotal
-  }
+    const { prefix } = PERIOD_MAP[period];
+
+    // 计算总申请次数（所有类型的申请次数之和）
+    const types = [
+        "id_pdl_allnum", // 线上小额现金贷
+        "id_caon_allnum", // 线上现金分期
+        "id_rel_allnum", // 信用卡（类信用卡）
+        "id_caoff_allnum", // 线下现金分期
+        "id_cooff_allnum", // 线下消费分期
+        "id_af_allnum", // 汽车金融
+        "id_coon_allnum", // 线上消费分期
+        "id_oth_allnum", // 其他
+    ];
+
+    let total = 0;
+    types.forEach((type) => {
+        const value = getValue(variableValue[`${prefix}_${type}`]);
+        total += value;
+    });
+
+    // 银行机构申请次数
+    const bankTotal = getValue(variableValue[`${prefix}_id_bank_allnum`]) || 0;
+
+    // 非银机构申请次数
+    const nbankTotal =
+        getValue(variableValue[`${prefix}_id_nbank_allnum`]) || 0;
+
+    // 如果计算出的total为0，则使用银行+非银的总和
+    const finalTotal = total > 0 ? total : bankTotal + nbankTotal;
+
+    return {
+        total: finalTotal,
+        bank: bankTotal,
+        nbank: nbankTotal,
+    };
+}
+
+/**
+ * 获取特殊时段（周末/夜间）申请次数（按时间段，银行+非银）
+ */
+export function getSpecialPeriodCounts(variableValue, period) {
+    const { prefix } = PERIOD_MAP[period];
+
+    const weekendBank =
+        getValue(variableValue[`${prefix}_id_bank_week_allnum`]) || 0;
+    const weekendNbank =
+        getValue(variableValue[`${prefix}_id_nbank_week_allnum`]) || 0;
+    const nightBank =
+        getValue(variableValue[`${prefix}_id_bank_night_allnum`]) || 0;
+    const nightNbank =
+        getValue(variableValue[`${prefix}_id_nbank_night_allnum`]) || 0;
+
+    return {
+        weekend: weekendBank + weekendNbank,
+        night: nightBank + nightNbank,
+    };
 }
 
 /**
  * 获取银行机构申请次数详情
  */
 export function getBankApplicationDetails(variableValue, period) {
-  const { prefix } = PERIOD_MAP[period]
-  
-  return {
-    pdl: getValue(variableValue[`${prefix}_id_pdl_allnum`]),           // 线上小额现金贷
-    caon: getValue(variableValue[`${prefix}_id_caon_allnum`]),         // 线上现金分期
-    rel: getValue(variableValue[`${prefix}_id_rel_allnum`]),            // 信用卡（类信用卡）
-    caoff: getValue(variableValue[`${prefix}_id_caoff_allnum`]),       // 线下现金分期
-    cooff: getValue(variableValue[`${prefix}_id_cooff_allnum`]),       // 线下消费分期
-    af: getValue(variableValue[`${prefix}_id_af_allnum`]),              // 汽车金融
-    coon: getValue(variableValue[`${prefix}_id_coon_allnum`]),         // 线上消费分期
-    oth: getValue(variableValue[`${prefix}_id_oth_allnum`]),           // 其他
-    bank: getValue(variableValue[`${prefix}_id_bank_allnum`]),         // 银行机构申请
-    tra: getValue(variableValue[`${prefix}_id_bank_tra_allnum`]),      // 传统银行申请
-    ret: getValue(variableValue[`${prefix}_id_bank_ret_allnum`])       // 网络零售银行申请
-  }
+    const { prefix } = PERIOD_MAP[period];
+
+    return {
+        pdl: getValue(variableValue[`${prefix}_id_pdl_allnum`]), // 线上小额现金贷
+        caon: getValue(variableValue[`${prefix}_id_caon_allnum`]), // 线上现金分期
+        rel: getValue(variableValue[`${prefix}_id_rel_allnum`]), // 信用卡（类信用卡）
+        caoff: getValue(variableValue[`${prefix}_id_caoff_allnum`]), // 线下现金分期
+        cooff: getValue(variableValue[`${prefix}_id_cooff_allnum`]), // 线下消费分期
+        af: getValue(variableValue[`${prefix}_id_af_allnum`]), // 汽车金融
+        coon: getValue(variableValue[`${prefix}_id_coon_allnum`]), // 线上消费分期
+        oth: getValue(variableValue[`${prefix}_id_oth_allnum`]), // 其他
+        bank: getValue(variableValue[`${prefix}_id_bank_allnum`]), // 银行机构申请
+        tra: getValue(variableValue[`${prefix}_id_bank_tra_allnum`]), // 传统银行申请
+        ret: getValue(variableValue[`${prefix}_id_bank_ret_allnum`]), // 网络零售银行申请
+    };
 }
 
 /**
  * 获取非银机构申请次数详情
  */
 export function getNBankApplicationDetails(variableValue, period) {
-  const { prefix } = PERIOD_MAP[period]
-  
-  return {
-    nbank: getValue(variableValue[`${prefix}_id_nbank_allnum`]),       // 非银机构
-    p2p: getValue(variableValue[`${prefix}_id_nbank_p2p_allnum`]),      // 改制机构
-    mc: getValue(variableValue[`${prefix}_id_nbank_mc_allnum`]),       // 小贷机构
-    ca: getValue(variableValue[`${prefix}_id_nbank_ca_allnum`]),        // 现金类分期机构
-    cf: getValue(variableValue[`${prefix}_id_nbank_cf_allnum`]),        // 消费类分期机构
-    com: getValue(variableValue[`${prefix}_id_nbank_com_allnum`]),      // 代偿类分期机构
-    oth: getValue(variableValue[`${prefix}_id_nbank_oth_allnum`]),     // 其他申请
-    nsloan: getValue(variableValue[`${prefix}_id_nbank_nsloan_allnum`]), // 持牌网络小贷机构
-    autofin: getValue(variableValue[`${prefix}_id_nbank_autofin_allnum`]), // 持牌汽车金融机构
-    sloan: getValue(variableValue[`${prefix}_id_nbank_sloan_allnum`]),  // 持牌小贷机构
-    cons: getValue(variableValue[`${prefix}_id_nbank_cons_allnum`]),    // 持牌消费金融机构
-    finlea: getValue(variableValue[`${prefix}_id_nbank_finlea_allnum`]), // 持牌融资租赁机构
-    else: getValue(variableValue[`${prefix}_id_nbank_else_allnum`])      // 其他申请
-  }
+    const { prefix } = PERIOD_MAP[period];
+
+    return {
+        nbank: getValue(variableValue[`${prefix}_id_nbank_allnum`]), // 非银机构
+        p2p: getValue(variableValue[`${prefix}_id_nbank_p2p_allnum`]), // 改制机构
+        mc: getValue(variableValue[`${prefix}_id_nbank_mc_allnum`]), // 小贷机构
+        ca: getValue(variableValue[`${prefix}_id_nbank_ca_allnum`]), // 现金类分期机构
+        cf: getValue(variableValue[`${prefix}_id_nbank_cf_allnum`]), // 消费类分期机构
+        com: getValue(variableValue[`${prefix}_id_nbank_com_allnum`]), // 代偿类分期机构
+        oth: getValue(variableValue[`${prefix}_id_nbank_oth_allnum`]), // 其他申请
+        nsloan: getValue(variableValue[`${prefix}_id_nbank_nsloan_allnum`]), // 持牌网络小贷机构
+        autofin: getValue(variableValue[`${prefix}_id_nbank_autofin_allnum`]), // 持牌汽车金融机构
+        sloan: getValue(variableValue[`${prefix}_id_nbank_sloan_allnum`]), // 持牌小贷机构
+        cons: getValue(variableValue[`${prefix}_id_nbank_cons_allnum`]), // 持牌消费金融机构
+        finlea: getValue(variableValue[`${prefix}_id_nbank_finlea_allnum`]), // 持牌融资租赁机构
+        else: getValue(variableValue[`${prefix}_id_nbank_else_allnum`]), // 其他申请
+    };
 }
 
 /**
  * 获取银行机构申请机构数详情
  */
 export function getBankOrgDetails(variableValue, period) {
-  const { prefix } = PERIOD_MAP[period]
-  
-  return {
-    pdl: getValue(variableValue[`${prefix}_id_pdl_orgnum`]),
-    caon: getValue(variableValue[`${prefix}_id_caon_orgnum`]),
-    rel: getValue(variableValue[`${prefix}_id_rel_orgnum`]),
-    caoff: getValue(variableValue[`${prefix}_id_caoff_orgnum`]),
-    cooff: getValue(variableValue[`${prefix}_id_cooff_orgnum`]),
-    af: getValue(variableValue[`${prefix}_id_af_orgnum`]),
-    coon: getValue(variableValue[`${prefix}_id_coon_orgnum`]),
-    oth: getValue(variableValue[`${prefix}_id_oth_orgnum`]),
-    bank: getValue(variableValue[`${prefix}_id_bank_orgnum`]),
-    tra: getValue(variableValue[`${prefix}_id_bank_tra_orgnum`]),
-    ret: getValue(variableValue[`${prefix}_id_bank_ret_orgnum`])
-  }
+    const { prefix } = PERIOD_MAP[period];
+
+    return {
+        pdl: getValue(variableValue[`${prefix}_id_pdl_orgnum`]),
+        caon: getValue(variableValue[`${prefix}_id_caon_orgnum`]),
+        rel: getValue(variableValue[`${prefix}_id_rel_orgnum`]),
+        caoff: getValue(variableValue[`${prefix}_id_caoff_orgnum`]),
+        cooff: getValue(variableValue[`${prefix}_id_cooff_orgnum`]),
+        af: getValue(variableValue[`${prefix}_id_af_orgnum`]),
+        coon: getValue(variableValue[`${prefix}_id_coon_orgnum`]),
+        oth: getValue(variableValue[`${prefix}_id_oth_orgnum`]),
+        bank: getValue(variableValue[`${prefix}_id_bank_orgnum`]),
+        tra: getValue(variableValue[`${prefix}_id_bank_tra_orgnum`]),
+        ret: getValue(variableValue[`${prefix}_id_bank_ret_orgnum`]),
+    };
 }
 
 /**
  * 获取非银机构申请机构数详情
  */
 export function getNBankOrgDetails(variableValue, period) {
-  const { prefix } = PERIOD_MAP[period]
-  
-  return {
-    nbank: getValue(variableValue[`${prefix}_id_nbank_orgnum`]),
-    p2p: getValue(variableValue[`${prefix}_id_nbank_p2p_orgnum`]),
-    mc: getValue(variableValue[`${prefix}_id_nbank_mc_orgnum`]),
-    ca: getValue(variableValue[`${prefix}_id_nbank_ca_orgnum`]),
-    cf: getValue(variableValue[`${prefix}_id_nbank_cf_orgnum`]),
-    com: getValue(variableValue[`${prefix}_id_nbank_com_orgnum`]),
-    oth: getValue(variableValue[`${prefix}_id_nbank_oth_orgnum`]),
-    nsloan: getValue(variableValue[`${prefix}_id_nbank_nsloan_orgnum`]),
-    autofin: getValue(variableValue[`${prefix}_id_nbank_autofin_orgnum`]),
-    sloan: getValue(variableValue[`${prefix}_id_nbank_sloan_orgnum`]),
-    cons: getValue(variableValue[`${prefix}_id_nbank_cons_orgnum`]),
-    finlea: getValue(variableValue[`${prefix}_id_nbank_finlea_orgnum`]),
-    else: getValue(variableValue[`${prefix}_id_nbank_else_orgnum`])
-  }
+    const { prefix } = PERIOD_MAP[period];
+
+    return {
+        nbank: getValue(variableValue[`${prefix}_id_nbank_orgnum`]),
+        p2p: getValue(variableValue[`${prefix}_id_nbank_p2p_orgnum`]),
+        mc: getValue(variableValue[`${prefix}_id_nbank_mc_orgnum`]),
+        ca: getValue(variableValue[`${prefix}_id_nbank_ca_orgnum`]),
+        cf: getValue(variableValue[`${prefix}_id_nbank_cf_orgnum`]),
+        com: getValue(variableValue[`${prefix}_id_nbank_com_orgnum`]),
+        oth: getValue(variableValue[`${prefix}_id_nbank_oth_orgnum`]),
+        nsloan: getValue(variableValue[`${prefix}_id_nbank_nsloan_orgnum`]),
+        autofin: getValue(variableValue[`${prefix}_id_nbank_autofin_orgnum`]),
+        sloan: getValue(variableValue[`${prefix}_id_nbank_sloan_orgnum`]),
+        cons: getValue(variableValue[`${prefix}_id_nbank_cons_orgnum`]),
+        finlea: getValue(variableValue[`${prefix}_id_nbank_finlea_orgnum`]),
+        else: getValue(variableValue[`${prefix}_id_nbank_else_orgnum`]),
+    };
 }
 
 /**
  * 字段名称映射
  */
 export const FIELD_LABELS = {
-  // 银行机构申请类型
-  bank: {
-    pdl: '申请线上小额现金贷',
-    caon: '申请线上现金分期',
-    rel: '申请信用卡（类信用卡）',
-    caoff: '申请线下现金分期',
-    cooff: '申请线下消费分期',
-    af: '申请汽车金融',
-    coon: '申请线上消费分期',
-    oth: '申请其他',
-    bank: '银行机构申请',
-    tra: '银行机构-传统银行申请',
-    ret: '银行机构-网络零售银行申请'
-  },
-  // 非银机构申请类型
-  nbank: {
-    nbank: '非银机构',
-    p2p: '改制机构',
-    mc: '小贷机构',
-    ca: '现金类分期机构',
-    cf: '消费类分期机构',
-    com: '代偿类分期机构',
-    oth: '其他申请',
-    nsloan: '持牌网络小贷机构',
-    autofin: '汽车金融',
-    sloan: '持牌小贷机构',
-    cons: '持牌消费金融机构',
-    finlea: '持牌融资租赁机构',
-    else: '其他申请'
-  }
-}
-
+    // 银行机构申请类型
+    bank: {
+        pdl: "申请线上小额现金贷",
+        caon: "申请线上现金分期",
+        rel: "申请信用卡（类信用卡）",
+        caoff: "申请线下现金分期",
+        cooff: "申请线下消费分期",
+        af: "申请汽车金融",
+        coon: "申请线上消费分期",
+        oth: "申请其他",
+        bank: "银行机构申请",
+        tra: "银行机构-传统银行申请",
+        ret: "银行机构-网络零售银行申请",
+    },
+    // 非银机构申请类型
+    nbank: {
+        nbank: "非银机构",
+        p2p: "改制机构",
+        mc: "小贷机构",
+        ca: "现金类分期机构",
+        cf: "消费类分期机构",
+        com: "代偿类分期机构",
+        oth: "其他申请",
+        nsloan: "持牌网络小贷机构",
+        autofin: "汽车金融",
+        sloan: "持牌小贷机构",
+        cons: "持牌消费金融机构",
+        finlea: "持牌融资租赁机构",
+        else: "其他申请",
+    },
+};