287 lines
8.6 KiB
Vue
287 lines
8.6 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div :gutter="24" class="sum-box">
|
|||
|
|
<el-card class="box-card">
|
|||
|
|
<div class="my-span-checklist-title">
|
|||
|
|
总资产余额
|
|||
|
|
</div>
|
|||
|
|
<div class="my-span-checklist-main">
|
|||
|
|
<span>{{ cardInfo.custAumBal }}</span>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card class="box-card">
|
|||
|
|
<div class="my-span-checklist-title">
|
|||
|
|
总资产余额较上月变动
|
|||
|
|
</div>
|
|||
|
|
<div class="my-span-checklist-main">
|
|||
|
|
<span>{{ cardInfo.aumBalCompLm }}</span>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card class="box-card">
|
|||
|
|
<div class="my-span-checklist-title">
|
|||
|
|
总资产余额月日均
|
|||
|
|
</div>
|
|||
|
|
<div class="my-span-checklist-main">
|
|||
|
|
<span>{{ cardInfo.custAumMonthAvg }}</span>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card class="box-card">
|
|||
|
|
<div class="my-span-checklist-title">
|
|||
|
|
2星级及以上客户数量
|
|||
|
|
</div>
|
|||
|
|
<div class="my-span-checklist-main">
|
|||
|
|
<span>{{ cardInfo.custLevelCountSum }}</span>
|
|||
|
|
<el-tooltip
|
|||
|
|
placement="top"
|
|||
|
|
trigger="hover"
|
|||
|
|
v-if="cardInfo.custLevelCount"
|
|||
|
|
>
|
|||
|
|
<span class="quesiton"><i class="el-icon-question"></i></span>
|
|||
|
|
<template #content>
|
|||
|
|
<ul v-for="item in cardInfo.custLevelCount">
|
|||
|
|
<li :key="item.key" class="quesitonli"><span>{{ item.key }}：</span>{{ item.value }}</li>
|
|||
|
|
</ul>
|
|||
|
|
</template>
|
|||
|
|
</el-tooltip>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card class="box-card">
|
|||
|
|
<div class="my-span-checklist-title">
|
|||
|
|
2星级及以上客户数量较上月变动
|
|||
|
|
</div>
|
|||
|
|
<div class="my-span-checklist-main">
|
|||
|
|
<span>{{ cardInfo.custLevelCompLmSum }}</span>
|
|||
|
|
<el-tooltip
|
|||
|
|
placement="top"
|
|||
|
|
trigger="hover"
|
|||
|
|
v-if="cardInfo.custLevelCompLm"
|
|||
|
|
>
|
|||
|
|
<span class="quesiton"><i class="el-icon-question"></i></span>
|
|||
|
|
<template #content>
|
|||
|
|
<ul v-for="item in cardInfo.custLevelCompLm">
|
|||
|
|
<li :key="item.key" class="quesitonli"><span>{{ item.key }}：</span>{{ item.value }}</li>
|
|||
|
|
</ul>
|
|||
|
|
</template>
|
|||
|
|
</el-tooltip>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
<el-card class="header-statics" style="display: none">
|
|||
|
|
<ul class="statics-cnt">
|
|||
|
|
<li>
|
|||
|
|
<span>{{ topData['branchNum'] || 0 }}</span>
|
|||
|
|
<span>星级较上月变动数</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<span>{{ topData['outletNum'] || 0 }}</span>
|
|||
|
|
<span>2星客户数量</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<span>{{ topData['topGridNum'] || 0 }}</span>
|
|||
|
|
<span>3星客户数量</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<span>{{ topData['secGridNum'] || 0 }}</span>
|
|||
|
|
<span>4星客户数量</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<span>{{ topData['businessNum'] || 0 }}</span>
|
|||
|
|
<span>5星客户数量</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<span>{{ topData['merchantNum'] || 0 }}</span>
|
|||
|
|
<span>总资产月日均</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</el-card>
|
|||
|
|
<el-table v-loading="loading" :data="tableData">
|
|||
|
|
<el-table-column prop="custName" label="客户名称" align="center" />
|
|||
|
|
<el-table-column prop="custIdc" label="客户证件号" align="center" width="180px" />
|
|||
|
|
<el-table-column prop="custIsn" label="客户内码" align="center" />
|
|||
|
|
<el-table-column prop="custAge" label="年龄" align="center" />
|
|||
|
|
<el-table-column prop="custSex" label="性别" align="center" />
|
|||
|
|
<el-table-column prop="custPhone" label="联系电话" align="center" width="150px" />
|
|||
|
|
<el-table-column prop="custAdress" label="联系地址" align="center" width="150px" />
|
|||
|
|
<el-table-column prop="custAumBal" label="总资产余额" align="center" width="120px" />
|
|||
|
|
<el-table-column prop="aumBalCompLm" label="总资产余额较上月变动" align="center" width="150px" />
|
|||
|
|
<el-table-column prop="custAumMonthAvg" label="总资产余额月日均" align="center" width="150px" />
|
|||
|
|
<el-table-column prop="custLevel" label="客户星级" align="center" />
|
|||
|
|
<el-table-column prop="custLevelCompLm" label="星级较上月变动" align="center" width="150px" />
|
|||
|
|
<el-table-column prop="branchId" label="支行号" align="center" width="120px" />
|
|||
|
|
<el-table-column prop="branchName" label="支行名" align="center" width="180px" />
|
|||
|
|
<el-table-column prop="outletId" label="网点号" align="center" width="120px" />
|
|||
|
|
<el-table-column prop="outletName" label="网点名" align="center" width="180px" />
|
|||
|
|
<el-table-column prop="managerName" label="责任人" align="center" width="150px">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<span>{{ scope.row.managerName }} {{ scope.row.managerId }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getData" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { gridCmpmCustManagerList, gridCmpmCustManagerResult } from '@/api/gridSearch/accountManageReport/index'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
cardInfo: {
|
|||
|
|
custAumBal: '',
|
|||
|
|
aumBalCompLm: '',
|
|||
|
|
custAumMonthAvg: '',
|
|||
|
|
custLevelCount: '',
|
|||
|
|
custLevelCountSum: '',
|
|||
|
|
custLevelCompLm: '',
|
|||
|
|
custLevelCompLmSum: ''
|
|||
|
|
},
|
|||
|
|
tableData: [],
|
|||
|
|
loading: false,
|
|||
|
|
queryParams: {
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 10
|
|||
|
|
},
|
|||
|
|
total: 0,
|
|||
|
|
topData: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getData()
|
|||
|
|
this.getSum()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getData() {
|
|||
|
|
this.loading = true;
|
|||
|
|
gridCmpmCustManagerList(this.queryParams).then(res => {
|
|||
|
|
this.tableData = res.rows
|
|||
|
|
this.loading = false
|
|||
|
|
this.total = res.total
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getSum() {
|
|||
|
|
gridCmpmCustManagerResult().then(res => {
|
|||
|
|
this.cardInfo = {
|
|||
|
|
custAumBal: res.custAumBal,
|
|||
|
|
aumBalCompLm: res.aumBalCompLm,
|
|||
|
|
custAumMonthAvg: res.custAumMonthAvg,
|
|||
|
|
custLevelCount: this.toArr(res.custLevelCount),
|
|||
|
|
custLevelCountSum: this.toSum(res.custLevelCount),
|
|||
|
|
custLevelCompLm: this.toArr(res.custLevelCompLm),
|
|||
|
|
custLevelCompLmSum: this.toSum(res.custLevelCompLm),
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
toArr(obj) {
|
|||
|
|
let arr = []
|
|||
|
|
Object.keys(obj).map(key => {
|
|||
|
|
arr.push({
|
|||
|
|
key,
|
|||
|
|
value: obj[key]
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
return arr
|
|||
|
|
},
|
|||
|
|
toSum(obj) {
|
|||
|
|
let sum = 0
|
|||
|
|
Object.keys(obj).map(key => {
|
|||
|
|
sum = sum + obj[key] * 1
|
|||
|
|
})
|
|||
|
|
return sum
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.sum-box {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin: 0 -10px;
|
|||
|
|
}
|
|||
|
|
.box-card {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin: 20px 10px;
|
|||
|
|
border: 3px solid #a8c2f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.my-span-checklist-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
letter-spacing: 0.5px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.my-span-checklist-main {
|
|||
|
|
line-height: 40px;
|
|||
|
|
font-size: 30px;
|
|||
|
|
color: #222;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.quesiton {
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #2094ff;
|
|||
|
|
margin-left: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quesitonli {
|
|||
|
|
font-size: 16px;
|
|||
|
|
line-height: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.statics-cnt {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 17px;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
|
|||
|
|
li {
|
|||
|
|
list-style: none;
|
|||
|
|
margin: 0;
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #eaf5ff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 24px 0;
|
|||
|
|
min-width: 100px;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
&:first-child {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: 900;
|
|||
|
|
line-height: 40px;
|
|||
|
|
color: #222222;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
font-size: 17px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 24px;
|
|||
|
|
color: #959da6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.header-statics {
|
|||
|
|
box-shadow: 0 3px 8px 0 #00000017;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
margin: 0 0 22px 0;
|
|||
|
|
padding: 24px 30px;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
|
|||
|
|
>p {
|
|||
|
|
margin: 0 0 20px 0;
|
|||
|
|
line-height: 25px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #222222;
|
|||
|
|
font-size: 18px;
|
|||
|
|
letter-spacing: 0.5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|