add JRZQ6F2A
This commit is contained in:
@@ -1,14 +1,21 @@
|
||||
<template>
|
||||
<div class="card application-count-section">
|
||||
<div class="rounded-lg border border-gray-200 pb-2 mb-4">
|
||||
<div class="flex items-center mb-4 p-4">
|
||||
<span class="font-bold text-gray-800 text-lg">申请次数 {{ totalCount }}次</span>
|
||||
</div>
|
||||
|
||||
<!-- 柱状图 -->
|
||||
<div class="px-4 mb-4">
|
||||
<div class="h-64">
|
||||
<v-chart class="chart-container" :option="chartOption" autoresize />
|
||||
<div class="mt-4">
|
||||
<!-- 申请次数时间分布图表 -->
|
||||
<div class="mb-6">
|
||||
<LTitle title="申请次数时间分布" />
|
||||
<div class="h-64">
|
||||
<v-chart class="chart-container" :option="chartOption" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 特殊时段申请次数（周末/夜间），去掉 Tab，直接展示一张柱状图 -->
|
||||
<div class="mb-2">
|
||||
<LTitle title="特殊时段申请次数（周末 / 夜间）" />
|
||||
<div class="h-64">
|
||||
<v-chart class="chart-container" :option="specialChartOption" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,7 +34,8 @@ import {
|
||||
LegendComponent,
|
||||
GridComponent
|
||||
} from 'echarts/components'
|
||||
import { getApplicationCounts, PERIOD_MAP } from '../utils/dataParser'
|
||||
import LTitle from '@/components/LTitle.vue'
|
||||
import { getApplicationCounts, getSpecialPeriodCounts, PERIOD_MAP } from '../utils/dataParser'
|
||||
|
||||
// 注册ECharts组件
|
||||
use([
|
||||
@@ -47,17 +55,11 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
// 计算总申请次数（12个月）
|
||||
const totalCount = computed(() => {
|
||||
const counts = getApplicationCounts(props.data, 'm12')
|
||||
return counts.total
|
||||
})
|
||||
const periodKeys = ['d7', 'd15', 'm1', 'm3', 'm6', 'm12']
|
||||
const labels = periodKeys.map(key => PERIOD_MAP[key].label)
|
||||
|
||||
// 图表配置
|
||||
// 总申请次数图表配置
|
||||
const chartOption = computed(() => {
|
||||
const periodKeys = ['d7', 'd15', 'm1', 'm3', 'm6', 'm12']
|
||||
const labels = periodKeys.map(key => PERIOD_MAP[key].label)
|
||||
|
||||
const data = periodKeys.map(key => {
|
||||
const counts = getApplicationCounts(props.data, key)
|
||||
return counts.total
|
||||
@@ -69,31 +71,46 @@ const chartOption = computed(() => {
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: (params) => {
|
||||
const param = params[0]
|
||||
return `${param.name}<br/>${param.seriesName}: ${param.value}次`
|
||||
formatter: function (params) {
|
||||
let result = params[0].name + '<br/>'
|
||||
params.forEach(item => {
|
||||
result += `${item.seriesName}: ${item.value} 次<br/>`
|
||||
})
|
||||
return result
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
bottom: 0,
|
||||
top: 20,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: labels,
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#666'
|
||||
fontSize: 10,
|
||||
color: '#6b7280',
|
||||
rotate: 45
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#e5e7eb'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
formatter: '{value}次'
|
||||
fontSize: 11,
|
||||
color: '#6b7280',
|
||||
formatter: '{value} 次'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#f3f4f6'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
@@ -101,15 +118,109 @@ const chartOption = computed(() => {
|
||||
name: '申请次数',
|
||||
type: 'bar',
|
||||
data: data,
|
||||
barWidth: '25%',
|
||||
barMinHeight: 3,
|
||||
itemStyle: {
|
||||
color: '#4A90E2'
|
||||
color: '#2B79EE',
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}次',
|
||||
fontSize: 12,
|
||||
color: '#333'
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: '#1e5bb8'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 特殊时段（周末 / 夜间）图表配置
|
||||
const specialChartOption = computed(() => {
|
||||
const weekendData = periodKeys.map(key => {
|
||||
const s = getSpecialPeriodCounts(props.data, key)
|
||||
return s.weekend || 0
|
||||
})
|
||||
const nightData = periodKeys.map(key => {
|
||||
const s = getSpecialPeriodCounts(props.data, key)
|
||||
return s.night || 0
|
||||
})
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function (params) {
|
||||
let result = params[0].name + '<br/>'
|
||||
params.forEach(item => {
|
||||
result += `${item.seriesName}: ${item.value} 次<br/>`
|
||||
})
|
||||
return result
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['周末申请次数', '夜间申请次数'],
|
||||
top: '5%',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: 0,
|
||||
top: 30,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: labels,
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
color: '#6b7280',
|
||||
rotate: 45
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#e5e7eb'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 11,
|
||||
color: '#6b7280',
|
||||
formatter: '{value} 次'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#f3f4f6'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '周末申请次数',
|
||||
type: 'bar',
|
||||
data: weekendData,
|
||||
barWidth: '25%',
|
||||
barMinHeight: 3,
|
||||
itemStyle: {
|
||||
color: '#2B79EE',
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '夜间申请次数',
|
||||
type: 'bar',
|
||||
data: nightData,
|
||||
barWidth: '25%',
|
||||
barMinHeight: 3,
|
||||
itemStyle: {
|
||||
color: '#F97316',
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -117,9 +228,13 @@ const chartOption = computed(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,22 +2,26 @@
|
||||
<div class="card application-total-section">
|
||||
<div class="rounded-lg border border-gray-200 pb-2 mb-4">
|
||||
<div class="flex items-center mb-4 p-4">
|
||||
<span class="font-bold text-gray-800 text-lg">申请总次数 (银行+非银) {{ totalCount }}次</span>
|
||||
<span class="font-bold text-gray-800">申请总次数 (银行+非银) {{ totalCount }}次</span>
|
||||
</div>
|
||||
|
||||
<!-- Tab切换 -->
|
||||
<div class="px-4 mb-4">
|
||||
<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">
|
||||
<!-- 银行机构 -->
|
||||
<BankInstitutionSection :data="data" :period="period.key" />
|
||||
|
||||
<!-- 非银机构 -->
|
||||
<NBankInstitutionSection :data="data" :period="period.key" />
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
<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">
|
||||
<!-- 银行机构 -->
|
||||
<BankInstitutionSection :data="data" :period="period.key" />
|
||||
|
||||
<!-- 非银机构 -->
|
||||
<NBankInstitutionSection :data="data" :period="period.key" />
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,6 +29,7 @@
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import LTitle from '@/components/LTitle.vue'
|
||||
import { getApplicationCounts, PERIOD_MAP } from '../utils/dataParser'
|
||||
import BankInstitutionSection from './BankInstitutionSection.vue'
|
||||
import NBankInstitutionSection from './NBankInstitutionSection.vue'
|
||||
@@ -55,10 +60,60 @@ const totalCount = computed(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.application-total-section :deep(.van-tabs) {
|
||||
border: unset !important;
|
||||
}
|
||||
|
||||
.application-total-section :deep(.van-tabs__wrap) {
|
||||
height: 32px !important;
|
||||
background-color: transparent !important;
|
||||
padding: 0 !important;
|
||||
border-bottom: 1px solid #DDDDDD !important;
|
||||
}
|
||||
|
||||
.application-total-section :deep(.van-tabs__nav) {
|
||||
background-color: transparent !important;
|
||||
gap: 0 !important;
|
||||
height: 32px !important;
|
||||
border: unset !important;
|
||||
}
|
||||
|
||||
.application-total-section :deep(.van-tabs__nav--card) {
|
||||
border: unset !important;
|
||||
}
|
||||
|
||||
.application-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;
|
||||
}
|
||||
|
||||
.application-total-section :deep(.van-tab--card) {
|
||||
color: #999999 !important;
|
||||
border-right: unset !important;
|
||||
background-color: transparent !important;
|
||||
border-radius: unset !important;
|
||||
}
|
||||
|
||||
.application-total-section :deep(.van-tab--active) {
|
||||
color: var(--van-theme-primary) !important;
|
||||
background-color: unset !important;
|
||||
}
|
||||
|
||||
.application-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>
|
||||
|
||||
|
||||
|
||||
@@ -1,23 +1,19 @@
|
||||
<template>
|
||||
<div class="bank-institution-section mb-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="font-bold text-gray-800">银行机构 {{ bankTotal }}次</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 { getBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser'
|
||||
|
||||
// 注册ECharts组件
|
||||
@@ -59,6 +56,18 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
// 颜色映射表（与图表保持一致）
|
||||
const COLORS = [
|
||||
'#2B79EE',
|
||||
'#61D2F4',
|
||||
'#34D399',
|
||||
'#FBBF24',
|
||||
'#F97316',
|
||||
'#EF4444',
|
||||
'#A855F7',
|
||||
'#6B7280',
|
||||
]
|
||||
|
||||
// 获取银行机构申请详情
|
||||
const bankDetails = computed(() => getBankApplicationDetails(props.data, props.period))
|
||||
|
||||
@@ -68,26 +77,25 @@ const bankTotal = computed(() => {
|
||||
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)
|
||||
.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>
|
||||
.bank-institution-section {
|
||||
background: #f9fafb;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -1,23 +1,19 @@
|
||||
<template>
|
||||
<div class="bank-org-section mb-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="font-bold text-gray-800">银行机构 {{ bankTotal }}家</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 { getBankOrgDetails, FIELD_LABELS } from '../utils/dataParser'
|
||||
|
||||
// 注册ECharts组件
|
||||
@@ -59,6 +56,18 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
// 颜色映射表（与图表保持一致）
|
||||
const COLORS = [
|
||||
'#2B79EE',
|
||||
'#61D2F4',
|
||||
'#34D399',
|
||||
'#FBBF24',
|
||||
'#F97316',
|
||||
'#EF4444',
|
||||
'#A855F7',
|
||||
'#6B7280',
|
||||
]
|
||||
|
||||
// 获取银行机构数详情
|
||||
const bankOrgs = computed(() => getBankOrgDetails(props.data, props.period))
|
||||
|
||||
@@ -68,26 +77,25 @@ const bankTotal = computed(() => {
|
||||
return Object.values(orgs).reduce((sum, val) => sum + (val || 0), 0)
|
||||
})
|
||||
|
||||
// 详细列表
|
||||
// 详细列表（包含所有项，包含 0 家）
|
||||
const detailList = computed(() => {
|
||||
const orgs = bankOrgs.value
|
||||
const labels = FIELD_LABELS.bank
|
||||
|
||||
|
||||
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>
|
||||
.bank-org-section {
|
||||
background: #f9fafb;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
<template>
|
||||
<div class="card institution-total-section">
|
||||
<div class="rounded-lg border border-gray-200 pb-2 mb-4">
|
||||
<div class="flex items-center mb-4 p-4">
|
||||
<span class="font-bold text-gray-800 text-lg">申请机构总数 (银行+非银) {{ totalCount }}家</span>
|
||||
</div>
|
||||
|
||||
<!-- Tab切换 -->
|
||||
<div class="px-4 mb-4">
|
||||
<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 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>
|
||||
@@ -25,6 +26,7 @@
|
||||
|
||||
<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'
|
||||
@@ -58,10 +60,60 @@ const totalCount = computed(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
@@ -1,23 +1,19 @@
|
||||
<template>
|
||||
<div class="nbank-institution-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 { getNBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser'
|
||||
|
||||
// 注册ECharts组件
|
||||
@@ -59,6 +56,18 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
// 颜色映射表（与图表保持一致）
|
||||
const COLORS = [
|
||||
'#2B79EE',
|
||||
'#61D2F4',
|
||||
'#34D399',
|
||||
'#FBBF24',
|
||||
'#F97316',
|
||||
'#EF4444',
|
||||
'#A855F7',
|
||||
'#6B7280',
|
||||
]
|
||||
|
||||
// 获取非银机构申请详情
|
||||
const nbankDetails = computed(() => getNBankApplicationDetails(props.data, props.period))
|
||||
|
||||
@@ -68,26 +77,25 @@ const nbankTotal = computed(() => {
|
||||
return Object.values(details).reduce((sum, val) => sum + (val || 0), 0)
|
||||
})
|
||||
|
||||
// 详细列表
|
||||
// 详细列表（包含所有项，包含 0 次）
|
||||
const detailList = computed(() => {
|
||||
const details = nbankDetails.value
|
||||
const labels = FIELD_LABELS.nbank
|
||||
|
||||
|
||||
return Object.entries(details)
|
||||
.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-institution-section {
|
||||
background: #f9fafb;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
|
||||
184
src/ui/JRZQ6F2A/components/ProductTypeDistributionSection.vue
Normal file
184
src/ui/JRZQ6F2A/components/ProductTypeDistributionSection.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="rounded-lg border border-gray-200 pb-2 mb-4">
|
||||
<div class="mt-4">
|
||||
<LTitle title="产品类型申请分布（近12个月）" />
|
||||
<div class="h-64 mb-4">
|
||||
<v-chart class="chart-container" :option="chartOption" autoresize />
|
||||
</div>
|
||||
|
||||
<!-- 详细列表：与图表颜色一致，包含 0 次的类型 -->
|
||||
<div class="space-y-2 px-4 pb-4">
|
||||
<div v-for="item in detailList" :key="item.key" class="flex items-center justify-between 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-[#111827] font-bold">
|
||||
{{ item.value }} 次
|
||||
</span>
|
||||
</div>
|
||||
</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 { BarChart } from 'echarts/charts'
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent
|
||||
} from 'echarts/components'
|
||||
import LTitle from '@/components/LTitle.vue'
|
||||
import { getValue, FIELD_LABELS } from '../utils/dataParser'
|
||||
|
||||
// 注册 ECharts 组件
|
||||
use([
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent
|
||||
])
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
// 近12个月的前缀
|
||||
const PREFIX = 'als_m12'
|
||||
|
||||
// 关注的产品类型 key（字段中的 id_xxx_allnum）
|
||||
const TYPE_KEYS = ['pdl', 'caon', 'rel', 'caoff', 'cooff', 'af', 'coon', 'oth']
|
||||
|
||||
// 颜色映射，与其他组件保持风格一致
|
||||
const COLORS = [
|
||||
'#2B79EE',
|
||||
'#60A5FA',
|
||||
'#34D399',
|
||||
'#FBBF24',
|
||||
'#F97316',
|
||||
'#EF4444',
|
||||
'#A855F7',
|
||||
'#6B7280'
|
||||
]
|
||||
|
||||
// 详细列表（每个产品类型的次数和颜色）
|
||||
const detailList = computed(() => {
|
||||
const v = props.data || {}
|
||||
const labels = FIELD_LABELS.bank || {}
|
||||
|
||||
return TYPE_KEYS.map((key, index) => {
|
||||
const field = `${PREFIX}_id_${key}_allnum`
|
||||
const value = getValue(v[field]) || 0
|
||||
|
||||
return {
|
||||
key,
|
||||
label: labels[key] || key,
|
||||
value,
|
||||
color: COLORS[index % COLORS.length]
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 产品类型分布柱状图
|
||||
const chartOption = computed(() => {
|
||||
const list = detailList.value
|
||||
|
||||
const categories = list.map(item => item.label)
|
||||
const values = list.map(item => item.value)
|
||||
const colors = list.map(item => item.color)
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: params => {
|
||||
const p = params[0]
|
||||
return `${p.name}<br/>申请次数：${p.value} 次`
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 20,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: categories,
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
color: '#6b7280',
|
||||
rotate: 30
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#e5e7eb'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 11,
|
||||
color: '#6b7280',
|
||||
formatter: '{value} 次'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#f3f4f6'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '申请次数',
|
||||
type: 'bar',
|
||||
data: values,
|
||||
barWidth: '35%',
|
||||
barMinHeight: 3,
|
||||
itemStyle: {
|
||||
color: params => colors[params.dataIndex],
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
{
|
||||
"cells": [],
|
||||
"metadata": {
|
||||
"language_info": {
|
||||
"name": "python"
|
||||
}
|
||||
},
|
||||
"nbformat": 4,
|
||||
"nbformat_minor": 2
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="rounded-lg border border-gray-200 p-4 space-y-3">
|
||||
<LTitle title="近期集中申请提示" />
|
||||
|
||||
<div v-if="hasAnyData" class="space-y-2 text-sm text-gray-700">
|
||||
<div class="flex justify-between">
|
||||
<span>最近在银行连续申请次数</span>
|
||||
<span class="font-bold text-[#111827]">{{ bankCons }} 次</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>最近在银行连续申请天数</span>
|
||||
<span class="font-bold text-[#111827]">{{ bankDays }} 天</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>最近在非银连续申请次数</span>
|
||||
<span class="font-bold text-[#111827]">{{ nbankCons }} 次</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>最近在非银连续申请天数</span>
|
||||
<span class="font-bold text-[#111827]">{{ nbankDays }} 天</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>距最近一次在银行机构申请</span>
|
||||
<span class="font-bold text-[#111827]">{{ bankGap }} 天</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>距最近一次在非银机构申请</span>
|
||||
<span class="font-bold text-[#111827]">{{ nbankGap }} 天</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-sm text-gray-400">
|
||||
暂未查询到明显的近期集中申请行为。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import LTitle from '@/components/LTitle.vue'
|
||||
import { getValue } from '../utils/dataParser'
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
|
||||
const bankCons = computed(() => getValue(props.data?.als_lst_id_bank_consnum))
|
||||
const bankDays = computed(() => getValue(props.data?.als_lst_id_bank_csinteday))
|
||||
const nbankCons = computed(() => getValue(props.data?.als_lst_id_nbank_consnum))
|
||||
const nbankDays = computed(() => getValue(props.data?.als_lst_id_nbank_csinteday))
|
||||
|
||||
const bankGap = computed(() => getValue(props.data?.als_lst_id_bank_inteday))
|
||||
const nbankGap = computed(() => getValue(props.data?.als_lst_id_nbank_inteday))
|
||||
|
||||
const hasAnyData = computed(() => {
|
||||
return (
|
||||
(bankCons.value || 0) > 0 ||
|
||||
(bankDays.value || 0) > 0 ||
|
||||
(nbankCons.value || 0) > 0 ||
|
||||
(nbankDays.value || 0) > 0 ||
|
||||
(bankGap.value || 0) > 0 ||
|
||||
(nbankGap.value || 0) > 0
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
72
src/ui/JRZQ6F2A/components/SummaryApplyStats.vue
Normal file
72
src/ui/JRZQ6F2A/components/SummaryApplyStats.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="card rounded-lg border border-gray-200 pb-2 mb-2">
|
||||
<div class="flex items-center mb-4 p-4">
|
||||
<span class="font-bold text-gray-800">借贷意向统计概览</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 px-4 pb-4">
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
class="bg-blue-50 rounded-lg p-3 text-center border border-[#2B79EE1A]"
|
||||
>
|
||||
<div class="text-xl font-bold text-[#111827]">
|
||||
{{ item.value }}
|
||||
<span class="text-xs text-gray-500 ml-1">{{ item.unit }}</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 mt-1">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { getApplicationCounts, getBankOrgDetails, getNBankOrgDetails } from '../utils/dataParser'
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
|
||||
const items = computed(() => {
|
||||
const v = props.data || {}
|
||||
|
||||
// 近12个月申请次数（总/银行/非银）
|
||||
const m12 = getApplicationCounts(v, 'm12')
|
||||
|
||||
// 近12个月申请机构总数（银行+非银）
|
||||
const bankOrgs = getBankOrgDetails(v, 'm12')
|
||||
const nbankOrgs = getNBankOrgDetails(v, 'm12')
|
||||
const bankOrgTotal = Object.values(bankOrgs || {}).reduce((sum, val) => sum + (val || 0), 0)
|
||||
const nbankOrgTotal = Object.values(nbankOrgs || {}).reduce((sum, val) => sum + (val || 0), 0)
|
||||
const orgTotal = bankOrgTotal + nbankOrgTotal
|
||||
|
||||
// 近12个月周末 / 夜间申请次数（银行+非银）
|
||||
const weekendTotal =
|
||||
Number(v.als_m12_id_bank_week_allnum || 0) + Number(v.als_m12_id_nbank_week_allnum || 0)
|
||||
const nightTotal =
|
||||
Number(v.als_m12_id_bank_night_allnum || 0) + Number(v.als_m12_id_nbank_night_allnum || 0)
|
||||
|
||||
return [
|
||||
{ label: '总申请次数', value: m12.total || 0, unit: '次' },
|
||||
{ label: '总申请机构数', value: orgTotal || 0, unit: '家' },
|
||||
{ label: '银行申请次数', value: m12.bank || 0, unit: '次' },
|
||||
{ label: '非银申请次数', value: m12.nbank || 0, unit: '次' },
|
||||
{ label: '夜间申请次数', value: nightTotal || 0, unit: '次' },
|
||||
{ label: '周末申请次数', value: weekendTotal || 0, unit: '次' },
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user