实现结果总览详情弹窗前端接线

2026-03-25 15:26:03 +08:00
parent a52fb35bd3
commit 78ae93330c
15 changed files with 506 additions and 78 deletions
--- a/ruoyi-ui/src/api/ccdi/projectOverview.js
+++ b/ruoyi-ui/src/api/ccdi/projectOverview.js
@@ -39,3 +39,14 @@ export function getOverviewRiskModelPeople(params) {
    }
  })
 }
+
+export function getOverviewPersonAnalysisDetail(params) {
+  return request({
+    url: '/ccdi/project/overview/person-analysis/detail',
+    method: 'get',
+    params: {
+      projectId: params.projectId,
+      staffIdCard: params.staffIdCard
+    }
+  })
+}
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue
@@ -28,8 +28,10 @@
    </div>
    <project-analysis-dialog
      :visible.sync="projectAnalysisDialogVisible"
+      :project-id="projectId"
      :person="currentProjectAnalysisPerson"
      :source="projectAnalysisSource"
+      :model-summary="projectAnalysisModelSummary"
      :project-name="projectInfo.projectName"
      @close="handleProjectAnalysisDialogClose"
    />
@@ -86,6 +88,11 @@ export default {
      projectAnalysisDialogVisible: false,
      currentProjectAnalysisPerson: null,
      projectAnalysisSource: "riskPeople",
+      projectAnalysisModelSummary: {
+        modelCount: 0,
+        currentModel: "-",
+        riskTags: [],
+      },
    };
  },
  computed: {
@@ -130,6 +137,10 @@ export default {
    openProjectAnalysisDialog(source, person) {
      this.projectAnalysisSource = source || "riskPeople";
      this.currentProjectAnalysisPerson = person || null;
+      this.projectAnalysisModelSummary = this.buildProjectAnalysisModelSummary(
+        this.projectAnalysisSource,
+        this.currentProjectAnalysisPerson
+      );
      this.projectAnalysisDialogVisible = true;
    },
    handleProjectAnalysisDialogClose() {
@@ -140,6 +151,30 @@ export default {
      this.projectAnalysisDialogVisible = false;
      this.currentProjectAnalysisPerson = null;
      this.projectAnalysisSource = "riskPeople";
+      this.projectAnalysisModelSummary = {
+        modelCount: 0,
+        currentModel: "-",
+        riskTags: [],
+      };
+    },
+    buildProjectAnalysisModelSummary(source, person) {
+      const safePerson = person || {};
+      const riskTags = Array.isArray(safePerson.riskPointTagList)
+        ? safePerson.riskPointTagList
+        : Array.isArray(safePerson.hitTagList)
+          ? safePerson.hitTagList
+          : [];
+
+      return {
+        staffIdCard: safePerson.idNo || safePerson.staffIdCard || "",
+        modelCount: safePerson.modelCount || (Array.isArray(safePerson.modelNames) ? safePerson.modelNames.length : 0),
+        currentModel: source === "riskModelPeople"
+          ? (Array.isArray(safePerson.modelNames) && safePerson.modelNames.length
+            ? safePerson.modelNames.join("、")
+            : safePerson.modelName || "-")
+          : ((riskTags[0] && riskTags[0].modelName) || "-"),
+        riskTags,
+      };
    },
    async loadOverviewData() {
      if (!this.projectId) {
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
@@ -1,46 +1,95 @@
 <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>
+    <template v-if="detailGroups.length">
+      <section
+        v-for="(group, groupIndex) in detailGroups"
+        :key="`${group.groupCode || group.groupType || groupIndex}-group`"
+        class="abnormal-card"
+      >
+        <div class="abnormal-card__header">
+          <div class="abnormal-card__title">{{ group.groupName || "异常明细" }}</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"
+        <el-table
+          v-if='group.groupType === "BANK_STATEMENT"'
+          :data="group.records || []"
+          class="abnormal-table"
        >
-          <span class="summary-row__label">{{ item.accountNo }}</span>
-          <span class="summary-row__value">{{ item.description }}</span>
+          <el-table-column prop="trxDate" label="交易时间" min-width="160" />
+          <el-table-column label="本方账户" min-width="220">
+            <template slot-scope="scope">
+              <div class="multi-line-cell">
+                <div class="primary-text">{{ scope.row.leAccountNo || "-" }}</div>
+                <div class="secondary-text">{{ scope.row.leAccountName || "-" }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="对方账户" min-width="220">
+            <template slot-scope="scope">
+              <div class="multi-line-cell">
+                <div class="primary-text">{{ scope.row.customerAccountName || "-" }}</div>
+                <div class="secondary-text">{{ scope.row.customerAccountNo || "-" }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="摘要/交易类型" min-width="220">
+            <template slot-scope="scope">
+              <div class="multi-line-cell">
+                <div class="primary-text">{{ scope.row.userMemo || "-" }}</div>
+                <div class="secondary-text">{{ scope.row.cashType || "-" }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="异常标签" min-width="220">
+            <template slot-scope="scope">
+              <div v-if="scope.row.hitTags && scope.row.hitTags.length" class="tag-list">
+                <el-tag
+                  v-for="(tag, index) in scope.row.hitTags"
+                  :key="`${scope.row.bankStatementId || index}-tag-${index}`"
+                  size="mini"
+                  effect="plain"
+                >
+                  {{ tag.ruleName }}
+                </el-tag>
+              </div>
+              <span v-else class="summary-row__label">-</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="displayAmount" label="交易金额" min-width="140" />
+        </el-table>
+
+        <div v-else-if='group.groupType === "OBJECT"' class="object-card-grid">
+          <article
+            v-for="(item, index) in group.records || []"
+            :key="`${item.title || index}-object`"
+            class="object-card"
+          >
+            <div class="object-card__title">{{ item.title || "-" }}</div>
+            <div class="object-card__subtitle">{{ item.subtitle || "-" }}</div>
+            <div v-if="item.riskTags && item.riskTags.length" class="tag-list">
+              <el-tag
+                v-for="(tag, tagIndex) in item.riskTags"
+                :key="`${item.title || index}-risk-${tagIndex}`"
+                size="mini"
+                effect="plain"
+              >
+                {{ tag }}
+              </el-tag>
+            </div>
+            <p class="object-card__summary">{{ item.summary || "-" }}</p>
+            <div
+              v-for="(field, fieldIndex) in item.extraFields || []"
+              :key="`${item.title || index}-field-${fieldIndex}`"
+              class="summary-row"
+            >
+              <span class="summary-row__label">{{ field.label }}</span>
+              <span class="summary-row__value">{{ field.value }}</span>
+            </div>
+          </article>
        </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>
+    </template>
+    <el-empty v-else :image-size="80" description="暂无异常明细" />
  </div>
 </template>

@@ -51,12 +100,15 @@ export default {
    detailData: {
      type: Object,
      default: () => ({
-        transactionList: [],
-        frequentTransferSummary: [],
-        relatedTradeSummary: [],
+        groups: [],
      }),
    },
  },
+  computed: {
+    detailGroups() {
+      return Array.isArray(this.detailData && this.detailData.groups) ? this.detailData.groups : [];
+    },
+  },
 };
 </script>

@@ -74,10 +126,6 @@ export default {
 }

 .abnormal-card__header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 16px;
  margin-bottom: 16px;
 }

@@ -97,30 +145,70 @@ export default {
  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 {
+.multi-line-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
 }

+.primary-text {
+  color: #0f172a;
+}
+
+.secondary-text,
 .summary-row__label {
  font-size: 12px;
  color: #64748b;
 }

-.summary-row__value {
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.object-card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.object-card {
+  padding: 16px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.object-card__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.object-card__subtitle {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.object-card__summary {
+  margin: 12px 0;
  font-size: 13px;
  line-height: 1.7;
  color: #1e293b;
 }
+
+.summary-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.summary-row__value {
+  font-size: 13px;
+  color: #1e293b;
+  text-align: right;
+}
 </style>
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
@@ -2,7 +2,7 @@
  <el-dialog
    title="项目分析"
    :visible.sync="visibleProxy"
-    width="1280px"
+    width="1440px"
    append-to-body
    custom-class="project-analysis-dialog"
    @close="handleDialogClosed"
@@ -12,7 +12,19 @@
        class="project-analysis-layout__sidebar"
        :sidebar-data="dialogData.sidebar"
      />
-      <div class="project-analysis-layout__main">
+      <div v-loading="detailLoading" class="project-analysis-layout__main">
+        <el-alert
+          v-if="detailError"
+          :closable="false"
+          class="project-analysis-layout__alert"
+          type="error"
+          show-icon
+          :title="detailError"
+        >
+          <template slot="default">
+            <el-button type="text" size="mini" @click="handleRetryDetail">重试</el-button>
+          </template>
+        </el-alert>
        <div
          v-if='dialogData.sourceSummary.showCurrentModel && source === "riskModelPeople"'
          class="source-summary"
@@ -43,6 +55,7 @@
 </template>

 <script>
+import { getOverviewPersonAnalysisDetail } from "@/api/ccdi/projectOverview";
 import ProjectAnalysisAbnormalTab from "./ProjectAnalysisAbnormalTab";
 import ProjectAnalysisPlaceholderTab from "./ProjectAnalysisPlaceholderTab";
 import ProjectAnalysisSidebar from "./ProjectAnalysisSidebar";
@@ -60,6 +73,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    projectId: {
+      type: [String, Number],
+      default: null,
+    },
    person: {
      type: Object,
      default: () => null,
@@ -68,6 +85,14 @@ export default {
      type: String,
      default: "riskPeople",
    },
+    modelSummary: {
+      type: Object,
+      default: () => ({
+        modelCount: 0,
+        currentModel: "-",
+        riskTags: [],
+      }),
+    },
    projectName: {
      type: String,
      default: "",
@@ -76,15 +101,30 @@ export default {
  data() {
    return {
      activeTab: "abnormalDetail",
+      detailLoading: false,
+      detailError: "",
+      detailData: null,
    };
  },
  computed: {
    dialogData() {
-      return buildProjectAnalysisDialogData({
+      const mockData = buildProjectAnalysisDialogData({
        person: this.person,
        source: this.source,
        projectName: this.projectName,
      });
+      return {
+        ...mockData,
+        sidebar: {
+          ...mockData.sidebar,
+          basicInfo: (this.detailData && this.detailData.basicInfo) || mockData.sidebar.basicInfo,
+          modelSummary: {
+            ...mockData.sidebar.modelSummary,
+            ...(this.modelSummary || {}),
+          },
+        },
+        abnormalDetail: (this.detailData && this.detailData.abnormalDetail) || mockData.abnormalDetail,
+      };
    },
    visibleProxy: {
      get() {
@@ -99,12 +139,45 @@ export default {
    visible(value) {
      if (value) {
        this.resetDialogState();
+        this.fetchDetailData();
      }
    },
  },
  methods: {
    resetDialogState() {
      this.activeTab = "abnormalDetail";
+      this.detailLoading = false;
+      this.detailError = "";
+      this.detailData = null;
+    },
+    resolveStaffIdCard() {
+      return (this.modelSummary && this.modelSummary.staffIdCard)
+        || (this.person && (this.person.idNo || this.person.staffIdCard))
+        || "";
+    },
+    async fetchDetailData() {
+      const staffIdCard = this.resolveStaffIdCard();
+      if (!this.projectId || !staffIdCard) {
+        return;
+      }
+      this.detailLoading = true;
+      this.detailError = "";
+      try {
+        const response = await getOverviewPersonAnalysisDetail({
+          projectId: this.projectId,
+          staffIdCard,
+        });
+        this.detailData = (response && response.data) || null;
+      } catch (error) {
+        this.detailError = "项目分析详情加载失败，请稍后重试";
+        this.detailData = null;
+        console.error("加载项目分析详情失败", error);
+      } finally {
+        this.detailLoading = false;
+      }
+    },
+    handleRetryDetail() {
+      this.fetchDetailData();
    },
    getTabData(tabKey) {
      return (
@@ -130,7 +203,7 @@ export default {
 }

 .project-analysis-layout__sidebar {
-  flex: 0 0 320px;
+  flex: 0 0 340px;
 }

 .project-analysis-layout__main {
@@ -138,6 +211,10 @@ export default {
  min-width: 0;
 }

+.project-analysis-layout__alert {
+  margin-bottom: 16px;
+}
+
 .source-summary {
  display: flex;
  align-items: center;
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
@@ -39,11 +39,11 @@
        <div v-if="sidebarData.modelSummary.riskTags.length" class="tag-list">
          <el-tag
            v-for="(tag, index) in sidebarData.modelSummary.riskTags"
-            :key="`${tag}-${index}`"
+            :key="`${formatRiskTag(tag)}-${index}`"
            size="mini"
            effect="plain"
          >
-            {{ tag }}
+            {{ formatRiskTag(tag) }}
          </el-tag>
        </div>
        <span v-else class="sidebar-field__value">暂无异常标签</span>
@@ -72,6 +72,17 @@ export default {
      }),
    },
  },
+  methods: {
+    formatRiskTag(tag) {
+      if (typeof tag === "string") {
+        return tag;
+      }
+      if (tag && typeof tag === "object") {
+        return tag.ruleName || tag.label || tag.name || "";
+      }
+      return "";
+    },
+  },
 };
 </script>

--- a/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
@@ -262,12 +262,39 @@ export function buildProjectAnalysisDialogData({ person, source = "riskPeople",
      currentModelValue,
    },
    abnormalDetail: {
-      transactionList: projectAnalysisTransactionTemplate.map((item, index) => ({
-        ...item,
-        ownAccountName: index === 0 ? `${displayName} / ${item.ownAccountName}` : item.ownAccountName,
-      })),
-      frequentTransferSummary: projectAnalysisFrequentTransferTemplate,
-      relatedTradeSummary: projectAnalysisRelatedTradeTemplate,
+      groups: [
+        {
+          groupCode: "BANK_STATEMENT",
+          groupName: "流水异常明细",
+          groupType: "BANK_STATEMENT",
+          records: projectAnalysisTransactionTemplate.map((item, index) => ({
+            bankStatementId: index + 1,
+            trxDate: item.tradeTime,
+            leAccountNo: item.ownAccountName,
+            leAccountName: index === 0 ? displayName : "关联账户",
+            customerAccountName: item.counterpartyName,
+            customerAccountNo: item.counterpartyName,
+            userMemo: item.tradeType,
+            cashType: item.tradeType,
+            hitTags: [],
+            displayAmount: item.tradeAmount,
+          })),
+        },
+        {
+          groupCode: "RELATED_OBJECT",
+          groupName: "异常对象摘要",
+          groupType: "OBJECT",
+          records: projectAnalysisRelatedTradeTemplate.map((item, index) => ({
+            title: item.title,
+            subtitle: projectAnalysisFrequentTransferTemplate[index]
+              ? projectAnalysisFrequentTransferTemplate[index].accountNo
+              : "异常对象",
+            riskTags: [],
+            summary: item.description,
+            extraFields: [],
+          })),
+        },
+      ],
    },
  };
 }