389 lines
9.1 KiB
Vue
389 lines
9.1 KiB
Vue
<template>
|
|
<section class="loanSta mar-t16">
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<ai-area-get :instance="instance" v-model="search.areaId" @change="getStaData"
|
|
:root="user.info.areaId" :clearable="false"/>
|
|
<ai-select v-model="search.organizationId" placeholder="金融机构" clearable :prop="{label:'organizationName'}"
|
|
:action='"/appfinancialorganization/list?id="+financeOrgId'
|
|
@change="getStaData" :instance="instance"/>
|
|
</template>
|
|
</ai-search-bar>
|
|
<div class="col-row">
|
|
<div class="item" v-for="(v,label) in overviews" :key="label">
|
|
<p v-text="label"/>
|
|
<h2 v-text="v"/>
|
|
</div>
|
|
</div>
|
|
<div class="chart-flex">
|
|
<ai-card title="申请信用贷款主体占比" class="circle-chart">
|
|
<template #content>
|
|
<div class="cir-flex">
|
|
<div id="circleChart">
|
|
<div class="total-num">
|
|
<h2 v-text="overviews['累计申请笔数(笔)']"/>
|
|
<p>总数</p>
|
|
</div>
|
|
<ai-echart :ops="circleEchart" :data="[{name:'企业融资',value:applyInfo['企业融资']}, {name:'个人融资',value:applyInfo['个人贷款']}]"/>
|
|
</div>
|
|
<div class="cir-text">
|
|
<el-row type="flex" justify="space-between" align="middle" class="info">
|
|
<span class="tips-bg" style="background: #2891FF;"/>
|
|
<p class="fill">企业融资</p>
|
|
<div v-text="applyInfo['企业融资']"/>
|
|
</el-row>
|
|
<el-row type="flex" justify="space-between" align="middle" class="info">
|
|
<span class="tips-bg" style="background: #FFB865;"/>
|
|
<p class="fill">个人融资</p>
|
|
<div v-text="applyInfo['个人贷款']"/>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</ai-card>
|
|
<ai-card title="交易趋势" class="line-chart">
|
|
<template #content>
|
|
<p class="header-title">
|
|
<span class="tips-bg" style="background: #2891FF;"/>申请笔数
|
|
<span class="tips-bg" style="background: #26D52B;"/>放款笔数
|
|
</p>
|
|
<ai-echart :ops="lineEchart" id="lineChart" :data="tradeTrend"/>
|
|
</template>
|
|
</ai-card>
|
|
</div>
|
|
<ai-card title="热门产品TOP10" class="chart-column">
|
|
<template #content>
|
|
<p class="header-title"><span class="tips-bg" style="background: #2891FF;"/>申请笔数</p>
|
|
<ai-echart :ops="columnEchart" id="columnChart" :data="productTop10"/>
|
|
</template>
|
|
</ai-card>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: "loanSta",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
financeOrgId() {
|
|
return this.user.financeUser?.organizationId || ""
|
|
},
|
|
circleEchart() {
|
|
return {
|
|
legend: false,
|
|
color: ['#2891FF', '#FFB865'],
|
|
tooltip: {
|
|
confine: true
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
name: '申请信用贷款主体',
|
|
radius: ['80%', '90%'],
|
|
avoidLabelOverlap: false,
|
|
legend: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: '12',
|
|
}
|
|
},
|
|
}
|
|
]
|
|
}
|
|
},
|
|
lineEchart() {
|
|
return {
|
|
legend: false,
|
|
color: ['#2891FF', '#26D52B'],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
top: '3%',
|
|
left: '3%',
|
|
right: 0,
|
|
bottom: '0%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {type: 'dashed'}
|
|
}
|
|
},
|
|
series: [
|
|
{name: '申请笔数', type: 'line', showSymbol: false},
|
|
{name: '放款笔数', type: 'line', showSymbol: false},
|
|
]
|
|
}
|
|
},
|
|
columnEchart() {
|
|
return {
|
|
legend: false,
|
|
color: ['#2891FF', '#26D52B'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '10%',
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '2%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {type: 'dashed'}
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '申请数量',
|
|
type: 'bar',
|
|
barGap: 0,
|
|
barWidth: 10,
|
|
}]
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
search: {},
|
|
overviews: [],
|
|
productTop10: [],
|
|
tradeTrend: [],
|
|
applyInfo: {}
|
|
}
|
|
},
|
|
methods: {
|
|
getStaData() {
|
|
this.getOverviews()
|
|
this.getProductTop10()
|
|
this.getTradeTrend()
|
|
this.getApply()
|
|
},
|
|
getApply() {
|
|
this.instance.post("/appfinancialloanapply/staticFinancialLoanApplyByMainbody", null, {
|
|
params: {...this.search}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.applyInfo = res.data
|
|
}
|
|
})
|
|
},
|
|
getOverviews() {
|
|
this.instance.post("/appfinancialloanapply/staticFinancialLoanApplyByOrganization", null, {
|
|
params: {...this.search}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.overviews = res.data
|
|
}
|
|
})
|
|
},
|
|
getProductTop10() {
|
|
this.instance.post("/appfinancialloanapply/queryHotFinancialProduct", null, {
|
|
params: {...this.search}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.productTop10 = res.data.map(e => [e.productName, e.applyNumber])
|
|
}
|
|
})
|
|
},
|
|
getTradeTrend() {
|
|
this.instance.post("/appfinancialloanapply/queryFinancialLoanApplyByMonth", null, {
|
|
params: {...this.search}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.tradeTrend = res.data.map(e => [e.month, e.applyNumber, e.auditNumber])
|
|
}
|
|
})
|
|
},
|
|
},
|
|
created() {
|
|
this.getStaData()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.loanSta {
|
|
|
|
.col-row {
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
display: inline-block;
|
|
padding: 16px 24px;
|
|
width: calc(25% - 15px);
|
|
float: left;
|
|
margin: 0 20px 20px 0;
|
|
background: #FFF;
|
|
box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
|
|
p {
|
|
font-size: 16px;
|
|
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
|
font-weight: bold;
|
|
color: #888;
|
|
line-height: 24px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 24px;
|
|
font-family: Arial-BoldMT, Arial;
|
|
font-weight: normal;
|
|
color: #26F;
|
|
line-height: 32px;
|
|
}
|
|
}
|
|
|
|
.item:nth-of-type(4n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
::v-deep.ai-card__body {
|
|
height: max-content;
|
|
}
|
|
|
|
::v-deep .AiAreaGet {
|
|
width: 300px;
|
|
}
|
|
|
|
.chart-flex {
|
|
display: flex;
|
|
height: 280px;
|
|
margin-bottom: 20px;
|
|
|
|
.circle-chart {
|
|
width: 440px;
|
|
margin-right: 20px;
|
|
height: 100%;
|
|
|
|
.cir-flex {
|
|
height: 100%;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
|
|
#circleChart {
|
|
width: calc(100% - 150px);
|
|
height: 174px;
|
|
position: relative;
|
|
|
|
.total-num {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100px;
|
|
text-align: center;
|
|
|
|
& > p {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cir-text {
|
|
width: 150px;
|
|
margin: 56px 0 0 40px;
|
|
|
|
.info {
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
|
|
p {
|
|
width: 100px;
|
|
font-size: 14px;
|
|
font-family: MicrosoftYaHei;
|
|
color: #666;
|
|
line-height: 22px;
|
|
}
|
|
|
|
div {
|
|
width: 50px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.line-chart {
|
|
height: 100%;
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
|
|
#lineChart {
|
|
height: 154px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart-column {
|
|
margin-bottom: 20px;
|
|
height: 320px;
|
|
|
|
#columnChart {
|
|
width: 100%;
|
|
height: 194px;
|
|
}
|
|
}
|
|
|
|
.tips-bg {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.header-title {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 20px;
|
|
font-size: 12px;
|
|
font-family: MicrosoftYaHei;
|
|
color: #333;
|
|
line-height: 20px;
|
|
|
|
.tips-bg:nth-of-type(2n) {
|
|
margin-left: 24px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|