497 lines
14 KiB
Vue
497 lines
14 KiB
Vue
<template>
|
|
<section class="needsStatistics">
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<ai-select v-model="search.organizationId" placeholder="金融机构" clearable :prop="{label:'organizationName'}"
|
|
:action='"/appfinancialorganization/list?organizationId="+userOrgId' @change="page.current=1,getTableData()" :instance="instance"/>
|
|
</template>
|
|
</ai-search-bar>
|
|
<div class="col-row">
|
|
<div class="item" v-for="(v,label) in cloList" :key="label">
|
|
<p v-text="label"/>
|
|
<h2 v-text="v"/>
|
|
</div>
|
|
</div>
|
|
<div class="chart-flex">
|
|
<div class="circle-chart chart-content">
|
|
<div class="title">融资需求发布主体占比</div>
|
|
<div class="cir-flex">
|
|
<div class="total-num">
|
|
<h2>{{applyInfo['总数'] || 0}}</h2>
|
|
<p>总数</p>
|
|
</div>
|
|
<div id="circleChart"></div>
|
|
<div class="cir-text">
|
|
<div class="info">
|
|
<p><span class="tips-bg" style="background: #2891FF;"></span>企业融资</p>
|
|
<div>{{applyInfo['企业融资'] || 0}}</div>
|
|
</div>
|
|
<div class="info">
|
|
<p><span class="tips-bg" style="background: #FFB865;"></span>个人融资</p>
|
|
<div>{{applyInfo['个人融资'] || 0}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="line-chart chart-content">
|
|
<div class="title">交易趋势</div>
|
|
<p class="header-title"><span class="tips-bg" style="background: #2891FF;"></span>申请笔数<span class="tips-bg" style="background: #26D52B;"></span>放款笔数</p>
|
|
<div id="lineChart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-column chart-content">
|
|
<div class="title">机构融资对接量TOP10</div>
|
|
<p class="header-title"><span class="tips-bg" style="background: #2891FF;"></span>申请笔数<span class="tips-bg" style="background: #26D52B;"></span>放款笔数</p>
|
|
<div id="columnChart"></div>
|
|
</div>
|
|
<div class="table-content chart-content">
|
|
<div class="title">交易记录</div>
|
|
<ai-search-bar style="padding:20px 20px 0 20px;">
|
|
<template #left>
|
|
<ai-select v-model="search.status" placeholder="状态" clearable :selectList="$dict.getDict('financingDemandStatus')" @change="getList()"></ai-select>
|
|
<ai-search label="申请时间">
|
|
<el-date-picker size="small" placeholder="请选择" type="daterange"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
style="width: 258px;"
|
|
value-format="yyyy-MM-dd"
|
|
v-model="stuTime"
|
|
@change="changeTime"/>
|
|
</ai-search>
|
|
</template>
|
|
<template #right>
|
|
<el-input size="small" placeholder="请输入居民名称或真实姓名" v-model="search.name" clearable @change="getList()"/>
|
|
<!-- <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"
|
|
@getList="getList" :col-configs="colConfigs" :dict="dict" style="padding:0 20px 20px 20px;">
|
|
<el-table-column slot="options" label="状态" fixed="right" width="100" align="center">
|
|
<template slot-scope="{row}">
|
|
<span :class="`status${row.status}`">{{$dict.getLabel('financialLoanApplyStatus', row.status)}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
import * as echarts from 'echarts'
|
|
|
|
export default {
|
|
name: "needsStatistics",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function,
|
|
areaId: String
|
|
},
|
|
computed: {
|
|
...mapState(['user'])
|
|
},
|
|
data() {
|
|
return {
|
|
search: {organizationId: '', name: '', createTimeStart: '', createTimeEnd: '', status: ''},
|
|
page: {current: 1, total: 10},
|
|
circleChart: null,
|
|
lineChart: null,
|
|
columnChart: null,
|
|
tableData: [],
|
|
colConfigs: [
|
|
// {label: "产品名称", width: '200', prop: "enterpriseName"},
|
|
{label: "联系人", width: '150', prop: "name"},
|
|
{label: "联系方式", width: '150', prop: "phone"},
|
|
// {label: "身份证号", width: '180', prop: "idNumber"},
|
|
{label: "企业主体", width: '200', prop: "enterpriseName"},
|
|
{label: "意向金额(万)", width: '150', prop: "loanAmount"},
|
|
{label: "申请时间", width: '180', prop: "createTime"},
|
|
{label: "客户经理", width: '200', prop: "auditUserName"},
|
|
{label: "贷款银行", width: '200', prop: "organizationName"},
|
|
{label: "放款金额(万)", width: '200', prop: "auditAmount"},
|
|
// {label: "机构类型", width: '200', prop: "organizationType", dict:'financialOrganizationType'},
|
|
{slot: "options"}
|
|
],
|
|
cloList: [],
|
|
applyInfo: {},
|
|
demandInfo: {},
|
|
staticInfo: {},
|
|
stuTime: [],
|
|
userOrgId: ''
|
|
}
|
|
},
|
|
methods: {
|
|
getTableData() {
|
|
this.instance.post(`/appfinancingdemand/staticFinancialDemandByOrganization?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
|
|
if (res?.data) {
|
|
if(res.data['对接成功率']) {
|
|
res.data['对接成功率'] = Number( res.data['对接成功率'] * 100) + '%'
|
|
}
|
|
this.cloList = res.data
|
|
}
|
|
})
|
|
this.instance.post(`/appfinancingdemand/staticFinancialDemandByApplyType?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
|
|
if (res?.data) {
|
|
this.applyInfo = res.data
|
|
this.circleChartInit(this.applyInfo)
|
|
}
|
|
})
|
|
this.instance.post(`/appfinancingdemand/staticFinancialDemandByHot?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
|
|
if (res?.data) {
|
|
var nameList = [], applyList = [], auditList = []
|
|
res.data.map((item) => {
|
|
nameList.push(item.organizationName)
|
|
applyList.push(item.applyNumber)
|
|
auditList.push(item.auditNumber)
|
|
})
|
|
this.columnChartInit(nameList, applyList, auditList)
|
|
}
|
|
})
|
|
this.instance.post(`/appfinancingdemand/staticFinancialDemandByMonth?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
|
|
if (res?.data) {
|
|
var monthList = [], applyList = [], auditList = []
|
|
res.data.map((item) => {
|
|
monthList.push(item.month)
|
|
applyList.push(item.applyNumber)
|
|
auditList.push(item.auditNumber)
|
|
})
|
|
this.lineChartInit(monthList, applyList, auditList)
|
|
}
|
|
})
|
|
this.getList()
|
|
},
|
|
getList() {
|
|
this.instance.post("/appfinancingdemand/list", null, {
|
|
params: {...this.page, ...this.search}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.tableData = res.data?.records
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
circleChartInit(data) {
|
|
this.circleChart = echarts.init(document.getElementById('circleChart'))
|
|
if (!this.circleChart) {
|
|
return this.circleChart.dispose();
|
|
}
|
|
var option = {
|
|
color: ['#2891FF', '#FFB865'],
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['80%', '90%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: '12',
|
|
}
|
|
},
|
|
data: [
|
|
{ value: data['企业融资']},
|
|
{ value: data['个人融资']},
|
|
]
|
|
}
|
|
]
|
|
|
|
};
|
|
|
|
this.circleChart.setOption(option)
|
|
},
|
|
lineChartInit(monthList, applyList, auditList) {
|
|
this.lineChart = echarts.init(document.getElementById('lineChart'))
|
|
if (!this.lineChart) {
|
|
return this.lineChart.dispose();
|
|
}
|
|
var option = option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
top: '3%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '0%',
|
|
containLabel: true
|
|
},
|
|
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: monthList
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '申请笔数',
|
|
type: 'line',
|
|
data: applyList,
|
|
itemStyle: {
|
|
normal: {
|
|
lineStyle:{
|
|
color:'#2891FF'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '放款笔数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: auditList,
|
|
itemStyle: {
|
|
normal: {
|
|
lineStyle:{
|
|
color:'#26D52B'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
]
|
|
};
|
|
this.lineChart.setOption(option)
|
|
},
|
|
columnChartInit(nameList, applyList, auditList) {
|
|
this.columnChart = echarts.init(document.getElementById('columnChart'))
|
|
if (!this.columnChart) {
|
|
return this.columnChart.dispose();
|
|
}
|
|
var option = {
|
|
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
|
|
},
|
|
data: nameList
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
series: [{
|
|
name: '申请数量',
|
|
type: 'bar',
|
|
barGap: 0,
|
|
data: applyList,
|
|
barWidth: 10,
|
|
},
|
|
{
|
|
name: '放款数量',
|
|
type: 'bar',
|
|
barGap: 0,
|
|
data: auditList,
|
|
barWidth: 10,
|
|
}]
|
|
};
|
|
|
|
this.columnChart.setOption(option)
|
|
},
|
|
changeTime() {
|
|
this.search.createTimeStart = ''
|
|
this.search.createTimeEnd = ''
|
|
if(this.stuTime.length) {
|
|
this.search.createTimeStart = this.stuTime[0]
|
|
this.search.createTimeEnd = this.stuTime[1]
|
|
}
|
|
this.page.current = 1
|
|
this.getList()
|
|
}
|
|
},
|
|
created() {
|
|
this.dict.load('financialOrganizationType', 'financialLoanApplyStatus', 'financingDemandStatus')
|
|
},
|
|
mounted() {
|
|
if(this.user.financeUser && this.user.financeUser.id) { //机构
|
|
this.search.organizationId = this.user.financeUser.organizationId
|
|
this.userOrgId = this.user.financeUser.organizationId
|
|
}
|
|
this.getTableData()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .ai-list .ai-list__content--right-wrapper{
|
|
background: none!important;
|
|
box-shadow: none!important;
|
|
}
|
|
.needsStatistics {
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
.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;
|
|
}
|
|
}
|
|
.chart-flex{
|
|
display: flex;
|
|
height: 280px;
|
|
margin-bottom: 20px;
|
|
.circle-chart{
|
|
width: 440px;
|
|
margin-right: 20px;
|
|
height: 100%;
|
|
.cir-flex{
|
|
height: calc(100% - 56px);
|
|
display: flex;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.total-num{
|
|
position: absolute;
|
|
top: 90px;
|
|
left: 70px;
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
#circleChart{
|
|
width: calc(100% - 150px);
|
|
height: 100%;
|
|
}
|
|
.cir-text{
|
|
width: 150px;
|
|
margin: 56px 0 0 40px;
|
|
.info{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
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%;
|
|
width: calc(100% - 460px);
|
|
#lineChart{
|
|
height: calc(100% - 100px);
|
|
padding-right: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
.chart-column{
|
|
margin-bottom: 20px;
|
|
height: 320px;
|
|
#columnChart{
|
|
width: 100%;
|
|
height: 220px;
|
|
}
|
|
}
|
|
.table-content{
|
|
width: 100%;
|
|
.title{
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.chart-content{
|
|
background: #FFF;
|
|
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
|
border-radius: 4px;
|
|
}
|
|
.title{
|
|
line-height: 56px;
|
|
font-size: 16px;
|
|
font-family: MicrosoftYaHeiSemibold;
|
|
color: #222;
|
|
padding-left: 16px;
|
|
}
|
|
.status0{
|
|
color: #f82;
|
|
}
|
|
.status1{
|
|
color: #2EA222;
|
|
}
|
|
.status2{
|
|
color: #f46;
|
|
}
|
|
}
|
|
</style>
|