新增专项排查图谱展示

2026-05-08 10:22:00 +08:00
parent d561d068d6
commit 37e17ac903
3 changed files with 238 additions and 68 deletions
--- 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;
 }