kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

统计地区筛选条件

Browse Source
This commit is contained in:
aixianling
2022-04-11 11:12:34 +08:00
parent cf84815c54
commit 7b949beaac
1 changed files with 116 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
project/xiushan/apps/financing/AppGrabLog/needsStatistics.vue
View File

@@ -2,8 +2,11 @@
<section class="needsStatistics"> <section class="needsStatistics">
<ai-search-bar> <ai-search-bar>
<template #left> <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'}" <ai-select v-model="search.organizationId" placeholder="金融机构" clearable :prop="{label:'organizationName'}"
:action='"/appfinancialorganization/list?organizationId="+userOrgId' @change="page.current=1,getTableData()" :instance="instance"/> :action='"/appfinancialorganization/list?organizationId="+userOrgId'
@change="page.current=1,getTableData()" :instance="instance"/>
</template> </template>
</ai-search-bar> </ai-search-bar>
<div class="col-row"> <div class="col-row">
@@ -17,46 +20,51 @@
<div class="title">融资需求发布主体占比</div> <div class="title">融资需求发布主体占比</div>
<div class="cir-flex"> <div class="cir-flex">
<div class="total-num"> <div class="total-num">
<h2>{{applyInfo['总数'] || 0}}</h2> <h2>{{ applyInfo['总数'] || 0 }}</h2>
<p>总数</p> <p>总数</p>
</div> </div>
<div id="circleChart"></div> <div id="circleChart"></div>
<div class="cir-text"> <div class="cir-text">
<div class="info"> <div class="info">
<p><span class="tips-bg" style="background: #2891FF;"></span>企业融资</p> <p><span class="tips-bg" style="background: #2891FF;"></span>企业融资</p>
<div>{{applyInfo['企业融资'] || 0}}</div> <div>{{ applyInfo['企业融资'] || 0 }}</div>
</div> </div>
<div class="info"> <div class="info">
<p><span class="tips-bg" style="background: #FFB865;"></span>个人融资</p> <p><span class="tips-bg" style="background: #FFB865;"></span>个人融资</p>
<div>{{applyInfo['个人融资'] || 0}}</div> <div>{{ applyInfo['个人融资'] || 0 }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="line-chart chart-content"> <div class="line-chart chart-content">
<div class="title">交易趋势</div> <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> <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 id="lineChart"></div>
</div> </div>
</div> </div>
<div class="chart-column chart-content"> <div class="chart-column chart-content">
<div class="title">机构融资对接量TOP10</div> <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> <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 id="columnChart"></div>
</div> </div>
<div class="table-content chart-content"> <div class="table-content chart-content">
<div class="title">交易记录</div> <div class="title">交易记录</div>
<ai-search-bar style="padding:20px 20px 0 20px;"> <ai-search-bar style="padding:20px 20px 0 20px;">
<template #left> <template #left>
<ai-select v-model="search.status" placeholder="状态" clearable :selectList="$dict.getDict('financingDemandStatus')" @change="getList()"></ai-select> <ai-select v-model="search.status" placeholder="状态" clearable
<ai-search label="申请时间"> :selectList="$dict.getDict('financingDemandStatus')" @change="getList()"></ai-select>
<ai-search label="申请时间">
<el-date-picker size="small" placeholder="请选择" type="daterange" <el-date-picker size="small" placeholder="请选择" type="daterange"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
style="width: 258px;" style="width: 258px;"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
v-model="stuTime" v-model="stuTime"
@change="changeTime"/> @change="changeTime"/>
</ai-search> </ai-search>
</template> </template>
<template #right> <template #right>
@@ -71,7 +79,7 @@
@getList="getList" :col-configs="colConfigs" :dict="dict" style="padding:0 20px 20px 20px;"> @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"> <el-table-column slot="options" label="状态" fixed="right" width="100" align="center">
<template slot-scope="{row}"> <template slot-scope="{row}">
<span :class="`status${row.status}`">{{$dict.getLabel('financialLoanApplyStatus', row.status)}}</span> <span :class="`status${row.status}`">{{ $dict.getLabel('financialLoanApplyStatus', row.status) }}</span>
</template> </template>
</el-table-column> </el-table-column>
</ai-table> </ai-table>
@@ -89,14 +97,13 @@ export default {
instance: Function, instance: Function,
dict: Object, dict: Object,
permissions: Function, permissions: Function,
areaId: String
}, },
computed: { computed: {
...mapState(['user']) ...mapState(['user'])
}, },
data() { data() {
return { return {
search: {organizationId: '', name: '', createTimeStart: '', createTimeEnd: '', status: ''}, search: {organizationId: '', name: '', createTimeStart: '', createTimeEnd: '', status: '', areaId: ""},
page: {current: 1, total: 10}, page: {current: 1, total: 10},
circleChart: null, circleChart: null,
lineChart: null, lineChart: null,
@@ -126,21 +133,21 @@ export default {
}, },
methods: { methods: {
getTableData() { getTableData() {
this.instance.post(`/appfinancingdemand/staticFinancialDemandByOrganization?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => { this.instance.post(`/appfinancingdemand/staticFinancialDemandByOrganization?areaId=${this.search.areaId}&organizationId=${this.search.organizationId}`).then(res => {
if (res?.data) { if (res?.data) {
if(res.data['对接成功率']) { if (res.data['对接成功率']) {
res.data['对接成功率'] = Number( res.data['对接成功率'] * 100) + '%' res.data['对接成功率'] = Number(res.data['对接成功率'] * 100) + '%'
} }
this.cloList = res.data this.cloList = res.data
} }
}) })
this.instance.post(`/appfinancingdemand/staticFinancialDemandByApplyType?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => { this.instance.post(`/appfinancingdemand/staticFinancialDemandByApplyType?areaId=${this.search.areaId}&organizationId=${this.search.organizationId}`).then(res => {
if (res?.data) { if (res?.data) {
this.applyInfo = res.data this.applyInfo = res.data
this.circleChartInit(this.applyInfo) this.circleChartInit(this.applyInfo)
} }
}) })
this.instance.post(`/appfinancingdemand/staticFinancialDemandByHot?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => { this.instance.post(`/appfinancingdemand/staticFinancialDemandByHot?areaId=${this.search.areaId}&organizationId=${this.search.organizationId}`).then(res => {
if (res?.data) { if (res?.data) {
var nameList = [], applyList = [], auditList = [] var nameList = [], applyList = [], auditList = []
res.data.map((item) => { res.data.map((item) => {
@@ -151,7 +158,7 @@ export default {
this.columnChartInit(nameList, applyList, auditList) this.columnChartInit(nameList, applyList, auditList)
} }
}) })
this.instance.post(`/appfinancingdemand/staticFinancialDemandByMonth?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => { this.instance.post(`/appfinancingdemand/staticFinancialDemandByMonth?areaId=${this.search.areaId}&organizationId=${this.search.organizationId}`).then(res => {
if (res?.data) { if (res?.data) {
var monthList = [], applyList = [], auditList = [] var monthList = [], applyList = [], auditList = []
res.data.map((item) => { res.data.map((item) => {
@@ -202,8 +209,8 @@ export default {
} }
}, },
data: [ data: [
{ value: data['企业融资']}, {value: data['企业融资']},
{ value: data['个人融资']}, {value: data['个人融资']},
] ]
} }
] ]
@@ -244,8 +251,8 @@ export default {
data: applyList, data: applyList,
itemStyle: { itemStyle: {
normal: { normal: {
lineStyle:{ lineStyle: {
color:'#2891FF' color: '#2891FF'
} }
} }
} }
@@ -257,8 +264,8 @@ export default {
data: auditList, data: auditList,
itemStyle: { itemStyle: {
normal: { normal: {
lineStyle:{ lineStyle: {
color:'#26D52B' color: '#26D52B'
} }
} }
} }
@@ -304,13 +311,13 @@ export default {
data: applyList, data: applyList,
barWidth: 10, barWidth: 10,
}, },
{ {
name: '放款数量', name: '放款数量',
type: 'bar', type: 'bar',
barGap: 0, barGap: 0,
data: auditList, data: auditList,
barWidth: 10, barWidth: 10,
}] }]
}; };
this.columnChart.setOption(option) this.columnChart.setOption(option)
@@ -318,7 +325,7 @@ export default {
changeTime() { changeTime() {
this.search.createTimeStart = '' this.search.createTimeStart = ''
this.search.createTimeEnd = '' this.search.createTimeEnd = ''
if(this.stuTime.length) { if (this.stuTime.length) {
this.search.createTimeStart = this.stuTime[0] this.search.createTimeStart = this.stuTime[0]
this.search.createTimeEnd = this.stuTime[1] this.search.createTimeEnd = this.stuTime[1]
} }
@@ -327,10 +334,11 @@ export default {
} }
}, },
created() { created() {
this.search.areaId = this.user.info.areaId
this.dict.load('financialOrganizationType', 'financialLoanApplyStatus', 'financingDemandStatus') this.dict.load('financialOrganizationType', 'financialLoanApplyStatus', 'financingDemandStatus')
}, },
mounted() { mounted() {
if(this.user.financeUser && this.user.financeUser.id) { //机构 if (this.user.financeUser && this.user.financeUser.id) { //机构
this.search.organizationId = this.user.financeUser.organizationId this.search.organizationId = this.user.financeUser.organizationId
this.userOrgId = this.user.financeUser.organizationId this.userOrgId = this.user.financeUser.organizationId
} }
@@ -340,18 +348,25 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .ai-list .ai-list__content--right-wrapper{ ::v-deep .ai-list .ai-list__content--right-wrapper {
background: none!important; background: none !important;
box-shadow: none!important; box-shadow: none !important;
} }
.needsStatistics { .needsStatistics {
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
.col-row{
.AiAreaGet {
width: 300px;
}
.col-row {
overflow: hidden; overflow: hidden;
.item{
.item {
display: inline-block; display: inline-block;
padding: 16px 24px; padding: 16px 24px;
width: calc(25% - 15px); width: calc(25% - 15px);
@@ -361,7 +376,8 @@ export default {
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15); box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
p{
p {
font-size: 16px; font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei; font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold; font-weight: bold;
@@ -369,7 +385,8 @@ export default {
line-height: 24px; line-height: 24px;
margin-bottom: 8px; margin-bottom: 8px;
} }
h2{
h2 {
font-size: 24px; font-size: 24px;
font-family: Arial-BoldMT, Arial; font-family: Arial-BoldMT, Arial;
font-weight: normal; font-weight: normal;
@@ -377,51 +394,61 @@ export default {
line-height: 32px; line-height: 32px;
} }
} }
.item:nth-of-type(4n) { .item:nth-of-type(4n) {
margin-right: 0; margin-right: 0;
} }
} }
.chart-flex{
.chart-flex {
display: flex; display: flex;
height: 280px; height: 280px;
margin-bottom: 20px; margin-bottom: 20px;
.circle-chart{
.circle-chart {
width: 440px; width: 440px;
margin-right: 20px; margin-right: 20px;
height: 100%; height: 100%;
.cir-flex{
.cir-flex {
height: calc(100% - 56px); height: calc(100% - 56px);
display: flex; display: flex;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
.total-num{
.total-num {
position: absolute; position: absolute;
top: 90px; top: 90px;
left: 70px; left: 70px;
width: 100px; width: 100px;
text-align: center; text-align: center;
} }
#circleChart{
#circleChart {
width: calc(100% - 150px); width: calc(100% - 150px);
height: 100%; height: 100%;
} }
.cir-text{
.cir-text {
width: 150px; width: 150px;
margin: 56px 0 0 40px; margin: 56px 0 0 40px;
.info{
.info {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 8px; margin-bottom: 8px;
p{
p {
width: 100px; width: 100px;
font-size: 14px; font-size: 14px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #666; color: #666;
line-height: 22px; line-height: 22px;
} }
div{
div {
width: 50px; width: 50px;
text-align: right; text-align: right;
} }
@@ -429,37 +456,45 @@ export default {
} }
} }
} }
.line-chart{
.line-chart {
height: 100%; height: 100%;
width: calc(100% - 460px); width: calc(100% - 460px);
#lineChart{
#lineChart {
height: calc(100% - 100px); height: calc(100% - 100px);
padding-right: 20px; padding-right: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
} }
} }
.chart-column{
.chart-column {
margin-bottom: 20px; margin-bottom: 20px;
height: 320px; height: 320px;
#columnChart{
#columnChart {
width: 100%; width: 100%;
height: 220px; height: 220px;
} }
} }
.table-content{
.table-content {
width: 100%; width: 100%;
.title{
.title {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
} }
.tips-bg{
.tips-bg {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
margin-right: 4px; margin-right: 4px;
} }
.header-title{
.header-title {
width: 100%; width: 100%;
text-align: center; text-align: center;
height: 20px; height: 20px;
@@ -467,29 +502,35 @@ export default {
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #333; color: #333;
line-height: 20px; line-height: 20px;
.tips-bg:nth-of-type(2n) { .tips-bg:nth-of-type(2n) {
margin-left: 24px; margin-left: 24px;
} }
} }
.chart-content{
.chart-content {
background: #FFF; background: #FFF;
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15); box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
border-radius: 4px; border-radius: 4px;
} }
.title{
.title {
line-height: 56px; line-height: 56px;
font-size: 16px; font-size: 16px;
font-family: MicrosoftYaHeiSemibold; font-family: MicrosoftYaHeiSemibold;
color: #222; color: #222;
padding-left: 16px; padding-left: 16px;
} }
.status0{
.status0 {
color: #f82; color: #f82;
} }
.status1{
.status1 {
color: #2EA222; color: #2EA222;
} }
.status2{
.status2 {
color: #f46; color: #f46;
} }
} }