From 8f0cfe1fb39c6801c2fb434c44e33c4352a04b76 Mon Sep 17 00:00:00 2001 From: clay <20932067@zju.edu.cn> Date: Wed, 21 Jul 2021 01:36:16 +0800 Subject: [PATCH] =?UTF-8?q?top=E5=9B=BE=E5=92=8Ctop=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E6=A0=BC=E6=9D=83=E9=99=90=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ebts-ui/src/api/tool/table.js | 65 + ebts-ui/src/router/index.js | 13 - ebts-ui/src/views/tool/gen/importTable.vue | 2 +- ebts-ui/src/views/tool/query/index.vue | 1 - .../src/views/tool/table/importTopTable.vue | 119 ++ ebts-ui/src/views/tool/table/index.vue | 459 +++++++ .../topology/src/behavior/dice-er-node.js | 138 ++- .../topology/src/behavior/drag-add-edge.js | 19 +- .../topology/src/behavior/hover-event-edit.js | 24 +- .../packages/topology/src/behavior/index.js | 6 +- .../top/packages/topology/src/config/edge.js | 4 +- .../top/packages/topology/src/edge/base.js | 30 + .../top/packages/topology/src/edge/index.js | 4 +- .../packages/topology/src/edge/top-cubic.js | 14 + .../top/packages/topology/src/graph/index.js | 2 +- .../packages/topology/src/node/dice-er-box.js | 39 +- .../topology/src/theme/default-style.js | 6 +- .../top/packages/topology/src/topology.vue | 1054 +++++++++-------- .../topology/src/utils/anchor/draw_mark.js | 59 + .../topology/src/utils/anchor/index.js | 2 + .../topology/src/utils/anchor/set-state.js | 7 +- ebts-ui/src/views/tool/top/topology.vue | 192 +-- 22 files changed, 1536 insertions(+), 723 deletions(-) create mode 100644 ebts-ui/src/api/tool/table.js create mode 100644 ebts-ui/src/views/tool/table/importTopTable.vue create mode 100644 ebts-ui/src/views/tool/table/index.vue create mode 100644 ebts-ui/src/views/tool/top/packages/topology/src/edge/base.js create mode 100644 ebts-ui/src/views/tool/top/packages/topology/src/edge/top-cubic.js create mode 100644 ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/draw_mark.js diff --git a/ebts-ui/src/api/tool/table.js b/ebts-ui/src/api/tool/table.js new file mode 100644 index 0000000..d8922ae --- /dev/null +++ b/ebts-ui/src/api/tool/table.js @@ -0,0 +1,65 @@ +import request from '@/utils/request' + + +// 查询top万能查询主列表 +export function listTable(data) { + return request({ + url: '/tool/table/list', + method: 'post', + data: data + }) +} + +// 导出top万能查询主 +export function exportTable(data) { + return request({ + url: '/tool/table/export', + method: 'post', + data: data + }) +} + + +// 导入表 +export function importTopTable(data) { + return request({ + url: '/tool/table/importTopTable', + method: 'post', + params: data + }) +} + + +// 查询top万能查询主详细 +export function getTable(id) { + return request({ + url: '/tool/table/' + id, + method: 'get' + }) +} + +// 新增top万能查询主 +export function addTable(data) { + return request({ + url: '/tool/table', + method: 'post', + data: data + }) +} + +// 修改top万能查询主 +export function updateTable(data) { + return request({ + url: '/tool/table', + method: 'put', + data: data + }) +} + +// 删除top万能查询主 +export function delTable(id) { + return request({ + url: '/tool/table/' + id, + method: 'delete' + }) +} diff --git a/ebts-ui/src/router/index.js b/ebts-ui/src/router/index.js index b8fbfed..31ba445 100644 --- a/ebts-ui/src/router/index.js +++ b/ebts-ui/src/router/index.js @@ -92,19 +92,6 @@ export const constantRoutes = [ } ] }, - { - path: '/top', - component: Layout, - hidden: true, - children: [ - { - path: '/', - component: (resolve) => require(['@/views/system/top/demo-topology'], resolve), - name:'Top', - meta: {title: 'top视图'} - } - ] - }, { path: '/apiclass', component: Layout, diff --git a/ebts-ui/src/views/tool/gen/importTable.vue b/ebts-ui/src/views/tool/gen/importTable.vue index 56b2c0c..02d7889 100644 --- a/ebts-ui/src/views/tool/gen/importTable.vue +++ b/ebts-ui/src/views/tool/gen/importTable.vue @@ -31,7 +31,7 @@ - + - diff --git a/ebts-ui/src/views/tool/table/importTopTable.vue b/ebts-ui/src/views/tool/table/importTopTable.vue new file mode 100644 index 0000000..b0d599c --- /dev/null +++ b/ebts-ui/src/views/tool/table/importTopTable.vue @@ -0,0 +1,119 @@ + + + diff --git a/ebts-ui/src/views/tool/table/index.vue b/ebts-ui/src/views/tool/table/index.vue new file mode 100644 index 0000000..690ebcd --- /dev/null +++ b/ebts-ui/src/views/tool/table/index.vue @@ -0,0 +1,459 @@ + + + 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 f861dac..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 @@ -19,7 +19,14 @@ const isInBBox = (point, bbox) => { return x < maxX && x > minX && y > minY && y < maxY; }; +let vm = null; + +const sendThis = (_this) => { + vm = _this; +}; + export default { + sendThis, name: 'dice-er-node', options: { getDefaultCfg() { @@ -31,8 +38,11 @@ export default { return { itemHeight: 50, wheel: "scroll", - "node:click": "click", - // "node:mousemove": "moves", + "node:click": "onNodeClick", + "edge:click": "onEdgeClick", + "node:contextmenu": "onNodeRightClick", + "edge:contextmenu": "onEdgeRightClick", + "canvas:click": "onCanvasClick", }; }, scroll(e) { @@ -73,7 +83,114 @@ export default { }, - click(e) { + onNodeClick(event) { + this.shrinkage(event) + vm.currentFocus = "node"; + vm.rightMenuShow = false; + this.updateVmData(event); + }, + /** + * 点击连线 + * @param event + */ + onEdgeClick(event) { + let clickEdge = event.item; + clickEdge.setState("selected", !clickEdge.hasState("selected")); + vm.currentFocus = "edge"; + + this.updateVmData(event); + }, + onNodeRightClick(event) { + let graph = vm.graph; + let clickNode = event.item; + let clickNodeModel = clickNode.getModel(); + let selectedNodes = graph.findAllByState("node", "selected"); + let selectedNodeIds = selectedNodes.map(item => { + return item.getModel().id; + }); + vm.selectedNode = clickNode; + // 如果当前点击节点是之前选中的某个节点，就进行下面的处理 + if (selectedNodes.length > 1 && selectedNodeIds.indexOf(clickNodeModel.id) > -1) { + vm.rightMenuShow = true; + let rightMenu = vm.$refs.rightMenu; + rightMenu.style.left = event.clientX + "px"; + rightMenu.style.top = event.clientY + "px"; + } else { + // 隐藏右键菜单 + vm.rightMenuShow = false; + // 先取消所有节点的选中状态 + selectedNodes.forEach(node => { + node.setState("selected", false); + }); + // 再添加该节点的选中状态 + clickNode.setState("selected", true); + vm.currentFocus = "node"; + this.updateVmData(event); + } + graph.paint(); + }, + /** + * + * @param event + */ + onEdgeRightClick(event) { + let graph = vm.graph; + let clickEdge = event.item; + let clickEdgeModel = clickEdge.getModel(); + let selectedEdges = graph.findAllByState("edge", "selected"); + // 如果当前点击节点不是之前选中的单个节点，才进行下面的处理 + if (!(selectedEdges.length === 1 && clickEdgeModel.id === selectedEdges[0].getModel().id)) { + // 先取消所有节点的选中状态 + graph.findAllByState("edge", "selected").forEach(edge => { + edge.setState("selected", false); + }); + // 再添加该节点的选中状态 + clickEdge.setState("selected", true); + vm.currentFocus = "edge"; + this.updateVmData(event); + } + let point = { x: event.x, y: event.y }; + }, + onCanvasClick() { + vm.currentFocus = "canvas"; + vm.rightMenuShow = false; + }, + updateVmData(event) { + if (event.item._cfg.type === "node") { + let clickNode = event.item; + if (clickNode.hasState("selected")) { + let clickNodeModel = clickNode.getModel(); + vm.selectedNode = clickNode; + let nodeAppConfig = { ...vm.nodeAppConfig }; + Object.keys(nodeAppConfig).forEach(function(key) { + nodeAppConfig[key] = ""; + }); + vm.selectedNodeParams = { + label: clickNodeModel.label || "", + attrs:clickNodeModel.attrs, + appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig } + }; + } + } else if (event.item._cfg.type === "edge") { + // 更新vm的data: selectedEdge 和 selectedEdgeParams + let clickEdge = event.item; + if (clickEdge.hasState("selected")) { + let clickEdgeModel = clickEdge.getModel(); + vm.selectedEdge = clickEdge; + let edgeAppConfig = { ...vm.edgeAppConfig }; + Object.keys(edgeAppConfig).forEach(function(key) { + edgeAppConfig[key] = ""; + }); + vm.selectedEdgeParams = { + label: clickEdgeModel.label || "", + sourceAttrs:clickEdgeModel.sourceAttrs, + targetAttrs:clickEdgeModel.targetAttrs, + appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig } + }; + } + } + }, + shrinkage(e){ const { graph } = this; @@ -82,7 +199,7 @@ export default { if (!item) { return; } - if (shape.get("name") === "collapse") { + if (shape.get("name") === "collapse") { graph.updateItem(item, { collapsed: true, size: [300, 50], @@ -95,13 +212,12 @@ export default { }); setTimeout(() => graph.layout(), 100); }else { - // eslint-disable-next-line no-unused-vars - const model = item.getModel(); - // console.log(JSON.stringify(model)); - // console.log(model.style.default.fill = '#4eb922'); - // console.log(model.style.selected.shadowColor = '#4eb922'); - - } + // eslint-disable-next-line no-unused-vars + const model = item.getModel(); + // console.log(JSON.stringify(model)); + // console.log(model.style.default.fill = '#4eb922'); + // console.log(model.style.selected.shadowColor = '#4eb922'); + } }, moves(e) { const name = e.shape.get("name"); diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/drag-add-edge.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/drag-add-edge.js index cab35e9..c27c0af 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/drag-add-edge.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/drag-add-edge.js @@ -79,33 +79,35 @@ export default { let sourceAnchor = self.evtInfo.node.getAnchorPoints(); let sourceNodeModel = self.evtInfo.node.getModel(); + console.log("sourceNodeModel",sourceNodeModel) // 锚点数据 let anchorPoints = self.evtInfo.node.getAnchorPoints(); // 处理线条目标点 if (anchorPoints && anchorPoints.length) { // 获取距离指定坐标最近的一个锚点 - // sourceAnchor = self.evtInfo.node.getLinkPoint({ - // x: event.x, - // y: event.y - // }) + sourceAnchor = self.evtInfo.node.getLinkPoint({ + x: event.x, + y: event.y + }) } - console.log(anchorPoints, sourceAnchor); self.drawEdge.currentLine = self.graph.addItem("edge", { // id: G6.Util.uniqueId(), // 这种生成id的方式有bug，会重复 id: utils.generateUUID(), // 起始节点 source: sourceNodeModel.id, + sourceAttrs:sourceNodeModel.attrs, sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : "", // 终止节点/位置 target: { x: event.x, y: event.y }, - type: self.graph.$C.edge.type || "top-line", - style: G6.Util.mix({}, themeStyle.edgeStyle.default, self.graph.$C.edge.style) + type: self.graph.$C.edge.type || "top-cubic", + style: themeStyle.edgeStyle.default|| self.graph.$C.edge.style }); self.drawEdge.isMoving = true; }, + move(event) { let self = this; if (self.drawEdge.isMoving && self.drawEdge.currentLine) { @@ -139,7 +141,8 @@ export default { } self.graph.updateItem(self.drawEdge.currentLine, { target: targetNodeModel.id, - targetAnchor: targetAnchor ? targetAnchor.anchorIndex : "" + targetAnchor: targetAnchor ? targetAnchor.anchorIndex : "", + targetAttrs:targetNodeModel.attrs, }); // ************** 记录historyData的逻辑 start ************** diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/hover-event-edit.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/hover-event-edit.js index e61ce9e..1b83d59 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/hover-event-edit.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/hover-event-edit.js @@ -5,6 +5,7 @@ */ // 用来获取调用此js的vue组件实例（this） let vm = null; +var hourItem = null; const sendThis = (_this) => { vm = _this; }; @@ -16,6 +17,7 @@ export default { return { "node:mouseover": "onNodeHover", "node:mouseout": "onNodeOut", + "node:mouseleave":"onNodeLeave", }; }, onNodeHover(event) { @@ -34,20 +36,30 @@ export default { selectedIndex: NaN }); } - // console.log(item); if (name && name.startsWith("marker")) { - hoverNode.setState(graph,"hover", true, graph); + hoverNode.setState("hover", true, graph); + hourItem=hoverNode; + }else { + if (hourItem!=null){ + hourItem.setState("hover", false) + } } }, onNodeOut(event) { - const name = event.shape.get("name"); - console.log("out", name) let hoverNode = event.item; if (name && name.startsWith("marker")) { - hoverNode.setState(graph,"hover", false); + hoverNode.setState("hover", false); + } + if (hourItem!=null){ + hourItem.setState("hover", false) + } + hoverNode.setState("hover", false); + }, + onNodeLeave(event) { + if (hourItem!=null){ + hourItem.setState("hover", false) } - // hoverNode.setState("hover", false); } } }; diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/index.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/index.js index 34f323b..748e43b 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/index.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/index.js @@ -6,20 +6,16 @@ import dragAddEdge from './drag-add-edge' import hoverEventEdit from './hover-event-edit' -import clickEventEdit from './click-event-edit' import dragEventEdit from './drag-event-edit' import keyupEventEdit from './keyup-event-edit' import diceErNode from './dice-er-node' -import diceErEdge from './dice-er-edge' const obj = { - // dragAddEdge, + dragAddEdge, hoverEventEdit, - // clickEventEdit, dragEventEdit, keyupEventEdit, diceErNode, - diceErEdge } export default { diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/config/edge.js b/ebts-ui/src/views/tool/top/packages/topology/src/config/edge.js index a12862d..e908144 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/config/edge.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/config/edge.js @@ -5,9 +5,9 @@ */ export default { - type: 'cc-line', + type: 'top-cubic', style: { startArrow: false, - endArrow: false + endArrow: true } } diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/edge/base.js b/ebts-ui/src/views/tool/top/packages/topology/src/edge/base.js new file mode 100644 index 0000000..a694c89 --- /dev/null +++ b/ebts-ui/src/views/tool/top/packages/topology/src/edge/base.js @@ -0,0 +1,30 @@ +/** + * @author: Clay + * @data: 2019/07/18 + * @description: 线公共方法 + */ + +import utils from '../utils' + +export default { + draw(cfg, group) { + const { startPoint, endPoint } = cfg + const keyShape = group.addShape('path', { + className: 'edge-shape', + attrs: { + ...cfg.style, + path: [ + ['M', startPoint.x, startPoint.y], + ['L', endPoint.x, endPoint.y] + ] + }, + name: 'edge-shape' + }) + console.log(keyShape.attrs.endArrow = true) + return keyShape + }, + setState(name, value, item) { + // 设置边状态 + utils.edge.setState(name, value, item) + } +} diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/edge/index.js b/ebts-ui/src/views/tool/top/packages/topology/src/edge/index.js index fe26e88..bcbbbe4 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/edge/index.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/edge/index.js @@ -5,10 +5,10 @@ */ -import diceErEdge from './dice-er-edge' +import topCubic from './top-cubic' const obj = { - diceErEdge + topCubic } export default function(G6) { diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/edge/top-cubic.js b/ebts-ui/src/views/tool/top/packages/topology/src/edge/top-cubic.js new file mode 100644 index 0000000..c53d53f --- /dev/null +++ b/ebts-ui/src/views/tool/top/packages/topology/src/edge/top-cubic.js @@ -0,0 +1,14 @@ +/** + * @author: Clay + * @data: 2019/07/18 + * @description: 曲线 + */ + +import base from './base' +export default { + name: 'top-cubic', + extendName: 'cubic', + options: { + ...base + } +} diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/graph/index.js b/ebts-ui/src/views/tool/top/packages/topology/src/graph/index.js index 5b6581e..928ff74 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/graph/index.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/graph/index.js @@ -39,7 +39,7 @@ const initGraph = { } }, defaultEdge: { - type: 'dice-er-edge', + type: 'top-cubic', labelCfg: { position: 'center', autoRotate: false diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js b/ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js index b5da5f0..cf4467f 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js @@ -15,6 +15,14 @@ export default { sendThis, name: 'dice-er-box', options: { + setState(name, value, item) { + // 设置节点状态 + utils.node.setState(name, value, item) + // 设置锚点状态 + // if (vm.graphMode === 'edit') { + utils.anchor.setState(name, value, item) + // } + }, draw(cfg, group) { const width = 250; const height = 316; @@ -203,8 +211,8 @@ export default { }); if (!cfg.hideDot) { - utils.anchor.erDrawLeft(group, label, 0, i * itemHeight + offsetY) - utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY) + // utils.anchor.erDrawLeft(group, label, 0, i * itemHeight + offsetY) + // utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY) // listContainer.addShape("marker", { // attrs: { // x: 0, @@ -254,25 +262,20 @@ export default { }); }); } - - - // console.log(keyshape); return keyshape; }, - getAnchorPoints() { - return [ - [0, 0], - [1, 0], - ]; - }, - setState(graph,name, value, item) { - // 设置节点状态 - // utils.node.setState(name, value, item) - // 设置锚点状态 - // if (vm.graphMode === 'edit') { - utils.anchor.setState(graph,name, value, item) - // } + // getAnchorPoints() { + // return [ + // [0, 0], + // [1, 0], + // ]; + // }, + // 绘制后附加锚点 + afterDraw(cfg, group) { + // 绘制锚点 + utils.anchor.drawMark(cfg, group) }, + } } diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/theme/default-style.js b/ebts-ui/src/views/tool/top/packages/topology/src/theme/default-style.js index 3cb5cd0..7838462 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/theme/default-style.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/theme/default-style.js @@ -74,15 +74,15 @@ export default { r: 3, symbol: 'circle', lineWidth: 1, - fill: 'white', + fill: '#FFFFFF', fillOpacity: 1, stroke: '#096DD9', strokeOpacity: 1, cursor: 'crosshair' }, hover: { - fillOpacity: 1, - strokeOpacity: 1 + fillOpacity: 0.3, + strokeOpacity: 0.5 }, unhover: { fillOpacity: 0, 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 c4b1732..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 @@ -14,7 +14,8 @@
+ :key="nodeType.guid" + > + ref="graphContainer" + >
节点
节点标签 - - + + +
+ 字段信息 + +
{{ value }} - - + + +
连线
- 连线标签 - -
- {{ value }} - + + +
+ 查询方式 +
+ + + + + +
+
+ 主表字段 +
+ + + +
+
+
+ 关联字段 +
+ + + +
+
+ + + + + + +
@@ -101,30 +169,30 @@