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

2026-03-25 14:09:47 +08:00
parent a13c73f9a8
commit 85f4e7bc61
7 changed files with 362 additions and 37 deletions
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
+++ b/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>
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
@@ -13,36 +13,28 @@
        :sidebar-data="dialogData.sidebar"
      />
      <div class="project-analysis-layout__main">
+        <div
+          v-if='dialogData.sourceSummary.showCurrentModel && source === "riskModelPeople"'
+          class="source-summary"
+        >
+          <span class="source-summary__label">当前命中模型</span>
+          <span class="source-summary__value">{{ dialogData.sourceSummary.currentModelValue }}</span>
+        </div>
        <el-tabs v-model="activeTab" stretch>
          <el-tab-pane label="异常明细" name="abnormalDetail">
-            <div class="project-analysis-tab-placeholder">
-              <div class="tab-placeholder-title">异常明细</div>
-              <div class="tab-placeholder-text">{{ getTabDescription("abnormalDetail") }}</div>
-            </div>
+            <project-analysis-abnormal-tab :detail-data="dialogData.abnormalDetail" />
          </el-tab-pane>
          <el-tab-pane label="资产分析" name="assetAnalysis">
-            <div class="project-analysis-tab-placeholder">
-              <div class="tab-placeholder-title">资产分析</div>
-              <div class="tab-placeholder-text">{{ getTabDescription("assetAnalysis") }}</div>
-            </div>
+            <project-analysis-placeholder-tab :tab-data="getTabData('assetAnalysis')" />
          </el-tab-pane>
          <el-tab-pane label="征信摘要" name="creditSummary">
-            <div class="project-analysis-tab-placeholder">
-              <div class="tab-placeholder-title">征信摘要</div>
-              <div class="tab-placeholder-text">{{ getTabDescription("creditSummary") }}</div>
-            </div>
+            <project-analysis-placeholder-tab :tab-data="getTabData('creditSummary')" />
          </el-tab-pane>
          <el-tab-pane label="关系图谱" name="relationshipGraph">
-            <div class="project-analysis-tab-placeholder">
-              <div class="tab-placeholder-title">关系图谱</div>
-              <div class="tab-placeholder-text">{{ getTabDescription("relationshipGraph") }}</div>
-            </div>
+            <project-analysis-placeholder-tab :tab-data="getTabData('relationshipGraph')" />
          </el-tab-pane>
          <el-tab-pane label="资金流向" name="fundFlow">
-            <div class="project-analysis-tab-placeholder">
-              <div class="tab-placeholder-title">资金流向</div>
-              <div class="tab-placeholder-text">{{ getTabDescription("fundFlow") }}</div>
-            </div>
+            <project-analysis-placeholder-tab :tab-data="getTabData('fundFlow')" />
          </el-tab-pane>
        </el-tabs>
      </div>
@@ -51,12 +43,16 @@
 </template>

 <script>
