修复反向追溯图谱迁移问题

2026-06-22 16:57:37 +08:00
parent 7987d9a085
commit 3c4a665dc3
4 changed files with 285 additions and 165 deletions
--- a/docs/功能测试-反向追溯.md
+++ b/docs/功能测试-反向追溯.md
@@ -17,20 +17,24 @@
 |---:|---|---|---|
 | 1 | 页面入口 | 从菜单进入“反向追溯”，或直接访问 `/data_middleground/basic_traceability/reverse_direction_traceability` | 页面正常打开，显示电池条码输入框、查询、导出、重置按钮和空态区域 |
 | 2 | 空输入查询 | 不输入电池条码，点击“查询” | 页面提示请输入电池条码，不发起有效查询 |
-| 3 | 有效条码查询 | 输入存在追溯数据的电池条码，点击“查询” | 页面展示追溯节点树，节点包含物料名称、编码、批次、工序、时间、设备等信息 |
+| 3 | 有效条码查询 | 输入存在追溯数据的电池条码，点击“查询” | 页面通过 relation-graph 展示追溯图谱，节点包含物料名称、编码、批次、工序、时间、设备等信息 |
 | 4 | 无数据条码查询 | 输入不存在追溯数据的电池条码，点击“查询” | 页面保持空态或显示无节点，不出现脚本错误 |
 | 5 | 横向/纵向切换 | 查询出数据后，切换“横向图谱”和“纵向图谱” | 追溯节点展示方向切换，页面不丢失数据 |
-| 6 | 物料编码定位 | 查询出数据后，输入某个节点的物料编码，点击定位确认 | 匹配节点高亮并滚动到可视区域 |
-| 7 | 物料批次定位 | 输入某个节点的物料批次，点击定位确认 | 匹配节点高亮并滚动到可视区域 |
-| 8 | 工序单元定位 | 输入某个制成品节点的工序单元编码，点击定位确认 | 匹配节点高亮并滚动到可视区域；不存在时提示未找到匹配节点 |
-| 9 | 导出前校验 | 未输入电池条码时点击“导出” | 页面提示请输入电池条码 |
-| 10 | 查询前导出 | 输入电池条码但未查询出追溯树，点击“导出” | 页面提示请先查询追溯数据后再导出 |
-| 11 | 正常导出 | 查询出追溯树后点击“导出” | 调用导出接口，浏览器开始下载或打开导出文件 |
-| 12 | 重置功能 | 查询出追溯树后点击“重置” | 输入框、追溯树、定位输入和高亮状态全部清空 |
-| 13 | 国际化检查 | 切换中英文语言后重新进入页面 | 页面按钮、节点字段和提示文案随语言切换显示 |
+| 6 | 图谱拖拽与缩放 | 查询出数据后，在图谱空白区域拖拽，并使用鼠标滚轮缩放 | 图谱内容可以平移和缩放，节点不会被页面容器裁切 |
+| 7 | 节点内容完整性 | 查看包含较多字段的节点，滚动节点内容区域 | 节点卡片外框完整显示，字段内容可在节点内部滚动查看 |
+| 8 | 物料编码定位 | 查询出数据后，输入某个节点的物料编码，点击定位确认 | 匹配节点高亮并居中聚焦到可视区域 |
+| 9 | 物料批次定位 | 输入某个节点的物料批次，点击定位确认 | 匹配节点高亮并居中聚焦到可视区域 |
+| 10 | 工序单元定位 | 输入某个制成品节点的工序单元编码，点击定位确认 | 匹配节点高亮并居中聚焦到可视区域；不存在时提示未找到匹配节点 |
+| 11 | 导出前校验 | 未输入电池条码时点击“导出” | 页面提示请输入电池条码 |
+| 12 | 查询前导出 | 输入电池条码但未查询出追溯树，点击“导出” | 页面提示请先查询追溯数据后再导出 |
+| 13 | 正常导出 | 查询出追溯树后点击“导出” | 调用导出接口，浏览器开始下载或打开导出文件 |
+| 14 | 重置功能 | 查询出追溯树后点击“重置” | 输入框、追溯树、定位输入和高亮状态全部清空 |
+| 15 | 国际化检查 | 切换中英文语言后重新进入页面 | 页面按钮、节点字段和提示文案随语言切换显示 |

 ## 回归关注点

 - 接口返回 `relation_graph.nodes` 或 `relation_graph.lines` 为空时页面不能报错。
