add JRZQ6F2A

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>
-
-