需求：初始化gojs圖表（進入頁面，顯示帶網格的背景），選擇下拉框中的某個值後，繪製E-R圖，E-R圖繪製完成後，選中值的表顯示高亮。
難點：
1、繪製網格背景
this.myDiagram.grid =
a(go.Panel, 'Grid',
{
name: 'GRID',
visible: true,
gridCellSize: new go.Size(15, 15),
gridOrigin: new go.Point(0, 0)
},
a(go.Shape, 'LineH', { stroke: '#98DDF0', strokeWidth: 0.5, interval: 1 }),
a(go.Shape, 'LineV', { stroke: '#98DDF0', strokeWidth: 0.5, interval: 1 })
)
2、監聽E-R圖繪製完成後，再顯示高亮，方法如下：
_this.myDiagram.addDiagramListener('InitialLayoutCompleted', function () {
_this.highLight()
})
highLight () {
if (this.tableId) {
var regex = new RegExp(this.tableId, "i");
var results = this.myDiagram.findNodesByExample({ tableId: regex });
this.myDiagram.highlightCollection(results);
if (results.count > 0) this.myDiagram.centerRect(results.first().actualBounds);
} else {
this.myDiagram.clearHighlighteds();
}
this.myDiagram.commitTransaction("highlight search");
}
代碼如下：
<style scoped>
.searchInput{
width: 40%;
}
.gaojiDiv{
margin-top: 10px;
}
.switchSelect{
margin-right: 20px;
}
.gaojiInput{
width: 20%;
margin-right: 20px;
}
#kinshipDiagram{
height: 650px;
border:1px solid #98DDF0;
background-color: #FFFFFF;
}
.checkBoxStyle{
width: 130px;
}
.searchButton{
margin: 0 10px;
}
.rightTable{
height: 650px;
}
.formSpan{
display: block;
width: 200px;
}
.ivu-form-item{
margin-bottom: 0px!important;
}
.ivu-form .ivu-form-item-label {
font-weight: bold !important;
}
</style>
<template>
<div>
<Card>
<div slot="title">
<Select
v-model="dropdownSearch"
class="searchInput"
clearable
filterable
remote
:remote-method="remoteMethod"
@on-change="searchDrop"
@on-clear="clearSearch"
placeholder="請輸入表名"
:loading="loading">
<Option v-for="(item,index) in dropdownList" :value="item.tableId" :key="item.tableId">{{item.tableName}}[{{ item.datasourceName }}]</Option>
</Select>
<Button type="dashed" @click="filterShow">高級過濾</Button>
<Button type="primary" class="searchButton" v-show="showDiv" @click="gaojiSearch">搜索</Button>
<div class="gaojiDiv" v-show="showDiv">
<div v-for="(item,index) in dataLevelList" :key="index">
<el-checkbox v-model="item.levelStatus" :label="item.levelName" border size="small" class="checkBoxStyle"></el-checkbox>
表名前綴: <el-input v-model="item.tablePrefix" placeholder="請輸入表名前綴..." size="mini" class="gaojiInput"></el-input>
<el-switch
v-model="item.andOr"
active-color="#13ce66"
inactive-color="#409EFF"
class="switchSelect"
active-text="或"
inactive-text="且">
</el-switch>
後綴: <el-input v-model="item.tableSuffix" placeholder="請輸入表名後綴..." size="mini" style="width: 300px"></el-input>
</div>
</div>
</div>
<Row>
<Col span="18">
<div id="kinshipDiagram"></div>
</Col>
<Col span="6">
<div class="rightTable">
<Form :label-width="80">
<FormItem label="表的名稱:">
<span class="formSpan">{{tableInfo.tableName}}</span>
</FormItem>
<FormItem label="表的註釋:">
<span class="formSpan">{{tableInfo.comment}}</span>
</FormItem>
<FormItem label="數據源:">
<span class="formSpan">{{tableInfo.datasourceName}}</span>
</FormItem>
<FormItem label="創建時間:">
<span class="formSpan">{{tableInfo.createTime}}</span>
</FormItem>
</Form>
<div style="width: 100%; margin-left: 1%; max-height: 502px; overflow-y: auto;">
<Table :columns="tableColumns" :data="fieldInfoList"></Table>
</div>
</div>
</Col>
</Row>
</Card>
</div>
</template>
<script>
export default {
data () {
return {
showDiv: false, // 控制高級搜索的顯示
myDiagram: '',
loading: '',
dropdownList: [],
dropdownSearch: '',
tableInfo: {},
tableId: '',
fieldInfoList: [],
tableColumns: [
{
title: '列字段',
key: 'fieldName'
}, {
title: '字段註釋',
key: 'comment'
}, {
title: '字段類型',
key: 'fieldType'
}
],
dataLevelList: [
{
levelType: 'datacenter_level_bs',
levelName: '數據中心bs層',
levelStatus: false,
andOr: false,
tablePrefix: '',
tableSuffix: ''
}, {
levelType: 'datacenter_level_ods',
levelName: '數據中心ods層',
levelStatus: false,
andOr: false,
tablePrefix: '',
tableSuffix: ''
}, {
levelType: 'datacenter_level_dw',
levelName: '數據中心dw層',
levelStatus: false,
andOr: false,
tablePrefix: '',
tableSuffix: ''
},{
levelType: 'subjectdb',
levelName: '專題庫',
levelStatus: false,
andOr: false,
tablePrefix: '',
tableSuffix: ''
}
]
}
},
mounted () {
this.init()
this.getDropdownList('','')
},
methods: {
clearSearch () {
this.filterShow()
this.showDiv = false
},
highLight () {
if (this.tableId) {
var regex = new RegExp(this.tableId, "i");
var results = this.myDiagram.findNodesByExample({ tableId: regex });
this.myDiagram.highlightCollection(results);
if (results.count > 0) this.myDiagram.centerRect(results.first().actualBounds);
} else {
this.myDiagram.clearHighlighteds();
}
this.myDiagram.commitTransaction("highlight search");
},
gaojiSearch () {
let _this = this
var obj = {
tableId: this.tableId,
tableName: '',
dataLevelList: []
}
if (_this.dropdownSearch == '') {
_this.$Message.error('請先輸入表名!')
} else {
var temp = _this.dataLevelList
for (let i = 0; i<temp.length; i++) {
if(temp[i].levelStatus) {
obj.dataLevelList.push({
levelType: temp[i].levelType,
and2Or:temp[i].and2Or?'or': 'and',
tablePrefix: temp[i].tablePrefix,
tableSuffix: temp[i].tableSuffix
})
}
}
}
_this.searchInterface(obj)
_this.myDiagram.addDiagramListener('InitialLayoutCompleted', function () {
_this.highLight()
})
},
searchInterface (obj) {
let _this = this
_this.$ajax.post(_this.cfg.api.kinship.query, obj).then(res => {
if (res.data.result) {
var data = res.data.data
_this.myDiagram.model = new go.GraphLinksModel(data.nodeList, data.linkList)
_this.tableInfo = data.tableInfo
_this.fieldInfoList = data.fieldInfoList
}
})
},
searchDrop (value) {
let _this = this
_this.tableId = value
var obj = {
tableId: value
}
_this.searchInterface(obj)
_this.myDiagram.addDiagramListener('InitialLayoutCompleted', function () {
_this.highLight()
})
},
getDropdownList (tableName, maxLimit) {
let _this = this
_this.$ajax.post(`${_this.cfg.api.kinship.getDbTableDropdown}?tableName=${tableName}&maxLimit=${maxLimit}`).then(res => {
if (res.data.result) {
_this.dropdownList = res.data.data
}
})
},
remoteMethod (query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.getDropdownList(query,'')
}, 200);
} else {
this.loading = [];
}
},
filterShow (){
this.showDiv = !this.showDiv
this.dataLevelList = [
{
levelType: 'datacenter_level_bs',
levelName: '數據中心bs層',
levelStatus: false,
andOr: false,
tablePrefix: '',
tableSuffix: ''
}, {
levelType: 'datacenter_level_ods',
levelName: '數據中心ods層',
levelStatus: false,
andOr: false,
tablePrefix: '',
tableSuffix: ''
}, {
levelType: 'datacenter_level_dw',
levelName: '數據中心dw層',
levelStatus: false,
andOr: false,
tablePrefix: '',
tableSuffix: ''
},{
levelType: 'subjectdb',
levelName: '專題庫',
levelStatus: false,
andOr: false,
tablePrefix: '',
tableSuffix: ''
}
]
},
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, 'kinshipDiagram', // 必須命名或引用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" });
this.myDiagram.grid =
a(go.Panel, 'Grid',
{
name: 'GRID',
visible: true,
gridCellSize: new go.Size(15, 15),
gridOrigin: new go.Point(0, 0)
},
a(go.Shape, 'LineH', { stroke: '#98DDF0', strokeWidth: 0.5, interval: 1 }),
a(go.Shape, 'LineV', { stroke: '#98DDF0', strokeWidth: 0.5, interval: 1 })
)
this.myDiagram.nodeTemplate =
a(go.Node, "Auto",
{ locationSpot: go.Spot.TopLeft },
a(go.Shape, "Rectangle",
{ fill: '#fff', stroke: '#2d8cf0', strokeWidth: 2 },
new go.Binding("fill", "isHighlighted", function(h) {
return h ? "#f03650" : "#fff";
}).ofObject() // 設置高亮
),
a(go.Panel, "Vertical",
{ margin: 15, stretch: go.GraphObject.Horizontal },
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",
stroke: "#1967B3"
},
new go.Binding("text", "key")),
a(go.TextBlock,
{
row: 0, alignment: go.Spot.Center,
margin: new go.Margin(0, 14, 0, 2), // leave room for Button
stroke: '#1967B3'
},
new go.Binding("text", "name"))
)
)
// define the Link template, representing a relationship
this.myDiagram.linkTemplate =
a(go.Link,
{
routing: go.Link.Orthogonal,
corner: 0,
layerName: 'Background' // 不要在任何節點前面交叉
},
a(go.Shape, {
strokeWidth: 1,
stroke: '#33A7EB'
}), // 線的寬度和筆畫的顏色
a(go.Shape,{ // 定義箭頭
toArrow: 'standard',
stroke: '#33A7EB',
fill: '#33A7EB'
}
)
)
// 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: 'table1', name: '表1'},
{ key: 'table2', name: '表2'},
{ key: 'table3', name: '表3'},
{ key: 'table4', name: '表4'},
{ key: 'table5', name: '表5'},
{ key: 'table6', name: '表6'}
]
var linkDataArray = [
{ from: "table1", to: "table4"},
{ from: "table2", to: "table6"},
{ from: "table1", to: "table5"},
{ from: "table1", to: "table3"},
{ from: "table5", to: "table3"},
{ from: "table3", to: "table6"},
{ from: "table4", to: "table6"},
{ from: "table6", to: "table5"}
];
this.myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);*/
}
}
}
</script>
效果圖如下：