+- 图谱必须使用 `relation-graph` 渲染，支持拖拽、缩放和定位聚焦。
+- 节点字段较多时，节点卡片外框不应被裁切，内容应可在卡片内部滚动查看。
 - 导出接口参数中的 `tree_list` 应为当前追溯树节点数组 JSON。
 - 路由参数携带 `battery_id` 时，页面应能自动查询对应追溯数据。
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
    "nprogress": "^0.2.0",
    "qs": "^6.11.0",
    "quill": "^1.3.7",
+    "relation-graph": "2.2.11",
    "screenfull": "^5.2.0",
    "sortablejs": "^1.15.0",
    "ua-parser-js": "^0.8.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
      quill:
        specifier: ^1.3.7
        version: 1.3.7
+      relation-graph:
+        specifier: 2.2.11
+        version: 2.2.11
      screenfull:
        specifier: ^5.2.0
        version: 5.2.0
@@ -1867,6 +1870,10 @@ packages:
    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
    engines: {node: 18 || 20 || >=22}

+  base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+
  base64-js@1.5.1:
    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}

@@ -2614,6 +2621,9 @@ packages:
    resolution: {integrity: sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==}
    engines: {node: '>4'}

+  css-line-break@2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+
  css-loader@3.6.0:
    resolution: {integrity: sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==}
    engines: {node: '>= 8.9.0'}
@@ -3828,6 +3838,10 @@ packages:
    peerDependencies:
      webpack: ^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0

+  html2canvas@1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+
  htmlparser2@3.10.1:
    resolution: {integrity: sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==}

@@ -5793,6 +5807,9 @@ packages:
    resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
    engines: {node: '>= 0.10'}

+  relation-graph@2.2.11:
+    resolution: {integrity: sha512-k8jrZkkNYMIKqGN0g8ZHhqd0sP9RAvem6xw9UN9FD59TiVlKx1Vsvi7E/Kh9Z1tZGltdrPo0ZERsUn6Ydoc0Sw==}
+
  remove-trailing-separator@1.1.0:
    resolution: {integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==}

@@ -6478,6 +6495,9 @@ packages:
  text-loader@0.0.1:
    resolution: {integrity: sha512-y2GvBFB9hibaHBRWE9xQhdENU1KppXnM9DCf6NueYPB/lnNX8ZzP3JLs1R1p3ObItcs+y8DBiPwelkJf8txe+g==}

+  text-segmentation@1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+
  text-table@0.2.0:
    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}

@@ -6802,6 +6822,9 @@ packages:
    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
    engines: {node: '>= 0.4.0'}

+  utrie@1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+
  uuid@3.4.0:
    resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
    deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
@@ -8207,9 +8230,7 @@ snapshots:
      source-map: 0.6.1
      string-length: 2.0.0
    transitivePeerDependencies:
-      - bufferutil
      - supports-color
-      - utf-8-validate

  '@jest/source-map@24.9.0':
    dependencies:
@@ -9546,6 +9567,8 @@ snapshots:

  balanced-match@4.0.4: {}

+  base64-arraybuffer@1.0.2: {}
+
  base64-js@1.5.1: {}

  base@0.11.2:
@@ -10332,6 +10355,10 @@ snapshots:
      postcss: 7.0.39
      timsort: 0.3.0

+  css-line-break@2.1.0:
+    dependencies:
+      utrie: 1.0.2
+
  css-loader@3.6.0(webpack@4.47.0):
    dependencies:
      camelcase: 5.3.1
@@ -11819,6 +11846,11 @@ snapshots:
      util.promisify: 1.0.0
      webpack: 4.47.0

+  html2canvas@1.4.1:
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+
  htmlparser2@3.10.1:
    dependencies:
      domelementtype: 1.3.1
@@ -12466,9 +12498,7 @@ snapshots:
      pretty-format: 24.9.0
      throat: 4.1.0
    transitivePeerDependencies:
-      - bufferutil
      - supports-color
-      - utf-8-validate

  jest-leak-detector@24.9.0:
    dependencies:
@@ -14196,6 +14226,11 @@ snapshots:

  relateurl@0.2.7: {}

+  relation-graph@2.2.11:
+    dependencies:
+      html2canvas: 1.4.1
+      screenfull: 5.2.0
+
  remove-trailing-separator@1.1.0: {}

  renderkid@2.0.7:
