report_viewer/src/ui/JRZQ6F2A/components/InstitutionTotalSection.vue

<template>
  <div class="card institution-total-section">
    <div class="rounded-lg border border-gray-200 pb-2 mb-4">
      <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>
</template>

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

const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({})
  }
})

const activeTab = ref(5) // 默认显示12个月

const periods = [
  { key: 'd7', label: '7天' },
  { key: 'd15', label: '15天' },
  { key: 'm1', label: '1个月' },
  { key: 'm3', label: '3个月' },
  { key: 'm6', label: '6个月' },
  { key: 'm12', label: '12个月' }
]

// 计算总机构数（12个月）
const totalCount = computed(() => {
  const bankOrgs = getBankOrgDetails(props.data, 'm12')
  const nbankOrgs = getNBankOrgDetails(props.data, 'm12')
  const bankTotal = Object.values(bankOrgs).reduce((sum, val) => sum + (val || 0), 0)
  const nbankTotal = Object.values(nbankOrgs).reduce((sum, val) => sum + (val || 0), 0)
  return bankTotal + nbankTotal
})
</script>

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