关系网修改节点大小,并添加定位到标准管理
Showing
4 changed files
with
37 additions
and
12 deletions
| ... | @@ -210,7 +210,7 @@ const initGraph = () => { | ... | @@ -210,7 +210,7 @@ const initGraph = () => { |
| 210 | const { item, target } = evt; | 210 | const { item, target } = evt; |
| 211 | let model = item._cfg.model; | 211 | let model = item._cfg.model; |
| 212 | if (props.noContextMenu) { | 212 | if (props.noContextMenu) { |
| 213 | return false; | 213 | // return false; |
| 214 | if (model && !model.isField) { | 214 | if (model && !model.isField) { |
| 215 | return true; | 215 | return true; |
| 216 | } | 216 | } |
| ... | @@ -320,15 +320,17 @@ const initGraph = () => { | ... | @@ -320,15 +320,17 @@ const initGraph = () => { |
| 320 | graphRef.value = graph; | 320 | graphRef.value = graph; |
| 321 | graph.node((node) => { | 321 | graph.node((node) => { |
| 322 | return { | 322 | return { |
| 323 | size: node.isField ? 11 : 16, | ||
| 323 | id: node.guid as string, | 324 | id: node.guid as string, |
| 324 | label: handleLabelLength((node.isField ? node.metaStandardId : node.standardName) as string), | 325 | label: handleLabelLength((node.isField ? node.metaStandardId : node.standardName) as string), |
| 325 | collapsed: node.children?.length ? false : true, | 326 | collapsed: node.children?.length ? false : true, |
| 326 | labelCfg: { | 327 | labelCfg: { |
| 327 | offset: 7, | 328 | offset: node.isField ? 4 : 7, |
| 328 | style: { | 329 | style: { |
| 329 | fontSize: 13, | 330 | fontSize: 13, |
| 330 | fill: '#212121', | 331 | fill: '#212121', |
| 331 | fontWeight: 500 | 332 | fontWeight: 500, |
| 333 | cursor: 'pointer' | ||
| 332 | }, | 334 | }, |
| 333 | position: !node.isField ? 'left' : 'right', //只有字段是最后一层级,不需要展开 | 335 | position: !node.isField ? 'left' : 'right', //只有字段是最后一层级,不需要展开 |
| 334 | }, | 336 | }, | ... | ... |
| ... | @@ -220,7 +220,7 @@ const routes: RouteRecordRaw[] = [ | ... | @@ -220,7 +220,7 @@ const routes: RouteRecordRaw[] = [ |
| 220 | } | 220 | } |
| 221 | } | 221 | } |
| 222 | }, | 222 | }, |
| 223 | { | 223 | { |
| 224 | path: 'table-create-manual', | 224 | path: 'table-create-manual', |
| 225 | name: 'tableCreateManual', | 225 | name: 'tableCreateManual', |
| 226 | component: () => import('@/views/data_meta/tableCreateManual.vue'), | 226 | component: () => import('@/views/data_meta/tableCreateManual.vue'), | ... | ... |
| ... | @@ -8,7 +8,7 @@ | ... | @@ -8,7 +8,7 @@ |
| 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" | 10 | <RelationNetwork v-show="graphTreeData?.guid && isGraphDisplay" ref="relationNetworkRef" :tree-data="graphTreeData" |
| 11 | :noContextMenu="true" @nodeItemClick="handleNodeItemClick"> | 11 | :noContextMenu="true" @nodeItemClick="handleNodeItemClick" @contextMenu="handleContextMenu"> |
| 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"> |
| ... | @@ -128,9 +128,9 @@ const handleNodeItemClick = (graph, nodeItem) => { | ... | @@ -128,9 +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, { | 131 | graph.focusItem(nodeItem, true, { |
| 132 | duration: 400 // 动画时长为500ms | 132 | duration: 400 // 动画时长为500ms |
| 133 | }); | 133 | }); |
| 134 | }, 500); | 134 | }, 500); |
| 135 | } else { | 135 | } else { |
| 136 | parentData.isLoading = false; | 136 | parentData.isLoading = false; |
| ... | @@ -139,6 +139,15 @@ const handleNodeItemClick = (graph, nodeItem) => { | ... | @@ -139,6 +139,15 @@ const handleNodeItemClick = (graph, nodeItem) => { |
| 139 | }) | 139 | }) |
| 140 | } | 140 | } |
| 141 | 141 | ||
| 142 | const handleContextMenu = (model) => { | ||
| 143 | router.push({ | ||
| 144 | name: 'metadataStandard', | ||
| 145 | query: { | ||
| 146 | standardGuid: model.guid | ||
| 147 | } | ||
| 148 | }); | ||
| 149 | } | ||
| 150 | |||
| 142 | onBeforeMount(() => { | 151 | onBeforeMount(() => { |
| 143 | graphDataLoading.value = true | 152 | graphDataLoading.value = true |
| 144 | getMetaStandardTreeList(metaGuid.value).then((res: any) => { | 153 | getMetaStandardTreeList(metaGuid.value).then((res: any) => { | ... | ... |
| ... | @@ -24,6 +24,8 @@ import StandardFieldsDialog from './components/standardFieldsDialog.vue' | ... | @@ -24,6 +24,8 @@ import StandardFieldsDialog from './components/standardFieldsDialog.vue' |
| 24 | 24 | ||
| 25 | const { proxy } = getCurrentInstance() as any; | 25 | const { proxy } = getCurrentInstance() as any; |
| 26 | 26 | ||
| 27 | const route = useRoute(); | ||
| 28 | |||
| 27 | const cacheStore = useCatchStore() | 29 | const cacheStore = useCatchStore() |
| 28 | const showFiledsPage = ref(false) | 30 | const showFiledsPage = ref(false) |
| 29 | 31 | ||
| ... | @@ -76,8 +78,10 @@ function treeCustomClick (node, type) { | ... | @@ -76,8 +78,10 @@ function treeCustomClick (node, type) { |
| 76 | }).then(() => deleteTreeNode(node.data.guid)) | 78 | }).then(() => deleteTreeNode(node.data.guid)) |
| 77 | } | 79 | } |
| 78 | } | 80 | } |
| 79 | function getTree (refresh = false) { | 81 | function getTree (refresh = false, initLocate = false) { |
| 82 | treeInfo.value.loading = true; | ||
| 80 | getMetaStandardTree().then((res:any) => { | 83 | getMetaStandardTree().then((res:any) => { |
| 84 | treeInfo.value.loading = false; | ||
| 81 | if (res.code === proxy.$passCode) { | 85 | if (res.code === proxy.$passCode) { |
| 82 | let data = res.data || [] | 86 | let data = res.data || [] |
| 83 | data.forEach(item => { | 87 | data.forEach(item => { |
| ... | @@ -85,8 +89,10 @@ function getTree (refresh = false) { | ... | @@ -85,8 +89,10 @@ function getTree (refresh = false) { |
| 85 | item.level = 1 | 89 | item.level = 1 |
| 86 | }) | 90 | }) |
| 87 | treeInfo.value.data = data | 91 | treeInfo.value.data = data |
| 88 | treeInfo.value.expandedKey = [data[0].guid] | 92 | if (!initLocate) { |
| 89 | treeInfo.value.currentNodeKey = data[0].guid | 93 | treeInfo.value.expandedKey = [data[0].guid] |
| 94 | treeInfo.value.currentNodeKey = data[0].guid | ||
| 95 | } | ||
| 90 | nodeClick(data[0]) | 96 | nodeClick(data[0]) |
| 91 | } | 97 | } |
| 92 | }) | 98 | }) |
| ... | @@ -443,8 +449,16 @@ function batchDelete () { | ... | @@ -443,8 +449,16 @@ function batchDelete () { |
| 443 | }) | 449 | }) |
| 444 | } | 450 | } |
| 445 | 451 | ||
| 452 | /** 从关系网定位打开此页面,需定位到对应的树节点。 route.query.standardGuid */ | ||
| 453 | |||
| 454 | onActivated(() => { | ||
| 455 | if (route.query.standardGuid) { | ||
| 456 | treeInfo.value.currentNodeKey = route.query.standardGuid as string; | ||
| 457 | } | ||
| 458 | }) | ||
| 459 | |||
| 446 | onBeforeMount(() => { | 460 | onBeforeMount(() => { |
| 447 | getTree() | 461 | getTree(false, route.query.standardGuid != null) |
| 448 | }) | 462 | }) |
| 449 | 463 | ||
| 450 | const viewGraph = () => { | 464 | const viewGraph = () => { | ... | ... |
-
Please register or sign in to post a comment