362 lines
9.5 KiB
Vue
362 lines
9.5 KiB
Vue
|
<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>
|