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