fix: 解决关系网问题
Showing
3 changed files
with
31 additions
and
18 deletions
| ... | @@ -230,7 +230,7 @@ const initGraph = () => { | ... | @@ -230,7 +230,7 @@ const initGraph = () => { |
| 230 | container: container, | 230 | container: container, |
| 231 | width, | 231 | width, |
| 232 | height, | 232 | height, |
| 233 | // animate: false, | 233 | // animate: false, |
| 234 | plugins: [contextMenu, tooltip.value], | 234 | plugins: [contextMenu, tooltip.value], |
| 235 | fitCenter: true, | 235 | fitCenter: true, |
| 236 | fitView: true, | 236 | fitView: true, |
| ... | @@ -247,6 +247,11 @@ const initGraph = () => { | ... | @@ -247,6 +247,11 @@ const initGraph = () => { |
| 247 | } | 247 | } |
| 248 | const data = item.getModel(); | 248 | const data = item.getModel(); |
| 249 | data.collapsed = collapsed; | 249 | data.collapsed = collapsed; |
| 250 | setTimeout(() => { | ||
| 251 | graph.focusItem(item, true, { | ||
| 252 | duration: 400 // 动画时长为500ms | ||
| 253 | }); | ||
| 254 | }, 500) | ||
| 250 | return true; | 255 | return true; |
| 251 | }, | 256 | }, |
| 252 | shouldBegin: (e) => { | 257 | shouldBegin: (e) => { |
| ... | @@ -472,7 +477,9 @@ const bindEvents = () => { | ... | @@ -472,7 +477,9 @@ const bindEvents = () => { |
| 472 | } | 477 | } |
| 473 | }); | 478 | }); |
| 474 | lastSelectNode.value = item; | 479 | lastSelectNode.value = item; |
| 475 | detailInfo.value.guid = model.guid; | 480 | detailInfo.value = {}; |
| 481 | // detailInfo.value.guid = model.guid; | ||
| 482 | detailInfoLabel.value = model.label || {}; | ||
| 476 | updateTooltipPosition(evt); | 483 | updateTooltipPosition(evt); |
| 477 | 484 | ||
| 478 | detailLoading.value = true; | 485 | detailLoading.value = true; | ... | ... |
| ... | @@ -7,8 +7,8 @@ | ... | @@ -7,8 +7,8 @@ |
| 7 | <div className='g6-component-topbar'> | 7 | <div className='g6-component-topbar'> |
| 8 | <graphTopbar ref="topBarRef" @displaySwitchChange="displaySwitchChange" :isGraphDisplay="isGraphDisplay" /> | 8 | <graphTopbar ref="topBarRef" @displaySwitchChange="displaySwitchChange" :isGraphDisplay="isGraphDisplay" /> |
| 9 | </div> | 9 | </div> |
| 10 | <RelationNetwork v-show="graphTreeData?.guid && isGraphDisplay" ref="relationNetworkRef" :tree-data="graphTreeData" :noContextMenu="true" | 10 | <RelationNetwork v-show="graphTreeData?.guid && isGraphDisplay" ref="relationNetworkRef" :tree-data="graphTreeData" |
| 11 | @nodeItemClick="handleNodeItemClick"> | 11 | :noContextMenu="true" @nodeItemClick="handleNodeItemClick"> |
| 12 | </RelationNetwork> | 12 | </RelationNetwork> |
| 13 | <Sankey v-show="!isGraphDisplay && (sankeyNames?.length || sankeyDataLoading)" v-loading="sankeyDataLoading" | 13 | <Sankey v-show="!isGraphDisplay && (sankeyNames?.length || sankeyDataLoading)" v-loading="sankeyDataLoading" |
| 14 | :tree-data="sankeyData" :names="sankeyNames"> | 14 | :tree-data="sankeyData" :names="sankeyNames"> |
| ... | @@ -112,8 +112,8 @@ const handleNodeItemClick = (graph, nodeItem) => { | ... | @@ -112,8 +112,8 @@ const handleNodeItemClick = (graph, nodeItem) => { |
| 112 | nodeItem.getModel().collapsed = false; | 112 | nodeItem.getModel().collapsed = false; |
| 113 | parentData.collapsed = false; | 113 | parentData.collapsed = false; |
| 114 | graph.updateItem(nodeItem, { | 114 | graph.updateItem(nodeItem, { |
| 115 | ...nodeItem.getModel(), | 115 | ...nodeItem.getModel(), |
| 116 | collapsed: false | 116 | collapsed: false |
| 117 | }); | 117 | }); |
| 118 | graph.layout(); | 118 | graph.layout(); |
| 119 | setTimeout(() => { | 119 | setTimeout(() => { |
| ... | @@ -128,6 +128,9 @@ const handleNodeItemClick = (graph, nodeItem) => { | ... | @@ -128,6 +128,9 @@ const handleNodeItemClick = (graph, nodeItem) => { |
| 128 | graph.layout(); | 128 | graph.layout(); |
| 129 | graph.setMinZoom(0.5); | 129 | graph.setMinZoom(0.5); |
| 130 | graph.setMaxZoom(5); | 130 | graph.setMaxZoom(5); |
| 131 | graph.focusItem(nodeItem, true, { | ||
| 132 | duration: 400 // 动画时长为500ms | ||
| 133 | }); | ||
| 131 | }, 500); | 134 | }, 500); |
| 132 | } else { | 135 | } else { |
| 133 | parentData.isLoading = false; | 136 | parentData.isLoading = false; |
| ... | @@ -144,20 +147,20 @@ onBeforeMount(() => { | ... | @@ -144,20 +147,20 @@ onBeforeMount(() => { |
| 144 | const data = res.data || []; | 147 | const data = res.data || []; |
| 145 | let resultData = data?.[0] || {}; | 148 | let resultData = data?.[0] || {}; |
| 146 | if (!resultData?.children?.length && resultData.isHaveData == 'Y') { | 149 | if (!resultData?.children?.length && resultData.isHaveData == 'Y') { |
| 147 | graphDataLoading.value = true; | 150 | graphDataLoading.value = true; |
| 148 | getMetaStandardField(resultData.guid).then((res: any) => { | 151 | getMetaStandardField(resultData.guid).then((res: any) => { |
| 149 | graphDataLoading.value = false; | 152 | graphDataLoading.value = false; |
| 150 | if (res?.code == proxy.$passCode) { | 153 | if (res?.code == proxy.$passCode) { |
| 151 | resultData.children = res.data || []; | 154 | resultData.children = res.data || []; |
| 152 | graphTreeData.value = resultData; | 155 | graphTreeData.value = resultData; |
| 156 | } else { | ||
| 157 | graphTreeData.value = resultData; | ||
| 158 | ElMessage.error(res.msg); | ||
| 159 | } | ||
| 160 | }); | ||
| 153 | } else { | 161 | } else { |
| 154 | graphTreeData.value = resultData; | 162 | graphTreeData.value = resultData; |
| 155 | ElMessage.error(res.msg); | 163 | } |
| 156 | } | ||
| 157 | }); | ||
| 158 | } else { | ||
| 159 | graphTreeData.value = resultData; | ||
| 160 | } | ||
| 161 | } else { | 164 | } else { |
| 162 | ElMessage.error(res.msg); | 165 | ElMessage.error(res.msg); |
| 163 | } | 166 | } | ... | ... |
| ... | @@ -204,6 +204,9 @@ const handleNodeItemClick = (graph, nodeItem) => { | ... | @@ -204,6 +204,9 @@ const handleNodeItemClick = (graph, nodeItem) => { |
| 204 | graph.layout(); | 204 | graph.layout(); |
| 205 | graph.setMinZoom(0.5); | 205 | graph.setMinZoom(0.5); |
| 206 | graph.setMaxZoom(5); | 206 | graph.setMaxZoom(5); |
| 207 | graph.focusItem(nodeItem, true, { | ||
| 208 | duration: 500 // 动画时长为500ms | ||
| 209 | }); | ||
| 207 | }, 500); | 210 | }, 500); |
| 208 | } else { | 211 | } else { |
| 209 | parentData.isLoading = false; | 212 | parentData.isLoading = false; | ... | ... |
-
Please register or sign in to post a comment