@@ -15016,6 +15051,10 @@ snapshots:

  text-loader@0.0.1: {}

+  text-segmentation@1.0.3:
+    dependencies:
+      utrie: 1.0.2
+
  text-table@0.2.0: {}

  thenify-all@1.6.0:
@@ -15366,6 +15405,10 @@ snapshots:

  utils-merge@1.0.1: {}

+  utrie@1.0.2:
+    dependencies:
+      base64-arraybuffer: 1.0.2
+
  uuid@3.4.0: {}

  uuid@8.3.2: {}
--- a/src/views/data-platform/traceability/backward/index.vue
+++ b/src/views/data-platform/traceability/backward/index.vue
@@ -29,78 +29,79 @@

    <div v-loading="loading" class="traceability-page">
      <el-empty v-if="!hasGraph" :description="$t(key('enter_battery_id'))" />
-      <template v-else>
-        <div class="trace-toolbar">
-          <div class="trace-toolbar__group">
-            <span class="toolbar-label">{{ $t(key('view_type')) }}</span>
-            <el-radio-group v-model="viewType" size="mini">
+      <RelationGraph
+        v-else
+        ref="graphRef"
+        class="trace-graph"
+        :options="currentGraphOptions"
+        :on-node-click="onNodeClick"
+      >
+        <template #graph-plug>
+          <div class="trace-panel">
+            <div class="trace-panel__label">{{ $t(key('view_type')) }}:</div>
+            <el-radio-group v-model="currentCase" size="small" @change="renderGraph">
              <el-radio-button label="horizontal">{{ $t(key('horizontal')) }}</el-radio-button>
              <el-radio-button label="vertical">{{ $t(key('vertical')) }}</el-radio-button>
            </el-radio-group>
-          </div>
-          <div class="trace-toolbar__locate">
-            <span class="toolbar-label">{{ $t(key('position')) }}</span>
-            <el-input v-model.trim="locator.item_code" size="mini" clearable :placeholder="$t(key('enter_item_code'))" />
-            <el-button size="mini" type="primary" @click="locateNode('item_code', locator.item_code)">
-              {{ $t(key('confirm_position')) }}
-            </el-button>
-            <el-input v-model.trim="locator.item_batch" size="mini" clearable :placeholder="$t(key('enter_item_batch'))" />
-            <el-button size="mini" type="primary" @click="locateNode('item_batch', locator.item_batch)">
-              {{ $t(key('confirm_position')) }}
-            </el-button>
-            <el-input
-              v-model.trim="locator.workingsubclass_code"
-              size="mini"
-              clearable
-              :placeholder="$t(key('enter_work_unit'))"
-            />
-            <el-button size="mini" type="primary" @click="locateNode('workingsubclass_code', locator.workingsubclass_code, true)">
-              {{ $t(key('confirm_position')) }}
-            </el-button>
-          </div>
-        </div>

