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