新增：JRZQ6F2A 借贷申请组件

src/ui/JRZQ6F2A/components/BankInstitutionSection.vue

@@ -0,0 +1,174 @@
+<template>
+  <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">
+          <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>
+    </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 { PieChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent
+} from 'echarts/components'
+import LTitle from '@/components/LTitle.vue'
+import { getBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser'
+
+// 注册ECharts组件
+use([
+  CanvasRenderer,
+  PieChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent
+])
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  period: {
+    type: String,
+    required: true
+  }
+})
+
+// 颜色映射表（与图表保持一致）
+const COLORS = [
+  '#2B79EE',
+  '#61D2F4',
+  '#34D399',
+  '#FBBF24',
+  '#F97316',
+  '#EF4444',
+  '#A855F7',
+  '#6B7280',
+]
+
+// 获取银行机构申请详情
+const bankDetails = computed(() => getBankApplicationDetails(props.data, props.period))
+
+// 计算银行机构总次数
+const bankTotal = computed(() => {
+  const details = bankDetails.value
+  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)
+    .map(([key, value], index) => ({
+      key,
+      label: labels[key] || key,
+      value: value || 0,
+      color: COLORS[index % COLORS.length],
+    }))
+})
+
+// 饼图配置
+const pieChartOption = computed(() => {
+  const list = detailList.value
+
+  if (!list || list.length === 0) {
+    return {
+      title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'center',
+        textStyle: {
+          color: '#999',
+          fontSize: 14
+        }
+      }
+    }
+  }
+
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}次 ({d}%)'
+    },
+    graphic: {
+      type: 'text',
+      left: 'center',
+      top: 'center',
+      style: {
+        text: '银行机构',
+        fill: '#111827',
+        fontSize: 14,
+        fontWeight: 'bold',
+      },
+    },
+    series: [
+      {
+        name: '申请次数',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['50%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: false
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          },
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: 'bold',
+            color: '#333'
+          }
+        },
+        data: list.map(item => ({
+          value: item.value,
+          name: item.label,
+          itemStyle: {
+            color: item.color
+          }
+        }))
+      }
+    ]
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>