From 5fa018f70fd52ef2f864e44c56a16670c93d14dd Mon Sep 17 00:00:00 2001 From: clay <20932067@zju.edu.cn> Date: Tue, 20 Jul 2021 00:34:36 +0800 Subject: [PATCH] =?UTF-8?q?top=E5=9B=BE=E5=AD=97=E6=AE=B5=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../topology/src/behavior/dice-er-node.js | 1 + .../top/packages/topology/src/topology.vue | 67 +++-- ebts-ui/src/views/tool/top/topology.vue | 232 +----------------- 3 files changed, 55 insertions(+), 245 deletions(-) diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js index 576a5ff..964ed96 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js @@ -167,6 +167,7 @@ export default { }); vm.selectedNodeParams = { label: clickNodeModel.label || "", + attrs:clickNodeModel.attrs, appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig } }; } diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/topology.vue b/ebts-ui/src/views/tool/top/packages/topology/src/topology.vue index faa87eb..54dd640 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/topology.vue +++ b/ebts-ui/src/views/tool/top/packages/topology/src/topology.vue @@ -49,6 +49,31 @@ 节点标签 +
+ 字段信息 + +
{{ value }} @@ -60,12 +85,15 @@
连线
- - + +
查询方式
- + @@ -315,6 +343,7 @@ export default { this.selectedNodeParamsTimeout = setTimeout(() => { selectedNodeModel.label = newVal.label selectedNodeModel.appConfig = newVal.appConfig + selectedNodeModel.attrs = newVal.attrs this.selectedNode.update(selectedNodeModel) }, 300) } @@ -965,47 +994,56 @@ export default { { key: 'id', type: 'number(6)', - comment: '主键id' + comment: '主键id', + isUse: 1 }, { key: 'key', type: 'varchar(255)', - comment: '关键字' + comment: '关键字', + isUse: 1 }, { key: 'gender', type: 'enum(M, F)', - comment: 'gender' + comment: 'gender', + isUse: 1 }, { key: 'birthday', type: 'date', - comment: '生日' + comment: '生日', + isUse: 1 }, { key: 'hometown', type: 'varchar(255)', - comment: '家乡' + comment: '家乡', + isUse: 1 }, { key: 'country', type: 'varchar(255)', - comment: '国家' + comment: '国家', + isUse: 1 }, { key: 'nation', type: 'varchar(255)', - comment: 'nation' + comment: 'nation', + isUse: 1 }, { key: 'jobId', type: 'number(3)', - comment: '工作id' + comment: '工作id', + isUse: 1 }, { key: 'phone', type: 'varchar(255)', - comment: '电话' + comment: '电话', + isUse: 1 } ], // img: nodeType.imgSrc, @@ -1268,9 +1306,10 @@ export default { height: calc(100% - 55px); } - .input-item{ + .input-item { margin-top: 8px; - .input-select{ + + .input-select { margin-top: 8px; } } diff --git a/ebts-ui/src/views/tool/top/topology.vue b/ebts-ui/src/views/tool/top/topology.vue index 715d118..f021955 100644 --- a/ebts-ui/src/views/tool/top/topology.vue +++ b/ebts-ui/src/views/tool/top/topology.vue @@ -26,237 +26,7 @@ export default { }, data() { return { - graphData: { - 'nodes': [{ - 'id': 'a72f9f56-d3b6-4f7b-a42f-bf9cc45e7c3c', - 'x': 144.47865794573642, - 'y': -12.739970930232559, - 'labels': '服务器', - 'table': 'test_table', - 'type': 'dice-er-box', - 'attrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, { - 'key': 'key', - 'type': 'varchar(255)', - 'comment': '关键字' - }, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, { - 'key': 'birthday', - 'type': 'date', - 'comment': '生日' - }, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, { - 'key': 'country', - 'type': 'varchar(255)', - 'comment': '国家' - }, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, { - 'key': 'jobId', - 'type': 'number(3)', - 'comment': '工作id' - }, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }], - '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, - 'label': '', - 'appConfig': { 'ip': '', 'port': '', 'sysName': '' }, - 'depth': 0 - }, { - 'id': '933f5158-258e-44c9-8e1f-70aa701729a8', - 'x': 494.37013081395366, - 'y': 132.21506782945744, - 'labels': '数据库', - 'table': 'test_table', - 'type': 'dice-er-box', - 'attrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, { - 'key': 'key', - 'type': 'varchar(255)', - 'comment': '关键字' - }, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, { - 'key': 'birthday', - 'type': 'date', - 'comment': '生日' - }, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, { - 'key': 'country', - 'type': 'varchar(255)', - 'comment': '国家' - }, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, { - 'key': 'jobId', - 'type': 'number(3)', - 'comment': '工作id' - }, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }], - '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, - 'label': '', - 'appConfig': { 'ip': '', 'port': '', 'sysName': '' }, - 'depth': 0 - }], 'edges': [{ - 'id': 'b424996b-62cf-487c-bd7b-83210e8a6866', - 'source': '933f5158-258e-44c9-8e1f-70aa701729a8', - 'sourceAttrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, { - 'key': 'key', - 'type': 'varchar(255)', - 'comment': '关键字' - }, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, { - 'key': 'birthday', - 'type': 'date', - 'comment': '生日' - }, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, { - 'key': 'country', - 'type': 'varchar(255)', - 'comment': '国家' - }, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, { - 'key': 'jobId', - 'type': 'number(3)', - 'comment': '工作id' - }, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }], - 'sourceAnchor': 3, - 'target': '933f5158-258e-44c9-8e1f-70aa701729a8', - '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': 493.87013081395366, 'y': 290.21506782945744, 'anchorIndex': 3 }, - 'endPoint': { 'x': 493.87013081395366, 'y': 290.21506782945744, 'anchorIndex': 3 }, - 'targetAnchor': 3, - 'targetAttrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, { - 'key': 'key', - 'type': 'varchar(255)', - 'comment': '关键字' - }, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, { - 'key': 'birthday', - 'type': 'date', - 'comment': '生日' - }, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, { - 'key': 'country', - 'type': 'varchar(255)', - 'comment': '国家' - }, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, { - 'key': 'jobId', - 'type': 'number(3)', - 'comment': '工作id' - }, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }], - 'curveOffset': [-20, 20], - 'curvePosition': [0.5, 0.5], - 'depth': 0 - }, { - 'id': '22cefcd1-5d30-4a89-a061-81d7c111a99d', - 'source': '933f5158-258e-44c9-8e1f-70aa701729a8', - 'sourceAttrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, { - 'key': 'key', - 'type': 'varchar(255)', - 'comment': '关键字' - }, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, { - 'key': 'birthday', - 'type': 'date', - 'comment': '生日' - }, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, { - 'key': 'country', - 'type': 'varchar(255)', - 'comment': '国家' - }, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, { - 'key': 'jobId', - 'type': 'number(3)', - 'comment': '工作id' - }, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }], - 'sourceAnchor': 3, - 'target': 'a72f9f56-d3b6-4f7b-a42f-bf9cc45e7c3c', - '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': 493.87013081395366, 'y': 290.21506782945744, 'anchorIndex': 3 }, - 'endPoint': { 'x': 394.9786579457364, 'y': 145.26002906976743, 'anchorIndex': 1 }, - 'curveOffset': [-20, 20], - 'curvePosition': [0.5, 0.5], - 'targetAnchor': 1, - 'targetAttrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, { - 'key': 'key', - 'type': 'varchar(255)', - 'comment': '关键字' - }, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, { - 'key': 'birthday', - 'type': 'date', - 'comment': '生日' - }, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, { - 'key': 'country', - 'type': 'varchar(255)', - 'comment': '国家' - }, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, { - 'key': 'jobId', - 'type': 'number(3)', - 'comment': '工作id' - }, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }], - 'depth': 0, - 'label': '', - 'appConfig': { 'associated': 'left', 'tableComment': 'id', 'relComment': 'key' } - }], 'combos': [] - }, + 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") },