120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
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>
|