新增专项排查图谱展示

2026-05-08 10:22:00 +08:00
parent d561d068d6
commit 37e17ac903
3 changed files with 238 additions and 68 deletions
--- a/docs/reports/implementation/2026-05-07-project-special-check-graph-atlas-frontend-record.md
+++ b/docs/reports/implementation/2026-05-07-project-special-check-graph-atlas-frontend-record.md
@@ -0,0 +1,36 @@
+# 项目详情专项排查图谱嵌入前端实施记录
+
+## 修改内容
+
+- 新增 `GraphAtlasSection.vue`，实现共用证件号输入、资金图谱/关系图谱页签、证件号标准化、md5 加密和 iframe 链接拼接。
+- 调整 `SpecialCheck.vue`，将原“图谱外链展示”占位卡片替换为图谱展示组件。
+- 调整专项排查空数据展示结构，资产负债核查无数据时仍展示图谱模块，保证图谱入口属于专项排查页面本身。
+
+## 影响范围
+
+- 仅影响项目详情页“专项排查”中的图谱展示区域。
+- 不涉及后端接口、数据库、权限、菜单和项目详情顶部一级导航。
+- 不保存证件号或 md5 结果，不新增身份证格式校验，不为外部图谱服务增加兜底或降级逻辑。
+
+## 验证情况
+
+- `cd ruoyi-ui && nvm use && npm run build:prod`：构建通过；仅出现既有包体积 warning。
+- 真实项目详情页专项排查浏览器验证：
+  - 验证地址：`http://localhost:8081/ccdiProject/detail/90338?tab=special`
+  - 验证项目：`验收测试-20260423-项目P0-01`
+  - 资产负债核查有数据时，图谱模块展示在“员工家庭资产负债专项核查”和“拓展查询”之间。
+  - 未输入证件号时点击“查询图谱”：提示“请输入证件号”，未生成 iframe。
+  - 未输入证件号时在输入框回车：提示“请输入证件号”，未生成 iframe。
+  - 输入 `110101199003074211` 后点击“查询图谱”，资金图谱 iframe `src` 包含 `id=ccdi_lanxi_trans`、`atlasToken=F4BBA291A285858BAF4526C6EC312388`、`"vId":"idno_node/9b1b5eba4a26c9a68ff1ca06f40bee1b"`。
+  - 输入 ` 33078219900101123x ` 后回车，资金图谱 iframe `src` 包含 `"vId":"idno_node/233c8519f86a57b1f00ec88a32152ce3"`，确认已执行 `trim + x 转 X + md5`。
+  - 切换到“关系图谱”后，iframe `src` 包含 `id=lanxitest`、`atlasToken=2C914E5E1FBFBC4AD15163E0AB03B800`、`"vId":"rel_node/233c8519f86a57b1f00ec88a32152ce3"`。
+- 真实项目详情页专项排查空数据浏览器验证：
+  - 验证地址：`http://localhost:8081/ccdiProject/detail/90336?tab=special`
+  - 验证项目：`456`
+  - 页面展示“暂无员工家庭资产负债核查数据”后，仍展示“图谱展示”模块和证件号输入框，并位于“拓展查询”上方。
+- 当前外部图谱内容打不开属于预期，本次验收只检查 iframe 链接正确。
+- 测试结束后已关闭本轮启动的前端 dev server，`8081` 端口无监听进程。
+
+## 遗留事项
+
+- 无。
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/GraphAtlasSection.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/GraphAtlasSection.vue
@@ -0,0 +1,192 @@
+<template>
+  <section class="graph-atlas-card">
+    <div class="graph-atlas-header">
+      <div>
+        <div class="graph-atlas-title">图谱展示</div>
+        <div class="graph-atlas-subtitle">输入证件号后查看资金图谱和关系图谱</div>
+      </div>
+    </div>
+
+    <div class="graph-atlas-query">
+      <el-input
+        v-model="certNoInput"
+        class="graph-atlas-input"
+        clearable
+        placeholder="请输入证件号"
+        size="small"
+        @keyup.enter.native="handleQuery"
+      />
+      <el-button
+        type="primary"
+        size="small"
+        icon="el-icon-search"
+        @click="handleQuery"
+      >
+        查询图谱
+      </el-button>
+    </div>
+
+    <el-tabs v-model="activeGraphTab" class="graph-atlas-tabs">
+      <el-tab-pane
+        v-for="item in graphTabs"
+        :key="item.name"
+        :label="item.label"
+        :name="item.name"
+      />
+    </el-tabs>
+
+    <div v-if="!certNoHash" class="graph-atlas-empty">
+      <el-empty description="请输入证件号后查询图谱" />
+    </div>
+
+    <div v-else class="graph-atlas-frame-wrapper">
+      <iframe
+        :key="`${activeGraphTab}-${certNoHash}`"
+        class="graph-atlas-frame"
+        :src="currentGraphUrl"
+        title="专项排查图谱"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import md5 from "@/utils/md5";
+
+const GRAPH_ATLAS_CONFIG = {
+  fund: {
+    label: "资金图谱",
+    urlTemplate: 'http://64.202.65.112:8082/atlas/refactor/#/home/graph/downloadService?id=ccdi_lanxi_trans&mode=K_EXPAND&type=NORMAL&atlasToken=F4BBA291A285858BAF4526C6EC312388&params={"vId":"idno_node/{hash}"}',
+  },
+  relationship: {
+    label: "关系图谱",
+    urlTemplate: 'http://64.202.65.112:8082/atlas/refactor/#/home/graph/downloadService?id=lanxitest&mode=K_EXPAND&type=NORMAL&atlasToken=2C914E5E1FBFBC4AD15163E0AB03B800&params={"vId":"rel_node/{hash}"}',
+  },
+};
+
+export default {
+  name: "GraphAtlasSection",
+  data() {
+    return {
+      certNoInput: "",
+      certNoHash: "",
+      activeGraphTab: "fund",
+      graphTabs: [
+        { name: "fund", label: GRAPH_ATLAS_CONFIG.fund.label },
+        { name: "relationship", label: GRAPH_ATLAS_CONFIG.relationship.label },
+      ],
+    };
+  },
+  computed: {
+    currentGraphUrl() {
+      if (!this.certNoHash) {
+        return "";
+      }
+      const config = GRAPH_ATLAS_CONFIG[this.activeGraphTab];
+      return config.urlTemplate.replace("{hash}", this.certNoHash);
+    },
+  },
+  methods: {
+    handleQuery() {
+      const certNo = this.normalizeCertNo(this.certNoInput);
+      if (!certNo) {
+        this.certNoHash = "";
+        this.$message.warning("请输入证件号");
+        return;
+      }
+      this.certNoHash = md5(certNo);
+    },
+    normalizeCertNo(value) {
+      const certNo = value === null || value === undefined ? "" : String(value).trim();
+      if (certNo.endsWith("x")) {
+        return `${certNo.slice(0, -1)}X`;
+      }
+      return certNo;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.graph-atlas-card {
+  margin-top: 16px;
+  padding: 20px;
+  background: #fff;
+  border: 1px solid var(--ccdi-border);
+  border-radius: 14px;
+  box-shadow: var(--ccdi-shadow);
+}
+
+.graph-atlas-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.graph-atlas-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ccdi-text-primary);
+}
+
+.graph-atlas-subtitle {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--ccdi-text-muted);
+}
+
+.graph-atlas-query {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.graph-atlas-input {
+  width: 320px;
+}
+
+.graph-atlas-tabs {
+  margin-top: 16px;
+}
+
+.graph-atlas-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 360px;
+  border: 1px dashed #d9e3ee;
+  background: #f8fbfe;
+}
+
+.graph-atlas-frame-wrapper {
+  overflow: hidden;
+  border: 1px solid #d9e3ee;
+  background: #fff;
+}
+
+.graph-atlas-frame {
+  display: block;
+  width: 100%;
+  height: calc(100vh - 280px);
+  min-height: 560px;
+  max-height: 760px;
+  border: 0;
+}
+
+@media (max-width: 768px) {
+  .graph-atlas-query {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .graph-atlas-input {
+    width: 100%;
+  }
+
+  .graph-atlas-frame {
+    min-height: 480px;
+  }
+}
+</style>
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue
@@ -6,14 +6,15 @@
      </div>
    </div>

-    <div v-else-if="pageState === 'empty'" class="special-check-state">
-      <div class="state-card">
-        <el-empty description="暂无员工家庭资产负债核查数据" />
-      </div>
-    </div>
-
    <div v-else class="special-check-page">
+      <div v-if="pageState === 'empty'" class="special-check-state">
+        <div class="state-card">
+          <el-empty description="暂无员工家庭资产负债核查数据" />
+        </div>
+      </div>
+
      <family-asset-liability-section
+        v-else
        :rows="currentData.rows"
        :loading="false"
        :project-id="projectId"
@@ -22,22 +23,7 @@
        @evidence-confirm="$emit('evidence-confirm', $event)"
      />

-      <section class="graph-placeholder-card">
-        <div class="graph-placeholder-header">
-          <div>
-            <div class="graph-placeholder-title">图谱外链展示</div>
-            <div class="graph-placeholder-subtitle">用于后续接入外链图谱页面</div>
-          </div>
-          <el-tag size="mini" type="info" effect="plain">占位中</el-tag>
-        </div>
-
-        <div class="graph-placeholder-body">
-          <div class="graph-placeholder-text">
-            当前卡片用于预留专项核查图谱入口，后续接入外链地址后可在此直接跳转展示。
-          </div>
-          <el-button type="primary" size="small" disabled>待接入</el-button>
-        </div>
-      </section>
+      <graph-atlas-section />
    </div>

    <div v-if="projectId" class="special-check-extended-wrapper">
@@ -51,12 +37,14 @@ import { createSpecialCheckLoadedData, specialCheckStateData } from "./specialCh
 import { getFamilyAssetLiabilityList } from "@/api/ccdi/projectSpecialCheck";
 import ExtendedQuerySection from "./ExtendedQuerySection";
 import FamilyAssetLiabilitySection from "./FamilyAssetLiabilitySection";
+import GraphAtlasSection from "./GraphAtlasSection";

 export default {
  name: "SpecialCheck",
  components: {
    ExtendedQuerySection,
    FamilyAssetLiabilitySection,
+    GraphAtlasSection,
  },
  props: {
    projectId: {
@@ -155,52 +143,6 @@ export default {
  min-height: 400px;
 }

-.graph-placeholder-card {
-  margin-top: 16px;
-  min-height: 500px;
-  padding: 20px;
-  background: #fff;
-  border: 1px solid var(--ccdi-border);
-  border-radius: 14px;
-  box-shadow: var(--ccdi-shadow);
-}
-
-.graph-placeholder-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.graph-placeholder-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--ccdi-text-primary);
-}
-
-.graph-placeholder-subtitle {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--ccdi-text-muted);
-}
-
-.graph-placeholder-body {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-top: 18px;
-  padding: 16px 18px;
-  border: 1px dashed #d9e3ee;
-  background: #f8fbfe;
-}
-
-.graph-placeholder-text {
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--ccdi-text-secondary);
-}
-
 .special-check-extended-wrapper {
  margin-top: 16px;
 }