change

src/ui/JRZQ6F2A/components/NBankOrgSection.vue

@@ -0,0 +1,158 @@
+<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">
+        <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>
+          <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 { getNBankOrgDetails, 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 nbankOrgs = computed(() => getNBankOrgDetails(props.data, props.period))
+
+// 计算非银机构总数
+const nbankTotal = computed(() => {
+  const orgs = nbankOrgs.value
+  return Object.values(orgs).reduce((sum, val) => sum + (val || 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]) => ({
+      key,
+      label: labels[key] || key,
+      value
+    }))
+    .sort((a, b) => b.value - a.value)
+})
+
+// 饼图配置
+const pieChartOption = computed(() => {
+  const list = detailList.value
+  
+  if (list.length === 0) {
+    return {
+      title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'center',
+        textStyle: {
+          color: '#999',
+          fontSize: 14
+        }
+      }
+    }
+  }
+
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}家 ({d}%)'
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+      top: 'middle',
+      textStyle: {
+        fontSize: 11
+      }
+    },
+    series: [
+      {
+        name: '机构数',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['60%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: true,
+          formatter: '{b}\n{c}家'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: 'bold'
+          }
+        },
+        data: list.map(item => ({
+          value: item.value,
+          name: item.label
+        }))
+      }
+    ]
+  }
+})
+</script>
+
+<style scoped>
+.nbank-org-section {
+  background: #f9fafb;
+  padding: 16px;
+  border-radius: 8px;
+}
+</style>
+
+