101 lines
7.1 KiB
Vue
101 lines
7.1 KiB
Vue
<template>
|
|
<div class="demo-topology">
|
|
<topology
|
|
ref="topology"
|
|
:graph-data="graphData"
|
|
:node-app-config="nodeAppConfig"
|
|
:edge-app-config="edgeAppConfig"
|
|
@doAutoRefresh="doAutoRefresh"
|
|
@doManualRefresh="doManualRefresh"
|
|
@doChangeMode="doChangeMode"
|
|
@doSaveData="doSaveData"
|
|
>
|
|
</topology>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/* 局部注册 */
|
|
import Topology from './packages/topology/src/topology'
|
|
import { deepClone } from './utils/index'
|
|
|
|
export default {
|
|
name: 'DemoTopology',
|
|
components: {
|
|
'topology': Topology
|
|
},
|
|
data() {
|
|
return {
|
|
graphData: {"nodes":[{"id":"305bfbdd-31cc-4028-b2b1-2f504968356d","x":304.8223042174235,"y":131.0267312661499,"label":"客户端","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":0},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":0},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":0},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"depth":0},{"id":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","x":-94.51187075489108,"y":127.35469287559994,"label":"防火墙","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":0},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":0},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":0},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"startIndex":0,"startX":0,"depth":0}],"edges":[{"id":"8bc0249e-ee5d-4dd7-84e0-e4e32c217f2a","source":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","sourceAttrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":1},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"sourceAnchor":1,"target":"305bfbdd-31cc-4028-b2b1-2f504968356d","type":"top-cubic","style":{"active":{"stroke":"rgb(95, 149, 255)","lineWidth":1},"selected":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"shadowColor":"rgb(95, 149, 255)","shadowBlur":10,"text-shape":{"fontWeight":500}},"highlight":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"text-shape":{"fontWeight":500}},"inactive":{"stroke":"rgb(234, 234, 234)","lineWidth":1},"disable":{"stroke":"rgb(245, 245, 245)","lineWidth":1},"edgeStyle":{"default":{"stroke":"#e2e2e2","lineWidth":3,"lineAppendWidth":10},"selected":{"shadowColor":"#626262","shadowBlur":3}},"stroke":"#A3B1BF","lineWidth":2,"strokeOpacity":0.92,"lineAppendWidth":10},"labelCfg":{"position":"center","autoRotate":false},"startPoint":{"x":155.98812924510892,"y":285.35469287559994,"anchorIndex":1},"endPoint":{"x":304.3223042174235,"y":289.0267312661499,"anchorIndex":3},"curveOffset":[-20,20],"curvePosition":[0.5,0.5],"targetAnchor":3,"targetAttrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":1},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"depth":0}],"combos":[]},
|
|
nodeTypeList: [
|
|
// { guid: "blue", label: "蓝色", imgSrc: require("../../assets/images/blue.svg") },
|
|
// { guid: "green", label: "绿色", imgSrc: require("@/assets/images/green.svg") },
|
|
// { guid: "purple", label: "紫色", imgSrc: require("@/assets/images/purple.svg") }
|
|
],
|
|
// 节点配置
|
|
nodeAppConfig: {
|
|
// ip: '节点IP',
|
|
// port: '节点端口',
|
|
// sysName: '设备名称'
|
|
},
|
|
edgeAppConfig: {
|
|
associated: '查询方式',
|
|
tableComment: '主表字段',
|
|
relComment: '关联字段'
|
|
},
|
|
autoRefreshTimer: null
|
|
}
|
|
},
|
|
mounted() {
|
|
let graphData = deepClone(this.graphData)
|
|
this.$refs.topology.initTopo(graphData)
|
|
this.randomChange()
|
|
},
|
|
methods: {
|
|
doAutoRefresh(interval) {
|
|
if (interval === -1) {
|
|
clearInterval(this.autoRefreshTimer)
|
|
} else {
|
|
clearInterval(this.autoRefreshTimer)
|
|
this.autoRefreshTimer = setInterval(() => {
|
|
this.randomChange()
|
|
}, interval)
|
|
this.$once('hook:beforeDestroy', () => {
|
|
clearInterval(this.autoRefreshTimer)
|
|
})
|
|
}
|
|
},
|
|
doChangeMode(graphMode) {
|
|
clearInterval(this.autoRefreshTimer)
|
|
let graphData = deepClone(this.graphData)
|
|
this.$refs.topology.changeGraphMode(graphData, graphMode)
|
|
},
|
|
doManualRefresh() {
|
|
this.randomChange()
|
|
},
|
|
doSaveData(graphData) {
|
|
console.log(JSON.stringify(graphData))
|
|
},
|
|
randomChange() {
|
|
let graphData = deepClone(this.$refs.topology.getGraphData())
|
|
let { nodes } = graphData
|
|
this.$refs.topology.changeGraphData(graphData)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.demo-topology {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
html {
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
}
|
|
</style>
|