模型输出展示
This commit is contained in:
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<el-card class="model-output-card" v-if="custType && (retailOutput || corpOutput)">
|
||||
<div slot="header" class="card-header">
|
||||
<span class="card-title">模型输出</span>
|
||||
</div>
|
||||
<el-tabs v-model="activeTab">
|
||||
<!-- 个人客户模型输出 -->
|
||||
<template v-if="custType === '个人' && retailOutput">
|
||||
<!-- 基本信息 -->
|
||||
<el-tab-pane label="基本信息" name="retail-basic">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="客户内码">{{ retailOutput.custIsn || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户名称">{{ retailOutput.custName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="证件类型">{{ retailOutput.idType || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="证件号码">{{ retailOutput.idNum || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="基准利率"><span class="rate-value">{{ retailOutput.baseLoanRate || '-' }}</span> %</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 忠诚度分析 -->
|
||||
<el-tab-pane label="忠诚度分析" name="retail-loyalty">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="我行首贷客户">{{ formatBoolean(retailOutput.isFirstLoan) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="用信天数">{{ retailOutput.faithDay || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户年龄">{{ retailOutput.custAge || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_首贷"><span class="bp-value">{{ retailOutput.bpFirstLoan || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="BP_贷龄"><span class="bp-value">{{ retailOutput.bpAgeLoan || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="BP_年龄"><span class="bp-value">{{ retailOutput.bpAge || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="TOTAL_BP_忠诚度" :span="2"><span class="total-bp-value">{{ retailOutput.totalBpLoyalty || '-' }}</span></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 贡献度分析 -->
|
||||
<el-tab-pane label="贡献度分析" name="retail-contribution">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="存款年日均">{{ retailOutput.balanceAvg || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="贷款年日均">{{ retailOutput.loanAvg || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="派生率">{{ retailOutput.derivationRate || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="TOTAL_BP_贡献度"><span class="total-bp-value">{{ retailOutput.totalBpContribution || '-' }}</span></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 关联度分析 -->
|
||||
<el-tab-pane label="关联度分析" name="retail-relevance">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="中间业务_个人_信用卡">{{ formatBoolean(retailOutput.midPerCard) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_个人_一码通">{{ formatBoolean(retailOutput.midPerPass) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_个人_丰收互联">{{ formatBoolean(retailOutput.midPerHarvest) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_个人_有效客户">{{ formatBoolean(retailOutput.midPerEffect) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_个人_快捷支付">{{ formatBoolean(retailOutput.midPerQuickPay) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_个人_电费代扣">{{ formatBoolean(retailOutput.midPerEleDdc) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_个人_水费代扣">{{ formatBoolean(retailOutput.midPerWaterDdc) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_个人_华数费代扣">{{ formatBoolean(retailOutput.midPerHuashuDdc) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_个人_煤气费代扣">{{ formatBoolean(retailOutput.MidPerGasDdc) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_个人_市民卡">{{ formatBoolean(retailOutput.midPerCitizencard) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_个人_理财业务">{{ formatBoolean(retailOutput.midPerFinMan) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_个人_etc">{{ formatBoolean(retailOutput.midPerEtc) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_中间业务"><span class="bp-value">{{ retailOutput.bpMid || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="TOTAL_BP_关联度"><span class="total-bp-value">{{ retailOutput.totoalBpRelevance || '-' }}</span></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 贷款特征 -->
|
||||
<el-tab-pane label="贷款特征" name="retail-loan">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="申请金额">{{ retailOutput.applyAmt || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_贷款额度"><span class="bp-value">{{ retailOutput.bpLoanAmount || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="贷款用途">{{ formatLoanPurpose(retailOutput.loanPurpose) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="是否有经营佐证">{{ formatBoolean(retailOutput.bizProof) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_贷款用途"><span class="bp-value">{{ retailOutput.bpLoanUse || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="循环功能">{{ formatBoolean(retailOutput.loanLoop) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_循环功能"><span class="bp-value">{{ retailOutput.bpLoanLoop || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="抵质押类型">{{ retailOutput.collType || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="抵质押物三方所有">{{ formatBoolean(retailOutput.collThirdParty) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_抵押物"><span class="bp-value">{{ retailOutput.bpCollateral || '-' }}</span></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 风险度分析 -->
|
||||
<el-tab-pane label="风险度分析" name="retail-risk">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="灰名单客户">{{ formatBoolean(retailOutput.greyCust) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="本金逾期">{{ formatBoolean(retailOutput.prinOverdue) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="利息逾期">{{ formatBoolean(retailOutput.interestOverdue) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="信用卡逾期">{{ formatBoolean(retailOutput.cardOverdue) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_灰名单与逾期"><span class="bp-value">{{ retailOutput.bpGreyOverdue || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="TOTAL_BP_风险度"><span class="total-bp-value">{{ retailOutput.totoalBpRisk || '-' }}</span></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 测算结果 -->
|
||||
<el-tab-pane label="测算结果" name="retail-result">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="浮动BP"><span class="total-bp-value">{{ retailOutput.totalBp || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="测算利率"><span class="calculate-rate">{{ retailOutput.calculateRate || '-' }}</span> %</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
|
||||
<!-- 企业客户模型输出 -->
|
||||
<template v-else-if="custType === '企业' && corpOutput">
|
||||
<!-- 基本信息 -->
|
||||
<el-tab-pane label="基本信息" name="corp-basic">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="客户内码">{{ corpOutput.custIsn || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户名称">{{ corpOutput.custName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="证件类型">{{ corpOutput.idType || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="证件号码">{{ corpOutput.idNum || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="基准利率"><span class="rate-value">{{ corpOutput.baseLoanRate || '-' }}</span> %</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 忠诚度分析 -->
|
||||
<el-tab-pane label="忠诚度分析" name="corp-loyalty">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="我行首贷客户">{{ formatBoolean(corpOutput.isFirstLoan) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="用信天数">{{ corpOutput.faithDay || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_首贷"><span class="bp-value">{{ corpOutput.bpFirstLoan || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="BP_贷龄"><span class="bp-value">{{ corpOutput.bpAgeLoan || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="TOTAL_BP_忠诚度" :span="2"><span class="total-bp-value">{{ corpOutput.totalBpLoyalty || '-' }}</span></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 贡献度分析 -->
|
||||
<el-tab-pane label="贡献度分析" name="corp-contribution">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="存款年日均">{{ corpOutput.balanceAvg || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="贷款年日均">{{ corpOutput.loanAvg || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="派生率">{{ corpOutput.derivationRate || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="TOTAL_BP_贡献度"><span class="total-bp-value">{{ corpOutput.totalBpContribution || '-' }}</span></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 关联度分析 -->
|
||||
<el-tab-pane label="关联度分析" name="corp-relevance">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="中间业务_企业_企业互联">{{ formatBoolean(corpOutput.midEntConnect) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_企业_有效价值客户">{{ formatBoolean(corpOutput.midEntEffect) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_企业_国际业务">{{ formatBoolean(corpOutput.midEntInter) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_企业_承兑">{{ formatBoolean(corpOutput.midEntAccept) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_企业_贴现">{{ formatBoolean(corpOutput.midEntDiscount) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_企业_电费代扣">{{ formatBoolean(corpOutput.midEntEleDdc) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_企业_水费代扣">{{ formatBoolean(corpOutput.midEntWaterDdc) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中间业务_企业_税务代扣">{{ formatBoolean(corpOutput.midEntTax) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_中间业务"><span class="bp-value">{{ corpOutput.bpMid || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="代发工资户数">{{ corpOutput.payroll || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="存量贷款余额">{{ corpOutput.invLoanAmount || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_代发工资"><span class="bp-value">{{ corpOutput.bpPayroll || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="TOTAL_BP_关联度"><span class="total-bp-value">{{ corpOutput.totoalBpRelevance || '-' }}</span></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 企业类别 -->
|
||||
<el-tab-pane label="企业类别" name="corp-category">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="净身企业">{{ formatBoolean(corpOutput.isCleanEnt) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开立基本结算账户">{{ formatBoolean(corpOutput.hasSettleAcct) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="省农担担保贷款">{{ formatBoolean(corpOutput.isAgriGuar) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="绿色贷款">{{ formatBoolean(corpOutput.isGreenLoan) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="科技型企业">{{ formatBoolean(corpOutput.isTechEnt) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_企业客户类别"><span class="bp-value">{{ corpOutput.bpEntType || '-' }}</span></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 贷款特征 -->
|
||||
<el-tab-pane label="贷款特征" name="corp-loan">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="贷款期限">{{ corpOutput.loanTerm || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_贷款期限"><span class="bp-value">{{ corpOutput.bpLoanTerm || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="申请金额">{{ corpOutput.applyAmt || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_贷款额度"><span class="bp-value">{{ corpOutput.bpLoanAmount || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="抵质押类型">{{ corpOutput.collType || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="抵质押物三方所有">{{ formatBoolean(corpOutput.collThirdParty) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_抵押物"><span class="bp-value">{{ corpOutput.bpCollateral || '-' }}</span></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 风险度分析 -->
|
||||
<el-tab-pane label="风险度分析" name="corp-risk">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="灰名单客户">{{ formatBoolean(corpOutput.greyCust) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="本金逾期">{{ formatBoolean(corpOutput.prinOverdue) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="利息逾期">{{ formatBoolean(corpOutput.interestOverdue) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="信用卡逾期">{{ formatBoolean(corpOutput.cardOverdue) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="BP_灰名单与逾期"><span class="bp-value">{{ corpOutput.bpGreyOverdue || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="TOTAL_BP_风险度"><span class="total-bp-value">{{ corpOutput.totoalBpRisk || '-' }}</span></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 测算结果 -->
|
||||
<el-tab-pane label="测算结果" name="corp-result">
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="浮动BP"><span class="total-bp-value">{{ corpOutput.totalBp || '-' }}</span></el-descriptions-item>
|
||||
<el-descriptions-item label="测算利率"><span class="calculate-rate">{{ corpOutput.calculateRate || '-' }}</span> %</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ModelOutputDisplay",
|
||||
props: {
|
||||
custType: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
retailOutput: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
corpOutput: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
custType: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
// 根据客户类型设置默认 tab
|
||||
if (val === '个人') {
|
||||
this.activeTab = 'retail-basic'
|
||||
} else if (val === '企业') {
|
||||
this.activeTab = 'corp-basic'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 格式化布尔值为中文 */
|
||||
formatBoolean(value) {
|
||||
if (value === 'true' || value === true) return '是'
|
||||
if (value === 'false' || value === false) return '否'
|
||||
return value || '-'
|
||||
},
|
||||
/** 格式化贷款用途 */
|
||||
formatLoanPurpose(value) {
|
||||
if (value === 'consumer') return '消费贷款'
|
||||
if (value === 'business') return '经营贷款'
|
||||
return value || '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.model-output-card {
|
||||
::v-deep .el-card__header {
|
||||
padding: 16px 20px;
|
||||
background-color: #fafafa;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// BP 值样式
|
||||
.bp-value {
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// TOTAL_BP 样式
|
||||
.total-bp-value {
|
||||
color: #e6a23c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 测算利率高亮样式
|
||||
.calculate-rate {
|
||||
color: #f56c6c;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
// 利率值样式
|
||||
.rate-value {
|
||||
color: #67c23a;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -6,97 +6,121 @@
|
||||
<el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 两栏布局 -->
|
||||
<el-row :gutter="20" v-if="!loading && detail">
|
||||
<!-- 左侧摘要卡片(30%) -->
|
||||
<el-col :xs="24" :sm="24" :md="8" :lg="7" :xl="6">
|
||||
<!-- 两栏布局:左侧关键信息 + 右侧(流程详情+模型输出) -->
|
||||
<div v-if="!loading && workflowDetail" class="detail-layout">
|
||||
<!-- 左侧关键信息卡片 -->
|
||||
<div class="left-panel">
|
||||
<el-card class="summary-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span class="card-title">关键信息</span>
|
||||
</div>
|
||||
<el-descriptions :column="1" direction="vertical" border>
|
||||
<el-descriptions-item label="业务方流水号">{{ detail.serialNum }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户名称">{{ detail.custName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户类型">{{ detail.custType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="申请金额">{{ detail.applyAmt }} 元</el-descriptions-item>
|
||||
<el-descriptions-item label="贷款利率">{{ detail.loanRate }} %</el-descriptions-item>
|
||||
<el-descriptions-item label="担保方式">{{ detail.guarType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="业务方流水号">{{ workflowDetail.serialNum }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户名称">{{ workflowDetail.custName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户类型">{{ workflowDetail.custType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="申请金额">{{ workflowDetail.applyAmt }} 元</el-descriptions-item>
|
||||
<el-descriptions-item label="基准利率">
|
||||
<span class="rate-value">{{ getBaseLoanRate() }}</span> %
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="浮动BP">
|
||||
<span class="total-bp-value">{{ getTotalBp() }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="测算利率">
|
||||
<span class="calculate-rate">{{ getCalculateRate() }}</span> %
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</div>
|
||||
|
||||
<!-- 右侧详情标签页(70%) -->
|
||||
<el-col :xs="24" :sm="24" :md="16" :lg="17" :xl="18">
|
||||
<!-- 右侧面板:包含流程详情和模型输出 -->
|
||||
<div class="right-panel">
|
||||
<!-- 流程详情卡片 -->
|
||||
<el-card class="detail-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span class="card-title">流程详情</span>
|
||||
</div>
|
||||
<el-tabs v-model="activeTab">
|
||||
<!-- 基本信息 -->
|
||||
<el-tab-pane label="基本信息" name="basic">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="机构编码">{{ detail.orgCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="运行模式">{{ detail.runType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户内码">{{ detail.custIsn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="证件类型">{{ detail.idType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="机构编码">{{ workflowDetail.orgCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="运行模式">{{ workflowDetail.runType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户内码">{{ workflowDetail.custIsn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="证件类型">{{ workflowDetail.idType }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 业务信息 -->
|
||||
<el-tab-pane label="业务信息" name="business">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="贷款用途">{{ detail.loanPurpose === 'consumer' ? '消费贷款' : detail.loanPurpose === 'business' ? '经营贷款' : detail.loanPurpose }}</el-descriptions-item>
|
||||
<el-descriptions-item label="是否有经营佐证">{{ detail.bizProof === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="抵质押类型">{{ detail.collType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="抵质押物三方所有">{{ detail.collThirdParty === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="贷款用途">{{ formatLoanPurpose(workflowDetail.loanPurpose) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="是否有经营佐证">{{ formatBoolean(workflowDetail.bizProof) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="抵质押类型">{{ workflowDetail.collType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="抵质押物三方所有">{{ formatBoolean(workflowDetail.collThirdParty) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 中间业务标识 -->
|
||||
<el-tab-pane label="中间业务标识" name="mid">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="个人快捷支付">{{ detail.midPerQuickPay === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="个人电费代扣">{{ detail.midPerEleDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="企业电费代扣">{{ detail.midEntEleDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="企业水费代扣">{{ detail.midEntWaterDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="个人快捷支付">{{ formatBoolean(workflowDetail.midPerQuickPay) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="个人电费代扣">{{ formatBoolean(workflowDetail.midPerEleDdc) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="企业电费代扣">{{ formatBoolean(workflowDetail.midEntEleDdc) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="企业水费代扣">{{ formatBoolean(workflowDetail.midEntWaterDdc) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 企业标识 -->
|
||||
<el-tab-pane label="企业标识" name="ent">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="净身企业">{{ detail.isCleanEnt === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开立基本结算账户">{{ detail.hasSettleAcct === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="制造业企业">{{ detail.isManufacturing === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="省农担担保贷款">{{ detail.isAgriGuar === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纳税信用等级A级">{{ detail.isTaxA === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="县级及以上农业龙头企业">{{ detail.isAgriLeading === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="普惠小微借款人">{{ detail.isInclusiveFinance === 'true' ? '是' : '否' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="净身企业">{{ formatBoolean(workflowDetail.isCleanEnt) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开立基本结算账户">{{ formatBoolean(workflowDetail.hasSettleAcct) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="制造业企业">{{ formatBoolean(workflowDetail.isManufacturing) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="省农担担保贷款">{{ formatBoolean(workflowDetail.isAgriGuar) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纳税信用等级A级">{{ formatBoolean(workflowDetail.isTaxA) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="县级及以上农业龙头企业">{{ formatBoolean(workflowDetail.isAgriLeading) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="普惠小微借款人">{{ formatBoolean(workflowDetail.isInclusiveFinance) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 其他信息 -->
|
||||
<el-tab-pane label="其他信息" name="other">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建者">{{ detail.createBy }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间">{{ detail.updateTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新者">{{ detail.updateBy }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ workflowDetail.createTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建者">{{ workflowDetail.createBy }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间">{{ workflowDetail.updateTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新者">{{ workflowDetail.updateBy }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 模型输出卡片 -->
|
||||
<ModelOutputDisplay
|
||||
:cust-type="workflowDetail.custType"
|
||||
:retail-output="retailOutput"
|
||||
:corp-output="corpOutput"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getWorkflow } from "@/api/loanPricing/workflow"
|
||||
import ModelOutputDisplay from "./components/ModelOutputDisplay.vue"
|
||||
|
||||
export default {
|
||||
name: "LoanPricingWorkflowDetail",
|
||||
components: {
|
||||
ModelOutputDisplay
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
detail: null,
|
||||
workflowDetail: null,
|
||||
retailOutput: null,
|
||||
corpOutput: null,
|
||||
activeTab: 'basic'
|
||||
}
|
||||
},
|
||||
@@ -114,7 +138,10 @@ export default {
|
||||
}
|
||||
|
||||
getWorkflow(serialNum).then(response => {
|
||||
this.detail = response.data
|
||||
// 适配新的 API 响应结构 LoanPricingWorkflowVO
|
||||
this.workflowDetail = response.data.loanPricingWorkflow
|
||||
this.retailOutput = response.data.modelRetailOutputFields
|
||||
this.corpOutput = response.data.modelCorpOutputFields
|
||||
this.loading = false
|
||||
}).catch(error => {
|
||||
this.$modal.msgError("获取流程详情失败:" + (error.message || "未知错误"))
|
||||
@@ -124,6 +151,45 @@ export default {
|
||||
/** 返回上一页 */
|
||||
goBack() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
/** 格式化布尔值为中文 */
|
||||
formatBoolean(value) {
|
||||
if (value === 'true' || value === true) return '是'
|
||||
if (value === 'false' || value === false) return '否'
|
||||
return value || '-'
|
||||
},
|
||||
/** 格式化贷款用途 */
|
||||
formatLoanPurpose(value) {
|
||||
if (value === 'consumer') return '消费贷款'
|
||||
if (value === 'business') return '经营贷款'
|
||||
return value || '-'
|
||||
},
|
||||
/** 获取基准利率 */
|
||||
getBaseLoanRate() {
|
||||
if (this.workflowDetail.custType === '个人' && this.retailOutput) {
|
||||
return this.retailOutput.baseLoanRate || '-'
|
||||
} else if (this.workflowDetail.custType === '企业' && this.corpOutput) {
|
||||
return this.corpOutput.baseLoanRate || '-'
|
||||
}
|
||||
return '-'
|
||||
},
|
||||
/** 获取浮动BP */
|
||||
getTotalBp() {
|
||||
if (this.workflowDetail.custType === '个人' && this.retailOutput) {
|
||||
return this.retailOutput.totalBp || '-'
|
||||
} else if (this.workflowDetail.custType === '企业' && this.corpOutput) {
|
||||
return this.corpOutput.totalBp || '-'
|
||||
}
|
||||
return '-'
|
||||
},
|
||||
/** 获取测算利率 */
|
||||
getCalculateRate() {
|
||||
if (this.workflowDetail.custType === '个人' && this.retailOutput) {
|
||||
return this.retailOutput.calculateRate || '-'
|
||||
} else if (this.workflowDetail.custType === '企业' && this.corpOutput) {
|
||||
return this.corpOutput.calculateRate || '-'
|
||||
}
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -146,47 +212,110 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
margin-bottom: 20px;
|
||||
// 两栏布局
|
||||
.detail-layout {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 16px 20px;
|
||||
background-color: #fafafa;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
// 左侧关键信息卡片 (固定宽度)
|
||||
.left-panel {
|
||||
flex: 0 0 280px;
|
||||
max-width: 280px;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.summary-card {
|
||||
::v-deep .el-card__header {
|
||||
padding: 16px 20px;
|
||||
background-color: #fafafa;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
// 利率值样式
|
||||
.rate-value {
|
||||
color: #67c23a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// TOTAL_BP 样式
|
||||
.total-bp-value {
|
||||
color: #e6a23c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 测算利率高亮样式
|
||||
.calculate-rate {
|
||||
color: #f56c6c;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
// 右侧面板:包含流程详情和模型输出
|
||||
.right-panel {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.detail-card {
|
||||
::v-deep .el-card__body {
|
||||
padding: 20px;
|
||||
}
|
||||
.detail-card {
|
||||
::v-deep .el-card__header {
|
||||
padding: 16px 20px;
|
||||
background-color: #fafafa;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__header {
|
||||
margin-bottom: 20px;
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式:小屏幕下左侧卡片在顶部显示
|
||||
@media screen and (max-width: 767px) {
|
||||
// 响应式布局
|
||||
@media screen and (max-width: 992px) {
|
||||
.workflow-detail-container {
|
||||
.summary-card {
|
||||
margin-bottom: 20px;
|
||||
.detail-layout {
|
||||
// 切换为单列垂直布局
|
||||
flex-direction: column;
|
||||
|
||||
.left-panel,
|
||||
.right-panel {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user