From 3c4a665dc3da1deb8dfd72ae4a918f3acae0a84b Mon Sep 17 00:00:00 2001 From: sheng <905537351@qq.com> Date: Mon, 22 Jun 2026 16:57:37 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8F=8D=E5=90=91=E8=BF=BD?= =?UTF-8?q?=E6=BA=AF=E5=9B=BE=E8=B0=B1=E8=BF=81=E7=A7=BB=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/功能测试-反向追溯.md | 22 +- package.json | 1 + pnpm-lock.yaml | 51 ++- .../traceability/backward/index.vue | 376 +++++++++++------- 4 files changed, 285 insertions(+), 165 deletions(-) diff --git a/docs/功能测试-反向追溯.md b/docs/功能测试-反向追溯.md index d59c9cdc..e68862d3 100644 --- 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` 时，页面应能自动查询对应追溯数据。 diff --git a/package.json b/package.json index c15fd9e5..2488e171 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7ee35acb..d47b754e 100644 --- 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: {} diff --git a/src/views/data-platform/traceability/backward/index.vue b/src/views/data-platform/traceability/backward/index.vue index 081ef76d..6e5c2e53 100644 --- a/src/views/data-platform/traceability/backward/index.vue +++ b/src/views/data-platform/traceability/backward/index.vue @@ -29,78 +29,79 @@
- + + +