|
@@ -32,7 +32,8 @@ export function getG6Options({ container = 'container' }) {
|
|
|
modes: {
|
|
|
default: ['drag-canvas', 'drag-node', 'activate-relations']
|
|
|
},
|
|
|
- plugins: [tooltip, toolbar],
|
|
|
+ // plugins: [tooltip, toolbar],
|
|
|
+ plugins: [tooltip],
|
|
|
// fitView: true,
|
|
|
fitCenter: true,
|
|
|
layout: {
|
|
@@ -45,8 +46,19 @@ export function getG6Options({ container = 'container' }) {
|
|
|
strictRadial: true, // 是否必须是严格的 radial 布局,及每一层的节点严格布局在一个环上。preventOverlap 为 true 时生效。
|
|
|
workerEnabled: true // 可选,开启 web-worker
|
|
|
},
|
|
|
+ layout: {
|
|
|
+ type: 'dagre',
|
|
|
+ // rankdir: 'TB',
|
|
|
+ // rankdir: 'LR',
|
|
|
+ // align: 'UL',
|
|
|
+ // controlPoints: true,
|
|
|
+ ranksep: 60,
|
|
|
+ nodesepFunc: () => 1,
|
|
|
+ ranksepFunc: () => 1
|
|
|
+ },
|
|
|
defaultNode: {
|
|
|
size: 30,
|
|
|
+ type: 'image',
|
|
|
style: {
|
|
|
// fill: '#fa8c16',
|
|
|
// stroke: '#000',
|
|
@@ -93,6 +105,36 @@ export function getG6Options({ container = 'container' }) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+export function getG6TreeOptions({ container = 'container' }) {
|
|
|
+ return {
|
|
|
+ container,
|
|
|
+ modes: {
|
|
|
+ default: ['drag-canvas']
|
|
|
+ },
|
|
|
+ defaultNode: {
|
|
|
+ type: 'image',
|
|
|
+ size: 30
|
|
|
+ },
|
|
|
+ defaultEdge: {
|
|
|
+ type: 'cubic-horizontal',
|
|
|
+ style: {
|
|
|
+ endArrow: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fitCenter: true,
|
|
|
+ fitView: true,
|
|
|
+ layout: {
|
|
|
+ type: 'indented',
|
|
|
+ direction: 'LR',
|
|
|
+ dropCap: false,
|
|
|
+ indent: 100,
|
|
|
+ getHeight: () => {
|
|
|
+ return 30
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// 更新数据
|
|
|
// graph.on('circle-shape:click', (evt) => {
|
|
|
// const { item } = evt;
|
|
@@ -210,7 +252,7 @@ export function getMockData() {
|
|
|
if (i !== 4) {
|
|
|
return {
|
|
|
id: String(i),
|
|
|
- label: img.split(','),
|
|
|
+ label: img.split('.')[0],
|
|
|
type: 'image',
|
|
|
size: 40,
|
|
|
img: '/imgs/' + img
|
|
@@ -218,7 +260,7 @@ export function getMockData() {
|
|
|
} else {
|
|
|
return {
|
|
|
id: String(i),
|
|
|
- label: img.split(','),
|
|
|
+ label: img.split('.')[0],
|
|
|
type: 'background-animate',
|
|
|
size: 30,
|
|
|
color: '#f00',
|
|
@@ -276,10 +318,7 @@ export function getMockData() {
|
|
|
}
|
|
|
|
|
|
export function getMockData2() {
|
|
|
- const img = new Image()
|
|
|
- img.src = 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg'
|
|
|
-
|
|
|
- const imgs = ['C.svg', 'Elastic.svg', 'Hadoop.svg', 'Flink.svg', 'Hive.svg', 'jaeger.svg', 'error.gif']
|
|
|
+ const imgs = ['app.svg', 'host.svg', 'jifang.svg', 'jigui.svg', 'nginx.svg', 'SQL.svg']
|
|
|
|
|
|
const nodes = imgs.map((img, i) => {
|
|
|
return {
|
|
@@ -330,3 +369,219 @@ export function getMockData2() {
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+const types = ['machine room', 'UPS', 'cabinet', 'switch', 'server', 'VM', 'app', 'db']
|
|
|
+const nodeTree = [
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ label: 'MR001\n广州',
|
|
|
+ type: 'image',
|
|
|
+ img: '/imgs/machine room.svg',
|
|
|
+ size: 40,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ label: 'BSDC UPS\nBSDC-UPS01',
|
|
|
+ type: 'image',
|
|
|
+ img: '/imgs/UPS.svg',
|
|
|
+ size: 40,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ label: 'IT Cabinet\nC01',
|
|
|
+ type: 'image',
|
|
|
+ size: 40,
|
|
|
+ img: '/imgs/cabinet.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '5',
|
|
|
+ label: 'IT Cabinet\nC02',
|
|
|
+ type: 'image',
|
|
|
+ size: 40,
|
|
|
+ img: '/imgs/cabinet.svg'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'BSDC UPS\nBSDC-UPS02',
|
|
|
+ type: 'image',
|
|
|
+ id: '3',
|
|
|
+ size: 40,
|
|
|
+ img: '/imgs/UPS.svg',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: '6',
|
|
|
+ label: 'IT Cabinet\nC03',
|
|
|
+ size: 40,
|
|
|
+ type: 'image',
|
|
|
+ img: '/imgs/cabinet.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '7',
|
|
|
+ label: 'IT Cabinet\nC04',
|
|
|
+ size: 40,
|
|
|
+ type: 'image',
|
|
|
+ img: '/imgs/cabinet.svg'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+]
|
|
|
+const nodeTree2 = [
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ label: 'MR001\n广州',
|
|
|
+ img: '/imgs/machine room.svg',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ label: 'BSDC UPS\nBSDC-UPS01',
|
|
|
+ img: '/imgs/UPS.svg',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ label: 'IT Cabinet\nC01',
|
|
|
+ img: '/imgs/cabinet.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '5',
|
|
|
+ label: 'IT Cabinet\nC02',
|
|
|
+ img: '/imgs/cabinet.svg',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: '8',
|
|
|
+ label: 'Switch\nSW01',
|
|
|
+ img: '/imgs/switch.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '10',
|
|
|
+ label: 'Switch\nSW03',
|
|
|
+ img: '/imgs/switch.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '11',
|
|
|
+ label: 'Switch\nSW04',
|
|
|
+ img: '/imgs/switch.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '9',
|
|
|
+ label: 'Switch\nSW02',
|
|
|
+ img: '/imgs/switch.svg',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: '14',
|
|
|
+ label: 'Server\nSRV01',
|
|
|
+ img: '/imgs/server.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '15',
|
|
|
+ label: 'Server\nSRV02',
|
|
|
+ img: '/imgs/server.svg'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '3',
|
|
|
+ label: 'BSDC UPS\nBSDC-UPS02',
|
|
|
+ img: '/imgs/UPS.svg',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: '6',
|
|
|
+ label: 'IT Cabinet\nC03',
|
|
|
+ img: '/imgs/cabinet.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '7',
|
|
|
+ label: 'IT Cabinet\nC04',
|
|
|
+ img: '/imgs/cabinet.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '16',
|
|
|
+ label: 'Server\nSRV03',
|
|
|
+ img: '/imgs/server.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '17',
|
|
|
+ label: 'Server\nSRV04',
|
|
|
+ img: '/imgs/server.svg',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: '18',
|
|
|
+ label: 'VM\nVM01',
|
|
|
+ img: '/imgs/vm.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '19',
|
|
|
+ label: 'VM\nVM02',
|
|
|
+ img: '/imgs/vm.svg',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: '22',
|
|
|
+ label: 'DB\nDB01',
|
|
|
+ img: '/imgs/db.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '23',
|
|
|
+ label: 'DB\nDB02',
|
|
|
+ img: '/imgs/db.svg',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: '20',
|
|
|
+ label: 'App\nApp01',
|
|
|
+ img: '/imgs/app.svg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '21',
|
|
|
+ label: 'App\nApp02',
|
|
|
+ img: '/imgs/app.svg'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+export function getMockData3() {
|
|
|
+ // return nodeTree2
|
|
|
+ const nodes = flattenObjectTree(nodeTree2)
|
|
|
+ // const edges = flattenObjectTree(nodeTree2)
|
|
|
+ console.log(nodes)
|
|
|
+ return {
|
|
|
+ nodes,
|
|
|
+ edges: nodes.filter((i) => i.source).map((i) => ({ source: i.source, target: i.target }))
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 将tree展平
|
|
|
+function flattenObjectTree(tree, parent = null) {
|
|
|
+ let result = []
|
|
|
+
|
|
|
+ for (let i = 0; i < tree.length; i++) {
|
|
|
+ let node = { ...tree[i], target: tree[i].id, source: parent?.id }
|
|
|
+
|
|
|
+ if (node.children && node.children.length > 0) {
|
|
|
+ let children = node.children
|
|
|
+ delete node.children
|
|
|
+
|
|
|
+ result.push(node)
|
|
|
+
|
|
|
+ let flattenedChildren = flattenObjectTree(children, node)
|
|
|
+ result = result.concat(flattenedChildren)
|
|
|
+ } else {
|
|
|
+ result.push(node)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return result
|
|
|
+}
|