547 lines
15 KiB
Vue
547 lines
15 KiB
Vue
<template>
|
|
<section class="needsStatistics">
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<ai-area-get :instance="instance" v-model="search.areaId" @change="page.current=1,getTableData()"
|
|
:root="user.info.areaId" :clearable="false"/>
|
|
<ai-select v-model="search.organizationId" placeholder="金融机构" clearable :prop="{label:'organizationName'}"
|
|
:action='"/appfinancialorganization/list?id="+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="appfinancingdemand/export" :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('financingDemandStatus', 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,
|
|
},
|
|
computed: {
|
|
...mapState(['user'])
|
|
},
|
|
data() {
|
|
return {
|
|
search: {organizationId: '', name: '', createTimeStart: '', createTimeEnd: '', status: '', areaId: ""},
|
|
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.search.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.search.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.search.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.search.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() {
|
|
let status = this.search.status || 999
|
|
this.instance.post("/appfinancingdemand/list", null, {
|
|
params: {...this.page, ...this.search, status}
|
|
}).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 && this.stuTime.length) {
|
|
this.search.createTimeStart = this.stuTime[0]
|
|
this.search.createTimeEnd = this.stuTime[1]
|
|
}
|
|
this.page.current = 1
|
|
this.getList()
|
|
}
|
|
},
|
|
created() {
|
|
this.search.areaId = this.user.info.areaId
|
|
if (this.user.financeUser && this.user.financeUser.id) { //机构
|
|
this.search.organizationId = this.user.financeUser.organizationId
|
|
this.userOrgId = this.user.financeUser.organizationId
|
|
}
|
|
this.dict.load('financialOrganizationType', 'financialLoanApplyStatus', 'financingDemandStatus').then(() => {
|
|
this.getTableData()
|
|
})
|
|
},
|
|
mounted() {
|
|
|
|
|
|
}
|
|
}
|
|
</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;
|
|
|
|
.AiAreaGet {
|
|
width: 300px;
|
|
}
|
|
|
|
.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;
|
|
p{
|
|
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>
|