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> |