<template>
<div id="wrap">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="灵活查询名称">
<el-input v-model="dataName" placeholder="名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveData">保存数据</el-button>
</el-form-item>
</el-form>
<div id="chart-wrap">
<div id="chart-palette"></div>
<div id="chart-diagram" style="border: 1px solid black; width: 800px; height: 650px"></div>
<!-- <textarea id="mySavedModel" style="width:100%;height:300px"></textarea> -->
</div>
<el-button @click="updata">编辑连线</el-button>
<el-button @click="del">删除节点</el-button>
<el-button @click="show">查看节点信息</el-button>
<el-button @click="setMain">设置主表</el-button>
<!-- <button @click="onSubmit"></button> -->
<el-dialog title='请选择该关联关系' :visible.sync="linkData" :close-on-click-modal="false" :modal-append-to-body='false' >
<el-radio-group v-model="linkDataList">
<el-radio :label="1">内连接</el-radio>
<el-radio :label="2">左连接</el-radio>
<el-radio :label="3">右连接</el-radio>
<el-radio :label="4">全连接</el-radio>
</el-radio-group>
<div slot="footer" class="dialog-footer">
<el-button type="primary" icon="check" @click="addLinkData"> 确定添加 </el-button>
<el-button v-if="delShow" @click="del" type="danger">删除节点信息</el-button>
<el-button @click="linkData=false"> 取 消 </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import go from "gojs";
import { getColsByTable,saveMainTabRel,queryMainTabRel } from '@/api/pactera/flexibleQueryApi/informationSearch.js'
const $ = go.GraphObject.make;
export default {
props: {
orgCodeRightTree:{
type: Array,
required:true
},
sourceId :{
type: String,
required:true
},
getFlexibleId :{
type: String,
required:true
}},
data() {
return {
dataName: '',
delShow: '',
// orgCodeRightTree: '',
e: '', // 存放右边画布json信息
linkDataList: '',
flexibleId:'',
linkData: false,
saveDataList: {},
saveDataListPush: {},
nodeDataArray: [],
linkDataArray: [],
nodeDataArray2: [],
linkDataArray2: [],
dataFilter: {},
};
},
created() {
console.log(this.getFlexibleId)
var isMain = '0'
var color = 'white'
this.nodeDataArray2=[]
// this.orgCodeRightTree=[{dataSourceId:'1273236351590264833',paramSchema:"OPERQRY",tableName:"AB_FRM_ABTRANSDTL"},
// {dataSourceId:'1273236351590264833',paramSchema:"OPERQRY",tableName:"AB_FRM_ABTRANSDTL_0205"}]
this.orgCodeRightTree.forEach((ele,index) => {
getColsByTable({dataSourceId:ele.dataSourceId,paramSchema:ele.paramSchema,tableName:ele.tableName}).then(response => {
// if(index == 0){
// isMain = "1"
// color = 'pink'
// } else {
// isMain = '0'
// color = 'white'
// }
this.nodeDataArray2.push({isGroup:true,key:index,text:ele.tableName,isMain:isMain,color:color})
if (response.data.status == 200) {
response.data.data.forEach((item2,i) => {
this.nodeDataArray2.push({text:item2.COLUMN_NAME,key:`${i}-${index}`,group:index,name:item2.COMMENTS,DATA_TYPE:item2.DATA_TYPE,tableName:ele.tableName})
})
this.leftInitArr();
} else {
this.$message({
showClose: true,
message: "查询失败",
type: "error",
duration: 3000
});
}
});
})
},
mounted() {
var mySelf = this;
go.GraphObject.defineBuilder("TriStateCheckBoxButton", function (args) {
var button = /** @type {Panel} */ (
go.GraphObject.make("Button", {
"ButtonBorder.fill": "white",
width: 14,
height: 14
},
go.GraphObject.make(go.Shape, {
name: "ButtonIcon",
geometryString: 'M0 0 M0 8.85 L4.9 13.75 16.2 2.45 M16.2 16.2', // a 'check' mark
strokeWidth: 2,
stretch: go.GraphObject.Fill, // this Shape expands to fill the Button
geometryStretch: go.GraphObject.Uniform, // the check mark fills the Shape without distortion
background: null,
visible: false // visible set to false: not checked, unless data.checked is true
},
new go.Binding("visible", "checked", function (p) {
return p === true || p === null;
}),
new go.Binding("stroke", "checked", function (p) {
return p === null ? null : "black";
}),
new go.Binding("background", "checked", function (p) {
return p === null ? "gray" : null;
})
)
)
);
function updateCheckBoxesDown(node, val) {
node.diagram.model.setDataProperty(node.data, "checked", val);
node.findTreeChildrenNodes().each(function (child) {
updateCheckBoxesDown(child, val);
})
}
function updateCheckBoxesUp(node) {
var parent = node.findTreeParentNode();
if (parent !== null) {
var anychecked = parent.findTreeChildrenNodes().any(function (n) {
return n.data.checked !== false && n.data.checked !== undefined;
});
var allchecked = parent.findTreeChildrenNodes().all(function (n) {
return n.data.checked === true;
});
node.diagram.model.setDataProperty(parent.data, "checked", (allchecked ? true : (anychecked ? null :
false)));
updateCheckBoxesUp(parent);
}
}
button.click = function (e, button) {
if (!button.isEnabledObject()) return;
var diagram = e.diagram;
if (diagram === null || diagram.isReadOnly) return;
if (diagram.model.isReadOnly) return;
e.handled = true;
var shape = button.findObject("ButtonIcon");
diagram.startTransaction("checkbox");
// Assume the name of the data property is "checked".
var node = button.part;
var oldval = node.data.checked;
var newval = (oldval !== true); // newval will always be either true or false, never null
// Set this data.checked property and those of all its children to the same value
updateCheckBoxesDown(node, newval);
// Walk up the tree and update all of their checkboxes
updateCheckBoxesUp(node);
// support extra side-effects without clobbering the click event handler:
if (typeof button["_doClick"] === "function") button["_doClick"](e, button);
diagram.commitTransaction("checkbox");
};
return button;
});
// 用来配置连线的输出和输入
function checkLink(fn, fp, tn, tp, link) {
if (tn.containingGroup === null || fn.containingGroup === null || fn.containingGroup.data.key === tn.containingGroup.data.key)
return false;
// if (tn.containingGroup === null || tn.containingGroup.data.key !== -2)
// return false;
return true;
}
mySelf.myDiagram = $(go.Diagram, "chart-diagram", {
// initialContentAlignment: go.Spot.Center, // 居中显示
"undoManager.isEnabled": true, // 支持 Ctrl-Z 和 Ctrl-Y 操作
"toolManager.hoverDelay": 100, //tooltip提示显示延时
"toolManager.toolTipDuration": 10000, //tooltip持续显示时间
//isReadOnly:true,//只读
"grid.visible": true, //显示网格
allowMove: true, //允许拖动
// allowDragOut:true,
allowDelete: true,
allowCopy: true,
// allowClipboard: true,//允许剪贴板
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小,而不是向上和向下滚动
"commandHandler.copiesTree": true,
"commandHandler.deletesTree": true,
// "linkingTool.archetypeLinkData": { category: "Mapping" },
"linkingTool.linkValidation": checkLink,
"relinkingTool.linkValidation": checkLink,
ModelChanged: function(e) {
// console.log(e)
if (e.isTransactionFinished) {
// show the model data in the page's TextArea
console.log("数据变化");
// mySelf.saveDataList = JSON.parse(e.model.toJson())
// mySelf.updateArr(e.model.nodeDataArray)
}
}
}); //构建gojs对象
mySelf.init();
mySelf.leftInit();
mySelf.queryMainTabRel()
},
methods: {
queryMainTabRel() {
if(this.getFlexibleId) {
queryMainTabRel({flexibleId:this.getFlexibleId}).then(res => {
console.log(res.data.data.myDiagramJson)
if(res.data.status == '200'){
var data = res.data.data.myDiagramJson
this.myDiagram.model = go.Model.fromJson(data);
this.dataName = res.data.data.rmcpFlexibleMain.flexibleName
var data = []
res.data.data.tabs.forEach(item => {
data.push({
dataSourceId:item.sourceId,
flexibleId:item.flexibleId,
paramSchema:item.schema,
tableName:item.tableName,
})
})
this.$emit('goJsDataFilter', data)
}
})
}
},
info() {
var node = this.myDiagram.selection.first();
},
saveData() {
debugger
var continueL = 0;
if(this.dataName == '') {
this.$message.error('请先输入灵活查询名称!')
return
}
this.saveDataList = JSON.parse(this.myDiagram.model.toJson())
if(this.saveDataList.nodeDataArray.length == 0){
this.$message.error('请添加表后再保存!')
return
}
this.saveDataList.nodeDataArray.forEach(item => {
if(item.isGroup && item.isMain == '1') {
continueL++
}
})
if(continueL == 0){
this.$message.error('请至少设置一张主表')
return
} else if(continueL > 1) {
this.$message.error('只允许有一张主表')
return
}
// 找出被联上的数据表
var parm = {
cols:[],
rels:[],
tabs:[],
rmcpFlexibleMain:{},
}
var data = []
var columnComment = ''
var columnName = ''
var columnType = ''
var flexibleId = this.getFlexibleId || this.flexibleId || ''
var isSelectItem = ''
var schema = 'OPERQRY'
var sourceId = this.sourceId ||'1273236351590264833'
var tableName = ''
var columnNameL = ''
var columnNameR = ''
var columnTypeL = ''
var columnTypeR = ''
var joinType = ''
var schemaL = 'OPERQRY'
var schemaR = 'OPERQRY'
var sourceIdL = '1273236351590264833'
var sourceIdR = '1273236351590264833'
var tableNameL = ''
var tableNameR = ''
// 操作的字段
if(this.saveDataList.linkDataArray.length < 1){
this.saveDataList.nodeDataArray.forEach(item2 => {
if(item2.isGroup) {
parm.tabs.push({flexibleId:flexibleId,
isMain:item2.isMain,
schema:schema,
sourceId:sourceId,
tabPosition:item2.xy,
tableName:item2.text})
data.push({dataSourceId:sourceId,paramSchema:schema,tableName:item2.text})
}
})
} else {
this.saveDataList.linkDataArray.forEach((item,index) => {
this.saveDataList.nodeDataArray.forEach(item2 => {
// columnComment = item2.name
// columnName = item2.text
// columnType = item2.DATA_TYPE
// tableName = item2.tableName
// isSelectItem = item2.checked ? '1' : '0'
// parm.cols.push({columnComment:columnComment,
// columnName:columnName,
// columnType:columnType,
// flexibleId:flexibleId,
// isSelectItem:isSelectItem,
// schema:schema,
// sourceId:sourceId,
// tableName:tableName })
if(item.from == item2.key) {
// 线段数据保存
columnNameL = item2.text
columnTypeL = item2.DATA_TYPE
tableNameL = item2.tableName
// 字段数据保存
// columnComment = item2.name
// columnName = item2.text
// columnType = item2.DATA_TYPE
// tableName = item2.tableName
// isSelectItem = item2.checked ? '1' : '0'
// parm.cols.push({columnComment:columnComment,
// columnName:columnName,
// columnType:columnType,
// flexibleId:flexibleId,
// isSelectItem:isSelectItem,
// schema:schema,
// sourceId:sourceId,
// tableName:tableName })
} else if(item.to == item2.key) {
// 线段数据保存
columnNameR = item2.text
columnTypeR = item2.DATA_TYPE
tableNameR = item2.tableName
// 字段数据保存
// columnComment = item2.name
// columnName = item2.text
// columnType = item2.DATA_TYPE
// tableName = item2.tableName
// isSelectItem = item2.checked ? '1' : '0'
// parm.cols.push({columnComment:columnComment,
// columnName:columnName,
// columnType:columnType,
// flexibleId:flexibleId,
// isSelectItem:isSelectItem,
// schema:schema,
// sourceId:sourceId,
// tableName:tableName })
}
if(item2.isGroup && index==0) {
parm.tabs.push({flexibleId:flexibleId,
isMain:item2.isMain,
schema:schema,
sourceId:sourceId,
tabPosition:item2.xy,
tableName:item2.text})
data.push({dataSourceId:sourceId,paramSchema:schema,tableName:item2.text})
}
})
parm.rels.push({
columnNameL:columnNameL,
columnNameR:columnNameR,
columnTypeL: columnTypeL,
columnTypeR: columnTypeR,
flexibleId: flexibleId,
joinType: item.joinType,
schemaL: "OPERQRY",
schemaR: "OPERQRY",
sourceIdL: "1273236351590264833",
sourceIdR: "1273236351590264833",
tableNameL: tableNameL,
tableNameR: tableNameR
})
})
}
this.saveDataList.nodeDataArray.forEach(item2 => {
if(!item2.isGroup){
columnComment = item2.name
columnName = item2.text
columnType = item2.DATA_TYPE
tableName = item2.tableName
isSelectItem = item2.checked ? '1' : '0'
parm.cols.push({columnComment:columnComment,
columnName:columnName,
columnType:columnType,
flexibleId:flexibleId,
isSelectItem:isSelectItem,
schema:schema,
sourceId:sourceId,
tableName:tableName })
}
})
// // 操作表
// parm.tabs.push({})
// // 线段
// parm.rels.push({})
// 唯一key值和查询名称
parm.rmcpFlexibleMain={flexibleId:flexibleId,flexibleName:this.dataName}
parm.myDiagramJson = this.myDiagram.model.toJson()
// this.saveDataListPush = parm
saveMainTabRel(parm).then(response => {
if (response.data.status == 200) {
this.$message.success('保存成功!')
this.flexibleId = response.data.data
var obj = {}
if(data = []) {
data = [{
dataSourceId:parm.cols[0].sourceId,paramSchema:parm.cols[0].schema,tableName:parm.cols[0].tableName
}]
} else {
// 对象数组去重
data = data.reduce((cur,next) => {
obj[next.tableName] ? "" : obj[next.tableName] = true && cur.push(next);
return cur;
},[])
}
data.forEach(item => {
item.flexibleId = this.flexibleId
})
console.log(data)
this.$emit('goJsDataFilter', data)
} else {
this.$message({
showClose: true,
message: "保存失败",
type: "error",
duration: 3000
});
}
});
},
setMain() {
this.$confirm('是否设置此表为主表?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(this.myDiagram.selection.first().data.isMain == '1'){
this.$message.success('设置成功')
this.myDiagram.selection.first().data.isMain = '1'
this.myDiagram.selection.first().data.color = 'pink'
} else if(this.myDiagram.selection.first().data.isMain == '0') {
var key = this.myDiagram.selection.first().data.key
var arr = JSON.parse(this.myDiagram.model.toJson())
arr.nodeDataArray.forEach(item => {
if(item.isGroup) {
if(item.key == key){
item.isMain='1'
item.color='pink'
} else {
item.isMain='0'
item.color='white'
}
}
})
this.myDiagram.model = go.Model.fromJson(arr);
}
else {
this.$message.error('请选择表进行操作')
}
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
updata(data) {
if(data == 'updata') {
this.delShow = true
} else {
this.delShow = false
}
this.e = this.myDiagram.selection.first()
this.linkDataList = parseInt(this.myDiagram.selection.first().data.count)
this.linkData = true
},
del() {
this.$confirm('是否删除选中元素?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.myDiagram.commandHandler.deleteSelection();
this.linkData = false
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.linkData = false
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
show() {
this.$alert(this.myDiagram.selection.first().data);
console.log(this.myDiagram.model)
},
onSubmit() {},
updateArr(array) {
array.forEach(ele => {
this.nodeDataArray2.forEach(ele2 => {
if(ele.key == ele2.group) {
this.nodeDataArray.push(ele2)
}
})
});
this.init()
},
leftInitArr() {
this.myPalette.model = new go.GraphLinksModel(
this.nodeDataArray2
);
console.log(this.nodeDataArray2)
console.log('触发了')
},
leftInit() {
var mySelf = this;
function TreeNode() {
go.Node.call(this);
this.treeExpandedChanged = function(node) {
if (node.containingGroup !== null) {
node.containingGroup.findExternalLinksConnected().each(function(l) {
l.invalidateRoute();
});
}
};
}
go.Diagram.inherit(TreeNode, go.Node);
TreeNode.prototype.findVisibleNode = function() {
// redirect links to lowest visible "ancestor" in the tree
var n = this;
while (n !== null && !n.isVisible()) {
n = n.findTreeParentNode();
}
return n;
};
mySelf.myPalette = $(go.Diagram, "chart-palette", {
layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
{ angle: 90, layerSpacing: 35 }),
initialContentAlignment: go.Spot.Center, // 居中显示
"toolManager.hoverDelay": 100, //tooltip提示显示延时
"toolManager.toolTipDuration": 10000, //tooltip持续显示时间
allowMove: false, //允许拖动
// isReadOnly:true,//只读
allowDragOut: true,
// allowDelete: true,
allowCopy: true,
allowClipboard: true,
// "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小,而不是向上和向下滚动
// "commandHandler.copiesTree": true,
// "commandHandler.deletesTree": true,
// model: new go.GraphLinksModel(mySelf.nodeDataArray2, mySelf.linkDataArray2)
});
var show = false
function changeShow() {
mySelf.myPalette.nodeTemplate = $(
TreeNode,
// { movable: false, copyable: true, deletable: false},
// { selectionAdorned: false },
{ movable: false, copyable: true, deletable: false ,fromLinkable: false,toLinkable: false, visible:show},
{ selectionAdorned: false },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// $("TreeExpanderButton", {
// width: 14,
// height: 14,
// "ButtonIcon.stroke": "white",
// "ButtonIcon.strokeWidth": 4,
// "ButtonBorder.fill": "goldenrod",
// "ButtonBorder.stroke": null,
// "ButtonBorder.figure": "Rectangle",
// _buttonFillOver: "darkgoldenrod",
// _buttonStrokeOver: null,
// _buttonFillPressed: null
// }),
$(
go.Panel,
"Horizontal",
{ position: new go.Point(16, 0) },
$(go.TextBlock, new go.Binding("text"))
)
);
}
mySelf.myPalette.groupTemplate = $(
go.Group,
"Auto",
// new go.Binding("position", "xy", go.Point.parse).makeTwoWay(
// go.Point.stringify
// ),
{
deletable: false,
layout: $(go.TreeLayout, {
alignment: go.TreeLayout.AlignmentStart,
angle: 0,
compaction: go.TreeLayout.CompactionNone,
layerSpacing: 10,
layerSpacingParentOverlap: 1,
nodeIndentPastParent: 1.0,
nodeSpacing: 2,
setsPortSpot: false,
setsChildPortSpot: false
})
},
$(go.Shape, { fill: "white", stroke: "lightgray" }),
$(
go.Panel,
"Vertical",
{ defaultAlignment: go.Spot.Left },
$(
go.TextBlock,
{ font: "bold 14pt sans-serif", margin: new go.Margin(5, 5, 0, 5) },
new go.Binding("text")
),
$(go.Placeholder, { padding: 5 })
),
{
doubleClick: function(e, node) {
// 双击事件
changeShow()
show = !show; //双击执行的方法
}
}
);
changeShow()
},
updataJson() {
if(this.linkDataList == '1') {
this.e.data.text = '内连接'
this.e.data.joinType = 'inner'
this.e.data.count = '1'
} else if(this.linkDataList == '2') {
this.e.data.text = '左连接'
this.e.data.joinType = 'left'
this.e.data.count = '2'
} else if(this.linkDataList == '3') {
this.e.data.text = '右连接'
this.e.data.joinType = 'right'
this.e.data.count = '3'
} else {
this.e.data.text = '全连接'
this.e.data.joinType = 'full'
this.e.data.count = '4'
}
var data = this.myDiagram.model.toJson()
this.myDiagram.model = go.Model.fromJson(data);
},
updataLink(e) {
this.linkDataList = []
this.delShow = false
this.linkData = true
this.e = e.subject
},
addLinkData() {
this.linkData = false
console.log(this.linkDataList)
this.updataJson();
},
init() {
var mySelf = this;
function MappingLink() {
go.Link.call(this);
}
go.Diagram.inherit(MappingLink, go.Link);
MappingLink.prototype.getLinkPoint = function(
node,
port,
spot,
from,
ortho,
othernode,
otherport
) {
var r = port.getDocumentBounds();
var group = node.containingGroup;
var b = group !== null ? group.actualBounds : node.actualBounds;
var op = othernode.getDocumentPoint(go.Spot.Center);
var x = op.x > r.centerX ? b.right : b.left;
return new go.Point(x, r.centerY);
};
function TreeNode() {
go.Node.call(this);
this.treeExpandedChanged = function(node) {
if (node.containingGroup !== null) {
node.containingGroup.findExternalLinksConnected().each(function(l) {
l.invalidateRoute();
});
}
};
}
go.Diagram.inherit(TreeNode, go.Node);
TreeNode.prototype.findVisibleNode = function() {
// redirect links to lowest visible "ancestor" in the tree
var n = this;
while (n !== null && !n.isVisible()) {
n = n.findTreeParentNode();
}
return n;
};
mySelf.myDiagram.nodeTemplate = $(
TreeNode,
// go.Node,'Auto',
{ movable: false, copyable: false, deletable: true ,fromLinkable: true,toLinkable: true},
{ selectionAdorned: false },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$("TriStateCheckBoxButton"),
// $("TreeExpanderButton", {
// width: 24,
// height: 24,
// "ButtonIcon.stroke": "white",
// "ButtonIcon.strokeWidth": 4,
// "ButtonBorder.fill": "goldenrod",
// "ButtonBorder.stroke": null,
// "ButtonBorder.figure": "Rectangle",
// _buttonFillOver: "darkgoldenrod",
// _buttonStrokeOver: null,
// _buttonFillPressed: null
// }),
$(
go.Panel,
"Horizontal",
{ position: new go.Point(16, 0) },
$(go.TextBlock, new go.Binding("text")),
{
doubleClick: function(e, node) {
// 双击事件
console.log(node.part); //双击执行的方法
}
}
),
new go.Binding("text", "text").makeTwoWay()
);
mySelf.myDiagram.linkTemplate =
$(go.Link, // the whole link panel
// { curve: go.Link.Bezier, reshapable: true },
// don't need to save Link.points, so don't need TwoWay Binding on "points"
new go.Binding("curviness", "curviness").makeTwoWay(), // but save "curviness" automatically
$(go.Shape, // the link shape
{ strokeWidth: 1.5 }),
$(go.Shape, // the arrowhead
{ toArrow: "standard", stroke: null }),
$(go.Panel, "Auto",
$(go.Shape, // the label background, which becomes transparent around the edges
{
fill: $(go.Brush, "Radial",
{ 0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240, 0)" }),
stroke: null
}),
$(go.TextBlock, "请编辑关系", // the label text
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "black",
margin: 4,
editable: false // editing the text automatically updates the model data
},
new go.Binding("text", "text").makeTwoWay()
),{
doubleClick: function(e, node) {
// 连线双击事件
// console.log(node.part); //双击执行的方法
mySelf.updata('updata')
}
}
)
);
// mySelf.myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
mySelf.myDiagram.linkTemplateMap.add(
"Mapping",
$(
MappingLink,
{
isTreeLink: false,
isLayoutPositioned: false,
layerName: "Foreground"
},
{ fromSpot: go.Spot.Right, toSpot: go.Spot.Left },
{ relinkableFrom: true, relinkableTo: true },
$(go.Shape, { stroke: "blue", strokeWidth: 2 })
)
);
// 树状节点排列设置
mySelf.myDiagram.groupTemplate = $(
go.Group,
"Auto",
new go.Binding("position", "xy", go.Point.parse).makeTwoWay(
go.Point.stringify
),
{
deletable: true,
layout: $(go.TreeLayout, {
alignment: go.TreeLayout.AlignmentStart,
angle: 0,
compaction: go.TreeLayout.CompactionNone,
layerSpacing: 16,
layerSpacingParentOverlap: 1,
nodeIndentPastParent: 1.0,
nodeSpacing: 0,
setsPortSpot: false,
setsChildPortSpot: false
})
},
$(go.Shape, { fill: "white", stroke: "lightgray" }
,new go.Binding("fill", "color"),),
$(
go.Panel,
"Vertical",
{ defaultAlignment: go.Spot.Left },
$(
go.TextBlock,
{ font: "bold 14pt sans-serif", margin: new go.Margin(5, 5, 0, 5) },
new go.Binding("text")
),
$(go.Placeholder, { padding: 5 })
),{
doubleClick: function(e, node) {
// 双击事件
mySelf.setMain()
console.log(node)
//双击执行的方法
}
}
);
// 新连线监听
mySelf.myDiagram.addDiagramListener("LinkDrawn", function(e) {
mySelf.updataLink(e)
});
mySelf.myDiagram.model = new go.GraphLinksModel(
mySelf.nodeDataArray,
mySelf.linkDataArray
);
}
}
};
</script>
<style lang="scss" scoped>
#form-wrap {
padding: 20px 40px;
// background-color: white;
border: solid 1px rgb(244, 244, 244);
}
#submit {
width: 102px;
height: 40px;
float: right;
margin: 20px 5px 16px 0;
}
#chart-wrap {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 22px;
#chart-palette {
width: 180px;
margin-right: 30px;
background-color: white;
border: solid 1px rgb(244, 244, 244);
}
#chart-diagram {
flex-grow: 1;
height: 720px;
background-color: white;
border: solid 1px rgb(244, 244, 244);
}
}
#lateEntry {
clear: both;
background-color: rgb(255, 255, 255);
border: solid 1px rgb(244, 244, 244);
> span {
display: inline-block;
height: 50px;
font-size: 16px;
line-height: 50px;
text-indent: 30px;
letter-spacing: 0.8px;
text-align: left;
color: rgb(35, 35, 35);
// border-bottom: 1px solid rgb(234, 234, 234);
}
}
</style>