417 lines
11 KiB
Vue
417 lines
11 KiB
Vue
<template>
|
|
<section class="loanSta mar-t16">
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<ai-select v-model="search.organizationId" placeholder="金融机构" clearable :prop="{label:'organizationName'}"
|
|
action="/appfinancialorganization/list" @change="page.current=1,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:overviews['累计申请笔数']}]"/>
|
|
</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="overviews['累计申请笔数']"/>
|
|
</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>
|
|
<ai-card title="交易记录">
|
|
<template #content>
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<ai-select v-model="search.organizationType" placeholder="机构类型" clearable
|
|
:selectList="dict.getDict('financialOrganizationType')" @change="page.current=1,getTableData()"/>
|
|
<ai-search label="申请时间">
|
|
<el-date-picker size="small" placeholder="请选择" type="daterange"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期" v-model="search.applyTime"
|
|
:default-time="['00:00:00','23:59:59']" value-format="yyyy-MM-dd"
|
|
@change="handleSearchTime"/>
|
|
</ai-search>
|
|
</template>
|
|
<template #right>
|
|
<el-input size="small" placeholder="搜索产品名称、身份证、企业、贷款机构" v-model="search.enterpriseName" clearable
|
|
@change="page.current=1,getTableData()"/>
|
|
<ai-download :instance="instance" url="/app/appcommunityhouseresident/listExport" :params="search"
|
|
fileName="人口信息">
|
|
<el-button icon="iconfont iconExported">导出</el-button>
|
|
</ai-download>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
|
|
@getTableData="getTableData" :col-configs="colConfigs" :dict="dict"/>
|
|
</template>
|
|
</ai-card>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: "loanSta",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
circleEchart() {
|
|
return {
|
|
legend: false,
|
|
color: ['#2891FF', '#FFB865'],
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
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: {status: 1},
|
|
page: {current: 1, total: 10},
|
|
tableData: [],
|
|
overviews: [],
|
|
productTop10: [],
|
|
tradeTrend: [],
|
|
colConfigs: [
|
|
{label: "产品名称", width: '200', prop: "productName"},
|
|
{label: "联系人", width: '100', prop: "name"},
|
|
{label: "联系方式", width: '140', prop: "phone"},
|
|
{label: "身份证号", render: (h, {row}) => h('p', this.idCardNoUtil.hideId(row.idNumber)), width: 160},
|
|
{label: "企业主体", width: '200', prop: "enterpriseName"},
|
|
{label: "贷款金额(万)", width: '120', prop: "loanAmount"},
|
|
{label: "申请时间", prop: "createTime", width: 160},
|
|
{label: "贷款机构", prop: "organizationName"},
|
|
{label: "机构类型", prop: "organizationType", dict: "financialOrganizationType"},
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
getStaData() {
|
|
this.getTableData()
|
|
this.getOverviews()
|
|
this.getProductTop10()
|
|
this.getTradeTrend()
|
|
},
|
|
getTableData() {
|
|
this.instance.post("/appfinancialloanapply/list", null, {
|
|
params: {...this.page, ...this.search}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.tableData = res.data?.records
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
getOverviews() {
|
|
let {organizationId} = this.search
|
|
this.instance.post("/appfinancialloanapply/staticFinancialLoanApplyByOrganization", null, {
|
|
params: {organizationId}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.overviews = res.data
|
|
}
|
|
})
|
|
},
|
|
getProductTop10() {
|
|
let {organizationId} = this.search
|
|
this.instance.post("/appfinancialloanapply/queryHotFinancialProduct", null, {
|
|
params: {organizationId}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.productTop10 = res.data.map(e => [e.productName, e.applyNumber])
|
|
}
|
|
})
|
|
},
|
|
getTradeTrend() {
|
|
let {organizationId} = this.search
|
|
this.instance.post("/appfinancialloanapply/queryFinancialLoanApplyByMonth", null, {
|
|
params: {organizationId}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.tradeTrend = res.data.map(e => [e.month, e.applyNumber, e.auditNumber])
|
|
}
|
|
})
|
|
},
|
|
handleSearchTime(v) {
|
|
this.page.current = 1
|
|
this.search.applyStartDate = v?.[0].substring(0, 10)
|
|
this.search.applyEndDate = v?.[1].substring(0, 10)
|
|
this.getTableData()
|
|
}
|
|
},
|
|
created() {
|
|
this.getStaData()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.loanSta {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
|
|
.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: 0px 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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>
|