This commit is contained in:
liuye
2022-04-08 11:49:59 +08:00
parent 3c8104554a
commit 510f9f14b1
6 changed files with 431 additions and 30 deletions

View File

@@ -124,8 +124,7 @@ export default {
needMaterial: [{required: true, message: "请输入所需材料", trigger: 'blur'}],
productFeatures: [{required: true, message: "请输入产品特色", trigger: 'blur'}],
bankCounterpart: [{required: true, message: "请输入客户经理姓名", trigger: 'change'}],
consultationTelephone: [ {required: true, message: "请输入客户经理电话", trigger: 'change'},
{pattern: /^1[3456789]\d{9}$/, message: "电话号码格式有误"}],
consultationTelephone: [ {required: true, message: "请输入客户经理电话", trigger: 'change'}],
}
}
},

View File

@@ -2,7 +2,7 @@
<section class="AppFinancingNeeds">
<ai-list v-if="showList">
<template slot="title">
<ai-title title="融资需求" :isShowBottomBorder="false"></ai-title>
<ai-title slot="title" title="融资需求" :isShowBottomBorder="false" :isShowArea="currIndex == 1 && showList" v-model="areaId" :instance="instance" @change="changeArea"/>
</template>
<template slot="tabs">
<el-tabs class="tabs-page" v-model="currIndex">
@@ -15,7 +15,6 @@
</ai-list>
<component v-if="!showList" :is="currentPage" :instance="instance" :dict="dict"
:permissions="permissions" :row="detail" @goBack="goBack"></component>
<!-- <component :is="currentComponent" :instance="instance" :dict="dict" :permissions="permissions"/> -->
</section>
</template>
@@ -45,6 +44,7 @@ export default {
showList: true,
currentPage: "",
detail: {},
areaId: ''
}
},
computed: {
@@ -65,7 +65,7 @@ export default {
}
},
created() {
this.dict.load("productRepaymentTimeline", "financialFundPurpose","financingDemandApplyType", "enterpriseType")
this.dict.load("productRepaymentTimeline", "financialFundPurpose","financingDemandApplyType", "enterpriseType", "dishonestPersonSituation", "administrativeSanctionType")
},
methods: {
goPage(obj) {
@@ -79,6 +79,9 @@ export default {
this.$refs[this.currIndex][0].getTableData();
})
},
changeArea() {
this.$refs[this.currIndex][0].getTableData();
}
}
}
</script>

View File

