127 lines
3.1 KiB
Vue
127 lines
3.1 KiB
Vue
<template>
|
||
<div class="project-analysis-abnormal-tab">
|
||
<section class="abnormal-card">
|
||
<div class="abnormal-card__header">
|
||
<div class="abnormal-card__title">异常交易明细</div>
|
||
<div class="abnormal-card__subtitle">使用当前行数据与静态模板拼装展示，不新增请求逻辑。</div>
|
||
</div>
|
||
|
||
<el-table :data="detailData.transactionList" class="abnormal-table">
|
||
<el-table-column prop="tradeTime" label="交易时间" min-width="160" />
|
||
<el-table-column prop="ownAccountName" label="本方账号/主体" min-width="180" />
|
||
<el-table-column prop="counterpartyName" label="对方名称/账户" min-width="180" />
|
||
<el-table-column prop="tradeType" label="摘要/交易类型" min-width="160" />
|
||
<el-table-column prop="tradeAmount" label="交易金额" min-width="140" />
|
||
<el-table-column prop="markStatus" label="标记状态" min-width="120" />
|
||
</el-table>
|
||
</section>
|
||
|
||
<div class="abnormal-summary-grid">
|
||
<section class="abnormal-card">
|
||
<div class="abnormal-card__title">频繁转账账户异常摘要</div>
|
||
<div
|
||
v-for="(item, index) in detailData.frequentTransferSummary"
|
||
:key="`${item.accountNo || index}-transfer`"
|
||
class="summary-row"
|
||
>
|
||
<span class="summary-row__label">{{ item.accountNo }}</span>
|
||
<span class="summary-row__value">{{ item.description }}</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="abnormal-card">
|
||
<div class="abnormal-card__title">关联交易异常摘要</div>
|
||
<div
|
||
v-for="(item, index) in detailData.relatedTradeSummary"
|
||
:key="`${item.title || index}-relation`"
|
||
class="summary-row"
|
||
>
|
||
<span class="summary-row__label">{{ item.title }}</span>
|
||
<span class="summary-row__value">{{ item.description }}</span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "ProjectAnalysisAbnormalTab",
|
||
props: {
|
||
detailData: {
|
||
type: Object,
|
||
default: () => ({
|
||
transactionList: [],
|
||
frequentTransferSummary: [],
|
||
relatedTradeSummary: [],
|
||
}),
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.project-analysis-abnormal-tab {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.abnormal-card {
|
||
padding: 20px;
|
||
border: 1px solid #e2e8f0;
|
||
background: #fff;
|
||
}
|
||
|
||
.abnormal-card__header {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.abnormal-card__title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.abnormal-card__subtitle {
|
||
font-size: 12px;
|
||
color: #64748b;
|
||
}
|
||
|
||
.abnormal-table {
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.abnormal-summary-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.summary-row + .summary-row {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.summary-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.summary-row__label {
|
||
font-size: 12px;
|
||
color: #64748b;
|
||
}
|
||
|
||
.summary-row__value {
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
color: #1e293b;
|
||
}
|
||
</style>
|