您的位置：首页 > Web前端 > Vue.js

vue 中引用gojs绘制E-R图的方法示例

2018-08-24 15:11 1186 查看

首先，在vue项目中安装gojs的依赖包，并在项目中引入。

创建tablePreview.vue

<style>
#sample{
position: relative;
margin: 20px;
}
#myOverviewDiv {
position: absolute;
width:225px;
height:100px;
top: 10px;
left: 10px;
background-color: aliceblue;
z-index: 300; /* make sure its in front */
border: solid 1px blue;
}
#mySearch{
width: 60%;
float: right;
margin-right: 20px;
}
.input_button{
margin: 20px;
}
#entityRelation{
width: 100%;
height: 700px;
border:1px solid #cccccc;
}
.returnShang{
color: #fff;
text-underline: none;
}
.returnShang:hover{
color: #fff;
text-underline: none;
}
</style>
<template>
<div>
<div class="input_button">
<Button type="success"><router-link to="/dataSourceAdmin" class="returnShang">返回上一级</router-link></Button>
<Button type="primary" @click="searchDiagram()" style="float: right">Search</Button>
<Input placeholder="请输入要查询的表名" id="mySearch" v-model="searchText" @keyup.enter.native="searchDiagram()"></Input>

</div>
<div id="sample">
<div id="entityRelation"></div>
<div id="myOverviewDiv"></div>
</div>
</div>
</template>
<script src="./tablePreview.js"></script>

在js文件中绘制E-R图，注意：初始化方面必须放在mounted中调用。

tablePreview.js如下

