实现结果总览项目分析弹窗主视图

ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue

@@ -0,0 +1,126 @@
+<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>