-        <div :class="['trace-tree-wrap', 'trace-tree-wrap--' + viewType]">
-          <el-tree
-            ref="tree"
-            class="trace-tree"
-            :data="treeData"
-            node-key="id"
-            default-expand-all
-            :expand-on-click-node="false"
-          >
-            <template #default="{ data }">
-              <div :class="['trace-node', { 'is-active': activeNodeId === data.id }]" :data-node-id="data.id" @click="activeNodeId = data.id">
-                <div class="trace-node__title">
-                  <el-tag size="mini" type="warning" effect="dark">{{ data.data.type_name || '-' }}</el-tag>
-                  <strong>{{ data.text || data.id }}</strong>
-                </div>
-                <div class="trace-node__body">
-                  <p>{{ $t(key('item_name')) }}: {{ data.data.item_name || '-' }}</p>
-                  <p>{{ $t(key('item_code')) }}: {{ data.data.item_code || '-' }}</p>
-                  <p>{{ $t(key('item_batch')) }}: {{ data.data.item_batch || '-' }}</p>
-                  <p>{{ $t(key('work_unit')) }}: {{ data.data.workingsubclass_code || '-' }}</p>
-                  <p>{{ $t(key('work_unit_name')) }}: {{ data.data.workingsubclass_name || '-' }}</p>
-                  <p>{{ $t(key('process_code')) }}: {{ data.data.process_code || '-' }}</p>
-                  <p>{{ $t(key('start_time')) }}: {{ data.data.start_time || '-' }}</p>
-                  <p>{{ $t(key('finish_time')) }}: {{ data.data.finish_time || '-' }}</p>
-                  <p>{{ $t(key('inspection_person')) }}: {{ data.data.inspection_person || '-' }}</p>
-                  <p>{{ $t(key('inspection_time')) }}: {{ data.data.inspection_time || '-' }}</p>
-                  <p>{{ $t(key('quality_person')) }}: {{ data.data.quality_person || '-' }}</p>
-                  <p>{{ $t(key('quality_time')) }}: {{ data.data.quality_time || '-' }}</p>
-                  <p>{{ $t(key('device_name')) }}: {{ data.data.device_name || '-' }}</p>
-                  <p>{{ $t(key('device_code')) }}: {{ data.data.device_code || '-' }}</p>
-                </div>
-              </div>
-            </template>
-          </el-tree>
-        </div>
-      </template>
+            <div class="trace-panel__label trace-panel__label--spaced">{{ $t(key('position')) }}:</div>
+            <div class="trace-panel__row">
+              <el-input v-model.trim="locator.item_code" size="small" clearable :placeholder="$t(key('enter_item_code'))" />
+              <el-button size="small" type="primary" @click="locateNode('item_code', locator.item_code)">
+                {{ $t(key('confirm_position')) }}
+              </el-button>
+            </div>
+            <div class="trace-panel__row">
+              <el-input v-model.trim="locator.item_batch" size="small" clearable :placeholder="$t(key('enter_item_batch'))" />
+              <el-button size="small" type="primary" @click="locateNode('item_batch', locator.item_batch)">
+                {{ $t(key('confirm_position')) }}
+              </el-button>
+            </div>
+            <div class="trace-panel__row">
+              <el-input
+                v-model.trim="locator.workingsubclass_code"
+                size="small"
+                clearable
+                :placeholder="$t(key('enter_work_unit'))"
+              />
+              <el-button size="small" type="primary" @click="locateNode('workingsubclass_code', locator.workingsubclass_code, true)">
+                {{ $t(key('confirm_position')) }}
+              </el-button>
+            </div>
+          </div>
+        </template>
+
+        <template #node="{ node }">
+          <div class="trace-node" :class="{ 'is-active': activeNodeId === String(node.id) }">
+            <div class="trace-node__tag">
+              <el-tag type="warning" effect="dark" size="small">{{ node.data.type_name || '-' }}</el-tag>
+            </div>
+            <div class="trace-node__title">{{ node.text || node.id }}</div>
+            <div class="trace-node__body">
+              <div class="trace-node__line">{{ $t(key('item_name')) }}: {{ node.data.item_name || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('item_code')) }}: {{ node.data.item_code || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('item_batch')) }}: {{ node.data.item_batch || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('work_unit')) }}: {{ node.data.workingsubclass_code || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('work_unit_name')) }}: {{ node.data.workingsubclass_name || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('process_code')) }}: {{ node.data.process_code || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('start_time')) }}: {{ node.data.start_time || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('finish_time')) }}: {{ node.data.finish_time || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('inspection_person')) }}: {{ node.data.inspection_person || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('inspection_time')) }}: {{ node.data.inspection_time || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('quality_person')) }}: {{ node.data.quality_person || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('quality_time')) }}: {{ node.data.quality_time || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('device_name')) }}: {{ node.data.device_name || '-' }}</div>
+              <div class="trace-node__line">{{ $t(key('device_code')) }}: {{ node.data.device_code || '-' }}</div>
+            </div>
+          </div>
+        </template>
+      </RelationGraph>
    </div>
  </d2-container>
 </template>

 <script>
