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


Posted in Javascript onAugust 24, 2018

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

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

创建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实例的基础上,加了遮罩图与搜索后高亮显示功能。

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

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

这个是遮罩层的div

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

这里是把之前定义好的Diagram放进遮罩层。

搜索框的作用即是更快的找到相应的数据,下图代码是设置搜索后显示高亮的数据。

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

效果图如下:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 #Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 #Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 #Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 #Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 #Javascript
浅谈Vue组件及组件的注册方法
Aug 24 #Javascript
JavaScript中this关键字用法实例分析
Aug 24 #Javascript
You might like
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
python实现报表自动化详解
2017/11/16 Python
scrapy爬虫完整实例
2018/01/25 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
护理学毕业生自荐信
2013/10/02 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
求职信怎么写
2014/05/23 职场文书
设备技术员岗位职责
2015/04/11 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
2015年话务员工作总结
2015/04/29 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
python中tkinter复选框使用操作
2021/11/11 Python
nginx访问报403错误的几种情况详解
2022/07/23 Servers