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

<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>

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");
 }
 }
}