export default{
data() {
return {
myDiagram: '',
searchText: '',
tabViewList: '',
tabRelView: ''
}
},
mounted() {
var dataSoureId = JSON.parse(sessionStorage.getItem("previewInfo")).datasourceId
let _this = this
_this.$ajax.post(_this.cfg.api.dataPoolAdmin.tableRelView +'?datasourceId=' + dataSoureId)
.then(function (res) {
if(res.data.result) {
_this.tabViewList = res.data.data.tabViewList
_this.tabRelView = res.data.data.tabRelViewList
_this.init()
}
})

},
methods: {
init() {
var go = this.go
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var a = go.GraphObject.make; // 定义模板

this.myDiagram =
a(go.Diagram, 'entityRelation', // 必须命名或引用div html元素
{
initialContentAlignment: go.Spot.Center,
allowDelete: false,
allowCopy: false,
layout: a(go.ForceDirectedLayout),
"undoManager.isEnabled": true
});

// define several shared Brushes
var bluegrad = a(go.Brush, "Linear", { 0: "rgb(150, 150, 250)", 0.5: "rgb(86, 86, 186)", 1: "rgb(86, 86, 186)" });
var greengrad = a(go.Brush, "Linear", { 0: "rgb(158, 209, 159)", 1: "rgb(67, 101, 56)" });
var redgrad = a(go.Brush, "Linear", { 0: "rgb(206, 106, 100)", 1: "rgb(180, 56, 50)" });
var yellowgrad = a(go.Brush, "Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" });
var lightgrad = a(go.Brush, "Linear", { 1: "#E6E6FA", 0: "#FFFAF0" });

// the template for each attribute in a node's array of item data
var itemTempl =
a(go.Panel, "Horizontal",
a(go.Shape,
{ desiredSize: new go.Size(10, 10) },
new go.Binding("figure", "figure"),
new go.Binding("fill", "color")),
a(go.TextBlock,//items样式
{ stroke: "#333333",
row: 0, alignment: go.Spot.Center,
margin: new go.Margin(0, 14, 0, 2),
font: "bold 14px sans-serif" },
new go.Binding("text", "name"))
);

// define the Node template, representing an entity
this.myDiagram.nodeTemplate =
a(go.Node, "Auto", // the whole node panel
{ selectionAdorned: true,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,
shadowColor: "#CCAA" },
new go.Binding("location", "location").makeTwoWay(),
// whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
// clear out any desiredSize set by the ResizingTool.
new go.Binding("desiredSize", "visible", function(v) { return new go.Size(NaN, NaN); }).ofObject("LIST"),
// define the node's outer shape, which will surround the Table
a(go.Shape, "Rectangle",
/*{ fill: lightgrad, stroke: "#756875", strokeWidth: 3 }),*/
new go.Binding("fill", "isHighlighted", function(h) { return h ? "#F44336" : "#A7E7FC"; }).ofObject()),
a(go.Panel, "Table",
{ margin: 15, stretch: go.GraphObject.Fill },
a(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
// the table header
a(go.TextBlock,
{
row: 0, alignment: go.Spot.Center,
margin: new go.Margin(0, 14, 0, 2), // leave room for Button
font: "bold 16px sans-serif"
},
new go.Binding("text", "key")),
// 折叠/展开按钮
/*a("PanelExpanderButton", "LIST", // the name of the element whose visibility this button toggles
{ row: 0, alignment: go.Spot.TopRight }),*/
// the list of Panels, each showing an attribute
a(go.Panel, "Vertical",
{
name: "LIST",
row: 1,
padding: 0,//表名到下边框的距离
alignment: go.Spot.TopLeft,
defaultAlignment: go.Spot.Left,
stretch: go.GraphObject.Horizontal,
itemTemplate: itemTempl
},
new go.Binding("itemArray", "items"))
) // end Table Panel
); // end Node

// define the Link template, representing a relationship
this.myDiagram.linkTemplate =
a(go.Link, // the whole link panel
{
selectionAdorned: true,
layerName: "Foreground",
reshapable: true,
routing: go.Link.AvoidsNodes,
corner: 5,
curve: go.Link.JumpOver,
toEndSegmentLength: 100
},
a(go.Shape, // the link shape
{ stroke: "#303B45", strokeWidth: 2.5 }),
a(go.TextBlock, // the "from" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "text")),
a(go.TextBlock, // the "to" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "toText"))
);

// create the model for the E-R diagram
var nodeDataArray = []
for(var i =0; i< this.tabViewList.length; i++){
nodeDataArray.push(JSON.parse(JSON.stringify(
{ key: this.tabViewList[i].tableName,
name: this.tabViewList[i].tableCnName,
items: [{name: this.tabViewList[i].tableCnName, isKey: false, figure: 'Decision', color: "#2d8cf0"}]
}
)))
}
var linkDataArray = []
for(var j =0; j< this.tabRelView.length; j++){
linkDataArray.push(JSON.parse(JSON.stringify(
{ from: this.tabRelView[j].fromTableName, to: this.tabRelView[j].toTableName,
text: this.tabRelView[j].fromText, toText: this.tabRelView[j].toText
})
))
}
/*var nodeDataArray = [
{ key: this.tabViewList[].tableName,
items: [ { name: "角色标识:BIGINT", iskey: true, figure: "Decision", color: yellowgrad },
{ name: "模块标识:BIGINT", iskey: false, figure: "Cube", color: bluegrad }] },
{ key: "角色信息表",
items: [ { name: "标识:BIGINT", iskey: true, figure: "Decision", color: yellowgrad },
{ name: "名称:VARCHAR(100)", iskey: false, figure: "Cube1", color: bluegrad },
{ name: "描述:VARCHAR(100)", iskey: false, figure: "Cube1", color: bluegrad },
{ name: "排序:VARCHAR(100)", iskey: false, figure: "Cube1", color: bluegrad } ] },
{ key: "用户权限表",
items: [ { name: "CategoryID", iskey: true, figure: "Decision", color: yellowgrad },
{ name: "CategoryName", iskey: false, figure: "Cube", color: bluegrad },
{ name: "Description", iskey: false, figure: "Cube", color: bluegrad },
{ name: "Picture", iskey: false, figure: "TriangleUp", color: redgrad } ] },
{ key: "用户信息表",
items: [ { name: "OrderID", iskey: true, figure: "Decision", color: yellowgrad },
{ name: "ProductID", iskey: true, figure: "Decision", color: yellowgrad },
{ name: "UnitPrice", iskey: false, figure: "MagneticData", color: greengrad },
{ name: "Quantity", iskey: false, figure: "MagneticData", color: greengrad },
{ name: "Discount", iskey: false, figure: "MagneticData", color: greengrad } ] },
{ key: "表1",
items: [ { name: "OrderID", iskey: true, figure: "Decision", color: yellowgrad },
{ name: "ProductID", iskey: true, figure: "Decision", color: yellowgrad },
{ name: "UnitPrice", iskey: false, figure: "MagneticData", color: greengrad },
{ name: "Quantity", iskey: false, figure: "MagneticData", color: greengrad },
{ name: "Discount", iskey: false, figure: "MagneticData", color: greengrad } ] },
{ key: "表2",
items: [ { name: "OrderID", iskey: true, figure: "Decision", color: yellowgrad },
{ name: "ProductID", iskey: true, figure: "Decision", color: yellowgrad },
{ name: "UnitPrice", iskey: false, figure: "MagneticData", color: greengrad },
{ name: "Quantity", iskey: false, figure: "MagneticData", color: greengrad },
{ name: "Discount", iskey: false, figure: "MagneticData", color: greengrad } ] },
{ key: "表3" },
{ key: "表4",
items: [ { name: "OrderID", iskey: true, figure: "Decision", color: yellowgrad },
{ name: "ProductID", iskey: true, figure: "Decision", color: yellowgrad },
{ name: "UnitPrice", iskey: false, figure: "MagneticData", color: greengrad },
{ name: "Quantity", iskey: false, figure: "MagneticData", color: greengrad },
{ name: "Discount", iskey: false, figure: "MagneticData", color: greengrad } ] },
];*/
/*var linkDataArray = [
{ from: "角色权限表", to: "角色信息表", text: "N", toText: "1" },
{ from: "角色权限表", to: "用户权限表", text: "N", toText: "1" },
{ from: "用户信息表", to: "角色权限表", text: "N", toText: "1" },
{ from: "表1", to: "角色权限表", text: "N", toText: "1" },
{ from: "角色权限表", to: "表1", text: "N", toText: "1" },
{ from: "表2", to: "用户信息表", text: "N", toText: "1" },
{ from: "表3", to: "用户信息表", text: "N", toText: "1" },
{ from: "表4", to: "角色权限表", text: "N", toText: "1" }
];*/
this.myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
// Overview
var myOverview =
a(go.Overview, "myOverviewDiv", // the HTML DIV element for the Overview
{ observed: this.myDiagram, contentAlignment: go.Spot.Center });
},
searchDiagram() { // called by button
var input = document.getElementById("mySearch");
if (!input) return;
input.focus();
this.myDiagram.startTransaction("highlight search");
if (this.searchText) {
// search four different data properties for the string, any of which may match for success
// create a case insensitive RegExp from what the user typed
var regex = new RegExp(this.searchText, "i");
var results = this.myDiagram.findNodesByExample({ key: regex },{name: regex});
this.myDiagram.highlightCollection(results);
// try to center the diagram at the first node that was found
if (results.count > 0) this.myDiagram.centerRect(results.first().actualBounds);
} else { // empty string only clears highlighteds collection
this.myDiagram.clearHighlighteds();
}

this.myDiagram.commitTransaction("highlight search");
}
}
}

这里在gojs的EntityRelationship实例的基础上，加了遮罩图与搜索后高亮显示功能。

遮罩层的作用是当有很多数据时，可以通过拖动遮罩层来查找。