226 lines
4.9 KiB
Vue
226 lines
4.9 KiB
Vue
<template>
|
|
|
|
<div id="container"/>
|
|
</template>
|
|
|
|
<script>
|
|
import {renderMap} from "@/views/create";
|
|
import G6 from "@antv/g6";
|
|
//注册监听事件,线条,已经节点
|
|
import Behavior from './behavior'
|
|
import Edge from './edge'
|
|
import Node from './node'
|
|
Behavior.register(G6)
|
|
Edge.register(G6)
|
|
Node.register(G6)
|
|
// import initGraph from "@/views/graph";
|
|
export default {
|
|
name: "Index",
|
|
data(){
|
|
return{
|
|
graphConfig:{
|
|
container: 'container',
|
|
defaultNode: {
|
|
size: [300, 400],
|
|
type: 'dice-er-box',
|
|
color: '#5B8FF9',
|
|
style: {
|
|
fill: '#9EC9FF',
|
|
lineWidth: 3,
|
|
},
|
|
labelCfg: {
|
|
style: {
|
|
fill: 'black',
|
|
fontSize: 20,
|
|
},
|
|
},
|
|
},
|
|
//设置edge默认属性
|
|
defaultEdge: {
|
|
type: 'dice-er-edge',
|
|
style: {
|
|
stroke: '#e2e2e2',
|
|
lineWidth: 4,
|
|
endArrow: true,
|
|
},
|
|
},
|
|
modes: {
|
|
default: ['dice-er-scroll', 'drag-node', 'drag-canvas'],
|
|
},
|
|
layout: {
|
|
type: 'dagre',
|
|
rankdir: 'LR',
|
|
align: 'UL',
|
|
controlPoints: true,
|
|
nodesepFunc: () => 0.2,
|
|
ranksepFunc: () => 0.5,
|
|
},
|
|
animate: true,
|
|
},
|
|
graphData: {
|
|
nodes: [
|
|
{
|
|
id: "info",
|
|
label: "Employee",
|
|
attrs: [
|
|
{
|
|
key: "id",
|
|
type: "number(6)"
|
|
},
|
|
{
|
|
key: "key",
|
|
type: "varchar(255)"
|
|
},
|
|
{
|
|
key: "gender",
|
|
type: "enum(M, F)"
|
|
},
|
|
{
|
|
key: "birthday",
|
|
type: "date"
|
|
},
|
|
{
|
|
key: "hometown",
|
|
type: "varchar(255)"
|
|
},
|
|
{
|
|
key: "country",
|
|
type: "varchar(255)"
|
|
},
|
|
{
|
|
key: "nation",
|
|
type: "varchar(255)"
|
|
},
|
|
{
|
|
key: "jobId",
|
|
type: "number(3)",
|
|
relation: [
|
|
{
|
|
key: "id",
|
|
nodeId: "job"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
key: "phone",
|
|
type: "varchar(255)"
|
|
},
|
|
{
|
|
key: "deptId",
|
|
type: "number(6)",
|
|
relation: [
|
|
{
|
|
key: "id",
|
|
nodeId: "dept"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
key: "startTime",
|
|
type: "date"
|
|
},
|
|
{
|
|
key: "leaveTime",
|
|
type: "date"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: "job",
|
|
label: "Job",
|
|
attrs: [
|
|
{
|
|
key: "id",
|
|
type: "number(3)"
|
|
},
|
|
{
|
|
key: "title",
|
|
type: "varchar(255)"
|
|
},
|
|
{
|
|
key: "level",
|
|
type: "number(3)"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: "dept",
|
|
label: "Department",
|
|
attrs: [
|
|
{
|
|
key: "id",
|
|
type: "number(6)"
|
|
},
|
|
{
|
|
key: "title",
|
|
type: "varchar(255)"
|
|
},
|
|
{
|
|
key: "desc",
|
|
type: "text"
|
|
},
|
|
{
|
|
key: "parent",
|
|
type: "number(6)",
|
|
relation: [
|
|
{
|
|
key: "id",
|
|
nodeId: "dept"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
key: "manager",
|
|
type: "number(6)"
|
|
}
|
|
]
|
|
}
|
|
],
|
|
edges: [
|
|
{
|
|
source: "info",
|
|
target: "job",
|
|
sourceKey: "jobId",
|
|
targetKey: "id"
|
|
},
|
|
{
|
|
source: "info",
|
|
target: "dept",
|
|
sourceKey: "deptId",
|
|
targetKey: "id"
|
|
},
|
|
{
|
|
source: "dept",
|
|
target: "dept",
|
|
sourceKey: "parent",
|
|
targetKey: "id"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initTopo()
|
|
},
|
|
methods:{
|
|
initTopo(){
|
|
const container = document.getElementById('container');
|
|
|
|
const width = container.scrollWidth;
|
|
const height = (container.scrollHeight || 800) - 20;
|
|
const graph = new G6.Graph({
|
|
...this.graphConfig,
|
|
width,
|
|
height,
|
|
})
|
|
renderMap(graph,this.graphData)
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|