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 相关文章推荐
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
解决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
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
python Celery定时任务的示例
2018/03/13 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python实现静态服务器
2019/09/05 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
计算机本科生自荐信
2013/10/15 职场文书
售房协议书
2014/08/19 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
2014年变电站工作总结
2014/12/19 职场文书
领导工作表现评语
2015/01/04 职场文书
优秀英文求职信范文
2015/03/19 职场文书
二胎满月酒致辞
2015/07/29 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
python如何为list实现find方法
2022/05/30 Python