+import RelationGraph from 'relation-graph'
 import { i18nMixin } from '@/composables/useI18n'
 import {
  exportBackwardTraceabilityTree,
@@ -109,6 +110,9 @@ import {

 export default {
  name: 'data-platform-traceability-backward',
+  components: {
+    RelationGraph
+  },
  mixins: [i18nMixin('page.data_platform.traceability.backward')],
  data () {
    return {
@@ -117,7 +121,7 @@ export default {
        battery_id: this.$route.params.battery_id || ''
      },
      traceData: {},
-      viewType: 'horizontal',
+      currentCase: 'horizontal',
      activeNodeId: '',
      locator: {
        item_code: '',
@@ -133,31 +137,85 @@ export default {
    hasGraph () {
      return Array.isArray(this.graph.nodes) && this.graph.nodes.length > 0
    },
-    treeData () {
-      if (!this.hasGraph) return []
-      const nodeMap = new Map()
-      this.graph.nodes.forEach(node => {
-        nodeMap.set(String(node.id), {
-          ...node,
-          id: String(node.id),
-          data: node.data || {},
-          children: []
-        })
-      })
-      const childIds = new Set()
-      const lines = Array.isArray(this.graph.lines) ? this.graph.lines : []
-      lines.forEach(line => {
-        const from = nodeMap.get(String(line.from))
-        const to = nodeMap.get(String(line.to))
-        if (from && to) {
-          from.children.push(to)
-          childIds.add(to.id)
+    horizontalOptions () {
+      return {
+        backgroundImageNoRepeat: true,
+        defaultNodeBorderWidth: 0,
+        defaultLineShape: 3,
+        defaultNodeShape: 0,
+        defaultJunctionPoint: 'tb',
+        defaultNodeWidth: 330,
+        defaultNodeHeight: 430,
+        defaultFocusRootNode: false,
+        downloadImageFileName: this.downloadName,
+        defaultLineColor: 'rgba(0, 186, 189, 1)',
+        defaultNodeColor: 'rgba(0, 206, 209, 1)',
+        moveToCenterWhenResize: true,
+        defaultLineMarker: {
+          markerWidth: 12,
+          markerHeight: 12,
+          refX: '10',
+          refY: 6,
+          data: 'M2,2 L10,6 L2,10 L6,6 L2,2'
+        },
+        layouts: [
+          {
+            label: this.$t(this.key('center')),
+            layoutName: 'tree',
+            layoutClassName: 'seeks-layout-center',
+            centerOffset_x: 0,
+            centerOffset_y: 0,
+            distance_coefficient: 1,
+            layoutDirection: 'v',
+            from: 'top',
+            min_per_width: 560,
+            max_per_width: 1100,
+            min_per_height: 560,
+            max_per_height: 1100
+          }
+        ]
+      }
+    },
+    verticalOptions () {
+      return {
+        defaultNodeShape: 1,
+        defaultNodeBorderWidth: 0,
+        defaultNodeWidth: 330,
+        defaultNodeHeight: 430,
+        defaultLineShape: 3,
+        defaultJunctionPoint: 'lr',
+        defaultFocusRootNode: false,
+        downloadImageFileName: this.downloadName,
+        defaultLineColor: 'rgba(0, 186, 189, 1)',
+        defaultNodeColor: 'rgba(0, 206, 209, 1)',
+        moveToCenterWhenResize: true,
+        layout: {
+          label: this.$t(this.key('center')),
+          layoutName: 'tree',
+          layoutClassName: 'seeks-layout-center',
+          defaultNodeShape: 0,
+          defaultLineShape: 1,
+          from: 'left',
+          min_per_width: 660,
+          max_per_width: 1100,
+          min_per_height: 560,
+          max_per_height: 700
+        },
+        defaultLineMarker: {
+          markerWidth: 12,
+          markerHeight: 12,
+          refX: 6,
+          refY: 6,
+          data: 'M2,2 L10,6 L2,10 L6,6 L2,2'
        }
-      })
-      const rootId = this.graph.rootId ? String(this.graph.rootId) : ''
-      const root = rootId && nodeMap.get(rootId)
-      if (root) return [root]
-      return Array.from(nodeMap.values()).filter(node => !childIds.has(node.id))
+      }
+    },
+    currentGraphOptions () {
+      return this.currentCase === 'horizontal' ? this.horizontalOptions : this.verticalOptions
+    },
+    downloadName () {
+      const firstNode = this.graph.nodes && this.graph.nodes[0]
+      return firstNode && firstNode.text ? firstNode.text : this.$t(this.key('reverse'))
    }
  },
  mounted () {
@@ -178,6 +236,7 @@ export default {
        this.traceData = data || {}
        const firstNode = this.graph.nodes && this.graph.nodes[0]
        this.activeNodeId = firstNode ? String(firstNode.id) : ''
+        this.$nextTick(this.renderGraph)
      } finally {
        this.loading = false
      }
@@ -192,10 +251,17 @@ export default {
        workingsubclass_code: ''
      }
    },
+    renderGraph () {
+      if (!this.hasGraph || !this.$refs.graphRef) return
+      this.$refs.graphRef.setOptions(this.currentGraphOptions)
+      this.$refs.graphRef.setJsonData(this.graph)
+    },
+    onNodeClick (nodeObject) {
+      this.activeNodeId = String(nodeObject.id)
+    },
    locateNode (field, value, onlyFinalProduct = false) {
-      if (!value) return
-      const nodes = Array.isArray(this.graph.nodes) ? this.graph.nodes : []
-      const target = nodes.find(node => {
+      if (!value || !this.hasGraph) return
+      const target = this.graph.nodes.find(node => {
        const data = node.data || {}
        if (String(data[field] || '') !== String(value)) return false
        if (!onlyFinalProduct) return true
@@ -206,14 +272,11 @@ export default {
        return
      }
      this.activeNodeId = String(target.id)
-      if (this.$refs.tree) {
-        this.$refs.tree.setCurrentKey(this.activeNodeId)
-      }
      this.$nextTick(() => {
-        const element = this.$el.querySelector(`[data-node-id="${this.activeNodeId}"]`)
-        if (element && element.scrollIntoView) {
-          element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
-        }
+        const graphInstance = this.$refs.graphRef && this.$refs.graphRef.getInstance()
+        if (!graphInstance) return
+        graphInstance.setZoom(200)
+        graphInstance.focusNodeById(target.id)
      })
    },
    async exportTree () {
@@ -249,87 +312,96 @@ export default {
 }

 .traceability-page {
-  min-height: 560px;
+  height: calc(100vh - 170px);
+  min-height: 620px;
 }

-.trace-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px 18px;
-  align-items: center;
-  margin-bottom: 12px;
+.trace-graph {
+  width: 100%;
+  height: 100%;
+  min-height: 620px;
+  border: 1px solid #ebeef5;
+  background: #f7f9fb;
 }

-.trace-toolbar__group,
-.trace-toolbar__locate {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
+.trace-panel {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 20;
+  width: 360px;
+  padding: 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
 }

-.trace-toolbar__locate .el-input {
-  width: 190px;
-}
-
-.toolbar-label {
+.trace-panel__label {
+  margin-bottom: 8px;
  color: #606266;
  font-size: 13px;
  font-weight: 600;
 }

-.trace-tree-wrap {
-  height: calc(100vh - 230px);
-  min-height: 520px;
-  overflow: auto;
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-  background: #f7f9fb;
-  padding: 12px;
+.trace-panel__label--spaced {
+  margin-top: 14px;
 }

-.trace-tree-wrap--horizontal {
-  ::v-deep .el-tree-node__children {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px 16px;
-  }
-}
-
-.trace-tree {
-  min-width: max-content;
-  background: transparent;
+.trace-panel__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 92px;
+  gap: 8px;
+  margin-top: 10px;
 }

 .trace-node {
-  width: 300px;
-  min-height: 300px;
-  padding: 10px;
-  margin: 8px 0;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  background: #fff;
+  position: relative;
+  width: 330px;
+  height: 410px;
+  padding: 28px 12px 12px;
  color: #303133;
  cursor: pointer;
+  text-align: left;
 }

-.trace-node.is-active {
-  border-color: #409eff;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
+.trace-node.is-active .trace-node__body {
+  border-color: #f56c6c;
+  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.18);
+}
+
+.trace-node__tag {
+  position: absolute;
+  top: 0;
+  left: 0;
 }

 .trace-node__title {
-  display: flex;
-  gap: 8px;
-  align-items: center;
+  min-height: 22px;
  margin-bottom: 8px;
+  padding-right: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  word-break: break-word;
 }

-.trace-node__body p {
-  margin: 0;
+.trace-node__body {
+  height: 340px;
+  overflow: auto;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: #fff;
+  color: #555;
+}
+
+.trace-node__line {
+  min-height: 24px;
  padding: 4px 0;
-  border-bottom: 1px solid #f0f2f5;
-  line-height: 1.35;
+  border-bottom: 1px solid #efefef;
+  line-height: 1.4;
  white-space: normal;
+  word-break: break-all;
 }
 </style>