@@ -1,21 +1,114 @@
<template>
<section class="needsStatistics">
<ai-list>
<template #content>
<ai-search-bar>
<template #left>
<!-- <el-input size="small" placeholder="搜索企业名称" v-model="search.enterpriseName" clearable
@change="page.current=1,getTableData()"/> -->
</template>
</ai-search-bar>
<ai-search-bar>
<template #left>
<ai-select v-model="search.messageType" placeholder="金融机构" clearable :selectList="$dict.getDict('dlbResourceType')" @change="getTableData()"></ai-select>
</template>
</ai-list>
</ai-search-bar>
<div class="col-row">
<div class="item">
<p>累计发布需求</p>
<h2>20</h2>
</div>
<div class="item">
<p>累计发布需求</p>
<h2>20</h2>
</div>
<div class="item">
<p>累计发布需求</p>
<h2>20</h2>
</div>
<div class="item">
<p>累计发布需求</p>
<h2>20</h2>
</div>
<div class="item">
<p>累计发布需求</p>
<h2>20</h2>
</div>
<div class="item">
<p>累计发布需求</p>
<h2>20</h2>
</div>
<div class="item">
<p>累计发布需求</p>
<h2>20</h2>
</div>
<div class="item">
<p>累计发布需求</p>
<h2>20</h2>
</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>108</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>65</div>
</div>
<div class="info">
<p><span class="tips-bg" style="background: #FFB865;"></span>个人融资</p>
<div>65</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.messageType" placeholder="金融机构" clearable :selectList="$dict.getDict('dlbResourceType')" @change="getTableData()"></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="page.current=1,getList()"/>
</ai-search>
</template>
<template #right>
<el-input size="small" placeholder="搜索企业名称" v-model="search.messageType" 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">
<template slot-scope="{row}">
<el-button type="text">详情</el-button>
</template>
</el-table-column>
</ai-table>
</div>
</section>
</template>
<script>
import {mapState} from "vuex";
import * as echarts from 'echarts'
export default {
name: "needsStatistics",
@@ -29,21 +122,334 @@ export default {
},
data() {
return {
search: {messageType: ''},
page: {current: 1, total: 10},
circleChart: null,
lineChart: null,
columnChart: null,
tableData: [],
colConfigs: [
{label: "产品名称", width: '200', prop: "enterpriseName"},
{label: "联系人", width: '100', prop: "areaName"},
{label: "联系方式", width: '140', prop: "loanAmount"},
{label: "身份证号", width: '180', prop: "createTime"},
{label: "企业主体", width: '200', prop: "name"},
{label: "贷款金额(万)", width: '120', prop: "phone"},
{label: "申请时间", width: '180', prop: "remark"},
{label: "贷款机构", width: '200', prop: "remark"},
{label: "机构类型", width: '200', prop: "remark"},
{slot: "options"}
],
}
},
methods: {
getTableData() {
this.circleChartInit()
this.lineChartInit()
this.columnChartInit()
this.getList()
},
getList() {
this.instance.post("/appfinancingdemand/list", null, {
params: {...this.page, ...this.search, status: 0}
}).then(res => {
if (res?.data) {
this.tableData = res.data?.records
this.page.total = res.data.total
}
})
},
circleChartInit() {
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: 180},
{ value: 20},
]
}
]
};
this.circleChart.setOption(option)
},
lineChartInit() {
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: ['2020-07', '2020-08', '2020-09', '2020-10', '2020-11']
},
yAxis: {
type: 'value'
},
series: [
{
name: '申请笔数',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210],
itemStyle: {
normal: {
lineStyle:{
color:'#2891FF'
}
}
}
},
{
name: '放款笔数',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310],
itemStyle: {
normal: {
lineStyle:{
color:'#26D52B'
}
}
}
},
]
};
this.lineChart.setOption(option)
},
columnChartInit() {
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: ['重庆银行秀山支行', '哈尔滨银行秀山支行', '重庆银行五岳广场支行', '重庆秀山北银村镇银行']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '申请数量',
type: 'bar',
barGap: 0,
data: [100, 80, 90, 100, 60],
barWidth: 10,
},
{
name: '放款数量',
type: 'bar',
barGap: 0,
data: [100, 80, 90, 100, 60],
barWidth: 10,
}]
};
this.columnChart.setOption(option)
}
},
created() {
mounted() {
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;
}
}
</style>

View File

@@ -37,11 +37,8 @@
</el-table-column>
<el-table-column align="center" prop="name" label="是否必填">
<template slot-scope="scope">
<el-switch
v-model="scope.row.mustFill"
active-value="1" inactive-value="0"
active-color="#D0D4DC"
inactive-color="#5088FF">
<el-switch v-model="scope.row.mustFill"
active-color="#5088FF" inactive-color="#D0D4DC" active-value="1" inactive-value="0">
</el-switch>
</template>
</el-table-column>

View File

@@ -38,10 +38,8 @@
<ai-editor v-model.trim="form.needToKnow" :instance="instance"/>
</el-form-item>
<el-form-item label="是否启用" prop="processDefStatus">
<el-switch
v-model="form.processDefStatus"
active-color="#D0D4DC"
inactive-color="#5088FF" active-value="1" inactive-value="0">
<el-switch v-model="form.processDefStatus"
active-color="#5088FF" inactive-color="#D0D4DC" active-value="1" inactive-value="0">
</el-switch>
</el-form-item>
</el-form>

View File

@@ -49,9 +49,7 @@
<template v-slot="{row}">
<el-switch
v-model="row.processDefStatus"
@change="onChange(row)" active-value="1" inactive-value="0"
active-color="#5088FF"
inactive-color="#D0D4DC">
@change="onChange(row)" active-color="#5088FF" inactive-color="#D0D4DC" active-value="1" inactive-value="0">
</el-switch>
</template>
</el-table-column>