+import ProjectAnalysisAbnormalTab from "./ProjectAnalysisAbnormalTab";
+import ProjectAnalysisPlaceholderTab from "./ProjectAnalysisPlaceholderTab";
 import ProjectAnalysisSidebar from "./ProjectAnalysisSidebar";
 import { buildProjectAnalysisDialogData } from "./preliminaryCheck.mock";

 export default {
  name: "ProjectAnalysisDialog",
  components: {
+    ProjectAnalysisAbnormalTab,
+    ProjectAnalysisPlaceholderTab,
    ProjectAnalysisSidebar,
  },
  props: {
@@ -110,9 +106,13 @@ export default {
    resetDialogState() {
      this.activeTab = "abnormalDetail";
    },
-    getTabDescription(tabKey) {
-      const currentTab = this.dialogData.tabs.find((item) => item.key === tabKey);
-      return currentTab ? currentTab.description : "";
+    getTabData(tabKey) {
+      return (
+        this.dialogData.tabs.find((item) => item.key === tabKey) || {
+          label: "",
+          description: "",
+        }
+      );
    },
    handleDialogClosed() {
      this.resetDialogState();
@@ -138,23 +138,24 @@ export default {
  min-width: 0;
 }

-.project-analysis-tab-placeholder {
-  min-height: 560px;
-  padding: 24px;
-  border: 1px solid #e2e8f0;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+.source-summary {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding: 14px 16px;
+  border: 1px solid #fde68a;
+  background: #fffbeb;
 }

-.tab-placeholder-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: #0f172a;
+.source-summary__label {
+  font-size: 12px;
+  color: #92400e;
 }

-.tab-placeholder-text {
-  margin-top: 8px;
+.source-summary__value {
  font-size: 13px;
-  line-height: 1.7;
-  color: #64748b;
+  font-weight: 600;
+  color: #b45309;
 }
 </style>
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue
@@ -0,0 +1,43 @@
+<template>
+  <section class="project-analysis-placeholder-tab">
+    <div class="placeholder-title">{{ tabData.label }}</div>
+    <div class="placeholder-text">{{ tabData.description }}</div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "ProjectAnalysisPlaceholderTab",
+  props: {
+    tabData: {
+      type: Object,
+      default: () => ({
+        label: "",
+        description: "",
+      }),
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.project-analysis-placeholder-tab {
+  min-height: 560px;
+  padding: 24px;
+  border: 1px solid #e2e8f0;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+}
+
+.placeholder-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.placeholder-text {
+  margin-top: 8px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: #64748b;
+}
+</style>
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
@@ -156,6 +156,47 @@ export const projectAnalysisTabs = [
  },
 ];

+const projectAnalysisTransactionTemplate = [
+  {
+    tradeTime: "2024-02-18 10:24:11",
+    ownAccountName: "本人尾号 6222 / 工资卡",
+    counterpartyName: "张某某 / 6222****9087",
+    tradeType: "转账汇款",
+    tradeAmount: "128,000.00",
+    markStatus: "已标记关注",
+  },
+  {
+    tradeTime: "2024-02-20 16:40:32",
+    ownAccountName: "本人尾号 6217 / 二类户",
+    counterpartyName: "某贸易公司 / 对公账户",
+    tradeType: "往来款",
+    tradeAmount: "86,500.00",
+    markStatus: "待复核",
+  },
+];
+
+const projectAnalysisFrequentTransferTemplate = [
+  {
+    accountNo: "6222****1234",
+    description: "近 30 日出现多次短周期往返转账，交易对象集中于关联人员与外部中介账户。",
+  },
+  {
+    accountNo: "6217****2288",
+    description: "同日多笔拆分入账后快速转出，摘要模式高度相似。",
+  },
+];
+
+const projectAnalysisRelatedTradeTemplate = [
+  {
+    title: "关联人员往来",
+    description: "存在与同部门人员、历史共同项目人员的高频资金往来记录。",
+  },
+  {
+    title: "项目相关交易",
+    description: "部分交易时间靠近项目关键节点，需结合业务资料进一步核验。",
+  },
+];
+
 function normalizeProjectAnalysisTags(person) {
  const sourceTags = Array.isArray(person && person.riskPointTagList)
    ? person.riskPointTagList
@@ -194,6 +235,8 @@ function resolveCurrentModel(person, source) {
 export function buildProjectAnalysisDialogData({ person, source = "riskPeople", projectName = "" } = {}) {
  const safePerson = person || {};
  const riskTags = normalizeProjectAnalysisTags(safePerson);
+  const currentModelValue = resolveCurrentModel(safePerson, source);
+  const displayName = safePerson.name || safePerson.staffName || "-";

  return {
    tabs: projectAnalysisTabs,
@@ -207,11 +250,25 @@ export function buildProjectAnalysisDialogData({ person, source = "riskPeople",
      },
      modelSummary: {
        modelCount: safePerson.modelCount || (Array.isArray(safePerson.modelNames) ? safePerson.modelNames.length : "-"),
-        currentModel: resolveCurrentModel(safePerson, source),
+        currentModel: currentModelValue,
+        hasRiskTags: riskTags.length > 0,
        riskTags,
      },
      recordSummary: "排查记录摘要为静态承载内容，本轮用于展示统一工作台侧栏结构。",
    },
+    sourceSummary: {
+      showCurrentModel: source === "riskModelPeople",
+      currentModelLabel: "当前命中模型",
+      currentModelValue,
+    },
+    abnormalDetail: {
+      transactionList: projectAnalysisTransactionTemplate.map((item, index) => ({
+        ...item,
+        ownAccountName: index === 0 ? `${displayName} / ${item.ownAccountName}` : item.ownAccountName,
+      })),
+      frequentTransferSummary: projectAnalysisFrequentTransferTemplate,
+      relatedTradeSummary: projectAnalysisRelatedTradeTemplate,
+    },
  };
 }

--- a/ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js
@@ -0,0 +1,36 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const dialog = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue"
+  ),
+  "utf8"
+);
+const abnormalTab = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue"
+  ),
+  "utf8"
+);
+
+[
+  "<project-analysis-abnormal-tab",
+  ':detail-data="dialogData.abnormalDetail"',
+  "source-summary",
+].forEach((token) => assert(dialog.includes(token), token));
+
+[
+  "异常交易明细",
+  "交易时间",
+  "本方账号/主体",
+  "对方名称/账户",
+  "摘要/交易类型",
+  "交易金额",
+  "标记状态",
+  "频繁转账账户异常摘要",
+  "关联交易异常摘要",
+].forEach((token) => assert(abnormalTab.includes(token), token));
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js
@@ -0,0 +1,30 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const sidebar = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue"
+  ),
+  "utf8"
+);
+const mockSource = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/preliminaryCheck.mock.js"
+  ),
+  "utf8"
+);
+
+[
+  'sidebarData.basicInfo.staffCode || "-"',
+  'sidebarData.basicInfo.department || "-"',
+  "暂无异常标签",
+].forEach((token) => assert(sidebar.includes(token), token));
+
+[
+  'staffCode: safePerson.staffCode || "-"',
+  'department: safePerson.department || "-"',
+  "riskTags.length",
+].forEach((token) => assert(mockSource.includes(token), token));
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js
@@ -0,0 +1,32 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const dialog = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue"
+  ),
+  "utf8"
+);
+const mockSource = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/preliminaryCheck.mock.js"
+  ),
+  "utf8"
+);
+
+[
+  'source === "riskModelPeople"',
+  "当前命中模型",
+  "dialogData.sourceSummary",
+  "source-summary__label",
+  "source-summary__value",
+].forEach((token) => assert(dialog.includes(token), token));
+
+[
+  "sourceSummary",
+  "showCurrentModel: source === \"riskModelPeople\"",
+  "currentModelLabel: \"当前命中模型\"",
+].forEach((token) => assert(mockSource.includes(token), token));