v1.0.0
This commit is contained in:
361
src/ui/CBankLoanApplication.vue
Normal file
361
src/ui/CBankLoanApplication.vue
Normal file
@@ -0,0 +1,361 @@
|
||||
<script setup>
|
||||
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const { data } = props
|
||||
const tableData = ref([
|
||||
])
|
||||
const dateTableData = ref([
|
||||
])
|
||||
const options = ref([
|
||||
{ label: '近7日', value: 0 },
|
||||
{ label: '近1月', value: 1 },
|
||||
{ label: '近3月', value: 2 },
|
||||
{ label: '近6月', value: 3 },
|
||||
{ label: '近1年', value: 4 },
|
||||
])
|
||||
const dateOptions = ref([
|
||||
{ label: '近7日', value: 0 },
|
||||
{ label: '近1月', value: 1 },
|
||||
{ label: '近3月', value: 2 },
|
||||
{ label: '近6月', value: 3 },
|
||||
{ label: '近1年', value: 4 },
|
||||
])
|
||||
|
||||
const selectedOption = ref(0)
|
||||
const dateSelectedOption = ref(0)
|
||||
const chartData = ref({})
|
||||
|
||||
const opts = ref({
|
||||
|
||||
color: ['#FAC858', '#EE6666', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
|
||||
padding: [15, 15, 0, 5],
|
||||
enableScroll: false,
|
||||
legend: {},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
},
|
||||
yAxis: {
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: 'group',
|
||||
width: 15,
|
||||
activeBgColor: '#000000',
|
||||
activeBgOpacity: 0.08,
|
||||
linearType: 'custom',
|
||||
seriesGap: 5,
|
||||
linearOpacity: 0.5,
|
||||
barBorderCircle: true,
|
||||
customColor: [
|
||||
'#FA7D8D',
|
||||
'#EB88E2',
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
)
|
||||
onMounted(() => {
|
||||
const seriesData = calculateTotalStats(data)
|
||||
tableData.value = typeTotalStats(data)
|
||||
dateTableData.value = dateTotalStats(data)
|
||||
const res = {
|
||||
categories: ['近7日', '近1月', '近3月', '近6月', '近1年'],
|
||||
series: [
|
||||
{
|
||||
name: '申请次数',
|
||||
data: seriesData.totalApplyCount,
|
||||
},
|
||||
{
|
||||
name: '申请的机构数',
|
||||
data: seriesData.totalOrgCount,
|
||||
},
|
||||
],
|
||||
}
|
||||
chartData.value = JSON.parse(JSON.stringify(res))
|
||||
},
|
||||
)
|
||||
function calculateTotalStats(data) {
|
||||
// 时间维度映射
|
||||
const timeDimensions = {
|
||||
d7: '近7日',
|
||||
m1: '近1月',
|
||||
m3: '近3月',
|
||||
m6: '近6月',
|
||||
m12: '近1年',
|
||||
}
|
||||
|
||||
// 机构类型
|
||||
const orgTypes = ['bank', 'nbank']
|
||||
|
||||
// 初始化结果数组
|
||||
const result = {
|
||||
totalApplyCount: [],
|
||||
totalOrgCount: [],
|
||||
}
|
||||
|
||||
// 遍历每个时间维度
|
||||
for (const timeKey of Object.keys(timeDimensions)) {
|
||||
let totalApplyCount = 0 // 每个时间维度的总申请次数
|
||||
let totalOrgCount = 0 // 每个时间维度的总机构数
|
||||
|
||||
// 遍历每种机构类型并累加
|
||||
orgTypes.forEach((orgType) => {
|
||||
// 构造参数名
|
||||
const applyCountKey = `als_${timeKey}_id_${orgType}_allnum`
|
||||
const orgCountKey = `als_${timeKey}_id_${orgType}_orgnum`
|
||||
// 检查 data 中是否存在此参数，如果不存在则跳过
|
||||
if (data[applyCountKey] !== undefined && data[orgCountKey] !== undefined) {
|
||||
// 累加数值（如果值为 undefined 或 null 则转换为 0）
|
||||
totalApplyCount += Number(data[applyCountKey] || 0)
|
||||
totalOrgCount += Number(data[orgCountKey] || 0)
|
||||
}
|
||||
})
|
||||
|
||||
// 将每个时间维度的总申请次数和总机构数添加到结果数组中
|
||||
result.totalApplyCount.push(totalApplyCount)
|
||||
result.totalOrgCount.push(totalOrgCount)
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
function typeTotalStats(data) {
|
||||
// 时间维度映射
|
||||
const timeDimensions = {
|
||||
d7: '近7日',
|
||||
m1: '近1月',
|
||||
m3: '近3月',
|
||||
m6: '近6月',
|
||||
m12: '近1年',
|
||||
}
|
||||
|
||||
// 定义机构类型和对应的映射表
|
||||
const orgMappings = {
|
||||
bank: '银行借贷',
|
||||
mc: '小额贷款',
|
||||
cf: '消费分期',
|
||||
ca: '借款分期',
|
||||
rel: '信用卡',
|
||||
af: '汽车金融',
|
||||
other: '其他',
|
||||
}
|
||||
const tableGroup = {
|
||||
bank: [
|
||||
{ code: 'bank', name: '银行机构' },
|
||||
],
|
||||
mc: [
|
||||
{ code: 'nbank_mc', name: '小贷机构' },
|
||||
// { code: 'nbank_nsloan', name: '持牌网络小贷' },
|
||||
// { code: 'nbank_sloan', name: '持牌小贷机构' },
|
||||
// { code: 'pdl', name: '线上小额现金贷' },
|
||||
],
|
||||
cf: [
|
||||
{ code: 'nbank_cf', name: '消费类分期机构' },
|
||||
// { code: 'coon', name: '线上消费分期' },
|
||||
// { code: 'cooff', name: '线下消费分期' },
|
||||
],
|
||||
ca: [
|
||||
{ code: 'nbank_ca', name: '现金类分期机构' },
|
||||
// { code: 'caon', name: '线上现金分期' },
|
||||
// { code: 'caoff', name: '线下现金分期' },
|
||||
{ code: 'nbank_com', name: '代偿类分期机构' },
|
||||
],
|
||||
rel: [
|
||||
{ code: 'rel', name: '信用卡（类信用卡）' },
|
||||
],
|
||||
af: [
|
||||
{ code: 'af', name: '汽车金融' },
|
||||
// { code: 'nbank_autofin', name: '持牌汽车金融机构' },
|
||||
],
|
||||
other: [
|
||||
{ code: 'nbank_p2p', name: '改制机构' },
|
||||
{ code: 'nbank_cons', name: '持牌消费金融机构' },
|
||||
{ code: 'nbank_finlea', name: '持牌融资租赁机构' },
|
||||
{ code: 'nbank_oth', name: '申请其他' },
|
||||
{ code: 'nbank_else', name: '其他申请' },
|
||||
// { code: 'oth', name: '申请其他' },
|
||||
// { code: 'else', name: '其他申请' },
|
||||
],
|
||||
}
|
||||
|
||||
// 初始化结果数组
|
||||
const result = []
|
||||
|
||||
// 遍历每个时间维度
|
||||
for (const timeKey of Object.keys(timeDimensions)) {
|
||||
const tableDataEntry = []
|
||||
|
||||
// 遍历每种机构类型并累加
|
||||
Object.keys(orgMappings).forEach((groupOrgType) => {
|
||||
const orgTypeArray = tableGroup[groupOrgType]
|
||||
|
||||
let totalApplyCount = 0
|
||||
let totalOrgCount = 0
|
||||
for (const i of orgTypeArray) {
|
||||
const applyCountKey = `als_${timeKey}_id_${i.code}_allnum`
|
||||
const orgCountKey = `als_${timeKey}_id_${i.code}_orgnum`
|
||||
totalApplyCount = totalApplyCount + Number(data[applyCountKey] || 0)
|
||||
totalOrgCount = totalOrgCount + Number(data[orgCountKey] || 0)
|
||||
}
|
||||
// 添加到 tableData
|
||||
tableDataEntry.push({
|
||||
label: orgMappings[groupOrgType],
|
||||
name: groupOrgType,
|
||||
totalApplyCount,
|
||||
totalOrgCount,
|
||||
})
|
||||
})
|
||||
|
||||
result.push(tableDataEntry)
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
function dateTotalStats(data) {
|
||||
// 时间维度映射
|
||||
const timeDimensions = {
|
||||
d7: '近7日',
|
||||
m1: '近1月',
|
||||
m3: '近3月',
|
||||
m6: '近6月',
|
||||
m12: '近1年',
|
||||
}
|
||||
|
||||
// 定义机构类型和对应的映射表
|
||||
const orgMappings = {
|
||||
week: '周末',
|
||||
night: '夜间',
|
||||
}
|
||||
const tableGroup = {
|
||||
week: [
|
||||
{ code: 'bank_week', name: '周末银行' },
|
||||
{ code: 'nbank_week', name: '周末非银' },
|
||||
],
|
||||
night: [
|
||||
{ code: 'bank_night', name: '夜间银行' },
|
||||
{ code: 'nbank_night', name: '夜间非银' },
|
||||
],
|
||||
}
|
||||
|
||||
// 初始化结果数组
|
||||
const result = []
|
||||
|
||||
// 遍历每个时间维度
|
||||
for (const timeKey of Object.keys(timeDimensions)) {
|
||||
const tableDataEntry = []
|
||||
|
||||
// 遍历每种机构类型并累加
|
||||
Object.keys(orgMappings).forEach((groupOrgType) => {
|
||||
const orgTypeArray = tableGroup[groupOrgType]
|
||||
|
||||
let totalApplyCount = 0
|
||||
let totalOrgCount = 0
|
||||
for (const i of orgTypeArray) {
|
||||
const applyCountKey = `als_${timeKey}_id_${i.code}_allnum`
|
||||
const orgCountKey = `als_${timeKey}_id_${i.code}_orgnum`
|
||||
totalApplyCount = totalApplyCount + Number(data[applyCountKey] || 0)
|
||||
totalOrgCount = totalOrgCount + Number(data[orgCountKey] || 0)
|
||||
}
|
||||
// 添加到 tableData
|
||||
tableDataEntry.push({
|
||||
label: orgMappings[groupOrgType],
|
||||
name: groupOrgType,
|
||||
totalApplyCount,
|
||||
totalOrgCount,
|
||||
})
|
||||
})
|
||||
|
||||
result.push(tableDataEntry)
|
||||
}
|
||||
console.log('date result', result)
|
||||
return result
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<!-- 申请次数 -->
|
||||
<LTitle title="申请次数" type="blue-green" />
|
||||
<QiunDataCharts
|
||||
type="column"
|
||||
:opts="opts"
|
||||
:chart-data="chartData"
|
||||
/>
|
||||
|
||||
<!-- 银行类别申请记录 -->
|
||||
<LTitle title="申请类别" type="blue-green" />
|
||||
<LButtonGroup v-model="selectedOption" :options="options" />
|
||||
<LTable :data="tableData[selectedOption]" type="blue-green">
|
||||
<template #header>
|
||||
<th class="border px-4 py-2">
|
||||
借贷类别
|
||||
</th>
|
||||
<th class="border px-4 py-2">
|
||||
申请次数
|
||||
</th>
|
||||
<th class="border px-4 py-2">
|
||||
申请的机构数
|
||||
</th>
|
||||
</template>
|
||||
|
||||
<template #default="{ row }">
|
||||
<td class="border px-4 py-2">
|
||||
{{ row.label }}
|
||||
</td>
|
||||
<td class="border px-4 py-2">
|
||||
{{ row.totalApplyCount }}
|
||||
</td>
|
||||
<td class="border px-4 py-2">
|
||||
{{ row.totalOrgCount }}
|
||||
</td>
|
||||
</template>
|
||||
</LTable>
|
||||
|
||||
<!-- 特殊时段申请记录 -->
|
||||
<LTitle title="特殊时段申请记录" type="blue-green" />
|
||||
<LButtonGroup v-model="dateSelectedOption" :options="dateOptions" />
|
||||
<LTable :data="dateTableData[dateSelectedOption]" type="blue-green">
|
||||
<!-- 表头 -->
|
||||
<template #header>
|
||||
<th class="border px-4 py-2">
|
||||
时段
|
||||
</th>
|
||||
<th class="border px-4 py-2">
|
||||
申请次数
|
||||
</th>
|
||||
<th class="border px-4 py-2">
|
||||
申请的机构数
|
||||
</th>
|
||||
</template>
|
||||
|
||||
<!-- 渲染表格内容 -->
|
||||
<template #default="{ row }">
|
||||
<td class="border px-4 py-2">
|
||||
{{ row.label }}
|
||||
</td>
|
||||
<td class="border px-4 py-2">
|
||||
{{ row.totalApplyCount }}
|
||||
</td>
|
||||
<td class="border px-4 py-2">
|
||||
{{ row.totalOrgCount }}
|
||||
</td>
|
||||
</template>
|
||||
</LTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user