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

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

@@ -2,8 +2,11 @@
<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?organizationId="+userOrgId' @change="page.current=1,getTableData()" :instance="instance"/>
:action='"/appfinancialorganization/list?organizationId="+userOrgId'
@change="page.current=1,getTableData()" :instance="instance"/>
</template>
</ai-search-bar>
<div class="col-row">
@@ -35,20 +38,25 @@
</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>
<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>
<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-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="开始日期"
@@ -89,14 +97,13 @@ export default {
instance: Function,
dict: Object,
permissions: Function,
areaId: String
},
computed: {
...mapState(['user'])
},
data() {
return {
search: {organizationId: '', name: '', createTimeStart: '', createTimeEnd: '', status: ''},
search: {organizationId: '', name: '', createTimeStart: '', createTimeEnd: '', status: '', areaId: ""},
page: {current: 1, total: 10},
circleChart: null,
lineChart: null,
@@ -126,7 +133,7 @@ export default {
},
methods: {
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['对接成功率']) {
res.data['对接成功率'] = Number(res.data['对接成功率'] * 100) + '%'
@@ -134,13 +141,13 @@ export default {
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) {
this.applyInfo = res.data
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) {
var nameList = [], applyList = [], auditList = []
res.data.map((item) => {
@@ -151,7 +158,7 @@ export default {
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) {
var monthList = [], applyList = [], auditList = []
res.data.map((item) => {
@@ -327,6 +334,7 @@ export default {
}
},
created() {
this.search.areaId = this.user.info.areaId
this.dict.load('financialOrganizationType', 'financialLoanApplyStatus', 'financingDemandStatus')
},
mounted() {
@@ -344,13 +352,20 @@ export default {
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;
@@ -361,6 +376,7 @@ export default {
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;
@@ -369,6 +385,7 @@ export default {
line-height: 24px;
margin-bottom: 8px;
}
h2 {
font-size: 24px;
font-family: Arial-BoldMT, Arial;
@@ -377,24 +394,29 @@ export default {
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;
@@ -402,18 +424,22 @@ export default {
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;
@@ -421,6 +447,7 @@ export default {
color: #666;
line-height: 22px;
}
div {
width: 50px;
text-align: right;
@@ -429,9 +456,11 @@ export default {
}
}
}
.line-chart {
height: 100%;
width: calc(100% - 460px);
#lineChart {
height: calc(100% - 100px);
padding-right: 20px;
@@ -439,26 +468,32 @@ export default {
}
}
}
.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;
@@ -467,15 +502,18 @@ export default {
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;
@@ -483,12 +521,15 @@ export default {
color: #222;
padding-left: 16px;
}
.status0 {
color: #f82;
}
.status1 {
color: #2EA222;
}
.status2 {
color: #f46;
}